/*
Theme Name: AutoSandoval — Portal
Theme URI: https://autosandoval.com/
Description: Tema hijo de Automize para AutoSandoval S.A.S. Define los tokens del sistema de diseño (docs/propuesta-inicial/diseno/sistema-diseno.md), el modo oscuro de marca (docs/propuesta-inicial/diseno/paleta-oscura-2026-10.md) y las plantillas del portal de consulta pública (Anexo A). No modifica ni sobrescribe archivos del tema padre.
Author: AutoSandoval S.A.S.
Author URI: https://autosandoval.com/
Template: automize
Version: 0.6.6
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: autosandoval
Tags: accessibility-ready, translation-ready, e-commerce, custom-colors
*/

/*
 * Este archivo contiene:
 *   1. los tokens del sistema de diseño como variables CSS en :root (paleta
 *      oscura de marca, opción A navy #001530, spec paleta-oscura-2026-10 §4.1),
 *   2. el interruptor del elemento raíz (`html.as-modo-oscuro`: `color-scheme` y
 *      barra de desplazamiento) y el bloque de tokens claros que se aplica cuando
 *      el modo oscuro está apagado (`html:not(.as-modo-oscuro)`), y
 *   3. utilidades de accesibilidad de alcance global (foco, movimiento reducido).
 *
 * Los estilos del portal viven en assets/css/portal.css, con alcance acotado a
 * .as-portal para no interferir con el tema padre `automize` ni con Elementor.
 * La capa que corrige las superficies claras del padre y dibuja el sistema de
 * líneas rojas vive en assets/css/oscuro.css (solo se encola con el modo activo).
 *
 * Fuente única de tokens: los colores se declaran aquí. tienda.css solo declara
 * sus tokens semánticos de tienda (cabecera, CTA, precios, estados de campo) y
 * no repite valores de esta hoja.
 *
 * IMPORTANTE (privacidad): no se cargan fuentes de Google ni ningún recurso de
 * terceros en la página del portal (anexo-seguridad-pii.md §3.6). --font-heading
 * y --font-body nombran las familias de marca y caen a la fuente del sistema si
 * el tema padre no las sirve.
 */

:root {
  /* Familia: títulos y cuerpo (sistema de diseño §1.2) */
  --as-font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-heading: "Archivo", var(--as-font-system);
  --font-body: "Inter", var(--as-font-system);

  /* Color (§1.1 y paleta-oscura §4.1). Los nombres no cambian: solo el valor.
   * ⚠️ = sin cambio respecto de la paleta clara, y por qué. */
  --as-blue: #4fb3f0;             /* iconos y UI: 6.09:1 sobre tarjeta */
  --as-blue-dark: #8cc9f0;        /* enlaces y eyebrows sobre oscuro: 10.2:1 */
  --as-blue-soft: #0e2f5c;        /* fondo de chip azul */
  --as-teal: #0a3a46;             /* banda de autoridad (blanco encima 12.31:1) */
  --as-teal-deep: #000b1c;        /* cierre/overlays: pierde el verde, gana profundidad */
  --as-yellow: #ffd200;           /* ⚠️ sin cambio: amarillo del logo y relleno del CTA (12.58:1) */
  --as-yellow-dark: #e6bd00;      /* ⚠️ sin cambio: hover del CTA (10.13:1) */
  --as-yellow-soft: #33280b;      /* fondo de destacado; texto #FFD970 (10.63:1) */
  /* Ajuste del cliente (2026-10-26): el ROJO sustituye al naranja en los acentos.
   * No se usan los valores naranjas de §4.1; estos son alias de los tokens de
   * rojo y dorado para no dejar hex sueltos en los componentes de la marca. */
  --as-orange: #d24730;           /* alias de --as-red */
  --as-orange-dark: #f8b018;      /* alias de --as-gold */
  --as-orange-soft: #33280b;      /* alias de --as-gold-soft */
  --as-graphite: #f4f7fc;         /* tinta principal (era fondo de pie: ver §4.6) */
  --as-graphite-soft: #c7d4e7;    /* texto secundario */
  --as-muted: #9db0c9;            /* metadatos y ayudas (6.39:1 sobre tarjeta) */
  --as-white: #f4f7fc;            /* tinta clara; los fondos pasan a --as-card (§4.6) */
  --as-surface: #001e4a;          /* fondo de sección alterna */
  --as-border: #1e4273;           /* bordes decorativos y divisores */
  --as-border-strong: #54779f;    /* bordes de control (3.04:1 sobre tarjeta) */
  --as-success: #1e7a46;          /* ⚠️ sin cambio: fondo del botón WhatsApp (blanco 5.35:1) */
  --as-success-dark: #17703f;     /* ⚠️ sin cambio: hover del éxito (blanco 6.13:1) */
  --as-success-soft: #0e2a1d;     /* fondo de aviso de éxito; texto principal 14.3:1 */
  --as-warning: #ffc061;          /* aviso en texto sobre oscuro (8.74:1) */
  --as-danger: #b3261e;           /* ⚠️ sin cambio: relleno/icono de error (blanco 6.54:1) */
  --as-danger-soft: #2e1412;      /* fondo de aviso de error; texto principal 15.97:1 */
  --as-info: #8cc9f0;             /* alias de enlace informativo */

  /* Superficies, tinta, dorado de énfasis, rojo y semánticos de estado
   * (paleta-oscura §2.2 y §4.1, "tokens nuevos"). */
  --as-bg: #001530;               /* fondo de página (opción A) */
  --as-bg-alt: #001e4a;           /* sección alterna, cabecera, cabecera de tabla */
  --as-bg-deep: #000b1c;          /* pie de página y base del velo */
  --as-card: #01295f;             /* tarjetas de producto, ficha, formularios */
  --as-card-hover: #063470;       /* hover/elevación de tarjeta, cabecera con scroll */
  --as-elevated: #0b3b7d;         /* modales, minicarrito, menú móvil desplegado */
  --as-field: #00132e;            /* fondo de campos (más profundo que la tarjeta) */
  --as-text: #f4f7fc;             /* títulos, precios, énfasis */
  --as-text-body: #d8e2f0;        /* párrafos largos y páginas legales */
  --as-text-soft: #c7d4e7;        /* texto secundario, enlaces de pie, ayudas */
  --as-text-muted: #9db0c9;       /* metadatos, placeholders, precio anterior */
  --as-text-disabled: #8a9ab2;    /* controles deshabilitados (exentos por WCAG) */
  --as-gold: #f8b018;             /* dorado de la referencia: eyebrows, cifras, iconos */
  --as-gold-strong: #d8950c;      /* borde/relleno de apoyo */
  --as-gold-soft: #33280b;        /* fondo tenue de destacados */
  --as-on-gold: #001530;          /* texto sobre cualquier superficie dorada/amarilla */
  --as-red: #d24730;              /* color de todas las líneas rojas (§6) */
  --as-red-deep: #c43a22;         /* rojo exacto de la referencia: hover de un rojo */
  --as-action: #2268b4;           /* azul de acción: fondo con texto blanco 5.66:1 */
  --as-row-alt: #001a3b;          /* fila alterna de tablas */
  --as-danger-text: #ff9a8b;      /* error en línea como texto (6.91:1 sobre tarjeta) */
  --as-success-text: #6fe0a4;     /* éxito en línea como texto (8.68:1 sobre tarjeta) */
  --as-warning-text: #ffc061;     /* aviso en línea como texto (8.74:1 sobre tarjeta) */
  --as-scrim: rgba(0, 8, 20, 0.72); /* velo de modales y menú móvil */
  /* Placa de foto (paleta-oscura §10, R-1): mientras las fotos de producto
   * lleguen con fondo blanco, se montan sobre esta placa clara con padding, de
   * forma consistente, para que el blanco no quede a sangre sobre el navy. */
  --as-photo-plate: #f2f5fa;
  /* Impresión (revisión de código F-01): colores fijos de papel y logo con el
   * wordmark oscuro (adjunto 11218). No pertenecen a la paleta de pantalla; se
   * declaran como tokens para que las reglas `@media print` no lleven literales. */
  --as-print-bg: #ffffff;
  --as-print-ink: #111417;
  --as-print-logo: url("https://autosandoval.com/wp-content/uploads/2026/10/logo-autosandoval-300x122.png");

  /* Sistema de líneas rojas (§6.2). Grosor, largo y separación de las rayitas. */
  --as-rule-w: 2px;
  --as-rule-len: 48px;
  --as-rule-gap: 12px;
  --as-fillet-h: 1px;

  /* Tipografía (§1.2) */
  --text-display: 3.5rem;
  --text-h1: 2.75rem;
  --text-h2: 2rem;
  --text-h3: 1.5rem;
  --text-h4: 1.25rem;
  --text-h5: 1.125rem;
  --text-h6: 1rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.75rem;

  /* Espaciado (§1.3) */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Radios (§1.4) */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  /* Contenedores (§1.6) */
  --container-narrow: 45rem;
  --container-default: 75rem;
  --container-wide: 90rem;
  --content-gutter: 1.25rem;

  /* Interlineado (§2.4) */
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.7;

  /* Sombras: frías, nunca negras puras (paleta-oscura §4.1 y §7). */
  --shadow-sm: 0 1px 2px rgba(0, 8, 20, 0.55);
  --shadow-md: 0 8px 24px rgba(0, 8, 20, 0.55);
  --shadow-lg: 0 18px 48px rgba(0, 8, 20, 0.65);
  --shadow-xl: 0 32px 80px rgba(0, 8, 20, 0.7);
  --shadow-focus: 0 0 0 3px rgba(255, 210, 0, 0.9); /* ⚠️ sin cambio: anillo de respaldo */

  /* Foco de dos tonos (§1.7 y accesibilidad §5).
   * Tono 1 (anillo dorado) + tono 2 (halo del color del lienzo): el halo separa
   * el anillo del relleno dorado del CTA (§8.2). */
  --as-focus-ring: 3px solid var(--as-yellow); /* ⚠️ sin cambio: 9.75:1 sobre el fondo */
  --as-focus-halo: 0 0 0 5px var(--as-bg);
  --as-focus-offset: 2px;
  /* Anillo tenue de los campos (paleta-oscura §8.6: 3 px de dorado al 55 %). */
  --as-focus-glow: 0 0 0 3px rgba(248, 176, 24, 0.55);

  /* ----------------------------------------------------------------------
   * Resultado del portal con historial de 12 meses (28-oct-2026).
   * Especificación: docs/plan-tarjeta-digital/diseno-portal-historial-12-meses.md §4.1.
   *
   * La tarjeta es una superficie navy propia y **no** sigue el interruptor del
   * modo claro: estas tintas y superficies se fijan con los valores verificados
   * en §4.2 (contraste sobre #063470 y #0E4F9C). Por eso no son alias de
   * --as-text / --as-blue, que cambian de valor en `html:not(.as-modo-oscuro)`.
   * -------------------------------------------------------------------- */
  --as-card-aceite: #063470;
  --as-card-valvulina: #0e4f9c;
  --as-card-border-aceite: #5389c6;
  --as-card-border-valvulina: #a9ccec;
  --as-badge-aceite-bg: #4fb3f0;
  --as-badge-valvulina-bg: #8cc9f0;
  --as-badge-ink: #001530;
  --as-card-label: #c7d4e7;
  --as-card-value: #f4f7fc;
  --as-card-accent: #ffd200;
  --as-card-plate-bg: #00132e;
  --as-card-action: #ffd200;
  --as-card-action-ink: #001530;
  --as-card-rule-aceite: #2f5d97;
  --as-card-rule-valvulina: #4e7eb8;
  --as-carousel-glow: radial-gradient(42rem 18rem at 50% 0%, rgba(79, 179, 240, 0.14), transparent 70%);
  /* Monograma y swoosh del logo (arte de marca, no UI). */
  --as-logo-blue: #1fa8dd;
  --as-logo-gold: #ffd200;
  --as-logo-orange: #e8862b;
  /* Tinta y acento de la impresión limpia de la tarjeta (§9). */
  --as-print-muted: #5b6570;
  --as-print-accent: #a85a0d;
}

/* --------------------------------------------------------------------------
 * Interruptor del modo oscuro (elemento raíz)
 *
 * `color-scheme` y `scrollbar-color` se resuelven sobre el **elemento raíz**, no
 * sobre <body>: declararlos en `:root` impedía revertirlos (hallazgo F-02). La
 * clase `as-modo-oscuro` se pone en <html> y en <body> desde
 * `inc/modo-oscuro.php`; con la clase en <html> el navegador usa controles y
 * barra oscuros, y sin ella vuelve a claro por omisión.
 * ------------------------------------------------------------------------ */

html.as-modo-oscuro {
  color-scheme: dark;
  /* Barra de desplazamiento en Firefox (en Chromium se usa ::-webkit-scrollbar
   * desde oscuro.css, con los mismos tokens). */
  scrollbar-color: var(--as-border-strong) var(--as-bg-deep);
}

/* --------------------------------------------------------------------------
 * Reversión del CSS: tokens claros y lienzo
 *
 * Con el filtro `autosandoval_modo_oscuro` en `false` el tema no añade la clase
 * `as-modo-oscuro` ni al <html> ni al <body>, y no encola oscuro.css; este
 * bloque devuelve los tokens de la paleta clara anterior y el lienzo. Se declara
 * en `html:not(...)` (más específico que `:root`) para que también alcance al
 * elemento raíz.
 *
 * OJO: esto solo revierte el CSS. Los 30 colores de `theme_mods` y el kit de
 * Elementor siguen oscuros; la reversión completa son tres pasos
 * (README §16.2, «Cómo revertir»).
 * ------------------------------------------------------------------------ */

html:not(.as-modo-oscuro) {
  color-scheme: light;
  scrollbar-color: auto;
  background-color: var(--as-bg);
  color: var(--as-text-body);

  --as-blue: #0095d9;
  --as-blue-dark: #0a6e9e;
  --as-blue-soft: #e6f4fb;
  --as-teal: #0b4a5a;
  --as-teal-deep: #08323d;
  --as-yellow-soft: #fff8d6;
  --as-orange: #e8862b;
  --as-orange-dark: #a85a0d;
  --as-orange-soft: #fbeee0;
  --as-graphite: #111417;
  --as-graphite-soft: #2a2f36;
  --as-muted: #5b6570;
  --as-white: #ffffff;
  --as-surface: #f5f7fa;
  --as-border: #d7dce3;
  --as-border-strong: #c9d0d9;
  --as-success-soft: #e6f4ec;
  --as-warning: #a85a0d;
  --as-danger-soft: #fbe9e7;
  --as-info: #0a6e9e;

  /* Superficies y tinta claras para los componentes que usan los tokens nuevos. */
  --as-bg: #ffffff;
  --as-bg-alt: #f5f7fa;
  --as-bg-deep: #111417;
  --as-card: #ffffff;
  --as-card-hover: #f5f7fa;
  --as-elevated: #ffffff;
  --as-field: #ffffff;
  --as-text: #111417;
  --as-text-body: #2a2f36;
  --as-text-soft: #4a5560;
  --as-text-muted: #5b6570;
  --as-text-disabled: #5b6570;
  --as-gold: #a85a0d;
  --as-gold-strong: #a85a0d;
  --as-gold-soft: #fff8d6;
  --as-on-gold: #111417;
  --as-red: #c43a22;
  --as-red-deep: #c43a22;
  --as-action: #0b4a5a;
  --as-row-alt: #f7f9fc;
  --as-danger-text: #b3261e;
  --as-success-text: #1e7a46;
  --as-warning-text: #a85a0d;
  --as-scrim: rgba(0, 0, 0, 0.5);
  --as-photo-plate: #ffffff;

  --shadow-sm: 0 1px 2px rgba(11, 74, 90, 0.08);
  --shadow-md: 0 6px 16px rgba(11, 74, 90, 0.1);
  --shadow-lg: 0 16px 40px rgba(11, 74, 90, 0.14);
  --shadow-xl: 0 24px 60px rgba(11, 74, 90, 0.18);
  --as-focus-halo: 0 0 0 6px var(--as-teal);

  /* Controles del carrusel del historial en tema claro: el punto inactivo y el
   * borde de las flechas necesitan ≥ 3:1 sobre `--as-bg-alt` claro. */
  --as-carousel-control: #5b6570;
  --as-carousel-control-active: #a85a0d;
}

/* El lienzo del <body> también vuelve aunque los `theme_mods` aún sean oscuros
 * (paso 2 pendiente): el padre pinta `body { background-color: var(--rbb-…) }`
 * y esa regla, sola, deja el fondo navy con el CSS ya en claro. */
html:not(.as-modo-oscuro) body {
  background-color: var(--as-bg);
  color: var(--as-text-body);
}

/* --------------------------------------------------------------------------
 * Utilidades de accesibilidad (alcance global, prefijadas con .as-)
 * ------------------------------------------------------------------------ */

/* Contenido solo para lectores de pantalla. */
.as-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Foco de dos tonos para los enlaces y controles del portal. Se aplica a
 * :focus-visible para no marcar el foco del ratón, con respaldo :focus para
 * navegadores antiguos que no soportan :focus-visible. */
.as-portal :focus {
  outline: var(--as-focus-ring);
  outline-offset: var(--as-focus-offset);
  box-shadow: var(--as-focus-halo);
}

.as-portal :focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.as-portal :focus-visible {
  outline: var(--as-focus-ring);
  outline-offset: var(--as-focus-offset);
  box-shadow: var(--as-focus-halo);
}

/* Enlaces de salto (portal y resto del sitio): visibles solo al recibir foco, como
 * primer elemento enfocable del body. Corrigen, sin JavaScript, el `skip-link` sin
 * `href` que emite el tema padre. `.as-portal-skip` apunta a `#as-contenido` en el
 * portal y `.as-skip-link` a `#primary` en el resto de páginas. */
.as-portal-skip,
.as-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--as-yellow);
  color: var(--as-on-gold);
  font-family: var(--font-heading);
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: underline;
}

.as-portal-skip:focus,
.as-skip-link:focus {
  left: var(--space-md);
  top: var(--space-md);
  outline: var(--as-focus-ring);
  outline-offset: var(--as-focus-offset);
  box-shadow: var(--as-focus-halo);
}

/* Se oculta en todo el sitio el enlace roto del padre (no tiene `href`), para no
 * dejar dos enlaces de salto ni uno que no lleva a ninguna parte. Si el padre lo
 * corrige algún día, esta regla deja de aplicar por sí sola. */
.skip-link[role="link"]:not([href]) {
  display: none;
}

/* Contenedor del contenido principal: destino del enlace de salto. */
#as-contenido:focus {
  outline: none;
}

/* Movimiento reducido: se anulan transiciones y animaciones decorativas,
 * nunca la información (que siempre va también en texto). */
@media (prefers-reduced-motion: reduce) {
  .as-portal *,
  .as-portal *::before,
  .as-portal *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}