/*!
 * GENERADO por scripts/build-assets.php. NO EDITAR.
 * Edita la fuente correspondiente y vuelve a ejecutar el generador.
 * Fuentes (16, en orden): reset.css, variables.css, base.css, components/loader.css, components/dialog.css, components/modal-portal.css, components/public-header.css, components/notif-center.css, components/widget-search-results.css, components/product-widget.css, components/sb-tooltip.css, components/sb-toast.css, components/sb-gallery.css, components/sb-media-uploader.css, components/hour-picker.css, components/sb-calendar.css
 * sources-hash: e5d45d2e886f66bd
 */
/* ==== reset.css ==== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* min-height (no height) en body: con height fija la caja mide 100vh aunque el
   contenido desborde, y todo position:sticky hijo de body deja de pegarse al
   pasar el primer viewport de scroll (p.ej. .site-header). */
html { height: 100%; }
body { min-height: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
[hidden] { display: none !important; }

/* ==== variables.css ==== */
:root {
    /* Base — dirección fría y sobria (P0 jul 2026): grises con sesgo azul */
    --c-bg: #f2f4f6;
    --c-surface: #ffffff;
    --c-surface-2: #e9edf1;
    --c-text: #1a222b;
    --c-text-muted: #5b6672;     /* ≥4.5:1 sobre --c-bg */
    --c-border: #dce2e8;         /* borde frío (alias de --c-line) */

    /* Brand primario — navy editorial (unifica con el hero dark) */
    --c-primary: #14314a;
    --c-primary-hover: #0d2436;
    --c-primary-soft: #e7f0f6;
    /* Rol TINTA de la marca. --c-primary es un fondo de botón: en oscuro se
     * queda en #2e5f8a para que la tinta blanca aguante encima, y con ese
     * valor da 2.5:1 usado como texto. Este token tiene el MISMO valor claro
     * y en oscuro sí aclara, para el texto y los íconos de marca. */
    --c-primary-ink: #14314a;

    /* Acento de ACCIÓN — azul acero sobrio (Buscar, Aplicar, CTAs).
     * Oscurecido desde #3a7ca5 porque en el valor anterior ningún rol llegaba:
     * 4.13:1 como tinta sobre --c-bg (ocho migas de pan) y 4.56:1 con tinta
     * blanca encima.
     *
     * Rol FONDO. En claro vale lo mismo que su -ink, así que la separación no
     * cambia un solo píxel de este tema; existe por el bloque dark, donde los
     * dos roles piden direcciones opuestas. Mismo patrón que
     * --c-primary/--c-primary-ink. */
    --c-accent: #35729a;
    --c-accent-hover: #2f6a91;
    --c-accent-soft: #e3edf4;
    /* Rol TINTA del acento (texto, links, íconos). */
    --c-accent-ink: #35729a;
    --c-accent-ink-hover: #2f6a91;

    /* Mint unificado — verde apagado para estado ("abierto", éxito) */
    --c-mint: #3f8a78;
    --c-mint-soft: #e3efec;

    /* Verde de FONDO sólido con tinta blanca encima (píldora "Completada").
       --c-mint / --c-success no sirven ahí: son tinta —se usan como color de
       texto sobre --c-mint-soft— y con blanco encima dan 4.10:1, por debajo del
       mínimo en los dos temas. NO se redefine en oscuro a propósito: quien
       lleva blanco encima tiene que quedarse oscuro, y aclararlo para el tema
       oscuro es justo lo que rompía el badge (2.96:1). Blanco encima 5.19:1;
       la píldora contra la superficie oscura queda en 3.28:1, sobre el 3:1 que
       pide un límite no textual. */
    --c-success-strong: #35786a;

    /* Sky — para uso sobre fondos oscuros (hero editorial) */
    --c-sky: #8fd3ff;
    --c-sky-soft: rgba(143, 211, 255, 0.18);

    /* Edit/links — azul admin, mantenido */
    --c-edit: #1f6bb5;
    --c-edit-hover: #185a96;
    --c-success: var(--c-mint);
    --c-warning: #b9791f;        /* subido contraste sobre blanco */
    --c-danger: #b14545;

    /* Neutros intermedios (nuevos) */
    --c-line: #dce2e8;
    --c-line-strong: #b9c2cb;
    --c-fill: #f7f9fa;           /* hover sutil sobre bg */

    /* Rating — ámbar apagado, único cálido permitido (convención universal) */
    --c-rating: #b58e3e;

    /* ── Paleta base (escala) — Fase 5 D0 ─────────────────────────────────
     * Tokens LITERALES para consolidar los miles de hex hardcodeados de los
     * CSS (reemplazo mecánico 1:1, cero cambio visual). En D2 estos tokens
     * ganan variante dark. NO añadir hex nuevos a los CSS: usar la escala. */
    --c-white: #ffffff;
    --c-gray-100: #f3f4f6;
    --c-gray-200: #e5e7eb;
    --c-gray-300: #d1d5db;
    --c-gray-400: #9ca3af;
    --c-gray-500: #6b7280;
    --c-gray-700: #374151;
    --c-gray-900: #111827;
    --c-slate-50: #f8fafc;
    --c-slate-100: #f1f5f9;
    --c-slate-200: #e2e8f0;
    --c-slate-400: #94a3b8;
    --c-slate-500: #64748b;
    --c-slate-900: #0f172a;
    --c-blue-50: #eff6ff;
    --c-blue-600: #2563eb;
    --c-blue-700: #1d4ed8;
    /* Oscurecido desde #0b6ff0: en CLARO los dos roles mejoran a la vez
     * (tinta sobre blue-50 4.24→4.84, blanco encima 4.62→5.26). Partido en
     * fondo/tinta por el bloque dark, igual que --c-accent. */
    --c-blue-vivid: #0a66e0;
    --c-blue-vivid-ink: #0a66e0;
    --c-green-50: #f0fdf4;
    --c-green-100: #dcfce7;
    --c-green-600: #16a34a;
    --c-green-800: #065f46;
    --c-red-100: #fee2e2;
    --c-red-600: #dc2626;
    --c-red-700: #b91c1c;
    --c-amber-50: #fffbeb;
    --c-amber-100: #fef3c7;
    --c-amber-600: #d97706;
    --c-amber-800: #92400e;
    --c-violet-700: #6d28d9;
    --c-gray-50: #f9fafb;
    --c-blue-100: #dbeafe;
    --c-blue-800: #1e40af;
    --c-green-deep: #166534;
    --c-emerald-100: #d1fae5;
    --c-red-50: #fef2f2;
    --c-red-800: #991b1b;
    --c-amber-200: #fde68a;
    --c-amber-500: #f59e0b;
    --c-amber-700: #b45309;
    --c-violet-50: #eef2ff;
    --c-violet-100: #ede9fe;
    --c-violet-600: #7c3aed;
    --c-pink-800: #9d174d;

    /* ── Pasos que faltaban en la escala (ago 2026) ───────────────────────
     * Los CSS de módulo (lealtad, reservaciones, promociones, eventos…)
     * llevaban estos tonos como hex sueltos. Un hex no invierte: por eso los
     * estados que iban por token se veían bien en oscuro y los que iban por
     * literal quedaban claros con texto claro encima. Valor claro = el literal
     * que ya se pintaba, para no mover el tema claro. */
    --c-red-200: #fecaca;
    --c-red-300: #fca5a5;
    --c-red-400: #f87171;
    --c-red-500: #ef4444;
    --c-blue-200: #bfdbfe;
    --c-blue-300: #93c5fd;
    --c-blue-500: #3b82f6;
    --c-blue-900: #1e3a8a;
    --c-green-200: #bbf7d0;
    --c-green-300: #86efac;
    --c-green-400: #4ade80;
    --c-green-500: #22c55e;
    --c-green-700: #15803d;
    --c-emerald-300: #6ee7b7;
    --c-emerald-500: #10b981;
    --c-emerald-600: #059669;
    --c-emerald-700: #0f6b4e;
    --c-yellow-100: #fef9c3;
    --c-amber-300: #fcd34d;
    --c-amber-900: #854d0e;
    --c-amber-950: #78350f;
    --c-teal-700: #0f766e;
    --c-orange-200: #fed7aa;
    --c-orange-700: #c2410c;
    --c-orange-800: #9a3412;
    --c-violet-300: #c4b5fd;
    --c-violet-500: #8b5cf6;
    --c-violet-800: #5b21b6;
    /* Índigo: mismo 50 que violeta (#eef2ff), sólo cambian los pasos de tinta. */
    --c-indigo-400: #818cf8;
    --c-indigo-500: #6366f1;
    --c-indigo-700: #4338ca;
    --c-indigo-800: #3730a3;
    --c-cyan-50: #ecfeff;
    --c-cyan-100: #cffafe;
    --c-cyan-500: #06b6d4;
    --c-cyan-800: #155e75;
    --c-pink-100: #fce7f3;
    --c-pink-200: #fbcfe8;
    --c-pink-500: #ec4899;
    --c-pink-700: #be185d;

    /* Superficies de marca rosa (mismo rol que --c-brand-surface): fondo de
     * botón que debe seguir siendo oscuro en ambos temas porque su tinta es
     * --c-on-brand. NO se redefinen abajo, a propósito. */
    --c-pink-surface: #9d174d;
    --c-pink-surface-hover: #831240;
    /* Navy del POS de lealtad — mismo rol: fondo oscuro + tinta --c-on-brand. */
    --c-navy-surface: #244977;
    --c-navy-surface-hover: #1a3a5e;
    /* Familia custom del proyecto (navy/steel/ink del hero editorial) */
    --c-navy-950: #071427;
    --c-navy-900: #0f1e2e;
    --c-navy-850: #102033;
    --c-ink-900: #182129;
    --c-ink-800: #1f252b;
    --c-steel-700: #3a5568;
    --c-steel-600: #5c6c7e;
    --c-steel-500: #607086;
    --c-steel-450: #616a73;
    --c-steel-400: #6b7a8d;
    --c-mist: #eef0f2;
    --c-sage-200: #d4d9d4;
    --c-powder: #c9d7e8;
    --c-red-brand: #de3f4f;
    --c-blue-g: #1a73e8;

    /* ── Roles "on-dark" — superficies oscuras FIJAS ──────────────────────
     * Footer, hero editorial y scrims sobre foto son oscuros en AMBOS temas,
     * así que su contenido siempre va claro. Estos tokens NO se redefinen en
     * el bloque dark (a propósito): usarlos evita el bug clásico de mapear un
     * claro-sobre-oscuro a la escala que invierte y dejarlo ilegible. */
    /* Tinta sobre superficies de MARCA (botón primario, chips de acento,
     * badges, scrims sobre foto). Esas superficies siguen siendo de color en
     * el tema oscuro, así que su texto debe seguir siendo claro: por eso este
     * token NO se redefine abajo. Usar --c-white aquí es el error clásico —
     * --c-white invierte a un tono oscuro y deja el texto ilegible. */
    --c-on-brand: #ffffff;
    --c-on-brand-muted: #e2e8f0;   /* texto secundario sobre marca */

    /* Superficies de marca (rol "container" de Material). --c-primary y
     * --c-danger se ACLARAN en el tema oscuro porque ahí también hacen de
     * color de texto; usarlos como fondo de una banda o de un botón deja el
     * bloque claro y su tinta blanca sin contraste. Estos dos, en cambio, se
     * mantienen oscuros en ambos temas. */
    --c-brand-surface: #14314a;
    --c-danger-surface: #b14545;

    --c-dark-surface: #0f0a0d;
    --c-dark-surface-2: #10202a;
    --c-on-dark: #f1f5f9;
    --c-on-dark-muted: #a1a1aa;
    --c-on-dark-faint: #71717a;
    --c-on-dark-dim: #52525b;

    /* Aliases de compatibilidad — tokens referenciados sin fallback en CSS
     * legacy que nunca fueron definidos (sus declaraciones se ignoraban).
     * CssTokenGuardTest impide que vuelva a aparecer una referencia huérfana. */
    --c-muted: var(--c-text-muted);
    --c-surface-1: var(--c-surface);
    --c-text-soft: var(--c-text-muted);
    --c-bg-soft: var(--c-fill);
    --c-surface-subtle: var(--c-surface-2);
    --c-primary-dark: var(--c-primary-hover);
    --c-info: var(--c-edit);

    /* ── Escala tipográfica ───────────────────────────────────────────────
     * Derivada del uso real, no inventada: un histograma de las 2,850
     * declaraciones font-size del proyecto se concentra en 11-14px, y estos
     * nueve pasos cubren el 99.6%. Los nombres son ROLES, no tamaños, para
     * que subir el cuerpo sea cambiar una línea y no 2,850.
     *
     * OJO: hoy --fs-body vale 14px porque eso es lo que el producto usa
     * como texto corrido. El 75% del texto mide 14px o menos, lo cual es
     * pequeño para lectura sostenida; corregirlo es una decisión aparte y
     * este token es el lugar donde se toma. */
    --fs-micro:   0.6875rem;  /* 11px — sellos, contadores */
    --fs-caption: 0.75rem;    /* 12px — metadatos, ayuda */
    --fs-small:   0.8125rem;  /* 13px — etiquetas, secundario */
    --fs-body:    0.875rem;   /* 14px — texto corrido */
    --fs-lead:    1rem;       /* 16px — entradas, precio destacado */
    --fs-h3:      1.125rem;   /* 18px — título de tarjeta */
    --fs-h2:      1.375rem;   /* 22px — título de sección */
    --fs-h1:      1.75rem;    /* 28px — título de página, uno por pantalla */
    --fs-display: 2.25rem;    /* 36px — héroes y cifras grandes */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
    --shadow-md: 0 8px 20px rgba(17, 24, 39, 0.06);
    --shadow-lg: 0 14px 28px rgba(17, 24, 39, 0.08);

    /* Botones — estándar de hover "plano (solo color)": sin movimiento ni
       cambio de sombra. La transición sólo anima propiedades de color.
       Añade `, filter .18s ease` si el botón usa filter: brightness() en hover. */
    --btn-transition: background-color .18s ease, border-color .18s ease, color .18s ease;

    /* Fuente única en todo el sitio: Poppins. --font-display se conserva como
       slot semántico para títulos, pero apunta a la misma familia. */
    --font-sans: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1440px;

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 1000;
    --z-toast: 1100;
}

/* ══ MODO OSCURO (Fase 5 D2 — BETA, opt-in vía toggle) ══════════════════════
 * Solo se activa con data-theme="dark" en <html> (theme-toggle.js + localStorage).
 * SIN auto prefers-color-scheme hasta cubrir la cola larga de hex (¬60% aún
 * hardcodeado): un usuario con SO oscuro no debe recibir un tema a medias.
 * Misma dirección fría del sitio: azules-gris con navy editorial. */
:root[data-theme="dark"] {
    --c-bg: #0c1219;
    --c-surface: #141d27;
    --c-surface-2: #1a2530;
    --c-text: #e2e9f0;
    --c-text-muted: #93a3b3;
    --c-border: #263442;
    --c-line: #263442;
    --c-line-strong: #3a4c5e;
    --c-fill: #182330;

    /* Superficies de marca: se OSCURECEN (no se aclaran) para que la tinta
     * --c-on-brand siga legible encima. Ver el bloque light. */
    --c-brand-surface: #16344d;
    --c-danger-surface: #8f3636;

    --c-primary: #2e5f8a;
    --c-primary-hover: #3a719f;
    --c-primary-soft: #16293c;
    --c-primary-ink: #7fb0dd;
    /* Aquí los dos roles piden direcciones OPUESTAS: como fondo de CTA con
     * tinta blanca hay que oscurecer, como tinta sobre superficie hay que
     * aclarar. Por eso el token está partido. El valor único anterior
     * (#559ac6) servía a la tinta y dejaba el CTA en 3.08:1 —medido en "Crear
     * mi página gratis" y en el selector de mapa—. Ahora: fondo 4.56:1 con
     * blanco y sigue ≥3:1 como borde sobre --c-surface (3.73). */
    --c-accent: #3f7ba7;
    /* Hover OSCURECE (igual que en light): con el texto blanco que base.css
       fuerza en button:hover, aclarar caía a 2.5:1 (WCAG UI pide ≥3:1). */
    --c-accent-hover: #39708f;
    /* Rol TINTA: aquí el hover ACLARA —dirección contraria a la del fondo—,
       que es lo que da énfasis a un texto sobre superficie oscura. */
    --c-accent-ink: #559ac6;
    --c-accent-ink-hover: #7fb0dd;
    --c-accent-soft: #14293a;
    --c-mint: #4da58e;
    --c-mint-soft: #12302a;
    --c-sky-soft: rgba(143, 211, 255, 0.12);
    --c-edit: #5b9bd9;
    --c-edit-hover: #74afe0;
    --c-warning: #d9a34f;
    --c-danger: #dd7373;
    --c-rating: #cfa957;

    /* Escala — rol invertido (claros→superficies oscuras, oscuros→texto claro) */
    --c-white: #141d27;
    --c-gray-50: #17212c;
    --c-gray-100: #1b2733;
    --c-gray-200: #263442;
    --c-gray-300: #354757;
    --c-gray-400: #6d8092;
    --c-gray-500: #93a3b3;
    --c-gray-700: #c6d1dc;
    --c-gray-900: #e9eff5;
    --c-slate-50: #16202b;
    --c-slate-100: #1a2530;
    --c-slate-200: #273645;
    --c-slate-400: #708399;
    --c-slate-500: #93a5b8;
    --c-slate-900: #e8eef6;
    --c-blue-50: #142638;
    --c-blue-100: #1a3049;
    --c-blue-600: #5f95ee;
    --c-blue-700: #7da6f0;
    --c-blue-800: #93b5f2;
    /* Fondo oscurecido (blanco encima: 2.97→4.89:1, el CTA "Subir una foto");
       la tinta conserva el valor claro de antes, que ya daba 5.73 sobre
       --c-surface. */
    --c-blue-vivid: #3572bd;
    --c-blue-vivid-ink: #4f97f5;
    --c-blue-g: #6fa5ee;
    --c-green-50: #102a1d;
    --c-green-100: #143526;
    --c-green-600: #46b878;
    --c-green-800: #7dd8ab;
    --c-green-deep: #6fce9f;
    --c-emerald-100: #12352b;
    --c-red-50: #331b1b;
    --c-red-100: #422222;
    --c-red-600: #e57373;
    --c-red-700: #ec8f8f;
    --c-red-800: #f2a6a6;
    --c-red-brand: #e56575;
    --c-amber-50: #33270f;
    --c-amber-100: #3d2e12;
    --c-amber-200: #57431a;
    --c-amber-500: #e0a33e;
    --c-amber-600: #e2ad55;
    --c-amber-700: #eabb70;
    --c-amber-800: #f0cd92;
    --c-violet-50: #211d33;
    --c-violet-100: #2a2440;
    --c-violet-600: #a48ae8;
    --c-violet-700: #b49cec;
    --c-pink-800: #ef9ec5;

    /* Pasos añadidos — superficies/bordes oscurecen, tintas aclaran. */
    --c-red-200: #4b2828;
    --c-red-300: #5c3232;
    --c-red-400: #6b3a3a;
    --c-red-500: #de6a6a;
    --c-blue-200: #23384f;
    --c-blue-300: #2f4a68;
    --c-blue-500: #6aa5f7;
    --c-blue-900: #a8c4f5;
    --c-green-200: #1a4531;
    --c-green-300: #23543a;
    --c-green-400: #357a55;
    --c-green-500: #4ec97a;
    --c-green-700: #5ec983;
    --c-emerald-300: #1e5544;
    --c-emerald-500: #35b98c;
    --c-emerald-600: #3fbf94;
    --c-emerald-700: #6ccfa4;
    --c-yellow-100: #3b3a14;
    --c-amber-300: #5c4720;
    --c-amber-900: #edc98f;
    --c-amber-950: #f5d9a8;
    --c-teal-700: #5cc9bd;
    --c-orange-200: #4d3319;
    --c-orange-700: #f0a878;
    --c-orange-800: #f0b183;
    --c-violet-300: #3b3357;
    --c-violet-500: #9d84ef;
    --c-violet-800: #c7b2f2;
    --c-indigo-400: #4f4a80;
    --c-indigo-500: #7b7bea;
    --c-indigo-700: #9b95ee;
    --c-indigo-800: #a9a4f0;
    --c-cyan-50: #0e2a2e;
    --c-cyan-100: #133a42;
    --c-cyan-500: #3fbcd6;
    --c-cyan-800: #7fd3e6;
    --c-pink-100: #3a1e2c;
    --c-pink-200: #47243a;
    --c-pink-500: #ef74ad;
    --c-pink-700: #f08fbc;

    /* Custom navy/ink/steel: navys son SUPERFICIES (hero) → se quedan;
     * inks/steels son mayormente TEXTO → aclaran. */
    --c-ink-900: #dbe4ec;
    --c-ink-800: #e6edf3;
    --c-steel-700: #b5c5d6;
    --c-steel-600: #a5b5c8;
    --c-steel-500: #8fa2b8;
    --c-steel-450: #93a1af;
    --c-steel-400: #8b9db0;
    --c-mist: #1a242f;
    --c-sage-200: #2a3438;
    --c-powder: #24384d;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 14px 28px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
}

/* ==== base.css ==== */
body {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-sans);
    font-size: var(--fs-lead);
    letter-spacing: 0.01em;
    /* Guard de scroll horizontal a nivel de página. Antes vivía en `.site-header`
       (overflow-x:hidden), pero ahí recortaba los dropdowns del header. */
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
}

.skip-link {
    position: fixed;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 10000;
    transform: translateY(-200%);
    clip-path: inset(50%);
    background: var(--c-brand-surface);
    color: var(--c-on-brand);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    clip-path: none;
    outline: 2px solid var(--c-surface);
    outline-offset: 2px;
}

.app {
    padding: var(--space-4);
    max-width: 100%;
}

a {
    color: var(--c-primary-ink);
    transition: color .2s ease;
}
a:hover { color: var(--c-primary-hover); text-decoration: none; }

button, .btn {
    background: var(--c-brand-surface);
    color: var(--c-on-brand);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    min-height: 44px;
    transition: var(--btn-transition);
}
button:hover, .btn:hover { background: var(--c-primary-hover); color: var(--c-on-brand); }
button:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn--primary { background: var(--c-brand-surface); color: var(--c-on-brand); border-color: var(--c-primary); }
.btn--primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: var(--c-on-brand); }

.btn--secondary {
    background: var(--c-surface);
    color: var(--c-text);
    border-color: var(--c-border);
}
.btn--secondary:hover { background: var(--c-surface-2); color: var(--c-text); }

.btn--ghost {
    background: transparent;
    color: var(--c-text);
    border-color: var(--c-border);
}
.btn--ghost:hover { background: var(--c-surface-2); color: var(--c-text); }

.btn--danger { background: var(--c-danger-surface); color: var(--c-on-brand); border-color: var(--c-danger); }
.btn--danger:hover { background: color-mix(in srgb, var(--c-danger) 80%, black); border-color: color-mix(in srgb, var(--c-danger) 80%, black); color: var(--c-on-brand); }

.btn--edit { background: var(--c-edit); color: var(--c-on-brand); border-color: var(--c-edit); }
.btn--edit:hover { background: var(--c-edit-hover); color: var(--c-on-brand); border-color: var(--c-edit-hover); }

.btn--sm { padding: 5px 12px; font-size: .78rem; min-height: 32px; }

/* `:where()` mantiene la exclusión de checkbox/radio pero aporta 0 de
   especificidad, de modo que el selector queda en (0,0,1). Así cualquier
   override por clase (p. ej. `.lc-search__input { border:none }`, (0,1,0))
   gana siempre y los inputs "sellados" se funden con su contenedor-ícono.
   Antes, `input:not([type=…]):not([type=…])` valía (0,2,1) y ganaba al
   override, dejando el input con su propia caja (borde+fondo) visible. */
input:where(:not([type="checkbox"]):not([type="radio"])), textarea, select {
    width: 100%;
    padding: var(--space-3);
    background: var(--c-surface);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    min-height: 44px;
}
/* `:where()` deja el selector en (0,1,0): los inputs "sellados" que declaran
   `outline:none` lo sobreescriben (sin recuadro de foco, el contenedor marca el
   foco vía `:focus-within`), mientras los inputs normales de formulario —que no
   declaran outline— conservan su anillo de foco accesible. */
:where(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus {
    outline: 2px solid rgba(58, 85, 104, 0.25);
    outline-offset: 1px;
    border-color: var(--c-primary);
}

/* Autocompletado: el navegador fuerza un fondo amarillo/olivo en los campos
   autocompletados, que rompe el diseño y deja ilegibles los íconos sobrepuestos
   (p. ej. el toggle de contraseña). Se enmascara con un box-shadow inset del
   color real del input y se fija el color del texto. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--c-text);
    -webkit-box-shadow: 0 0 0 1000px var(--c-surface) inset;
            box-shadow: 0 0 0 1000px var(--c-surface) inset;
    caret-color: var(--c-text);
    /* Retrasa la animación de fondo del autofill para que no "parpadee" el olivo. */
    transition: background-color 600000s 0s, color 600000s 0s;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    width: 44px;
    min-width: 44px;
    height: 26px;
    min-height: 26px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    border: 1px solid color-mix(in srgb, var(--c-border) 85%, transparent);
    border-radius: 999px;
    background: var(--c-gray-300);
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--c-white);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
    transition: transform 0.2s ease;
}

input[type="checkbox"]:checked {
    background: var(--c-brand-surface);
    border-color: var(--c-primary);
}

input[type="checkbox"]:checked::after {
    transform: translateX(18px);
}

input[type="checkbox"]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--c-primary) 28%, transparent);
    outline-offset: 2px;
}

input[type="checkbox"]:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.flash {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}
.flash--success { background: var(--c-green-100); color: var(--c-green-deep); }
.flash--error { background: var(--c-red-100); color: var(--c-red-800); }

@media (min-width: 768px) {
    .app { padding: var(--space-5); max-width: 1280px; margin-inline: auto; }
}
@media (min-width: 1024px) {
    .app { padding: var(--space-6); }
}

/* ── Focus-visible global accesible ────────────────────────────────
   Todos los elementos enfocables muestran un anillo de foco consistente
   cuando se navega con teclado, sin molestar al usuario de mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 6px);
}

/* ── Reduced motion: respeta la preferencia del usuario ────────────
   Desactiva transiciones y animaciones para usuarios sensibles al movimiento. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Custom file picker (.pic-pick) ──────────────────────────── */
.pic-pick {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    width: 100%;
    position: relative;
    min-height: 38px;
}

.pic-pick__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
    background: var(--c-surface-2);
    color: var(--c-text);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4;
    transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
    user-select: none;
    pointer-events: none;
}

.pic-pick__btn svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.pic-pick__name {
    font-size: 0.82rem;
    color: var(--c-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
    user-select: none;
}

.pic-pick__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.pic-pick__input:focus { outline: none; }

.pic-pick:hover .pic-pick__btn,
.pic-pick:focus-within .pic-pick__btn {
    border-color: var(--c-primary);
    background: color-mix(in srgb, var(--c-brand-surface) 5%, var(--c-surface));
    color: var(--c-primary-ink);
}

.pic-pick:focus-within .pic-pick__btn {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 15%, transparent);
}

.pic-pick:hover .pic-pick__btn svg,
.pic-pick:focus-within .pic-pick__btn svg { opacity: 1; }

.pic-pick--ready .pic-pick__btn {
    border-color: var(--c-success);
    background: color-mix(in srgb, var(--c-success) 6%, var(--c-surface));
    color: var(--c-success);
}

.pic-pick--ready .pic-pick__btn svg { opacity: 1; }

.pic-pick--ready .pic-pick__name {
    color: var(--c-text);
    font-weight: 500;
}

/* ── Acabado global: selección de texto y scrollbars con tokens del tema ── */
::selection { background: var(--c-accent-soft); color: var(--c-text); }
* { scrollbar-width: thin; scrollbar-color: var(--c-line-strong) transparent; }

/* ── Error de validación bajo un campo ─────────────────────────────────
   Lo emite field_error_html(); el input queda enlazado con aria-describedby,
   así que un lector de pantalla lo anuncia al enfocarlo. */
.form-field__error {
    margin: 4px 0 0;
    color: var(--c-danger);
    font-size: 0.85rem;
    line-height: 1.35;
}
[aria-invalid="true"] {
    border-color: var(--c-danger);
}
[aria-invalid="true"]:focus-visible {
    outline-color: var(--c-danger);
}

/* Texto solo para lectores de pantalla: visible para tecnología asistiva,
   fuera del flujo visual. No usar display:none — eso lo oculta también al
   lector. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Área táctil mínima ───────────────────────────────────────────────────
 * CLAUDE.md pide 44x44px en botones e inputs, y el producto entra por un QR:
 * todo el embudo de demanda es alguien de pie, con una mano, en un local.
 * Pero subir la altura de estos controles rompería las filas donde viven.
 *
 * La solución estándar: el control conserva su tamaño VISUAL y un
 * pseudo-elemento centrado extiende la zona sensible a 44x44. No ocupa
 * espacio, así que el layout no se mueve ni un píxel.
 *
 * `position: relative` va sin !important a propósito: si un módulo posiciona
 * el control de otra forma más adelante, gana el módulo —y sigue siendo
 * bloque contenedor, que es lo único que este truco necesita.
 *
 * Esta lista es la fuente única: ConventionGuardTest la lee de aquí para no
 * contar como incumplimiento lo que ya está ampliado. */
:is(
    .btn--sm,
    .cm-btn--icon,
    .ep-share-btn,
    .ep-section__edit-btn,
    .ep-tier-action-btn,
    .dir-filter-modal__geo-btn,
    .post-card__menu-btn
) {
    position: relative;
}
:is(
    .btn--sm,
    .cm-btn--icon,
    .ep-share-btn,
    .ep-section__edit-btn,
    .ep-tier-action-btn,
    .dir-filter-modal__geo-btn,
    .post-card__menu-btn
)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
    /* Sin fondo: sólo captura el toque. */
}

/* ==== components/loader.css ==== */
/* ── Section loader (spinner + label + progress bar) ─────────────────────── */
.cm-section-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 20px;
    color: var(--c-text-muted);
    font-size: var(--fs-body);
    letter-spacing: 0.01em;
    animation: cm-loader-appear 0.22s ease-out both;
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
}

.cm-section-loader__spin {
    display: block;
    width: 30px;
    height: 30px;
    border: 3px solid var(--c-slate-200);
    border-top-color: var(--c-edit);
    border-radius: 50%;
    animation: biz-spin 0.75s linear infinite;
}

.cm-section-loader__label {
    display: flex;
    align-items: baseline;
    gap: 1px;
}

.cm-section-loader__dots {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    width: 0;
    animation: cm-dots 1.4s steps(4, end) infinite;
}

.cm-section-loader__dots::before {
    content: '...';
}

.cm-section-loader__bar {
    width: 140px;
    height: 3px;
    background: var(--c-accent-soft);
    border-radius: 3px;
    overflow: hidden;
}

.cm-section-loader__bar::after {
    content: '';
    display: block;
    height: 100%;
    background: var(--c-edit);
    border-radius: 3px;
    animation: cm-progress-fill 2.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes biz-spin { to { transform: rotate(360deg); } }

@keyframes cm-dots {
    from { width: 0; }
    to   { width: 1.1em; }
}

@keyframes cm-loader-appear {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes cm-progress-fill {
    0%   { width: 0%; }
    40%  { width: 55%; }
    70%  { width: 75%; }
    90%  { width: 85%; }
    100% { width: 90%; }
}

@media (prefers-reduced-motion: reduce) {
    .cm-section-loader,
    .cm-section-loader__bar::after { animation: none; }
    .cm-section-loader__spin { animation: none; border-top-color: var(--c-edit); }
    .cm-section-loader__dots { animation: none; width: auto; }
    .cm-section-loader__bar::after { width: 60%; }
}

/* ── sb-loader — overlay reutilizable ────────────────────────────────────── */
/* Default (non-modal): fondo blanco + borde giratorio animado               */
/* Modal: fondo blanco sólido, sin borde animado (.sb-loader--modal)         */
/* Eliminar: borde rojo (.sb-loader--danger)                                 */

.sb-loader.cm-section-loader {
    position: absolute;
    inset: 0;
    background: transparent;
    overflow: hidden;
    z-index: 20;
    grid-column: unset;
    padding: 0;
    margin: 0;
    animation: cm-loader-appear 0.15s ease-out both;
}

.sb-loader.cm-section-loader::before {
    content: '';
    position: absolute;
    width: 300%;
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    background: conic-gradient(from 0deg, var(--c-blue-vivid) 0deg, color-mix(in srgb, var(--c-sky) 80%, var(--c-white)) 80deg, transparent 160deg);
    animation: sb-border-spin 1.4s linear infinite;
    z-index: 0;
}

.sb-loader.cm-section-loader::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--c-white);
    border-radius: inherit;
    z-index: 1;
}

.sb-loader.cm-section-loader > * {
    position: relative;
    z-index: 2;
}

/* Danger variant — borde rojo */
.sb-loader--danger.cm-section-loader::before {
    background: conic-gradient(from 0deg, var(--c-danger) 0deg, color-mix(in srgb, var(--c-danger) 55%, var(--c-white)) 80deg, transparent 160deg);
}

.sb-loader--danger .cm-section-loader__spin {
    border-top-color: var(--c-danger);
}

.sb-loader--danger .cm-section-loader__bar::after {
    background: var(--c-danger-surface);
}

/* Modal variant — blanco sólido, sin borde animado */
.sb-loader--modal.cm-section-loader {
    background: color-mix(in srgb, var(--c-surface) 93%, transparent);
    overflow: visible;
}

.sb-loader--modal.cm-section-loader::before,
.sb-loader--modal.cm-section-loader::after {
    display: none;
}

.sb-loader--modal.cm-section-loader > * {
    position: static;
    z-index: auto;
}

@keyframes sb-border-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sb-loader.cm-section-loader::before { animation: none; }
}

/* ==== components/dialog.css ==== */
/* ── Custom confirm dialog — shared between admin + public layouts ── */
.sb-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(17, 24, 39, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.sb-dialog-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.sb-dialog {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
    width: 100%;
    max-width: 380px;
    transform: translateY(8px) scale(0.98);
    transition: transform 0.18s ease, opacity 0.18s ease;
    opacity: 0;
}

.sb-dialog-backdrop.is-open .sb-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.sb-dialog__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.sb-dialog__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sb-dialog__icon--warning {
    background: color-mix(in srgb, var(--c-warning) 12%, transparent);
    color: var(--c-warning);
}

.sb-dialog__icon--danger {
    background: color-mix(in srgb, var(--c-danger) 12%, transparent);
    color: var(--c-danger);
}

.sb-dialog__icon--info {
    background: color-mix(in srgb, var(--c-brand-surface) 12%, transparent);
    color: var(--c-primary-ink);
}

.sb-dialog__message {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--c-text);
}

.sb-dialog__sub {
    font-size: 0.82rem;
    color: var(--c-text-muted);
    margin-bottom: var(--space-4);
    margin-top: var(--space-1);
    line-height: 1.5;
    padding-left: calc(32px + var(--space-3));
}

.sb-dialog__sub[hidden] {
    display: none;
}

/* El #id vence a la regla global `input{width:100%}` de base.css (mayor especificidad). */
#sb-dialog-input.sb-dialog__input {
    display: block;
    width: 90%;
    box-sizing: border-box;
    margin: var(--space-3) auto var(--space-4);
    padding: 0.6rem 0.75rem;
    font: inherit;
    color: var(--c-text, var(--c-gray-900));
    background: var(--c-surface, var(--c-white));
    border: 1px solid var(--c-border, var(--c-gray-300));
    border-radius: var(--radius-md, 8px);
}
.sb-dialog__input:focus {
    outline: none;
    border-color: var(--c-primary, var(--c-steel-700));
    box-shadow: 0 0 0 3px rgba(58, 85, 104, 0.15);
}
.sb-dialog__input[hidden] { display: none; }

.sb-dialog__header:has(+ .sb-dialog__sub:not([hidden])) {
    margin-bottom: 0;
}

.sb-dialog__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    margin-top: var(--space-4);
}

/* ==== components/modal-portal.css ==== */
/**
 * Scroll genérico para overlays/modales gestionados por modal-portal.js.
 * Las clases las añade ese script a cualquier modal del sistema, garantizando
 * que el panel nunca exceda la pantalla y siempre tenga su propio scroll
 * (los botones quedan accesibles). El CSS específico de cada modal puede
 * sobreescribir estas reglas si necesita otro max-height.
 */
.sb-modal-scroll {
    /* Red de seguridad: si el panel aún excede el viewport, el overlay scrollea. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sb-modal-scroll__panel {
    max-height: 92dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Fallback para navegadores sin unidades dinámicas (dvh). */
@supports not (height: 1dvh) {
    .sb-modal-scroll__panel { max-height: 92vh; }
}

/* ──────────────────────────────────────────────────────────────────────────
   NORMALIZACIÓN DE VENTANAS (modales centrados)
   ----------------------------------------------------------------------------
   Histórico: cada módulo definía su propia caja con anchos dispares (380, 420,
   440, 460, 480, 520, 560, 580, 600, 680, 720, 920px), así que las ventanas se
   veían de distintos tamaños y, al variar el tamaño, "más arriba o abajo".
   Aquí se unifican TODAS las ventanas centradas del sistema a un único ancho
   (560px) y una presentación común (radio + sombra). Como todas ya se centran
   en su propio overlay (flex center / grid place-items / top-left 50%), igualar
   el ancho iguala también el centro → ninguna aparece más grande, más pequeña,
   ni más arriba/abajo que otra.

   `!important` es deliberado y está permitido: estas son reglas de una utilidad
   de normalización documentada (CLAUDE.md → "salvo utility classes
   documentadas"). Gana sin depender del orden de carga de cada CSS de módulo.

   NO se toca `display`, `position` ni el mecanismo de mostrar/ocultar de cada
   modal (atributo `hidden`, `.is-open`, opacidad…): solo ancho y presentación.

   EXCLUIDOS a propósito (no son ventanas centradas: drawers / sheets laterales
   o paneles de cajón con su propia UX direccional):
     · .usr-notif-panel        (centro de notificaciones — drawer derecho)
     · .bdl-layer              (paquetes — drawer derecho)
     · .dir-filter-modal__panel(filtros — sheet móvil / drawer derecho desktop)
     · .admin-edit-layer       (panel lateral canónico del CRUD admin)
     · .su-sidebar-overlay      (sidebar super-user)
     · <dialog> nativos (.nb-hist-dialog, .sp-cancel-dialog…) — viven en top-layer
     · .sb-modal--celebration   (variante a pantalla completa de SBModal: el
                                 momento de canje; ver sb-modal.css)
   Forzarlos a una caja centrada de 560px rompería su UX de cajón.
   ────────────────────────────────────────────────────────────────────────── */

/* Ancho único para TODAS las ventanas (incluye las sheets que en desktop se
   vuelven ventana). `min(…, calc(100vw - 2rem))` garantiza el tope de 560px y a
   la vez un margen mínimo respecto a los bordes en pantallas angostas, sin
   depender de que el overlay tenga padding. */
.biz-contact-modal__panel,
.biz-media-modal__panel,
.biz-schedule-modal__panel,
.biz-location-modal__panel,
.biz-confirm-modal__panel,
.cm-extras-modal__sheet,
.cm-upgrade-modal__panel,
.biz-upgrade-modal__panel,
.rn-modal,
.loy-modal,
.rsv-svc-form,
.inv-dialog,
.reviews-report-modal__panel,
.uaddr-modal__dialog,
.ucal-day-modal__panel,
.claim-modal,
.sb-dialog,
.pol-layer,
.sb-modal:not(.sb-modal--celebration),
.usr-photo-modal__panel,
.usettings,
.usr-modal__panel,
.usr-card-modal,
.ld-auth-modal__sheet {
    width: min(560px, calc(100vw - 2rem)) !important;
    max-width: 560px !important;
    box-sizing: border-box;
}

/* Presentación común (radio + sombra) para las ventanas centradas. Se omiten
   las sheets que suben desde abajo en móvil (.usr-photo-modal__panel,
   .usettings, .usr-modal__panel, .usr-card-modal, .ld-auth-modal__sheet) porque
   su radio adaptativo "solo esquinas superiores" en móvil es intencional. */
.biz-contact-modal__panel,
.biz-media-modal__panel,
.biz-schedule-modal__panel,
.biz-location-modal__panel,
.biz-confirm-modal__panel,
.cm-extras-modal__sheet,
.cm-upgrade-modal__panel,
.biz-upgrade-modal__panel,
.rn-modal,
.loy-modal,
.rsv-svc-form,
.inv-dialog,
.reviews-report-modal__panel,
.uaddr-modal__dialog,
.ucal-day-modal__panel,
.claim-modal,
.sb-dialog,
.pol-layer,
.sb-modal:not(.sb-modal--celebration) {
    border-radius: var(--radius-lg, 12px) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22) !important;
}

/* ==== components/public-header.css ==== */
/* ─── Public Site Header ──────────────────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    /* Sin overflow aquí: `overflow-x:hidden` convertía al header en un contexto
       de recorte que ocultaba los dropdowns absolutos (selector de idioma, menú
       de usuario). El guard de scroll horizontal vive en `body` (base.css). */
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0 var(--space-4);
    height: 56px;
    max-width: 1280px;
    margin: 0 auto;
}

/* ─── Logo ─────────────────────────────────────────────────────────────────── */

.site-header__logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--c-text);
    flex-shrink: 0;
}

.site-header__logo-mark {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.site-header__logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.site-header__logo-text {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.3px;
    color: var(--c-primary-ink);
    display: none;
}

/* Punto naranja de acento de marca tras "Bitsy Maps" */
.site-header__logo-dot {
    color: var(--c-accent-ink);
}

/* ─── Nav actions (right side) ─────────────────────────────────────────────── */

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Guest links */
.site-header__guest-link {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--c-text-muted);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}

.site-header__guest-link:hover {
    color: var(--c-text);
    background: var(--c-surface-2);
}

.site-header__guest-cta {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--c-on-brand);
    background: var(--c-brand-surface);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    transition: background 0.15s;
    white-space: nowrap;
    min-height: unset;
    border: none;
}

.site-header__guest-cta:hover {
    background: var(--c-primary-hover);
    color: var(--c-on-brand);
}

/* ─── User menu ─────────────────────────────────────────────────────────────── */

.site-header__user {
    position: relative;
}

.site-header__user-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
    cursor: pointer;
    color: var(--c-text);
    min-height: 36px;
    transition: background 0.15s, border-color 0.15s;
}

.site-header__user-btn:hover {
    background: var(--c-surface-2);
    border-color: var(--c-primary);
    color: var(--c-text);
}

.site-header__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c-brand-surface);
    color: var(--c-on-brand);
    font-size: var(--fs-caption);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    text-transform: uppercase;
}

.site-header__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.site-header__user-name {
    font-size: var(--fs-small);
    font-weight: 600;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: none;
}

.site-header__chevron {
    width: 14px;
    height: 14px;
    color: var(--c-text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.site-header__user--open .site-header__chevron {
    transform: rotate(180deg);
}

/* ─── Dropdown ─────────────────────────────────────────────────────────────── */

.site-header__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2) 0;
    z-index: var(--z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    pointer-events: none;
}

.site-header__user--open .site-header__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.site-header__dropdown-header {
    padding: var(--space-2) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--space-2);
}

.site-header__dropdown-name {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--c-text);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-header__dropdown-email {
    font-size: var(--fs-caption);
    color: var(--c-text-muted);
    display: block;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-header__dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-body);
    color: var(--c-text);
    text-decoration: none;
    transition: background 0.12s;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    min-height: unset;
    font-family: inherit;
    border-radius: 0;
}

.site-header__dropdown-item:hover {
    background: var(--c-surface-2);
    color: var(--c-text);
}

.site-header__dropdown-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--c-text-muted);
}

.site-header__dropdown-divider {
    height: 1px;
    background: var(--c-border);
    margin: var(--space-2) 0;
}

.site-header__dropdown-item--danger {
    color: var(--c-danger);
}

.site-header__dropdown-item--danger:hover {
    background: var(--c-red-50);
    color: var(--c-danger);
}

.site-header__dropdown-item--danger svg {
    color: var(--c-danger);
}

/* ─── Responsive ────────────────────────────────────────────────────────────── */

@media (min-width: 480px) {
    .site-header__logo-text {
        display: block;
    }
}

@media (min-width: 768px) {
    .site-header__inner {
        padding: 0 var(--space-5);
        height: 60px;
    }

    .site-header__user-name {
        display: block;
    }
}

/* ─── Adjust main content so it's not hidden behind sticky header ─────────── */

.app {
    padding-top: var(--space-4);
}

/* ─── Hide the HeroSearch widget's built-in topbar — the global site-header replaces it ─── */

.wgt-hero__topbar {
    display: none !important;
}

/* ─── User Settings Modal ──────────────────────────────────────────────────── */

.usettings-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(17, 24, 39, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;
}

.usettings-backdrop--open {
    opacity: 1;
    visibility: visible;
}

.usettings {
    background: var(--c-surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    transform: translateY(24px);
    transition: transform 0.25s ease;
}

.usettings-backdrop--open .usettings {
    transform: translateY(0);
}

.usettings__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--c-border);
    position: sticky;
    top: 0;
    background: var(--c-surface);
    z-index: 1;
}

.usettings__title {
    font-size: var(--fs-lead);
    font-weight: 700;
    color: var(--c-text);
    margin: 0;
}

.usettings__close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--c-text-muted);
    transition: background 0.12s, color 0.12s;
    padding: 0;
    flex-shrink: 0;
}

.usettings__close:hover {
    background: var(--c-surface-2);
    color: var(--c-text);
}

.usettings__close svg {
    width: 16px;
    height: 16px;
}

.usettings__tabs {
    display: flex;
    border-bottom: 1px solid var(--c-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.usettings__tabs::-webkit-scrollbar {
    display: none;
}

.usettings__tab {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--c-text-muted);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    min-height: unset;
}

.usettings__tab:hover {
    color: var(--c-text);
    background: var(--c-surface-2);
}

.usettings__tab--active,
.usettings__tab[aria-selected="true"] {
    color: var(--c-primary-ink);
    border-bottom-color: var(--c-primary);
}

.usettings__panel {
    padding: var(--space-5);
}

.usettings__field {
    margin-bottom: var(--space-4);
}

.usettings__label {
    display: block;
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--c-text);
    margin-bottom: var(--space-1);
}

.usettings__input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    color: var(--c-text);
    background: var(--c-surface);
    transition: border-color 0.15s;
    font-family: inherit;
    box-sizing: border-box;
}

.usettings__input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(58, 85, 104, 0.12);
}

.usettings__input:-webkit-autofill,
.usettings__input:-webkit-autofill:hover,
.usettings__input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--c-surface) inset;
    box-shadow: 0 0 0px 1000px var(--c-surface) inset;
    -webkit-text-fill-color: var(--c-text);
}

.usettings__feedback {
    font-size: var(--fs-small);
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
}

.usettings__feedback--error {
    color: var(--c-danger);
    background: var(--c-red-50);
    border: 1px solid rgba(155, 69, 69, 0.2);
}

.usettings__feedback--success {
    color: var(--c-success);
    background: color-mix(in srgb, var(--c-mint-soft) 55%, var(--c-white));
    border: 1px solid rgba(47, 111, 87, 0.2);
}

.usettings__submit {
    width: 100%;
    margin-top: var(--space-2);
}

.usettings__danger-notice {
    background: var(--c-red-50);
    border: 1px solid rgba(155, 69, 69, 0.25);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.usettings__danger-notice strong {
    font-size: var(--fs-body);
    color: var(--c-danger);
}

.usettings__danger-notice span {
    font-size: var(--fs-small);
    color: var(--c-text-muted);
}

@media (min-width: 480px) {
    .usettings-backdrop {
        align-items: center;
    }

    .usettings {
        border-radius: var(--radius-lg);
        max-width: 440px;
        width: 90%;
        max-height: 80vh;
    }
}

/* ── Selector de idioma (i18n) — usa <details> nativo, sin JS (CSP-safe) ── */
.lang-switch{position:relative}
.lang-switch__toggle{display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer;padding:6px 10px;border:1px solid var(--c-border,var(--c-slate-200));border-radius:8px;font-size:.8rem;font-weight:700;color:var(--c-text);background:var(--c-white);user-select:none}
.lang-switch__toggle::-webkit-details-marker{display:none}
.lang-switch__toggle:hover{background:var(--c-slate-50)}
.lang-switch__menu{position:absolute;right:0;top:calc(100% + 6px);min-width:140px;background:var(--c-white);border:1px solid var(--c-border,var(--c-slate-200));border-radius:10px;box-shadow:0 12px 28px rgba(15,23,42,.14);padding:6px;z-index:60}
.lang-switch__item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;font-size:.85rem;color:var(--c-text);text-decoration:none}
/* Las banderas llevan blanco propio, así que sobre fondo claro se quedarían sin
   silueta: el filete se la devuelve sin repintarlas. Tamaño fijo (y la misma
   proporción que su viewBox, 1120x600) para que no se deformen ni se
   descuadren entre sí. 28x15 y no menos: por debajo el escudo mexicano deja de
   distinguirse de una mancha. */
.lang-switch__flag{flex:0 0 auto;width:28px;height:15px;border-radius:2px;box-shadow:0 0 0 1px rgba(15,23,42,.18)}
.lang-switch__flag--globe{width:16px;height:16px;border-radius:0;box-shadow:none}
.lang-switch__item:hover{background:var(--c-slate-100)}
.lang-switch__item.is-active{color:var(--c-blue-vivid-ink);font-weight:800;background:var(--c-blue-50)}

/* D2: el toggle de tema vive como item del dropdown pero es <button> */
button.site-header__dropdown-item {
    width: 100%;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
button.site-header__dropdown-item[aria-pressed="true"] svg { color: var(--c-accent-ink); }

/* ==== components/notif-center.css ==== */
/* ============================================================
   Centro de notificaciones — campana + panel global.
   Cargado en el layout app.php para todo usuario logueado.
   (Las reglas del historial viven en usuarios.css)
   ============================================================ */

/* ── Notification bell ────────────────────────────────────────────── */
.usr-notif-bell {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: none;
    color: var(--c-text-muted);
    cursor: pointer;
    border-radius: var(--radius-full);
    transition: background .15s, color .15s;
    margin-left: auto;
}
.usr-notif-bell:hover,
.usr-notif-bell[aria-expanded="true"] {
    background: var(--c-surface-2);
    color: var(--c-primary-ink);
}
.usr-notif-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--c-danger-surface);
    color: var(--c-on-brand);
    font-size: .6rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 0 0 2px var(--c-surface);
}
.usr-notif-badge.is-hidden { display: none; }

/* ── Notification overlay ─────────────────────────────────────────── */
.usr-notif-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 400;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
.usr-notif-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ── Notification panel ───────────────────────────────────────────── */
.usr-notif-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(380px, 100vw);
    height: 100dvh;
    background: var(--c-surface);
    border-left: 1px solid var(--c-border);
    z-index: 401;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), visibility .25s;
    box-shadow: -4px 0 32px rgba(0, 0, 0, .15);
    visibility: hidden;
}
.usr-notif-panel.is-open {
    transform: translateX(0);
    visibility: visible;
}
.usr-notif-panel__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
}
.usr-notif-panel__title {
    font-size: .95rem;
    font-weight: 700;
    margin: 0;
    flex: 1;
}
.usr-notif-panel__head-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.usr-notif-panel__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--c-text-muted);
    border-radius: var(--radius-sm);
    transition: background .15s, color .15s;
}
.usr-notif-panel__close:hover {
    background: var(--c-surface-2);
    color: var(--c-text);
}
.usr-notif-panel__list {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ── Notification items ───────────────────────────────────────────── */
.usr-notif-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--c-border);
    position: relative;
}
.usr-notif-item--unread {
    background: oklch(from var(--c-brand-surface) l c h / .06);
    background: rgba(99, 102, 241, .05);
}
.usr-notif-item__dot {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-brand-surface);
    flex-shrink: 0;
}
.usr-notif-item__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--c-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-primary-ink);
    margin-top: 1px;
}
.usr-notif-item__body {
    flex: 1;
    min-width: 0;
}
.usr-notif-item__text {
    font-size: var(--fs-body);
    color: var(--c-text);
    margin: 0 0 3px;
    line-height: 1.45;
}
.usr-notif-item--unread .usr-notif-item__text {
    font-weight: 600;
}
.usr-notif-item__time {
    font-size: .73rem;
    color: var(--c-text-muted);
    margin: 0 0 var(--space-2);
}
.usr-notif-item__foot {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.usr-notif-item__btn-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: .78rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.usr-notif-item__btn-link:hover {
    background: var(--c-surface-2);
    border-color: var(--c-text-muted);
    color: var(--c-text);
}
.usr-notif-item__btn-read {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    border: none;
    background: none;
    color: var(--c-text-muted);
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.usr-notif-item__btn-read:hover {
    background: var(--c-surface-2);
    color: var(--c-text);
}
.usr-notif-loading,
.usr-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    color: var(--c-text-muted);
    font-size: var(--fs-body);
    text-align: center;
}
.usr-notif-loading__spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--c-border);
    border-top-color: var(--c-primary);
    border-radius: 50%;
    animation: usr-notif-spin .7s linear infinite;
}
@keyframes usr-notif-spin {
    to { transform: rotate(360deg); }
}

/* ── Panel footer ─────────────────────────────────────────────────── */
.usr-notif-panel__footer {
    flex-shrink: 0;
    border-top: 1px solid var(--c-border);
    padding: var(--space-3) var(--space-4);
}
.usr-notif-panel__history-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .8rem;
    font-weight: 500;
    color: var(--c-primary-ink);
    text-decoration: none;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    transition: background .15s;
}
.usr-notif-panel__history-link:hover {
    background: var(--c-surface-2);
}

/* ── Notificación accionable: responder desde el panel ───── */
.usr-notif-item__snippet {
    margin: 0.15rem 0 0;
    padding: 0.3rem 0.55rem;
    border-left: 3px solid var(--c-primary);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--c-brand-surface) 6%, transparent);
    font-size: 0.78rem;
    color: var(--c-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usr-notif-item__btn-reply {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 0;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    background: var(--c-surface);
    color: var(--c-primary-ink);
    font-size: var(--fs-caption);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.usr-notif-item__btn-reply:hover {
    border-color: var(--c-primary);
    background: color-mix(in srgb, var(--c-brand-surface) 8%, var(--c-surface));
    color: var(--c-primary-ink);
}

.usr-notif-reply-form {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--c-primary) 35%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--c-brand-surface) 4%, var(--c-bg));
}

.usr-notif-reply-form__input {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
}

.usr-notif-reply-form__input:focus {
    outline: none;
    border-color: var(--c-primary);
}

.usr-notif-reply-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

.usr-notif-reply-form__cancel {
    min-height: 0;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    color: var(--c-text-muted);
    font-size: var(--fs-caption);
    cursor: pointer;
    font-family: inherit;
}

.usr-notif-reply-form__send {
    min-height: 0;
    padding: 0.35rem 0.9rem;
    border: none;
    border-radius: var(--radius-md);
    background: var(--c-brand-surface);
    color: var(--c-on-brand);
    font-size: var(--fs-caption);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.usr-notif-reply-form__send:disabled {
    opacity: 0.6;
    cursor: wait;
}

.usr-notif-reply-form__error {
    margin: 0;
    font-size: var(--fs-caption);
    color: var(--c-danger);
}

.usr-notif-reply-form__done {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-success);
}

/* ── Variante header global del sitio ────────────────────── */
.usr-notif-bell--header {
    margin-left: 0;
    min-height: 0;
}

@media (max-width: 480px) {
    .usr-notif-panel {
        width: 100vw;
        max-width: 100vw;
    }
}

/* ── Botón Web Push del panel ────────────────────────────── */
.usr-notif-push-btn {
    width: 100%;
    min-height: 0;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.8rem;
    border: 1px dashed color-mix(in srgb, var(--c-primary) 45%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--c-brand-surface) 5%, var(--c-surface));
    color: var(--c-primary-ink);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.usr-notif-push-btn:hover {
    border-style: solid;
    /* El fondo va junto al color: base.css pinta todo button:hover con la
       superficie de marca, así que recolorear sólo el texto lo dejaba oscuro
       sobre oscuro. */
    background: color-mix(in srgb, var(--c-brand-surface) 5%, var(--c-surface));
    color: var(--c-primary-ink);
}

/* Activo: azul SÓLIDO inconfundible y persistente (no depende solo del color
   del texto). Se mantiene así en cada carga mientras el permiso siga concedido. */
.usr-notif-push-btn--on,
.usr-notif-push-btn--on:hover {
    border: 1px solid var(--c-primary);
    background: var(--c-brand-surface);
    color: var(--c-on-brand);
}

/* Bloqueado por el navegador: apagado y no interactivo. */
.usr-notif-push-btn--blocked,
.usr-notif-push-btn--blocked:hover {
    border: 1px dashed var(--c-border);
    background: var(--c-bg);
    color: var(--c-text-muted);
    cursor: not-allowed;
}

/* ==== components/widget-search-results.css ==== */
/* ── Widget: Search Results (padre-hijo) ────────────────────────────
   BEM block: .wgt-sr
   Patrón: card padre (sucursal) + cards hijas (productos) anidadas.
   Mobile-first. CSS variables del proyecto. Sin !important.
   ──────────────────────────────────────────────────────────────────── */

/* ── Contenedor ──────────────────────────────────────────────────── */
.wgt-sr {
    margin: 0 auto var(--space-8, 64px);
    /* Móvil: cards al 96% del viewport (2% de margen por orilla). */
    padding: 0 2%;
    max-width: 1120px;
    container-type: inline-size;
}

/* Estado de carga de la búsqueda viva (lo pone/quita home-landing.js). */
.wgt-sr.is-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

/* ── Header ──────────────────────────────────────────────────────── */
.wgt-sr__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    margin-bottom: var(--space-4, 16px);
}

.wgt-sr__head-main {
    min-width: 0;
}

.wgt-sr__title {
    font-family: var(--font-display, var(--font-sans));
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--c-text, var(--c-ink-800));
    margin: 0 0 2px;
    line-height: 1.3;
}

.wgt-sr__query {
    font-weight: 600;
    color: var(--c-primary-ink);
}

.wgt-sr__stats {
    font-size: var(--fs-small);
    color: var(--c-text-muted, var(--c-steel-450));
    margin: 0;
}

/* Ciudad/estado junto al título ("en Guadalajara, Jalisco"). */
.wgt-sr__title-loc {
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--c-text-muted, var(--c-steel-450));
}

.wgt-sr__elapsed {
    font-size: var(--fs-micro);
    color: var(--c-slate-400);
    margin-left: 2px;
}

.wgt-sr__proximity {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 6px 0 0;
    padding: 3px 10px;
    font-size: var(--fs-caption);
    font-weight: 600;
    color: var(--c-primary-ink);
    background: color-mix(in srgb, var(--c-primary, var(--c-steel-700)) 10%, var(--c-white));
    border-radius: 999px;
}

.wgt-sr__proximity svg {
    flex-shrink: 0;
}

.wgt-sr__share {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--c-border, var(--c-sage-200));
    border-radius: var(--radius-sm, 6px);
    background: var(--c-surface, var(--c-white));
    color: var(--c-text-muted, var(--c-steel-450));
    font-size: var(--fs-caption);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.wgt-sr__share:hover {
    background: var(--c-surface-2);
    border-color: var(--c-line-strong);
    color: var(--c-text, var(--c-ink-800));
}

/* ── Filtros aplicados (chips removibles bajo el header) ─────────── */
.wgt-sr__applied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-4, 16px);
}

.wgt-sr__applied-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c-text-muted, var(--c-steel-450));
    margin-right: 2px;
}

.wgt-sr__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    max-width: 100%;
    padding: 3px 10px;
    border: 1px solid rgba(20, 49, 74, 0.25);
    border-radius: 999px;
    background: var(--c-primary-soft, var(--c-primary-soft));
    color: var(--c-primary-ink);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.wgt-sr__chip:hover {
    background: var(--c-border);
    color: var(--c-primary-ink);
    border-color: rgba(20, 49, 74, 0.45);
}

.wgt-sr__chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.wgt-sr__chip-x {
    font-size: 0.7rem;
    line-height: 1;
    flex-shrink: 0;
}

.wgt-sr__applied-clear {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 3px 10px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--c-text-muted, var(--c-steel-450));
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.12s, background 0.12s;
}
.wgt-sr__applied-clear:hover {
    background: var(--c-surface-2);
    color: var(--c-text, var(--c-ink-800));
}

/* ── Tabs de filtro local ────────────────────────────────────────── */
.wgt-sr__tabs {
    display: flex;
    gap: 4px;
    margin-bottom: var(--space-4, 16px);
    padding: 4px;
    background: var(--c-surface-2);
    border: 1px solid rgba(27, 37, 44, 0.08);
    border-radius: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.wgt-sr__tabs::-webkit-scrollbar {
    display: none;
}

.wgt-sr__tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: none;
    min-height: 38px;
    border-radius: 6px;
    background: transparent;
    color: var(--c-text-muted, var(--c-steel-450));
    font-size: var(--fs-small);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.wgt-sr__tab:hover {
    color: var(--c-text, var(--c-ink-800));
    background: color-mix(in srgb, var(--c-surface) 50%, transparent);
}
.wgt-sr__tab.is-active {
    background: var(--c-surface, var(--c-white));
    color: var(--c-text, var(--c-ink-800));
    font-weight: 600;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(17,24,39,0.05));
}

.wgt-sr__tab-count {
    font-size: var(--fs-micro);
    padding: 1px 6px;
    border-radius: var(--radius-full, 9999px);
    /* Un negro translúcido no se ve sobre fondo oscuro: la píldora de los tabs
       inactivos desaparecía y el número quedaba suelto. Derivándola de la tinta
       del tema se aclara u oscurece con él. */
    background: color-mix(in srgb, var(--c-text) 8%, transparent);
    color: var(--c-text-muted, var(--c-steel-450));
    font-weight: 500;
}
.wgt-sr__tab.is-active .wgt-sr__tab-count {
    background: var(--c-primary, var(--c-steel-700));
    color: var(--c-on-brand);
}

/* ── Lista ───────────────────────────────────────────────────────── */
.wgt-sr__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-4, 16px);
}

/* ── Card (resultado individual) ─────────────────────────────────── */
.wgt-sr__card {
    position: relative;
    background: var(--c-surface, var(--c-white));
    border: 1px solid var(--c-border, var(--c-sage-200));
    border-radius: 8px;
    overflow: hidden;
    /* Sombra sutil para marcar las orillas en cualquier fondo (sin portada). */
    box-shadow: 0 1px 2px rgba(22, 32, 40, 0.06), 0 4px 12px rgba(22, 32, 40, 0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.wgt-sr__card.is-hidden {
    display: none;
}
.wgt-sr__card:hover {
    border-color: var(--c-accent, var(--c-accent));
    box-shadow: 0 14px 30px rgba(22, 32, 40, 0.08);
}

/* ── Parent (branch header) ──────────────────────────────────────── */
.wgt-sr__parent {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-4, 16px);
    text-decoration: none;
}

.wgt-sr__parent-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--c-surface-2);
}

.wgt-sr__parent-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wgt-sr__parent-initials {
    font-size: var(--fs-lead);
    font-weight: 700;
    color: var(--c-primary-ink);
    letter-spacing: -0.01em;
}

.wgt-sr__parent-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wgt-sr__parent-link {
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.wgt-sr__parent-link:hover .wgt-sr__parent-company {
    color: var(--c-primary-ink);
}

.wgt-sr__parent-company {
    font-family: var(--font-display, var(--font-sans));
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c-text, var(--c-ink-800));
    margin: 0 0 1px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s;
}

.wgt-sr__parent-name {
    display: block;
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--c-text-muted, var(--c-steel-450));
    margin: 0;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wgt-sr__parent-cats {
    font-size: var(--fs-micro);
    color: var(--c-slate-500);
    margin: 3px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wgt-sr__parent-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
    margin-top: 2px;
    font-size: var(--fs-caption);
}

.wgt-sr__parent-location {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--c-text-muted, var(--c-steel-450));
}

.wgt-sr__parent-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--fs-micro);
    font-weight: 600;
}

.wgt-sr__parent-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wgt-sr__parent-status--open {
    background: var(--c-mint-soft);
    color: var(--c-green-deep);
}
.wgt-sr__parent-status--open .wgt-sr__parent-dot {
    background: var(--c-mint, var(--c-mint));
    box-shadow: 0 0 0 2px rgba(63, 138, 120, 0.25);
}

/* Cierra dentro de una hora: ni el verde de "adelante" ni el rojo de "cerrado".
   Es el aviso de que la ventana se está cerrando, y va en el ámbar de
   advertencia del sistema, no en el acento de marca. */
.wgt-sr__parent-status--soon {
    background: var(--c-amber-50, var(--c-bg));
    color: var(--c-amber-800, var(--c-warning));
}
.wgt-sr__parent-status--soon .wgt-sr__parent-dot {
    background: var(--c-warning);
}

.wgt-sr__parent-status--closed {
    background: var(--c-red-50);
    color: var(--c-danger);
}
.wgt-sr__parent-status--closed .wgt-sr__parent-dot {
    background: var(--c-danger-surface);
}

.wgt-sr__mixed-icon {
    flex-direction: column;
    border: 1px solid color-mix(in srgb, var(--c-primary, var(--c-steel-700)) 22%, transparent);
    background: color-mix(in srgb, var(--c-primary, var(--c-steel-700)) 8%, var(--c-white));
}

.wgt-sr__mixed-icon span {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
}

.wgt-sr__mixed-icon strong {
    font-size: 1.35rem;
    line-height: 1;
}

.wgt-sr__mixed {
    position: relative;
}

.wgt-sr__mixed > .wgt-sr__parent {
    position: relative;
    z-index: 1;
}

.wgt-sr__mixed--has-media {
    background: var(--c-surface, var(--c-white));
}

.wgt-sr__mixed--offer .wgt-sr__mixed-icon {
    color: var(--c-success);
    background: color-mix(in srgb, var(--c-success) 10%, var(--c-white));
}

.wgt-sr__mixed--promotion .wgt-sr__mixed-icon {
    color: var(--c-edit);
    background: color-mix(in srgb, var(--c-edit) 10%, var(--c-white));
}

.wgt-sr__mixed--policy .wgt-sr__mixed-icon {
    color: color-mix(in srgb, var(--c-violet-700) 60%, var(--c-blue-800));
    background: color-mix(in srgb, color-mix(in srgb, var(--c-violet-700) 60%, var(--c-blue-800)) 10%, var(--c-white));
}

/* ── Children (product cards) ────────────────────────────────────── */
.wgt-sr__children {
    border-top: 1px solid var(--c-border, var(--c-border));
    background: var(--c-fill, var(--c-fill));
    padding: var(--space-3, 12px);
    position: relative;
}

/* Encabezado único del bloque de coincidencias. */
.wgt-sr__children-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.wgt-sr__children-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-muted, var(--c-text-muted));
}

.wgt-sr__children-label svg {
    flex-shrink: 0;
}

.wgt-sr__children-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--c-primary-soft, var(--c-primary-soft));
    color: var(--c-primary-ink);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.wgt-sr__children-track {
    display: flex;
    gap: var(--space-3, 12px);
    background: transparent;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.wgt-sr__children-track::-webkit-scrollbar {
    display: none;
}

.wgt-sr__child {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--space-3, 12px);
    min-height: 104px;
    padding: var(--space-3, 12px);
    border: 1px solid var(--c-border, var(--c-border));
    border-radius: 8px;
    background: var(--c-surface, var(--c-white));
    text-decoration: none;
    color: inherit;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.12s;
    align-items: center;
    flex: 0 0 100%;
    scroll-snap-align: start;
}
.wgt-sr__child:hover {
    background: var(--c-white);
    border-color: var(--c-accent, var(--c-accent));
    box-shadow: 0 10px 22px rgba(22, 32, 40, 0.07);
    transform: translateY(-1px);
}

.wgt-sr__child-img-wrap {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--c-surface-2);
}

.wgt-sr__child-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wgt-sr__child-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--c-sage-200);
}

.wgt-sr__child-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Nombre y descripción a 2 líneas: el truncado de una sola línea cortaba
   los nombres largos ("Programas de Lealtad y Rec…") sin decir nada. */
.wgt-sr__child-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--c-text, var(--c-text));
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wgt-sr__child-desc {
    font-size: 0.78rem;
    color: var(--c-text-muted, var(--c-text-muted));
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wgt-sr__child-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin-top: 5px;
}

.wgt-sr__child-price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: var(--fs-small);
    font-weight: 700;
}

.wgt-sr__child-price del {
    color: var(--c-gray-400);
    font-size: 0.74rem;
    font-weight: 600;
}

.wgt-sr__child-price strong {
    color: var(--c-mint, var(--c-mint));
    font-size: 0.98rem;
}

.wgt-sr__child-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.wgt-sr__child-tag {
    font-size: 0.625rem;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--c-accent-soft, var(--c-accent-soft));
    color: var(--c-accent-ink-hover, var(--c-accent-hover));
}

/* Chip de promoción activa del producto hijo (misma paleta que el pill
   de tipo "Ofertas"). */
.wgt-sr__child-promo {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    margin-bottom: 2px;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-amber-100) 60%, var(--c-white));
    color: color-mix(in srgb, var(--c-warning) 82%, black);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wgt-sr__children-arrow {
    position: absolute;
    z-index: 2;
    top: 50%;
    width: 36px;
    height: 36px;
    min-height: 0; /* anula el min-height:44px global de <button> (deformaba el círculo) */
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%; /* círculo perfecto */
    background: rgba(0, 0, 0, 0.55); /* negro semi-transparente */
    color: var(--c-on-brand); /* chevron blanco visible */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transform: translateY(-50%);
    transition: var(--btn-transition), opacity 0.12s;
}

/* Área táctil efectiva de 44×44 (el círculo visual sigue en 36px). */
.wgt-sr__children-arrow::before {
    content: "";
    position: absolute;
    inset: -4px;
}

.wgt-sr__children-arrow:hover {
    background: rgba(0, 0, 0, 0.72);
    color: var(--c-on-brand);
}

.wgt-sr__children-arrow:disabled {
    opacity: 0.4;
    cursor: default;
    transform: translateY(-50%);
}

.wgt-sr__children-arrow--prev {
    left: 18px;
}

.wgt-sr__children-arrow--next {
    right: 18px;
}

.wgt-sr__children-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: var(--space-3, 12px);
}

.wgt-sr__children-dot {
    position: relative;
    width: 8px;
    height: 8px;
    min-height: 0; /* anula el min-height:44px global de <button> (se veía como barra) */
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(31, 37, 43, 0.3);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, transform 0.12s;
}

/* Área táctil efectiva de 44×44 (el punto visual sigue en 8px). */
.wgt-sr__children-dot::before {
    content: "";
    position: absolute;
    inset: -18px;
}

.wgt-sr__children-dot:hover,
.wgt-sr__children-dot.is-active {
    background: var(--c-primary, var(--c-steel-700));
    transform: scale(1.2);
}

.wgt-sr__children-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    font-size: var(--fs-caption);
    font-weight: 600;
    color: var(--c-primary-ink);
    text-decoration: none;
    margin-top: var(--space-3, 12px);
    border: 1px solid rgba(27, 37, 44, 0.1);
    border-radius: 8px;
    background: var(--c-surface, var(--c-white));
    transition: background 0.12s;
}
.wgt-sr__children-more:hover {
    background: var(--c-bg);
}

/* ── Animación staggered entrance ────────────────────────────────── */
@keyframes wgt-sr-fade-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wgt-sr__card {
    animation: wgt-sr-fade-up 0.35s ease-out both;
}
.wgt-sr__card:nth-child(1)  { animation-delay: 0.00s; }
.wgt-sr__card:nth-child(2)  { animation-delay: 0.04s; }
.wgt-sr__card:nth-child(3)  { animation-delay: 0.08s; }
.wgt-sr__card:nth-child(4)  { animation-delay: 0.12s; }
.wgt-sr__card:nth-child(5)  { animation-delay: 0.16s; }
.wgt-sr__card:nth-child(6)  { animation-delay: 0.20s; }
.wgt-sr__card:nth-child(7)  { animation-delay: 0.24s; }
.wgt-sr__card:nth-child(8)  { animation-delay: 0.28s; }
.wgt-sr__card:nth-child(9)  { animation-delay: 0.32s; }
.wgt-sr__card:nth-child(10) { animation-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
    .wgt-sr__card {
        animation: none;
    }

    /* Anula también los desplazamientos/escala de hover. */
    .wgt-sr__child,
    .wgt-sr__children-dot {
        transition: none;
    }

    .wgt-sr__child:hover {
        transform: none;
    }

    .wgt-sr__children-dot:hover,
    .wgt-sr__children-dot.is-active {
        transform: none;
    }
}

/* ── Focus visible (anillo estándar del proyecto, cf. base.css) ──── */
.wgt-sr__tab:focus-visible,
.wgt-sr__children-arrow:focus-visible,
.wgt-sr__children-dot:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

/* ── Tablet (≥768px) ─────────────────────────────────────────────── */
@media (min-width: 768px) {
    .wgt-sr { padding: 0 var(--space-4, 16px); }
    .wgt-sr__title { font-size: 1.35rem; }
    .wgt-sr__parent { grid-template-columns: 64px minmax(0, 1fr); padding: var(--space-5, 24px); gap: var(--space-4, 16px); }
    .wgt-sr__parent-avatar { width: 64px; height: 64px; border-radius: 8px; }
    .wgt-sr__parent-company { font-size: var(--fs-h3); }
    .wgt-sr__children-track {
        display: grid;
        grid-template-columns: 1fr 1fr;
        overflow: visible;
        scroll-snap-type: none;
    }
    .wgt-sr__child {
        flex: initial;
    }
    .wgt-sr__children-arrow,
    .wgt-sr__children-dots {
        display: none;
    }
}

/* ── Desktop (≥1024px) ───────────────────────────────────────────── */
@media (min-width: 1024px) {
    .wgt-sr {
        padding: 0;
    }

    .wgt-sr__parent {
        grid-template-columns: 72px minmax(0, 1fr);
        padding: var(--space-5, 24px);
    }

    .wgt-sr__parent-avatar {
        width: 72px;
        height: 72px;
        border-radius: 8px;
    }

    .wgt-sr__parent-initials {
        font-size: 1.25rem;
    }

    .wgt-sr__parent-company {
        font-size: 1.1875rem;
    }

    .wgt-sr__children-track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .wgt-sr__mixed--has-media .wgt-sr__parent {
        padding-right: var(--space-4, 16px);
    }

    .wgt-sr__children {
        padding: var(--space-2, 8px);
    }

    .wgt-sr__child {
        grid-template-columns: 64px minmax(0, 1fr);
        padding: 10px;
    }

    .wgt-sr__child-img-wrap {
        width: 64px;
        height: 64px;
    }

}

/* ── Production refresh: directory SERP polish ───────────────────── */
.wgt-sr {
    --sr-ink: var(--c-text);
    --sr-muted: var(--c-text-muted);
    --sr-line: color-mix(in srgb, var(--c-text) 12%, transparent);
    --sr-soft: var(--c-fill);
    --sr-brand: color-mix(in srgb, var(--c-accent) 72%, black);
    --sr-blue: var(--c-accent);
    --sr-green: var(--c-mint);
    --sr-shadow: 0 18px 42px rgba(18, 31, 42, 0.1);

    color: var(--sr-ink);
}

.wgt-sr__head {
    align-items: flex-end;
    padding-bottom: var(--space-2, 8px);
    border-bottom: 1px solid rgba(27, 37, 44, 0.08);
}

.wgt-sr__title {
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    letter-spacing: 0;
}

.wgt-sr__query {
    color: var(--sr-brand);
}

.wgt-sr__stats {
    color: var(--sr-muted);
}

.wgt-sr__share,
.wgt-sr__empty-action {
    min-height: 38px;
    border-radius: 8px;
    letter-spacing: 0;
}

.wgt-sr__share {
    border-color: rgba(22, 93, 116, 0.18);
    color: var(--sr-brand);
}

.wgt-sr__share:hover {
    border-color: rgba(22, 93, 116, 0.34);
    background: var(--c-slate-100);
    color: var(--sr-brand);
}

.wgt-sr__tabs {
    gap: 6px;
    padding: 6px;
    /* La barra tiene que despegarse de la primera tarjeta, que va sobre
       --c-surface. Un fondo translúcido de esa misma superficie las igualaba y
       en oscuro se confundían; --c-surface-2 contrasta con la tarjeta en los
       dos temas. El borde iba en un negro translúcido, invisible sobre fondo
       oscuro, y el brillo interior era un blanco fijo que en oscuro se veía
       como una raya clara. */
    border-color: var(--c-border);
    background: var(--c-surface-2);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-surface) 80%, transparent);
}

.wgt-sr__tab {
    border-radius: 8px;
    letter-spacing: 0;
}

.wgt-sr__tab.is-active {
    /* `--c-dark-surface-2` es un rol de SUPERFICIE oscura fija, no de tinta, y
       además no invierte. Usado como color de texto sobre --c-surface, que sí
       invierte, en tema oscuro dejaba tinta oscura sobre fondo oscuro: la
       etiqueta del tab activo desaparecía y sólo se veía su contador. */
    color: var(--c-text);
    box-shadow: 0 8px 18px rgba(18, 31, 42, 0.08);
}

.wgt-sr__tab.is-active .wgt-sr__tab-count {
    background: var(--sr-brand);
}

.wgt-sr__list {
    gap: var(--space-4, 16px);
}

.wgt-sr__card {
    position: relative;
    /* Componente reutilizable: el card se ve idéntico en resultados,
       destacados, recomendados y perfil. Borde frío con contraste suficiente
       para marcar la orilla sobre el fondo gris claro del directorio. */
    border: 1px solid var(--c-line-strong, var(--c-line-strong));
    border-radius: 8px;
    background: var(--c-surface, var(--c-white));
    box-shadow: 0 1px 2px rgba(22, 32, 40, 0.06), 0 4px 12px rgba(22, 32, 40, 0.05);
    transition: box-shadow 0.15s, border-color 0.15s;
}

/* ── Legacy: portada "lavada" de cards de producto / evento / mixed ───
   (prod-card, products-on-offer, upcoming-events y mixed results siguen
   usando .wgt-sr__card--has-cover; el card de NEGOCIO ya usa la franja
   .wgt-sr__cover de abajo). */
.wgt-sr__card--has-cover {
    background: var(--c-surface, var(--c-white));
}

/* La portada también aquí es un <img> y no un fondo: mismo motivo que la franja
   —un background no se difiere por viewport—. Cambia sólo el apilado, porque
   ésta va DEBAJO de un velo.

   `isolation: isolate` acota el z-index negativo a este card: sin él la imagen
   se hundiría por detrás del fondo del propio card y no se vería. El velo es
   ::after (último hijo) y no ::before: ambos comparten z-index, así que ganan
   por orden de DOM y ::before quedaría DEBAJO de la imagen, sin oscurecer nada.

   Si la imagen falla, el velo sigue puesto sobre el fondo claro del card: el
   texto blanco se mantiene legible, igual que cuando esto era un gradiente. */
.wgt-sr__card--has-cover > .wgt-sr__parent {
    position: relative;
    isolation: isolate;
}

.wgt-sr__mixed-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wgt-sr__card--has-cover > .wgt-sr__parent::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.66);
}

.wgt-sr__card--has-cover .wgt-sr__parent-avatar {
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.wgt-sr__card--has-cover .wgt-sr__parent-body {
    align-items: flex-start;
    gap: 5px;
}

.wgt-sr__card--has-cover .wgt-sr__parent-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.wgt-sr__card--has-cover .wgt-sr__parent-company,
.wgt-sr__card--has-cover .wgt-sr__parent-name,
.wgt-sr__card--has-cover .wgt-sr__parent-location,
.wgt-sr__card--has-cover .wgt-sr__parent-cats,
.wgt-sr__card--has-cover .wgt-sr__parent-price {
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 3px 9px;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.22);
    color: var(--c-on-brand);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.wgt-sr__card--has-cover .wgt-sr__parent-link:hover .wgt-sr__parent-company {
    color: var(--c-on-brand);
}
.wgt-sr__card--has-cover .wgt-sr__parent-name {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 500;
}
.wgt-sr__card--has-cover .wgt-sr__parent-price del {
    color: rgba(255, 255, 255, 0.7);
}
.wgt-sr__card--has-cover .wgt-sr__parent-price strong {
    color: color-mix(in srgb, var(--c-mint) 45%, var(--c-white));
}

/* Affordance de enlace por viewport: en móvil TODO el card navega; en
   desktop solo la portada (el texto y el avatar ya son <a> nativos). */
@media (max-width: 767px) {
    [data-result-href] {
        cursor: pointer;
    }
}
@media (min-width: 768px) {
    [data-result-href] .wgt-sr__cover {
        cursor: pointer;
    }
}

/* ── Card de negocio: portada como franja superior + avatar circular ──
   La imagen de portada de la sucursal es el fondo del encabezado; la de
   perfil (sucursal → empresa → iniciales) vive en un círculo a la
   izquierda, colgando entre la franja y el cuerpo. */
.wgt-sr__cover {
    position: relative;
    height: 104px;
    border-radius: 8px 8px 0 0;
}

/* La portada es un <img> y no un fondo CSS. Un background no se puede diferir
   por viewport: el navegador se bajaba la portada de TODOS los cards de la
   lista, incluido el que está diez pantallas más abajo. Ver
   core/views/widgets/partials/cover-img.php.

   El avatar y el cluster de stats son `position: absolute` y vienen DESPUÉS en
   el DOM, así que se pintan encima sin necesidad de z-index. */
.wgt-sr__cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Sin velo: la portada se muestra a plena opacidad (mobile y desktop). */

/* Sucursal sin portada: degradado neutro de marca (nunca hueco vacío). */
.wgt-sr__cover--none {
    background-image: linear-gradient(150deg, var(--c-primary-soft, var(--c-primary-soft)), var(--c-bg, var(--c-bg)) 72%);
}

/* Favoritos + distancia: cluster en la esquina superior izquierda de la
   portada, del lado opuesto al pill de tipo. Chips legibles sobre cualquier
   foto. */
.wgt-sr__cover-stats {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    max-width: calc(100% - 20px);
}
.wgt-sr__cover-stats .wgt-sr__favs,
.wgt-sr__cover-stats .wgt-sr__parent-distance:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 3px 8px;
    border-radius: var(--radius-full, 9999px);
    background: color-mix(in srgb, var(--c-surface) 92%, transparent);
    color: var(--c-text, var(--c-text));
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(10, 14, 18, 0.18);
}
.wgt-sr__cover-stats .wgt-sr__favs strong,
.wgt-sr__cover-stats .wgt-sr__parent-distance span {
    color: var(--c-text, var(--c-text));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.wgt-sr__cover-stats .wgt-sr__favs svg,
.wgt-sr__cover-stats .wgt-sr__parent-distance svg {
    flex-shrink: 0;
    color: var(--c-accent-ink-hover, var(--c-accent-hover));
}
/* La distancia se revela por JS al conceder geolocalización; hasta entonces el
   atributo [hidden] debe ganar a la regla base display:inline-flex. */
.wgt-sr__cover-stats .wgt-sr__parent-distance[hidden] {
    display: none;
}

.wgt-sr__avatar {
    position: absolute;
    left: 16px;
    bottom: -30px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    border: 4px solid var(--c-surface, var(--c-white));
    box-shadow: 0 4px 12px rgba(10, 14, 18, 0.25);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-surface-2, var(--c-surface-2));
    text-decoration: none;
}

.wgt-sr__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wgt-sr__avatar--initials {
    background: linear-gradient(135deg, var(--c-primary, var(--c-brand-surface)), var(--c-primary-hover, var(--c-primary-hover)));
    color: var(--c-on-brand);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Tile de fecha (eventos): misma posición colgante que el avatar, con
   esquinas de calendario en lugar de círculo. */
.wgt-sr__avatar--date {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    border-radius: 22px;
    background: var(--c-surface, var(--c-white));
    color: var(--c-primary-ink);
    line-height: 1.05;
    text-decoration: none;
}

.wgt-sr__avatar--date span {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-accent-ink-hover, var(--c-accent-hover));
}

.wgt-sr__avatar--date strong {
    font-size: 2.4rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Cuerpo bajo la franja: una sola columna; la cabecera respeta el avatar.
   position: static para que el pill de tipo (absoluto) ancle al card y quede
   sobre la portada, no al inicio del cuerpo. */
.wgt-sr__cover + .wgt-sr__parent {
    display: block;
    padding-top: 8px;
    position: static;
}

.wgt-sr__parent-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-left: 136px;
    min-height: 40px;
    margin-bottom: 6px;
}

/* Favoritos: prueba social sobria (corazón + conteo). */
.wgt-sr__favs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--c-text-muted, var(--c-text-muted));
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}
.wgt-sr__favs strong {
    color: var(--c-text, var(--c-text));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.wgt-sr__favs svg {
    flex-shrink: 0;
}

.wgt-sr__card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 2;
    width: 3px;
    background: transparent;
    transition: background 0.18s ease;
}

.wgt-sr__card:hover {
    border-color: var(--c-accent, var(--c-accent));
    box-shadow: 0 14px 30px rgba(22, 32, 40, 0.08);
}

.wgt-sr__parent {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    min-height: 120px;
    padding: var(--space-4, 16px);
    gap: var(--space-3, 12px);
    position: relative;
}

.wgt-sr__parent-avatar {
    width: 64px;
    height: 64px;
    border: 1px solid rgba(27, 37, 44, 0.08);
    background: linear-gradient(135deg, var(--c-slate-100), var(--c-mint-soft));
}

.wgt-sr__parent-company {
    color: var(--c-text, var(--c-ink-800));
    font-size: 1.05rem;
    letter-spacing: 0;
}

/* Sucursal junto al nombre de la empresa: más pequeña y en tono secundario,
   nunca del mismo tamaño/peso que la empresa. */
.wgt-sr__parent-branch {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--c-text-muted, var(--c-steel-450));
    white-space: normal;
}

/* Descripción corta bajo la línea "empresa - sucursal". */
.wgt-sr__parent-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin-top: 2px;
    line-height: 1.35;
}

.wgt-sr__parent-body {
    flex: 1;
}

.wgt-sr__type-label {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 20px;
    max-width: 100%;
    margin-bottom: 2px;
    padding: 2px 7px;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pill de tipo (Negocio / Producto / Oferta / Evento…) fijo en la esquina
   superior derecha del card, sobre la portada. Solo en las cards con franja
   de portada (.wgt-sr__cover); las mixtas horizontales lo dejan en su flujo. */
.wgt-sr__cover + .wgt-sr__parent .wgt-sr__type-label {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    align-self: auto;
    max-width: calc(100% - 20px);
    margin: 0;
    padding: 3px 9px;
    box-shadow: 0 1px 4px rgba(10, 14, 18, 0.18);
}

/* Estado abierto/cerrado: justo debajo del pill de tipo, misma esquina
   superior derecha, sobre la portada. */
.wgt-sr__cover + .wgt-sr__parent .wgt-sr__parent-status {
    position: absolute;
    top: 42px;
    right: 10px;
    z-index: 3;
    margin: 0;
    max-width: calc(100% - 20px);
    white-space: nowrap;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(10, 14, 18, 0.18);
}

/* Pie del card de negocio: favoritos + distancia a la izquierda, horario a la
   derecha, en la parte inferior interna del card (movidos desde la portada,
   cada uno del lado en que estaba). */
.wgt-sr__card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 8px;
}
.wgt-sr__card-footer-left,
.wgt-sr__card-footer-right {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.wgt-sr__card-footer .wgt-sr__favs {
    margin-top: 0;
}
/* Corazón en rojo (el conteo conserva su color de texto). */
.wgt-sr__card-footer .wgt-sr__favs svg {
    color: var(--c-danger);
}
/* Distancia junto al corazón, en azul (icono + texto). */
.wgt-sr__card-footer .wgt-sr__parent-distance,
.wgt-sr__card-footer .wgt-sr__parent-distance svg,
.wgt-sr__card-footer .wgt-sr__parent-distance span {
    color: var(--c-blue-600);
}
.wgt-sr__card-footer .wgt-sr__parent-distance span {
    font-weight: 700;
}
/* La píldora de distancia por geolocalización permanece oculta hasta que el JS
   la rellena; el atributo [hidden] debe ganar al display:inline-flex de base. */
.wgt-sr__card-footer .wgt-sr__parent-distance[hidden] {
    display: none;
}
/* El horario en el pie fluye en línea; anula el anclaje absoluto sobre la
   portada que aplica a .wgt-sr__parent-status en cards con franja. */
.wgt-sr__cover + .wgt-sr__parent .wgt-sr__card-footer .wgt-sr__parent-status {
    position: static;
    top: auto;
    right: auto;
    max-width: none;
    box-shadow: none;
}

.wgt-sr__type-label--business {
    background: var(--c-primary-soft);
    color: color-mix(in srgb, var(--c-accent) 70%, black);
}

.wgt-sr__type-label--product {
    background: var(--c-amber-50);
    color: var(--c-green-deep);
}

.wgt-sr__type-label--event {
    background: var(--c-blue-50);
    color: var(--c-blue-800);
}

.wgt-sr__type-label--offer {
    background: color-mix(in srgb, var(--c-amber-100) 60%, var(--c-white));
    color: color-mix(in srgb, var(--c-warning) 82%, black);
}

.wgt-sr__type-label--promotion {
    background: color-mix(in srgb, var(--c-pink-800) 12%, var(--c-white));
    color: var(--c-pink-800);
}

.wgt-sr__type-label--policy {
    background: var(--c-blue-50);
    color: color-mix(in srgb, var(--c-violet-700) 60%, var(--c-blue-800));
}

.wgt-sr__mixed--has-media .wgt-sr__parent {
    padding-right: var(--space-4, 16px);
}

.wgt-sr__parent-link:hover .wgt-sr__parent-company {
    color: var(--c-primary-ink);
}

.wgt-sr__parent-name,
.wgt-sr__parent-cats,
.wgt-sr__parent-location,
.wgt-sr__parent-distance {
    color: var(--c-text-muted, var(--c-steel-450));
}

/* Dirección resumida en móvil: solo calle · colonia. El resto (ciudad ·
   estado · país) se oculta para que el card no crezca de más. En móvil también
   se oculta el ícono de ubicación (pin). */
.wgt-sr__addr-extra {
    display: none;
}

.wgt-sr__parent-location > svg {
    display: none;
}

@media (min-width: 768px) {
    .wgt-sr__addr-extra {
        display: inline;
    }

    .wgt-sr__parent-location > svg {
        display: inline-block;
    }
}

/* Precio (productos/ofertas) dentro del card unificado. */
.wgt-sr__parent-price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.95rem;
}

/* Variante en la cabecera del card de producto (a la derecha del título,
   misma posición que los favoritos en el card de negocio). */
.wgt-sr__parent-price--head {
    flex-shrink: 0;
    margin-top: 2px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.wgt-sr__parent-price--head small {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--c-text-muted, var(--c-text-muted));
}
.wgt-sr__parent-price del {
    color: var(--c-text-muted, var(--c-steel-450));
    font-size: 0.8rem;
}
.wgt-sr__parent-price strong {
    /* --c-success (=--c-mint) está calibrado como color de UI a 3:1 —chips e
       íconos de "abierto"—, y aquí es texto: daba 4.1:1. El esmeralda oscuro
       conserva la familia de tono y sí es de grado texto. */
    color: var(--c-emerald-700);
    font-weight: 800;
}

/* Badges/tags (ofertas, promociones) dentro del card unificado. */
.wgt-sr__parent-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.wgt-sr__parent-tags > span,
.wgt-sr__tag {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--c-surface-2);
    color: var(--c-text-muted, var(--c-steel-450));
    font-size: 0.68rem;
    font-weight: 700;
}

/* Layout "Ofertas y promociones": fila superior con etiquetas + negocio a la
   izquierda y precio a la derecha; el título queda debajo. */
.wgt-sr__offer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}
.wgt-sr__offer-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.wgt-sr__offer-head .wgt-sr__parent-price {
    flex-shrink: 0;
    margin-left: auto;
}

.wgt-sr__parent-cats {
    display: -webkit-box;
    line-height: 1.35;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.wgt-sr__parent-meta {
    gap: 7px 10px;
}

.wgt-sr__parent-distance {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--fs-caption);
}

.wgt-sr__parent-status {
    min-height: 24px;
    padding: 2px 9px;
    letter-spacing: 0;
}

.wgt-sr__parent-status--open {
    background: var(--c-mint-soft);
    color: var(--c-success);
}

.wgt-sr__parent-status--closed {
    background: var(--c-red-50);
}

.wgt-sr__children {
    border-color: rgba(27, 37, 44, 0.08);
    background: linear-gradient(180deg, var(--c-fill, var(--c-fill)), var(--c-surface-2, var(--c-surface-2)));
}

.wgt-sr__child {
    border-color: var(--c-border, var(--c-border));
    box-shadow: 0 1px 0 rgba(18, 31, 42, 0.03);
}

.wgt-sr__child-name {
    letter-spacing: 0;
}

.wgt-sr__child-price strong {
    color: var(--sr-green);
}

.wgt-sr__child-tag {
    background: var(--c-accent-soft, var(--c-accent-soft));
    color: var(--c-accent-ink-hover, var(--c-accent-hover));
}

.wgt-sr__empty-card {
    display: grid;
    gap: var(--space-3, 12px);
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid var(--sr-line);
    border-radius: 8px;
    /* El degradado se construye sobre tokens: con colores literales el bloque
       se quedaba claro en el tema oscuro y su texto —que sí invierte— quedaba
       ilegible encima. */
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--c-primary-soft) 80%, transparent),
            color-mix(in srgb, var(--c-surface) 95%, transparent) 42%),
        var(--c-surface);
    box-shadow: 0 10px 30px rgba(18, 31, 42, 0.06);
}

.wgt-sr__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--c-primary-soft);
    color: var(--sr-brand);
}

.wgt-sr__empty-title {
    margin: 0;
    color: var(--sr-ink);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0;
}

.wgt-sr__empty-copy {
    max-width: 680px;
    margin: 0;
    color: var(--sr-muted);
    font-size: 0.93rem;
    line-height: 1.58;
}

.wgt-sr__empty-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.wgt-sr__empty-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(22, 93, 116, 0.2);
    background: var(--c-white);
    color: var(--sr-brand);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
}

.wgt-sr__empty-action:hover {
    border-color: rgba(22, 93, 116, 0.36);
    background: var(--c-slate-100);
    color: color-mix(in srgb, var(--c-primary) 65%, var(--c-accent));
}

.wgt-sr__empty-tips {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--sr-muted);
    font-size: var(--fs-small);
}

.wgt-sr__empty-tips li {
    position: relative;
    padding-left: 16px;
}

.wgt-sr__empty-tips li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--sr-brand);
}

@media (max-width: 640px) {
    .wgt-sr__head {
        align-items: flex-start;
        border-bottom: 0;
    }

    .wgt-sr__share {
        padding-inline: 10px;
    }

    .wgt-sr__share span {
        display: none;
    }

    .wgt-sr__parent {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 11px;
    }

    .wgt-sr__parent-avatar {
        width: 58px;
        height: 58px;
    }

    .wgt-sr__parent-company,
    .wgt-sr__parent-name {
        white-space: normal;
    }

    .wgt-sr__parent-company {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    /* Franja de portada un poco más alta en pantallas grandes. */
    .wgt-sr__cover {
        height: 122px;
    }
}

/* ── Mobile: avatar centrado arriba, texto libre a lo ancho debajo ────
   El círculo cuelga centrado de la franja y el contenido fluye centrado
   debajo (sin sangría lateral). Avatar 10% más chico (112 → 101).
   Va al final del archivo para ganar en la cascada a las reglas base. */
@media (max-width: 767px) {
    .wgt-sr__avatar {
        left: 50%;
        transform: translateX(-50%);
        width: 101px;
        height: 101px;
        bottom: -44px;
    }
    .wgt-sr__parent-head {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4px;
        padding-left: 0;
        padding-top: 48px;
    }
    /* Sólo la tarjeta de NEGOCIO: es la que tiene franja de portada con el
       avatar colgando en el centro, y su texto acompaña a ese eje. La tarjeta
       mixta (producto, evento, oferta, promoción, póliza) no lleva franja —
       tiene un icono a la izquierda —, así que centrarle el texto la dejaba
       descuadrada. Comparten los mismos nombres de bloque, de ahí el :not(). */
    .wgt-sr__card:not(.wgt-sr__mixed) .wgt-sr__parent-body {
        align-items: center;
        text-align: center;
    }
    .wgt-sr__card:not(.wgt-sr__mixed) .wgt-sr__parent-meta {
        justify-content: center;
    }
    .wgt-sr__card:not(.wgt-sr__mixed) .wgt-sr__offer-tags {
        justify-content: center;
    }
    .wgt-sr__favs {
        margin-top: 0;
    }
    /* Precio y favoritos: centrados bajo el texto, no a la derecha. */
    .wgt-sr__parent-price--head {
        align-self: center;
    }
    /* Sucursal en su propia línea (debajo de la empresa); la descripción va
       debajo. Se oculta el guion separador. */
    .wgt-sr__parent-branch {
        display: block;
    }
    .wgt-sr__parent-sep {
        display: none;
    }
}


/* ── "¿Cómo llego?": tiempos de viaje bajo demanda ─────────────────────
   Discreto a propósito: es una acción secundaria y sólo se pide cuando el
   usuario la pulsa, porque cada apertura cuesta dinero en la API de Google. */
.wgt-sr__howto {
    min-height: 0;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--c-text-muted);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wgt-sr__howto:hover {
    background: none;
    color: var(--c-primary-ink);
}

.wgt-sr__howto:disabled {
    opacity: 0.55;
    cursor: default;
}

.wgt-sr__travel {
    flex: 1 0 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 0;
    padding: 10px 12px;
    list-style: none;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-bg);
    font-size: 0.82rem;
    color: var(--c-text-muted);
}

.wgt-sr__travel-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Cada fila es el control para elegir ese modo: pulsarla fija la preferencia y
   la tarjeta pasa a hablar en ese modo. Vuelve a pulsarse para deshacerla. */
.wgt-sr__travel-pick {
    flex: 1 1 auto;
    display: flex;
    /* center y no baseline: el enlace "Ruta →" de al lado centra su texto en
       44px; con baseline el texto del pick quedaba arriba y el de Ruta más
       abajo, desfasados. Misma altura táctil para los dos. */
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 6px;
    margin: 0 -6px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.wgt-sr__travel-pick:hover {
    background: var(--c-fill, var(--c-surface));
    color: inherit;
}

.wgt-sr__travel-pick.is-picked {
    background: var(--c-brand-surface);
    color: var(--c-on-brand);
}

.wgt-sr__travel-pick.is-picked .wgt-sr__travel-value {
    color: var(--c-on-brand);
}

.wgt-sr__travel-all {
    min-height: 0;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--c-text-muted);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wgt-sr__travel-all:hover {
    background: none;
    color: var(--c-primary-ink);
}

.wgt-sr__travel-icon { flex: 0 0 auto; }
.wgt-sr__travel-label { flex: 1 1 auto; }

/* "Ruta →": abre Google Maps con la ruta cargada en ese modo. Enlace y no
   botón — navega fuera. Altura táctil real aunque el visual sea compacto. */
.wgt-sr__travel-go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    color: var(--c-primary-ink);
    font-size: var(--fs-small);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.wgt-sr__travel-go:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wgt-sr__travel-value {
    color: var(--c-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* La advertencia: esto es una estimación por distancia, no una ruta. Va dentro
   del panel y no fuera, para que no se lea sin ella. */
.wgt-sr__travel-note {
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid var(--c-border);
    font-size: 0.72rem;
    color: var(--c-text-muted);
}

/* ── Chips de intención sobre la lista ─────────────────────────────────
   "Abierto ahora / Más cerca / Con promoción": la persona filtra por lo que
   quiere, no por un criterio técnico en un desplegable. Cada chip alterna su
   parámetro conservando la búsqueda; el activo se pinta en marca y un segundo
   toque lo deshace. */
.wgt-sr__intents {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.wgt-sr__intent {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-surface);
    color: var(--c-text);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.wgt-sr__intent:hover {
    background: var(--c-fill, var(--c-surface));
    border-color: var(--c-primary);
    color: var(--c-text);
}

.wgt-sr__intent.is-on {
    background: var(--c-brand-surface);
    border-color: var(--c-brand-surface);
    color: var(--c-on-brand);
}

.wgt-sr__intent.is-on:hover {
    background: var(--c-brand-surface);
    color: var(--c-on-brand);
    opacity: 0.92;
}

.wgt-sr__intent:disabled {
    opacity: 0.55;
    cursor: default;
}

/* ── Paginación de resultados ──────────────────────────────────────────── */
.wgt-sr__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}

.wgt-sr__pager-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-surface);
    color: var(--c-text);
    font-size: var(--fs-small);
    font-weight: 700;
    text-decoration: none;
}

/* El `background` repetido es obligatorio: base.css pinta fondo de marca en el
   :hover de todo lo que parezca botón. Lo vigila ConventionGuardTest. */
.wgt-sr__pager-btn:hover {
    background: var(--c-surface);
    border-color: var(--c-primary);
    color: var(--c-primary-ink);
}

.wgt-sr__pager-info {
    font-size: var(--fs-caption);
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ==== components/product-widget.css ==== */
/**
 * Widget de Productos — modal selector de productos del catálogo.
 * Mobile-first. Centrado, sobre cualquier otro overlay (z muy alto).
 */

.pw {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pw__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pw.is-open .pw__backdrop { opacity: 1; }

.pw__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(720px, calc(100vw - 20px));
    max-height: calc(100vh - 32px);
    background: var(--c-white);
    border-radius: var(--radius-lg, 14px);
    box-shadow: 0 20px 60px rgba(17, 24, 39, 0.3);
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.pw.is-open .pw__dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.pw__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--c-border, var(--c-gray-200));
}

.pw__title { margin: 0; font-size: 1.0625rem; font-weight: 700; }

.pw__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c-text-muted, var(--c-gray-500));
    padding: 0;
    width: 32px;
    height: 32px;
    min-height: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.pw__close:hover {
    background: var(--c-surface-2, var(--c-gray-100));
    color: var(--c-text, var(--c-gray-900));
}

.pw__tools {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--c-border, var(--c-gray-100));
}

.pw__filter {
    width: 100%;
    font-size: 0.9375rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--c-border, var(--c-gray-300));
    border-radius: var(--radius-md, 8px);
}

.pw__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-3) var(--space-4);
}

.pw__msg {
    color: var(--c-text-muted, var(--c-gray-500));
    font-size: var(--fs-body);
    text-align: center;
    padding: var(--space-5) 0;
}

.pw__msg--error { color: var(--c-red-700); }

.pw__section {
    font-size: var(--fs-caption);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--c-text-muted, var(--c-gray-500));
    margin: var(--space-3) 0 var(--space-2);
}

.pw__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

.pw-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: var(--space-1);
    min-width: 0;
    padding: var(--space-2);
    background: var(--c-bg, var(--c-white));
    border: 1px solid var(--c-border, var(--c-gray-200));
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pw-card:hover { border-color: var(--c-primary, var(--c-blue-600)); }

.pw-card.is-picked {
    border-color: var(--c-primary, var(--c-blue-600));
    box-shadow: 0 0 0 1px var(--c-primary, var(--c-blue-600)) inset;
}

.pw-card.is-added {
    opacity: 0.55;
    cursor: not-allowed;
}

.pw-card__thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
    background: var(--c-bg-soft, var(--c-gray-100));
    display: flex;
    align-items: center;
    justify-content: center;
}

.pw-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pw-card__ph {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--c-text-muted, var(--c-gray-500));
}

.pw-card__name {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--c-text, var(--c-gray-900));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pw-card__price { font-size: var(--fs-small); font-weight: 600; color: var(--c-text, var(--c-gray-900)); }

.pw-card__sub {
    font-size: var(--fs-caption);
    color: var(--c-text-muted, var(--c-gray-500));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Item atenuado (p.ej. evento expirado) — se puede elegir, pero se ve secundario. */
.pw-card--muted { opacity: 0.5; filter: grayscale(0.6); }
.pw-card--muted:hover { opacity: 0.75; }

.pw-card__state {
    margin-top: 2px;
    font-size: var(--fs-caption);
    font-weight: 600;
    color: var(--c-primary-ink);
}

.pw-card.is-added .pw-card__state { color: var(--c-text-muted, var(--c-gray-500)); }

/* Flash "añadido" (modo keepOpen): confirma el alta sin cerrar el modal. */
.pw-card.is-just-added {
    border-color: var(--c-success, var(--c-green-600));
    box-shadow: 0 0 0 2px var(--c-success, var(--c-green-600)) inset;
    animation: pw-added 0.35s ease;
}
.pw-card.is-just-added .pw-card__state { color: var(--c-success, var(--c-green-600)); }
@keyframes pw-added {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .pw-card.is-just-added { animation: none; }
}

.pw__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--c-border, var(--c-gray-200));
}

.pw__count { font-size: var(--fs-small); color: var(--c-text-muted, var(--c-gray-500)); }

.pw__foot-actions { display: inline-flex; align-items: center; gap: var(--space-2); }

/* ── Tablet+ : más columnas ── */
@media (min-width: 600px) {
    .pw__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
    .pw__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==== components/sb-tooltip.css ==== */
/* ============================================================================
   SBTooltip — tooltip custom global y reutilizable ("CSS Tooltip").
   Card blanco con acento azul: icono + título + descripción + línea ✓ + flecha.
   Se monta en <body> (no lo recorta ningún overflow) y se posiciona por JS.
   Uso: en cualquier elemento, agregar:
     data-sb-tooltip-title="…"   (título)
     data-sb-tooltip-desc="…"    (descripción)  — o  data-sb-tooltip="…"
     data-sb-tooltip-feature="…" (línea con ✓, opcional)
   ============================================================================ */

.sb-tooltip {
    position: fixed;
    z-index: 10001; /* por encima del modal del widget (.pw = 9999) */
    top: 0;
    left: 0;
    max-width: 320px;
    padding: 13px 15px;
    background: var(--c-white);
    border: 1px solid var(--c-blue-600);
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(37, 99, 235, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
    color: var(--c-gray-700);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
}

.sb-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sb-tooltip__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 6px;
}

.sb-tooltip__icon {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.12);
    color: var(--c-blue-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sb-tooltip__icon svg { width: 15px; height: 15px; }

.sb-tooltip__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--c-gray-900);
    line-height: 1.2;
}

.sb-tooltip__desc {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--c-on-dark-dim);
    white-space: normal;
    word-break: break-word;
}

.sb-tooltip__feature {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    font-size: 0.78rem;
    color: var(--c-gray-500);
}
.sb-tooltip__feature svg { flex: none; width: 14px; height: 14px; color: var(--c-blue-600); }

/* Flecha (cuadrado rotado con el mismo fondo/borde azul). */
.sb-tooltip__arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--c-white);
    transform: rotate(45deg);
}
/* Tooltip ARRIBA del trigger → flecha en el borde inferior, apuntando abajo. */
.sb-tooltip:not(.sb-tooltip--below) .sb-tooltip__arrow {
    bottom: -6px;
    border-right: 1px solid var(--c-blue-600);
    border-bottom: 1px solid var(--c-blue-600);
}
/* Tooltip DEBAJO del trigger → flecha en el borde superior, apuntando arriba. */
.sb-tooltip--below .sb-tooltip__arrow {
    top: -6px;
    border-left: 1px solid var(--c-blue-600);
    border-top: 1px solid var(--c-blue-600);
}

@media (max-width: 480px) {
    .sb-tooltip { max-width: calc(100vw - 24px); }
}

/* ==== components/sb-toast.css ==== */
/* SBToast — sistema unificado de feedback no-bloqueante (Fase 5).
 * Reemplaza la fragmentación flash-banner / toasts locales: un solo host
 * global con stack, auto-dismiss y a11y (aria-live). Mobile-first: abajo a
 * lo ancho en móvil, columna arriba-derecha en ≥768px. */

.sb-toast-host {
    position: fixed;
    z-index: var(--z-toast, 1100);
    inset-inline: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none; /* los toasts individuales sí reciben clicks */
}

.sb-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--c-surface, var(--c-white));
    color: var(--c-text);
    border: 1px solid var(--c-border, var(--c-gray-200));
    border-left: 4px solid var(--c-info, color-mix(in srgb, var(--c-blue-600) 79%, var(--c-sky)));
    border-radius: var(--radius-md, 10px);
    box-shadow: var(--shadow-lg, 0 14px 28px rgba(17, 24, 39, 0.15));
    font-size: 0.9rem;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.sb-toast--visible {
    opacity: 1;
    transform: translateY(0);
}

.sb-toast--success { border-left-color: var(--c-success); }
.sb-toast--error   { border-left-color: var(--c-danger, var(--c-danger)); }
.sb-toast--warning { border-left-color: var(--c-warning, var(--c-warning)); }

.sb-toast__icon {
    flex: none;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--c-on-brand);
    background: var(--c-info);
}

.sb-toast--success .sb-toast__icon { background: var(--c-success); }
.sb-toast--error   .sb-toast__icon { background: var(--c-danger, var(--c-danger)); }
.sb-toast--warning .sb-toast__icon { background: var(--c-warning, var(--c-warning)); }

.sb-toast__body { flex: 1; min-width: 0; }

.sb-toast__title {
    font-weight: 700;
    overflow-wrap: break-word;
}

.sb-toast__msg {
    margin-top: 2px;
    color: var(--c-text-soft);
    overflow-wrap: break-word;
}

.sb-toast__close {
    flex: none;
    background: none;
    border: 0;
    padding: 0 2px;
    /* Área táctil mínima 32px sin agrandar el icono (×) */
    min-width: 32px;
    min-height: 32px;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--c-text-soft, var(--c-gray-500));
    cursor: pointer;
}

.sb-toast__close:hover { color: var(--c-text); }

@media (min-width: 768px) {
    .sb-toast-host {
        inset-inline: auto;
        right: 20px;
        top: 76px; /* bajo el header sticky */
        bottom: auto;
        width: 360px;
        max-width: calc(100vw - 40px);
    }

    .sb-toast {
        transform: translateY(-8px);
    }

    .sb-toast--visible {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sb-toast {
        transition: opacity 0.18s ease;
        transform: none;
    }
}

/* ==== components/sb-gallery.css ==== */
/* ============================================================================
   SBGallery — visor de galería / lightbox reutilizable ("widget galería").
   Generalizado desde .profile-lightbox. Soporta imagen y video, navegación
   por teclado/táctil, contador y caption. Singleton montado en <body>.
   ============================================================================ */

body.sb-gallery-open {
    overflow: hidden;
}

.sb-gallery {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal, 1000) + 40);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--space-3, 1rem);
    padding: max(var(--space-3, 1rem), env(safe-area-inset-top)) var(--space-3, 1rem) max(var(--space-3, 1rem), env(safe-area-inset-bottom));
    background: rgba(8, 10, 14, .94);
    color: var(--c-on-brand);
}

.sb-gallery[hidden] {
    display: none;
}

.sb-gallery__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 1rem);
    min-height: 40px;
}

.sb-gallery__counter {
    font-size: var(--fs-small);
    color: rgba(255, 255, 255, .7);
}

.sb-gallery__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

.sb-gallery__btn {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: var(--c-on-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--btn-transition);
}

.sb-gallery__btn:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .38);
}

.sb-gallery__btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--c-edit) 55%, var(--c-white));
    outline-offset: 3px;
}

.sb-gallery__stage-wrap {
    position: relative;
    min-height: 0;
    width: min(100%, 1120px, calc((100vh - 188px) * 1.6));
    max-height: calc(100vh - 188px);
    aspect-ratio: 16 / 10;
    align-self: center;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sb-gallery__stage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-dark-surface);
    border-radius: 8px;
    overflow: hidden;
}

.sb-gallery__img,
.sb-gallery__video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sb-gallery__img { pointer-events: none; }
.sb-gallery__img[hidden],
.sb-gallery__video[hidden] { display: none; }

.sb-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.sb-gallery__nav svg { pointer-events: none; }
.sb-gallery__nav--prev { left: var(--space-3, 1rem); }
.sb-gallery__nav--next { right: var(--space-3, 1rem); }

.sb-gallery__caption {
    max-width: 920px;
    width: min(100%, 920px);
    margin: 0 auto;
    padding: 0 var(--space-2, 0.5rem);
    text-align: center;
}

.sb-gallery__title {
    margin: 0;
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: 1.35;
}

.sb-gallery__description {
    margin: var(--space-1, 0.25rem) 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-line;
}

.sb-gallery__title:empty,
.sb-gallery__description:empty,
.sb-gallery__title[hidden],
.sb-gallery__description[hidden] {
    display: none;
}

.sb-gallery__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: var(--space-2, 0.5rem) 0 0;
}
.sb-gallery__dots[hidden] { display: none; }
.sb-gallery__dot {
    width: 8px;
    height: 8px;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    border: none;
    padding: 0;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transition: background .2s, transform .18s;
    flex-shrink: 0;
}
.sb-gallery__dot:hover { background: rgba(255, 255, 255, .55); /* sobre-media: visor a pantalla completa */ }
.sb-gallery__dot--active {
    background: var(--c-edit);
    transform: scale(1.3);
}

/* Disparadores: cualquier item de galería marca el cursor como ampliable. */
[data-sb-gallery-item] { cursor: zoom-in; }

@media (min-width: 768px) {
    .sb-gallery {
        padding: var(--space-4, 1.5rem);
    }

    .sb-gallery__stage-wrap {
        width: min(100%, 1180px, calc((100vh - 160px) * 1.7778));
        aspect-ratio: 16 / 9;
        max-height: calc(100vh - 160px);
    }
}

@media (max-width: 767px) {
    .sb-gallery__stage-wrap {
        width: min(100%, calc((100vh - 210px) * .8));
        aspect-ratio: 4 / 5;
        max-height: calc(100vh - 210px);
    }

    .sb-gallery__nav--prev { left: 4px; }
    .sb-gallery__nav--next { right: 4px; }
}

/* ==== components/sb-media-uploader.css ==== */
/* ============================================================================
   SBMediaUploader — selector de imágenes/video reutilizable.
   Grid de miniaturas con preview + spinner + borrado individual.
   Generalizado desde el composer de publicaciones (.pub-media-*).
   ============================================================================ */

.sb-media-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sb-media-grid--dragging {
    touch-action: none;
}

.sb-media-cell {
    position: relative;
    width: 88px;
    height: 88px;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.sb-media-cell img,
.sb-media-cell video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sb-media-cell--video::after {
    content: '▶';
    position: absolute;
    bottom: 4px;
    left: 5px;
    font-size: 0.7rem;
    color: var(--c-on-brand);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.sb-media-cell__del {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.70);
    color: var(--c-on-brand);
    font-size: 0;
    cursor: pointer;
    transition: background 0.15s;
}

/* X dibujada con CSS: centrado exacto, independiente de la fuente */
.sb-media-cell__del::before,
.sb-media-cell__del::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
}

.sb-media-cell__del::before { transform: translate(-50%, -50%) rotate(45deg); }
.sb-media-cell__del::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.sb-media-cell__del:hover {
    background: var(--c-danger-surface);
}

.sb-media-cell--preview {
    opacity: 0.80;
}

/* Acciones extra por celda (p.ej. Editar caption). */
.sb-media-cell__actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 2px;
    padding: 3px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
    opacity: 0;
    transition: opacity 0.15s;
}
.sb-media-cell:hover .sb-media-cell__actions,
.sb-media-cell:focus-within .sb-media-cell__actions {
    opacity: 1;
}
.sb-media-cell__action {
    flex: 1;
    min-height: 0;
    padding: 3px 4px;
    border: none;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--c-surface) 92%, transparent);
    color: var(--c-text);
    font-size: 0.66rem;
    font-weight: 600;
    cursor: pointer;
}
.sb-media-cell__action:hover { background: var(--c-white); color: var(--c-text); }

/* Reordenar (drag-drop). */
.sb-media-cell[draggable="true"] { cursor: grab; }
.sb-media-cell--dragging { opacity: 0.45; }
.sb-media-cell--dragover { outline: 2px dashed var(--c-primary); outline-offset: -2px; }

/* Encolada (modo diferido): se subirá al guardar el formulario. */
.sb-media-cell--pending {
    opacity: 0.92;
    border-style: dashed;
    border-color: var(--c-primary);
}
.sb-media-cell--pending::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-brand-surface);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.sb-media-cell__spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
}

.sb-media-cell__spinner::after {
    content: '';
    width: 24px;
    height: 24px;
    border: 2.5px solid rgba(255, 255, 255, 0.45);
    border-top-color: var(--c-on-brand);
    border-radius: 50%;
    animation: sb-media-spin 0.65s linear infinite;
}

.sb-media-cell--error {
    border-color: var(--c-danger);
    opacity: 1;
}

.sb-media-cell--error::after {
    content: '✕';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(220, 38, 38, 0.65);
    color: var(--c-on-brand);
    font-size: 1.4rem;
}

@keyframes sb-media-spin {
    to { transform: rotate(360deg); }
}

/* ── Botón "+ Agregar" ───────────────────────────────────── */
.sb-media-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.9rem;
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: var(--c-text-muted);
    cursor: pointer;
}

.sb-media-add:hover {
    border-color: var(--c-primary);
    color: var(--c-primary-ink);
}

.sb-media-add.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ── Hint de subida / error ──────────────────────────────── */
.sb-media-hint {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    color: var(--c-text-muted);
}

.sb-media-hint--uploading {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--c-primary-ink);
    font-weight: 600;
}

.sb-media-hint--uploading::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid color-mix(in srgb, var(--c-primary) 30%, transparent);
    border-top-color: var(--c-primary);
    border-radius: 50%;
    animation: sb-media-spin 0.65s linear infinite;
    flex-shrink: 0;
}

.sb-media-hint--error {
    color: var(--c-danger);
    font-weight: 600;
}

/* ==== components/hour-picker.css ==== */
/**
 * hour-picker.css — Selector de hora AM/PM reutilizable (componente global).
 *
 * Estilos del botón disparador (.biz-hour-trigger) y del popup (.biz-hour-picker)
 * que maneja schedule-editor.js. Antes vivían en negocios.css; se exponen aquí
 * para que el mismo picker funcione fuera del módulo de negocios (p. ej. el
 * widget público de renta). Cargado globalmente desde el layout app.php.
 */
.biz-hour-trigger {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--c-powder);
    border-radius: 8px;
    padding: 10px;
    color: var(--c-text);
    background: var(--c-white);
    font: inherit;
    text-align: left;
    font-weight: 800;
    cursor: pointer;
}
.biz-hour-trigger:disabled {
    color: var(--c-slate-400);
    background: var(--c-surface-2);
    cursor: not-allowed;
}

.biz-hour-picker[hidden] {
    display: none;
}
.biz-hour-picker {
    position: fixed;
    /* Por encima del modal de horarios (--z-modal: 1000); si no, el picker
       se abre detrás del modal y parece que "no pasa nada" al hacer clic. */
    z-index: calc(var(--z-modal, 1000) + 100);
    width: min(330px, calc(100vw - 24px));
    border: 1px solid var(--c-powder);
    border-radius: 8px;
    padding: 12px;
    background: var(--c-white);
    box-shadow: 0 18px 50px rgba(7, 20, 39, 0.24);
}
.biz-hour-picker__head,
.biz-hour-picker__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.biz-hour-picker__head strong {
    color: var(--c-text);
}
.biz-hour-picker__head button {
    width: 32px;
    height: 32px;
    border: 1px solid var(--c-powder);
    border-radius: 999px;
    background: var(--c-white);
    font-size: 1.2rem;
    line-height: 1;
}
.biz-hour-picker__head .biz-modal-close-text {
    width: auto;
    height: 36px;
    border-color: color-mix(in srgb, var(--c-danger) 22%, var(--c-red-100));
    border-radius: 8px;
    background: var(--c-red-50);
    color: color-mix(in srgb, var(--c-danger) 85%, black);
    font-size: 0.86rem;
    line-height: 1;
}
.biz-hour-picker__head .biz-modal-close-text:hover,
.biz-hour-picker__head .biz-modal-close-text:focus-visible {
    border-color: var(--c-red-brand);
    background: var(--c-red-brand);
    color: var(--c-on-brand);
}
.biz-hour-picker__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0;
}
.biz-hour-picker__grid label {
    display: grid;
    gap: 5px;
    color: var(--c-steel-600);
    font-size: 0.82rem;
    font-weight: 800;
}
.biz-hour-picker select {
    width: 100%;
    border: 1px solid var(--c-powder);
    border-radius: 8px;
    padding: 10px;
    background: var(--c-white);
    color: var(--c-text);
    font: inherit;
    font-weight: 800;
}
.biz-hour-picker__period {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.biz-hour-picker__period button,
.biz-hour-picker__actions button {
    min-height: 38px;
    border: 1px solid var(--c-powder);
    border-radius: 8px;
    background: var(--c-white);
    color: var(--c-text);
    font-weight: 900;
}
.biz-hour-picker__period button.is-active,
.biz-hour-picker__actions [data-hour-apply] {
    border-color: var(--c-blue-vivid);
    background: var(--c-blue-vivid);
    color: var(--c-on-brand);
}

/* ==== components/sb-calendar.css ==== */
/* SBCalendar — mini calendario de mes reutilizable (estilo cal.com).
   Se carga globalmente para que funcione en el perfil, /reservar y el panel
   del negocio (alta manual). El componente JS vive en js/components/sb-calendar.js. */
.sbcal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.sbcal__title { font-weight: 700; font-size: 0.95rem; text-transform: capitalize; }
.sbcal__nav { border: 1px solid var(--c-border, var(--c-gray-200)); background: var(--c-white); color: var(--c-text, var(--c-gray-900)); width: 30px; height: 30px; border-radius: 8px; font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 0; }
.sbcal__nav:disabled { opacity: 0.35; cursor: default; }
.sbcal__nav:hover:not(:disabled) { background: var(--c-gray-100); color: var(--c-text, var(--c-gray-900)); }
.sbcal__wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.sbcal__wd span { text-align: center; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; color: var(--c-text-muted, var(--c-gray-400)); }
.sbcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.sbcal__cell { aspect-ratio: 1 / 1; border: 0; border-radius: 8px; background: var(--c-gray-100); color: var(--c-text, var(--c-gray-900)); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0; transition: background-color .12s ease, color .12s ease; }
.sbcal__cell:hover:not(:disabled) { background: var(--c-gray-900); color: var(--c-on-brand); }
.sbcal__cell--empty { background: none; cursor: default; }
.sbcal__cell--off { background: none; color: var(--c-text-muted, var(--c-gray-300)); cursor: default; font-weight: 400; }
.sbcal__cell--today { box-shadow: inset 0 0 0 1.5px var(--c-gray-900); }
.sbcal__cell--on { background: var(--c-gray-900); color: var(--c-on-brand); }

/* Embed / tema oscuro: legibilidad sobre fondo oscuro */
body.sb-embed .sbcal__cell { background: var(--c-primary-hover); color: var(--c-slate-200); }
body.sb-embed .sbcal__cell--off { background: none; color: var(--c-steel-700); }
body.sb-embed .sbcal__nav { background: var(--c-primary-hover); color: var(--c-slate-200); border-color: var(--c-gray-700); }
@media (prefers-color-scheme: dark) {
    body.sb-embed .sbcal__nav:hover:not(:disabled) { background: var(--c-gray-700); color: var(--c-on-brand); }
}