/* ============================================================================
   miComunidad Escolar — Design Tokens
   Sistema "premium oscuro lateral + crema + blanco"
   ============================================================================ */

:root {
    /* === BRAND ============================================================ */
    --brand-teal:         #6DC7D0;  /* exacto del wordmark — NO sustituir */
    --brand-teal-primary: #6EC6C8;
    --brand-teal-dark:    #4BA8AA;
    --brand-teal-deep:    #2C6D6F;

    /* === PIZARRA DIGITAL (paleta de los mockups pizarra_*) ================ */
    /* El editor y la presentacion referencian var(--carbon-N)/var(--cream-*)
       que hasta ahora solo existian dentro de los mockups HTML. */
    --cream:       #F4F0E6;
    --cream-deep:  #EAE3D2;
    --carbon-1:    #141619;
    --carbon-2:    #1E2126;
    --carbon-3:    #444441;
    --carbon-4:    #5F5E5A;
    --carbon-5:    #888780;
    --carbon-6:    #B4B2A9;
    --carbon-7:    #D3D1C7;
    --pz-green:      #1D9E75;
    --pz-green-deep: #0F6E56;
    --pz-shadow-soft:  0 1px 2px rgba(20, 22, 25, 0.04), 0 4px 12px rgba(20, 22, 25, 0.06);
    --pz-shadow-pop:   0 2px 4px rgba(20, 22, 25, 0.05), 0 8px 24px rgba(20, 22, 25, 0.08);
    --pz-shadow-float: 0 4px 8px rgba(20, 22, 25, 0.08), 0 16px 32px rgba(20, 22, 25, 0.10);

    /* === SURFACES ========================================================= */
    --bg:                  #F4F0E6;  /* lienzo principal — crema cálido */
    --bg-panel:            #FFFFFF;  /* cards y módulos */
    --bg-cream:            #FAF7F1;  /* aside lateral */
    --bg-light-teal:       #E8F4F8;  /* hovers teal */
    --bg-rail:             #141619;  /* rail más oscuro */
    --bg-sidebar:          #1E2126;  /* sidebar carbón */
    --bg-sidebar-hover:    #2A2E35;
    --bg-sidebar-active:   rgba(110, 198, 200, 0.18);

    /* === TEXT ============================================================= */
    --text-primary:        #1A1C1F;
    --text-secondary:      #5C6068;
    --text-muted:          #60646C;
    --text-sidebar:        #C7CBD1;
    --text-sidebar-muted:  #8B9098;
    --text-sidebar-active: #FFFFFF;

    /* === BORDERS ========================================================== */
    --border-soft:    #E8E4DD;
    --border-med:     #D4CFC5;
    --border-sidebar: #2F343B;

    /* === SEMANTIC ========================================================= */
    --danger:   #A32D2D;
    --warning:  #BA7517;
    --success:  #1D9E75;
    --info:     #2D6EA3;
    --pin-gold: #B8860B;

    /* Dorado del reconocimiento "Sesion estrella" (H3) — la rueda dorada que
       Cesar pidio en la ronda 4. --gold es el tono base (barra, estrellas y % full);
       -light/-deep son las paradas del degradado de la barra; -bg/-bg-deep/-border/
       -text/-icon visten la tarjeta del panel. Antes se usaban SIN definir (var(--gold)
       vacia invalidaba el degradado) o como hex literal en los .razor.css (H-GUARD1). */
    --gold:         #D9A425;
    --gold-light:   #F0CC5E;
    --gold-deep:    #E0B23F;
    --gold-bg:      #FEF3C7;
    --gold-bg-deep: #FDE68A;
    --gold-border:  #F59E0B;
    --gold-text:    #92400E;
    --gold-icon:    #D97706;

    /* Fondos tintados de estado (chips/badges de los drawers) — antes vivian como
       fallback hex en los .razor.css (var(--success-bg, #dcfce7)); el color efectivo
       era siempre el fallback, nunca un token. */
    --success-bg:   #DCFCE7;
    --warn-bg:      #FEF9C3;
    --error-bg:     #FEF2F2;

    /* Tinta sobre tinte: texto legible (AA >=4.5) sobre los fondos tintados al 12-14%
       de los chips de estado. El token pleno de arriba se queda para texto sobre blanco,
       iconos y rellenos; estos son SOLO para fondo tintado (T-039). Ratio peor caso sobre
       blanco/crema/lienzo: success 5.56, warning 4.70, info 5.83. --warning-ink es el
       mismo ambar que el banner de T-017 ya usa sobre tinte. */
    --success-ink: #0B6449;
    --warning-ink: #8A5510;
    --info-ink:    #215681;

    /* === NEM · Campos Formativos ========================================== */
    --cf-lenguajes:     #DB2777;
    --cf-lenguajes-bg:  #FCE7F3;
    --cf-lenguajes-ink: #9D1B57; /* 6.55:1 sobre --cf-lenguajes-bg */
    --cf-saberes:       #0891B2;
    --cf-saberes-bg:    #CFFAFE;
    --cf-saberes-ink:   #0A5F74; /* 6.46:1 sobre --cf-saberes-bg */
    --cf-etica:         #D97706;
    --cf-etica-bg:      #FEF3C7;
    --cf-etica-ink:     #8A4E04; /* 5.95:1 sobre --cf-etica-bg */
    --cf-humano:        #059669;
    --cf-humano-bg:     #D1FAE5;
    --cf-humano-ink:    #046A4B; /* 5.84:1 sobre --cf-humano-bg */

    /* === Tipos de Proyecto ================================================ */
    --t-nem:      #D97706;
    --t-pmc:      #7C3AED;
    --t-evento:   #DB2777;
    --t-concurso: #DC2626;
    --t-comite:   #2563EB;
    --t-proceso:  #6B7280;

    /* === SHADOWS ========================================================== */
    --shadow-sm: 0 1px 2px  rgba(26, 28, 31, 0.04), 0 1px 3px rgba(26, 28, 31, 0.06);
    --shadow-md: 0 4px 12px rgba(26, 28, 31, 0.08), 0 2px 4px rgba(26, 28, 31, 0.04);
    --shadow-lg: 0 12px 32px rgba(26, 28, 31, 0.12), 0 4px 8px rgba(26, 28, 31, 0.06);

    /* === RADIUS =========================================================== */
    --radius-sm:  6px;
    --radius-md:  9px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-2xl: 22px;

    /* === Z-INDEX (extra para layout fixed) ================================ */
    --z-rail:    50;
    --z-sidebar: 40;
    --z-aside:   30;
    --z-overlay: 1000;

    /* === LAYOUT · Shell v3 (Home v3 F1) =================================== */
    /* Anchos del sidebar unico y easing estandar. Antes estaban hardcodeados
       y triplicados en MainLayout.razor.css + sidebar-collapse.css. */
    --sidebar-w:           264px;
    --sidebar-w-collapsed: 68px;
    --ease:                cubic-bezier(.4, 0, .2, 1);

    /* === Tipografía referencias =========================================== */
    --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
    --font-sans:  "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
    --font-icon:  "Material Symbols Rounded";

    /* === CALENDARIO (familias T-028) ======================================
       6 familias de tipo de evento (el color codifica familia, el icono el
       tipo exacto dentro de ella). Ratios medidos con script WCAG sobre
       blanco / su tinte / --bg-cream — ver docs/agentes/backlog/T-028-*.md. */
    --ev-nc:#334155;    --ev-nc-bg:#E2E8F0;    /* No hay clases     — slate   10.4 / 8.4 / 9.7 */
    --ev-ciclo:#14676B; --ev-ciclo-bg:#E8F4F8; /* Ciclo escolar     — teal     6.6 / 5.9 / 6.2 */
    --ev-eval:#6D28D9;  --ev-eval-bg:#EDE9FE;  /* Evaluacion        — violet   7.1 / 6.0 / 6.6 */
    --ev-cte:#4338CA;   --ev-cte-bg:#E0E7FF;   /* Consejo tecnico   — indigo   7.9 / 6.4 / 7.4 */
    --ev-tram:#9A4A08;  --ev-tram-bg:#FEF3C7;  /* Tramites          — amber    6.3 / 5.6 / 5.9 */
    --ev-com:#03684B;   --ev-com-bg:#D1FAE5;   /* Comunidad escolar — emerald  6.8 / 6.0 / 6.4 */

    /* === RUEDA DE COLORES POR CLASE (H7, A2.7b) — tokens --clase-1..8 === */
    /* Autorizados en tokens.css (excluido del guard de paleta). */
    --clase-1: #2C6D6F;  /* teal profundo    */
    --clase-2: #6D28D9;  /* violeta          */
    --clase-3: #2D6EA3;  /* azul             */
    --clase-4: #03684B;  /* verde esmeralda  */
    --clase-5: #9A4A08;  /* ambar oscuro     */
    --clase-6: #4338CA;  /* indigo           */
    --clase-7: #A52A5F;  /* frambuesa        */
    --clase-8: #7A5C10;  /* oliva dorado     */

    /* === Avatar de la Casa (T-089) ======================================= */
    --avatar-radius: 50%;
    --av-1-from: #2C8088; --av-1-to: #1D545A;  /* teal      blanco 4.62 / 8.51 */
    --av-2-from: #B049BD; --av-2-to: #893593;  /* orquidea  blanco 4.63 / 7.01 */
    --av-3-from: #9E6A33; --av-3-to: #704B24;  /* arena     blanco 4.60 / 7.72 */
    --av-4-from: #498232; --av-4-to: #305621;  /* hoja      blanco 4.64 / 8.47 */
    --av-5-from: #BD525E; --av-5-to: #983A44;  /* granate   blanco 4.63 / 6.94 */
    --av-6-from: #5E70C1; --av-6-to: #3F51A3;  /* indigo    blanco 4.60 / 7.20 */
    --av-7-from: #837432; --av-7-to: #574D21;  /* mostaza   blanco 4.66 / 8.44 */
    --av-8-from: #318071; --av-8-to: #20544A;  /* jade      blanco 4.71 / 8.65 */
    --av-tint-bg: #E8F4F8; --av-tint-ink: #215A5E;  /* tinte: 6.96 sobre su fondo, 7.81 sobre blanco */

  /* Alias del frente Horario (16-sep-2026): los .razor.css de Components/Horario los usaban sin que
     existieran y un var() indefinido invalida la declaracion completa (el drawer de sesion salia
     transparente en prod). Canon de la casa entre parentesis; NO usar los alias en codigo nuevo. */
  --bg-base:   var(--bg);            /* canon: --bg */
  --bg-hover:  var(--bg-cream);      /* canon: --bg-cream */
  --error:     var(--danger);        /* canon: --danger */
  --shadow-xl: var(--shadow-lg);     /* canon: --shadow-lg */
  --t-fast:    150ms;                /* duraciones de transicion del frente */
  --t-normal:  220ms;
  --t-slow:    320ms;

  /* === RECONOCER v2 (2026-10-09) ======================================= */
  /* Halo del sello (= --gold #D9A425 al 28 %), velo del drawer y sombra del pie fijo.
     Solo alfa sobre colores ya existentes: ningun hex de marca nuevo (PaletaTokensGuardTests). */
  --rc-glow:        rgba(217, 164, 37, .28);
  --rc-scrim:       rgba(20, 22, 25, .45);
  --rc-tray-shadow: 0 -6px 20px rgba(26, 28, 31, .08);
}