/* ==========================================================================
   KVtools · TEMA (paleta + tokens de diseño)  ·  Design System 2026
   --------------------------------------------------------------------------
   ESTE ES EL ÚNICO ARCHIVO QUE HAY QUE TOCAR PARA RE-BRANDEAR.
   Aquí viven TODOS los colores, radios, sombras, tipografía y espaciados
   como variables CSS (custom properties). styles.css, portal.css, admin.css
   y los <style> de cada página consumen SOLO estas variables: cero colores
   hardcodeados fuera de aquí.

   Cómo cambiar la marca:
     · Color principal (acción/CTA)  -> --kv-naranja (+ -oscuro / -claro)
     · Color institucional (enlaces) -> --kv-azul    (+ -oscuro / -claro)
     · Fondos y superficies          -> grupo "Fondo y superficies"
     · Texto                         -> grupo "Texto"
     · Estados (semáforo)            -> grupo "Estados"
   Cambia el valor y toda la UI se re-tematiza al instante.

   ORDEN DE CARGA: este archivo va SIEMPRE antes que styles.css.
     <link rel="stylesheet" href="tema.css">
     <link rel="stylesheet" href="styles.css">
   ========================================================================== */

:root {
  /* ======================================================================
     1) PALETA DE MARCA
     Naranja = acción / CTA.  Azul = institucional / enlaces.
     Las variantes -oscuro/-claro se usan en hover, fondos suaves y bordes.
     ====================================================================== */
  --kv-naranja:          #ff6a1a;
  --kv-naranja-oscuro:   #e85c10;
  --kv-naranja-claro:    #ff8a4d;
  --kv-naranja-suave:    #fff1e8;   /* fondo tenue de acento naranja */

  /* LEGIBILIDAD DEL NARANJA CUANDO HACE DE FONDO DE TEXTO BLANCO.
     El naranja de marca (#ff6a1a) con texto blanco da 2,87:1 de contraste; el
     minimo legible (WCAG AA, texto normal) es 4,5:1. Un mecanico con el movil
     al sol no lee «Entrar» ni «Abrir». La identidad NO cambia: #ff6a1a sigue
     siendo el naranja de la marca (logotipo, acentos, degradados, puntos); lo
     unico que se oscurece es el naranja que va DEBAJO de texto blanco, y solo
     lo justo. Mismo tono (matiz 21 grados), mas profundidad:
       --kv-naranja-cta         #c74a08  sobre blanco -> 4,76:1  (AA normal)
       --kv-naranja-cta-oscuro  #a93d05  sobre blanco -> 6,26:1  (hover, AAA)
     Oscurecer es OBLIGADO, no una preferencia: con el rojo a tope (R=255) el
     contraste frente al blanco no pasa de 4,0:1 ni siquiera en rojo puro
     (#ff0000), y cualquier naranja de verdad (G>=90) se queda por debajo de
     3,2:1. Para llegar a 4,5:1 el rojo tiene que bajar de 237. */
  --kv-naranja-cta:        #c74a08;
  --kv-naranja-cta-oscuro: #a93d05;

  --kv-azul:             #0947b3;
  --kv-azul-oscuro:      #073a93;
  --kv-azul-claro:       #2f6bd6;
  --kv-azul-suave:       #eaf1fc;    /* fondo tenue de acento azul */

  /* Acento secundario para gradientes/realces premium */
  --kv-acento:           #12b3a6;    /* teal técnico, sobrio y confiable */
  --kv-acento-suave:     #e3f7f5;

  /* ======================================================================
     2) FONDO Y SUPERFICIES
     ====================================================================== */
  --kv-fondo:            #f4f6fb;     /* lienzo de la app */
  --kv-fondo-hundido:    #eef1f8;     /* zonas hundidas (code, resúmenes) */
  --kv-superficie:       #ffffff;     /* tarjetas, inputs, modales */
  --kv-superficie-2:     #fbfcfe;     /* superficie alterna (filas zebra) */
  --kv-velo:             rgba(16, 24, 40, .55);  /* overlay de modales */

  /* Bordes */
  --kv-borde:            #e6e9f2;
  --kv-borde-fuerte:     #cfd6e4;
  --kv-borde-foco:       var(--kv-azul);

  /* ======================================================================
     3) TEXTO
     ====================================================================== */
  --kv-texto:            #161d29;
  --kv-texto-suave:      #56616f;
  --kv-texto-tenue:      #8a93a3;
  --kv-texto-invertido:  #ffffff;     /* texto sobre botones/fondos oscuros */

  /* ======================================================================
     4) ESTADOS (semáforo) — color, fondo suave y borde de cada estado
     ====================================================================== */
  --kv-verde:            #1f9d57;
  --kv-verde-oscuro:     #178048;
  --kv-verde-suave:      #e4f6ec;
  --kv-verde-borde:      rgba(31, 157, 87, .28);

  --kv-amarillo:         #b8860b;
  --kv-amarillo-suave:   #fdf3da;
  --kv-amarillo-borde:   rgba(184, 134, 11, .28);

  --kv-rojo:             #d23b3b;
  --kv-rojo-oscuro:      #b62f2f;
  --kv-rojo-suave:       #fbe7e7;
  --kv-rojo-borde:       rgba(210, 59, 59, .28);

  /* TEXTO DE LOS ESTADOS SOBRE SU PROPIO FONDO TENUE.
     Un color de estado que se lee bien como PUNTO o como BORDE no tiene por que
     leerse bien como TEXTO encima de su fondo pálido, y aquí no se leía:
       verde    #1f9d57 sobre #e4f6ec  ->  3,11:1
       amarillo #b8860b sobre #fdf3da  ->  2,95:1
       rojo     #d23b3b sobre #fbe7e7  ->  3,99:1
     El mínimo legible (WCAG AA, texto normal) es 4,5:1, y son etiquetas pequeñas
     —«Disponible», «Estás en un navegador normal…»— que el mecánico lee en el
     taller, muchas veces con el móvil al sol.
     Estos tres tonos son LOS MISMOS colores, solo más profundos, y se usan
     ÚNICAMENTE para el texto: el punto, el borde y el fondo de cada estado siguen
     con los colores de arriba, así que el semáforo se ve igual de lejos.
       --kv-verde-texto     #197e46 sobre #e4f6ec  ->  4,54:1
       --kv-amarillo-texto  #906909 sobre #fdf3da  ->  4,51:1
       --kv-rojo-texto      #c33737 sobre #fbe7e7  ->  4,51:1
     (El azul no necesita variante: #0947b3 sobre #eaf1fc ya da 7,21:1.) */
  --kv-verde-texto:      #197e46;
  --kv-amarillo-texto:   #906909;
  --kv-rojo-texto:       #c33737;

  /* Anillos de foco/realce derivados de la marca (un solo lugar) */
  --kv-foco-azul:        rgba(9, 71, 179, .35);
  --kv-foco-azul-suave:  rgba(9, 71, 179, .14);
  --kv-foco-naranja:     rgba(255, 106, 26, .30);
  --kv-foco-rojo:        rgba(210, 59, 59, .16);

  /* ======================================================================
     5) RADIOS (geometría)
     ====================================================================== */
  --kv-radio-xs:         6px;
  --kv-radio-chico:      9px;
  --kv-radio:            14px;
  --kv-radio-grande:     20px;
  --kv-radio-pildora:    999px;

  /* ======================================================================
     6) SOMBRAS (elevación) — sutiles, premium, sin "drop shadow" pesado
     ====================================================================== */
  --kv-sombra-xs:        0 1px 2px rgba(16, 24, 40, .05);
  --kv-sombra-suave:     0 1px 2px rgba(16, 24, 40, .05);
  --kv-sombra:           0 1px 2px rgba(16, 24, 40, .04),
                         0 8px 24px rgba(16, 24, 40, .06);
  --kv-sombra-media:     0 4px 10px rgba(16, 24, 40, .06),
                         0 14px 34px rgba(16, 24, 40, .09);
  --kv-sombra-grande:    0 10px 24px rgba(16, 24, 40, .10),
                         0 28px 60px rgba(16, 24, 40, .14);
  /* Sombra de color para CTAs (deriva del naranja de marca) */
  --kv-sombra-cta:       0 6px 16px rgba(255, 106, 26, .28);
  --kv-sombra-azul:      0 6px 16px rgba(9, 71, 179, .24);

  /* ======================================================================
     7) TIPOGRAFÍA — familias y escala
     ====================================================================== */
  --kv-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --kv-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
             "Liberation Mono", monospace;

  /* Escala tipográfica (rem) */
  --kv-fs-xs:            0.78rem;   /* 12.5px aprox */
  --kv-fs-sm:            0.875rem;  /* 14px */
  --kv-fs-base:         0.95rem;    /* 15px */
  --kv-fs-md:            1.0625rem; /* 17px */
  --kv-fs-lg:            1.35rem;   /* ~21px */
  --kv-fs-xl:            1.6rem;    /* ~25px */
  --kv-fs-2xl:           2rem;      /* 32px */

  /* Pesos */
  --kv-peso-medio:       500;
  --kv-peso-semi:        600;
  --kv-peso-bold:        700;
  --kv-peso-black:       800;

  --kv-interlineado:     1.55;
  --kv-tracking-titulo:  -0.01em;

  /* ======================================================================
     8) ESPACIADOS — escala consistente (usar en lugar de px sueltos)
     ====================================================================== */
  --kv-esp-1:            4px;
  --kv-esp-2:            8px;
  --kv-esp-3:            12px;
  --kv-esp-4:            16px;
  --kv-esp-5:            20px;
  --kv-esp-6:            24px;
  --kv-esp-8:            32px;
  --kv-esp-10:           40px;
  --kv-esp-12:           48px;

  /* Anchos de contenedor */
  --kv-cont:             1180px;
  --kv-cont-estrecho:    880px;

  /* ======================================================================
     9) MOVIMIENTO — curvas y duraciones (microinteracciones)
     ====================================================================== */
  --kv-trans-rapida:     .12s ease;
  --kv-trans:            .18s cubic-bezier(.4, 0, .2, 1);
  --kv-trans-lenta:      .28s cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   MODO OSCURO (opcional) — actívalo con  <html data-tema="oscuro">
   Solo redefine las variables; ningún componente necesita cambios.
   ========================================================================== */
:root[data-tema="oscuro"] {
  --kv-fondo:            #0f141d;
  --kv-fondo-hundido:    #0b0f17;
  --kv-superficie:       #161d29;
  --kv-superficie-2:     #1b2330;
  --kv-velo:             rgba(0, 0, 0, .62);

  --kv-borde:            #28313f;
  --kv-borde-fuerte:     #3a4453;

  --kv-texto:            #eef1f6;
  --kv-texto-suave:      #aab3c0;
  --kv-texto-tenue:      #7c8696;

  --kv-naranja-suave:    #2c1a0e;
  --kv-azul-suave:       #11203a;
  --kv-acento-suave:     #0c2422;

  --kv-verde-suave:      #122a1d;
  --kv-amarillo-suave:   #2c2410;
  --kv-rojo-suave:       #2c1414;

  /* En modo oscuro los fondos tenues son OSCUROS, así que el texto tiene que ir
     hacia el otro lado: oscurecerlo lo haría ilegible. Se vuelve al color vivo del
     estado, que sobre estos fondos sí contrasta. */
  --kv-verde-texto:      #4fd189;
  --kv-amarillo-texto:   #e0ad3a;
  --kv-rojo-texto:       #f08a8a;

  --kv-sombra-xs:        0 1px 2px rgba(0, 0, 0, .4);
  --kv-sombra-suave:     0 1px 2px rgba(0, 0, 0, .4);
  --kv-sombra:           0 1px 2px rgba(0, 0, 0, .4),
                         0 8px 24px rgba(0, 0, 0, .5);
  --kv-sombra-media:     0 4px 10px rgba(0, 0, 0, .45),
                         0 14px 34px rgba(0, 0, 0, .55);
  --kv-sombra-grande:    0 10px 24px rgba(0, 0, 0, .5),
                         0 28px 60px rgba(0, 0, 0, .6);
}