/* ============================================================================
   Emplexia Repuestos — TOKENS DE DISEÑO (archivo único, requisito del dueño)
   ----------------------------------------------------------------------------
   Todo color, superficie, elevación, radio, espaciado y tipografía sale de aquí.
   El color primario/secundario VIENE DE LA MARCA DE LA TIENDA (--brand-*): la app
   del cliente usa su marca; si no tiene, cae al tema Emplexia Repuestos: la misma
   identidad de la página de venta (tinta, ámbar de caja de repuestos y papel de bodega).
   Modo oscuro real con prefers-color-scheme + override [data-theme].
   ========================================================================== */

:root {
  /* ---- marca (la sobreescribe /api/mi-tienda en la app del cliente) ---- */
  --brand-primary: #14202B;
  --brand-secondary: #2B4256;
  --brand-on-primary: #FFFFFF;
  --brand-text: var(--brand-primary);      /* marca usada como TEXTO (precios, pestaña activa) */
  --accion: var(--brand-primary);          /* fondo de la acción principal */
  --accion-texto: var(--brand-on-primary);
  --senal: #F2B705;                        /* ámbar: el acento de la marca */
  --senal-suave: #FCEFC2;

  /* ---- color: superficies (claro) ---- */
  --bg: #F2F3EF;
  --surface: #FFFFFF;
  --surface-2: #ECEEE8;
  --surface-3: #E2E5DE;
  --line: #D3D7CF;
  --text: #14202B;
  --text-2: #46525E;
  --text-3: #5B6570;
  --overlay: rgba(20, 32, 43, .5);

  /* ---- semánticos ---- */
  --ok: #16704A;
  --ok-soft: #DDEFE5;
  --warn: #8A5A00;
  --warn-soft: #FDF3DC;
  --danger: #B42318;
  --danger-soft: #FDECEA;
  --info-soft: #E9ECE6;

  /* ---- elevación ---- */
  --e1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --e2: 0 2px 6px rgba(16, 24, 40, .08), 0 8px 24px rgba(16, 24, 40, .08);
  --e3: 0 12px 32px rgba(16, 24, 40, .18), 0 2px 8px rgba(16, 24, 40, .12);

  /* ---- forma ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* ---- espaciado (base 4/8) ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* ---- tipografía ---- */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ancho-titular: 76;                     /* eje wdth de Archivo para titulares y precios */
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px;
  --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 34px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* ---- movimiento ---- */
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 300ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* ---- safe areas (app nativa: nada pegado al notch ni a la barra de gestos) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --tabbar-h: 60px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E151C;
    --surface: #16212B;
    --surface-2: #1C2934;
    --surface-3: #233240;
    --line: #2C3B49;
    --text: #EEF1EC;
    --text-2: #B8C2CB;
    --text-3: #98A4AE;
    --brand-text: color-mix(in srgb, var(--brand-primary) 22%, #F2F3EF);
    --accion: #F2B705; --accion-texto: #14202B;
    --overlay: rgba(3, 7, 18, .66);
    --ok: #5DD48C; --ok-soft: #10281C;
    --warn: #F0C368; --warn-soft: #2A2210;
    --danger: #FF8A80; --danger-soft: #2C1414;
    --info-soft: #16233A;
    --e1: 0 1px 2px rgba(0,0,0,.5);
    --e2: 0 2px 8px rgba(0,0,0,.5);
    --e3: 0 16px 40px rgba(0,0,0,.6);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E151C;
  --surface: #16212B;
  --surface-2: #1C2934;
  --surface-3: #233240;
  --line: #2C3B49;
  --text: #EEF1EC;
  --text-2: #B8C2CB;
  --text-3: #98A4AE;
  --brand-text: color-mix(in srgb, var(--brand-primary) 22%, #F2F3EF);
  --accion: #F2B705; --accion-texto: #14202B;
  --overlay: rgba(3, 7, 18, .66);
  --ok: #5DD48C; --ok-soft: #10281C;
  --warn: #F0C368; --warn-soft: #2A2210;
  --danger: #FF8A80; --danger-soft: #2C1414;
  --info-soft: #16233A;
}

[data-theme="light"] { color-scheme: light; }
/* ---------------------------- utilidades base ---------------------------- */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Números tabulares: precios y códigos NO bailan al alinearse (requisito). */
.t-num, .precio, .money, .codigo, td.num, .stat b, #stats, #contadorResultados,
.cardPrecio, .pvPrecio, .precioFila, .kpi b, #kpis b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Foco visible siempre (accesibilidad AA) */
:focus-visible {
  outline: 3px solid var(--brand-secondary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Targets táctiles >= 44x44 en controles interactivos */
button, [role="button"], a.btn, .tabItem, input[type="checkbox"] + label {
  min-height: 44px;
}
button.sbClear, button.sbBtn, .chip, .linkBtn { min-height: 44px; min-width: 44px; }

/* Respeto por quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* Contraste AA: los grises de texto no bajan de --text-2 sobre --surface */
.muted, .hint { color: var(--text-2); }