/* ============================================================
   Sistema de marca AM:PM — tokens
   Derivado de "Manual de marca AMPM- V2.pdf" [Standard] y del
   archivo logo-ampm.png. El razonamiento está en marca/MARCA.md.
   No editar valores de marca aquí sin actualizar ese documento.
   ============================================================ */

:root {
  /* --- Paleta oficial V2 [Standard] -------------------------- */
  --ampm-noche:          #11284a;  /* anclaje azul profundo      */
  --ampm-azul:           #003da6;  /* PANTONE 293 C              */
  --ampm-azul-claro:     #0055ba;  /* PANTONE 2935 C             */
  --ampm-naranja-hondo:  #e87200;  /* PANTONE 152 C              */
  --ampm-naranja:        #ff8300;  /* PANTONE 151 C              */
  --ampm-ambar:          #ffa400;  /* PANTONE 137 C              */

  /* --- Medido sobre el logotipo ------------------------------ */
  --ampm-sol:            #f26c25;  /* naranja del sol y de "am"  */
  --ampm-luna:           #1b2844;  /* azul de la luna y de "pm"  */

  /* --- Heredado del manual V1 (referencia, no primario) ------- */
  --ampm-v1-rojo:        #ef4123;  /* PANTONE 180 C              */
  --ampm-v1-tinta:       #04003f;  /* PANTONE 282 C              */

  /* --- Tipografía -------------------------------------------- */
  /* APEX NEW es la corporativa; no está licenciada en esta
     máquina. Si se instala, entra sola por ser la primera.      */
  --fuente: "Apex New", "Archivo", "Segoe UI Variable Text",
            "Segoe UI", system-ui, -apple-system, sans-serif;
  --fuente-mono: "Cascadia Mono", "Consolas", ui-monospace, monospace;

  /* --- Zona de protección del logotipo ------------------------
     V1: el área libre equivale a la altura de la letra "a".
     Medida sobre el archivo, la "a" es 0.29 del alto total.     */
  --logo-alto: 34px;
  --logo-zona-proteccion: calc(var(--logo-alto) * 0.29);

  /* --- Colores de dato ---------------------------------------
     No son colores de identidad: son semántica de negocio, y por eso salen
     del sistema de marca. Pérdida en rojo e ingreso en verde es convención
     financiera universal; leerlos al revés sería un error de lectura, no de
     estilo. El rojo es el PANTONE 180 C del manual V1, así que ni eso es
     ajeno a la marca.
     Todos superan 3:1 contra el fondo de su modo, que es lo que WCAG pide
     para un gráfico con significado.                                       */
  --dato-perdida: #ef4123;   /* PANTONE 180 C — merma, caída            */
  --dato-ingreso: #0e8a5f;   /* comisiones, ingreso                     */
  --dato-mezcla:  #003da6;   /* PANTONE 293 C — venta cruzada           */
  --dato-alerta:  #c25e00;   /* ámbar oscurecido para que lea en claro  */

  /* --- Escala y ritmo ---------------------------------------- */
  --radio: 14px;
  --radio-chico: 8px;
  --paso: 8px;
  --ancho-max: 1320px;
  --transicion: 220ms cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
   MODO AM — el día. Fondo claro, tinta azul noche, sol naranja.
   ============================================================ */
:root,
:root[data-modo="am"] {
  --fondo:          #f6f7f9;
  --fondo-veteado:  #eceff3;
  --superficie:     #ffffff;
  --superficie-alt: #f2f4f7;
  --borde:          #dde2ea;
  --borde-fuerte:   #c3ccda;
  --tinta:          var(--ampm-noche);
  --tinta-suave:    #4a5c78;
  --tinta-tenue:    #616e87;   /* AA en texto chico, también sobre el fondo */
  --acento:         var(--ampm-sol);
  --acento-hondo:   var(--ampm-naranja-hondo);
  --enlace:         var(--ampm-azul);
  --sombra:         0 1px 2px rgba(17, 40, 74, .06),
                    0 8px 24px -12px rgba(17, 40, 74, .18);
  --sombra-alta:    0 2px 4px rgba(17, 40, 74, .08),
                    0 24px 48px -20px rgba(17, 40, 74, .30);
  /* Ruta absoluta a propósito: dentro de una custom property el navegador
     resuelve url() contra el documento, no contra esta hoja. */
  --logo: url("/marca/logo-ampm.png");
  --halo: radial-gradient(900px 420px at 12% -12%,
                          rgba(242, 108, 37, .13), transparent 62%),
          radial-gradient(760px 380px at 92% -6%,
                          rgba(0, 61, 166, .09), transparent 60%);
}

/* ============================================================
   MODO PM — la noche. Fondo azul profundo, marca invertida.
   ============================================================ */
:root[data-modo="pm"] {
  --fondo:          #0b1a30;
  --fondo-veteado:  #0e2039;
  --superficie:     #14294a;
  --superficie-alt: #1a3157;
  --borde:          #24406b;
  --borde-fuerte:   #35578a;
  --tinta:          #eef3fa;
  --tinta-suave:    #a9bbd6;
  --tinta-tenue:    #8ba0c4;   /* 5.3:1 sobre superficie — AA en texto chico */
  --acento:         var(--ampm-ambar);
  --acento-hondo:   var(--ampm-naranja);
  --enlace:         #78a9ff;
  --sombra:         0 1px 2px rgba(0, 0, 0, .40),
                    0 8px 24px -12px rgba(0, 0, 0, .60);
  --sombra-alta:    0 2px 4px rgba(0, 0, 0, .45),
                    0 24px 48px -20px rgba(0, 0, 0, .70);
  --logo: url("/marca/logo-ampm-invertido.png");

  /* Los colores de dato se aclaran sobre el azul profundo: los tonos que
     leen en claro se apagan en oscuro, y al revés. */
  --dato-perdida: #ff6b4a;
  --dato-ingreso: #34c98d;
  --dato-mezcla:  #78a9ff;
  --dato-alerta:  #ffa400;
  --halo: radial-gradient(900px 420px at 12% -12%,
                          rgba(255, 164, 0, .12), transparent 62%),
          radial-gradient(760px 380px at 92% -6%,
                          rgba(0, 85, 186, .18), transparent 60%);
}