/* Montelva Suite — tokens del sistema de diseno.
 *
 * UNICO lugar donde vive un valor visual literal (N-46). Ningun modulo, y
 * ninguna otra hoja, define colores, tipografias ni espaciados propios.
 *
 * El modo oscuro es un cambio de variables, no una hoja paralela: un
 * componente que no funcione en ambos temas ha escrito un color a mano y
 * esta mal hecho. El tema activo lo decide `[data-tema]` en <html>
 * (suite.js aplicarTema/alternar-tema): claro por defecto salvo preferencia
 * del sistema u override manual guardado.
 *
 * Identidad visual v2.0 (10 de agosto de 2026, Montelva_Design_System_v2.md):
 * acento indigo, paleta de estado propia, densidad alta. Mismos nombres de
 * variable que ya consumian suite.css/suite.js -- solo cambian los valores
 * y se anaden los tokens que el documento distingue y aqui no existian.
 */
:root {
  /* Acento -- rampa completa, identica en ambos temas (solo cambian los
     alias primario/primario-fuerte/primario-suave, mas abajo por tema). */
  /* Estilo «sencillo y sofisticado» (13-oct-2026): azul de acento tipo
     Apple. Toda la rampa sigue siendo editable desde «Ajustes de la Suite». */
  --c-primario-50:  #f0f7ff;
  --c-primario-100: #e1effe;
  --c-primario-200: #b9dafd;
  --c-primario-300: #7fbcfb;
  --c-primario-400: #3f9bf7;
  --c-primario-500: #0a84ff;
  --c-primario-600: #0071e3;
  --c-primario-700: #0062c4;
  --c-primario-800: #00509f;
  --c-primario-900: #003e7a;

  /* Estado -- funcionales, no de marca: identicos en claro y oscuro. Cada
     uno con su fondo companero al 8% de opacidad, para badges/avisos. */
  --c-exito:      #248a3d;
  --c-exito-bg:   rgb(52 199 89 / .12);
  --c-aviso:      #b25000;
  --c-aviso-bg:   rgb(255 159 10 / .14);
  --c-peligro:    #d70015;
  --c-peligro-bg: rgb(255 59 48 / .10);
  --c-info:       #0071e3;
  --c-info-bg:    rgb(0 113 227 / .09);
  --c-morado:     #a855f7;
  --c-morado-bg:  rgb(168 85 247 / .08);
  --c-rosa:       #db2777;
  --c-rosa-bg:    rgb(219 39 119 / .08);
  --c-teal:       #14b8a6;
  --c-teal-bg:    rgb(20 184 166 / .08);

  /* Estado de oferta (DIA Manager) -- 9 colores, identicos en ambos temas.
     Los 5 "pdte-*" llevan ademas su fondo companero al 12% (badges: mas
     saturados que los de estado generico, para que se distingan de ellos
     a simple vista). */
  --c-pdte-aprobacion:    #c026d3;
  --c-pdte-aprobacion-bg: rgb(192 38 212 / .12);
  --c-pdte-sat:           #dc2626;
  --c-pdte-sat-bg:        rgb(220 38 38 / .12);
  --c-pdte-compra:        #db2777;
  --c-pdte-compra-bg:     rgb(219 39 119 / .12);
  --c-pdte-tracer:        #d97706;
  --c-pdte-tracer-bg:     rgb(217 119 6 / .12);
  --c-pdte-facturar:      #16a34a;
  --c-pdte-facturar-bg:   rgb(22 163 74 / .12);
  --c-facturada:          #64748b;
  --c-cancelado:          #94a3b8;
  --c-lanzado:            #0ea5e9;
  --c-enviado:            #0891b2;

  /* Color por modulo -- fijo, no cambia con el tema (icono/borde, nunca
     fondo pleno). */
  --c-modulo-portal: var(--c-primario-500);
  --c-modulo-dia:    var(--c-primario-600);
  --c-modulo-vp:     #0d9488;

  /* Superficies (claro) */
  --c-fondo:             #f5f5f7;
  --c-superficie-alta:   #fbfbfd;
  --c-superficie:        #ffffff;
  --c-superficie-sutil:  #f0f0f3;
  --c-superficie-entrada:#ffffff;
  --c-borde:             #d2d2d7;
  --c-borde-foco:        rgb(0 113 227 / .45);
  --c-borde-sutil:       #e8e8ed;
  --c-cabecera:          rgb(251 251 253 / .8);
  /* Fila "cerrada" de tabla (Ofertas facturadas): un escalon mas oscuro
     que --c-superficie a proposito, para el efecto visual de "ya no hay
     nada que hacer aqui" -- no es --c-borde (demasiado sutil) ni opacity
     (apagaria tambien el texto, .es-inactivo ya cubre ese caso para algo
     distinto: registros no vigentes, no "terminados"). */
  --c-superficie-cerrada:#e3e3e8;
  --c-texto:             #1d1d1f;
  --c-texto-suave:       #6e6e73;
  --c-texto-terciario:   #86868b;
  --c-texto-invertido:   #ffffff;
  --c-primario:          var(--c-primario-600);
  --c-primario-fuerte:   var(--c-primario-700);
  --c-primario-suave:    var(--c-primario-100);

  /* Tipografia -- misma pila de siempre (Geist queda fuera hasta tener
     ficheros .woff2 autoalojables; el fallback real ya es el del sistema). */
  /* La del sistema: San Francisco en Mac/iPhone, Segoe UI en Windows. */
  --f-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue",
            "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-2xs: .625rem;  --fs-xs: .75rem;   --fs-sm: .875rem;  --fs-base: 1rem;
  --fs-lg: 1.125rem; --fs-xl: 1.25rem;  --fs-2xl: 1.5rem; --fs-3xl: 1.875rem;
  --fw-normal: 400;  --fw-medio: 500;   --fw-semi: 600;   --fw-fuerte: 700;

  /* Espaciado — base 4px. --sp-0-5 rompe la base para vistas de detalle
     muy densas (paneles laterales): fila a fila, 4px ya separaba de mas. */
  --sp-0-5: .125rem;
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;  --sp-10: 2.5rem; --sp-12: 3rem;

  /* Formas */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 22px; --r-pill: 980px;
  --sh-sm:     0 1px 2px rgb(0 0 0 / .04), 0 1px 1px rgb(0 0 0 / .02);
  --sh-md:     0 4px 24px rgb(0 0 0 / .06), 0 1px 3px rgb(0 0 0 / .04);
  --sh-lg:     0 12px 40px rgb(0 0 0 / .10), 0 2px 8px rgb(0 0 0 / .04);
  --sh-acento: 0 8px 24px rgb(0 113 227 / .14);

  /* Movimiento -- rapido y funcional, sin decoracion. */
  --dur-instantaneo: 80ms;  --dur-rapido: 150ms;
  --dur-normal: 200ms;      --dur-lento: 300ms;
  --ease-defecto: cubic-bezier(.16, 1, .3, 1);
  --ease-entrada: cubic-bezier(0, 0, .2, 1);
  --ease-salida:  cubic-bezier(.4, 0, 1, 1);

  /* Movil e iOS (ADR-039): Apple pide al menos 44 pt para lo que se toca;
     un campo de menos de 16 px hace que Safari amplie la pagina al tocarlo
     (por eso los campos usan --fs-base en pantallas tactiles). */
  --toque-min: 44px;
  --casilla-tactil: 1.375rem;
  --ancho-lectura: 46rem;           /* textos largos: politica de privacidad */
  --alto-cabecera: 52px;            /* la cabecera translucida de suite.css */

  /* Capas */
  --z-desplegable: 100; --z-modal: 400; --z-aviso: 500;
  --c-superposicion: rgb(0 0 0 / .65);
}

[data-tema="oscuro"] {
  --c-fondo:              #000000;
  --c-superficie-alta:    #161617;
  --c-superficie:         #1c1c1e;
  --c-superficie-sutil:   #2c2c2e;
  --c-superficie-entrada: #1c1c1e;
  --c-borde:              #38383a;
  --c-borde-foco:         rgb(10 132 255 / .5);
  --c-borde-sutil:        #2c2c2e;
  --c-cabecera:           rgb(22 22 23 / .8);
  /* En oscuro "mas apagado" va hacia --c-fondo, no al reves -- entre
     fondo y superficie, no un tono de borde mas claro (leeria como
     resaltado, no como cerrado). */
  --c-superficie-cerrada: #111113;
  --c-texto:              #f5f5f7;
  --c-texto-suave:        #a1a1a6;
  --c-texto-terciario:    #6e6e73;
  --c-texto-invertido:    #ffffff;
  --c-primario:           var(--c-primario-500);
  --c-primario-fuerte:    var(--c-primario-400);
  --c-primario-suave:     rgb(10 132 255 / .18);
  --c-exito:              #30d158;
  --c-aviso:              #ff9f0a;
  --c-peligro:            #ff453a;
  --c-info:               #0a84ff;

  --sh-sm:     0 2px 8px rgb(0 0 0 / .15), 0 1px 3px rgb(0 0 0 / .10);
  --sh-md:     0 4px 16px rgb(0 0 0 / .20), 0 2px 6px rgb(0 0 0 / .12);
  --sh-lg:     0 8px 32px rgb(0 0 0 / .30), 0 4px 12px rgb(0 0 0 / .15);
  --sh-acento: 0 8px 24px rgb(10 132 255 / .16);
}