/* ================================================
   TOTAL DELIVERY — DESIGN TOKENS (COMPARTIDO)
   ================================================
   Fuente única de verdad de color, tipografía, radios, sombras y vidrio
   para los CUATRO módulos: cliente, admin, caja y repartidor.

   Reglas de uso:
   - NUNCA hardcodear un color en los CSS de módulo. Si falta un token,
     se agrega aquí.
   - El color de marca del tenant lo inyecta core.js (loadAppConfig) sobre
     :root como --primary / --primary-on-dark. Todo lo demás se deriva.
   - El tema oscuro se activa con body.dark-mode (o [data-theme="dark"]).
   ================================================ */

:root {
    /* ---------- MARCA ----------
       Hay DOS usos del color de marca y necesitan valores distintos:

       --primary       RELLENOS SÓLIDOS (botón "Agregar", badges, avatar).
                       Es el color real del negocio y NO cambia con el tema:
                       un botón debe verse idéntico en claro y en oscuro.
       --primary-text  El color de marca usado como TEXTO o icono suelto
                       (precios, enlaces, categoría activa). Sobre fondo
                       oscuro se aclara lo mínimo para ser legible.

       Mezclarlos era el bug del "botón pastel": al remapear --primary a la
       variante aclarada, los rellenos también cambiaban de tono. */
    --primary: #D32F2F;
    --primary-hover: #B71C1C;
    /* Variante aclarada que calcula core.js (safeOnDark) para TEXTO en oscuro */
    --primary-on-dark: #D32F2F;
    --primary-hover-on-dark: #B71C1C;
    --primary-text: var(--primary);
    /* Superficie teñida con la marca (chip activo, radio seleccionado,
       caja de datos bancarios). Se deriva más abajo con color-mix. */
    --primary-light: #FFEBEE;
    /* Texto que va ENCIMA de --primary-light. Nunca usar --text-main ahí. */
    --on-primary-light: var(--primary-text);
    /* Texto que va encima de un fondo --primary sólido. */
    --on-primary: #FFFFFF;

    /* ---------- SUPERFICIES ---------- */
    --bg-body: #F5F6FA;
    --bg-card: #FFFFFF;
    --bg-input: #FFFFFF;
    --surface-2: #F1F3F5;   /* caja anidada dentro de una card */
    --surface-3: #E9ECEF;   /* un escalón más */

    /* ---------- TEXTO ---------- */
    --text-main: #1A1D2E;
    --text-sec: #6B7280;
    --text-muted: #9AA1AC;
    --on-dark-surface: #FFFFFF;  /* texto sobre sidebars/superficies oscuras fijas */

    /* ---------- LÍNEAS ---------- */
    --border-color: #E5E7EB;
    --divider: rgba(0,0,0,0.08);
    --img-frame: rgba(0,0,0,0.10);

    /* ---------- SEMÁNTICOS ---------- */
    --success: #10B981;
    --warning: #F59E0B;
    --danger:  #EF4444;
    --info:    #3B82F6;
    --blue:    #3B82F6;
    --purple:  #8B5CF6;
    --offer-fg: #DC2626;

    /* Cajas de información: siempre el trío bg/fg/border juntos, así una
       caja verde nunca acaba con texto blanco sobre verde pastel. */
    --info-bg: #E3F2FD;   --info-fg: #1565C0;  --info-border: #90CAF9;
    --ok-bg:   #E8F5E9;   --ok-fg:   #2E7D32;  --ok-border:   #A5D6A7;
    /* --warn-fg era #E65100: 3.46:1 sobre --warn-bg, por debajo del 4.5:1 que
       pide AA para texto normal. Los avisos suelen ir en letra pequeña
       (badges, píldoras), justo donde más se nota. #C44300 da 4.61:1 y sigue
       leyéndose como naranja de advertencia. */
    --warn-bg: #FFF3E0;   --warn-fg: #C44300;  --warn-border: #FFCC80;
    --teal-bg: #E0F2F1;   --teal-fg: #00695C;  --teal-border: #4DB6AC;
    --grape-bg: #EDE9FE;  --grape-fg: #5B21B6; --grape-border: #C4B5FD;
    --danger-bg: #FEE2E2;  --danger-fg: #B91C1C;  --danger-border: #FCA5A5;

    /* ---------- SUPERFICIE OSCURA FIJA (sidebar admin, app repartidor) ----
       No cambia con el tema: son zonas que siempre son oscuras. */
    --bg-shell: #14161F;
    --bg-shell-2: #1E2130;
    --bg-shell-hover: #252942;
    --text-shell: #B0B5C8;

    /* ---------- TIPOGRAFÍA ----------
       Display para títulos, cifras y botones (geométrica, con carácter).
       Body para texto corrido (Inter tiene mejor legibilidad a 14px). */
    --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;

    /* ---------- FORMA ---------- */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* ---------- SOMBRAS ---------- */
    --shadow-sm: 0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
    --shadow-md: 0 4px 14px rgba(16,24,40,0.08);
    --shadow-lg: 0 12px 32px rgba(16,24,40,0.12);

    /* ---------- GLASSMORPHISM ---------- */
    --glass-bg: rgba(255,255,255,0.72);
    --glass-bg-strong: rgba(255,255,255,0.86);
    --glass-border: rgba(255,255,255,0.55);
    --glass-hairline: rgba(0,0,0,0.06);
    --glass-hover: rgba(0,0,0,0.05);
    --glass-active: rgba(0,0,0,0.09);
    --glass-blur: saturate(180%) blur(20px);
    --glass-shadow: 0 8px 32px rgba(16,24,40,0.10);
    --glass-fallback: var(--bg-card);
    /* Vidrio sobre superficies oscuras fijas (sidebar admin, repartidor) */
    --glass-shell: rgba(255,255,255,0.06);
    --glass-shell-border: rgba(255,255,255,0.10);

    /* ---------- MOVIMIENTO ---------- */
    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-spring: cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

body.dark-mode,
[data-theme="dark"] {
    --bg-body: #0F1013;
    --bg-card: #1A1B20;
    --bg-input: #24262D;
    --surface-2: #24262D;
    --surface-3: #2E3038;

    --text-main: #F4F5F7;
    --text-sec: #A2A8B4;
    --text-muted: #757C89;

    --border-color: #2E3038;
    --divider: rgba(255,255,255,0.10);
    --img-frame: rgba(255,255,255,0.12);

    /* OJO: --primary NO se toca aquí a propósito. El relleno de un botón
       debe verse del mismo color en ambos temas. Solo se aclara el color
       de marca cuando se usa como TEXTO (ver safeOnDark en core.js). */
    --primary-text: var(--primary-on-dark);
    /* Fallback sin color-mix: tinte oscuro neutro (nunca rosa claro). */
    --primary-light: #2A2126;

    --info-bg: #0E2233;   --info-fg: #7FB9F0;  --info-border: #1E4A6B;
    --ok-bg:   #10261A;   --ok-fg:   #6FDD8B;  --ok-border:   #1F5030;
    --warn-bg: #2E1D0B;   --warn-fg: #FFB870;  --warn-border: #6B4415;
    --teal-bg: #0C2422;   --teal-fg: #6FD6CB;  --teal-border: #1C4F49;
    --grape-bg: #1E1733;  --grape-fg: #C4B5FD; --grape-border: #453A6B;
    --danger-bg: #2C1315;  --danger-fg: #FF8B8B;  --danger-border: #63272B;
    --offer-fg: #FF8A75;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.45);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.55);

    --glass-bg: rgba(22,23,28,0.66);
    --glass-bg-strong: rgba(22,23,28,0.84);
    --glass-border: rgba(255,255,255,0.10);
    --glass-hairline: rgba(255,255,255,0.08);
    --glass-hover: rgba(255,255,255,0.07);
    --glass-active: rgba(255,255,255,0.12);
    --glass-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

/* --primary-light derivado del primario REAL del tenant (no de un rojo fijo):
   si el negocio configura azul, el chip activo sale azul pálido, no rosa.
   Va en @supports porque un color-mix no soportado dentro de una custom
   property se invalida al sustituirse y NO cae al valor anterior. */
@supports (background: color-mix(in srgb, red 10%, white)) {
    :root {
        --primary-light: color-mix(in srgb, var(--primary) 12%, #FFFFFF);
    }
    body.dark-mode,
    [data-theme="dark"] {
        --primary-light: color-mix(in srgb, var(--primary) 22%, #1A1B20);
    }
}

/* ================================================
   GLASSMORPHISM — utilidades compartidas
   ================================================
   .glass pinta el vidrio; el blur solo se activa si el navegador soporta
   backdrop-filter. Sin soporte queda un fondo opaco normal, nunca un panel
   semitransparente ilegible. */
.glass {
    background: var(--glass-fallback);
    border-color: var(--glass-border);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass {
        background: var(--glass-bg);
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
    }
    /* Paneles con contenido denso: un poco más opacos para que el texto no
       compita con lo que se ve por detrás. */
    .glass-panel { background: var(--glass-bg-strong); }
    /* Vidrio sobre superficies oscuras fijas (sidebar admin, repartidor) */
    .glass-dark {
        background: var(--glass-shell);
        border-color: var(--glass-shell-border);
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
    }
}

/* ================================================
   TIPOGRAFÍA BASE
   ================================================ */
body {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* Cifras: ancho fijo para que los precios no "bailen" al actualizarse
   y no se lean como texto genérico. */
.num, .price-tag, .order-total, .kpi-value,
.cart-qty-num, .total-row, .subtotal-row {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

button, input, select, textarea {
    font-family: inherit;
}

/* ================================================
   CONTROLES DE FORMULARIO — BASE PARA LOS 4 MÓDULOS
   ================================================
   Sin esto, un <input> o un <button> sin `color`/`background` propios cae
   al estilo por defecto del navegador: campo BLANCO con texto NEGRO. En
   modo oscuro eso da campos blancos brillantes y botones negros con texto
   negro (invisibles). Va aquí para que ningún módulo lo tenga que repetir.

   Especificidad de elemento (0,0,1): cualquier regla de módulo con clase
   le gana, así que esto solo actúa como red de seguridad. */
input, select, textarea {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* Controles que NO son campos de texto: no deben heredar fondo ni borde */
input[type="checkbox"], input[type="radio"], input[type="range"],
input[type="color"], input[type="file"], input[type="image"] {
    background: none;
    border: none;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

/* Los botones sin color propio usaban el negro del sistema */
button { color: var(--text-main); }

/* El icono nativo de date/time es negro: invisible sobre campo oscuro */
body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="time"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.75);
}

/* Los desplegables nativos se pintan con los colores del SO: sin esto las
   <option> salen blancas sobre blanco en algunos navegadores. */
body.dark-mode select option,
[data-theme="dark"] select option {
    background: var(--bg-input);
    color: var(--text-main);
}

/* Le dice al navegador que dibuje scrollbars/controles nativos en oscuro */
body.dark-mode, [data-theme="dark"] { color-scheme: dark; }

/* ================================================
   ICONOS SVG (reemplazo de emojis)
   ================================================ */
.ic {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    vertical-align: -0.125em;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ic-lg { width: 1.35em; height: 1.35em; }
.ic-xl { width: 1.75em; height: 1.75em; }
/* Iconos que se dibujan rellenos en vez de trazo */
.ic-fill { fill: currentColor; stroke: none; }

/* ================================================
   ALINEACIÓN DE ICONOS EN CONTENEDORES COMUNES
   ================================================
   Los emojis eran texto y se alineaban solos con la línea base. Un <svg>
   no: necesita que su contenedor sea flex, o queda pegado arriba y sin
   separación del texto. Estas reglas cubren los patrones que comparten los
   cuatro módulos para no repetirlas en cada CSS. */

/* Botones y etiquetas que ahora son "icono + texto" */
button:has(> .ic), a:has(> .ic),
.btn-primary:has(.ic), .btn-secondary:has(.ic) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* Los botones de ancho completo no deben encogerse a su contenido */
button.btn-block:has(> .ic), .btn-full:has(> .ic) { display: flex; justify-content: center; }

/* Títulos con icono al inicio */
h1:has(> .ic), h2:has(> .ic), h3:has(> .ic), h4:has(> .ic) {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Contenedores de icono "grande" que antes tenían un emoji a font-size grande */
.kpi-icon, .empty-icon, .empty-icon-pulse, .stat-icon, .section-icon, .emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.kpi-icon .ic, .stat-icon .ic, .section-icon .ic { width: 22px; height: 22px; }
.empty-icon .ic, .empty-icon-pulse .ic { width: 44px; height: 44px; opacity: 0.55; }
.emoji .ic { width: 20px; height: 20px; }

/* Celdas de tabla y píldoras: el icono debe centrarse con el texto */
td .ic, th .ic, .badge .ic, .pill .ic, .tag .ic, small .ic, strong .ic, label .ic {
    vertical-align: -0.15em;
}

/* En impresión térmica el trazo fino se pierde: se engrosa */
@media print {
    .ic { stroke-width: 2.5; }
}

/* ================================================
   COLOR EN LOS ICONOS
   ================================================
   Con todo en gris la interfaz se siente plana. Cada icono toma el color de
   lo que representa, así se reconocen de un vistazo sin leer la etiqueta.

   Reglas:
   - Solo se colorea el icono cuando va sobre una superficie neutra. Si está
     dentro de un botón de color sólido o un chip semántico hereda
     currentColor, que es lo correcto (ahí el color ya lo da el contenedor).
   - Los tonos salen de tokens, así que se adaptan al tema oscuro. */
:root {
    --ic-box: #A0703C;      /* paquete / pedido — cartón */
    --ic-money: #16A34A;    /* dinero, cobros */
    --ic-bell: #F5B301;     /* notificaciones */
    --ic-fire: #F4511E;     /* ofertas */
    --ic-pin: #E23B2E;      /* ubicación */
    --ic-card: #4F7DF3;     /* tarjeta / terminal */
    --ic-phone: #7C5CE0;    /* móvil, transferencia */
    --ic-moto: #FF7A1A;    /* repartidor */
    --ic-store: #14B8A6;    /* tienda / recoger */
    --ic-clock: #6B8AF0;    /* tiempo */
    --ic-chart: #6366F1;    /* métricas */
    --ic-ok: #16A34A;
    --ic-warn: #F59E0B;
    --ic-danger: #E23B2E;
    --ic-cool: #38BDF8;     /* frío / congelados */
}
body.dark-mode, [data-theme="dark"] {
    /* Sobre fondo oscuro los mismos tonos se apagan: se suben un punto. */
    --ic-box: #C89A63;
    --ic-money: #4ADE80;
    --ic-bell: #FCD34D;
    --ic-fire: #FF8A5B;
    --ic-pin: #FF6B5E;
    --ic-card: #7FA3F8;
    --ic-phone: #A98CF0;
    --ic-moto: #FFA05C;
    --ic-store: #2DD4BF;
    --ic-clock: #93AEF7;
    --ic-chart: #8B8DF5;
    --ic-ok: #4ADE80;
    --ic-warn: #FBBF24;
    --ic-danger: #FF6B5E;
    --ic-cool: #67D9FB;
}

/* .ic-plain desactiva el color en un icono concreto (p. ej. si queda mal
   sobre un fondo teñido). */
.ic-plain { color: inherit !important; }

/* --- Asignación de color por icono --- */
.ic-package, .ic-catBread                 { color: var(--ic-box); }
.ic-coins, .ic-cash, .ic-wallet           { color: var(--ic-money); }
.ic-bell, .ic-megaphone, .ic-crown, .ic-trophy, .ic-key { color: var(--ic-bell); }
.ic-flame                                 { color: var(--ic-fire); }
.ic-mapPin, .ic-navigation, .ic-map       { color: var(--ic-pin); }
.ic-card                                  { color: var(--ic-card); }
.ic-phone, .ic-message, .ic-mail          { color: var(--ic-phone); }
.ic-moto                                  { color: var(--ic-moto); }
.ic-store, .ic-bag, .ic-building, .ic-home { color: var(--ic-store); }
.ic-clock, .ic-calendar, .ic-history      { color: var(--ic-clock); }
.ic-chart, .ic-trendUp, .ic-target        { color: var(--ic-chart); }
.ic-checkCircle, .ic-check                { color: var(--ic-ok); }
.ic-alert, .ic-ban, .ic-trash             { color: var(--ic-danger); }
.ic-snowflake, .ic-catFrozen              { color: var(--ic-cool); }
.ic-bank, .ic-receipt, .ic-camera, .ic-image { color: var(--ic-card); }
.ic-user                                  { color: var(--ic-phone); }
.ic-lock, .ic-shield                      { color: var(--ic-warn); }
.ic-catSnack   { color: #E8A33D; }
.ic-catDairy   { color: #6BA6E8; }
.ic-catDrink   { color: #2AB3C4; }
.ic-catBeer    { color: #E0A020; }
.ic-catCandy   { color: #E86A9B; }
.ic-catClean   { color: #46B98A; }
.ic-catHygiene { color: #7FB3E8; }
/* Comida preparada (giro restaurante). Tonos que evocan el propio alimento:
   se distinguen entre sí de un vistazo en la tira de pills. */
.ic-catBurger  { color: #D9843B; }
.ic-catTaco    { color: #E0A33C; }
.ic-catHotdog  { color: #E06B4A; }
.ic-catPizza   { color: #D64A3F; }
.ic-catCombo   { color: #7B87D6; }
.ic-catCoffee  { color: #9B6A4A; }

/* Donde el contenedor YA aporta color (botón sólido, chip semántico, badge
   de estado), el icono vuelve a heredar: si no, se pelean dos colores en el
   mismo elemento y se pierde el contraste que da el fondo. */
.btn-primary .ic, .btn-success .ic, .btn-add-initial .ic, .btn-reorder .ic,
.btn-track .ic, .btn-primary-outline .ic, .btn-danger .ic,
.status-badge .ic, [class*="badge-"] .ic, .cat-pill.active .ic,
.nav-item.active .ic, .oi-pickup .ic, .cart-offer-chip .ic,
.product-offer-badge .ic, .badge-heladas .ic, .avatar-initials .ic,
.auth-card-content .ic, .user-avatar .ic, .qty-btn:hover .ic,
.cart-mini-btn:hover .ic, .addr-chip.active .ic,
#location-feedback .ic, #btn-detect-location .ic,
.radio-card:has(input:checked) .ic,
.empty-icon .ic, .empty-icon-pulse .ic, .cart-empty .ic, .catalog-empty .ic {
    color: inherit;
}

/* WhatsApp mantiene su verde de marca en cualquier tema */
.ic-wa { color: #25D366; }


/* ================================================
   ESQUELETO DEL LOGO DEL NEGOCIO  (compartido)
   ================================================
   Los `<img>` de logo salen SIN `src` en el HTML: se lo pone `aplicarLogo()`
   en core.js con el del tenant. Escribir `src="logotienda.png"` en el HTML
   hacía que todo el mundo viera primero el logo del REPOSITORIO y un
   instante después el de su negocio — un cambiazo de marca en la cara, que
   en un producto multi-tenant es lo peor que puede hacer una cabecera.

   Vive aquí y no en style.css porque lo usan varios módulos (tienda y
   cocina); tenerlo en el CSS de uno solo es lo que obliga a duplicarlo. */
@keyframes loading {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Hueco del logo mientras llega el del negocio.
   El <img> sale sin `src` y con opacidad 0; core.js le pone el logo real y la
   clase `is-loaded`. El esqueleto vive en el CONTENEDOR: un <img> sin src no
   tiene caja propia sobre la que animar nada.
   `min-width` y no `width`: con un ancho fijo, un logo más ancho se aplastaría
   —`height` está declarado, así que `max-width` no recalcula la proporción, la
   deforma—. Así el hueco reserva sitio y luego se adapta al logo real. */
.logo-slot {
    min-width: 150px; height: 90px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
}
/* El hueco reserva 150×90 para que la cabecera no salte, pero lo que se PINTA
   mientras carga es solo una barrita centrada. Un bloque del tamaño completo
   con shimmer se leía como un cartel: llamaba más la atención que el propio
   logo cuando por fin entraba, y encima dura unos milisegundos. Un
   marcador de carga tiene que ser más discreto que lo que va a reemplazar. */
.logo-slot::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 82px; height: 9px;
    margin: -4.5px 0 0 -41px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--border-color) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    opacity: .7;
}
.logo-slot:has(.is-loaded)::before { content: none; }
.logo-slot .app-logo,
.logo-slot .header-logo,
.logo-slot .sidebar-logo { position: relative; z-index: 1; opacity: 0; transition: opacity .25s ease; }
.logo-slot .is-loaded { opacity: 1; }
/* Sin soporte de :has() el esqueleto no se apagaría nunca: ahí no se pinta y
   el logo entra visible desde el principio. */
@supports not selector(:has(*)) {
    .logo-slot::before { content: none; }
    .logo-slot .app-logo,
    .logo-slot .header-logo,
    .logo-slot .sidebar-logo { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .logo-slot::before { animation: none; }
}