/* =============================================================================
   Tema de TechTailor.Web: la paleta del prototipo traducida a Metronic.

   Va DESPUÉS de metronic/css/style.bundle.css y hace tres cosas:

   1. Define los TOKENS del sitio (--tt-*), una vez por tema. Son los únicos
      colores escritos a mano en todo el sitio: cualquier componente que necesite
      un color lo pide aquí. Así el tema claro funciona sin que nadie repase el
      CSS de cada componente — el prototipo traía ~90 colores escritos directo y
      por eso no tenía tema claro.
   2. Traduce esos tokens a las variables --bs-* que usan Bootstrap 5.3 y Metronic,
      para que .btn-primary, .form-control, .card y compañía salgan con la marca.
   3. Corrige lo que Metronic fija para su Admin y no le sirve a un sitio público
      (la tipografía Inter que no cargamos y el body a 13px con !important).

   Oscuro es el tema por omisión (es el del prototipo); el claro no existía y se
   diseñó aquí: mismos acentos, fondos claros, y los acentos que se usan COMO TEXTO
   oscurecidos lo necesario para pasar AA (4.5:1) sobre blanco. Los rellenos de
   botón no cambian entre temas: el verde lleva texto oscuro (5.3:1) en los dos.

   Contrastes medidos (WCAG 2.x) sobre la superficie donde se usan:
     oscuro: texto 16.7, secundario 6.8, terciario 5.0, verde texto 7.3
     claro:  texto 16.4, secundario 7.3, terciario 5.4, verde texto 5.5, azul texto 5.8
   ========================================================================== */

/* ---------- tokens: oscuro (omisión) ---------- */
:root,
[data-bs-theme=dark] {
    color-scheme: dark;

    --tt-fondo: #0C0F13;
    --tt-fondo-rgb: 12, 15, 19;
    --tt-sup: #151A21;
    --tt-sup2: #1C232C;
    --tt-linea: #28313C;
    --tt-linea-fuerte: #3E4C5C;

    --tt-tx: #EAF0F6;
    --tt-tx-rgb: 234, 240, 246;
    --tt-tx2: #95A3B4;
    /* El prototipo usaba #5F6E7F: 3.4:1 sobre la superficie, abajo de AA para las
       leyendas chicas donde vive. Se sube lo justo para pasar. */
    --tt-tx3: #7D8B9C;

    --tt-verde: #00A650;
    --tt-verde2: #5ABD00;
    --tt-verde-texto: #5ABD00;
    --tt-sobre-verde: #04220F;
    --tt-verde-tenue: rgba(0, 166, 80, .12);

    --tt-azul: #2F7DF6;
    --tt-azul2: #1B5FD0;
    --tt-azul-texto: #5A97F8;
    --tt-azul-texto-rgb: 90, 151, 248;
    --tt-sobre-azul: #FFFFFF;
    --tt-azul-tenue: rgba(47, 125, 246, .14);

    --tt-alerta: #E0915A;
    --tt-error: #FF6B81;

    --tt-encabezado-bg: rgba(12, 15, 19, .92);
    --tt-flota-bg: rgba(21, 26, 33, .985);
    --tt-sombra: 0 8px 30px rgba(0, 0, 0, .45);
    --tt-sombra-flota: 0 16px 50px rgba(0, 0, 0, .72);

    /* El logo: el prototipo lo pintaba en blanco y gris fijos, que en claro no se ven. */
    --tt-logo-tx: #FFFFFF;
    --tt-logo-gris: #B9BBBD;

    /* La pantalla del equipo (877): el fondo de la tarjeta madre al centro del grafo y el
       del disipador que cuelga del procesador. En el prototipo iban escritos directo. */
    --tt-hub: #1F2833;
    --tt-sat: #171F2A;
    /* Las flechas de la orbital (wi 1250): iban en --tt-linea-fuerte, 2.2:1 sobre el fondo, y casi no se veían.
       4.9:1 sobre --tt-fondo y 4.5:1 sobre --tt-sup. */
    --tt-flecha: #71839A;
    /* Lo que va ENCIMA de una foto (la portada y la cabecera de cada categoría, 889): las fotos son de noche
       en los dos temas, así que el velo y su texto son oscuro y claro también en el tema claro. */
    --tt-foto-velo-rgb: 5, 7, 10;
    --tt-foto-tx: #EAF0F6;
    --tt-foto-tx2: #B4C0CD;

    /* La insignia del carrito en el encabezado: el rojo de toda tienda, igual en los dos temas.
       Blanco sobre #D92D3A da 4.8:1 (AA para el número chico y en negrita). */
    --tt-insignia: #D92D3A;
    --tt-sobre-insignia: #FFFFFF;
}

/* ---------- tokens: claro ---------- */
[data-bs-theme=light] {
    color-scheme: light;

    --tt-fondo: #F3F5F8;
    --tt-fondo-rgb: 243, 245, 248;
    --tt-sup: #FFFFFF;
    --tt-sup2: #EEF2F6;
    --tt-linea: #D5DCE4;
    --tt-linea-fuerte: #AEB9C6;

    --tt-tx: #11181F;
    --tt-tx-rgb: 17, 24, 31;
    --tt-tx2: #4A5868;
    --tt-tx3: #5E6B7B;

    /* Rellenos iguales que en oscuro; el verde como TEXTO sobre blanco daría 3.2:1. */
    --tt-verde: #00A650;
    --tt-verde2: #5ABD00;
    --tt-verde-texto: #007A3B;
    --tt-sobre-verde: #04220F;
    --tt-verde-tenue: rgba(0, 166, 80, .10);

    /* El azul de relleno baja a #1B5FD0 para que el texto blanco encima pase AA. */
    --tt-azul: #1B5FD0;
    --tt-azul2: #164FAD;
    --tt-azul-texto: #1B5FD0;
    --tt-azul-texto-rgb: 27, 95, 208;
    --tt-sobre-azul: #FFFFFF;
    --tt-azul-tenue: rgba(27, 95, 208, .10);

    --tt-alerta: #A0522D;
    --tt-error: #C4183C;

    --tt-encabezado-bg: rgba(255, 255, 255, .92);
    --tt-flota-bg: rgba(255, 255, 255, .985);
    --tt-sombra: 0 8px 30px rgba(16, 24, 40, .10);
    --tt-sombra-flota: 0 16px 50px rgba(16, 24, 40, .18);

    --tt-logo-tx: #11181F;
    --tt-logo-gris: #5E6B7B;

    --tt-hub: #E6ECF3;
    --tt-sat: #EAF1FD;
    /* El #7A8899 del prototipo daba 3.3:1 sobre el fondo claro; este, 4.6:1. */
    --tt-flecha: #627184;
    --tt-foto-velo-rgb: 5, 7, 10;
    --tt-foto-tx: #EAF0F6;
    --tt-foto-tx2: #B4C0CD;

    --tt-insignia: #D92D3A;
    --tt-sobre-insignia: #FFFFFF;
}

/* ---------- los tokens, traducidos a Bootstrap / Metronic ----------
   `:root[data-bs-theme]` pesa más que los `[data-bs-theme=…]` de Metronic, así que
   gana sin depender del orden de carga. Las variables se resuelven contra los tokens
   del tema activo, por eso esta traducción se escribe UNA vez para los dos temas. */
:root[data-bs-theme] {
    --tt-radio: 14px;

    --bs-font-sans-serif: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);

    --bs-body-bg: var(--tt-fondo);
    --bs-body-bg-rgb: var(--tt-fondo-rgb);
    --bs-app-bg-color: var(--tt-fondo);
    --bs-app-blank-bg-color: var(--tt-fondo);
    --bs-body-color: var(--tt-tx);
    --bs-body-color-rgb: var(--tt-tx-rgb);
    --bs-emphasis-color: var(--tt-tx);
    --bs-heading-color: var(--tt-tx);
    --bs-secondary-color: var(--tt-tx2);
    --bs-tertiary-color: var(--tt-tx3);
    --bs-text-muted: var(--tt-tx3);
    --bs-secondary-bg: var(--tt-sup2);
    --bs-tertiary-bg: var(--tt-sup);

    --bs-border-color: var(--tt-linea);
    --bs-border-dashed-color: var(--tt-linea);
    --bs-root-card-border-color: var(--tt-linea);

    --bs-link-color: var(--tt-azul-texto);
    --bs-link-color-rgb: var(--tt-azul-texto-rgb);
    --bs-link-hover-color: var(--tt-azul-texto);
    --bs-link-hover-color-rgb: var(--tt-azul-texto-rgb);

    /* Primaria = VERDE, como en el prototipo: es la acción que cierra la venta. */
    --bs-primary: var(--tt-verde);
    --bs-primary-rgb: 0, 166, 80;
    --bs-primary-active: var(--tt-verde2);
    --bs-primary-light: var(--tt-verde-tenue);
    --bs-primary-inverse: var(--tt-sobre-verde);
    --bs-text-primary: var(--tt-verde-texto);
    --bs-success: var(--tt-verde);
    --bs-success-rgb: 0, 166, 80;
    --bs-success-active: var(--tt-verde2);
    --bs-success-light: var(--tt-verde-tenue);
    --bs-success-inverse: var(--tt-sobre-verde);
    --bs-text-success: var(--tt-verde-texto);

    /* Secundaria = AZUL. Bootstrap llama «secondary» al gris, así que el azul va en info. */
    --bs-info: var(--tt-azul);
    --bs-info-active: var(--tt-azul2);
    --bs-info-light: var(--tt-azul-tenue);
    --bs-info-inverse: var(--tt-sobre-azul);
    --bs-text-info: var(--tt-azul-texto);

    --bs-danger: var(--tt-error);
    --bs-text-danger: var(--tt-error);
    --bs-form-invalid-color: var(--tt-error);
    --bs-form-invalid-border-color: var(--tt-error);
    --bs-form-valid-color: var(--tt-verde-texto);
    --bs-form-valid-border-color: var(--tt-verde);

    /* La escala de grises de Metronic, que pinta bordes y texto de casi todo. */
    --bs-gray-100: var(--tt-sup);
    --bs-gray-200: var(--tt-sup2);
    --bs-gray-300: var(--tt-linea);
    --bs-gray-400: var(--tt-linea-fuerte);
    --bs-gray-500: var(--tt-tx3);
    --bs-gray-600: var(--tt-tx3);
    --bs-gray-700: var(--tt-tx2);
    --bs-gray-800: var(--tt-tx);
    --bs-gray-900: var(--tt-tx);
    --bs-text-gray-500: var(--tt-tx3);
    --bs-text-gray-600: var(--tt-tx3);
    --bs-text-gray-700: var(--tt-tx2);
    --bs-text-gray-800: var(--tt-tx);
    --bs-text-gray-900: var(--tt-tx);

    --bs-input-bg: var(--tt-sup2);
    --bs-input-color: var(--tt-tx);
    --bs-input-solid-bg: var(--tt-sup2);
    --bs-input-solid-bg-focus: var(--tt-sup2);
    --bs-input-solid-color: var(--tt-tx);
    --bs-input-solid-placeholder-color: var(--tt-tx3);
    --bs-component-active-bg: var(--tt-verde);
    --bs-component-active-color: var(--tt-sobre-verde);
    --bs-component-hover-bg: var(--tt-sup2);
    --bs-component-hover-color: var(--tt-tx);
    --bs-focus-ring-color: var(--tt-azul-tenue);
    --bs-dropdown-bg: var(--tt-sup2);
    --bs-dropdown-box-shadow: var(--tt-sombra);
    --bs-box-shadow: var(--tt-sombra);
}

.card {
    --bs-card-bg: var(--tt-sup);
    --bs-card-border-color: var(--tt-linea);
}

/* Metronic fija el body a 13px (12 en teléfono) con !important y con Inter, que aquí
   no se carga. El prototipo es de 15px en la fuente del sistema. `html body` gana a
   su `body` por especificidad. */
html body {
    font-family: var(--bs-body-font-family) !important;
    font-size: 15px !important;
    line-height: 1.55;
    background-color: var(--tt-fondo);
    color: var(--tt-tx);
}

@media (max-width: 767.98px) {
    html body {
        font-size: 14px !important;
    }
}

/* El contenedor del prototipo: ancho máximo y 24px de aire (16 en teléfono). */
.tt-wrap {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (max-width: 575.98px) {
    .tt-wrap {
        padding: 0 16px;
    }
}