/* ═══════════════════════════════════════════════════════════
   KUMO — Tokens de diseño (TEMA PROVISORIO "prototipo")
   ⚠ DISEÑO DEFINITIVO EN PAUSA (lo está terminando Rurú).
   Este tema replica EXACTO el look del prototipo aprobado:
   legacy/Kumo - Tienda (11).html → fondo negro con textura,
   acento amarillo #FFDD00, tarjetas #181816. Del diseño nuevo
   solo se conserva el ISOTIPO Kumo.
   ÚNICA fuente de verdad de colores/tipos/espaciados: ningún
   otro archivo debe inventar colores, siempre var(--…).
   Usado por: todas las apps (tienda, panel, admin).
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Kumo es tema oscuro: avisarle al navegador hace que TODOS los
     controles nativos se dibujen en oscuro — las flechitas de subir/
     bajar de los campos numéricos (que salían como cuadraditos
     blancos), las barras de scroll y los selectores de fecha. */
  color-scheme: dark;

  /* Checkboxes y radios son del navegador — sin esto, "dark" arriba
     los pinta como un cuadrado negro que sobre cualquier fondo
     oscuro se pierde. accent-color les da el color de marca al
     tildarse y un contorno que se nota incluso sin marcar. */
  accent-color: var(--ac);

  /* ── Paleta de marca Kumo (legacy/DocPalette.xml) ──
     Los seis colores del manual, tal cual:
       #1D3552 azul oscuro   #305282 azul medio   #98AFC7 azul claro
       #F8AD7C durazno       #C96969 coral        #E9ECEF casi blanco
     El amarillo de antes era de Estudio 505, no de Kumo — se fue.

     Cómo se reparten: el AZUL manda (fondos, superficies y acento) y
     el DURAZNO puntúa los detalles que tienen que saltar.
     ⚠ Del azul, el único que se lee sobre fondo oscuro es el CLARO
     (#98AFC7, 8.4:1). El medio y el oscuro sirven de fondo, nunca de
     texto: #305282 sobre el fondo da 2.4:1 y no se leería. */
  /* El NARANJA ocupa el lugar que tenía el amarillo: botones, íconos
     y todo lo que marca una acción. Es el durazno del manual llevado
     a su versión intensa — mismo tono, mucha más fuerza, porque el
     durazno sobre fondo oscuro se veía pastel y no marcaba nada.
     El azul no desaparece: manda en el fondo, las superficies, los
     bordes y el texto secundario. */
  --detalle:       #FF7A18;   /* naranja intenso */
  --detalle-suave: rgba(255, 122, 24, 0.14);
  --detalle-borde: rgba(255, 122, 24, 0.38);

  --ac:           var(--detalle);   /* acento de acción: botones e íconos */
  --ac-hover:     #FF9440;
  --ac-suave:     var(--detalle-suave);
  --ac-borde:     var(--detalle-borde);
  --sobre-ac:     #2A1608;   /* texto sobre el durazno (marrón muy oscuro) */

  /* El azul claro del manual, para lo informativo y los detalles fríos */
  --azul-claro:   #98AFC7;

  --fondo:        #0B1220;   /* fondo general (azul casi negro) */
  --superficie-1: #121C2B;   /* tarjetas */
  --superficie-2: #1A2739;   /* inputs, segundas capas */
  --borde:        #24334A;   /* bordes de tarjetas e inputs */

  /* ── Textos ── */
  --texto-1: #E9ECEF;        /* principal (el casi blanco de la paleta) */
  --texto-2: #93A3B8;        /* secundario (azulado, 6.2:1 sobre el fondo) */
  --texto-3: #5A6B82;        /* terciario / placeholders apagados */

  /* ── Identidad Kumo (isotipo y detalles de marca) ── */
  --kumo-azul-oscuro: #1D3552;
  --kumo-azul-medio:  #305282;
  --kumo-azul-claro:  #98AFC7;
  --kumo-durazno:     #F8AD7C;
  --kumo-coral:       #C96969;
  --kumo-claro:       #E9ECEF;
  --kumo-azul:        #1D3552;   /* nombre viejo, se conserva por compatibilidad */

  /* ── Semánticos (los componentes usan SIEMPRE estos) ── */
  --color-texto:        var(--texto-1);
  --color-texto-suave:  var(--texto-2);
  --color-fondo:        var(--fondo);
  --color-superficie:   var(--superficie-1);
  --color-borde:        var(--borde);
  --color-primario:     var(--ac);
  --color-acento:       var(--ac);

  /* Estados (sobre fondo oscuro) — la alerta pasa a durazno y el
     error a coral, los dos de la paleta. El verde de éxito no está
     en el manual pero se queda: es el único que se lee como "salió
     bien" sin explicación. */
  --exito:        #6FD79A;
  --exito-suave:  rgba(111, 215, 154, 0.12);
  --alerta:       var(--detalle);
  --alerta-suave: var(--detalle-suave);
  --error:        #E08585;   /* coral de la paleta, aclarado para que se lea */
  --error-suave:  rgba(201, 105, 105, 0.16);
  --info:         var(--azul-claro);
  --info-suave:   rgba(152, 175, 199, 0.14);

  /* ── Fondo de página: velo oscuro sobre la foto de fondo
       (assets/Fondo-nuevo.png) — sin esto, el texto claro pierde
       contraste en las zonas donde no hay ninguna tarjeta encima
       (ej: títulos de página). Reemplaza la textura de microcemento
       del prototipo original. ── */
  --fondo-pagina: linear-gradient(rgba(6, 10, 18, 0.65), rgba(6, 10, 18, 0.65));

  /* ── Glass oscuro (header, drawer, modales) ── */
  --glass-fondo:        rgba(8, 13, 22, 0.8);
  --glass-fondo-fuerte: rgba(8, 13, 22, 0.9);
  --glass-borde:        rgba(255, 255, 255, 0.08);
  --glass-blur:         blur(24px);

  /* ── VIDRIO — tarjetas translúcidas ──
     Blanco muy tenue, NO negro: un vidrio hecho con negro
     semitransparente apaga el color que tiene detrás y termina
     leyéndose como un panel gris. Con blanco bajo + blur + saturate,
     la tarjeta toma el color del fondo y ahí sí parece vidrio.
     Vive acá (y no en cada hoja) porque lo usan Tienda, Panel y Admin. */
  --vidrio:        rgba(255, 255, 255, 0.07);
  --vidrio-fuerte: rgba(255, 255, 255, 0.11);
  --vidrio-borde:  rgba(255, 255, 255, 0.14);
  --vidrio-luz:    rgba(255, 255, 255, 0.25);   /* brillo del borde de arriba */
  --vidrio-blur:   blur(26px) saturate(170%);
  /* Alcance corto a propósito (6+22 = 28px): adentro de un carrusel o
     una columna con scroll, todo lo que sobresale se recorta, y una
     sombra larga se corta de golpe dejando una línea visible. */
  --vidrio-sombra: 0 6px 22px rgba(0, 0, 0, 0.32);

  /* Dos niveles de tinte naranja: mismo vidrio, dos intensidades —
     así se puede armar una jerarquía visual (esto importa más que
     aquello) sin salirse del efecto. Los dos son degradados, no un
     color plano: sobre una superficie grande un tinte parejo se ve
     como un fondo de color, no como vidrio.

     ACENTO FUERTE — lo más importante de la pantalla, un solo
     elemento por vista (ej. "Para entregar hoy" del Dashboard).
     Bajado un escalón (era 0.40→0.16): quedaba demasiado intenso
     para algo que hay que mirar seguido, no solo de un vistazo. */
  --vidrio-acento-fuerte:       linear-gradient(160deg, rgba(255, 122, 24, 0.28), rgba(196, 68, 9, 0.11));
  --vidrio-acento-fuerte-borde: rgba(255, 122, 24, 0.42);
  --vidrio-acento-fuerte-luz:   rgba(255, 183, 134, 0.38);

  /* ACENTO (suave) — lo secundario pero activo: destacado sin
     competir con lo anterior (ej. las tarjetas de "hoy" del
     Dashboard, o las que ya se marcaban con la clase .stat-ac). */
  --vidrio-acento:       linear-gradient(160deg, rgba(255, 122, 24, 0.20), rgba(255, 122, 24, 0.06));
  --vidrio-acento-borde: rgba(255, 122, 24, 0.32);
  --vidrio-acento-luz:   rgba(255, 183, 134, 0.35);

  /* Manchas de marca que van detrás del vidrio: sin algo con color
     abajo, el desenfoque no muestra nada y las tarjetas se ven grises. */
  --manchas-marca:
    radial-gradient(58% 50% at 10% 12%, rgba(248, 173, 124, 0.20), transparent 68%),
    radial-gradient(52% 46% at 90% 26%, rgba(201, 105, 105, 0.18), transparent 68%),
    radial-gradient(64% 56% at 46% 96%, rgba(48, 82, 130, 0.52), transparent 70%),
    radial-gradient(36% 34% at 80% 76%, rgba(152, 175, 199, 0.12), transparent 68%);

  /* ── Tipografía: genérica del sistema (provisoria) ── */
  --fuente-titulos: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fuente-texto:   -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --texto-xs:  0.75rem;
  --texto-s:   0.8125rem;   /* 13px: el tamaño base del prototipo */
  --texto-m:   0.875rem;
  --texto-l:   1.125rem;
  --texto-xl:  1.375rem;    /* títulos de sección (22px) */
  --texto-2xl: 1.75rem;
  --texto-hero: 2.5rem;     /* títulos de banner (40px) */

  /* ── Espaciado (escala de 4px) ── */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;

  /* ── Radios (los del prototipo) ── */
  --radio-s:  8px;
  --radio-m:  10px;
  --radio-l:  14px;
  --radio-xl: 20px;
  --radio-pastilla: 999px;

  /* ── Ancho máximo del contenido (el prototipo usa 1440) ── */
  --max-ancho: 1440px;

  /* ── Sombras ── */
  --sombra-1: 0 2px 10px rgba(0, 0, 0, 0.3);
  --sombra-2: 0 10px 35px rgba(0, 0, 0, 0.4);
  --sombra-3: 0 12px 40px rgba(0, 0, 0, 0.5);

  /* ── Transiciones ── */
  --transicion: 160ms ease;
}