/* ======================================================================
   SISTEMA DE DISEÑO AKSARAHUB · v1 · 06/08/2026
   Tres capas: primitivos -> semánticos -> componente.
   Ningún componente vuelve a usar un primitivo ni un hex a mano.
   Documento de referencia: aksara/sistema-diseno-aksarahub.pdf
   ====================================================================== */
:root{
 /* ---------- CAPA 1 · PRIMITIVOS (sin significado) ---------- */
 /* navy · el color de la casa. El 600 es el navy histórico #1e3a52 */
 --navy-50:#eef3f8;  --navy-100:#d8e3ee; --navy-200:#adc3d8; --navy-300:#7d9cba;
 --navy-400:#4e7c9c; --navy-500:#35617f; --navy-600:#1e3a52; --navy-700:#1a3149;
 --navy-800:#162c40; --navy-900:#0f1e2c;
 /* dorado · el acento. El 500 es el gold histórico #c9a227 */
 --gold-50:#fdfaf0;  --gold-100:#faf6ea; --gold-200:#f0e6c4; --gold-300:#e8d9a8;
 --gold-400:#d8bd63; --gold-500:#c9a227; --gold-600:#a5821f; --gold-700:#8a6c1a;
 --gold-800:#6b5314; --gold-900:#4a390e;
 /* neutrales · el 90% de los píxeles de una app de gestión */
 --gris-0:#ffffff;   --gris-25:#fbfcfd;  --gris-50:#f5f7f9;  --gris-100:#eef1f4;
 --gris-200:#dfe4ea; --gris-300:#c6ced7; --gris-400:#a4b0bc; --gris-500:#7d8b99;
 --gris-600:#5d6b7a; --gris-700:#44515e; --gris-800:#2c3742; --gris-900:#1e2830;
 --gris-950:#141b21;
 /* semánticos base */
 --ok-100:#e6f2eb;  --ok-500:#2e8b57;  --ok-600:#24713f;
 --av-100:#fdf3e0;  --av-500:#c9820b;  --av-600:#a56a08;
 --mal-100:#fbeae8; --mal-500:#c0392b; --mal-600:#9e2f23;
 --inf-100:#e8f1f8; --inf-500:#2c6b9e; --inf-600:#245880;

 /* ---------- CAPA 2 · SEMÁNTICOS (esto es lo que se usa) ---------- */
 --sup-lienzo:var(--gris-50);      /* fondo de la aplicación */
 --sup-default:var(--gris-0);      /* tarjetas, tablas, paneles */
 --sup-hundida:var(--gris-100);    /* zonas de destino, deshabilitado */
 --sup-suave:var(--gris-25);       /* notas, filas alternas */
 --tx-primario:var(--gris-900);    /* títulos y datos · 14.8:1 */
 --tx-secundario:var(--gris-600);  /* descripciones · 6.1:1 */
 --tx-tenue:var(--gris-500);       /* ayudas, marcas de tiempo · 4.6:1 */
 --tx-marca:var(--gold-700);       /* texto dorado · 5.2:1 (NUNCA el 500) */
 --tx-inverso:var(--gris-0);
 --bd-sutil:var(--gris-200);       /* divisores dentro de un bloque */
 --bd-default:var(--gris-300);     /* bordes de tarjeta y campo · 3.1:1 */
 --bd-fuerte:var(--gris-400);
 --acc-primaria:var(--navy-600);   /* el botón principal, UNO por vista */
 --acc-primaria-h:var(--navy-700);
 --acc-marca:var(--gold-500);      /* identidad: activo, add-on */
 --acc-marca-suave:var(--gold-100);

 /* ---------- tipografía · 7 tokens, 5 tamaños, 3 pesos ---------- */
 --t-display:30px;  --t-display-lh:34px;
 --t-title:22px;    --t-title-lh:26px;
 --t-section:17px;  --t-section-lh:22px;
 --t-body:14px;     --t-body-lh:20px;
 --t-dense:12px;    --t-dense-lh:15px;   /* la palanca de densidad */
 --t-label:11px;    --t-label-lh:15px;
 --t-caption:10px;  --t-caption-lh:14px;
 --peso-normal:400; --peso-medio:500; --peso-fuerte:600;

 /* ---------- espaciado · base 4, regla 2:1 ---------- */
 --sp-1:2px;  --sp-2:4px;  --sp-3:8px;  --sp-4:12px; --sp-5:16px;
 --sp-6:20px; --sp-7:24px; --sp-8:32px; --sp-9:48px;

 /* ---------- radios · 4, no 17 ---------- */
 --rad-1:4px; --rad-2:8px; --rad-3:12px; --rad-pill:999px;

 /* ---------- sombras · 3, no 35. Solo para lo que flota de verdad ---------- */
 --som-1:0 1px 3px rgba(30,40,50,.14);    /* lo que se arrastra */
 --som-2:0 4px 14px rgba(30,40,50,.16);   /* menús, tooltips */
 --som-3:0 16px 44px rgba(30,40,50,.24);  /* modales */

 /* ---------- foco visible, uno solo en todo el hub ---------- */
 --foco:0 0 0 2px var(--sup-default),0 0 0 4px var(--acc-primaria);

 /* ---------- compatibilidad con los tokens de 1.53 ---------- */
 --fs-xs:var(--t-caption); --fs-sm:var(--t-label); --fs-md:var(--t-dense);
 --fs-lg:var(--t-body); --fs-xl:var(--t-body);
 --r-sm:var(--rad-1); --r-md:var(--rad-2); --r-pill:var(--rad-pill);
}
/* ---------- MODO OSCURO · construido, apagado ----------
   Se enciende con <html data-tema="oscuro">. No se activa solo:
   Miguel dijo construirlo pero no implementarlo hasta que él lo pida. */
[data-tema="oscuro"]{
 --sup-lienzo:var(--gris-950); --sup-default:var(--gris-900);
 --sup-hundida:var(--gris-950); --sup-suave:var(--gris-800);
 --tx-primario:var(--gris-50);  --tx-secundario:var(--gris-400);
 --tx-tenue:var(--gris-500);    --tx-marca:var(--gold-400);
 --tx-inverso:var(--gris-900);
 --bd-sutil:var(--gris-800);    --bd-default:var(--gris-700); --bd-fuerte:var(--gris-600);
 --acc-primaria:var(--navy-300);--acc-primaria-h:var(--navy-200);
 --acc-marca:var(--gold-400);   --acc-marca-suave:var(--gris-800);
 --som-1:0 1px 3px rgba(0,0,0,.5); --som-2:0 4px 14px rgba(0,0,0,.55);
 --som-3:0 16px 44px rgba(0,0,0,.65);
}
/* ---------- accesibilidad base ---------- */
:focus-visible{outline:none;box-shadow:var(--foco);border-radius:var(--rad-1);}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{position:relative;z-index:20;}
/* lo que se acciona con clic pero no es un control nativo también recibe foco */
.pv-t td.cel,.pv-t td.pri,.mia-fi,.pz-srcc,.kb-k,.mia-ta .ck{outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
 *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
  transition-duration:.01ms !important;scroll-behavior:auto !important;}
}
/* ---------- MÓVIL · lo que el kit exige de más en táctil ----------
   El puntero acierta en 24 px; el dedo necesita 44. Y el espaciado
   táctil pide más aire que el de escritorio. */
@media (pointer:coarse){
 button,.btn,a[data-p],select,input[type=checkbox],.mia-fi,.pz-zap,.pv-mini{min-height:44px;}
 .pv-mini{min-width:44px;}
 td,th{padding-top:var(--sp-4);padding-bottom:var(--sp-4);}
}

/* Operational wiring uses the established NOW shell and semantic tokens. */
body{background:var(--sup-lienzo);color:var(--tx-primario);font-size:var(--t-body)}
.main{min-width:0}.op-status{padding:var(--sp-5);background:var(--av-100);color:var(--av-600);border-radius:var(--rad-2)}
.op-button{min-height:44px;padding:var(--sp-3) var(--sp-5);border:1px solid var(--bd-default);border-radius:var(--rad-2);background:var(--sup-default);color:var(--tx-primario);font-weight:var(--peso-medio)}
.op-button.primary{background:var(--acc-primaria);color:var(--tx-inverso);border-color:var(--acc-primaria)}
.op-button:disabled{background:var(--sup-hundida);color:var(--tx-secundario);cursor:default}
.op-member-list,.op-session-list{display:grid;gap:var(--sp-5);margin:var(--sp-7) 0}
.op-member,.op-assignment-row{border:1px solid var(--bd-sutil);border-radius:var(--rad-2);background:var(--sup-default);padding:var(--sp-5);text-align:left;display:grid;gap:var(--sp-3);min-width:0;overflow-wrap:anywhere}
.op-member strong,.op-select strong{font-weight:var(--peso-fuerte)}
.op-session{display:flex;justify-content:space-between;gap:var(--sp-7)}.op-session h2{margin:var(--sp-3) 0;font-size:var(--t-section)}
.op-date,.op-help{color:var(--tx-secundario)}.op-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center;max-width:360px}.op-actions .op-help{width:100%;margin:0}
.op-chip{display:inline-block;font-size:var(--t-dense);color:var(--tx-secundario);background:var(--sup-hundida);padding:var(--sp-2) var(--sp-3);border-radius:var(--rad-pill)}
.op-form,.op-payment-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-5)}
.op-form label,.op-payment-fields label{display:grid;gap:var(--sp-3)}.op-form .op-help{grid-column:1/-1}
input,select{max-width:100%;min-width:0;min-height:44px;border:1px solid var(--bd-default);border-radius:var(--rad-2);padding:var(--sp-3);font:inherit;color:var(--tx-primario);background:var(--sup-default)}
.op-select{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}.op-select input{width:24px}.op-select span{color:var(--tx-secundario)}
.op-number{font-size:var(--t-display);font-weight:var(--peso-fuerte)}.op-empty{min-height:140px}.op-auth{margin-top:var(--sp-8)}
.op-sticky-actions{position:sticky;bottom:0;background:var(--sup-default);border-top:1px solid var(--bd-default);padding:var(--sp-5);display:flex;gap:var(--sp-5);align-items:center;justify-content:space-between}
.side-foot .op-button{width:100%}.side-foot p{overflow-wrap:anywhere}.nav button{min-height:44px}.navg{font-weight:var(--peso-fuerte)}h1,h2,.logo{font-weight:var(--peso-fuerte)}
@media(max-width:767px){.app{display:block}.main{padding:var(--sp-5);padding-bottom:140px}.side{height:auto;position:static;padding:var(--sp-5)}.nav{position:fixed;bottom:0;left:0;right:0;z-index:950;flex-direction:row;overflow-x:auto;background:var(--acc-primaria);padding-bottom:env(safe-area-inset-bottom)}.nav .navg{display:none}.nav button{width:auto;min-width:100px;flex-shrink:0;text-align:center;justify-content:center}.side-foot{margin-top:var(--sp-3);padding:0;border:0}.side-foot p{display:none}.side-foot .op-button{width:auto}.logo-sub{padding-bottom:var(--sp-3)}.op-session,.op-sticky-actions{display:block}.op-actions{margin-top:var(--sp-5);max-width:none}.op-sticky-actions{bottom:56px}.live{position:static;margin:var(--sp-3) var(--sp-5);display:inline-block}.grid.g3{grid-template-columns:1fr}.op-form,.op-payment-fields{grid-template-columns:1fr}}
.op-more{display:none!important}.op-menu-list{display:grid;gap:var(--sp-3)}dialog{max-width:600px;width:calc(100% - 32px);max-height:82vh;overflow:auto;border:1px solid var(--bd-default);border-radius:var(--rad-3);background:var(--sup-default);color:var(--tx-primario);padding:var(--sp-5);box-shadow:var(--som-3)}.card{padding:var(--sp-5)}
@media(max-width:767px){.nav button[data-view]:not([data-view=panel]):not([data-view=cobros]):not([data-view=calendario]):not([data-view=alumnas]):not([data-view=alumna]):not([data-view=politica]){display:none}.nav .op-more{display:flex!important}.nav button{min-width:0;flex:1;padding:var(--sp-3);font-size:var(--t-dense)}dialog{max-height:80vh;margin-bottom:0;width:100%;border-bottom-left-radius:0;border-bottom-right-radius:0}}
@media(max-width:767px){.nav[data-role=admin] button[data-view=alumna],.nav[data-role=admin] button[data-view=politica]{display:none}.nav button{overflow-wrap:anywhere;line-height:var(--t-dense-lh)}}
.op-status{color:var(--tx-primario)}#more-menu>button{position:sticky;top:0;z-index:2}

@media(max-width:767px){.nav[data-role=member] button[data-view=comprobantes]{display:flex}}

.op-receipt-preview{width:min(92vw,800px)}.op-receipt-preview img{display:block;max-width:100%;max-height:65vh;object-fit:contain;margin:16px auto}.op-receipt-preview iframe{display:block;width:100%;height:65vh;border:0;margin-top:16px}

/* Thrive NOW welcome — separate from the operational shell. */
.now-welcome .side,.now-welcome .live{display:none}
.now-welcome .app{display:block;min-height:100svh}
.now-welcome .main{max-width:none;padding:0;min-height:100svh}
.welcome-layout{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.welcome-story{position:relative;isolation:isolate;overflow:hidden;background:var(--brand);color:var(--surface-2);padding:48px;display:flex;flex-direction:column;justify-content:space-between;min-height:100svh}
.welcome-brand{color:inherit;text-decoration:none;font-size:32px;font-weight:600;letter-spacing:-1px;align-self:flex-start}
.welcome-brand span,.welcome-copy h1 span{color:var(--lime)}
.welcome-eyebrow{font-size:12px;letter-spacing:.12em;line-height:1.6;margin:0 0 20px;font-weight:600}
.welcome-copy{position:relative;z-index:1;margin:64px 0}
.welcome-copy h1{font-size:clamp(56px,6.5vw,96px);line-height:1.02;letter-spacing:-.06em;font-weight:600;margin:0 0 32px}
.welcome-description{font-size:20px;line-height:1.6;margin:0;max-width:30ch}
.welcome-bottom{display:flex;flex-wrap:wrap;gap:24px;font-size:12px;letter-spacing:.04em;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--surface-2) 24%,transparent)}
.welcome-orbit{position:absolute;width:640px;height:640px;border:1px solid color-mix(in srgb,var(--lime) 45%,transparent);border-radius:50%;right:-340px;top:18%;z-index:-1}
.welcome-orbit:before,.welcome-orbit:after{content:"";position:absolute;inset:48px;border:inherit;border-radius:inherit}
.welcome-orbit:after{inset:96px}
.welcome-access{padding:48px 32px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--sup-lienzo);min-width:0}
.welcome-access-heading{width:min(100%,384px);margin-bottom:32px}
.welcome-access-heading .welcome-eyebrow{color:var(--tx-secundario);margin-bottom:12px}
.welcome-access-heading h2{font-size:32px;line-height:1.2;font-weight:600;letter-spacing:-1px;margin:0 0 16px}
.welcome-access-heading p:last-child{color:var(--tx-secundario);font-size:15px;margin:0}
.welcome-form{width:min(100%,400px);min-height:320px}
.welcome-note{color:var(--tx-secundario);font-size:12px;margin:32px 0 0}
.welcome-loading{width:min(100%,384px);display:flex;align-items:center;gap:12px;padding:32px 0;color:var(--tx-secundario)}
.welcome-spinner{width:20px;height:20px;border:2px solid var(--bd-sutil);border-top-color:var(--acc-primaria);border-radius:50%;animation:welcome-spin .8s linear infinite}
@keyframes welcome-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.welcome-spinner{animation:none}}
@media(max-width:767px){
 .welcome-layout{grid-template-columns:1fr}.welcome-story{min-height:0;padding:24px;gap:32px}
 .welcome-brand{font-size:28px}.welcome-copy{margin:0}.welcome-copy .welcome-eyebrow{font-size:10px;margin-bottom:16px}
 .welcome-copy h1{font-size:56px;margin-bottom:20px}.welcome-description{font-size:16px}.welcome-description br{display:none}
 .welcome-bottom{gap:20px;padding-top:16px;font-size:11px}.welcome-orbit{width:420px;height:420px;right:-280px;top:10%}
 .welcome-access{padding:32px 16px}.welcome-access-heading{margin-bottom:24px}.welcome-access-heading h2{font-size:28px}
 .welcome-form{width:100%;display:flex;justify-content:center}.welcome-form>*{max-width:100%}.welcome-note{margin-top:24px}
}