/* Aprende con Silvia — paneles de dentro (alumnado, familias, Silvia).
   Visual y sencillo: baldosas grandes, colores por asignatura, una acción
   clara por tarjeta. Se carga además de app.css (que sigue mandando en la
   barra, los botones, Kiwi, etc.). */

/* Color de cada asignatura: claro para el fondo, fuerte para lo que se toca */
.cv-brand{--c:#4f46e5;--c-claro:#e7e5ff;--c-osc:#3730a3}
.cv-teal{--c:#0d9488;--c-claro:#d5f5ef;--c-osc:#0f766e}
.cv-amber{--c:#d97706;--c-claro:#fff0cf;--c-osc:#b45309}
.cv-coral{--c:#ea580c;--c-claro:#ffe3d6;--c-osc:#c2410c}

/* ================= ALUMNADO ================= */
.mochila{padding-top:26px;padding-bottom:70px}
.mochila-hola{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.mochila-hola-txt{flex:1;min-width:260px}
/* Kiwi a la derecha y su bocadillo a su izquierda, en su propio hueco */
.mochila-kiwi{display:flex;align-items:center;gap:16px;flex:none}
.mochila-kiwi .kids-kiwi{width:118px;flex:none}
.mochila-kiwi .mascot-bubble{position:relative;left:auto;top:auto;bottom:auto;width:260px;max-width:40vw}
.mascot-bubble.tail-right{transform-origin:100% 50%}
.mascot-bubble.tail-right::after{left:auto;right:-10px;top:50%;bottom:auto;margin-top:-9px;border:none;
  border-right:2px solid var(--brand-100);border-top:2px solid var(--brand-100)}
.mochila-hola h1{font-size:clamp(30px,4.4vw,46px);line-height:1.05;color:var(--ink)}
.mochila-curso{margin:6px 0 0;color:var(--ink-soft);font-weight:700;font-size:16px}
.mochila-marcador{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.mochila-marcador span{background:#fff;border-radius:999px;padding:7px 14px;font-size:14px;color:var(--ink-soft);font-weight:700;box-shadow:var(--shadow-sm)}
.mochila-marcador b{color:var(--ink);font-size:16px;margin-right:4px}
.mochila-aviso{display:flex;gap:14px;align-items:flex-start;margin-top:22px;background:#fff7e6;border:2px solid #fde3a7;border-radius:20px;padding:16px 20px;font-size:16px}
.mochila-aviso > span{font-size:30px}
.mochila-aviso p{margin:4px 0 0}

/* «Sigue por aquí»: el siguiente juego, enorme */
.mochila-sigue{display:flex;align-items:center;gap:22px;margin-top:26px;padding:22px 26px;border-radius:28px;text-decoration:none;color:var(--ink);
  background:linear-gradient(120deg,var(--c-claro),#fff 70%);border:3px solid var(--c);box-shadow:0 18px 40px -24px var(--c);
  transition:transform .25s var(--ease-out),box-shadow .25s}
a.mochila-sigue:hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px var(--c)}
.sigue-emo{flex:none;width:96px;height:96px;border-radius:24px;display:grid;place-items:center;font-size:56px;background:#fff;box-shadow:var(--shadow-sm)}
.sigue-txt{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.sigue-ante{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c-osc)}
.sigue-titulo{font-family:var(--font-display);font-size:clamp(24px,3vw,32px);line-height:1.1}
.sigue-meta{color:var(--ink-soft);font-weight:700}
.sigue-btn{flex:none;background:var(--c);color:#fff;font-family:var(--font-display);font-size:22px;padding:14px 26px;border-radius:999px;box-shadow:0 6px 0 var(--c-osc)}
.mochila-h2{font-size:24px;margin:38px 0 14px}

/* Asignaturas: baldosas grandes */
.baldosas{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.baldosa{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:22px 22px 20px;border-radius:26px;
  text-decoration:none;color:var(--ink);background:var(--c-claro);border:3px solid transparent;min-height:190px;
  transition:transform .25s var(--ease-out),border-color .2s,box-shadow .25s}
.baldosa:hover,.baldosa:focus-visible{transform:translateY(-6px) rotate(-.6deg);border-color:var(--c);box-shadow:0 22px 40px -24px var(--c)}
.baldosa-arriba{display:flex;align-items:flex-start;justify-content:space-between;width:100%}
.baldosa-ic{width:68px;height:68px;border-radius:20px;background:#fff;display:grid;place-items:center;font-size:40px;box-shadow:var(--shadow-sm)}
.baldosa-nombre{font-family:var(--font-display);font-size:21px;line-height:1.15;flex:1}
.baldosa-prog{position:relative;width:56px;height:56px;flex:none}
.baldosa-prog svg{width:56px;height:56px;transform:rotate(-90deg)}
.baldosa-prog circle{fill:none;stroke-width:4;stroke-linecap:round}
.baldosa-prog .pista{stroke:rgba(255,255,255,.9)}
.baldosa-prog .valor{stroke:var(--c);transition:stroke-dasharray .6s}
.baldosa-prog span{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--c-osc)}
.baldosa-nuevo{background:var(--c);color:#fff;font-size:12.5px;font-weight:800;padding:4px 11px;border-radius:999px}

/* Una asignatura */
.mochila-volver{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:17px;color:var(--ink);text-decoration:none;
  background:#fff;padding:10px 18px;border-radius:999px;box-shadow:var(--shadow-sm)}
.mochila-volver:hover{background:var(--brand-100)}
.area-cab{position:relative;display:flex;align-items:center;gap:18px;margin-top:18px;padding:22px 24px 30px;border-radius:28px;background:var(--c-claro);overflow:hidden}
.area-ic{width:80px;height:80px;border-radius:24px;background:#fff;display:grid;place-items:center;font-size:46px;box-shadow:var(--shadow-sm);flex:none}
.area-cab h1{font-size:clamp(26px,3.6vw,38px)}
.area-cab p{margin:4px 0 0;font-weight:800;color:var(--c-osc)}
.area-barra{position:absolute;left:0;right:0;bottom:0;height:8px;background:rgba(255,255,255,.7)}
.area-barra i{display:block;height:100%;background:var(--c);border-radius:0 8px 8px 0}
.tarjetas-recurso{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;margin-top:24px}
.tr{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:#fff;text-decoration:none;color:var(--ink);
  box-shadow:var(--shadow-sm);border:3px solid transparent;transition:transform .25s var(--ease-out),border-color .2s,box-shadow .25s}
.tr:hover,.tr:focus-visible{transform:translateY(-6px);border-color:var(--c);box-shadow:0 22px 40px -24px var(--c)}
.tr-cover{position:relative;height:140px;display:grid;place-items:center;background:var(--c-claro)}
.tr-emo{font-size:64px;filter:drop-shadow(0 10px 10px rgba(28,36,51,.18))}
.tr:hover .tr-emo{animation:emoWiggle .75s var(--ease-spring)}
.tr-sello{position:absolute;top:12px;left:12px;background:var(--c);color:#fff;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px}
.tr-sello--ok{background:#16a34a}
.tr--hecho .tr-cover{background:linear-gradient(160deg,var(--c-claro),#e9fbe9)}
.tr-cuerpo{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;flex:1}
.tr-titulo{font-family:var(--font-display);font-size:19px;line-height:1.2}
.tr-meta{color:var(--ink-soft);font-size:13.5px;font-weight:700}
.tr-pie{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.tr-btn{margin-top:auto;align-self:stretch;text-align:center;background:var(--c);color:#fff;font-family:var(--font-display);font-size:18px;
  padding:10px 0;border-radius:16px;box-shadow:0 4px 0 var(--c-osc)}
.tr--hecho .tr-btn{background:#fff;color:var(--c-osc);border:2px solid var(--c);box-shadow:none}

/* ESO: el mismo esquema, más sobrio */
body[data-zone="teen"] .baldosa,body[data-zone="teen"] .tr,body[data-zone="teen"] .mochila-sigue{border-radius:18px}
body[data-zone="teen"] .baldosa:hover{transform:translateY(-4px)}

@media (max-width:640px){
  .mochila-kiwi{width:100%;justify-content:flex-end}
  .mochila-kiwi .kids-kiwi{width:78px}
  .mochila-kiwi .mascot-bubble{width:auto;max-width:calc(100vw - 140px);font-size:13px}
  .mochila-sigue{flex-wrap:wrap;padding:18px;gap:14px}
  .sigue-emo{width:72px;height:72px;font-size:42px}
  .sigue-btn{width:100%;text-align:center}
  .baldosas{grid-template-columns:1fr 1fr;gap:12px}
  .baldosa{min-height:160px;padding:16px}
  .baldosa-ic{width:54px;height:54px;font-size:32px}
  .baldosa-nombre{font-size:17px}
  .baldosa-prog,.baldosa-prog svg{width:46px;height:46px}
  .kids-top .me-nombre{display:none}
}

/* ================= COMÚN A LOS PANELES CON MENÚ ================= */
/* La columna del menú lleva su color de fondo: nunca queda un hueco claro debajo */
@media (min-width:901px){ .app-shell{background:linear-gradient(90deg,var(--night) 252px,transparent 252px)} }
.avatar.lg{width:64px;height:64px;font-size:30px}

/* ================= FAMILIAS ================= */
.fichas-hijo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));gap:20px;margin-bottom:22px}
.ficha-hijo{background:#fff;border-radius:26px;padding:22px 24px;box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.ficha-cab{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ficha-nombre{flex:1;min-width:140px}
.ficha-nombre h2{font-size:26px;line-height:1.1}
.ficha-nombre p{margin:2px 0 0;color:var(--ink-soft);font-weight:700}
.ficha-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.ficha-cifras span{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--bg);border-radius:16px;padding:12px 6px;font-size:13px;font-weight:700;color:var(--ink-soft);text-align:center}
.ficha-cifras b{font-family:var(--font-display);font-size:22px;color:var(--ink)}
.ficha-sub{font-family:var(--font-ui);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:20px 0 10px}
.anillos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px}
.anillo{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;background:var(--c-claro);border-radius:18px;padding:12px 6px 10px}
.anillo-graf{position:relative;width:58px;height:58px}
.anillo-graf svg{width:58px;height:58px;transform:rotate(-90deg)}
.anillo-graf circle{fill:none;stroke-width:4;stroke-linecap:round}
.anillo-graf .pista{stroke:rgba(255,255,255,.95)}
.anillo-graf .valor{stroke:var(--c)}
.anillo-graf span{position:absolute;inset:0;display:grid;place-items:center;font-size:24px}
.anillo-nombre{font-size:12.5px;font-weight:800;line-height:1.2;color:var(--ink)}
.anillo-n{font-size:13px;font-weight:800;color:var(--c-osc)}
.ficha-frase{margin:16px 0 0;padding:12px 14px;background:#fffaf0;border-radius:14px;color:var(--ink-soft);font-size:14.5px;line-height:1.5}
.lista-frases .ev-ic{font-size:16px}
.recursos-hijo{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px;padding:16px}
.rf{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:18px;background:var(--c-claro);text-decoration:none;color:var(--ink);
  border:2px solid transparent;transition:transform .2s var(--ease-out),border-color .2s}
.rf:hover,.rf:focus-visible{transform:translateY(-3px);border-color:var(--c)}
.rf-emo{width:52px;height:52px;flex:none;border-radius:14px;background:#fff;display:grid;place-items:center;font-size:28px}
.rf-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rf-titulo{font-weight:800;line-height:1.25}
.rf-meta{font-size:13px;color:var(--ink-soft);font-weight:700}
.rf-estado{align-self:flex-start;margin-top:4px;font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px;background:#fff;color:var(--ink-soft)}
.rf-estado--ok{background:#dcfce7;color:#15803d}
.rf-estado--medio{background:#fef3c7;color:#b45309}
@media (max-width:640px){
  .ficha-hijo{padding:18px}
  .ficha-cab form{width:100%}
  .ficha-cab form .btn{width:100%}
}

/* ================= PANEL DE SILVIA ================= */
/* Resumen: cifras en baldosas y atajos */
.cifras-admin{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:22px}
.cifra-admin{display:flex;flex-direction:column;gap:2px;padding:18px 20px;border-radius:22px;background:var(--c-claro);text-decoration:none;color:var(--ink);
  border:2px solid transparent;transition:transform .2s var(--ease-out),border-color .2s}
.cifra-admin:hover{transform:translateY(-4px);border-color:var(--c)}
.cifra-admin .ca-ic{font-size:30px}
.cifra-admin b{font-family:var(--font-display);font-size:38px;line-height:1.1;color:var(--c-osc)}
.cifra-admin span:last-child{font-weight:700;color:var(--ink-soft);font-size:14px}
.atajos-t{font-size:18px;margin:0 0 12px}
.atajos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:24px}
.atajo{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  text-decoration:none;color:var(--ink);font-weight:800;transition:transform .2s var(--ease-out),border-color .2s}
.atajo:hover{transform:translateY(-3px);border-color:var(--brand-300)}
.atajo span{width:44px;height:44px;flex:none;border-radius:14px;background:var(--brand-100);display:grid;place-items:center;font-size:24px}

/* Catálogo de recursos */
.cat-cursos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:20px}
.cat-etapa{background:#fff;border-radius:20px;padding:14px 16px;border:1px solid var(--line)}
.cat-etapa-t{font-family:var(--font-ui);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px}
.cat-chips,.filtro-clases{display:flex;flex-wrap:wrap;gap:8px}
.filtro-clases{margin:0 0 18px}
.cat-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--bg);border:2px solid transparent;
  text-decoration:none;color:var(--ink);font-weight:800;font-size:14px;transition:border-color .2s,background .2s}
.cat-chip span{background:#fff;border-radius:999px;padding:1px 8px;font-size:12px;color:var(--ink-soft)}
.cat-chip:hover{border-color:var(--brand-300)}
.cat-chip.activo{background:var(--brand-600);color:#fff}
.cat-chip.activo span{color:var(--brand-700)}
.cat-chip.vacio{opacity:.6}
.cat-pista{display:flex;align-items:center;gap:12px;padding:22px;border-radius:20px;background:#fff;border:2px dashed var(--brand-300);font-weight:800;color:var(--ink-soft);font-size:16px}
.cat-pista span{font-size:28px}
.cat-h2{font-size:22px;margin:4px 0 12px}
.cat-areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.cat-area{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:18px;background:var(--c-claro);text-decoration:none;color:var(--ink);
  border:3px solid transparent;transition:transform .2s var(--ease-out),border-color .2s}
.cat-area:hover{transform:translateY(-3px)}
.cat-area.activo{border-color:var(--c);box-shadow:0 14px 30px -20px var(--c)}
.cat-area-ic{font-size:28px}
.cat-area-n{font-weight:800;font-size:14px;line-height:1.2;flex:1}
.cat-area-c{align-self:flex-start;background:#fff;border-radius:999px;padding:2px 10px;font-weight:800;font-size:13px;color:var(--c-osc)}
.cat-recursos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.cat-r{display:flex;flex-direction:column;background:#fff;border-radius:20px;border:1px solid var(--line);box-shadow:var(--shadow-sm);overflow:visible}
.cat-r.inactivo{opacity:.6}
.cat-r-cover{display:grid;place-items:center;height:96px;background:var(--c-claro);border-radius:20px 20px 0 0;font-size:46px;text-decoration:none}
.cat-r-cuerpo{padding:14px 16px 6px;flex:1}
.cat-r-cuerpo h3{font-size:17px;line-height:1.25}
.cat-r-meta{margin:4px 0 8px;font-size:13px;color:var(--ink-soft);font-weight:700}
.cat-r-acciones{display:flex;align-items:center;gap:6px;padding:10px 12px 14px}
.cat-r-acciones .cat-orden{display:flex;gap:2px;margin-left:auto}
.cat-r-acciones .menu-acciones{margin-left:auto}
.cat-r-acciones .cat-orden + .menu-acciones{margin-left:0}

/* Alumnado y familias en tarjetas */
.personas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:16px}
.persona{display:flex;flex-direction:column;gap:12px;background:#fff;border-radius:22px;padding:18px;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.persona.inactivo{opacity:.6}
.persona-cab{display:flex;align-items:center;gap:12px}
.persona-nombre{flex:1;min-width:0}
.persona-nombre h3{font-size:19px;line-height:1.15}
.persona-nombre p{margin:2px 0 0;font-size:13px;color:var(--ink-soft);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.persona-datos{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px;color:var(--ink-soft)}
.persona-datos li{display:flex;align-items:center;gap:8px}
.persona-hijos{display:flex;flex-wrap:wrap;gap:8px}
.persona-hijos > span{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border-radius:999px;padding:3px 10px 3px 3px;font-weight:700;font-size:14px}
.persona-hijos .avatar.sm{width:28px;height:28px;font-size:14px}
.btn-block{width:100%;justify-content:center}

/* Panel lateral (cajón) para crear y editar */
.cajon-fondo{position:fixed;inset:0;z-index:60;background:rgba(17,20,40,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:cajonFondo .25s ease-out}
.cajon{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(560px,100vw);overflow-y:auto;background:#fff;padding:26px 26px 40px;
  box-shadow:-30px 0 60px -30px rgba(17,20,40,.5);animation:cajonEntra .35s var(--ease-out)}
.cajon .card,.cajon .form-recurso{box-shadow:none;border:0;padding:0;margin:0}
.cajon-cerrar{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--bg);
  text-decoration:none;color:var(--ink);font-weight:800}
.cajon-cerrar:hover{background:var(--brand-100)}
.cajon h2{padding-right:50px}
@keyframes cajonEntra{from{transform:translateX(40px);opacity:0}}
@keyframes cajonFondo{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.cajon,.cajon-fondo{animation:none}}
.sin-movimiento .cajon,.sin-movimiento .cajon-fondo{animation:none}

/* ================= TABLET Y MÓVIL: barra de secciones abajo ================= */
.barra-abajo{display:none}
.mobilebar-der{display:flex;align-items:center;gap:8px}
.mobilebar-der form{margin:0}
@media (max-width:960px){
  .barra-abajo{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
    background:var(--night);padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px -12px rgba(17,20,40,.5)}
  .barra-abajo::-webkit-scrollbar{display:none}
  .barra-abajo a{flex:1 0 auto;min-width:68px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 8px;border-radius:12px;
    color:#c6cbf0;text-decoration:none;font-size:11px;font-weight:800;white-space:nowrap}
  .barra-abajo a span{font-size:20px;line-height:1}
  .barra-abajo a.activo{background:rgba(99,102,241,.35);color:#fff}
  .app-main{padding-bottom:96px}
  .cifras-admin{grid-template-columns:1fr 1fr}
  .cifra-admin b{font-size:30px}
}
@media (max-width:420px){ .mobilebar-der .lang-switch button{padding:6px 10px} }
/* Ninguna tabla ensancha la página en el móvil: se desplaza dentro de su tarjeta */
.app-main{min-width:0}
@media (max-width:960px){
  .app-main table.simple{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
.admin-grid > *,.two-col > *{min-width:0}

/* Campus Abierto (campus.php) */
.campus{background:linear-gradient(180deg,#f2fbf9 0,#fffaf3 420px)}
.campus-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.campus-barra-der{display:flex;align-items:center;gap:10px}
.campus-main{max-width:1200px;margin:0 auto;padding:20px 16px 60px}
.campus-hero{display:flex;align-items:center;gap:18px;padding:26px 28px;border-radius:28px;background:linear-gradient(135deg,#d5f5ef,#dbeafe);margin-bottom:18px}
.campus-hero h1{font-size:clamp(28px,4vw,44px)}
.campus-hero p{margin:6px 0 0;font-weight:700;color:#0f766e;font-size:17px}
.campus-globo{font-size:64px;line-height:1}
.campus-cursos{flex-wrap:wrap;margin-bottom:6px}
.campus-curso{margin-top:28px}
.campus-curso h2{font-size:clamp(22px,2.6vw,30px)}
.campus-area{display:inline-flex;align-items:center;gap:8px;margin:18px 0 -8px;padding:6px 14px;border-radius:999px;background:var(--c-claro);color:var(--c-osc);font-size:17px}
.campus-nota{margin-top:34px;text-align:center;color:var(--ink-soft);font-weight:600}
@media (max-width:600px){.campus-hero{flex-direction:column;text-align:center;padding:20px}.campus-barra .lang-switch{display:none}}