/* Hoja compartida del panel de padres y de admin. Vive aquí y no en cada
   vista: un cambio de línea gráfica se hace una vez. Al tocarla, sube ?v=
   en views/_head.php (el service worker guarda /assets/ con cache-first). */
:root{
  --bg:#F7F4EE; --surface:#FFFFFF; --ink:#2B2B26; --ink-soft:#6E6A5E;
  --mint:#7FB685; --mint-deep:#4E8C57; --sand:#E8E2D5; --amber:#F2994A;
  --danger:#C0564B; --radius:14px;
  --shadow:0 1px 2px rgba(43,43,38,.05),0 4px 16px rgba(43,43,38,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:15px/1.55 -apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--mint-deep);text-decoration:none}
/* SISTEMA DE ANCHOS (único para admin y padres — no usar max-width inline).
   El relleno lateral crece con la pantalla: cómodo en móvil, con márgenes
   seguros y generosos en escritorio.

   REGLA CLAVE: el armazón (barra de navegación y pie) mide SIEMPRE lo mismo en
   todas las páginas. `narrow` limita únicamente la medida del CONTENIDO, no el
   contenedor — si encogiera el contenedor, el menú cambiaría de sitio al pasar
   de una sección a otra, que es justo lo que hay que evitar.
     .wrap          → tableros, tablas, rejillas de tarjetas (usa el ancho)
     .wrap.narrow   → formularios y lectura (línea de texto cómoda)
     .wrap.auth     → tarjetas de acceso centradas, páginas SIN menú          */
.wrap{width:100%;max-width:1480px;margin:0 auto;padding:clamp(24px,3vh,36px) clamp(16px,4vw,48px) clamp(56px,8vh,96px)}
.wrap.narrow{max-width:1480px}
/* `narrow` limita la MEDIDA DE LECTURA de los textos sueltos, no el ancho de
   la pagina: antes recortaba TODO hijo a 880px y dejaba media pantalla vacia
   a la derecha en monitores grandes. Ahora solo se recortan los parrafos y
   encabezados; las tarjetas, rejillas y formularios usan el ancho completo. */
/* Sin tope en ch para los parrafos sueltos: el margen seguro ya lo da el relleno de .wrap y un
   parrafo a un tercio de la pantalla se veia arrinconado (regla de Jaime, 7 sep 2026). */
.wrap.narrow>h1,.wrap.narrow>h2,.wrap.narrow>p,.wrap.narrow>.sub{max-width:none}
.wrap.auth{max-width:460px;padding-top:56px}
header.top{display:flex;justify-content:space-between;align-items:center;padding:14px 0;margin-bottom:24px;border-bottom:1px solid var(--sand)}
.logo{font-weight:700;font-size:17px;letter-spacing:-.2px}
.logo span{color:var(--mint-deep)}
.card{background:var(--surface);border:1px solid var(--sand);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
h1{font-size:22px;letter-spacing:-.3px;margin-bottom:4px}
h2{font-size:15px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-soft);margin:clamp(36px,5vh,56px) 0 16px;font-weight:600}
.sub{color:var(--ink-soft);font-size:14px}
/* Rejilla de tarjetas. Tres decisiones, y las tres se midieron:
   · `auto-fit` en vez de `auto-fill`: auto-fill RESERVA las columnas que quepan
     aunque estén vacías, así que 3 tarjetas en un contenedor de 4 columnas se
     quedaban apretadas a la izquierda con una columna fantasma al lado.
   · tope de ancho en vez de 1fr: con 1fr y auto-fit, UNA sola tarjeta se estira
     a los 1.384 px del contenedor. Medido. Es peor que el problema original.
   · justify-content:center: solo hace efecto porque las pistas tienen tope;
     con 1fr son flexibles y llenan siempre, y no habría nada que centrar.
   Cada página ajusta --gmin/--gmax a su contenido sin reescribir la plantilla. */
.grid{display:grid;gap:20px;justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--gmin,320px)),var(--gmax,430px)))}

/* ── SISTEMA DE COLUMNAS (admin y padres) ─────────────────────────────────
   Se reparte el ancho en vez de apilar todo a la izquierda. Todas colapsan a
   una sola columna en pantallas estrechas, sin media queries: auto-fit con
   minmax hace que una columna que no cabe se caiga sola a la siguiente fila.
     .cols     dos columnas iguales     (bloques hermanos)
     .cols-3   tres columnas iguales    (tarjetas pequenas, cifras)
     .cols-ab  principal + lateral 2:1  (contenido + ayuda/resumen)
     .cols-ba  lateral + principal 1:2  (filtros a la izquierda)
   minmax(0,…) y no minmax(320px,…) en las variantes fijas: sin el 0, una
   tabla ancha desborda la celda en vez de encogerse. */
.cols{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));align-items:start}
.cols-3{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));align-items:start}
.cols-ab,.cols-ba{display:grid;gap:20px;align-items:start;grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){
  .cols-ab{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  .cols-ba{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
}
/* Un bloque que necesita la fila entera dentro de una rejilla de columnas. */
.col-full{grid-column:1/-1}
/* Columna que se queda a la vista al bajar (resumenes, ayuda, acciones). */
@media (min-width:960px){
  .col-sticky{position:sticky;top:16px}
}
/* Las tablas nunca deben ensanchar su columna: se desplazan dentro de ella. */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}
/* Un hijo de rejilla o de flex NO encoge por debajo de su contenido salvo que
   se le diga: sin esto, una tabla con celdas nowrap ensancha la columna, la
   tarjeta y la pagina entera (medido en Jefes y Tesoros a 390 px). */
.grid>*,.cols>*,.cols-3>*,.cols-ab>*,.cols-ba>*,.card,.wrap{min-width:0}

/* Pestanas de filtro (botones, no enlaces: no navegan, acotan lo que se ve). */
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--sand);background:var(--surface);
  color:var(--ink-soft);border-radius:999px;padding:9px 16px;min-height:44px;font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.tab:hover{border-color:var(--mint);color:var(--ink)}
.tab.activa{border-color:var(--mint-deep);background:#F1F8F2;color:var(--mint-deep)}
.tab-n{background:var(--bg);border-radius:999px;padding:1px 8px;font-size:12px;font-weight:700}
.tab.activa .tab-n{background:var(--mint-deep);color:#fff}
/* OBJETIVO TÁCTIL: 44 px de alto mínimo en TODOS los botones, admin y padres.
   Medido antes: 34 px el global, 28 el de suspender. Los parches locales que
   lo subían página por página se retiraron: esta es la única definición. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;background:var(--mint-deep);color:#fff;border:0;border-radius:10px;padding:9px 18px;font:inherit;font-size:14px;font-weight:600;line-height:1.25;cursor:pointer;text-decoration:none;text-align:center;vertical-align:middle}
.btn.peligro{color:#B3452F;border-color:#E8C2BD}
.btn.peligro.btn-ghost:hover{background:#F9E7E5}
.btn:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--sand)}
.btn-ghost:hover{color:var(--ink)}
.btn[disabled],.btn:disabled{opacity:.55;cursor:default;transform:none!important;box-shadow:none!important}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--ink-soft);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;border-bottom:1px solid var(--sand)}
td{padding:10px;border-bottom:1px solid var(--sand)}
.tag{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600}
.tag-ok{background:#E4F2E6;color:var(--mint-deep)}
.tag-warn{background:#FCEEDF;color:#B26A1D}
.bar{height:8px;background:var(--sand);border-radius:999px;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:999px}
.avatar-dot{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;flex:none}
.flash{background:#E4F2E6;border:1px solid #BEDFC3;color:var(--mint-deep);border-radius:10px;padding:10px 14px;margin-bottom:18px;font-size:14px}
.error{background:#F9E7E5;border:1px solid #E8C2BD;color:var(--danger);border-radius:10px;padding:10px 14px;margin-bottom:18px;font-size:14px}
/* Mismo ancho y mismo relleno lateral que .wrap. El filete va en un ::before
   (no en el borde del elemento) para que arranque y termine exactamente donde
   el de la cabecera: un border-top ocuparia tambien el relleno lateral y
   sobresaldria 48px por cada lado. */
.site-foot{max-width:1280px;margin:clamp(48px,7vh,80px) auto 0;padding:0 clamp(16px,4vw,48px) 26px;color:var(--ink-soft);font-size:13px;text-align:center;line-height:1.8}
.site-foot::before{content:"";display:block;border-top:1px solid var(--sand);margin-bottom:18px}
.site-foot a{color:var(--ink-soft);text-decoration:none;border-bottom:1px dotted var(--sand)}
.site-foot a:hover{color:var(--mint-deep)}
.site-foot-links{display:block}
.nav-badge{display:inline-block;background:#EB5757;color:#fff;font-size:11px;font-weight:800;border-radius:99px;min-width:18px;height:18px;line-height:18px;text-align:center;padding:0 5px;vertical-align:2px}
/* ===== BARRA DE NAVEGACIÓN (idéntica en admin y padres) =====
   Vive DENTRO de .wrap, así que su ancho y sus márgenes coinciden siempre
   con los del contenido y el pie: nunca se ve descuadrada. */
.appbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:20px;margin-bottom:clamp(26px,4vh,44px);border-bottom:1px solid var(--sand)}
.appbar-logo{font-weight:800;font-size:16px;color:var(--ink);text-decoration:none;white-space:nowrap}
.appbar-logo span{color:var(--mint-deep)}
.appbar-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.appbar-out{margin:0}
.appbar .navlink{min-height:44px}
.navlink{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:14px;font-weight:600;
  color:var(--ink-soft);background:transparent;border:1px solid transparent;border-radius:99px;
  padding:8px 14px;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s}
.navlink:hover{background:var(--surface);color:var(--ink);border-color:var(--sand)}
.navlink.on{background:var(--mint-deep);color:#fff;border-color:var(--mint-deep)}
/* Menú "Más": <details> nativo, sin JS. */
.navmore{position:relative}
.navmore>summary{list-style:none}
.navmore>summary::-webkit-details-marker{display:none}
.navmore-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:210px;
  background:var(--surface);border:1px solid var(--sand);border-radius:14px;padding:6px;
  box-shadow:0 12px 30px rgba(43,43,38,.14);display:flex;flex-direction:column;gap:2px}
.navmore-item{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--ink-soft);
  text-decoration:none;padding:10px 12px;border-radius:10px;white-space:nowrap}
.navmore-item:hover{background:var(--bg);color:var(--ink)}
.navmore-item.on{background:var(--mint-deep);color:#fff}
@media (max-width:640px){
  .appbar{gap:10px}
  .appbar-nav{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .navmore-panel{right:auto;left:0}
}
/* Avisos flotantes. pointer-events:none es obligatorio: el elemento vive
   siempre en el DOM con opacity:0 y, sin esto, su caja invisible intercepta
   los clics de lo que quede debajo. */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 20px;border-radius:99px;font-size:14px;z-index:50;opacity:0;pointer-events:none;transition:opacity .25s;max-width:90vw;text-align:center;box-shadow:0 6px 20px rgba(43,43,38,.25)}
.toast.show{opacity:1}
.toast.err{background:#B3452F}
/* select y textarea van con los inputs: un select sin ancho declarado se
   estira hasta su opcion mas larga y se sale de la tarjeta. El de materiales,
   con los 1.090 saberes dentro, lo hacia. min-width:0 es lo que le permite
   encogerse cuando es hijo de un flex o un grid. */
input[type=email],input[type=password],input[type=text],input[type=url],
input[type=number],input[type=date],select,textarea{
  width:100%;max-width:100%;min-width:0;padding:11px 13px;
  border:1px solid var(--sand);border-radius:9px;font-size:15px;
  background:#FDFCFA;font-family:inherit;color:inherit}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23807A6B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.8 6 6.4 11 1.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:12px 8px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--mint);outline-offset:0;border-color:var(--mint)}
label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin:14px 0 6px}
.empty{color:var(--ink-soft);font-size:14px;padding:18px;text-align:center}

/* ============ MOTION (confianza = fluidez tranquila) ============ */
:root{--ease:cubic-bezier(.22,1,.36,1)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes growbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes slidedown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
/* entrada orquestada: header primero, luego el contenido en cascada */
.wrap>*{animation:rise .5s var(--ease) backwards}
.wrap>*:nth-child(2){animation-delay:.05s}.wrap>*:nth-child(3){animation-delay:.1s}
.wrap>*:nth-child(4){animation-delay:.15s}.wrap>*:nth-child(5){animation-delay:.2s}
.wrap>*:nth-child(6){animation-delay:.25s}.wrap>*:nth-child(7){animation-delay:.3s}
.wrap>*:nth-child(n+8){animation-delay:.35s}
.grid>.card{animation:rise .5s var(--ease) backwards}
.grid>.card:nth-child(1){animation-delay:.08s}.grid>.card:nth-child(2){animation-delay:.16s}
.grid>.card:nth-child(3){animation-delay:.24s}.grid>.card:nth-child(4){animation-delay:.32s}
.grid>.card:nth-child(5){animation-delay:.4s}.grid>.card:nth-child(n+6){animation-delay:.48s}
/* tarjetas que responden al tacto */
.card{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.grid>.card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(43,43,38,.05),0 12px 28px rgba(43,43,38,.10)}
/* botones: elevacion al pasar, presion al pulsar */
.btn{transition:transform .15s var(--ease),filter .15s,box-shadow .2s var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(78,140,87,.25)}
.btn:active{transform:translateY(0) scale(.97)}
.btn-ghost:hover{box-shadow:0 4px 10px rgba(43,43,38,.08)}
/* barras de progreso: crecen desde la izquierda al cargar */
.bar>i{transform-origin:left center;animation:growbar .9s var(--ease) .3s backwards}
/* filas de tabla: respuesta sutil */
tr{transition:background .15s}
tbody tr:hover td,table tr:hover td{background:#FBF9F4}
/* mensajes: entran deslizando */
.flash,.error{animation:slidedown .4s var(--ease)}
input,select,textarea{transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(127,182,133,.18)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ══════════ UTILIDADES COMPARTIDAS (sustituyen estilos en línea) ══════════ */
.card>h3:first-child,.card>h2:first-child{margin-top:0}
.card>p:first-child{margin-top:0}
h3{font-size:16px;margin:0 0 10px}
/* Fila de acciones: botones juntos, nunca enlaces sueltos. */
.acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.acciones.derecha{justify-content:flex-end}
.entre{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.apilado{display:flex;flex-direction:column;gap:6px}
.mt0{margin-top:0}.mt8{margin-top:8px}.mt14{margin-top:14px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}
.chico{font-size:12px}.medio{font-size:13px}
.nowrap{white-space:nowrap}
.derecha{text-align:right}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:12px}
.hint{color:var(--ink-soft);font-size:13px}
/* Aviso que se puede cerrar (correo sin confirmar, novedades): no compite con
   el contenido y el padre decide cuándo dejar de verlo. */
.aviso{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border-radius:10px;font-size:14px;margin-bottom:16px;border:1px solid var(--sand);background:var(--surface)}
.aviso.atencion{background:#FCEEDF;border-color:#F3D6B4;color:#7A4A12}
.aviso.peligro{background:#F9E7E5;border-color:#E8C2BD;color:var(--danger)}
.aviso .aviso-txt{flex:1;min-width:200px}
.aviso .cerrar{background:transparent;border:0;font-size:20px;line-height:1;cursor:pointer;color:inherit;opacity:.6;min-width:44px;min-height:44px}
.aviso .cerrar:hover{opacity:1}
/* Franja del estado de la prueba en todo el panel del padre. */
.franja-prueba{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px;border-radius:12px;margin:-8px 0 18px;font-size:14px;background:#FFF6DE;border:1px solid #F1DFA8;color:#6d5716}
.franja-prueba.vencida{background:#F9E7E5;border-color:#E8C2BD;color:var(--danger)}
.franja-prueba .franja-txt{flex:1;min-width:220px}
/* Cifras de negocio (admin) y de resumen (padres). */
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));margin-top:16px}
.kpi{text-decoration:none;color:inherit;display:block}
.kpi{background:var(--surface);border:1px solid var(--sand);border-radius:12px;padding:12px 14px}
.kpi b{display:block;font-size:26px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi span{font-size:12px;color:var(--ink-soft)}
.kpi.bien b{color:var(--mint-deep)} .kpi.ojo b{color:#B26A1D} .kpi.mal b{color:var(--danger)}
/* Formularios en línea (buscador, filtros). */
.filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:16px 0}
.filtros input[type=text],.filtros input[type=search],.filtros select{width:auto;min-width:200px;flex:1}
.filtros .btn{flex:none}
.paginacion{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:16px}
/* Pestañas por hijo en la lista de retos. */
.pestanas-hijo{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.fila-oculta{display:none!important}
.fila-marcada td{background:#F1F8F2}
input[type=checkbox].marca{width:20px;height:20px;accent-color:var(--mint-deep);cursor:pointer}
.tabla-acciones{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
/* Lo que antes era «tag» con color fijo por estado. */
.tag-mal{background:#F9E7E5;color:var(--danger)}
.tag-neutro{background:var(--bg);color:var(--ink-soft)}
/* Definiciones (ficha de familia, resumen de suscripción). */
.defs{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;font-size:14px;align-items:baseline}
.defs dt{color:var(--ink-soft);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.defs dd{margin:0}
/* Preguntas frecuentes: <details> nativo. */
.faq details{border:1px solid var(--sand);border-radius:12px;background:var(--surface);padding:0 16px;margin-top:8px}
.faq summary{cursor:pointer;font-weight:600;padding:14px 0;min-height:44px;display:flex;align-items:center;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--ink-soft);font-size:18px}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 14px;margin:0;color:var(--ink-soft);font-size:14px}
/* Nada se desborda en teléfono: lo ancho rueda dentro de su caja. */
/* (sin overflow-x:clip en .wrap: esconder el desborde solo ocultaba el problema) */
pre,code.bloque{white-space:pre-wrap;word-break:break-word}

/* ── antes en views/suscripcion.php ── */
/* Por qué esto no usa .grid:
     .grid va con `auto-fill`, que RESERVA las columnas que quepan aunque estén
     vacías. En un contenedor de 1480 px caben cuatro, así que dos planes se
     quedaban apretados contra la izquierda con medio ancho de página vacío al
     lado. `auto-fit` colapsa las columnas sobrantes y `justify-content:center`
     centra las que quedan: dos planes salen centrados, tres también, y ninguno
     se estira hasta quedar desproporcionado porque la pista tiene tope.
     El min(100%,300px) es para que en un móvil estrecho encoja en vez de
     desbordar. */
  .planes-grid{display:grid;gap:22px;justify-content:center;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),560px))}
  .planes-pie{text-align:center;max-width:86ch;margin:24px auto 0;font-size:13px}
  .planes-grid>.card{animation:rise .5s var(--ease) backwards}
  .planes-grid>.card:nth-child(2){animation-delay:.08s}
  .planes-grid>.card:nth-child(3){animation-delay:.16s}
  /* El realce al pasar por encima tambien colgaba de .grid>.card. */
  .planes-grid>.card:hover{transform:translateY(-3px);
    box-shadow:0 2px 4px rgba(43,43,38,.05),0 12px 28px rgba(43,43,38,.10)}
  /* .btn global se queda en 36 px de alto. Aqui no: es el boton de pagar, y en
     un movil 36 px es un blanco pequeño. Se sube solo en esta pagina, sin tocar
     .btn, que lo usan el panel entero y admin. */

/* ── antes en views/_cuenta_tabs.php ── */
.cuenta-h1{margin:0 0 14px}
  .cuenta-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 26px;
    border-bottom:1px solid var(--sand);padding-bottom:0}
  .cuenta-tab{display:inline-flex;align-items:center;gap:7px;
    padding:10px 16px;border-radius:12px 12px 0 0;text-decoration:none;
    font-size:14.5px;font-weight:600;color:var(--ink-soft);
    border:1px solid transparent;border-bottom:0;margin-bottom:-1px;
    min-height:44px}
  .cuenta-tab:hover{color:var(--ink);background:var(--surface)}
  /* La activa se «pega» al contenido comiéndose la línea de abajo: es lo que
     hace que se lea como una pestaña y no como un botón más. */
  .cuenta-tab.on{color:var(--ink);background:var(--surface);
    border-color:var(--sand);border-bottom:1px solid var(--surface)}
  @media (max-width:560px){
    .cuenta-tabs{border-bottom:0;gap:8px}
    .cuenta-tab{border-radius:99px;border:1px solid var(--sand);margin-bottom:0}
    .cuenta-tab.on{border-color:var(--ink);border-bottom:1px solid var(--ink)}
  }

/* ── antes en views/hijos.php ── */
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
    flex-wrap:wrap;margin-bottom:22px}
  .pagehead h1{margin:0 0 4px}
  .pagehead .sub{margin:0}

  /* Mismo criterio que .grid en _head.php: auto-fit para que no queden columnas
     fantasma a la derecha, tope para que UN solo hijo no ocupe la página entera,
     y centrado. Con tres hijos —el caso de siempre— salen equilibrados. */
  .hijos-lista{display:grid;gap:16px;justify-content:center;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),440px))}
  /* Los tokens son los de _head.php: --surface y --sand. Escribi --card y
     --line, que no existen ahi, y una variable indefinida invalida TODA la
     declaracion: la tarjeta se quedaba sin fondo ni borde sobre el beige.
     Lleva tambien la sombra de .card para que sea una ficha igual que el resto. */
  .hijo-card{background:var(--surface);border:1px solid var(--sand);
    border-radius:var(--radius);box-shadow:var(--shadow);
    padding:20px;display:flex;flex-direction:column;gap:14px}
  .hijo-card--pausado{opacity:.72}

  .hijo-id{display:flex;align-items:center;gap:14px}
  /* Anillo de avance: un degradado cónico recortado con una máscara. Dice de
     un vistazo lo que decían trece barras, y no necesita ni SVG ni librería. */
  .hijo-anillo{--pct:0;width:62px;height:62px;flex:none;border-radius:50%;
    display:grid;place-items:center;position:relative;
    background:conic-gradient(var(--c) calc(var(--pct)*1%), var(--sand) 0)}
  .hijo-anillo::after{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--surface)}
  .hijo-anillo span{position:relative;z-index:1;font-weight:700;font-size:16px;line-height:1}
  .hijo-anillo small{font-size:10px;font-weight:600;opacity:.65}
  .hijo-nombre{min-width:0}
  .hijo-nombre strong{font-size:17px}
  .hijo-nombre .sub{font-size:12.5px;margin-top:2px}

  .hijo-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0;
    padding:12px 0;border-top:1px solid var(--sand);border-bottom:1px solid var(--sand)}
  .hijo-cifras div{min-width:0}
  .hijo-cifras dt{font-size:11.5px;color:var(--ink-soft);line-height:1.3;margin:0 0 3px}
  .hijo-cifras dd{margin:0;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
  .hijo-cifras .ojo dd{color:#B0852A}

  .hijo-uso{margin:0;font-size:12.5px;color:var(--ink-soft)}
  .hijo-uso strong{color:var(--ink)}

  .hijo-areas summary{cursor:pointer;font-size:13px;color:var(--ink-soft);
    padding:6px 0;list-style:none;user-select:none}
  .hijo-areas summary::-webkit-details-marker{display:none}
  .hijo-areas summary::before{content:'▸ ';transition:transform .2s}
  .hijo-areas[open] summary::before{content:'▾ '}
  .hijo-areas summary:hover{color:var(--ink)}
  .hijo-areas-lista{display:flex;flex-direction:column;gap:7px;padding-top:6px}
  .area-fila{display:grid;grid-template-columns:minmax(0,1fr) 90px 44px;align-items:center;gap:10px;
    font-size:12px;color:var(--ink-soft)}
  .area-nom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .area-num{text-align:right;font-variant-numeric:tabular-nums}
  .area-fila .bar{height:6px;border-radius:99px;background:var(--sand);overflow:hidden;display:block}
  .area-fila .bar i{display:block;height:100%;border-radius:99px}

  .hijo-acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
  .hijo-acciones .btn{flex:1;text-align:center;text-decoration:none;font-size:13px;padding:9px 12px;
    white-space:nowrap}

  @media (max-width:420px){
    .hijo-cifras{grid-template-columns:1fr 1fr}
    .area-fila{grid-template-columns:minmax(0,1fr) 60px 42px}
  }

/* ── antes en views/materiales.php ── */
/* Prefijo bsab- en todo: este bloque convive con la hoja del panel y una clase
   generica como .lista o .elegido se la pisaria (o se la pisarian a el). */
.bsab-elegido{display:flex;align-items:center;gap:10px;justify-content:space-between;
  background:#EDF5EE;border:1px solid var(--mint);border-radius:10px;
  padding:10px 12px;margin-bottom:8px;font-size:14.5px}
.bsab-elegido b{font-weight:700}
.bsab-elegido small{display:block;color:var(--ink-soft);font-size:12px;font-weight:600}
.bsab-quitar{border:0;background:none;cursor:pointer;color:var(--ink-soft);
  font-size:18px;line-height:1;padding:4px 6px;border-radius:8px;flex:0 0 auto}
.bsab-quitar:hover{background:#fff;color:var(--ink)}
.bsab-fila{display:flex;align-items:center;gap:8px;margin-top:8px}
.bsab-mini{margin:0;flex:0 0 auto;font-size:12px}
.bsab-area{flex:1 1 0;padding:7px 30px 7px 10px;font-size:13px;
  background-position:right 10px center}
.bsab-lista{list-style:none;margin:8px 0 0;padding:4px;max-height:260px;
  overflow-y:auto;border:1px solid var(--sand);border-radius:10px;
  background:#FDFCFA;display:none}
.bsab-lista.abierta{display:block}
.bsab-op{padding:9px 11px;border-radius:8px;cursor:pointer;font-size:14.5px;
  min-height:44px;display:flex;flex-direction:column;justify-content:center}
.bsab-op small{color:var(--ink-soft);font-size:12px;font-weight:600}
.bsab-op:hover,.bsab-op.foco{background:#EDF5EE}
.bsab-op.foco{outline:2px solid var(--mint);outline-offset:-2px}
.bsab-ayuda{margin:7px 2px 0;font-size:12.5px;color:var(--ink-soft);min-height:17px}
.bsab-ayuda.mal{color:#B3452F;font-weight:600}

/* ── antes en views/semana.php ── */
.sem-hijo{margin-bottom:28px}
    .sem-hijo h2{display:flex;align-items:center;gap:10px}
    .sem-hijo h2 i{display:inline-flex;width:32px;height:32px;border-radius:50%;align-items:center;justify-content:center;color:#fff;font-style:normal;font-weight:800}
    .sem-kpis{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 14px}
    .sem-kpi{flex:1;min-width:120px;background:var(--card,#fff);border:1.5px solid var(--sand,#E3DBC9);border-radius:14px;padding:10px 12px}
    .sem-kpi b{display:block;font-size:22px;line-height:1.1}
    .sem-kpi span{font-size:12px;color:var(--ink-soft,#6b675c)}
    .sem-lista{margin:6px 0 0;padding-left:18px;font-size:14px;line-height:1.5}
    .sem-sug{background:#FFF6DE;border-left:5px solid #E8964A;border-radius:10px;padding:10px 12px;margin-top:12px;font-size:14px;line-height:1.5;color:#3A3A32}
    .sem-ok{color:#3F7A4C}

/* ── antes en views/admin_planes.php ── */
/* Prefijo plan- en todo: esta hoja convive con la de admin y una clase
     genérica como .cab o .rejilla acabaría pisando (o pisada por) otra. */
  .plan-card{margin-bottom:18px}
  .plan-off{opacity:.62}
  .plan-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
  .plan-cab h3{margin:0;font-size:19px}
  .plan-etiquetas{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
  .plan-etiquetas code{font-size:12px}
  .plan-rejilla{display:grid;grid-template-columns:1fr 110px 130px;gap:12px;align-items:end}
  .plan-rejilla label{margin-top:14px}
  .plan-campos{border:1px solid var(--sand);border-radius:10px;padding:12px 14px 16px;margin-top:18px}
  .plan-campos legend{font-size:12px;font-weight:700;color:var(--ink-soft);
    text-transform:uppercase;letter-spacing:.6px;padding:0 6px}
  .plan-check{display:flex;align-items:center;gap:9px;margin-top:12px;
    font-size:14.5px;font-weight:500;color:var(--ink);cursor:pointer;min-height:44px}
  .plan-check input{flex:none;width:19px;height:19px;accent-color:var(--mint-deep);cursor:pointer}
  .plan-pie{display:flex;align-items:center;justify-content:space-between;
    gap:14px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--sand)}
  @media (max-width:600px){
    .plan-rejilla{grid-template-columns:1fr}
    .plan-etiquetas{margin-left:0}
  }

/* ── antes en views/hijo_detalle.php ── */
.ficha-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
      margin-top:12px;padding-bottom:16px;border-bottom:1.5px solid var(--sand);margin-bottom:20px}
    .kid-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
    .kid-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:5px 16px 5px 6px;
      border-radius:99px;background:var(--card,#fff);border:2px solid var(--sand);color:inherit;
      font-weight:700;font-size:14px;text-decoration:none;transition:border-color .15s,transform .15s}
    .kid-chip i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
      font-style:normal;font-weight:800;font-size:16px;color:#2A2007}
    .kid-chip:hover{transform:translateY(-1px);border-color:var(--mint-deep,#4E8C57)}
    .kid-chip.on{border-color:var(--mint-deep,#4E8C57);box-shadow:0 2px 10px rgba(78,140,87,.18)}

/* ── antes en views/hijo_detalle.php ── */
.ficha-chips{position:sticky;top:0;z-index:20;display:flex;gap:8px;flex-wrap:wrap;
      background:var(--bg);padding:10px 0 12px;margin-bottom:6px}
    .ficha-chips a{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;
      border:1px solid var(--sand);border-radius:99px;background:var(--surface);
      font-size:14px;font-weight:600;color:var(--ink-soft);text-decoration:none}
    .ficha-chips a:hover{border-color:var(--mint-deep);color:var(--mint-deep)}
    .ficha-sec{scroll-margin-top:70px}
    /* Dos columnas en escritorio con flujo tipo mosaico: el contenido
       RELLENA ambas columnas de arriba a abajo (nada de una columna corta
       junto a otra kilometrica). Los grupos originales solo aportan sus
       anclas; cada tarjeta fluye completa (break-inside) y su titulo viaja
       pegado a ella. En pantallas angostas vuelve a una columna. */
    .ficha-cols{columns:2;column-gap:26px;margin-top:4px}
    .ficha-col,.ficha-sec{display:block}
    .ficha-cols .card{break-inside:avoid;margin-bottom:18px}
    .ficha-cols h2{break-after:avoid}
    @media(max-width:1020px){.ficha-cols{columns:1}}
    /* Cabecera visible mientras se recorre la lista acotada de desafios. */
    .att-scroll th{position:sticky;top:0;background:var(--card,#fff);z-index:1}

/* ══════════ MI CUENTA · fichas de ajustes y tarjetas de plan ══════════
   Las dos pantallas que el padre mira con calma: sus datos y su plan. Antes
   eran columnas de formularios sueltos con alturas dispares y tarjetas
   pequenas perdidas en medio de la pagina. Criterio nuevo:
     · fichas anchas donde cada fila EXPLICA a la izquierda y CONTROLA a la
       derecha (lo que hace cualquier panel de cuenta serio);
     · las cifras del plan se reparten el ancho en vez de amontonarse;
     · nada centrado a la fuerza en una columna estrecha.                    */

/* Titulo dentro de una tarjeta: mas grande que h3, sin las mayusculas de h2. */
.tit-card{font-size:19px;letter-spacing:-.3px;margin:0;font-weight:700;
  text-transform:none;color:var(--ink)}

/* Identidad: quien eres, en una linea, antes de cualquier campo. */
.ficha-id{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--sand)}
.ficha-id .avatar-dot{width:46px;height:46px;font-size:18px;background:var(--mint-deep)}
.ficha-id-txt{min-width:0;flex:1}
.ficha-id-txt b{display:block;font-size:17px;letter-spacing:-.2px}

/* Fila de ajuste. El control tiene tope propio (--ctrl): un campo «Nombre»
   estirado a 900 px se lee como un error, no como un formulario. */
.ajuste{display:grid;gap:10px 32px;padding:18px 0;border-top:1px solid var(--sand)}
.ajuste:first-of-type{border-top:0;padding-top:16px}
.ajuste-txt strong{display:block;font-size:14.5px}
.ajuste-txt .hint{margin-top:3px;max-width:56ch}
.ajuste label{margin:0 0 6px}
.ajuste-ctrl>.hint{margin-top:6px}
.ajuste-pie{display:flex;padding-top:16px;border-top:1px solid var(--sand)}
@media (min-width:860px){
  .ajuste{grid-template-columns:minmax(0,1fr) minmax(0,var(--ctrl,400px));align-items:start}
  .ajuste-pie{justify-content:flex-end}
}
/* Campo que no debe estirarse aunque su columna sea ancha. */
.campo-corto{max-width:400px}
/* Bloques hermanos dentro de una misma tarjeta (contrasena + passkey). */
.bloque+.bloque{margin-top:22px;padding-top:22px;border-top:1px solid var(--sand)}
.bloque h3{margin-bottom:8px}

/* ── Suscripcion ─────────────────────────────────────────────────────── */
/* Tarjeta de estado: el plan de hoy, sus cifras y sus acciones. */
.plan-estado{background:linear-gradient(135deg,#FDF8EE 0%,#F1F8F2 100%);padding:24px}
.plan-datos{display:grid;gap:18px 30px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--sand);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.plan-dato b{display:block;font-size:16.5px;margin-top:3px}
.plan-dato .bar{margin-top:9px;max-width:190px}
.plan-acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--sand)}

/* Tarjeta de plan: precio arriba, lo que incluye en medio, el pago abajo del
   todo (margin-top:auto) para que dos tarjetas de distinto alto terminen sus
   botones a la misma altura. */
.plan-card{display:flex;flex-direction:column;gap:14px;padding:24px}
.plan-card.es-actual{border-color:var(--mint-deep);box-shadow:0 0 0 1px var(--mint-deep),var(--shadow)}
.plan-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.plan-cab h3{margin:0;font-size:18px}
.plan-precio{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plan-precio b{font-size:36px;font-weight:800;letter-spacing:-1.2px;line-height:1;
  font-variant-numeric:tabular-nums}
.plan-precio span{font-size:14px;color:var(--ink-soft)}
.plan-lista{list-style:none;display:grid;gap:8px;margin:0;font-size:14px;color:var(--ink-soft)}
.plan-lista li{display:flex;gap:9px;align-items:flex-start}
.plan-lista li::before{content:"✓";color:var(--mint-deep);font-weight:700;flex:none}
.plan-pago{display:grid;gap:9px;margin-top:auto;padding-top:18px;border-top:1px solid var(--sand)}
.plan-pago .btn{width:100%}
.plan-pago-nota{text-align:center;color:var(--ink-soft);font-size:12.5px}
.plan-o{display:flex;align-items:center;gap:10px;color:var(--ink-soft);font-size:12px;
  text-transform:uppercase;letter-spacing:.6px;margin:2px 0}
.plan-o::before,.plan-o::after{content:"";flex:1;border-top:1px solid var(--sand)}

/* Preguntas frecuentes en dos columnas: llenan el ancho y se leen igual. */
.faq-cols{display:grid;gap:0 22px;align-items:start;max-width:1180px}
@media (min-width:860px){.faq-cols{grid-template-columns:1fr 1fr}}