/* ==========================================================================
   kipu-tokens.css — Fuente única de la identidad visual en la web
   Kipu Anima'l Labs Co.

   Autoridad: "V 4 Kipu_Manual_Identidad_Visual_Activos.pdf" (28 ago 2026)
              + "PALETA DE COLORES.docx" (19 ago 2026), que define los 6
              colores del sistema — el V_4 solo reproduce 4 de ellos.

   Antes de este archivo, las 8 páginas repetían su propia paleta en línea y
   ya habían divergido entre sí (dos valores distintos para la misma
   superficie, tokens presentes en unas páginas y ausentes en otras).
   Cualquier cambio de marca se hace AQUÍ y en ningún otro lugar.

   Detalle y trazabilidad: docs/08_IDENTIDAD_VISUAL.md
   ========================================================================== */

:root{

  /* --- 1. Colores oficiales de marca -------------------------------------
     Estos seis son los únicos valores con respaldo documental. No se
     modifican sin emitir una nueva versión del manual. */

  --kipu-azul-marino:      #0A1C3A;  /* rigor corporativo — color ancla */
  --kipu-verde-pistacho:   #8EBF3F;  /* naturaleza / principio activo */
  --kipu-verde-menta:      #CDE6C7;  /* soportes y fondos */
  --kipu-beige-calido:     #E5D9C5;  /* tono neutro papel */
  --kipu-espresso:         #3D271D;  /* textos extensos, en vez de negro */
  --kipu-dorado:           #D4AF37;  /* línea premium: acentos y sellos */

  /* --- 2. Alias semánticos en uso ----------------------------------------
     Los nombres que ya consumen las páginas. Apuntan a los oficiales, así
     que el marcado existente no requiere reescritura. */

  --navy:       var(--kipu-azul-marino);
  --green:      var(--kipu-verde-pistacho);
  --green-tint: var(--kipu-verde-menta);
  --beige:      var(--kipu-beige-calido);
  --gold:       var(--kipu-dorado);

  /* --- 3. Derivados funcionales ------------------------------------------
     NO son colores de marca: existen porque la interfaz necesita estados y
     jerarquía que el manual no cubre. Todos verificados contra WCAG 2.1 AA.  */

  --green-dark: #5E7A22;  /* verde legible como texto: 4.90:1 sobre blanco  */
  --text:       #1F2A24;  /* cuerpo de texto:         14.84:1 sobre blanco  */
  --muted:      #5B6B6B;  /* texto secundario:         5.58:1 sobre blanco  */
  --faint:      #6E7673;  /* texto terciario:          4.66:1 sobre blanco
                             (antes #8A9490 = 3.13:1, no cumplía en textos
                             pequeños; se oscureció conservando el matiz)   */
  --border:     #D9DCD6;
  --surface:    #F9F9F9;  /* unificado: convivían #F5F5F5 y #F9F9F9         */
  --surface-alt:#F7FAF2;
  --fondo:      #FFFFFF;   /* lienzo de página */

  /* Estados */
  --danger:     #B3261E;
  --stock-ok:   #0F6E56;
  --amber:      #F0C97A;
  --amber-bg:   #FAEEDA;
  --amber-text: #633806;
  --info-bg:    #FFFAED;
  --info-border:#F0E4B8;
  --badge-bg:   #E1F5EE;
  --promo-bg:   #FFFAED;
  --promo-border:#F0E4B8;

  /* --- 4. Tipografía -----------------------------------------------------
     El manual exige Poppins en Light, Regular, Medium, Bold y Black. */

  --font-base: 'Poppins', Arial, Helvetica, sans-serif;

  /* --- 5. Logotipo -------------------------------------------------------
     Altura del imagologo en la barra superior y su área de respeto. */

  --logo-isotipo:  34px;   /* huella: bloque cuadrado                     */
  --logo-wordmark: 19px;   /* nombre en una línea, legible a este tamaño  */
  --logo-respeto:  10px;   /* separación entre isotipo y nombre           */
}

/* ==========================================================================
   REGLAS DE USO VERIFICADAS — no son preferencias estéticas, son límites
   de accesibilidad medidos sobre la paleta oficial.

   1. El Verde Pistacho NUNCA lleva texto blanco encima.
        blanco sobre #8EBF3F .......  2.17:1   no cumple (mínimo 4.5:1)
        Azul Marino sobre #8EBF3F ..  7.80:1   correcto
      Por eso .btn-verde fija el texto en Azul Marino.

   2. El Dorado NUNCA se usa como texto sobre fondo claro.
        #D4AF37 sobre blanco .......  2.10:1   no cumple
        #D4AF37 sobre Azul Marino ..  8.05:1   correcto
      En claro sirve como filete, borde o sello, no como texto.

   3. Combinaciones seguras sobre los fondos de marca:
        Azul Marino sobre Verde Menta .. 12.69:1
        Azul Marino sobre Beige ........ 12.15:1
        blanco sobre Azul Marino ....... 16.93:1
   ========================================================================== */

.btn-verde{
  background: var(--green);
  color: var(--navy);          /* regla 1: nunca blanco */
  border: none;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Barra superior y bloque de marca, idénticos en las 8 páginas.
   Antes el logo era un <div> circular de relleno y su tamaño divergía
   (28px en siete páginas, 26px en el panel administrativo). */
header{
  background: var(--navy);
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  justify-content: space-between;
}
header .brand{
  display: flex;
  align-items: center;
  gap: var(--logo-respeto);
}
/* Texto que acompaña al logotipo nombrando la sección ("Panel de revisión",
   "Encuesta"). El nombre de la marca lo aporta el logotipo, nunca este span. */
header .brand span{
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-left: 1px solid rgba(255,255,255,.25);
  padding-left: 12px;
  margin-left: 2px;
}
/* El imagologo horizontal en una sola pieza obliga a que "Anima'l Labs"
   quede ilegible en una barra de 64px. Se compone con los dos activos
   oficiales por separado, cada uno a su escala legible. */
header .brand img.mark{
  height: var(--logo-isotipo);
  width: auto;
  display: block;
}
header .brand img.wordmark{
  height: var(--logo-wordmark);
  width: auto;
  display: block;
}
header .actions{
  color: #fff;
  font-size: 13px;
  display: flex;
  gap: 16px;
  align-items: center;
}
header .actions button{
  background: none;
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ==========================================================================
   TEMA OSCURO
   Los colores de marca no cambian: cambian los roles de superficie y texto.
   El Verde Pistacho conserva 7,80:1 contra el Azul Marino, así que sigue
   sirviendo de acento en ambos temas.
   ========================================================================== */

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --text:        #E8EFE9;
    --muted:       #A9BAB0;
    --faint:       #8A9C93;
    --border:      #23394B;
    --surface:     #12202E;
    --surface-alt: #16283A;
    --fondo:       #0B1521;
    --green-dark:  #A8CF5E;   /* aclarado: 4,90:1 no alcanza sobre fondo oscuro */
    --green-tint:  #1D3A32;
    --beige:       #2B2A24;
    --amber-bg:    #33291A;
    --amber-text:  #F0C97A;
    --info-bg:     #2A2519;
    --info-border: #4A4126;
    --badge-bg:    #14302A;
    --promo-bg:    #2A2519;
    --promo-border:#4A4126;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --text:        #E8EFE9;
  --muted:       #A9BAB0;
  --faint:       #8A9C93;
  --border:      #23394B;
  --surface:     #12202E;
  --surface-alt: #16283A;
  --fondo:       #0B1521;
  --green-dark:  #A8CF5E;
  --green-tint:  #1D3A32;
  --beige:       #2B2A24;
  --amber-bg:    #33291A;
  --amber-text:  #F0C97A;
  --info-bg:     #2A2519;
  --info-border: #4A4126;
  --badge-bg:    #14302A;
  --promo-bg:    #2A2519;
  --promo-border:#4A4126;
}