/* === AutoQuiz CSS bloque 1 === */
:root {
  --verde:#58cc02; --verde-d:#45a800; --verde-l:#d7ffb8;
  --azul:#1cb0f6;  --azul-d:#0099d4; --azul-l:#ddf4ff;
  --rojo:#ff4b4b;  --rojo-l:#ffd4d4;
  --naranja:#ff9600;
  --morado:#9b59b6; --morado-d:#7d3c98; --morado-l:#f0e6f6;
  --cyan:#00b8d4;   --cyan-d:#007c8a;   --cyan-l:#e0f7fa;
  --gris:#afafaf; --gris-l:#f7f7f7; --gris-d:#777;
  --texto:#3c3c3c; --texto-s:#777; --borde:#e5e5e5;
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; font-family:'Segoe UI',system-ui,sans-serif; background:#f0f4f8; color:var(--texto); -webkit-tap-highlight-color:transparent; }
.pantalla { display:none; min-height:100vh; flex-direction:column; }
.pantalla.activa { display:flex; }

/* ── INICIO ── */
#p-inicio { background:linear-gradient(160deg,#e8f9d0,#fff 60%); align-items:center; justify-content:center; padding:24px; }
.logo { font-size:52px; text-align:center; margin-bottom:8px; }
.tit-app { font-size:26px; font-weight:800; text-align:center; margin-bottom:6px; }
.sub-app { color:var(--texto-s); text-align:center; font-size:14px; margin-bottom:28px; line-height:1.5; }
.form { width:100%; max-width:360px; }
.campo { margin-bottom:14px; }
.campo label { display:block; font-weight:700; font-size:11px; color:var(--texto-s); text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
.campo input, .campo select { width:100%; padding:13px 15px; border:2px solid var(--borde); border-radius:12px; font-size:16px; background:#fff; outline:none; color:var(--texto); transition:border-color .2s; }
.campo input:focus, .campo select:focus { border-color:var(--verde); }
.btn-ok { width:100%; padding:15px; background:var(--verde); color:#fff; border:none; border-bottom:4px solid var(--verde-d); border-radius:14px; font-size:16px; font-weight:800; cursor:pointer; }
.btn-ok:active { border-bottom-width:2px; transform:translateY(2px); }

/* ── HEADER GLOBAL ── */
.app-hdr { background:#fff; border-bottom:2px solid var(--borde); padding:10px 16px; position:sticky; top:0; z-index:100; }
.hdr-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.hdr-nombre { font-size:14px; font-weight:700; }
.hdr-rango  { font-size:11px; color:var(--texto-s); font-weight:600; }
.hdr-fac    { font-size:11px; color:var(--texto-s); display:none !important; }
.stats-row  { display:flex; gap:8px; }
.chip { display:flex; align-items:center; gap:4px; background:var(--gris-l); border-radius:20px; padding:4px 11px; font-size:13px; font-weight:700; }
.chip.xp    { color:var(--naranja); }
.chip.racha { color:var(--rojo); }
.chip.monedas { color:#00b8d4; }

/* ── PANTALLA: RUTAS PRINCIPALES ── */
#p-rutas { background:#f0f4f8; }
.rutas-body { flex:1; overflow-y:auto; padding:14px 14px 80px; }
.racha-banner { background:linear-gradient(135deg,#ff6b35,#ff4b4b); color:#fff; border-radius:14px; padding:12px 15px; margin-bottom:14px; display:flex; align-items:center; gap:11px; }
.racha-fuego { font-size:26px; }
.racha-info h3 { font-size:13px; font-weight:800; }
.racha-info p  { font-size:11px; opacity:.85; margin-top:1px; }
.racha-aviso { display:none; background:#fff; border-radius:14px; padding:12px 14px; margin:-4px 0 14px; border:2px solid var(--borde); box-shadow:0 2px 8px rgba(0,0,0,.05); font-size:13px; font-weight:700; line-height:1.4; }
.racha-aviso.ok { border-color:var(--azul); background:var(--azul-l); color:var(--azul-d); }
.racha-aviso.mal { border-color:var(--rojo); background:var(--rojo-l); color:var(--rojo); }
.racha-aviso.warn { border-color:var(--naranja); background:#fff3e0; color:#cc7a00; }
/* Inicio compacto: la racha ya se muestra en el encabezado; ocultamos la tarjeta repetida. */
#p-rutas .racha-banner, #p-rutas .racha-aviso { display:none !important; }
.secc { font-size:12px; font-weight:800; color:var(--texto-s); text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }
.rutas-grid { display:flex; flex-direction:column; gap:10px; }

.ruta-card { background:#fff; border-radius:16px; padding:15px; border:2px solid var(--borde); border-bottom:4px solid var(--borde); cursor:pointer; display:flex; align-items:center; gap:13px; transition:all .15s; }
.ruta-card:active { transform:translateY(2px); border-bottom-width:2px; }
.ruta-card.c1 { border-color:var(--verde);  border-bottom-color:var(--verde-d); }
.ruta-card.c2 { border-color:var(--morado); border-bottom-color:var(--morado-d); }
.ruta-card.c3 { border-color:var(--azul);   border-bottom-color:var(--azul-d); }
.ruta-card.c4 { border-color:var(--naranja); border-bottom-color:#cc7a00; }
.ruta-card.c5 { border-color:var(--cyan);   border-bottom-color:var(--cyan-d); }

.r-ico { width:52px; height:52px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:26px; flex-shrink:0; }
.c1 .r-ico { background:var(--verde-l); }
.c2 .r-ico { background:var(--morado-l); }
.c3 .r-ico { background:var(--azul-l); }
.c4 .r-ico { background:#fff3e0; }
.c5 .r-ico { background:var(--cyan-l); }

.r-info { flex:1; }
.r-nombre    { font-size:15px; font-weight:800; margin-bottom:3px; }
.r-prog-txt  { font-size:11px; color:var(--texto-s); margin-bottom:5px; }
.barra       { height:7px; background:var(--gris-l); border-radius:4px; overflow:hidden; }
.barra-fill  { height:100%; border-radius:4px; transition:width .5s; }
.c1 .barra-fill { background:var(--verde); }
.c2 .barra-fill { background:var(--morado); }
.c3 .barra-fill { background:var(--azul); }
.c4 .barra-fill { background:var(--naranja); }
.c5 .barra-fill { background:var(--cyan); }
.r-flecha { font-size:20px; color:var(--gris); }

/* ── PANTALLA: SUBRUTAS ── */
#p-subrutas { background:#f0f4f8; }
.nav-hdr { background:#fff; border-bottom:2px solid var(--borde); padding:11px 15px; display:flex; align-items:center; gap:11px; }
.btn-back { width:34px; height:34px; border:none; background:var(--gris-l); border-radius:9px; cursor:pointer; font-size:17px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.nav-tit     { font-size:16px; font-weight:800; }
.nav-sub-txt { font-size:11px; color:var(--texto-s); margin-top:1px; }
.subrutas-body { flex:1; overflow-y:auto; padding:14px 14px 80px; }
.sr-banner { border-radius:13px; padding:14px 18px; margin-bottom:16px; border-bottom:4px solid rgba(0,0,0,.15); }
.sr-banner h2 { font-size:17px; font-weight:800; color:#fff; }
.sr-banner p  { font-size:12px; color:rgba(255,255,255,.85); margin-top:2px; }
.subrutas-grid { display:flex; flex-direction:column; gap:10px; }
.sr-card { background:#fff; border-radius:14px; padding:14px 15px; border:2px solid var(--borde); border-bottom:3px solid var(--borde); cursor:pointer; display:flex; align-items:center; gap:12px; transition:all .15s; }
.sr-card:active { transform:translateY(1px); border-bottom-width:1px; }
.sr-ico  { width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; background:var(--gris-l); }
.sr-info { flex:1; }
.sr-nombre  { font-size:14px; font-weight:800; margin-bottom:3px; }
.sr-prog    { font-size:11px; color:var(--texto-s); margin-bottom:4px; }
.sr-barra   { height:6px; background:var(--gris-l); border-radius:3px; overflow:hidden; }
.sr-barra-fill { height:100%; border-radius:3px; }
.sr-flecha  { font-size:18px; color:var(--gris); }

/* ── PANTALLA: MAPA DE NIVELES ── */
#p-mapa { background:#fff; overflow-x:hidden; }
.mapa-body { flex:1; overflow-y:auto; padding:18px 56px 80px; position:relative; }
.niv-banner { border-radius:13px; padding:14px 18px; margin-bottom:20px; border-bottom:4px solid rgba(0,0,0,.15); }
.niv-banner h2 { font-size:16px; font-weight:800; color:#fff; }
.niv-banner p  { font-size:12px; color:rgba(255,255,255,.85); margin-top:2px; }
.niveles-wrap { display:flex; flex-direction:column; align-items:center; }
.niv-item { position:relative; display:flex; flex-direction:column; align-items:center; margin-bottom:6px; }
.niv-btn { width:68px; height:68px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff; box-shadow:0 4px 0 rgba(0,0,0,.15); transition:all .15s; }
.niv-btn:active { box-shadow:0 2px 0 rgba(0,0,0,.15); transform:translateY(2px); }
.nb-c { background:var(--verde); }
.nb-d { background:var(--azul); }
.nb-b { background:var(--gris); cursor:not-allowed; }
.nb-b:active { transform:none; box-shadow:0 4px 0 rgba(0,0,0,.15); }
@keyframes pulso {
  0%,100% { box-shadow:0 4px 0 rgba(0,0,0,.15), 0 0 0 0 rgba(28,176,246,.4); }
  50%      { box-shadow:0 4px 0 rgba(0,0,0,.15), 0 0 0 9px rgba(28,176,246,0); }
}
.nb-d { animation:pulso 2s ease-in-out infinite; }
.niv-lbl    { margin-top:5px; font-size:12px; font-weight:700; text-align:center; max-width:100px; }
.niv-lbl.bl { color:var(--gris); }

/* ── CLASES GRABADAS VINCULADAS A LECCIONES ── */
.clase-video-btn {
  position:absolute; top:25px; right:-43px; transform:translateY(-50%);
  width:34px; height:34px; border-radius:11px; border:2px solid #7c4dff;
  border-bottom:4px solid #5e35b1; background:linear-gradient(145deg,#f5f0ff,#fff);
  display:flex; align-items:center; justify-content:center; font-size:17px; line-height:1;
  cursor:pointer; box-shadow:0 4px 11px rgba(94,53,177,.22); z-index:12;
  transition:transform .14s ease,box-shadow .14s ease,opacity .14s ease;
}
.clase-video-btn::after {
  content:"Clase"; position:absolute; top:35px; left:50%; transform:translateX(-50%);
  color:#6a45b8; font-size:8px; font-weight:950; white-space:nowrap;
}
.clase-video-btn:active:not(:disabled) { transform:translateY(calc(-50% + 2px)); border-bottom-width:2px; box-shadow:0 2px 6px rgba(94,53,177,.2); }
.clase-video-btn.recomendada { animation:claseVideoPulso 2.1s ease-in-out infinite; }
.clase-video-btn:disabled {
  cursor:default; opacity:.42; filter:grayscale(1); border-color:#aeb7bd; border-bottom-color:#87939a;
  background:#eef1f3; box-shadow:none;
}
.clase-video-btn:disabled::after { color:#7f8a91; }
@keyframes claseVideoPulso {
  0%,100% { box-shadow:0 4px 11px rgba(94,53,177,.22),0 0 0 0 rgba(124,77,255,.28); }
  50% { box-shadow:0 4px 13px rgba(94,53,177,.3),0 0 0 8px rgba(124,77,255,0); }
}
@media (max-width:380px) {
  .clase-video-btn { right:-39px; width:32px; height:32px; font-size:16px; }
}
@media (prefers-reduced-motion:reduce) {
  .clase-video-btn.recomendada { animation:none; }
}
.niv-con    { width:3px; height:18px; background:var(--borde); }
.bubble { background:#fff; border:2px solid var(--azul); border-radius:9px; padding:4px 10px; font-size:11px; font-weight:800; color:var(--azul); position:absolute; top:-32px; white-space:nowrap; }
.bubble::after { content:''; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%); border:4px solid transparent; border-top-color:var(--azul); }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.bubble { animation:bounce 1.2s ease-in-out infinite; }

/* ── QUIZ ── */
#p-quiz { background:#fff; }
.quiz-hdr { display:flex; align-items:center; gap:11px; padding:11px 15px; border-bottom:2px solid var(--borde); background:#fff; position:sticky; top:0; z-index:100; }
.btn-x { width:34px; height:34px; border:none; background:none; cursor:pointer; font-size:19px; color:var(--gris-d); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.prog-wrap { flex:1; height:14px; background:var(--borde); border-radius:7px; overflow:hidden; }
.prog-fill { height:100%; background:var(--verde); border-radius:7px; transition:width .4s; }
.vidas { display:flex; gap:4px; flex-shrink:0; }
.cor { font-size:22px; transition:all .3s; }
.cor.off { opacity:.2; filter:grayscale(1); }
.quiz-body { flex:1; overflow-y:auto; padding:20px 18px 0; }
.puntos-racha { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:14px; }
.punto { width:10px; height:10px; border-radius:50%; background:var(--borde); transition:all .3s; }
.punto.ok  { background:var(--verde); }
.punto.mal { background:var(--rojo); }
.preg-n { font-size:11px; color:var(--texto-s); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:9px; }
.preg-t { font-size:19px; font-weight:800; line-height:1.35; margin-bottom:24px; }
.opciones { display:flex; flex-direction:column; gap:10px; padding-bottom:20px; }
.op { width:100%; padding:14px 16px; border:2px solid var(--borde); border-bottom:3px solid var(--borde); background:#fff; border-radius:14px; cursor:pointer; text-align:left; font-size:15px; font-weight:600; color:var(--texto); display:flex; align-items:center; gap:12px; transition:all .12s; }
.op:hover:not(:disabled) { border-color:var(--azul); background:var(--azul-l); }
.op.sel  { border-color:var(--azul);  background:var(--azul-l); }
.op.ok   { border-color:var(--verde); background:var(--verde-l); color:var(--verde-d); }
.op.mal  { border-color:var(--rojo);  background:var(--rojo-l);  color:var(--rojo); }
.op:disabled { cursor:default; }
.letra-op { width:30px; height:30px; border-radius:8px; border:2px solid currentColor; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; }
.quiz-footer { padding:14px 16px; background:#fff; border-top:2px solid var(--borde); position:sticky; bottom:0; }
.quiz-footer.ok  { background:var(--verde-l); border-top-color:var(--verde); }
.quiz-footer.mal { background:var(--rojo-l);  border-top-color:var(--rojo); }
.fb-t { font-size:16px; font-weight:800; margin-bottom:5px; display:none; }
.fb-t.ok  { color:var(--verde-d); }
.fb-t.mal { color:var(--rojo); }
.fb-s { font-size:12px; color:var(--texto-s); margin-bottom:10px; line-height:1.4; display:none; }
.xp-m { font-size:11px; font-weight:800; color:var(--naranja); height:16px; margin-bottom:4px; }
.btn-c { width:100%; padding:15px; border-radius:14px; border:none; font-size:16px; font-weight:800; cursor:pointer; transition:all .1s; border-bottom:4px solid transparent; }
.btn-c.off   { background:var(--gris-l); color:var(--gris); cursor:default; border-bottom-color:#ddd; }
.btn-c.listo { background:var(--azul);   color:#fff; border-bottom-color:var(--azul-d); }
.btn-c.listo:active { border-bottom-width:2px; transform:translateY(2px); }
.btn-c.sig   { background:var(--verde);  color:#fff; border-bottom-color:var(--verde-d); }
.btn-c.sig:active   { border-bottom-width:2px; transform:translateY(2px); }
.btn-c.retry { background:var(--rojo);   color:#fff; border-bottom-color:#cc0000; }
.btn-c.retry:active { border-bottom-width:2px; transform:translateY(2px); }
.btn-reportar { height:30px; padding:0 10px; border:1.5px solid var(--borde); background:#fff; color:var(--texto-s); border-radius:999px; font-size:11px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:4px; white-space:nowrap; flex-shrink:0; }
.btn-reportar:active { transform:translateY(1px); }
.btn-reportar.enviado { border-color:var(--verde); color:var(--verde-d); background:var(--verde-l); }
.btn-reportar:disabled { opacity:.75; cursor:default; }
.sr-card-bloq { opacity:.7; cursor:pointer; }

/* ── TUTORIAL TOOLTIP ── */
.tuto-overlay { position:fixed; inset:0; z-index:800; pointer-events:none; }
.tuto-fondo { position:absolute; inset:0; background:rgba(0,0,0,.0); pointer-events:none; }
.tuto-bubble { position:absolute; background:#fff; border-radius:18px; padding:18px 20px; max-width:280px; box-shadow:0 8px 32px rgba(0,0,0,.22); z-index:801; pointer-events:all; }
/* ── FASE 3: recorrido inicial práctico ── */
.rec2-overlay { position:fixed; inset:0; z-index:820; pointer-events:none; }
.rec2-modal-fondo { position:fixed; inset:0; z-index:830; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; padding:20px; pointer-events:all; }
.rec2-modal { background:#fff; border-radius:20px; padding:22px 20px; max-width:340px; width:100%; text-align:center; box-shadow:0 16px 50px rgba(0,0,0,.35); animation:rec2pop .25s ease; }
@keyframes rec2pop { from { transform:scale(.92); opacity:0; } to { transform:scale(1); opacity:1; } }
.rec2-ico { font-size:40px; margin-bottom:8px; }
.rec2-tit { font-size:18px; font-weight:900; margin-bottom:8px; color:#1a1a2e; }
.rec2-txt { font-size:13.5px; font-weight:700; color:#555; line-height:1.55; margin-bottom:16px; text-align:left; }
.rec2-btn { width:100%; padding:13px; border:none; border-radius:13px; font-size:14.5px; font-weight:900; cursor:pointer; margin-top:8px; }
.rec2-btn.p { background:#58cc02; color:#fff; border-bottom:4px solid #45a800; }
.rec2-btn.s { background:var(--gris-l); color:var(--texto-s); }
.rec2-bubble { position:absolute; background:#fff; border-radius:16px; padding:15px 16px; max-width:270px; box-shadow:0 8px 32px rgba(0,0,0,.25); pointer-events:all; border:2px solid #58cc02; }
.rec2-bubble .rec2-b-tit { font-size:14px; font-weight:900; margin-bottom:5px; }
.rec2-bubble .rec2-b-txt { font-size:12.5px; font-weight:700; color:#555; line-height:1.5; }
.rec2-bubble .rec2-b-omitir { display:block; margin-top:10px; font-size:11px; font-weight:800; color:#999; cursor:pointer; text-align:right; }
.rec2-resalte { position:relative; z-index:825 !important; animation:rec2pulso 1.4s ease infinite; border-radius:16px; }
@keyframes rec2pulso { 0%,100% { box-shadow:0 0 0 4px rgba(88,204,2,.55); } 50% { box-shadow:0 0 0 10px rgba(88,204,2,.12); } }
.tuto-bubble::after { content:''; position:absolute; border:10px solid transparent; }
.tuto-bubble.flecha-abajo::after { border-top-color:#fff; top:100%; left:50%; transform:translateX(-50%); }
.tuto-bubble.flecha-arriba::after { border-bottom-color:#fff; bottom:100%; left:50%; transform:translateX(-50%); }
.tuto-bubble.flecha-der::after { border-left-color:#fff; left:100%; top:28px; }
.tuto-ico { font-size:32px; margin-bottom:8px; }
.tuto-titulo { font-size:15px; font-weight:800; margin-bottom:5px; }
.tuto-texto { font-size:13px; color:var(--texto-s); line-height:1.5; margin-bottom:14px; }
.tuto-btn { width:100%; padding:11px; background:var(--verde); color:#fff; border:none; border-radius:12px; font-size:14px; font-weight:800; cursor:pointer; }
.tuto-skip { display:block; text-align:center; margin-top:10px; font-size:12px; color:var(--gris); cursor:pointer; }

/* ── COMPARTIR ── */
.compartir-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:700; display:flex; align-items:flex-end; justify-content:center; }
.compartir-card { background:#fff; border-radius:24px 24px 0 0; padding:28px 24px 44px; width:100%; max-width:440px; text-align:center; }
.compartir-badge { background:linear-gradient(135deg,#ff6b00,#ffb700); color:#fff; border-radius:18px; padding:28px 24px; margin-bottom:20px; position:relative; overflow:hidden; }
.compartir-badge::before { content:'🏆'; position:absolute; font-size:90px; opacity:.1; top:-10px; right:-10px; transform:rotate(15deg); }
.compartir-badge-ico { font-size:52px; margin-bottom:8px; }
.compartir-badge-tit { font-size:20px; font-weight:800; margin-bottom:4px; }
.compartir-badge-sub { font-size:13px; opacity:.9; line-height:1.4; }
.compartir-badge-app { font-size:11px; opacity:.7; margin-top:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.compartir-btns { display:flex; flex-direction:column; gap:10px; }
.compartir-btn { padding:14px; border:none; border-radius:14px; font-size:15px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; }
.compartir-btn.principal { background:var(--verde); color:#fff; }
.compartir-btn.secundario { background:var(--gris-l); color:var(--texto); }

/* ── AMIGOS ── */
#p-amigos { background:#f0f4f8; }
.amigos-body { flex:1; overflow-y:auto; padding:14px 14px 80px; }
.amigo-card { background:#fff; border-radius:14px; padding:13px 14px; display:flex; align-items:center; gap:12px; border:2px solid var(--borde); margin-bottom:8px; }
.amigo-avatar { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; border:2px solid var(--borde); overflow:hidden; flex-shrink:0; }
.amigo-info { flex:1; min-width:0; }
.amigo-nombre { font-size:14px; font-weight:800; }
.amigo-facultad { font-size:11px; color:var(--texto-s); margin-top:1px; }
.amigo-stats { display:flex; gap:8px; margin-top:4px; flex-wrap:wrap; }
.amigo-stat { font-size:11px; font-weight:700; color:var(--texto-s); }
.btn-amigo { border:none; border-radius:10px; padding:7px 12px; font-size:12px; font-weight:800; cursor:pointer; flex-shrink:0; }
.btn-amigo.agregar { background:var(--azul-l); color:var(--azul); }
.btn-amigo.ya-amigo { background:var(--verde-l); color:var(--verde-d); }
.btn-amigo.quitar { background:var(--rojo-l); color:var(--rojo); }
.perfil-pub-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:500; display:flex; align-items:flex-end; }
.perfil-pub-card { background:#fff; border-radius:20px 20px 0 0; padding:24px 20px 40px; width:100%; max-height:85vh; overflow-y:auto; }
.perfil-pub-avatar { width:70px; height:70px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:34px; border:3px solid var(--verde); margin:0 auto 10px; overflow:hidden; }
.perfil-pub-nombre { font-size:18px; font-weight:800; text-align:center; }
.perfil-pub-fac { font-size:12px; color:var(--texto-s); text-align:center; margin-top:3px; }
.perfil-pub-stats { display:flex; gap:10px; justify-content:center; margin:14px 0; flex-wrap:wrap; }
.perfil-pub-stat { background:var(--gris-l); border-radius:10px; padding:8px 14px; text-align:center; }
.perfil-pub-stat .v { font-size:16px; font-weight:800; }
.perfil-pub-stat .l { font-size:10px; color:var(--texto-s); }
.perfil-pub-mascota {
  margin:12px 0 2px; padding:11px 13px; border:2px solid #bfe6f8; border-radius:15px;
  background:linear-gradient(135deg,#edfaff,#fff); display:flex; align-items:center; gap:12px;
}
.perfil-pub-mascota img { width:62px; height:62px; object-fit:contain; flex-shrink:0; }
.perfil-pub-mascota-nom { font-size:14px; font-weight:900; color:var(--texto); }
.perfil-pub-mascota-etapa { font-size:11px; color:var(--texto-s); font-weight:800; margin-top:2px; text-transform:capitalize; }
.vitrina-publica-seccion { margin-top:15px; }
.vitrina-publica-tit { font-size:12px; font-weight:900; color:var(--texto-s); margin-bottom:7px; }
.vitrina-publica-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.vitrina-publica-item {
  min-width:0; padding:8px 9px; border-radius:12px; display:flex; align-items:center; gap:8px;
  background:#fff9df; border:1.5px solid #efd36a;
}
.vitrina-publica-item.insignia { background:#eef8ff; border-color:#9dd7f2; }
.vitrina-publica-item.logro { background:#eefaea; border-color:#a7df91; }
.vitrina-publica-ico { font-size:22px; flex-shrink:0; }
.vitrina-publica-nom { font-size:10.5px; line-height:1.22; font-weight:900; color:var(--texto); overflow-wrap:anywhere; }
.vitrina-publica-sub { font-size:9px; line-height:1.2; color:var(--texto-s); font-weight:700; margin-top:2px; }


.logros-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.logros-counter { font-size:12px; font-weight:800; color:var(--texto-s); background:var(--gris-l); border-radius:99px; padding:4px 10px; }
.logros-grid { display:flex; flex-direction:column; gap:8px; }
.perfil-toggle-card { width:100%; background:#fff; border:2px solid var(--borde); border-bottom:4px solid var(--borde); border-radius:14px; padding:13px 15px; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; font-size:13px; font-weight:800; color:var(--texto); text-align:left; }
.perfil-toggle-card:active { transform:translateY(1px); border-bottom-width:2px; }
.perfil-toggle-sub { display:block; font-size:11px; color:var(--texto-s); font-weight:700; margin-top:2px; }
.perfil-acordeon-body { display:none; margin-bottom:12px; }
.perfil-acordeon-body.abierto { display:block; }
.perfil-mini-count { background:var(--gris-l); color:var(--texto-s); border-radius:999px; padding:4px 10px; font-size:11px; font-weight:900; white-space:nowrap; }
.perfil-mascotas-resumen { background:#fff; border:2px solid var(--borde); border-radius:14px; padding:12px 14px; margin-bottom:10px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.logro-card { background:#fff; border-radius:14px; padding:12px 14px; display:flex; align-items:center; gap:12px; border:2px solid var(--borde); }
.logro-card.desbloqueado { border-color:var(--verde); background:var(--verde-l); }
.logro-card.bloqueado { opacity:.7; }
.logro-ico { font-size:26px; flex-shrink:0; width:34px; text-align:center; }
.logro-info { flex:1; min-width:0; }
.logro-nombre { font-size:13px; font-weight:800; }
.logro-desc { font-size:11px; color:var(--texto-s); margin-top:1px; }
.logro-prog { font-size:11px; color:var(--azul); font-weight:700; margin-top:3px; }
.logro-barra-wrap { height:5px; background:var(--borde); border-radius:3px; margin-top:4px; overflow:hidden; }
.logro-barra-fill { height:100%; background:var(--azul); border-radius:3px; }
.logro-badge { font-size:11px; font-weight:800; color:var(--verde-d); flex-shrink:0; text-align:right; }
.logro-fecha { font-size:10px; color:var(--texto-s); margin-top:2px; }
.logro-diamantes { font-size:11px; font-weight:800; color:var(--naranja); }
.toast-logro { position:fixed; bottom:90px; left:50%; transform:translateX(-50%); background:#1a1a2e; color:#fff; padding:12px 18px; border-radius:14px; font-size:13px; font-weight:800; z-index:9999; max-width:88%; text-align:center; box-shadow:0 4px 20px rgba(0,0,0,.35); pointer-events:none; opacity:0; transition:opacity .3s; }
.toast-logro.visible { opacity:1; }

/* ── RESULTADO ── */
#p-resultado { background:#fff; align-items:center; justify-content:center; padding:22px; overflow-y:auto; }
.res-ico  { font-size:72px; text-align:center; margin-bottom:12px; }
.res-tit  { font-size:23px; font-weight:800; text-align:center; margin-bottom:6px; }
.res-sub  { text-align:center; color:var(--texto-s); font-size:14px; margin-bottom:20px; }
.res-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:340px; margin-bottom:20px; }
.sc { background:var(--gris-l); border-radius:12px; padding:12px; text-align:center; border:2px solid var(--borde); }
.sc .v { font-size:24px; font-weight:800; }
.sc .l { font-size:11px; color:var(--texto-s); font-weight:600; margin-top:2px; }
.sc.verde  { border-color:var(--verde);   background:var(--verde-l); }
.sc.verde .v { color:var(--verde-d); }
.sc.naranja { border-color:var(--naranja); background:#fff8e6; }
.sc.naranja .v { color:var(--naranja); }
.recs { width:100%; max-width:340px; margin-bottom:20px; }
.rec { background:var(--gris-l); border-radius:12px; padding:12px 14px; margin-bottom:8px; border-left:4px solid var(--gris); }
.rec.v { border-left-color:var(--verde); }
.rec.r { border-left-color:var(--rojo); }
.rec.a { border-left-color:var(--azul); }
.rec-t { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }
.rec-t.v { color:var(--verde-d); }
.rec-t.r { color:var(--rojo); }
.rec-t.a { color:var(--azul-d); }
.rec-txt { font-size:13px; line-height:1.4; }
.btns-res { display:flex; flex-direction:column; gap:10px; width:100%; max-width:340px; }
.btn-r { width:100%; padding:14px; border-radius:14px; border:none; font-size:15px; font-weight:800; cursor:pointer; transition:all .1s; }
.btn-r.p { background:var(--verde); color:#fff; border-bottom:3px solid var(--verde-d); }
.btn-r.p:active { border-bottom-width:1px; transform:translateY(2px); }
.btn-r.s { background:var(--gris-l); color:var(--gris-d); border:2px solid var(--borde); }

/* ── GAME OVER ── */
#p-gameover { background:#fff; align-items:center; justify-content:center; padding:24px; text-align:center; }
.go-btns { display:flex; flex-direction:column; gap:10px; width:100%; max-width:300px; margin:20px auto 0; }

/* ── BOTONES GENERALES ── */
.btn-sec { padding:13px 20px; border-radius:13px; border:2px solid var(--borde); font-size:14px; font-weight:800; cursor:pointer; background:var(--gris-l); color:var(--gris-d); }

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-thumb { background:var(--borde); border-radius:2px; }

/* ── TIPOS DE EJERCICIO ── */
/* Completa la oración */
.oracion-wrap { font-size:18px; font-weight:700; line-height:1.8; margin-bottom:20px; color:var(--texto); }
.hueco { display:inline-block; min-width:120px; height:32px; border-bottom:3px solid var(--azul); background:var(--azul-l); border-radius:6px; padding:0 10px; color:var(--azul-d); font-weight:800; text-align:center; line-height:32px; vertical-align:middle; }
.opciones-oracion { display:flex; flex-wrap:wrap; gap:9px; padding-bottom:20px; }
.op-oracion { padding:10px 18px; border:2px solid var(--borde); border-bottom:3px solid var(--borde); background:#fff; border-radius:30px; cursor:pointer; font-size:15px; font-weight:700; color:var(--texto); transition:all .12s; }
.op-oracion:hover:not(:disabled) { border-color:var(--azul); background:var(--azul-l); color:var(--azul-d); }
.op-oracion.sel { border-color:var(--azul); background:var(--azul); color:#fff; }
.op-oracion.ok  { border-color:var(--verde); background:var(--verde); color:#fff; }
.op-oracion.mal { border-color:var(--rojo);  background:var(--rojo);  color:#fff; }
.op-oracion:disabled { cursor:default; }
/* Verdadero o falso */
.vf-wrap { display:flex; flex-direction:column; gap:12px; padding-bottom:20px; }
.vf-btn { width:100%; padding:18px; border:2px solid var(--borde); border-bottom:4px solid var(--borde); background:#fff; border-radius:14px; cursor:pointer; font-size:17px; font-weight:800; color:var(--texto); transition:all .12s; display:flex; align-items:center; justify-content:center; gap:10px; }
.vf-btn:hover:not(:disabled) { transform:translateY(-2px); }
.vf-btn.verdadero:hover:not(:disabled) { border-color:var(--verde); background:var(--verde-l); color:var(--verde-d); }
.vf-btn.falso:hover:not(:disabled) { border-color:var(--rojo); background:var(--rojo-l); color:var(--rojo); }
.vf-btn.sel-v { border-color:var(--verde); background:var(--verde); color:#fff; border-bottom-color:var(--verde-d); }
.vf-btn.sel-f { border-color:var(--rojo);  background:var(--rojo);  color:#fff; border-bottom-color:#cc0000; }
.vf-btn.ok  { border-color:var(--verde); background:var(--verde-l); color:var(--verde-d); }
.vf-btn.mal { border-color:var(--rojo);  background:var(--rojo-l);  color:var(--rojo); }
.vf-btn:disabled { cursor:default; }
/* Seleccionar pares */
.pares-wrap { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-bottom:20px; }
.pares-col { display:flex; flex-direction:column; gap:8px; }
.par-item { padding:11px 12px; border:2px solid var(--borde); border-radius:12px; cursor:pointer; font-size:13px; font-weight:700; text-align:center; background:#fff; transition:all .15s; min-height:50px; display:flex; align-items:center; justify-content:center; line-height:1.3; }
.par-item:hover:not(.matched):not(.disabled) { border-color:var(--azul); background:var(--azul-l); }
.par-item.sel-par { border-color:var(--azul); background:var(--azul); color:#fff; }
.par-item.matched-ok { border-color:var(--verde); background:var(--verde-l); color:var(--verde-d); cursor:default; }
.par-item.matched-mal { border-color:var(--rojo); background:var(--rojo-l); color:var(--rojo); cursor:default; }
.par-item.disabled { cursor:default; opacity:.6; }
.pares-instruccion { font-size:12px; color:var(--texto-s); margin-bottom:12px; text-align:center; font-style:italic; }
/* Orden cronológico */
.orden-wrap { display:flex; flex-direction:column; gap:8px; padding-bottom:20px; }
.orden-item { padding:12px 15px; border:2px solid var(--borde); border-radius:12px; background:#fff; cursor:grab; font-size:14px; font-weight:700; display:flex; align-items:center; gap:10px; transition:all .15s; }
.orden-item:active { cursor:grabbing; }
.orden-item.orden-ok  { border-color:var(--verde); background:var(--verde-l); color:var(--verde-d); }
.orden-item.orden-mal { border-color:var(--rojo);  background:var(--rojo-l);  color:var(--rojo); }
.orden-num { width:28px; height:28px; border-radius:8px; background:var(--gris-l); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:var(--gris-d); flex-shrink:0; }
.orden-instruccion { font-size:12px; color:var(--texto-s); margin-bottom:10px; text-align:center; font-style:italic; }
.btn-verificar-orden { width:100%; padding:13px; background:var(--azul); color:#fff; border:none; border-bottom:3px solid var(--azul-d); border-radius:13px; font-size:15px; font-weight:800; cursor:pointer; margin-top:4px; margin-bottom:16px; }
.btn-verificar-orden:active { border-bottom-width:1px; transform:translateY(2px); }

/* ══ PERFIL DEL ALUMNO ══ */
#p-perfil { background:#f0f4f8; }
.perfil-hdr { background:#fff; border-bottom:2px solid var(--borde); padding:11px 15px; display:flex; align-items:center; gap:11px; }
.perfil-body { flex:1; overflow-y:auto; padding:20px 16px 80px; }

/* Tarjeta principal de perfil */
.perfil-card { background:#fff; border-radius:20px; padding:24px 20px; margin-bottom:16px; display:flex; flex-direction:column; align-items:center; box-shadow:0 2px 12px rgba(0,0,0,.06); }
.avatar-wrap { position:relative; margin-bottom:14px; }
.avatar-img { width:90px; height:90px; border-radius:50%; object-fit:cover; border:3px solid var(--verde); display:block; }
.avatar-edit-btn { position:absolute; bottom:0; right:0; width:30px; height:30px; background:var(--azul); border:2px solid #fff; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; padding:0; z-index:2; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.perfil-nombre-wrap { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.perfil-nombre-txt { font-size:20px; font-weight:800; color:var(--texto); }
.btn-editar-nombre { background:none; border:none; cursor:pointer; font-size:16px; color:var(--azul); padding:2px; }
.perfil-rango { font-size:13px; color:var(--texto-s); font-weight:600; margin-bottom:4px; }
.perfil-facultad { font-size:12px; color:var(--texto-s); }

/* Input editar nombre */
.nombre-input-wrap { display:flex; gap:8px; align-items:center; margin-bottom:4px; }
.nombre-input { font-size:18px; font-weight:700; border:2px solid var(--azul); border-radius:10px; padding:6px 12px; outline:none; width:180px; }
.btn-guardar-nombre { background:var(--verde); color:#fff; border:none; border-radius:10px; padding:7px 14px; font-weight:800; font-size:13px; cursor:pointer; }

/* Stats del perfil */
.perfil-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.perfil-stat { background:#fff; border-radius:14px; padding:14px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.perfil-stat .ps-val { font-size:26px; font-weight:800; }
.perfil-stat .ps-lbl { font-size:11px; color:var(--texto-s); font-weight:600; margin-top:3px; }
.perfil-stat.verde .ps-val { color:var(--verde-d); }
.perfil-stat.naranja .ps-val { color:var(--naranja); }
.perfil-stat.azul .ps-val { color:var(--azul-d); }
.perfil-stat.rojo .ps-val { color:var(--rojo); }

/* Progreso por ruta */
.perfil-seccion { font-size:12px; font-weight:800; color:var(--texto-s); text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }
.perfil-ruta-prog { background:#fff; border-radius:14px; padding:14px 16px; margin-bottom:10px; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.guia-uaslp-acceso { width:100%; background:linear-gradient(135deg,#4a2f1b 0%,#72502d 54%,#9b7442 100%); color:#fff; border:2px solid #b98b50; border-bottom:5px solid #3a2415; border-radius:18px; padding:16px; margin-bottom:16px; display:none; align-items:center; gap:13px; cursor:pointer; text-align:left; box-shadow:0 5px 16px rgba(70,43,22,.2); }
.guia-uaslp-acceso:active { transform:translateY(2px); border-bottom-width:3px; }
.guia-uaslp-acceso-ico { width:48px; height:48px; border-radius:14px; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:27px; flex-shrink:0; }
.guia-uaslp-acceso-info { flex:1; min-width:0; display:block; }
.guia-uaslp-acceso-tit { display:block; font-size:15px; font-weight:900; }
.guia-uaslp-acceso-sub { display:block; font-size:11px; color:rgba(255,255,255,.78); font-weight:700; margin-top:3px; }
.guia-uaslp-mini-barra { display:block; height:7px; background:rgba(255,255,255,.18); border-radius:999px; overflow:hidden; margin-top:9px; }
.guia-uaslp-mini-fill { display:block; height:100%; width:0; background:linear-gradient(90deg,#ffd76a,#fff1af); border-radius:999px; transition:width .35s ease; }
.guia-uaslp-acceso-pct { font-size:18px; font-weight:900; color:#ffe49a; white-space:nowrap; }
.guia-uaslp-pantalla { background:linear-gradient(180deg,#3b271a 0,#60452c 160px,#eee0bd 161px,#f4e9ca 100%); }
.guia-uaslp-hdr { background:rgba(53,34,21,.97); border-bottom:2px solid rgba(255,226,161,.28); color:#fff; padding:12px 15px; display:flex; align-items:center; gap:11px; }
.guia-uaslp-hdr .btn-back { color:#fff; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.16); }
.guia-uaslp-body { flex:1; overflow-y:auto; padding:18px 14px 80px; }
.guia-uaslp-resumen { max-width:680px; margin:0 auto 14px; background:linear-gradient(145deg,#fff5d8,#ead39d); border:2px solid #9d7541; border-radius:18px; padding:18px 16px; box-shadow:0 7px 20px rgba(57,35,18,.2); }
.guia-uaslp-resumen-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.guia-uaslp-resumen-tit { font-family:Georgia,serif; color:#4b2d19; font-size:20px; font-weight:900; }
.guia-uaslp-resumen-pct { color:#74491f; font-size:24px; font-weight:900; }
.guia-uaslp-resumen-sub { font-size:12px; color:#755936; font-weight:800; margin-top:5px; }
.guia-uaslp-barra { height:10px; background:rgba(93,59,25,.16); border-radius:999px; overflow:hidden; margin-top:13px; }
.guia-uaslp-fill { height:100%; width:0; background:linear-gradient(90deg,#a97025,#e4b74e); border-radius:999px; transition:width .35s ease; }
.guia-uaslp-hoja { max-width:680px; margin:0 auto 10px; background:#fbefcc; color:#49311e; border:2px solid #a67c45; border-radius:15px; padding:13px 14px; box-shadow:0 5px 16px rgba(66,40,20,.16); position:relative; overflow:hidden; }
.guia-uaslp-hoja::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.24; background:radial-gradient(circle at 12% 16%,#9b6f3420 0 2px,transparent 3px),radial-gradient(circle at 82% 74%,#7f572520 0 2px,transparent 3px); background-size:34px 31px,41px 39px; }
.guia-uaslp-bloque-tit { position:relative; width:100%; display:flex; align-items:center; gap:9px; border:none; background:transparent; color:#4c2d17; padding:2px 0; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.guia-uaslp-bloque-nombre { flex:1; min-width:0; font-family:Georgia,serif; font-size:18px; font-weight:900; line-height:1.25; }
.guia-uaslp-bloque-cont { flex-shrink:0; font-size:10.5px; font-weight:900; background:rgba(111,73,32,.1); color:#76522d; border-radius:999px; padding:4px 8px; white-space:nowrap; }
.guia-uaslp-bloque-flecha { flex-shrink:0; width:25px; height:25px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(111,73,32,.11); color:#76522d; font-family:Arial,sans-serif; font-size:19px; font-weight:900; line-height:1; transition:transform .22s ease,background .22s ease; }
.guia-uaslp-hoja.abierta .guia-uaslp-bloque-flecha { transform:rotate(90deg); background:rgba(111,73,32,.18); }
.guia-uaslp-bloque-body { position:relative; display:none; padding-top:4px; margin-top:10px; border-top:2px solid rgba(102,65,30,.24); }
.guia-uaslp-hoja.abierta .guia-uaslp-bloque-body { display:block; }
.guia-uaslp-seccion { position:relative; margin-top:14px; }
.guia-uaslp-seccion-tit { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; font-weight:900; color:#6d431f; margin-bottom:7px; }
.guia-uaslp-seccion-cont { font-size:10.5px; background:rgba(111,73,32,.1); color:#76522d; border-radius:999px; padding:3px 8px; white-space:nowrap; }
.guia-uaslp-tema { position:relative; display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:9px; padding:9px 7px; border-bottom:1px dashed rgba(91,57,26,.2); font-size:12.5px; line-height:1.38; font-weight:750; }
.guia-uaslp-tema:last-child { border-bottom:none; }
.guia-uaslp-marca { width:22px; height:22px; border-radius:50%; border:2px solid #a78350; color:#96713e; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:12px; font-weight:900; background:rgba(255,255,255,.25); }
.guia-uaslp-tema-info { min-width:0; }
.guia-uaslp-tema.completado { color:#7c6b54; }
.guia-uaslp-tema.completado .guia-uaslp-tema-txt { text-decoration:line-through 2px #7a3e25; text-decoration-thickness:2px; }
.guia-uaslp-tema.completado .guia-uaslp-marca { border-color:#6e8a3b; background:#e8f0ca; color:#4b6f24; }
.guia-uaslp-tema.dominado { background:linear-gradient(135deg,rgba(255,245,188,.72),rgba(225,244,199,.72)); border:1px solid rgba(139,111,37,.32); border-radius:11px; margin:3px 0; }
.guia-uaslp-tema.dominado .guia-uaslp-marca { border-color:#b18420; background:#ffeaa1; color:#704d00; box-shadow:0 0 0 3px rgba(255,215,85,.18); }
.guia-uaslp-dominio { display:inline-flex; align-items:center; gap:3px; width:max-content; max-width:100%; margin-top:4px; padding:3px 7px; border:1px solid rgba(139,111,37,.3); border-radius:999px; background:#fff2b8; color:#725000; font-size:9.5px; font-weight:950; text-decoration:none; }
.guia-uaslp-tema-enlace { display:block; font-size:9.5px; color:#9a7a54; font-weight:700; margin-top:2px; text-decoration:none; }
.guia-uaslp-ver-leccion { flex-shrink:0; border:1.5px solid #8b612f; border-bottom-width:3px; border-radius:9px; background:#fff1c9; color:#684019; padding:7px 9px; font-size:10.5px; font-weight:900; white-space:nowrap; cursor:pointer; }
.guia-uaslp-ver-leccion:active { transform:translateY(1px); border-bottom-width:2px; }

.guia-examen-2026 { max-width:680px; margin:22px auto 0; background:linear-gradient(145deg,#3b271a,#6b4727); border:2px solid #c99a54; border-radius:17px; box-shadow:0 7px 22px rgba(57,35,18,.24); overflow:hidden; }
.guia-examen-2026-tit { width:100%; border:0; background:transparent; color:#fff4d2; display:flex; align-items:center; gap:10px; padding:15px 14px; text-align:left; cursor:pointer; }
.guia-examen-2026-ico { width:39px; height:39px; border-radius:12px; background:rgba(255,255,255,.11); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.guia-examen-2026-info { flex:1; min-width:0; }
.guia-examen-2026-nombre { display:block; font-family:Georgia,serif; font-size:17px; font-weight:900; line-height:1.25; }
.guia-examen-2026-sub { display:block; margin-top:3px; color:rgba(255,244,210,.72); font-size:10.5px; font-weight:800; }
.guia-examen-2026-cont { flex-shrink:0; color:#ffe3a0; font-size:11px; font-weight:900; white-space:nowrap; }
.guia-examen-2026-flecha { flex-shrink:0; width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.11); color:#ffe3a0; font-size:20px; font-weight:900; transition:transform .22s ease; }
.guia-examen-2026.abierta .guia-examen-2026-flecha { transform:rotate(90deg); }
.guia-examen-2026-body { display:none; padding:0 11px 13px; }
.guia-examen-2026.abierta .guia-examen-2026-body { display:block; }
.guia-examen-2026-progreso { background:rgba(255,247,220,.11); border:1px solid rgba(255,226,161,.18); border-radius:11px; padding:10px 11px; margin-bottom:10px; }
.guia-examen-2026-progreso-txt { display:flex; justify-content:space-between; gap:10px; color:#ffe9b5; font-size:10.5px; font-weight:900; }
.guia-examen-2026-barra { height:7px; margin-top:7px; background:rgba(255,255,255,.13); border-radius:999px; overflow:hidden; }
.guia-examen-2026-fill { height:100%; background:linear-gradient(90deg,#d99a35,#ffe39a); border-radius:999px; }
.guia-examen-materia { background:#fbefcc; border:1.5px solid #aa7c42; border-radius:12px; margin-top:9px; overflow:hidden; }
.guia-examen-materia-tit { width:100%; display:flex; align-items:center; gap:8px; border:0; background:rgba(122,79,34,.08); color:#55351e; padding:11px 10px; text-align:left; cursor:pointer; }
.guia-examen-materia-nombre { flex:1; min-width:0; font-size:13.5px; font-weight:900; }
.guia-examen-materia-cont { font-size:10px; font-weight:900; color:#79552e; white-space:nowrap; }
.guia-examen-materia-flecha { width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(111,73,32,.11); color:#76522d; font-size:17px; font-weight:900; transition:transform .2s ease; }
.guia-examen-materia.abierta .guia-examen-materia-flecha { transform:rotate(90deg); }
.guia-examen-materia-body { display:none; padding:2px 7px 7px; }
.guia-examen-materia.abierta .guia-examen-materia-body { display:block; }
.guia-examen-repetido { display:block; margin-top:2px; color:#a26d2d; font-size:9.5px; font-weight:900; }

@keyframes pulso-guia-uaslp { 0%,100% { box-shadow:0 0 0 0 rgba(169,112,37,.62); } 50% { box-shadow:0 0 0 13px rgba(169,112,37,0); } }
.niv-item.niv-guia-resaltada .niv-btn { animation:pulso-guia-uaslp 1.45s ease-out infinite; outline:4px solid #d79b3d; outline-offset:3px; }
.niv-guia-badge { display:inline-block; margin-top:4px; padding:3px 8px; border-radius:999px; background:#6f4725; color:#fff4d4; font-size:9px; font-weight:900; box-shadow:0 2px 5px rgba(74,47,27,.2); }

@media (max-width:430px) {
  .guia-uaslp-tema { grid-template-columns:22px minmax(0,1fr); }
  .guia-uaslp-ver-leccion { grid-column:2; justify-self:start; }
  .guia-examen-2026-tit { padding:13px 11px; }
  .guia-examen-2026-cont { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .guia-uaslp-bloque-flecha { transition:none; }
  .guia-examen-2026-flecha,.guia-examen-materia-flecha { transition:none; }
  .niv-item.niv-guia-resaltada .niv-btn { animation:none; }
}

/* ══ MI GUÍA UASLP — ANIMACIÓN DE TEMA ESTUDIADO ══ */
.guia-logro-overlay {
  position:fixed; inset:0; z-index:12000;
  display:flex; align-items:center; justify-content:center;
  padding:18px;
  background:
    radial-gradient(circle at 50% 32%,rgba(255,217,120,.18),transparent 34%),
    rgba(20,13,8,.91);
  backdrop-filter:blur(4px);
  animation:guiaLogroFondoEntrada .34s ease both;
}
@keyframes guiaLogroFondoEntrada {
  from { opacity:0; }
  to { opacity:1; }
}
.guia-logro-particulas {
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
}
.guia-logro-particula {
  position:absolute; width:7px; height:7px; border-radius:50%;
  background:#ffd66d; box-shadow:0 0 12px rgba(255,218,112,.95);
  animation:guiaParticulaFlota 3.2s ease-in-out infinite;
}
@keyframes guiaParticulaFlota {
  0%,100% { transform:translateY(10px) scale(.65); opacity:.18; }
  45% { transform:translateY(-22px) scale(1.15); opacity:.95; }
}
.guia-logro-pergamino {
  position:relative; z-index:2; width:min(100%,540px);
  max-height:min(88vh,720px); overflow:hidden;
  display:flex; flex-direction:column;
  padding:25px 22px 20px;
  color:#4b2e1b;
  border:3px solid #a8793c;
  border-radius:22px 13px 22px 13px;
  background:
    radial-gradient(circle at 14% 17%,rgba(123,76,27,.12) 0 2px,transparent 3px),
    radial-gradient(circle at 82% 75%,rgba(123,76,27,.1) 0 2px,transparent 3px),
    linear-gradient(145deg,#fff4cb 0%,#efd59a 52%,#f8e8b8 100%);
  background-size:37px 35px,43px 39px,auto;
  box-shadow:0 22px 70px rgba(0,0,0,.52),inset 0 0 34px rgba(102,61,21,.13);
  animation:guiaPergaminoEntrada .58s cubic-bezier(.2,1.35,.36,1) both;
}
.guia-logro-pergamino::before,
.guia-logro-pergamino::after {
  content:""; position:absolute; left:12px; right:12px; height:11px;
  border-radius:50%; pointer-events:none;
  background:rgba(101,59,20,.13); filter:blur(5px);
}
.guia-logro-pergamino::before { top:-6px; }
.guia-logro-pergamino::after { bottom:-6px; }
@keyframes guiaPergaminoEntrada {
  from { opacity:0; transform:translateY(28px) scale(.88) rotate(-1.4deg); }
  to { opacity:1; transform:translateY(0) scale(1) rotate(0); }
}
.guia-logro-sello {
  width:56px; height:56px; margin:0 auto 8px;
  display:flex; align-items:center; justify-content:center;
  border:3px double #98631f; border-radius:50%;
  color:#704317; background:rgba(255,248,218,.55);
  font-size:29px; line-height:1;
  box-shadow:0 3px 0 rgba(100,58,18,.18);
  animation:guiaSelloEntrada .65s .2s cubic-bezier(.2,1.5,.3,1) both;
}
@keyframes guiaSelloEntrada {
  from { opacity:0; transform:scale(0) rotate(-18deg); }
  to { opacity:1; transform:scale(1) rotate(0); }
}
.guia-logro-kicker {
  color:#8a5d2a; font-size:10px; font-weight:950;
  text-align:center; text-transform:uppercase; letter-spacing:1.2px;
}
.guia-logro-titulo {
  margin-top:4px; font-family:Georgia,serif;
  color:#4c2d17; font-size:24px; line-height:1.14;
  font-weight:900; text-align:center;
}
.guia-logro-sub {
  margin:7px auto 13px; max-width:410px;
  color:#745333; font-size:12px; line-height:1.42;
  font-weight:750; text-align:center;
}
.guia-logro-lista {
  min-height:72px; max-height:38vh; overflow-y:auto;
  padding:3px 4px 3px; margin:0 -3px;
  scrollbar-width:thin; scrollbar-color:#a77a42 transparent;
}
.guia-logro-fila {
  position:relative; overflow:hidden;
  margin-bottom:8px; padding:10px 34px 10px 11px;
  border:1px dashed rgba(115,72,31,.32); border-radius:10px;
  background:rgba(255,250,229,.43);
  opacity:.55; transition:opacity .2s ease,background .28s ease,transform .28s ease;
}
.guia-logro-fila:last-child { margin-bottom:0; }
.guia-logro-fila.tachando {
  opacity:1; background:rgba(255,248,213,.76); transform:scale(1.012);
}
.guia-logro-fila.tachado {
  opacity:1; background:rgba(230,237,193,.57);
}
.guia-logro-contexto {
  display:block; color:#966e43; font-size:8.8px; line-height:1.25;
  font-weight:900; text-transform:uppercase; letter-spacing:.45px;
  margin-bottom:3px;
}
.guia-logro-tema {
  position:relative; display:inline;
  color:#4a2d1b; font-family:Georgia,serif;
  font-size:14px; line-height:1.38; font-weight:900;
}
.guia-logro-tema::after {
  content:""; position:absolute; z-index:2;
  left:-2px; right:-3px; top:54%; height:3px;
  border-radius:80% 20% 70% 30%;
  background:#7e321f;
  transform:scaleX(0) rotate(-1deg); transform-origin:left center;
}
.guia-logro-fila.tachando .guia-logro-tema::after {
  animation:guiaTrazoTinta var(--guia-trazo-ms,850ms) ease-in-out forwards;
}
.guia-logro-fila.tachado .guia-logro-tema {
  color:#7d6a54; text-decoration:line-through 2px #7e321f;
}
.guia-logro-fila.tachado .guia-logro-tema::after { transform:scaleX(1) rotate(-1deg); }
@keyframes guiaTrazoTinta {
  from { transform:scaleX(0) rotate(-1deg); }
  to { transform:scaleX(1) rotate(-1deg); }
}
.guia-logro-marca {
  position:absolute; right:10px; top:50%; transform:translateY(-50%) scale(.7);
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  border:2px solid #74923d; border-radius:50%;
  color:#537528; background:#edf4cd; font-size:12px; font-weight:950;
  opacity:0; transition:opacity .22s ease,transform .32s cubic-bezier(.2,1.5,.3,1);
}
.guia-logro-fila.tachado .guia-logro-marca {
  opacity:1; transform:translateY(-50%) scale(1);
}
.guia-logro-pluma {
  position:absolute; z-index:4; left:-32px; top:40%;
  font-size:25px; line-height:1; pointer-events:none; opacity:0;
  filter:drop-shadow(0 3px 2px rgba(70,37,12,.3));
}
.guia-logro-fila.tachando .guia-logro-pluma {
  animation:guiaPlumaTrazo var(--guia-trazo-ms,850ms) ease-in-out forwards;
}
@keyframes guiaPlumaTrazo {
  0% { left:-32px; opacity:0; transform:translateY(-50%) rotate(-27deg); }
  12% { opacity:1; }
  88% { opacity:1; }
  100% { left:calc(100% - 20px); opacity:0; transform:translateY(-50%) rotate(-11deg); }
}
.guia-logro-progreso {
  margin-top:13px; color:#735231; font-size:11px;
  font-weight:850; text-align:center;
}
.guia-logro-acciones {
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:49px; margin-top:12px;
}
.guia-logro-continuar,
.guia-logro-saltar {
  border:none; border-radius:13px; padding:12px 20px;
  font-family:inherit; font-size:13px; font-weight:950; cursor:pointer;
}
.guia-logro-continuar {
  display:none; min-width:160px;
  color:#fff; background:linear-gradient(135deg,#7a4c20,#a87532);
  border-bottom:4px solid #563214;
  box-shadow:0 4px 12px rgba(85,48,18,.22);
}
.guia-logro-continuar.visible { display:block; animation:guiaBotonEntrada .3s ease both; }
.guia-logro-saltar {
  visibility:hidden; opacity:0;
  color:#765738; background:rgba(255,255,255,.43);
  border:1px solid rgba(111,73,32,.22);
  transition:opacity .2s ease;
}
.guia-logro-saltar.visible { visibility:visible; opacity:1; }
.guia-logro-continuar:active,
.guia-logro-saltar:active { transform:translateY(2px); }
@keyframes guiaBotonEntrada {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}

/* Aviso no bloqueante cuando una lección avanza un tema, pero no lo termina. */
.guia-avance-toast {
  position:fixed; z-index:11950; top:14px; left:50%;
  width:min(calc(100% - 28px),430px);
  padding:13px 42px 13px 14px;
  color:#49301f; background:linear-gradient(135deg,#fff4cf,#efd59b);
  border:2px solid #a67b43; border-radius:15px;
  box-shadow:0 12px 34px rgba(39,24,13,.3);
  transform:translate(-50%,-135%); opacity:0;
  transition:transform .36s cubic-bezier(.2,1.25,.35,1),opacity .25s ease;
  cursor:pointer;
}
.guia-avance-toast.visible { transform:translate(-50%,0); opacity:1; }
.guia-avance-toast-tit {
  font-family:Georgia,serif; font-size:14px; font-weight:900; color:#54331d;
}
.guia-avance-toast-txt {
  margin-top:3px; color:#775b3a; font-size:11px; line-height:1.4; font-weight:750;
}
.guia-avance-toast-cerrar {
  position:absolute; top:8px; right:8px; width:28px; height:28px;
  border:none; border-radius:50%; color:#795938;
  background:rgba(117,79,36,.1); font-size:16px; font-weight:900; cursor:pointer;
}

@media (max-width:480px) {
  .guia-logro-overlay { padding:12px; }
  .guia-logro-pergamino { max-height:92vh; padding:21px 15px 16px; border-radius:18px 11px; }
  .guia-logro-sello { width:50px; height:50px; font-size:25px; }
  .guia-logro-titulo { font-size:21px; }
  .guia-logro-lista { max-height:41vh; }
  .guia-logro-fila { padding:9px 32px 9px 10px; }
  .guia-logro-tema { font-size:13px; }
  .guia-logro-acciones { flex-direction:column-reverse; gap:7px; min-height:82px; }
  .guia-logro-continuar,.guia-logro-saltar { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .guia-logro-overlay,.guia-logro-pergamino,.guia-logro-sello,
  .guia-logro-particula,.guia-logro-pluma { animation:none !important; }
  .guia-logro-fila,.guia-logro-tema::after { transition:none !important; }
}
.prp-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.prp-nombre { font-size:14px; font-weight:800; }
.prp-pct { font-size:13px; font-weight:700; color:var(--texto-s); }
.prp-barra { height:8px; background:var(--gris-l); border-radius:4px; overflow:hidden; }
.prp-fill { height:100%; border-radius:4px; }

/* Selector de avatares */
.avatar-selector { background:#fff; border-radius:16px; padding:16px; margin-bottom:16px; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.avatar-selector-tit { font-size:13px; font-weight:800; color:var(--texto); margin-bottom:12px; }
.avatares-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:12px; }
.av-op { width:100%; aspect-ratio:1; border-radius:50%; font-size:28px; display:flex; align-items:center; justify-content:center; cursor:pointer; border:3px solid transparent; transition:all .15s; background:var(--gris-l); }
.av-op.seleccionado { border-color:var(--verde); background:var(--verde-l); }
.av-op:active { transform:scale(.92); }
.btn-subir-foto { width:100%; padding:11px; border:2px dashed var(--borde); border-radius:12px; background:#fff; cursor:pointer; font-size:13px; font-weight:700; color:var(--texto-s); display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-subir-foto:hover { border-color:var(--azul); color:var(--azul); background:var(--azul-l); }

/* Badge de rango */
.rango-badge { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,#ff9600,#ffb700); color:#fff; border-radius:20px; padding:5px 14px; font-size:12px; font-weight:800; margin-bottom:12px; }

/* ══ PANTALLA DE CELEBRACIÓN (RETO COMPLETADO) ══ */
#p-celebracion {
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  align-items: center; justify-content: center;
  padding: 24px; overflow: hidden; position: relative;
}

/* Confeti */
.confeti-wrap {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; overflow: hidden;
}
.confeti-pieza {
  position: absolute; width: 10px; height: 10px; border-radius: 2px;
  animation: caerConfeti linear forwards;
}
@keyframes caerConfeti {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* Contenido central */
.celeb-content {
  display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 2; width: 100%; max-width: 360px;
}

/* Trofeo animado */
.celeb-trofeo {
  font-size: 80px; margin-bottom: 10px;
  animation: trofeoEntrada 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes trofeoEntrada {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  70%  { transform: scale(1.15) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Título principal */
.celeb-titulo {
  font-size: 28px; font-weight: 800; color: #fff;
  text-align: center; margin-bottom: 6px;
  animation: fadeSlideUp 0.5s ease 0.3s both;
}
.celeb-subtitulo {
  font-size: 15px; color: rgba(255,255,255,.75);
  text-align: center; margin-bottom: 6px;
  animation: fadeSlideUp 0.5s ease 0.4s both;
}

/* Badge del grupo completado */
.celeb-grupo-badge {
  background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.3);
  border-radius: 30px; padding: 8px 20px; margin-bottom: 24px;
  color: #fff; font-size: 14px; font-weight: 800;
  animation: fadeSlideUp 0.5s ease 0.5s both;
}

/* XP ganado */
.celeb-xp {
  background: linear-gradient(135deg, #ff9600, #ffb700);
  border-radius: 16px; padding: 16px 24px; margin-bottom: 16px;
  text-align: center; width: 100%;
  animation: fadeSlideUp 0.5s ease 0.6s both;
  box-shadow: 0 8px 24px rgba(255,150,0,.4);
}
.celeb-xp-num { font-size: 36px; font-weight: 800; color: #fff; }
.celeb-xp-lbl { font-size: 13px; color: rgba(255,255,255,.85); font-weight: 700; }

/* Stats fila */
.celeb-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; width: 100%; margin-bottom: 24px;
  animation: fadeSlideUp 0.5s ease 0.7s both;
}
.celeb-stat {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px; padding: 14px; text-align: center;
}
.celeb-stat .cs-val { font-size: 22px; font-weight: 800; color: #fff; }
.celeb-stat .cs-lbl { font-size: 11px; color: rgba(255,255,255,.65); font-weight: 600; margin-top: 2px; }

/* Siguiente grupo */
.celeb-siguiente {
  background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.25);
  border-radius: 14px; padding: 14px 16px; width: 100%; margin-bottom: 20px;
  animation: fadeSlideUp 0.5s ease 0.8s both;
}
.celeb-siguiente-lbl { font-size:11px; color:rgba(255,255,255,.6); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
.celeb-siguiente-nom { font-size:15px; font-weight:800; color:#fff; }

/* Botones */
.celeb-btns {
  display: flex; flex-direction: column; gap: 10px; width: 100%;
  animation: fadeSlideUp 0.5s ease 0.9s both;
}
.btn-celeb-p {
  width: 100%; padding: 16px; background: #fff; color: #0f3460;
  border: none; border-radius: 14px; font-size: 16px; font-weight: 800;
  cursor: pointer; transition: all .1s; border-bottom: 4px solid rgba(0,0,0,.2);
}
.btn-celeb-p:active { border-bottom-width: 2px; transform: translateY(2px); }
.btn-celeb-s {
  width: 100%; padding: 14px; background: transparent; color: rgba(255,255,255,.7);
  border: 2px solid rgba(255,255,255,.25); border-radius: 14px;
  font-size: 14px; font-weight: 700; cursor: pointer;
}

/* Estrellas decorativas */
.celeb-estrellas {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; z-index: 1;
}
.estrella {
  position: absolute; color: rgba(255,255,255,.4);
  animation: parpadeo ease-in-out infinite;
}
@keyframes parpadeo {
  0%, 100% { opacity: .2; transform: scale(.8); }
  50%       { opacity: .8; transform: scale(1.2); }
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Racha especial si es nueva racha */
.celeb-racha-badge {
  background: linear-gradient(135deg, #ff6b35, #ff4b4b);
  border-radius: 30px; padding: 8px 18px; margin-bottom: 14px;
  color: #fff; font-size: 14px; font-weight: 800;
  display: none;
  animation: fadeSlideUp 0.5s ease 0.65s both;
}

/* ══ RANKING ══ */
#p-ranking { background:#f0f4f8; }
.ranking-hdr { background:#fff; border-bottom:2px solid var(--borde); padding:11px 15px; display:flex; align-items:center; gap:11px; }
.ranking-body { flex:1; overflow-y:auto; padding:16px 16px 80px; }

/* Banner superior */
.ranking-banner {
  background:linear-gradient(135deg,#1a1a2e,#0f3460);
  border-radius:16px; padding:18px 20px; margin-bottom:16px;
  display:flex; align-items:center; gap:14px;
}
.ranking-banner-ico { font-size:36px; }
.ranking-banner-txt h2 { font-size:17px; font-weight:800; color:#fff; margin-bottom:3px; }
.ranking-banner-txt p  { font-size:12px; color:rgba(255,255,255,.7); }

/* Mi posición */
.mi-posicion-card {
  background:#fff; border-radius:14px; padding:14px 16px;
  margin-bottom:16px; border:2px solid var(--azul);
  border-left:5px solid var(--azul);
  display:flex; align-items:center; gap:12px;
}
.mi-pos-num { font-size:22px; font-weight:800; color:var(--azul); min-width:36px; text-align:center; }
.mi-pos-info { flex:1; }
.mi-pos-nombre { font-size:15px; font-weight:800; }
.mi-pos-datos  { font-size:12px; color:var(--texto-s); margin-top:2px; }
.mi-pos-xp { font-size:16px; font-weight:800; color:var(--naranja); }
.rank-mascota-mini {
  width:42px; height:42px; border-radius:13px; flex-shrink:0; position:relative;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  border:2px solid #a7d8f4; background:linear-gradient(145deg,#ecf9ff,#fff);
  box-shadow:0 3px 9px rgba(15,52,96,.12);
}
.rank-mascota-mini img { width:100%; height:100%; object-fit:contain; }
.rank-mascota-mini::after {
  content:'🐾'; position:absolute; right:1px; bottom:0; font-size:9px;
  width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.rank-mascota-mini.vacia { border-style:dashed; color:#91a3b4; font-size:16px; box-shadow:none; }
.rank-mascota-mini.vacia::after { display:none; }

/* Filtro por facultad */
.ranking-filtro { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:14px; scrollbar-width:none; }
.ranking-filtro::-webkit-scrollbar { display:none; }
.filtro-chip {
  padding:7px 14px; border-radius:20px; border:2px solid var(--borde);
  background:#fff; font-size:13px; font-weight:700; color:var(--texto-s);
  cursor:pointer; white-space:nowrap; transition:all .15s; flex-shrink:0;
}
.filtro-chip.activo {
  background:var(--azul); border-color:var(--azul); color:#fff;
}
.filtro-chip:active { transform:scale(.96); }

/* Tabla de líderes */
.ranking-lista { display:flex; flex-direction:column; gap:8px; }
.ranking-item {
  background:#fff; border-radius:14px; padding:12px 14px;
  display:flex; align-items:center; gap:12px;
  border:2px solid var(--borde); transition:all .15s;
}
.ranking-item.top1 { border-color:#FFD700; background:linear-gradient(135deg,#fff8dc,#fff); }
.ranking-item.top2 { border-color:#C0C0C0; background:linear-gradient(135deg,#f5f5f5,#fff); }
.ranking-item.top3 { border-color:#CD7F32; background:linear-gradient(135deg,#fdf0e6,#fff); }
.ranking-item.es-yo { border-color:var(--azul); border-left:4px solid var(--azul); }
.ranking-item:hover .rank-mascota-mini:not(.vacia) img { animation:rankMascotaSaludo .55s ease-in-out; }
@keyframes rankMascotaSaludo { 0%,100%{transform:translateY(0) rotate(0)} 45%{transform:translateY(-4px) rotate(4deg)} }

/* Posición */
.rank-pos {
  width:32px; text-align:center; font-size:18px;
  font-weight:800; color:var(--texto-s); flex-shrink:0;
}
.rank-pos.medalla { font-size:22px; }

/* Avatar mini */
.rank-avatar {
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0; border:2px solid var(--borde);
  overflow:hidden;
}
.rank-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.rank-vitrina-mini { display:flex; align-items:center; gap:3px; margin-top:4px; min-height:18px; flex-wrap:wrap; }
.rank-vitrina-ico {
  min-width:22px; height:18px; padding:0 4px; border-radius:7px; display:inline-flex;
  align-items:center; justify-content:center; font-size:12px; line-height:1;
  background:#fff7cf; border:1px solid #eac95a; box-shadow:0 1px 3px rgba(92,67,0,.1);
}
.rank-vitrina-mas { font-size:9px; font-weight:900; color:var(--texto-s); padding-left:2px; }

/* Info del alumno */
.rank-info { flex:1; min-width:0; }
.rank-nombre { font-size:14px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-facultad { font-size:11px; color:var(--texto-s); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-detalles { display:flex; gap:8px; margin-top:4px; flex-wrap:wrap; }
.rank-badge {
  font-size:10px; font-weight:700; padding:2px 8px;
  border-radius:10px; background:var(--gris-l); color:var(--texto-s);
}
.rank-badge.racha { background:#fff3e0; color:var(--naranja); }
.rank-badge.lecciones { background:var(--verde-l); color:var(--verde-d); }

/* XP */
.rank-xp { text-align:right; flex-shrink:0; }
.rank-xp-num { font-size:16px; font-weight:800; color:var(--naranja); display:block; }
.rank-xp-lbl { font-size:10px; color:var(--texto-s); font-weight:600; }

/* Sección título */
.ranking-secc { font-size:12px; font-weight:800; color:var(--texto-s); text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }

/* Aviso datos de ejemplo */
.ranking-demo-aviso {
  background:var(--azul-l); border:2px solid var(--azul);
  border-radius:12px; padding:10px 14px; margin-bottom:14px;
  font-size:12px; color:var(--azul-d); font-weight:700;
  display:flex; align-items:center; gap:8px;
}

/* Indicador online/demo */
.ranking-status {
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:var(--texto-s); margin-bottom:12px;
}
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--gris); }
.status-dot.demo { background:var(--naranja); }
.status-dot.live { background:var(--verde); animation:pulsoDot 1.5s ease-in-out infinite; }
@keyframes pulsoDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.3)} }

/* ══ MASCOTA Y ELEMENTOS DECORATIVOS ══ */

/* Mascota búho flotando */
.mascota-wrap {
  display: flex; flex-direction: column; align-items: center;
  margin: 8px 0 4px; position: relative;
}
.mascota-img {
  width: 80px; height: auto;
  animation: flotarBuho 3s ease-in-out infinite;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.15));
}
.mascota-burbuja {
  background: #fff; border-radius: 16px; padding: 8px 14px;
  font-size: 12px; font-weight: 700; color: var(--texto);
  box-shadow: 0 4px 12px rgba(0,0,0,.1); margin-bottom: 6px;
  position: relative; text-align: center; max-width: 200px;
}
.mascota-burbuja::after {
  content: ""; position: absolute; bottom: -8px; left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent; border-top-color: #fff;
  border-bottom: none;
}
@keyframes flotarBuho {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  50%       { transform: translateY(-8px) rotate(1deg); }
}

/* Elementos decorativos entre grupos */
.deco-era {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin: 4px 0; padding: 8px 0;
}
.deco-item {
  font-size: 22px; opacity: .6;
  animation: pulsarDeco 2s ease-in-out infinite;
}
.deco-item:nth-child(2) { animation-delay: .3s; font-size: 28px; opacity: .8; }
.deco-item:nth-child(3) { animation-delay: .6s; }
@keyframes pulsarDeco {
  0%, 100% { transform: scale(1); opacity: .6; }
  50%       { transform: scale(1.1); opacity: .9; }
}
.deco-linea {
  height: 2px; flex: 1; background: linear-gradient(90deg, transparent, var(--borde), transparent);
  border-radius: 1px;
}


/* ══ DECORATIVOS LATERALES DEL MAPA ══ */
#mapa-body {
  position: relative;
}
.deco-lateral {
  position: absolute;
  font-size: 28px;
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
  animation: floatDeco ease-in-out infinite;
}
.deco-lateral.izq { left: 4px; }
.deco-lateral.der { right: 4px; }
@keyframes floatDeco {
  0%,100% { transform: translateY(0px) rotate(-5deg); }
  50%      { transform: translateY(-10px) rotate(5deg); }
}

/* Mejorar separadores entre grupos */
.deco-era {
  position: relative;
  margin: 12px 0;
}
.deco-era .deco-item {
  font-size: 26px;
  opacity: 0.75;
}

/* Mascota más grande y centrada */
.mascota-wrap {
  margin: 20px 0 16px;
}
.mascota-img {
  width: 100px;
}
.mascota-burbuja {
  font-size: 13px;
  padding: 10px 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}


/* ══ PANEL ADMIN LATERAL (modo previa) ══ */
.admin-tab-btn {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9998;
  background: #ff9600;
  color: #fff;
  border: none;
  border-radius: 12px 0 0 12px;
  padding: 14px 8px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 1px;
  box-shadow: -2px 0 8px rgba(0,0,0,.2);
  transition: background .2s;
}
.admin-tab-btn:hover { background: #e68900; }

.admin-panel-lateral {
  position: fixed;
  right: -260px;
  top: 0;
  bottom: 0;
  width: 250px;
  background: #1a1a2e;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  box-shadow: -4px 0 20px rgba(0,0,0,.4);
  transition: right .3s cubic-bezier(.4,0,.2,1);
  gap: 10px;
}
.admin-panel-lateral.abierto { right: 0; }

.admin-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 9998;
  display: none;
}
.admin-panel-overlay.visible { display: block; }

.admin-panel-tit {
  color: #ff9600;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.admin-btn-lateral {
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity .15s;
}
.admin-btn-lateral:active { opacity: .8; }
.admin-btn-azul   { background: #1cb0f6; color: #fff; }
.admin-btn-rojo   { background: #ff4b4b; color: #fff; }
.admin-btn-gris   { background: rgba(255,255,255,.1); color: #fff; }
.admin-btn-verde  { background: #58cc02; color: #fff; }


/* ══ SWITCH DE MÚSICA ══ */
.musica-row {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border-radius: 14px; padding: 14px 16px;
  margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.musica-lbl { font-size: 14px; font-weight: 800; color: var(--texto); }
.musica-sub { font-size: 11px; color: var(--texto-s); margin-top: 2px; }
.switch-wrap { position: relative; width: 50px; height: 28px; flex-shrink: 0; }
.switch-wrap input { opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute; inset: 0; background: #ccc;
  border-radius: 28px; cursor: pointer; transition: background .3s;
}
.switch-track::before {
  content: ""; position: absolute;
  width: 22px; height: 22px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%;
  transition: transform .3s; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.switch-wrap input:checked + .switch-track { background: var(--verde); }
.switch-wrap input:checked + .switch-track::before { transform: translateX(22px); }

/* ══ TIENDA ══ */
#p-tienda { background:#f0f4f8; }
.tienda-body { flex:1; overflow-y:auto; padding:18px 16px 80px; }
.tienda-balance { background:linear-gradient(135deg,#00b8d4,#1cb0f6); color:#fff; border-radius:18px; padding:18px 20px; margin-bottom:16px; box-shadow:0 6px 18px rgba(0,184,212,.25); }
.tienda-balance .tb-lbl { font-size:12px; font-weight:700; opacity:.85; margin-bottom:4px; }
.tienda-balance .tb-val { font-size:34px; font-weight:800; }
.tienda-card { background:#fff; border-radius:18px; padding:16px; border:2px solid var(--borde); border-bottom:4px solid var(--borde); margin-bottom:14px; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.tienda-prod-top { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.tienda-prod-ico { width:52px; height:52px; border-radius:14px; background:var(--azul-l); display:flex; align-items:center; justify-content:center; font-size:28px; flex-shrink:0; overflow:hidden; }
.tienda-prod-ico img { width:100%; height:100%; object-fit:contain; padding:4px; }
.tienda-prod-nom { font-size:16px; font-weight:800; }
.tienda-prod-desc { font-size:12px; color:var(--texto-s); line-height:1.45; margin-top:3px; }
.tienda-prod-info { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:14px 0; font-size:13px; font-weight:800; }
.tienda-btn { width:100%; padding:14px; border:none; border-radius:14px; font-size:15px; font-weight:800; cursor:pointer; border-bottom:4px solid transparent; }
.tienda-btn.comprar { background:var(--verde); color:#fff; border-bottom-color:var(--verde-d); }
.tienda-btn.comprar:active { border-bottom-width:2px; transform:translateY(2px); }
.tienda-btn.off { background:var(--gris-l); color:var(--gris); border-bottom-color:#ddd; cursor:default; }


/* ══ HUEVOS / INCUBACIÓN ══ */
.huevo-inicio-card {
  background:#fff; border-radius:16px; padding:13px 14px; margin:0 0 14px;
  border:2px solid var(--borde); box-shadow:0 2px 8px rgba(0,0,0,.05);
  display:flex; align-items:center; gap:12px; cursor:pointer;
}
.huevo-inicio-card.listo { border-color:var(--verde); background:var(--verde-l); }
.huevo-circular {
  width:58px; height:58px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; position:relative;
  background:conic-gradient(var(--azul) 0deg, var(--borde) 0deg);
}
.huevo-circular::after { content:""; position:absolute; inset:5px; background:#fff; border-radius:50%; }
.huevo-inicio-card.listo .huevo-circular::after { background:var(--verde-l); }
.huevo-circular img { width:38px; height:38px; object-fit:contain; position:relative; z-index:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
.huevo-circular .huevo-emoji { position:relative; z-index:1; font-size:30px; }
.huevo-info { flex:1; min-width:0; }
.huevo-tit { font-size:13px; font-weight:800; margin-bottom:2px; }
.huevo-sub { font-size:11px; color:var(--texto-s); font-weight:700; line-height:1.35; }
.huevo-mini-barra { height:6px; background:var(--gris-l); border-radius:4px; overflow:hidden; margin-top:7px; }
.huevo-mini-fill { height:100%; background:var(--azul); border-radius:4px; transition:width .3s; }
.huevo-inicio-card.listo .huevo-mini-fill { background:var(--verde); }
.huevo-pill { font-size:10px; font-weight:800; color:var(--azul-d); background:var(--azul-l); border-radius:999px; padding:4px 8px; white-space:nowrap; }
.huevo-inicio-card.listo .huevo-pill { color:var(--verde-d); background:#fff; }
.huevo-perfil-card {
  background:var(--gris-l); border-radius:12px; padding:10px 14px; margin-bottom:14px;
  font-size:12px; color:var(--texto-s); font-weight:700; border:1px solid var(--borde);
}
.huevo-perfil-card.listo { background:var(--verde-l); color:var(--verde-d); border-color:var(--verde); }
.huevo-perfil-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; }
.huevo-perfil-nom { font-size:12px; font-weight:800; color:var(--texto); }
.huevo-perfil-card.listo .huevo-perfil-nom { color:var(--verde-d); }
.huevo-perfil-fila { font-size:11px; color:var(--texto-s); }

/* ══ MASCOTAS ══ */
/* Pantalla apertura */
#p-apertura { background:#0f0f1a; overflow:hidden; }
.apertura-escena { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; padding:24px; gap:0; position:relative; }

/* Partículas */
.particula { position:absolute; pointer-events:none; border-radius:50%; animation:flotar 1.2s ease-out forwards; }
@keyframes flotar { 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-80px) scale(.4)} }

/* Huevo animado */
.apertura-huevo { font-size:0; margin-bottom:20px; position:relative; }
.apertura-huevo img { width:140px; height:140px; object-fit:contain; filter:drop-shadow(0 0 24px rgba(255,200,0,.5)); }
.apertura-huevo.sacudir1 { animation:sac1 .9s ease-in-out; }
.apertura-huevo.sacudir2 { animation:sac2 .6s ease-in-out; }
@keyframes sac1 { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-7deg)} 50%{transform:rotate(8deg)} 75%{transform:rotate(-6deg)} }
@keyframes sac2 { 0%,100%{transform:rotate(0)} 15%{transform:rotate(-14deg)} 45%{transform:rotate(15deg)} 70%{transform:rotate(-12deg)} }
.apertura-destello { position:absolute; inset:-30px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 70%); opacity:0; pointer-events:none; }
.apertura-destello.activo { animation:destello .4s ease-out forwards; }
@keyframes destello { 0%{opacity:0;transform:scale(.5)} 40%{opacity:1} 100%{opacity:0;transform:scale(2)} }

/* Mascota resultado */
.apertura-mascota { display:flex; flex-direction:column; align-items:center; gap:12px; animation:aparecer .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes aparecer { 0%{opacity:0;transform:scale(.7)} 100%{opacity:1;transform:scale(1)} }
.apertura-mascota img { width:150px; height:150px; object-fit:contain; filter:drop-shadow(0 0 20px rgba(255,200,80,.6)); }
.apertura-rareza-badge { font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; padding:5px 16px; border-radius:99px; }
.rareza-comun-badge     { background:#e0e0e0; color:#555; }
.rareza-rara-badge      { background:#bbdefb; color:#1565c0; }
.rareza-epica-badge     { background:#e1bee7; color:#6a1b9a; }
.rareza-legendaria-badge{ background:linear-gradient(90deg,#ffe066,#ff9600); color:#7a3900; }
.apertura-especie { font-size:18px; font-weight:800; color:#fff; text-align:center; }
.apertura-tit { font-size:22px; font-weight:800; color:#fff; text-align:center; }
.apertura-sub { font-size:13px; color:rgba(255,255,255,.65); text-align:center; margin-top:-8px; }
.apertura-nombre-input { font-size:17px; font-weight:800; color:#fff; background:rgba(255,255,255,.13); border:2px solid rgba(255,255,255,.35); border-radius:13px; padding:11px 18px; text-align:center; width:230px; outline:none; margin-top:4px; }
.apertura-nombre-input::placeholder { color:rgba(255,255,255,.4); }
.apertura-btns { display:flex; flex-direction:column; gap:9px; width:100%; max-width:290px; margin-top:6px; }
.apertura-btn-p { background:linear-gradient(135deg,#58cc02,#3da800); color:#fff; border:none; border-radius:14px; padding:14px; font-size:15px; font-weight:800; cursor:pointer; box-shadow:0 4px 14px rgba(88,204,2,.35); }
.apertura-btn-s { background:rgba(255,255,255,.12); color:#fff; border:2px solid rgba(255,255,255,.25); border-radius:14px; padding:12px; font-size:14px; font-weight:700; cursor:pointer; }

/* Mascota activa en inicio */
.mascota-inicio-card { background:#fff; border-radius:16px; padding:12px 14px; margin:0 0 14px; border:2px solid var(--borde); display:flex; align-items:center; gap:12px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.mascota-inicio-ico { width:52px; height:52px; object-fit:contain; flex-shrink:0; }
.mascota-inicio-info { flex:1; min-width:0; }
.mascota-inicio-nom { font-size:13px; font-weight:800; }
.mascota-inicio-sub { font-size:11px; color:var(--texto-s); font-weight:700; margin-top:2px; }
.mascota-inicio-etapa { font-size:10px; font-weight:800; color:var(--azul); margin-top:4px; }
/* Barra de hambre en inicio */
.mascota-hambre-row { display:flex; align-items:center; gap:6px; margin-top:5px; }
.mascota-hambre-bar { flex:1; height:5px; background:var(--gris-l); border-radius:3px; overflow:hidden; }
.mascota-hambre-fill { height:100%; border-radius:3px; transition:width .4s; }

/* Mascota útil y compacta: no cubre lecciones ni texto */
.mascota-asistente-card {
  background:linear-gradient(135deg,#fff 0%,#f1f9ff 100%);
  border:2px solid var(--azul); border-radius:16px; padding:11px 12px;
  margin:0 0 12px; box-shadow:0 3px 10px rgba(28,176,246,.12);
}
.mascota-asistente-top { display:flex; align-items:center; gap:10px; }
.mascota-asistente-img { width:46px; height:46px; object-fit:contain; flex-shrink:0; filter:drop-shadow(0 3px 5px rgba(0,0,0,.14)); }
.mascota-asistente-info { flex:1; min-width:0; }
.mascota-asistente-nom { font-size:13px; font-weight:900; color:var(--texto); }
.mascota-asistente-msg { font-size:11px; color:var(--texto-s); font-weight:700; line-height:1.35; margin-top:2px; }
.mascota-asistente-stats { display:flex; gap:7px; flex-wrap:wrap; margin-top:6px; }
.mascota-asistente-stat { background:#fff; border:1px solid var(--borde); border-radius:999px; padding:3px 7px; font-size:9px; font-weight:900; color:var(--texto-s); }
.mascota-asistente-acciones { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:9px; }
.mascota-asistente-btn { border:none; border-radius:9px; padding:8px 4px; font-size:9.5px; font-weight:900; cursor:pointer; background:var(--gris-l); color:var(--texto); min-width:0; }
.mascota-asistente-btn.principal { background:var(--azul); color:#fff; }
.mascota-asistente-btn:active { transform:translateY(1px); }
@media (max-width:360px) {
  .mascota-asistente-acciones { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Saludo al entrar */
#mascota-saludo-overlay { position:fixed; inset:0; z-index:900; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.mascota-saludo-card { background:#fff; border-radius:22px; padding:24px 28px; text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.18); max-width:280px; width:90%; animation:saludo-in .35s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes saludo-in { 0%{opacity:0;transform:scale(.7)} 100%{opacity:1;transform:scale(1)} }
.mascota-saludo-card.saliendo { animation:saludo-out .3s ease-in forwards; }
@keyframes saludo-out { 0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(.8)} }
.mascota-saludo-img { width:90px; height:90px; object-fit:contain; margin-bottom:8px; }
.mascota-saludo-nom { font-size:16px; font-weight:800; margin-bottom:4px; }
.mascota-saludo-msg { font-size:13px; color:var(--texto-s); line-height:1.4; }

/* Panel de cuidado (modal) */
#cuidado-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:700; display:flex; align-items:flex-end; justify-content:center; }
.cuidado-card { background:#fff; border-radius:22px 22px 0 0; padding:24px 20px 40px; width:100%; max-width:440px; }
.cuidado-img { width:100px; height:100px; object-fit:contain; display:block; margin:0 auto 10px; }
.cuidado-nom { font-size:18px; font-weight:800; text-align:center; }
.cuidado-hambre-label { font-size:12px; font-weight:800; color:var(--texto-s); margin:12px 0 5px; }
.cuidado-hambre-bar { height:10px; background:var(--gris-l); border-radius:6px; overflow:hidden; margin-bottom:6px; }
.cuidado-hambre-fill { height:100%; border-radius:6px; transition:width .4s; }
.cuidado-hambre-txt { font-size:12px; color:var(--texto-s); font-weight:700; margin-bottom:12px; }
.cuidado-msg { background:var(--gris-l); border-radius:12px; padding:10px 14px; font-size:13px; font-weight:700; color:var(--texto); margin-bottom:16px; text-align:center; }
.cuidado-inventario { font-size:12px; font-weight:800; color:var(--texto-s); margin-bottom:8px; }
.cuidado-btns { display:flex; flex-direction:column; gap:8px; }
.cuidado-btn { padding:13px; border:none; border-radius:13px; font-size:14px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
.cuidado-btn.comida { background:var(--verde-l); color:var(--verde-d); }
.cuidado-btn.premium { background:#fff3e0; color:#e65100; }
.cuidado-btn:disabled { opacity:.45; cursor:default; }
.cuidado-cerrar { width:100%; margin-top:10px; padding:12px; background:var(--gris-l); border:none; border-radius:12px; font-size:14px; font-weight:700; cursor:pointer; }

/* Pantalla colección */
#p-mascotas { background:#f0f4f8; }
.mascotas-body { flex:1; overflow-y:auto; padding:14px 14px 80px; }
.mascotas-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mascota-card { background:#fff; border-radius:14px; padding:14px 11px; border:2px solid var(--borde); text-align:center; cursor:pointer; transition:border-color .2s; }
.mascota-card.activa { border-color:var(--verde); background:var(--verde-l); }
.mascota-card img { width:70px; height:70px; object-fit:contain; margin-bottom:6px; }
.mascota-card-nom { font-size:13px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mascota-card-esp { font-size:11px; color:var(--texto-s); margin-top:1px; }
.mascota-card-badge { display:inline-block; font-size:9px; font-weight:800; padding:3px 8px; border-radius:99px; margin-top:5px; }

/* Panel mascotas en perfil */
.perf-masc-activa { background:#fff; border-radius:14px; padding:14px; border:2px solid var(--verde); display:flex; align-items:center; gap:13px; margin-bottom:12px; }
.perf-masc-activa img { width:64px; height:64px; object-fit:contain; flex-shrink:0; }
.perf-masc-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:14px; }
.perf-masc-card { background:#fff; border-radius:12px; padding:11px 9px; border:2px solid var(--borde); text-align:center; cursor:pointer; }
.perf-masc-card.activa { border-color:var(--verde); background:var(--verde-l); }
.perf-masc-card img { width:58px; height:58px; object-fit:contain; margin-bottom:5px; }
.perf-masc-card-nom { font-size:12px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.perf-masc-card-esp { font-size:10px; color:var(--texto-s); margin-top:1px; }
.perf-masc-elegir { margin-top:6px; background:var(--azul); color:#fff; border:none; border-radius:8px; padding:5px 10px; font-size:10px; font-weight:800; cursor:pointer; }
.perf-huevo-row { background:var(--gris-l); border-radius:12px; padding:11px 13px; margin-bottom:7px; }
.perf-huevo-tit { font-size:12px; font-weight:800; margin-bottom:4px; }
.perf-huevo-sub { font-size:11px; color:var(--texto-s); font-weight:700; }
.perf-huevo-barra { height:5px; background:var(--borde); border-radius:3px; overflow:hidden; margin-top:6px; }
.perf-huevo-fill { height:100%; border-radius:3px; background:var(--azul); }
.perf-huevo-lista { font-size:11px; color:var(--texto-s); font-weight:700; padding:8px 12px; background:var(--gris-l); border-radius:10px; }

/* ── Felicidad y evolución ── */
.mascota-felicidad-row { display:flex; align-items:center; gap:6px; margin-top:4px; }
.mascota-felicidad-bar { flex:1; height:5px; background:var(--gris-l); border-radius:3px; overflow:hidden; }
.mascota-felicidad-fill { height:100%; border-radius:3px; transition:width .4s; }
.evolucionar-btn { width:100%; margin-top:10px; background:linear-gradient(135deg,#9b59b6,#6a1b9a); color:#fff; border:none; border-radius:12px; padding:12px; font-size:14px; font-weight:800; cursor:pointer; }
.evolucion-progress-wrap { margin-top:8px; }
.evolucion-progress-bar { height:8px; background:var(--gris-l); border-radius:4px; overflow:hidden; margin-top:4px; }
.evolucion-progress-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,#9b59b6,#e040fb); transition:width .4s; }
.mascota-escapada-overlay { position:absolute; inset:0; background:rgba(0,0,0,.45); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px; }


/* ── TRANSFORMACIÓN UNIVERSAL: NACIMIENTO / EVOLUCIÓN ── */
.transformacion-overlay {
  position:fixed; inset:0; z-index:9997;
  background:radial-gradient(circle at center,#263b75 0%,#11162e 44%,#050713 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; color:#fff; text-align:center;
}
.transformacion-overlay::before {
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.18),transparent 16%),
    radial-gradient(circle at 80% 20%,rgba(255,215,0,.14),transparent 18%),
    radial-gradient(circle at 50% 80%,rgba(28,176,246,.18),transparent 20%);
  animation:transformacionFondo 3s ease-in-out infinite alternate;
}
@keyframes transformacionFondo { from { transform:scale(1) rotate(0deg); opacity:.65; } to { transform:scale(1.12) rotate(6deg); opacity:1; } }
.transformacion-escena { position:relative; z-index:2; width:100%; max-width:360px; min-height:420px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px 20px; }
.transformacion-pre { font-size:12px; font-weight:900; letter-spacing:1.3px; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:20px; animation:transformacionTextoPulso 1.2s ease-in-out infinite; }
@keyframes transformacionTextoPulso { 0%,100% { opacity:.55; transform:translateY(0); } 50% { opacity:1; transform:translateY(-2px); } }
.transformacion-aura { position:absolute; width:250px; height:250px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,235,120,.65) 24%,rgba(28,176,246,.22) 48%,rgba(255,255,255,0) 72%); filter:blur(4px); opacity:.7; animation:transformacionAura 1.05s ease-in-out infinite; }
@keyframes transformacionAura { 0%,100% { transform:scale(.88); opacity:.55; } 50% { transform:scale(1.18); opacity:1; } }
.transformacion-anillo { position:absolute; width:250px; height:250px; border-radius:50%; border:3px solid rgba(255,255,255,.55); box-shadow:0 0 26px rgba(255,255,255,.65), inset 0 0 22px rgba(255,255,255,.35); animation:transformacionAnillo 1.15s linear infinite; }
@keyframes transformacionAnillo { from { transform:rotate(0deg) scale(.92); opacity:.55; } to { transform:rotate(360deg) scale(1.18); opacity:.08; } }
.transformacion-img { position:relative; z-index:3; width:178px; height:178px; object-fit:contain; filter:brightness(0) invert(1) drop-shadow(0 0 26px rgba(255,255,255,.95)); animation:transformacionTemblor .18s linear infinite, transformacionFlotar .9s ease-in-out infinite; }
.transformacion-img.revelada { width:190px; height:190px; filter:drop-shadow(0 0 34px rgba(255,215,0,.9)); animation:transformacionRevelar .55s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes transformacionTemblor { 0% { transform:translate(0,0) scale(1); } 25% { transform:translate(-3px,2px) scale(1.03); } 50% { transform:translate(3px,-2px) scale(1.06); } 75% { transform:translate(-2px,-1px) scale(1.03); } 100% { transform:translate(0,0) scale(1); } }
@keyframes transformacionFlotar { 0%,100% { margin-top:0; } 50% { margin-top:-10px; } }
@keyframes transformacionRevelar { 0% { opacity:0; transform:scale(.55); filter:brightness(3) drop-shadow(0 0 60px #fff); } 62% { opacity:1; transform:scale(1.18); } 100% { opacity:1; transform:scale(1); } }
.transformacion-destello { position:absolute; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 0 16px #fff,0 0 30px #ffe066; animation:transformacionParticula 1.6s ease-out infinite; }
@keyframes transformacionParticula { 0% { opacity:0; transform:rotate(var(--r)) translateX(40px) scale(.4); } 22% { opacity:1; } 100% { opacity:0; transform:rotate(var(--r)) translateX(170px) scale(.05); } }
.transformacion-final { margin-top:22px; opacity:0; transform:translateY(10px); }
.transformacion-final.visible { animation:transformacionFinal .45s ease-out forwards; }
@keyframes transformacionFinal { to { opacity:1; transform:translateY(0); } }
.transformacion-titulo { font-size:22px; font-weight:900; margin-bottom:6px; }
.transformacion-sub { font-size:13px; color:rgba(255,255,255,.76); font-weight:700; line-height:1.35; }
.transformacion-continuar { margin-top:18px; opacity:0; transform:translateY(8px); pointer-events:none; background:linear-gradient(135deg,#58cc02,#3da800); color:#fff; border:none; border-radius:14px; padding:13px 24px; font-size:15px; font-weight:900; cursor:pointer; box-shadow:0 8px 22px rgba(88,204,2,.35); transition:opacity .35s ease, transform .35s ease; }
.transformacion-continuar.visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.transformacion-continuar:active { transform:translateY(2px); }

/* ── NOTIFICACIONES GLOBALES ── */
.notif-badge { position:absolute; top:-5px; right:-5px; background:var(--rojo); color:#fff; border-radius:99px; font-size:9px; font-weight:800; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center; padding:0 4px; pointer-events:none; border:2px solid #fff; z-index:1; }
.notif-card { background:#fff; border-radius:12px; padding:12px 14px; border:2px solid var(--borde); margin-bottom:8px; cursor:pointer; }
.notif-card.nueva { border-left:4px solid var(--azul); background:#f0f8ff; }
.notif-card.nueva.urgente { border-left-color:var(--rojo); background:#fff5f5; }
.notif-card.nueva.reto { border-left-color:#9b59b6; background:#f9f0ff; }
.notif-tit { font-size:13px; font-weight:800; margin-bottom:3px; color:var(--texto); }
.notif-msg { font-size:12px; color:var(--texto-s); line-height:1.4; }
.notif-meta { font-size:10px; color:var(--gris); margin-top:5px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.notif-tipo-badge { font-size:9px; font-weight:800; padding:2px 7px; border-radius:99px; text-transform:uppercase; letter-spacing:.5px; }
.notif-tipo-aviso { background:#e3f2fd; color:#1565c0; }
.notif-tipo-reto { background:#f3e5f5; color:#6a1b9a; }
.notif-tipo-urgente { background:#ffebee; color:#c62828; }
.notif-tipo-sistema { background:#f5f5f5; color:#555; }
.notif-acceso-card { width:100%; background:#fff; border:2px solid var(--borde); border-bottom:4px solid var(--borde); border-radius:16px; padding:14px 15px; margin-bottom:16px; display:flex; align-items:center; gap:12px; cursor:pointer; color:var(--texto); text-align:left; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.notif-acceso-card:active { transform:translateY(2px); border-bottom-width:2px; }
.notif-acceso-ico { width:44px; height:44px; border-radius:14px; background:var(--azul-l); display:flex; align-items:center; justify-content:center; font-size:23px; flex-shrink:0; position:relative; }
.notif-acceso-info { flex:1; min-width:0; }
.notif-acceso-tit { font-size:14px; font-weight:900; }
.notif-acceso-sub { font-size:11px; line-height:1.35; color:var(--texto-s); font-weight:700; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notif-acceso-contador { display:none; min-width:25px; height:25px; padding:0 7px; border-radius:99px; align-items:center; justify-content:center; background:var(--rojo); color:#fff; font-size:11px; font-weight:900; flex-shrink:0; }
.notif-bandeja-body { flex:1; overflow-y:auto; padding:16px 16px 84px; background:#f0f4f8; }
.notif-bandeja-vacia { background:#fff; border:2px solid var(--borde); border-radius:18px; padding:34px 20px; text-align:center; color:var(--texto-s); font-size:13px; font-weight:700; line-height:1.5; }
.notif-bandeja-vacia .ico { font-size:42px; margin-bottom:10px; }
.notif-bandeja-seccion { font-size:10px; font-weight:900; color:var(--texto-s); text-transform:uppercase; letter-spacing:.6px; margin:4px 2px 8px; }
.notif-bandeja-body .notif-card { cursor:default; padding:14px 15px; margin-bottom:10px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.notif-bandeja-body .notif-tit { font-size:14px; }
.notif-bandeja-body .notif-msg { font-size:12.5px; line-height:1.5; white-space:pre-line; }
/* Buscador de alumnos en panel admin real — letras negras */
.admin-alumno-resultado-real { background:#f8f9fa; border-radius:8px; padding:10px 12px; margin-bottom:6px; cursor:pointer; border:1px solid #e5e5e5; }
.admin-alumno-resultado-real:hover { background:#e8f4ff; border-color:#1cb0f6; }
.admin-alumno-resultado-real .alumno-nombre { font-size:14px; font-weight:800; color:#1a1a1a; }
.admin-alumno-resultado-real .alumno-correo { font-size:12px; color:#666; margin-top:2px; }

/* ══ MAPA AVENTURA ══ */
.mapa-body { transition:background .5s ease; }
.tema-historia { background:linear-gradient(180deg,#fdf6e3 0%,#f5e6c8 45%,#eeddb5 100%); }
.tema-historia::before { content:'🏛️'; position:absolute; top:120px; right:-24px; font-size:120px; opacity:.07; pointer-events:none; transform:rotate(12deg); }
.tema-historia::after  { content:'📜'; position:absolute; top:520px; left:-28px; font-size:110px; opacity:.07; pointer-events:none; transform:rotate(-14deg); }
.tema-mate { background:linear-gradient(180deg,#eef4ff 0%,#dfe9fc 50%,#d2e0fa 100%); }
.tema-mate::before { content:'📐'; position:absolute; top:130px; right:-22px; font-size:115px; opacity:.08; pointer-events:none; transform:rotate(15deg); }
.tema-mate::after  { content:'🧮'; position:absolute; top:540px; left:-26px; font-size:105px; opacity:.08; pointer-events:none; transform:rotate(-12deg); }
.tema-sociales { background:linear-gradient(180deg,#f0fdf9 0%,#dcf5ec 50%,#cbeee2 100%); }
.tema-sociales::before { content:'⚖️'; position:absolute; top:130px; right:-20px; font-size:112px; opacity:.08; pointer-events:none; transform:rotate(10deg); }
.tema-sociales::after  { content:'🌎'; position:absolute; top:530px; left:-26px; font-size:108px; opacity:.08; pointer-events:none; transform:rotate(-10deg); }
.tema-quimica { background:linear-gradient(180deg,#f2fdf4 0%,#dff5e4 50%,#ccecd6 100%); }
.tema-quimica::before { content:'🧪'; position:absolute; top:130px; right:-20px; font-size:112px; opacity:.08; pointer-events:none; }
.tema-quimica::after  { content:'⚗️'; position:absolute; top:530px; left:-26px; font-size:105px; opacity:.08; pointer-events:none; }
.tema-bio { background:linear-gradient(180deg,#f3fdf0 0%,#e2f6da 50%,#d2efc6 100%); }
.tema-bio::before { content:'🧬'; position:absolute; top:130px; right:-22px; font-size:112px; opacity:.08; pointer-events:none; }
.tema-bio::after  { content:'🌿'; position:absolute; top:530px; left:-26px; font-size:108px; opacity:.08; pointer-events:none; }
.tema-fisica { background:linear-gradient(180deg,#f4f0ff 0%,#e6dcfb 50%,#d9ccf7 100%); }
.tema-fisica::before { content:'⚡'; position:absolute; top:130px; right:-20px; font-size:112px; opacity:.09; pointer-events:none; }
.tema-fisica::after  { content:'🪐'; position:absolute; top:530px; left:-26px; font-size:108px; opacity:.08; pointer-events:none; }
.tema-espanol { background:linear-gradient(180deg,#fff7f0 0%,#fdeadb 50%,#f9ddc5 100%); }
.tema-espanol::before { content:'📚'; position:absolute; top:130px; right:-22px; font-size:112px; opacity:.08; pointer-events:none; }
.tema-espanol::after  { content:'🖋️'; position:absolute; top:530px; left:-24px; font-size:104px; opacity:.08; pointer-events:none; }
.tema-ingles { background:linear-gradient(180deg,#f0f7ff 0%,#dceafc 50%,#cbdff9 100%); }
.tema-ingles::before { content:'🌍'; position:absolute; top:130px; right:-22px; font-size:112px; opacity:.08; pointer-events:none; }
.tema-ingles::after  { content:'✈️'; position:absolute; top:530px; left:-26px; font-size:104px; opacity:.08; pointer-events:none; }
.tema-evento { background:linear-gradient(180deg,#fff8e8 0%,#fdecc8 50%,#fbdfa8 100%); }
.tema-evento::before { content:'⭐'; position:absolute; top:130px; right:-20px; font-size:112px; opacity:.1; pointer-events:none; }
.tema-default { background:linear-gradient(180deg,#f7fafc 0%,#eef3f8 100%); }

/* Nodos de aventura */
.niv-btn { position:relative; }
.niv-btn.nb-c::after {
  content:'✓'; position:absolute; top:-5px; right:-5px;
  background:#fff; color:var(--verde); border:2px solid var(--verde);
  width:20px; height:20px; border-radius:50%;
  font-size:11px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
}
@keyframes auraActual {
  0%,100% { box-shadow:0 4px 0 rgba(0,0,0,.15), 0 0 0 0 rgba(28,176,246,.5); }
  50%     { box-shadow:0 4px 0 rgba(0,0,0,.15), 0 0 0 14px rgba(28,176,246,0); }
}
.nb-d { animation:pulso 2s ease-in-out infinite, auraActual 2s ease-out infinite; }

/* Retos = jefe final */
.nb-reto {
  border:3px solid #ffd700 !important;
  animation:brilloReto 1.8s ease-in-out infinite;
}
@keyframes brilloReto {
  0%,100% { box-shadow:0 4px 0 rgba(0,0,0,.15), 0 0 8px rgba(255,215,0,.45); }
  50%     { box-shadow:0 4px 0 rgba(0,0,0,.15), 0 0 20px rgba(255,215,0,.85); }
}
.reto-corona {
  position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  font-size:18px; pointer-events:none;
  animation:flotarBuho 2.2s ease-in-out infinite;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));
  z-index:2;
}

/* Mascota acompañante en el mapa */
.mapa-pet-wrap {
  position:absolute; top:-58px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:5px; z-index:3; pointer-events:none;
}
.mapa-pet-img { width:46px; height:46px; object-fit:contain; animation:flotarBuho 2.6s ease-in-out infinite; filter:drop-shadow(0 3px 5px rgba(0,0,0,.2)); }
.mapa-pet-bub {
  background:#fff; border:2px solid var(--azul); border-radius:10px;
  padding:4px 9px; font-size:10px; font-weight:800; color:var(--azul);
  white-space:nowrap; animation:bounce 1.4s ease-in-out infinite;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}

/* Tarjeta de recomendación de la mascota */
.reco-card {
  background:linear-gradient(135deg,#ffffff 0%,#eef8ff 100%);
  border:2px solid var(--azul); border-radius:16px;
  padding:13px 14px; margin-bottom:14px;
  display:flex; gap:12px; align-items:flex-start;
  box-shadow:0 4px 14px rgba(28,176,246,.18);
  position:relative; overflow:hidden;
}
.reco-card::before {
  content:'💡'; position:absolute; top:-12px; right:-10px;
  font-size:64px; opacity:.07; pointer-events:none;
}
.reco-img { width:58px; height:58px; object-fit:contain; animation:flotarBuho 3s ease-in-out infinite; flex-shrink:0; filter:drop-shadow(0 3px 6px rgba(0,0,0,.15)); }
.reco-txt { flex:1; min-width:0; }
.reco-tag { font-size:9px; font-weight:900; color:var(--azul); text-transform:uppercase; letter-spacing:.6px; margin-bottom:3px; }
.reco-msg { font-size:12.5px; font-weight:700; line-height:1.45; color:var(--texto); }
.reco-btns { display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }
.reco-btn { padding:8px 13px; border:none; border-radius:10px; font-size:11px; font-weight:800; cursor:pointer; transition:transform .1s; }
.reco-btn:active { transform:translateY(1px); }
.reco-btn.p { background:var(--azul); color:#fff; box-shadow:0 3px 0 #0d8ecf; }
.reco-btn.s { background:var(--gris-l); color:var(--texto-s); }

/* ══ LECCIONES PERFECTAS ══ */
.nb-p { background:linear-gradient(135deg,#ffd700,#ffb300) !important; }
.nb-p::after {
  content:'🥇' !important; background:#fff !important;
  border:2px solid #e0a800 !important; font-size:11px !important;
  width:22px !important; height:22px !important;
}
@keyframes brilloDorado {
  0%,100% { box-shadow:0 4px 0 rgba(0,0,0,.15), 0 0 6px rgba(255,215,0,.35); }
  50%     { box-shadow:0 4px 0 rgba(0,0,0,.15), 0 0 14px rgba(255,215,0,.7); }
}
.nb-p { animation:brilloDorado 2.5s ease-in-out infinite; }
.nb-rep::after {
  content:'🔄' !important; background:#fff !important;
  border:2px solid var(--naranja) !important; font-size:10px !important;
}

/* ══ CUADERNO DE ERRORES ══ */
.cuad-card { background:#fff; border-radius:14px; padding:13px 14px; margin-bottom:10px; border:2px solid var(--borde); border-left:5px solid var(--naranja); }
.cuad-card.dominada { border-left-color:var(--verde); opacity:.85; }
.cuad-card.repasada { border-left-color:var(--azul); }
.cuad-preg { font-size:13px; font-weight:800; line-height:1.4; margin-bottom:8px; }
.cuad-resp { font-size:12px; padding:6px 10px; border-radius:8px; margin-bottom:5px; font-weight:700; }
.cuad-resp.mal { background:#ffebee; color:#c62828; }
.cuad-resp.ok  { background:#e8f5e9; color:#2e7d32; }
.cuad-exp { font-size:11.5px; color:var(--texto-s); line-height:1.45; margin-top:6px; background:var(--gris-l); border-radius:8px; padding:7px 10px; }
.cuad-meta { font-size:10px; color:var(--gris); margin-top:7px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.cuad-badge { font-size:9px; font-weight:900; padding:3px 8px; border-radius:99px; text-transform:uppercase; }
.cuad-badge.pendiente { background:#fff3e0; color:#e65100; }
.cuad-badge.repasada  { background:#e3f2fd; color:#1565c0; }
.cuad-badge.dominada  { background:#e8f5e9; color:#2e7d32; }
.cuad-btn { padding:7px 12px; border:none; border-radius:9px; font-size:11px; font-weight:800; cursor:pointer; }

/* ══ LIGA AUTÓNOMA ══ */
.liga-hero { background:linear-gradient(135deg,#1a1a2e,#0f3460); border-radius:18px; padding:22px 18px; text-align:center; color:#fff; margin-bottom:16px; position:relative; overflow:hidden; }
.liga-hero::before { content:'🏆'; position:absolute; top:-18px; right:-14px; font-size:100px; opacity:.08; }
.liga-copa-big { font-size:52px; margin-bottom:6px; }
.liga-row { display:flex; align-items:center; gap:12px; background:#fff; border:2px solid var(--borde); border-radius:13px; padding:11px 14px; margin-bottom:8px; }
.liga-row.actual { border-color:#ffd700; background:linear-gradient(135deg,#fffbe8,#fff); box-shadow:0 3px 10px rgba(255,215,0,.25); }
.liga-ico { font-size:26px; flex-shrink:0; }
.liga-nom { font-size:13px; font-weight:800; flex:1; }
.liga-req { font-size:11px; color:var(--texto-s); font-weight:700; }
.liga-dos-objetivos { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:14px; }
.liga-objetivo {
  border-radius:15px; padding:13px; border:2px solid var(--borde); background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.liga-objetivo.copas { border-color:#f0ce55; background:#fffbee; }
.liga-objetivo.xp { border-color:#8bd2f2; background:#eefaff; }
.liga-objetivo-kicker { font-size:10px; font-weight:950; color:var(--texto-s); text-transform:uppercase; letter-spacing:.45px; }
.liga-objetivo-val { font-size:17px; line-height:1.15; font-weight:950; margin-top:4px; }
.liga-objetivo-txt { font-size:10.5px; line-height:1.4; color:var(--texto-s); font-weight:750; margin-top:4px; }
.liga-reglas-simples { background:#fff; border:2px solid var(--borde); border-radius:15px; padding:12px 13px; margin-bottom:14px; }
.liga-regla { display:flex; gap:10px; align-items:flex-start; padding:7px 0; }
.liga-regla + .liga-regla { border-top:1px solid var(--borde); }
.liga-regla-num {
  width:24px; height:24px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--azul); color:#fff; font-size:11px; font-weight:950;
}
.liga-regla-txt { font-size:11.5px; line-height:1.45; color:var(--texto-s); font-weight:750; }
.liga-regla-txt b { color:var(--texto); }
.liga-xp-barra { height:12px; background:rgba(0,0,0,.1); border-radius:999px; overflow:hidden; margin-top:9px; }
.liga-xp-fill { height:100%; border-radius:inherit; background:linear-gradient(90deg,#1cb0f6,#58cc02); transition:width .5s ease; }
.liga-detalles {
  background:#fff; border:2px solid var(--borde); border-radius:14px; margin-bottom:15px; overflow:hidden;
}
.liga-detalles summary { list-style:none; cursor:pointer; padding:12px 14px; font-size:12px; font-weight:900; display:flex; justify-content:space-between; align-items:center; }
.liga-detalles summary::-webkit-details-marker { display:none; }
.liga-detalles summary::after { content:'▼'; font-size:10px; color:var(--texto-s); transition:transform .2s; }
.liga-detalles[open] summary::after { transform:rotate(180deg); }
.liga-detalles-body { padding:0 10px 10px; }
.temporadas-ciclo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.temporada-ciclo-card {
  min-width:0; border:2px solid var(--borde); border-radius:14px; padding:11px 10px; background:#fff;
  position:relative; overflow:hidden;
}
.temporada-ciclo-card.actual { border-color:#1cb0f6; background:#eefaff; box-shadow:0 3px 11px rgba(28,176,246,.14); }
.temporada-ciclo-card.ganada { border-color:#e2ba39; background:linear-gradient(145deg,#fff9dc,#fff); }
.temporada-ciclo-card.perdida { opacity:.58; filter:grayscale(.35); }
.temporada-ciclo-estado {
  position:absolute; right:7px; top:7px; border-radius:99px; padding:3px 6px;
  font-size:8px; font-weight:950; text-transform:uppercase; letter-spacing:.25px;
  background:var(--gris-l); color:var(--texto-s);
}
.temporada-ciclo-card.actual .temporada-ciclo-estado { background:#d7f3ff; color:#087ca9; }
.temporada-ciclo-card.ganada .temporada-ciclo-estado { background:#fff0a8; color:#765600; }
.temporada-ciclo-ico { font-size:34px; line-height:1; margin-bottom:7px; filter:drop-shadow(0 3px 4px rgba(0,0,0,.12)); }
.temporada-ciclo-mes { font-size:9.5px; font-weight:900; color:var(--texto-s); text-transform:uppercase; letter-spacing:.35px; }
.temporada-ciclo-nom { font-size:11px; line-height:1.25; font-weight:950; margin-top:2px; padding-right:3px; }
.temporada-ciclo-meta { font-size:9.5px; color:var(--texto-s); font-weight:800; margin-top:5px; }
.liga-pretemporada {
  background:linear-gradient(135deg,#eef8ff,#fff); border:2px solid #9ed8f3; border-radius:16px;
  padding:17px 15px; text-align:center; margin-bottom:14px;
}

/* ══ CELEBRACIONES DEL SISTEMA — cofre, rango, liga y dominio ══ */
.sistema-celeb-overlay {
  position:fixed; inset:0; z-index:12050; display:flex; align-items:center; justify-content:center;
  padding:22px; background:rgba(10,18,35,.78); backdrop-filter:blur(5px);
}
.sistema-celeb-card {
  width:min(390px,100%); max-height:92vh; overflow:auto; position:relative; text-align:center;
  border-radius:25px; padding:28px 22px 22px; color:#fff;
  background:linear-gradient(145deg,#13294b,#0d1d36 65%,#172d52);
  border:2px solid rgba(255,255,255,.18); box-shadow:0 22px 70px rgba(0,0,0,.48);
}
.sistema-celeb-card.dorado { background:linear-gradient(145deg,#704800,#2f2104 66%,#634100); }
.sistema-celeb-card.verde { background:linear-gradient(145deg,#176b34,#103d24 66%,#155b30); }
.sistema-celeb-kicker { font-size:11px; font-weight:900; letter-spacing:1.2px; text-transform:uppercase; color:rgba(255,255,255,.72); }
.sistema-celeb-titulo { font-size:24px; line-height:1.08; font-weight:950; margin:8px 0 7px; }
.sistema-celeb-sub { font-size:13px; line-height:1.5; color:rgba(255,255,255,.82); font-weight:700; }
.sistema-celeb-premio { font-size:30px; font-weight:950; color:#ffe16b; margin:14px 0 5px; text-shadow:0 2px 12px rgba(255,218,73,.35); }
.sistema-celeb-acciones { display:flex; gap:9px; margin-top:20px; }
.sistema-celeb-btn {
  flex:1; border:none; border-radius:14px; padding:13px 11px; font-size:13px; font-weight:900; cursor:pointer;
}
.sistema-celeb-btn.saltar { color:#fff; background:rgba(255,255,255,.13); }
.sistema-celeb-btn.continuar { color:#172033; background:#fff; box-shadow:0 4px 0 rgba(0,0,0,.18); }
.sistema-celeb-btn[hidden] { display:none; }
.sistema-celeb-particulas { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.sistema-celeb-particula { position:absolute; font-size:18px; animation:sistemaParticula 2.4s ease-in-out infinite; opacity:.72; }
@keyframes sistemaParticula { 0%,100%{transform:translateY(8px) scale(.7);opacity:.25} 50%{transform:translateY(-12px) scale(1.15);opacity:1} }
.cofre-semanal-visual { width:154px; height:142px; margin:12px auto 2px; position:relative; display:flex; align-items:center; justify-content:center; }
.cofre-semanal-emoji { font-size:100px; line-height:1; filter:drop-shadow(0 12px 14px rgba(0,0,0,.35)); transform-origin:50% 82%; }
.cofre-semanal-visual.cerrado .cofre-semanal-emoji { animation:cofreSacudir .62s ease-in-out infinite; }
.cofre-semanal-visual.abierto .cofre-semanal-emoji { animation:cofreAbrir .62s cubic-bezier(.2,.85,.3,1.25) both; }
@keyframes cofreSacudir { 0%,100%{transform:rotate(0) scale(1)} 25%{transform:rotate(-5deg) scale(1.03)} 75%{transform:rotate(5deg) scale(1.03)} }
@keyframes cofreAbrir { 0%{transform:scale(.9)} 55%{transform:scale(1.22) rotate(-3deg)} 100%{transform:scale(1.08)} }
.cofre-diamante-volador { position:absolute; left:50%; top:55%; font-size:25px; opacity:0; }
.cofre-semanal-visual.abierto .cofre-diamante-volador { animation:diamanteVolar 1.3s ease-out forwards; animation-delay:var(--d); }
@keyframes diamanteVolar { 0%{opacity:0;transform:translate(-50%,0) scale(.4)} 25%{opacity:1} 100%{opacity:0;transform:translate(calc(-50% + var(--x)),var(--y)) scale(1.18)} }
.sistema-cambio-emblema { display:flex; align-items:center; justify-content:center; gap:13px; margin:20px 0 10px; }
.sistema-emblema {
  width:94px; min-height:94px; border-radius:24px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.2); font-size:52px;
}
.sistema-emblema.nuevo { background:rgba(255,224,95,.18); border-color:#ffe36b; animation:nuevoEmblema .8s cubic-bezier(.2,.85,.3,1.3) both; }
@keyframes nuevoEmblema { 0%{transform:scale(.45) rotate(-14deg);opacity:0} 100%{transform:scale(1) rotate(0);opacity:1} }
.sistema-flecha { font-size:25px; color:rgba(255,255,255,.7); }
.dominio-sello { width:140px; height:140px; margin:16px auto 8px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:67px; background:radial-gradient(circle,#fff9cc 0 44%,#e8b735 45% 52%,#6d4b00 53% 100%);
  box-shadow:0 0 0 7px rgba(255,224,91,.18),0 14px 35px rgba(0,0,0,.28); animation:dominioSello .75s cubic-bezier(.2,.85,.3,1.3) both; }
@keyframes dominioSello { 0%{transform:scale(2.2) rotate(-18deg);opacity:0} 100%{transform:scale(1) rotate(0);opacity:1} }
.trofeo-temporada-visual { width:165px; height:165px; margin:13px auto 6px; position:relative; display:flex; align-items:center; justify-content:center; }
.trofeo-temporada-halo {
  position:absolute; inset:9px; border-radius:50%; background:radial-gradient(circle,rgba(255,236,120,.48),rgba(255,220,65,.05) 64%,transparent 66%);
  animation:trofeoHalo 1.5s ease-in-out infinite;
}
.trofeo-temporada-ico {
  position:relative; z-index:2; font-size:92px; line-height:1; filter:drop-shadow(0 13px 15px rgba(0,0,0,.35));
  animation:trofeoEntrada .9s cubic-bezier(.17,.88,.27,1.35) both;
}
.trofeo-temporada-cinta {
  position:absolute; z-index:3; bottom:5px; left:50%; transform:translateX(-50%);
  min-width:132px; padding:6px 10px; border-radius:8px; color:#563b00; background:linear-gradient(#fff2a6,#e6b82f);
  border:2px solid rgba(94,64,0,.45); font-size:10px; font-weight:950; text-transform:uppercase; letter-spacing:.45px;
  box-shadow:0 4px 8px rgba(0,0,0,.25);
}
@keyframes trofeoEntrada { 0%{opacity:0;transform:translateY(-35px) scale(.35) rotate(-18deg)} 68%{opacity:1;transform:translateY(4px) scale(1.12) rotate(3deg)} 100%{transform:translateY(0) scale(1) rotate(0)} }
@keyframes trofeoHalo { 0%,100%{transform:scale(.92);opacity:.55} 50%{transform:scale(1.12);opacity:1} }

/* Microanimaciones de cuidado de mascotas: no bloquean la pantalla. */
.mascota-micro {
  position:fixed; left:50%; top:48%; z-index:12100; transform:translate(-50%,-50%);
  pointer-events:none; display:flex; flex-direction:column; align-items:center; filter:drop-shadow(0 10px 18px rgba(0,0,0,.28));
  animation:mascotaMicroEntrada 1.45s ease-out forwards;
}
.mascota-micro img { width:118px; height:118px; object-fit:contain; animation:mascotaMicroSalto .75s ease-in-out 2; }
.mascota-micro-efecto { font-size:34px; margin-top:-20px; animation:mascotaMicroEfecto 1.25s ease-out forwards; }
.mascota-micro-txt { margin-top:3px; background:rgba(20,29,48,.9); color:#fff; border-radius:999px; padding:7px 12px; font-size:12px; font-weight:900; }
@keyframes mascotaMicroEntrada { 0%{opacity:0;transform:translate(-50%,-42%) scale(.75)} 15%,78%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-62%) scale(.92)} }
@keyframes mascotaMicroSalto { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-15px) rotate(3deg)} }
@keyframes mascotaMicroEfecto { 0%{opacity:0;transform:scale(.4) translateY(12px)} 25%{opacity:1;transform:scale(1.1) translateY(0)} 100%{opacity:0;transform:scale(1.25) translateY(-28px)} }
@media (prefers-reduced-motion:reduce) {
  .cofre-semanal-visual.cerrado .cofre-semanal-emoji,.cofre-semanal-visual.abierto .cofre-semanal-emoji,
  .sistema-emblema.nuevo,.dominio-sello,.trofeo-temporada-halo,.trofeo-temporada-ico,
  .mascota-micro,.mascota-micro img,.mascota-micro-efecto,.ranking-item:hover .rank-mascota-mini img {
    animation-duration:.01ms!important; animation-iteration-count:1!important;
  }
}
@media (max-width:420px) {
  .ranking-item { gap:8px; padding:11px 10px; }
  .rank-pos { width:27px; }
  .rank-avatar,.rank-mascota-mini { width:38px; height:38px; }
  .mi-posicion-card { gap:8px; padding:12px 11px; }
}

/* ══ ESTADÍSTICAS / RANGO PERFIL ══ */
.est-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.est-item { background:var(--gris-l); border-radius:11px; padding:10px 12px; }
.est-v { font-size:16px; font-weight:900; }
.est-l { font-size:10px; color:var(--texto-s); font-weight:800; text-transform:uppercase; letter-spacing:.4px; margin-top:2px; }

/* ── FASE 1: Mi progreso de aprendizaje ── */
.aprendizaje-card { background:#fff; border-radius:20px; padding:20px; margin-bottom:16px; box-shadow:0 2px 12px rgba(0,0,0,.06); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.aprendizaje-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.aprendizaje-hdr-tit { font-size:14px; font-weight:900; }
.aprendizaje-chevron { font-size:15px; color:var(--gris); transition:transform .25s ease; }
.aprendizaje-card.abierta .aprendizaje-chevron { transform:rotate(180deg); }
.aprendizaje-top { display:flex; flex-direction:column; align-items:center; gap:12px; }
.aprendizaje-circulo { position:relative; width:130px; height:130px; }
.aprendizaje-circulo svg { transform:rotate(-90deg); }
.aprendizaje-circulo-txt { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.aprendizaje-porcentaje { font-size:34px; font-weight:900; line-height:1; }
.aprendizaje-frase { font-size:12px; font-weight:800; color:var(--texto-s); margin-top:3px; text-align:center; }
.aprendizaje-barra { width:100%; background:var(--gris-l); border-radius:99px; height:10px; overflow:hidden; margin-top:2px; }
.aprendizaje-fill { height:100%; border-radius:99px; transition:width .5s ease; }
.aprendizaje-resumen-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:16px; }
.aprendizaje-mini-card { background:var(--gris-l); border-radius:12px; padding:11px 8px; text-align:center; }
.aprendizaje-mini-val { font-size:17px; font-weight:900; }
.aprendizaje-mini-lbl { font-size:9.5px; color:var(--texto-s); font-weight:800; text-transform:uppercase; letter-spacing:.3px; margin-top:3px; }
.aprendizaje-detalle { margin-top:16px; padding-top:16px; border-top:2px solid var(--gris-l); display:none; text-align:left; }
.aprendizaje-card.abierta .aprendizaje-detalle { display:block; }
.aprendizaje-det-row { display:flex; align-items:center; justify-content:space-between; padding:7px 0; font-size:13px; }
.aprendizaje-det-row + .aprendizaje-det-row { border-top:1px solid #f0f0f0; }
.aprendizaje-det-lbl { color:var(--texto-s); font-weight:700; }
.aprendizaje-det-val { font-weight:900; }
.aprendizaje-det-nota { font-size:11px; color:var(--texto-s); font-weight:700; margin-top:10px; background:#fff8e1; border-radius:10px; padding:9px 11px; }

/* ── FASE 1: Más opciones (acordeón) ── */
.mas-opciones-card { background:#fff; border-radius:16px; margin-bottom:16px; box-shadow:0 2px 12px rgba(0,0,0,.06); overflow:hidden; }
.mas-opciones-hdr { display:flex; align-items:center; justify-content:space-between; padding:15px 18px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.mas-opciones-hdr-tit { font-size:13px; font-weight:900; }
.mas-opciones-chevron { font-size:15px; color:var(--gris); transition:transform .25s ease; }
.mas-opciones-card.abierta .mas-opciones-chevron { transform:rotate(180deg); }
.mas-opciones-body { display:none; padding:0 14px 8px; }
.muted-seccion { font-size:11px; color:var(--texto-s); font-weight:700; margin:2px 2px 12px; }
.mas-opciones-card.abierta .mas-opciones-body { display:block; }

/* ── FASE 2: Qué estudiar hoy ── */
.reco-hoy-card { background:#fff; border-radius:16px; padding:16px 18px; margin-bottom:16px; box-shadow:0 2px 12px rgba(0,0,0,.06); text-align:left; border-left:5px solid #1cb0f6; }
.reco-hoy-card.prioridad-alta { border-left-color:#ff9600; }
.reco-hoy-card.prioridad-avance { border-left-color:#58cc02; }
.reco-hoy-top { font-size:12px; font-weight:900; color:var(--texto-s); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.reco-hoy-materia { font-size:18px; font-weight:900; margin-bottom:4px; }
.reco-hoy-leccion { font-size:12px; font-weight:800; color:#1cb0f6; margin-bottom:6px; }
.reco-hoy-motivo { font-size:12.5px; font-weight:700; color:var(--texto-s); line-height:1.45; margin-bottom:12px; }
.reco-hoy-btn { width:100%; padding:12px; border:none; border-radius:12px; background:#1cb0f6; color:#fff; font-weight:900; font-size:13.5px; cursor:pointer; }
.reco-hoy-card.prioridad-alta .reco-hoy-btn { background:#ff9600; }
.reco-hoy-card.prioridad-avance .reco-hoy-btn { background:#58cc02; }

/* ── FASE 3: Mis materias ── */
.materias-card { background:#fff; border-radius:16px; padding:16px 14px; margin-bottom:16px; box-shadow:0 2px 12px rgba(0,0,0,.06); text-align:left; }
.materias-card-tit { font-size:13px; font-weight:900; margin-bottom:10px; }
.materia-row { padding:9px 6px; border-radius:12px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.materia-row:hover { background:var(--gris-l); }
.materia-row + .materia-row { border-top:1px solid #f2f2f2; }
.materia-row-top { display:flex; align-items:center; gap:10px; }
.materia-icono { font-size:20px; flex-shrink:0; width:26px; text-align:center; }
.materia-info { flex:1; min-width:0; }
.materia-nombre { font-size:12.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.materia-barra { background:var(--gris-l); border-radius:99px; height:7px; overflow:hidden; margin-top:5px; }
.materia-fill { height:100%; border-radius:99px; }
.materia-pct { font-size:12.5px; font-weight:900; flex-shrink:0; width:38px; text-align:right; }
.materia-estado { font-size:9.5px; font-weight:900; flex-shrink:0; border-radius:99px; padding:3px 8px; white-space:nowrap; }
.materia-estado.alta { background:#fff3e0; color:#e65100; }
.materia-estado.reforzar { background:#fff8e1; color:#b26a00; }
.materia-estado.bien { background:#e3f2fd; color:#0a6ebd; }
.materia-estado.fuerte { background:#e8f5e9; color:#2e7d32; }
.materia-estado.sindatos { background:var(--gris-l); color:var(--texto-s); }
.materia-detalle { display:none; padding:8px 6px 4px 42px; }
.materia-row.abierta .materia-detalle { display:block; }
.materia-det-row { display:flex; justify-content:space-between; font-size:11.5px; padding:3px 0; }
.materia-det-lbl { color:var(--texto-s); font-weight:700; }
.materia-det-val { font-weight:900; }
.materia-det-reco { font-size:11px; font-weight:800; color:#1cb0f6; margin-top:7px; }

/* ── FASE 3: Cuaderno mejorado ── */
.cuaderno-error-ubicacion { font-size:10.5px; font-weight:800; color:#0a6ebd; background:#f0f8ff; border-radius:8px; padding:6px 9px; margin-top:8px; }

/* ── FASE 3.1: lección recomendada resaltada en el mapa ── */
@keyframes pulso-reco { 0%,100% { box-shadow:0 0 0 0 rgba(28,176,246,.55); } 50% { box-shadow:0 0 0 12px rgba(28,176,246,0); } }
.niv-item.niv-recomendada .niv-btn { animation:pulso-reco 1.6s ease-out infinite; outline:3px solid #1cb0f6; outline-offset:2px; }
.niv-reco-badge { font-size:9px; font-weight:900; background:#1cb0f6; color:#fff; border-radius:99px; padding:2px 8px; margin-top:4px; display:inline-block; }

/* ── DASHBOARD DEL ALUMNO ── */
.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.dashboard-card { background:#fff; border-radius:18px; padding:15px 14px; box-shadow:0 2px 12px rgba(0,0,0,.06); cursor:pointer; -webkit-tap-highlight-color:transparent; position:relative; overflow:hidden; }
.dashboard-card.ancha { grid-column:1 / -1; }
.dashboard-card::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--dc-color,#1cb0f6); border-radius:18px 18px 0 0; }
.dashboard-card-header { display:flex; align-items:center; gap:7px; margin-bottom:9px; }
.dashboard-card-ico { font-size:16px; }
.dashboard-card-tit { font-size:11px; font-weight:900; color:var(--texto-s); text-transform:uppercase; letter-spacing:.4px; flex:1; }
.dashboard-card-chev { font-size:11px; color:var(--gris); transition:transform .25s; }
.dashboard-card.abierta .dashboard-card-chev { transform:rotate(180deg); }
.dashboard-card-value { font-size:23px; font-weight:900; line-height:1.1; }
.dashboard-card-subvalue { font-size:11px; font-weight:800; color:var(--texto-s); margin-top:4px; line-height:1.5; }
.dashboard-card-chart { margin-top:8px; }
.dashboard-card-detail { display:none; margin-top:11px; padding-top:11px; border-top:1.5px solid var(--gris-l); }
.dashboard-card.abierta .dashboard-card-detail { display:block; }
.dash-det-row { display:flex; justify-content:space-between; font-size:11.5px; padding:3.5px 0; }
.dash-det-lbl { color:var(--texto-s); font-weight:700; }
.dash-det-val { font-weight:900; }
.dashboard-heatmap { display:flex; gap:5px; margin-top:9px; }
.dash-dia { flex:1; text-align:center; }
.dash-dia-dot { width:100%; aspect-ratio:1; max-width:26px; margin:0 auto; border-radius:8px; background:var(--gris-l); }
.dash-dia-dot.on { background:var(--dc-color,#58cc02); }
.dash-dia-lbl { font-size:8.5px; font-weight:800; color:var(--texto-s); margin-top:3px; }
.dashboard-sparkline { display:block; width:100%; height:34px; }
.dash-dona-wrap { display:flex; align-items:center; gap:12px; }
.dash-dona { position:relative; width:62px; height:62px; flex-shrink:0; }
.dash-dona svg { transform:rotate(-90deg); }
.dash-dona-txt { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; }
.dash-tendencia { font-size:10.5px; font-weight:900; border-radius:99px; padding:2px 8px; display:inline-block; margin-top:5px; }
.dash-tendencia.sube { background:#e8f5e9; color:#2e7d32; }
.dash-tendencia.neutro { background:var(--gris-l); color:var(--texto-s); }
.rango-bar-wrap { background:var(--gris-l); border-radius:99px; height:12px; overflow:hidden; margin:8px 0 6px; }
.rango-bar-fill { height:100%; background:linear-gradient(90deg,var(--azul),#7c4dff); border-radius:99px; transition:width .6s ease; }

/* ══ DUELO LIGA — RULETA Y PARTIDA ══ */
.ruleta-overlay { position:fixed; inset:0; background:rgba(15,20,40,.94); z-index:9500; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; }
.ruleta-disco {
  width:210px; height:210px; border-radius:50%;
  background:conic-gradient(#ff4b4b 0 60deg,#1cb0f6 60deg 120deg,#58cc02 120deg 180deg,#ff9600 180deg 240deg,#9b59b6 240deg 300deg,#ffd700 300deg 360deg);
  border:8px solid #fff; box-shadow:0 0 40px rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
}
.ruleta-disco.girando { animation:girarRuleta 2.4s cubic-bezier(.17,.67,.24,.99) forwards; }
@keyframes girarRuleta { from { transform:rotate(0deg); } to { transform:rotate(1470deg); } }
.ruleta-centro { width:64px; height:64px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:30px; box-shadow:0 0 14px rgba(0,0,0,.3); }
.ruleta-flecha { font-size:34px; color:#fff; margin-bottom:-16px; z-index:2; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.duelo-timer-wrap { background:rgba(0,0,0,.08); border-radius:99px; height:10px; overflow:hidden; margin:10px 0; }
.duelo-timer-fill { height:100%; background:linear-gradient(90deg,var(--verde),#8bc34a); border-radius:99px; transition:width .1s linear; }
.duelo-timer-fill.urgente { background:linear-gradient(90deg,var(--rojo),#ff7043); }
.duelo-op { width:100%; padding:14px 16px; margin-bottom:9px; border:2px solid var(--borde); border-radius:13px; background:#fff; font-size:14px; font-weight:700; text-align:left; cursor:pointer; transition:all .12s; }
.duelo-op:active { transform:scale(.98); }
.duelo-op.ok  { background:var(--verde-l); border-color:var(--verde); color:var(--verde-d); }
.duelo-op.mal { background:#ffebee; border-color:var(--rojo); color:#c62828; }
.duelo-materia-chip { display:inline-flex; align-items:center; gap:5px; background:var(--gris-l); border-radius:99px; padding:4px 11px; font-size:11px; font-weight:800; color:var(--texto-s); }
.duelo-card { background:#fff; border:2px solid var(--borde); border-radius:14px; padding:12px 14px; margin-bottom:9px; }
.duelo-card.ganado   { border-left:5px solid var(--verde); }
.duelo-card.perdido  { border-left:5px solid var(--rojo); }
.duelo-card.pendiente{ border-left:5px solid var(--naranja); }
.duelo-vs { display:flex; align-items:center; justify-content:space-around; gap:10px; background:linear-gradient(135deg,#1a1a2e,#0f3460); border-radius:16px; padding:18px 14px; color:#fff; margin-bottom:14px; }
.duelo-vs .lado { text-align:center; flex:1; min-width:0; }
.duelo-vs .nom { font-size:12px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.duelo-vs .pts { font-size:26px; font-weight:900; margin-top:3px; }
.codigo-duelo { font-size:34px; font-weight:900; letter-spacing:8px; text-align:center; background:var(--gris-l); border-radius:14px; padding:16px; margin:12px 0; color:var(--azul); user-select:all; }

/* ══ MAPA FASE 2 — zonas, resumen, cofres ══ */
.mapa-resumen {
  background:#fff; border:2px solid var(--azul); border-left:5px solid var(--azul);
  border-radius:13px; padding:11px 14px; margin-bottom:22px;
  font-size:12.5px; font-weight:800; color:var(--texto); line-height:1.45;
  box-shadow:0 3px 10px rgba(28,176,246,.12);
}
.mapa-resumen.conquistada { border-color:#ffd700; border-left-color:#ffd700; box-shadow:0 3px 10px rgba(255,215,0,.2); }
.zona-badge { font-size:9px; font-weight:900; padding:2px 8px; border-radius:99px; margin-left:6px; vertical-align:middle; white-space:nowrap; }
.zona-badge.conq   { background:#fff8e1; color:#c99700; border:1px solid #ffd700; }
.zona-badge.actual { background:#e3f2fd; color:var(--azul); border:1px solid var(--azul); animation:parpadeoSuave 1.8s ease-in-out infinite; }
@keyframes parpadeoSuave { 0%,100%{opacity:1;} 50%{opacity:.55;} }
.cofre-reto { line-height:1; margin-top:3px; transition:all .5s; }
.cofre-reto.abierto { animation:cofreBrillo 2.2s ease-in-out infinite; }
@keyframes cofreBrillo { 0%,100%{transform:scale(1);filter:drop-shadow(0 0 3px rgba(255,215,0,.5));} 50%{transform:scale(1.12);filter:drop-shadow(0 0 10px rgba(255,215,0,.9));} }

/* ══ CELEBRACIÓN LECCIÓN PERFECTA ══ */
.perf-overlay {
  position:fixed; inset:0; z-index:9600;
  background:radial-gradient(circle at 50% 38%, #ffe98a 0%, #ffc93c 45%, #e8a400 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; text-align:center; animation:perfFadeIn .35s ease;
}
@keyframes perfFadeIn { from { opacity:0; } to { opacity:1; } }
.perf-medalla { font-size:96px; line-height:1; animation:perfPop .6s cubic-bezier(.2,1.6,.4,1) both; filter:drop-shadow(0 6px 14px rgba(120,80,0,.4)); }
@keyframes perfPop { 0% { transform:scale(0) rotate(-20deg); } 70% { transform:scale(1.15) rotate(4deg); } 100% { transform:scale(1) rotate(0); } }
.perf-tit { font-size:26px; font-weight:900; color:#5d3a00; margin-top:14px; text-shadow:0 2px 0 rgba(255,255,255,.4); animation:perfSubir .5s .15s ease both; }
.perf-sub { font-size:14px; font-weight:800; color:#7a5200; margin-top:8px; line-height:1.5; max-width:300px; animation:perfSubir .5s .28s ease both; }
@keyframes perfSubir { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
.perf-btn {
  margin-top:26px; padding:14px 34px; border:none; border-radius:14px;
  background:#fff; color:#c98b00; font-size:15px; font-weight:900; cursor:pointer;
  box-shadow:0 5px 0 rgba(120,80,0,.3); animation:perfSubir .5s .4s ease both;
}
.perf-btn:active { transform:translateY(2px); box-shadow:0 3px 0 rgba(120,80,0,.3); }
.perf-chispa { position:absolute; font-size:22px; pointer-events:none; animation:chispaFlota 2.6s ease-in-out infinite; opacity:.85; }
@keyframes chispaFlota { 0%,100% { transform:translateY(0) scale(1); opacity:.85; } 50% { transform:translateY(-16px) scale(1.2); opacity:1; } }
.btn-perf-retry {
  display:inline-block; margin-top:8px; padding:9px 16px; border:none; border-radius:10px;
  background:linear-gradient(135deg,#ffd700,#ffb300); color:#5d3a00;
  font-size:12px; font-weight:900; cursor:pointer; box-shadow:0 3px 0 #cc9900;
}
.btn-perf-retry:active { transform:translateY(1px); box-shadow:0 2px 0 #cc9900; }

/* ══ MODAL REPORTAR PREGUNTA ══ */
.rep-modal-overlay { position:fixed; inset:0; background:rgba(15,20,40,.6); z-index:9700; display:flex; align-items:center; justify-content:center; padding:20px; animation:perfFadeIn .2s ease; }
.rep-modal { background:#fff; border-radius:18px; padding:20px 18px; width:100%; max-width:400px; box-shadow:0 10px 40px rgba(0,0,0,.3); }
.rep-modal-tit { font-size:16px; font-weight:900; margin-bottom:4px; }
.rep-modal-sub { font-size:12px; color:var(--texto-s); font-weight:700; line-height:1.45; margin-bottom:12px; }
.rep-modal textarea { width:100%; padding:11px 13px; border:2px solid var(--borde); border-radius:12px; font-size:13px; font-family:inherit; color:var(--texto); outline:none; resize:none; box-sizing:border-box; min-height:90px; }
.rep-modal textarea:focus { border-color:var(--naranja); }
.rep-modal-btns { display:flex; gap:8px; margin-top:12px; }
.rep-btn { flex:1; padding:12px; border:none; border-radius:12px; font-size:13px; font-weight:800; cursor:pointer; }
.rep-btn.cancelar { background:var(--gris-l); color:var(--texto-s); }
.rep-btn.enviar { background:linear-gradient(135deg,#ff9600,#e65100); color:#fff; box-shadow:0 3px 0 #b34700; }
.rep-btn.enviar:active { transform:translateY(1px); box-shadow:0 2px 0 #b34700; }

/* ══ Fase adictiva: confeti, temblor y combo ══ */
@keyframes confetiCae {
  0%   { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: .15; }
}
.confeti-global {
  position: fixed; top: 0; width: 9px; height: 14px; z-index: 9999;
  pointer-events: none; border-radius: 2px;
  animation: confetiCae linear forwards;
}
@keyframes popIn {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes temblorPantalla {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
.tiembla { animation: temblorPantalla .35s ease; }
#combo-chip {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%) scale(0);
  background: linear-gradient(135deg,#ff9600,#ff5722); color:#fff;
  font-weight:900; font-size:14px; padding:7px 16px; border-radius:20px;
  box-shadow:0 4px 14px rgba(255,120,0,.45); z-index:9998; pointer-events:none;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
#combo-chip.visible { transform: translateX(-50%) scale(1); }


/* ══ PLAN DIARIO PERSONALIZADO + MEMORIA + REPORTES ══ */
.plan-dia-card {
  position:relative; overflow:hidden; margin-bottom:16px; padding:17px 16px;
  border:2px solid #8bd2f2; border-left:6px solid var(--azul); border-radius:18px;
  background:linear-gradient(145deg,#eefaff 0%,#fff 68%); box-shadow:0 5px 18px rgba(28,176,246,.13);
}
.plan-dia-card::after { content:'🎯'; position:absolute; right:-8px; top:-18px; font-size:78px; opacity:.055; pointer-events:none; }
.plan-dia-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; position:relative; z-index:1; }
.plan-dia-kicker { font-size:10px; font-weight:950; color:#087ca9; text-transform:uppercase; letter-spacing:.65px; }
.plan-dia-titulo { font-size:18px; font-weight:950; margin-top:3px; color:#17324d; }
.plan-dia-meta { flex-shrink:0; padding:5px 9px; border-radius:999px; background:#dff5ff; color:#087ca9; font-size:10.5px; font-weight:900; }
.plan-dia-personal { margin-top:7px; font-size:11px; line-height:1.4; color:#496579; font-weight:750; position:relative; z-index:1; }
.plan-dia-progreso { height:8px; background:#dceef6; border-radius:99px; overflow:hidden; margin:12px 0 10px; }
.plan-dia-progreso-fill { height:100%; border-radius:inherit; background:linear-gradient(90deg,#1cb0f6,#58cc02); transition:width .35s ease; }
.plan-dia-tareas { display:flex; flex-direction:column; gap:7px; position:relative; z-index:1; }
.plan-dia-tarea { display:flex; align-items:flex-start; gap:9px; padding:9px 10px; border-radius:12px; background:rgba(255,255,255,.86); border:1px solid #dbeaf1; }
.plan-dia-tarea.hecha { background:#effbe8; border-color:#b9e6a1; }
.plan-dia-check { width:23px; height:23px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:#e6f5fc; color:#087ca9; font-size:11px; font-weight:950; }
.plan-dia-tarea.hecha .plan-dia-check { background:#58cc02; color:#fff; }
.plan-dia-tarea-info { min-width:0; flex:1; }
.plan-dia-tarea-tit { font-size:12.5px; font-weight:900; line-height:1.25; color:#243b4c; }
.plan-dia-tarea-sub { font-size:10.5px; color:#6d8190; font-weight:700; line-height:1.35; margin-top:2px; }
.plan-dia-btn { width:100%; margin-top:11px; padding:12px; border:none; border-bottom:4px solid #0789c1; border-radius:13px; background:#1cb0f6; color:#fff; font-size:13.5px; font-weight:950; cursor:pointer; position:relative; z-index:1; }
.plan-dia-btn.completo { background:#58cc02; border-bottom-color:#45a800; }
.plan-dia-btn:active { transform:translateY(2px); border-bottom-width:2px; }
.plan-dia-card.compacto { padding:14px; margin-bottom:14px; }
.plan-dia-card.compacto .plan-dia-titulo { font-size:16px; }
.plan-dia-card.compacto .plan-dia-tarea { padding:7px 8px; }


/* ══ INICIO COMPACTO: PLAN + MASCOTA DESPLEGABLES ══ */
.inicio-acordeon {
  margin:0 0 10px; border:2px solid var(--borde); border-radius:16px; background:#fff;
  box-shadow:0 2px 9px rgba(0,0,0,.055); overflow:hidden;
}
.inicio-acordeon.plan { border-color:#a9dff6; background:linear-gradient(145deg,#f2fbff,#fff); }
.inicio-acordeon.mascota { border-color:#d9c8ff; background:linear-gradient(145deg,#faf7ff,#fff); }
.inicio-acordeon-cab {
  width:100%; display:flex; align-items:center; gap:10px; padding:11px 12px; cursor:pointer;
  user-select:none; min-height:66px; position:relative;
}
.inicio-acordeon-cab:active { background:rgba(28,176,246,.05); }
.inicio-acordeon-ico { width:42px; height:42px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:28px; }
.inicio-acordeon-ico img { width:42px; height:42px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.12)); }
.inicio-acordeon-info { flex:1; min-width:0; }
.inicio-acordeon-tit { font-size:13.5px; font-weight:950; color:var(--texto); line-height:1.2; }
.inicio-acordeon-sub { margin-top:3px; font-size:10.5px; line-height:1.35; color:var(--texto-s); font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inicio-acordeon-meta { display:flex; gap:6px; flex-wrap:wrap; margin-top:5px; }
.inicio-acordeon-chip { padding:3px 7px; border-radius:999px; background:var(--gris-l); font-size:9px; font-weight:900; color:var(--texto-s); }
.inicio-acordeon.plan .inicio-acordeon-chip { background:#dff5ff; color:#087ca9; }
.inicio-acordeon-flecha {
  width:30px; height:30px; flex-shrink:0; border:none; border-radius:9px; background:rgba(0,0,0,.045);
  color:var(--texto-s); font-size:17px; font-weight:900; cursor:pointer; transition:transform .22s ease, background .2s;
}
.inicio-acordeon.abierto .inicio-acordeon-flecha { transform:rotate(180deg); }
.inicio-acordeon-detalle { display:none; padding:0 12px 12px; animation:inicioDetalle .2s ease both; }
.inicio-acordeon.abierto .inicio-acordeon-detalle { display:block; }
@keyframes inicioDetalle { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:translateY(0)} }
.inicio-acordeon .plan-dia-personal { margin-top:0; }
.inicio-acordeon .plan-dia-progreso { margin:9px 0; }
.inicio-acordeon .plan-dia-btn { margin-top:9px; padding:10px; }
.inicio-acordeon .mascota-asistente-msg { margin:0 0 7px; font-size:11px; }
.inicio-acordeon .mascota-asistente-stats { margin-top:6px; }
.inicio-acordeon .mascota-asistente-acciones { margin-top:9px; }
.inicio-acordeon-hablar { width:100%; margin-top:8px; border:1px solid #d9c8ff; background:#f5f0ff; color:#6d3ec1; border-radius:10px; padding:8px; font-size:10px; font-weight:900; cursor:pointer; }
.inicio-acordeon.plan .inicio-acordeon-chip.alerta { background:#fff0f0; color:#bd2738; border:1px solid #ffc4cb; }
.mascota-mision-resumen { margin-top:9px; padding:9px 10px; border:1px solid #e1d6ff; border-radius:11px; background:linear-gradient(135deg,#fff,#f7f2ff); }
.mascota-mision-top { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:10px; font-weight:950; color:#56329a; }
.mascota-mision-txt { margin-top:4px; font-size:10px; line-height:1.35; font-weight:800; color:var(--texto); }
.mascota-mision-bar { height:6px; margin-top:7px; border-radius:999px; overflow:hidden; background:#e9e2f7; }
.mascota-mision-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,#8b5cf6,#c084fc); transition:width .35s ease; }
.mascota-mision-premio { margin-top:5px; font-size:9px; font-weight:900; color:#6d4ab5; }
.mision-mascota-overlay { position:fixed; inset:0; z-index:2400; background:rgba(18,24,38,.58); display:flex; align-items:center; justify-content:center; padding:18px; }
.mision-mascota-card { width:min(360px,94vw); background:#fff; border-radius:22px; padding:20px; box-shadow:0 18px 55px rgba(0,0,0,.25); position:relative; animation:inicioDetalle .22s ease both; }
.mision-mascota-cerrar { position:absolute; top:10px; right:10px; width:32px; height:32px; border:none; border-radius:10px; background:var(--gris-l); color:var(--texto-s); font-weight:900; cursor:pointer; }
.mision-mascota-ico { width:74px; height:74px; margin:0 auto 7px; display:flex; align-items:center; justify-content:center; border-radius:22px; background:linear-gradient(145deg,#f4edff,#fff); font-size:38px; }
.mision-mascota-tit { text-align:center; font-size:18px; font-weight:950; color:var(--texto); }
.mision-mascota-sub { margin-top:4px; text-align:center; font-size:11px; line-height:1.4; color:var(--texto-s); font-weight:750; }
.mision-mascota-progreso { margin-top:15px; padding:12px; border-radius:14px; background:#f7f3ff; border:1px solid #e5d9ff; }
.mision-mascota-progreso-top { display:flex; justify-content:space-between; gap:8px; font-size:11px; font-weight:950; color:#56329a; }
.mision-mascota-bar { height:9px; margin-top:8px; background:#e8def8; border-radius:999px; overflow:hidden; }
.mision-mascota-fill { height:100%; background:linear-gradient(90deg,#8b5cf6,#c084fc); border-radius:999px; transition:width .35s ease; }
.mision-mascota-recompensa { margin-top:13px; border-radius:14px; padding:11px; text-align:center; background:#fff7df; border:1px solid #ffe083; font-size:11px; font-weight:950; color:#8a6500; }
.mision-mascota-btn { width:100%; margin-top:13px; border:none; border-bottom:4px solid #6f3bd1; border-radius:13px; padding:12px; background:#8b5cf6; color:#fff; font-size:12px; font-weight:950; cursor:pointer; }
.mision-mascota-btn.lista { background:#58cc02; border-bottom-color:#43a600; }
.mision-mascota-btn.hecha { background:#dfe6ec; border-bottom-color:#c1cbd3; color:#61717e; }

@media (max-width:420px) {
  .inicio-acordeon-cab { padding:10px; min-height:62px; }
  .inicio-acordeon-ico,.inicio-acordeon-ico img { width:38px; height:38px; }
  .inicio-acordeon-sub { max-width:230px; }
}

.niv-btn.memoria-inicio-olvido { opacity:.76; filter:saturate(.72) grayscale(.06); }
.niv-btn.memoria-necesita-repaso { opacity:.53; filter:saturate(.48) grayscale(.15); }
.memoria-alerta-btn {
  position:absolute; z-index:8; right:-12px; top:-9px; width:25px; height:25px; border-radius:50%;
  border:2px solid #fff; background:#ff9600; color:#fff; font-size:14px; line-height:1; font-weight:950;
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 3px 8px rgba(0,0,0,.22);
  animation:memoriaAlertaPulso 2s ease-in-out infinite;
}
.memoria-alerta-btn.repaso { background:#ff4b4b; }
.memoria-dominada-sello {
  position:absolute; z-index:8; right:-13px; top:-9px; min-width:27px; height:27px; padding:0 4px;
  border-radius:999px; border:2px solid #fff; background:linear-gradient(135deg,#ffd75e,#e5a900); color:#5e4200;
  font-size:13px; font-weight:950; display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 8px rgba(92,66,0,.25); cursor:pointer;
}
@keyframes memoriaAlertaPulso { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
.memoria-info-overlay { position:fixed; inset:0; z-index:12250; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(12,22,38,.68); backdrop-filter:blur(4px); }
.memoria-info-card { width:min(360px,100%); background:#fff; border-radius:22px; padding:23px 19px 18px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.memoria-info-ico { font-size:48px; margin-bottom:7px; }
.memoria-info-tit { font-size:19px; font-weight:950; color:#26384a; }
.memoria-info-txt { font-size:12.5px; color:#647485; line-height:1.55; font-weight:750; margin:8px 0 16px; }
.memoria-info-btns { display:flex; gap:8px; }
.memoria-info-btn { flex:1; padding:12px 9px; border:none; border-radius:13px; font-size:12.5px; font-weight:950; cursor:pointer; }
.memoria-info-btn.p { background:#1cb0f6; color:#fff; }
.memoria-info-btn.s { background:#f1f4f7; color:#596878; }

.reportes-progreso-wrap { margin-bottom:16px; }
.reportes-progreso-tit { font-size:12px; font-weight:950; color:var(--texto-s); text-transform:uppercase; letter-spacing:.55px; margin:0 2px 9px; }
.reportes-progreso-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.reporte-mini-card { position:relative; overflow:hidden; min-height:132px; border:none; border-radius:17px; padding:14px 12px; text-align:left; color:#fff; cursor:pointer; box-shadow:0 5px 16px rgba(0,0,0,.14); }
.reporte-mini-card.semanal { background:linear-gradient(145deg,#0b93d1,#1265b2); }
.reporte-mini-card.mensual { background:linear-gradient(145deg,#7d3c98,#b05ac7 62%,#e1a938); }
.reporte-mini-card::after { content:'✨'; position:absolute; right:-5px; bottom:-12px; font-size:66px; opacity:.13; }
.reporte-mini-kicker { font-size:9px; font-weight:950; letter-spacing:.65px; text-transform:uppercase; opacity:.76; }
.reporte-mini-ico { font-size:25px; margin:5px 0 3px; }
.reporte-mini-tit { font-size:14px; line-height:1.18; font-weight:950; max-width:95%; }
.reporte-mini-sub { font-size:10px; line-height:1.35; font-weight:750; opacity:.82; margin-top:5px; }
.reporte-mini-card.preparando { background:linear-gradient(145deg,#e7edf2,#f7f9fb); color:#657686; border:2px dashed #c5d1da; box-shadow:none; cursor:default; }
.reporte-mini-card.preparando::after { opacity:.05; }
.reporte-progreso-overlay { position:fixed; inset:0; z-index:12300; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(9,15,31,.82); backdrop-filter:blur(5px); overflow-y:auto; }
.reporte-progreso-card { position:relative; overflow:hidden; width:min(430px,100%); max-height:92vh; overflow-y:auto; border-radius:26px; padding:26px 18px 19px; color:#fff; box-shadow:0 25px 80px rgba(0,0,0,.5); }
.reporte-progreso-card.semanal { background:radial-gradient(circle at 50% 0,rgba(117,229,255,.36),transparent 31%),linear-gradient(155deg,#073b67,#0c7eb8 58%,#0d4f83); }
.reporte-progreso-card.mensual { background:radial-gradient(circle at 50% 0,rgba(255,226,113,.33),transparent 32%),linear-gradient(155deg,#3e1a62,#8d3ca0 58%,#72520c); }
.reporte-progreso-cerrar { position:absolute; right:13px; top:13px; width:34px; height:34px; border:none; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:18px; font-weight:900; cursor:pointer; }
.reporte-progreso-hero { text-align:center; position:relative; z-index:2; }
.reporte-progreso-ico { font-size:58px; filter:drop-shadow(0 8px 12px rgba(0,0,0,.24)); animation:reporteHeroPop .65s cubic-bezier(.2,1.35,.3,1) both; }
@keyframes reporteHeroPop { from{opacity:0;transform:scale(.45) rotate(-12deg)} to{opacity:1;transform:scale(1) rotate(0)} }
.reporte-progreso-kicker { margin-top:7px; font-size:10px; font-weight:950; letter-spacing:1px; text-transform:uppercase; opacity:.7; }
.reporte-progreso-titulo { margin-top:5px; font-size:24px; line-height:1.1; font-weight:950; }
.reporte-progreso-sub { margin:8px auto 15px; max-width:330px; font-size:12px; line-height:1.5; font-weight:750; opacity:.84; }
.reporte-progreso-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; position:relative; z-index:2; }
.reporte-progreso-stat { min-height:83px; padding:12px 9px; border-radius:15px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.17); text-align:center; }
.reporte-progreso-stat-ico { font-size:20px; }
.reporte-progreso-stat-v { font-size:22px; line-height:1.05; font-weight:950; margin-top:3px; }
.reporte-progreso-stat-l { font-size:9.5px; line-height:1.3; font-weight:800; opacity:.75; margin-top:4px; }
.reporte-progreso-aprendiste { margin-top:12px; padding:13px; border-radius:15px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); position:relative; z-index:2; }
.reporte-progreso-aprendiste-tit { font-size:11px; font-weight:950; text-transform:uppercase; letter-spacing:.5px; opacity:.75; }
.reporte-progreso-aprendiste-txt { font-size:12.5px; line-height:1.5; font-weight:800; margin-top:6px; }
.reporte-progreso-total { margin-top:12px; font-size:10.5px; line-height:1.5; text-align:center; font-weight:750; opacity:.78; }
.reporte-progreso-btn { width:100%; margin-top:16px; padding:13px; border:none; border-radius:14px; background:#fff; color:#18304c; font-size:13.5px; font-weight:950; cursor:pointer; position:relative; z-index:2; }
.reporte-particula { position:absolute; font-size:16px; opacity:.45; animation:reporteParticula 2.8s ease-in-out infinite; pointer-events:none; }
@keyframes reporteParticula { 0%,100%{transform:translateY(7px) scale(.7);opacity:.22} 50%{transform:translateY(-12px) scale(1.1);opacity:.65} }
@media(max-width:380px){ .reportes-progreso-grid{grid-template-columns:1fr}.reporte-mini-card{min-height:112px}.reporte-progreso-titulo{font-size:21px} }
@media(prefers-reduced-motion:reduce){ .memoria-alerta-btn,.reporte-progreso-ico,.reporte-particula{animation:none!important} }


/* ══ MI GUÍA UAQ — EXCOBA PERSONALIZADO PARA QUERÉTARO ══ */
.guia-uaq-acceso {
  width:100%; color:#fff; border:2px solid #43c6d7; border-bottom:5px solid #0b6172;
  border-radius:18px; padding:16px; margin-bottom:16px; display:none; align-items:center;
  gap:13px; cursor:pointer; text-align:left;
  background:linear-gradient(135deg,#073b4c 0%,#086b7c 52%,#11a7b7 100%);
  box-shadow:0 5px 16px rgba(7,59,76,.24);
}
.guia-uaq-acceso:active { transform:translateY(2px); border-bottom-width:3px; }
.guia-uaq-acceso .guia-uaslp-acceso-pct { color:#bffaff; }
.guia-uaq-acceso .guia-uaslp-mini-fill { background:linear-gradient(90deg,#7ff3ff,#e7fdff); }
.guia-uaq-pantalla { background:linear-gradient(180deg,#063647 0,#087384 160px,#dff6f5 161px,#eefaf8 100%); }
.guia-uaq-hdr { background:rgba(4,50,66,.98); border-bottom:2px solid rgba(165,247,255,.25); color:#fff; padding:12px 15px; display:flex; align-items:center; gap:11px; }
.guia-uaq-hdr .btn-back { color:#fff; background:rgba(255,255,255,.14); }
.guia-uaq-body { flex:1; overflow-y:auto; padding:18px 14px 80px; }
.guia-uaq-resumen { max-width:720px; margin:0 auto 14px; background:linear-gradient(145deg,#efffff,#bfeceb); border:2px solid #178596; border-radius:18px; padding:17px 16px; box-shadow:0 7px 20px rgba(5,73,86,.18); }
.guia-uaq-resumen-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.guia-uaq-resumen-tit { color:#073b4c; font-size:20px; font-weight:950; }
.guia-uaq-resumen-carrera { color:#165c68; font-size:11px; line-height:1.4; font-weight:850; margin-top:4px; }
.guia-uaq-resumen-pct { color:#086b7c; font-size:25px; font-weight:950; white-space:nowrap; }
.guia-uaq-barra { height:10px; background:rgba(7,91,105,.14); border-radius:999px; overflow:hidden; margin-top:12px; }
.guia-uaq-fill { height:100%; width:0; background:linear-gradient(90deg,#0b93a4,#52d6d5); border-radius:999px; transition:width .35s ease; }
.guia-uaq-resumen-datos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:12px; }
.guia-uaq-resumen-dato { background:rgba(255,255,255,.6); border:1px solid rgba(16,115,128,.18); border-radius:11px; padding:8px 7px; text-align:center; }
.guia-uaq-resumen-dato b { display:block; color:#07596a; font-size:15px; }
.guia-uaq-resumen-dato span { display:block; color:#48747b; font-size:9.5px; font-weight:850; margin-top:2px; }
.guia-uaq-especialidad { max-width:720px; margin:0 auto 14px; background:#fff; border:2px solid #8ed9df; border-radius:15px; padding:12px 13px; color:#154f59; box-shadow:0 4px 13px rgba(5,73,86,.1); }
.guia-uaq-especialidad-tit { font-size:12px; font-weight:950; text-transform:uppercase; letter-spacing:.45px; color:#087789; }
.guia-uaq-especialidad-txt { font-size:12px; line-height:1.45; font-weight:800; margin-top:5px; }
.guia-uaq-parte { max-width:720px; margin:17px auto 9px; border-radius:15px; padding:13px 14px; color:#fff; box-shadow:0 5px 14px rgba(5,73,86,.16); }
.guia-uaq-parte.comun { background:linear-gradient(135deg,#126e82,#0b91a1); }
.guia-uaq-parte.especifica { background:linear-gradient(135deg,#5c3f91,#845ec2); }
.guia-uaq-parte-tit { font-size:16px; font-weight:950; }
.guia-uaq-parte-sub { font-size:10.5px; line-height:1.4; font-weight:750; opacity:.82; margin-top:3px; }
.guia-uaq-materia { max-width:720px; border-color:#5eb8c3; background:#f4ffff; color:#173f47; }
.guia-uaq-materia.especifica { border-color:#8e78bd; background:#faf7ff; }
.guia-uaq-materia .guia-uaslp-bloque-tit { color:#124c57; }
.guia-uaq-materia.especifica .guia-uaslp-bloque-tit { color:#493475; }
.guia-uaq-materia .guia-uaslp-bloque-body { border-top-color:rgba(8,105,119,.2); }
.guia-uaq-tema.necesita-repaso { border:1px solid #e9a13a; background:#fff4df; border-radius:10px; margin:3px 0; }
.guia-uaq-tema.inicio-olvido { background:#fffaf0; }
.guia-uaq-tema.sin-vinculo { opacity:.72; background:#f3f5f5; border-radius:9px; margin:2px 0; }
.guia-uaq-tema.sin-vinculo .guia-uaslp-marca { border-style:dashed; color:#829296; }
.guia-uaq-estado { display:inline-flex; width:max-content; max-width:100%; margin-top:4px; border-radius:999px; padding:3px 7px; font-size:9.5px; line-height:1.2; font-weight:950; }
.guia-uaq-estado.repaso { color:#9a5a00; background:#ffe6b9; border:1px solid #edb458; }
.guia-uaq-estado.olvido { color:#8b6b22; background:#fff4cd; border:1px solid #e8cf83; }
.guia-uaq-estado.dominado { color:#436b1d; background:#e9f4ca; border:1px solid #a4ca6c; }
.guia-uaq-estado.sin-vinculo { color:#67777a; background:#e8eded; border:1px solid #c7d0d1; }
.guia-uaq-codigo { display:inline-block; margin-right:5px; color:#87979a; font-size:9px; font-weight:900; }
.guia-uaq-cobertura { max-width:720px; margin:10px auto 0; padding:10px 12px; background:rgba(255,255,255,.72); border:1px solid rgba(20,123,137,.22); border-radius:12px; color:#3e6b71; font-size:10.5px; line-height:1.45; font-weight:750; }
.guia-uaq-vacia { max-width:720px; margin:14px auto; background:#fff; border:2px solid #acdfe3; border-radius:16px; padding:23px 17px; text-align:center; color:#476a70; font-size:12px; font-weight:800; line-height:1.5; }
@media (max-width:430px) {
  .guia-uaq-resumen-datos { grid-template-columns:1fr 1fr; }
  .guia-uaq-resumen-dato:last-child { grid-column:1 / -1; }
}


/* ══════════════════════════════════════════════════════════════
   MASCOTA VIVA — diálogos contextuales y reacciones sin imágenes nuevas
   ══════════════════════════════════════════════════════════════ */
.mascota-asistente-top.hablable { cursor:pointer; border-radius:12px; padding:3px; margin:-3px; transition:background .18s, transform .18s; }
.mascota-asistente-top.hablable:hover { background:rgba(255,255,255,.58); transform:translateY(-1px); }
.mascota-asistente-img { animation:mascotaRespira 3.2s ease-in-out infinite; transform-origin:50% 85%; }
.mascota-asistente-pista { font-size:9px; color:var(--azul-d); font-weight:900; margin-top:3px; }
@keyframes mascotaRespira { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-2px) scale(1.025)} }

.mascota-reaccion-contextual {
  position:fixed; right:14px; bottom:82px; z-index:1180; width:min(360px,calc(100vw - 28px));
  pointer-events:auto; display:flex; align-items:center; gap:8px; cursor:pointer;
  animation:mascotaReaccionEntrada .28s cubic-bezier(.34,1.56,.64,1) both;
}
.mascota-reaccion-contextual.saliendo { animation:mascotaReaccionSalida .25s ease-in forwards; }
/* La imagen real de la mascota acompaña siempre al diálogo para que se entienda quién habla. */
.mascota-reaccion-personaje { position:relative; width:74px; height:74px; flex:0 0 74px; display:flex; align-items:flex-end; justify-content:center; }
.mascota-reaccion-img { display:block; width:68px; height:68px; object-fit:contain; filter:drop-shadow(0 5px 7px rgba(0,0,0,.18)); transform-origin:50% 85%; }
.mascota-reaccion-efecto { position:absolute; right:-3px; top:-9px; z-index:2; font-size:23px; animation:mascotaEfectoFlota 1.25s ease-in-out infinite; filter:drop-shadow(0 2px 2px rgba(0,0,0,.15)); }
.mascota-reaccion-particulas { position:absolute; inset:-10px; overflow:visible; }
.mascota-reaccion-particulas span { position:absolute; font-size:12px; animation:mascotaParticula 1.25s ease-out infinite; }
.mascota-reaccion-particulas span:nth-child(1){left:0;top:20px;animation-delay:.05s}
.mascota-reaccion-particulas span:nth-child(2){right:0;top:10px;animation-delay:.25s}
.mascota-reaccion-particulas span:nth-child(3){left:15px;top:-4px;animation-delay:.45s}
.mascota-reaccion-burbuja { background:#fff; border:2px solid var(--borde); border-radius:15px; padding:13px 14px; box-shadow:0 8px 24px rgba(0,0,0,.14); font-size:12.5px; line-height:1.48; font-weight:800; color:var(--texto); max-width:300px; flex:1; }
.mascota-reaccion-burbuja::after { content:'Toca para cerrar'; display:block; margin-top:6px; font-size:8.5px; color:#9aa; font-weight:800; text-align:right; }

.mascota-reaccion-contextual[data-tipo="perfecta"] .mascota-reaccion-img,
.mascota-reaccion-contextual[data-tipo="plan_completado"] .mascota-reaccion-img { animation:mascotaSaltaCelebra .75s ease-in-out 2; }
.mascota-reaccion-contextual[data-tipo="aprobada"] .mascota-reaccion-img { animation:mascotaAsiente .62s ease-in-out 2; }
.mascota-reaccion-contextual[data-tipo="no_completada"] .mascota-reaccion-img { animation:mascotaPiensa 1.5s ease-in-out infinite; }
.mascota-reaccion-contextual[data-tipo="error_repetido"] .mascota-reaccion-img { animation:mascotaAlerta .42s ease-in-out 3; }
.mascota-reaccion-contextual[data-tipo="regreso"] .mascota-reaccion-img { animation:mascotaSaluda .65s ease-in-out 2; }
.mascota-reaccion-contextual[data-tipo="hambre"] .mascota-reaccion-img { animation:mascotaTiembla .28s linear 5; }
.mascota-reaccion-contextual[data-tipo="tema_olvidando"] .mascota-reaccion-img { animation:mascotaPulso .9s ease-in-out 2; }
.mascota-reaccion-contextual[data-tipo="nivel"] .mascota-reaccion-img { animation:mascotaBrilla 1.1s ease-in-out 2; }
.mascota-reaccion-contextual[data-tipo="habito"] .mascota-reaccion-img { animation:mascotaAsiente .75s ease-in-out 2; }

.mascota-saludo-card[data-reaccion="regreso"] .mascota-saludo-img { animation:mascotaSaluda .65s ease-in-out 2; }
.mascota-saludo-card[data-reaccion="hambre"] .mascota-saludo-img { animation:mascotaTiembla .28s linear 5; }
.mascota-saludo-card[data-reaccion="tema_olvidando"] .mascota-saludo-img { animation:mascotaPulso .9s ease-in-out 2; }
.mascota-saludo-card[data-reaccion="habito"] .mascota-saludo-img { animation:mascotaAsiente .75s ease-in-out 2; }

@keyframes mascotaReaccionEntrada { from{opacity:0;transform:translateY(18px) scale(.9)} to{opacity:1;transform:none} }
@keyframes mascotaReaccionSalida { to{opacity:0;transform:translateY(12px) scale(.94)} }
@keyframes mascotaSaltaCelebra { 0%,100%{transform:translateY(0) rotate(0)} 45%{transform:translateY(-16px) rotate(-4deg)} 70%{transform:translateY(-4px) rotate(5deg)} }
@keyframes mascotaAsiente { 0%,100%{transform:rotate(0) translateY(0)} 45%{transform:rotate(4deg) translateY(3px)} }
@keyframes mascotaPiensa { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(3deg) translateY(-3px)} }
@keyframes mascotaAlerta { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px) rotate(-3deg)} 75%{transform:translateX(4px) rotate(3deg)} }
@keyframes mascotaSaluda { 0%,100%{transform:rotate(0)} 35%{transform:rotate(-8deg) translateY(-3px)} 70%{transform:rotate(7deg)} }
@keyframes mascotaTiembla { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-2px)} 75%{transform:translateX(2px)} }
@keyframes mascotaPulso { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1);filter:drop-shadow(0 0 12px rgba(255,170,0,.7))} }
@keyframes mascotaBrilla { 0%,100%{transform:scale(1);filter:drop-shadow(0 4px 7px rgba(0,0,0,.18))} 50%{transform:scale(1.12) rotate(3deg);filter:drop-shadow(0 0 16px rgba(255,205,60,.95))} }
@keyframes mascotaEfectoFlota { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-6px) scale(1.12)} }
@keyframes mascotaParticula { 0%{opacity:0;transform:translateY(10px) scale(.4)} 35%{opacity:1} 100%{opacity:0;transform:translateY(-18px) scale(1.2)} }
@media(max-width:480px){
  .mascota-reaccion-contextual{right:8px;bottom:72px;width:min(330px,calc(100vw - 16px))}
  .mascota-reaccion-burbuja{font-size:12px;max-width:275px;padding:12px}
  .mascota-reaccion-personaje{width:64px;flex-basis:64px;height:64px}
  .mascota-reaccion-img{width:58px;height:58px}
  .mascota-reaccion-efecto{font-size:20px;right:-2px;top:-7px}
}
@media(prefers-reduced-motion:reduce){
  .mascota-asistente-img,.mascota-reaccion-img,.mascota-reaccion-efecto,.mascota-reaccion-particulas span,.mascota-saludo-img{animation:none!important}
}


/* Clases grabadas: relaciones múltiples y clases generales de módulo */
.clase-video-count{position:absolute;right:-7px;top:-7px;min-width:18px;height:18px;padding:0 4px;border-radius:99px;background:#7c3aed;color:#fff;border:2px solid #fff;font-size:9px;font-weight:950;display:flex;align-items:center;justify-content:center;}
.clase-modulo-card{margin:-2px 5px 12px;padding:10px 11px;border:1.5px solid #c4b5fd;border-radius:13px;background:linear-gradient(135deg,#f5f3ff,#fff);display:flex;align-items:center;justify-content:space-between;gap:10px;box-shadow:0 2px 8px rgba(124,58,237,.08);}
.clase-modulo-card.bloqueada{opacity:.55;filter:grayscale(.25)}.clase-modulo-kicker{font-size:8.5px;font-weight:950;color:#7c3aed;letter-spacing:.45px}.clase-modulo-tit{font-size:11.5px;font-weight:900;margin-top:2px}.clase-modulo-sub{font-size:9.5px;color:var(--texto-s);font-weight:700;margin-top:2px}.clase-modulo-card button{flex-shrink:0;border:none;border-bottom:3px solid #6d28d9;border-radius:10px;padding:8px 10px;background:#8b5cf6;color:#fff;font-size:10px;font-weight:900;cursor:pointer}.clase-modulo-card button:disabled{background:#cbd5e1;border-bottom-color:#94a3b8;cursor:default}
.clases-selector-overlay{position:fixed;inset:0;z-index:13000;background:rgba(15,23,42,.62);display:flex;align-items:flex-end;justify-content:center;padding:0}.clases-selector-card{width:100%;max-width:460px;max-height:82vh;overflow:auto;background:#fff;border-radius:22px 22px 0 0;padding:20px 16px 30px;box-shadow:0 -14px 45px rgba(0,0,0,.28)}.clases-selector-tit{font-size:18px;font-weight:950}.clases-selector-sub{font-size:11px;color:var(--texto-s);font-weight:700;margin-top:3px}.clases-selector-x{width:34px;height:34px;border:none;border-radius:10px;background:var(--gris-l);font-size:21px;font-weight:900;cursor:pointer}.clases-selector-lista{display:flex;flex-direction:column;gap:8px;margin-top:15px}.clases-selector-item{width:100%;border:2px solid #ddd6fe;border-bottom-width:4px;border-radius:14px;background:#faf8ff;padding:12px;display:grid;grid-template-columns:28px 1fr 18px;align-items:center;gap:8px;text-align:left;color:var(--texto);cursor:pointer}.clases-selector-item b{display:block;font-size:13px}.clases-selector-item small{display:block;font-size:10px;color:var(--texto-s);font-weight:700;margin-top:2px}.clases-selector-item:active{transform:translateY(2px);border-bottom-width:2px}


/* === AutoQuiz CSS bloque 2 · autoquiz-examen-semanal-estilos === */
@keyframes examenSemanalBrillo{0%,100%{box-shadow:0 3px 12px rgba(124,77,255,.12)}50%{box-shadow:0 5px 24px rgba(124,77,255,.32)}}
@keyframes examenSemanalCalendario{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(3deg) scale(1.08)}}
.examen-semanal-card{background:#fff;border:2px solid #c7b7ff;border-bottom:4px solid #8b6de8;border-radius:18px;padding:18px 16px;margin-bottom:14px;position:relative;overflow:hidden}
.examen-semanal-card.disponible{animation:examenSemanalBrillo 2.8s ease-in-out infinite}
.examen-semanal-card::after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;right:-62px;top:-72px;background:rgba(124,77,255,.08);pointer-events:none}
.examen-semanal-cal{width:56px;height:56px;border-radius:15px;background:#eee8ff;display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}
.examen-semanal-card.disponible .examen-semanal-cal{animation:examenSemanalCalendario 2.2s ease-in-out infinite}
.examen-semanal-contador{background:#f5f1ff;border:1px solid #d6c9ff;border-radius:11px;padding:8px 10px;font-size:12px;font-weight:900;color:#5c42b7;text-align:center;margin-top:10px}
.examen-semanal-fuente{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:900;border-radius:999px;padding:3px 7px;background:#f2efff;color:#654cc0;margin:2px 3px 0 0}


/* ══════════════════════════════════════════════════════════════
   SEGURIDAD VISUAL — ningún aviso automático tapa controles
   ══════════════════════════════════════════════════════════════ */
#banner-offline { display:none !important; }
.toast-logro {
  top:calc(env(safe-area-inset-top, 0px) + 72px) !important;
  bottom:auto !important;
  max-width:min(88vw, 430px) !important;
  pointer-events:none !important;
}
.quiz-footer { z-index:220; padding-bottom:max(14px, env(safe-area-inset-bottom)); }
.pantalla.activa#p-quiz ~ .mascota-reaccion-contextual,
body.quiz-en-curso .mascota-reaccion-contextual { display:none !important; }
@media(max-width:480px){
  .toast-logro { top:calc(env(safe-area-inset-top, 0px) + 62px) !important; }
}


/* === AutoQuiz CSS bloque 3 · autoquiz-recomendaciones-clases-reportes-estilos === */
.reporte-clases-reco{margin-top:14px;padding:13px;border:1px solid rgba(255,255,255,.24);border-radius:16px;background:rgba(255,255,255,.11);position:relative;z-index:2;text-align:left}
.reporte-clases-reco-tit{font-size:13px;font-weight:950;color:#fff;display:flex;align-items:center;gap:7px}
.reporte-clases-reco-sub{font-size:10.5px;line-height:1.4;color:rgba(255,255,255,.76);font-weight:750;margin:4px 0 9px}
.reporte-clases-reco-lista{display:flex;flex-direction:column;gap:7px}
.reporte-clase-reco-btn{width:100%;border:1px solid rgba(255,255,255,.24);border-radius:12px;background:rgba(255,255,255,.94);color:#24364a;padding:10px 11px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;font-family:inherit}
.reporte-clase-reco-btn:active{transform:translateY(1px)}
.reporte-clase-reco-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#eee8ff;font-size:18px;flex-shrink:0}
.reporte-clase-reco-info{min-width:0;flex:1}
.reporte-clase-reco-nom{display:block;font-size:11.5px;font-weight:950;line-height:1.25;color:#2a3650}
.reporte-clase-reco-motivo{display:block;margin-top:2px;font-size:9.5px;line-height:1.35;color:#68758a;font-weight:750}
.reporte-clase-reco-abrir{font-size:15px;color:#7d3c98;font-weight:950;flex-shrink:0}
@media(max-width:420px){.reporte-clases-reco{padding:11px}.reporte-clase-reco-btn{padding:9px}.reporte-clase-reco-ico{width:31px;height:31px}.reporte-clase-reco-nom{font-size:11px}}