/* ============================================================
   HUF — Dialecto Vitrina (HVL §16, ADR-092)
   ------------------------------------------------------------
   El lenguaje de las pantallas que usa el CLIENTE del negocio: la
   tienda y el menú QR (_MenuLayout), el portal del salón
   (_SalonLayout) y el del gimnasio (_ClienteLayout). Se activa con

       <body data-hd-theme="vitrina" data-hd-vertical="restaurante">

   y lo carga _VitrinaStyles.cshtml, nunca _HufStyles: la Vitrina no
   descarga la cáscara ni las piezas de trabajo del panel (sidebar,
   tablas, workspace…), solo las primitivas que emiten sus TagHelpers
   (ícono, botón, campo, modal, aviso, insignia). Antes la tienda
   bajaba 58 hojas para pintar una carta.

   QUÉ HAY AQUÍ, Y POR QUÉ EN UN SOLO ARCHIVO
   1. La fuente. Las tres superficies públicas declaraban Segoe UI, que
      en Android no existe y salía Roboto; y aunque hubieran dicho
      Satoshi, el @font-face vivía en admin-portal.css, que ningún
      layout público carga.
   2. El tema claro (decisión 38) y el acento de la VERTICAL (decisión
      39), con los pares de contraste ya calculados en HVL §5.3.2 —
      los mismos valores que el modo pastel, no unos nuevos a ojo.
   3. La geometría propia (radios 12/16/20, una sombra suave) y la
      cabecera/pie comunes a las tres superficies.
   Lo propio de cada pantalla (la ficha de producto, el riel de
   categorías…) NO va aquí: vive en su hoja de página (menu-qr.css).

   Sin degradados (decisión 40), 180ms y la primitiva de 8px (§16.1).
   ============================================================ */

@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ── Tema claro (decisión 38) ──────────────────────────────────
   Neutros de la variante clara del panel (neo-industrial-light.css),
   ya auditados: texto #0F172A 15–17:1, apagado #475569 ≥ 5.9:1 sobre
   fondo, tarjeta e inset. El fondo es un gris apenas cálido para que la
   tarjeta blanca se despegue sin borde. */
[data-hd-theme="vitrina"] {
    color-scheme: light;

    --hd-color-bg:            #F4F5F7; /* L0 — fondo de la página */
    --hd-color-bg-secondary:  #FFFFFF; /* L1 — cabecera, hoja */
    --hd-color-surface:       #FFFFFF; /* L2 — tarjetas */
    --hd-color-inset:         #F1F3F6; /* L3 — campos, controles */
    --hd-color-border:        rgba(15, 23, 42, 0.10);
    --hd-color-border-strong: rgba(15, 23, 42, 0.22);

    --hd-theme-bg:          var(--hd-color-bg);
    --hd-theme-surface:     var(--hd-color-surface);
    --hd-theme-text:        #0F172A;
    --hd-theme-text-muted:  #475569;
    --hd-theme-placeholder: #64748B;
    --hd-theme-font:        var(--hd-font-sans);

    /* Estados en su versión clara (neo-industrial-light.css): los de
       tokens.css están calibrados para fondo oscuro y sobre blanco no
       llegan a AA en texto pequeño. */
    --hd-color-success: #166534;
    --hd-color-warning: #92400E;
    --hd-color-error:   #B91C1C;
    --hd-color-info:    #075985;

    /* Geometría de la Vitrina (§16.2): 12 controles · 16 tarjetas ·
       20 hoja inferior. Se redefinen los MISMOS tokens que usan las
       primitivas, así el botón y el campo toman el radio de la Vitrina
       sin una regla por componente. */
    --hd-radius-sm: 12px;
    --hd-radius-md: 16px;
    --hd-vt-radius-sheet: 20px;
    --hd-vt-shadow-card: 0 4px 14px rgba(15, 23, 42, 0.06);
    --hd-shadow-floating: 0 18px 40px rgba(15, 23, 42, 0.18);

    /* Base de 16px (§16.2): el cliente lee en la calle y con una mano. */
    --hd-text-base: 1rem;

    /* El anillo de foco se REDEFINE aquí y no se hereda de tokens.css. Allá
       vale `2px solid var(--hd-theme-accent-text)` resuelto en :root, donde
       el acento todavía es el turquesa de Hednora: el portal del gimnasio
       enfocaba sus campos con un anillo turquesa sobre su marca verde
       (visto en el barrido del ADR-092). Declarado en el mismo elemento que
       lleva el acento, el var() resuelve contra el acento de la vertical. */
    --hd-focus-ring: 2px solid var(--hd-theme-accent-text);

    /* Acento por defecto: el de restaurante. Toda superficie Vitrina
       declara su data-hd-vertical; esto solo cubre un descuido. */
    --hd-theme-accent:          #F59E0B;
    --hd-theme-accent-rgb:      245, 158, 11;
    --hd-theme-accent-text:     #92400E;
    --hd-theme-accent-hover:    #D97706;
    --hd-color-accent-contrast: #08131F;
    --hd-glow-accent: none;
}

/* ── Acento de la vertical (decisión 39) ───────────────────────
   Valores de la tabla calculada de HVL §5.3.2 (los mismos del modo
   pastel). accent-text es el acento usado COMO TEXTO sobre claro (precio,
   enlace, foco); accent-contrast es el texto SOBRE el acento sólido
   (botón primario). Nunca a ojo: el azul de comercial es el único
   acento oscuro y por eso el único con texto blanco. */
[data-hd-theme="vitrina"][data-hd-vertical="restaurante"] {
    --hd-theme-accent:          #F59E0B;
    --hd-theme-accent-rgb:      245, 158, 11;
    --hd-theme-accent-text:     #92400E; /* 7.0:1 sobre blanco */
    --hd-theme-accent-hover:    #D97706;
    --hd-color-accent-contrast: #08131F; /* 8.70:1 sobre #F59E0B */
}

[data-hd-theme="vitrina"][data-hd-vertical="comercial"] {
    --hd-theme-accent:          #2563EB;
    --hd-theme-accent-rgb:      37, 99, 235;
    --hd-theme-accent-text:     #1E40AF; /* 8.72:1 sobre blanco */
    --hd-theme-accent-hover:    #1D4ED8;
    --hd-color-accent-contrast: #FFFFFF; /* 5.17:1 sobre #2563EB */
}

[data-hd-theme="vitrina"][data-hd-vertical="gimnasio"] {
    --hd-theme-accent:          #10B981;
    --hd-theme-accent-rgb:      16, 185, 129;
    --hd-theme-accent-text:     #065F46; /* 7.6:1 sobre blanco */
    --hd-theme-accent-hover:    #059669;
    --hd-color-accent-contrast: #08131F; /* 7.37:1 sobre #10B981 */
}

[data-hd-theme="vitrina"][data-hd-vertical="peluqueria"] {
    --hd-theme-accent:          #F43F5E;
    --hd-theme-accent-rgb:      244, 63, 94;
    --hd-theme-accent-text:     #9F1239; /* 7.9:1 sobre blanco */
    --hd-theme-accent-hover:    #E11D48;
    --hd-color-accent-contrast: #08131F; /* 5.09:1 sobre #F43F5E */
}

/* ── Tema oscuro (script 141; quién lo elige: _VitrinaTemaScript) ──
   La Vitrina nació clara (decisión 38), pero la tienda y el menú QR eran
   oscuros desde siempre: sin esto, cada negocio habría visto su carta
   pasar de negro a blanco sin pedirlo. Desde el 2026-10-13 decide, en
   orden: el cliente (botón sol/luna), el negocio (tenants.vitrina_tema)
   y, si el negocio dejó "Automático", el tema del celular del cliente.
   Neutros: los del tema oscuro que tenía la tienda (theme-menu-qr.css).
   Contrastes calculados (WCAG): texto 16.3:1 y apagado 6.8:1 sobre la
   tarjeta; marcador 4.5:1 sobre el campo. La tarjeta no flota con sombra
   —sobre negro no se ve—: se despega con un borde de 1px, que es lo que
   hace aquí --hd-vt-shadow-card. */
[data-hd-theme="vitrina"][data-hd-vitrina-tema="oscuro"] {
    color-scheme: dark;

    --hd-color-bg:            #111111;
    --hd-color-bg-secondary:  #1A1A1A;
    --hd-color-surface:       #1C1C1C;
    --hd-color-inset:         #242424;
    --hd-color-border:        rgba(255, 255, 255, 0.10);
    --hd-color-border-strong: rgba(255, 255, 255, 0.18);

    --hd-theme-text:        #F8FAFC;
    --hd-theme-text-muted:  #A3A3A3;
    --hd-theme-placeholder: #8A8A8A;

    /* Estados en su versión para fondo oscuro (≥ 5.6:1 sobre el campo). */
    --hd-color-success: #22C55E;
    --hd-color-warning: #F59E0B;
    --hd-color-error:   #F87171;
    --hd-color-info:    #38BDF8;

    --hd-vt-shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.08);
    --hd-shadow-floating: 0 18px 40px rgba(0, 0, 0, 0.55);

    --hd-theme-accent-text: #F59E0B;
}

/* El acento como TEXTO sobre oscuro: el acento claro de cada vertical,
   no el oscuro que se usa sobre blanco (7.9, 6.7, 8.9 y 6.3:1 sobre la
   tarjeta). El botón primario no cambia: su par acento/contraste sirve
   igual en los dos temas. */
[data-hd-theme="vitrina"][data-hd-vitrina-tema="oscuro"][data-hd-vertical="restaurante"] { --hd-theme-accent-text: #F59E0B; }
[data-hd-theme="vitrina"][data-hd-vitrina-tema="oscuro"][data-hd-vertical="comercial"]   { --hd-theme-accent-text: #60A5FA; }
[data-hd-theme="vitrina"][data-hd-vitrina-tema="oscuro"][data-hd-vertical="gimnasio"]    { --hd-theme-accent-text: #34D399; }
[data-hd-theme="vitrina"][data-hd-vitrina-tema="oscuro"][data-hd-vertical="peluqueria"]  { --hd-theme-accent-text: #FB7185; }

/* ── Títulos ───────────────────────────────────────────────────
   700 en la Vitrina (§16.2); en Operación son 600. */
[data-hd-theme="vitrina"] h1,
[data-hd-theme="vitrina"] h2,
[data-hd-theme="vitrina"] h3 {
    font-weight: 700;
    color: var(--hd-theme-text);
}

/* ── Cabecera de la Vitrina ────────────────────────────────────
   La identidad es la del NEGOCIO: su logo y su nombre. Hednora firma
   solo en el pie (.vt-pie). No es sticky: lo que se queda pegado arriba
   al hacer scroll es lo que el cliente usa (el buscador y el riel). */
.vt-cabecera {
    display: flex;
    align-items: center;
    gap: var(--hd-space-3);
    min-height: 64px;
    padding: var(--hd-space-3) var(--hd-space-4);
    background: var(--hd-color-bg-secondary);
    border-bottom: 1px solid var(--hd-color-border);
}

.vt-cabecera__logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

/* Sin logo, el ícono de la vertical en su insignia de color sólido —
   la misma regla que la foto que falta (§16.2): nunca una letra suelta. */
.vt-cabecera__marca {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--hd-theme-accent);
    color: var(--hd-color-accent-contrast);
}

.vt-cabecera__texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vt-cabecera__nombre {
    font-size: var(--hd-text-title);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vt-cabecera__sub {
    margin: 0;
    font-size: var(--hd-text-caption);
    color: var(--hd-theme-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Las acciones de la cabecera van a la derecha: el botón sol/luna del tema
   (siempre) y la de la página ("Mis pedidos", "Salir"). */
.vt-cabecera__accion {
    margin-left: auto;
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
}

.vt-cabecera__accion > form { margin: 0; }

/* En la portada del salón la cabecera es una columna centrada: el botón del
   tema no cabe en el flujo sin desplazar el logo, así que va a la esquina. */
.vt-cabecera--portada { position: relative; }
.vt-cabecera--portada > .vt-cabecera__accion {
    position: absolute;
    top: var(--hd-space-3);
    right: var(--hd-space-3);
}

/* Botón de la cabecera: ícono + palabra, con borde (se ve como control,
   §8.7 regla 5) y 44px de alto. Bajo 400px queda solo el ícono para no
   comerse el nombre del negocio; el aria-label lo sigue nombrando. */
.vt-accion {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-2);
    min-width: 44px;
    height: 44px;
    padding: 0 var(--hd-space-3);
    justify-content: center;
    background: var(--hd-theme-surface);
    color: var(--hd-theme-text);
    border: 1px solid var(--hd-color-border-strong);
    border-radius: var(--hd-radius-pill);
    font-family: inherit;
    font-size: var(--hd-text-label);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.vt-accion .hd-icon { color: var(--hd-theme-accent-text); }
.vt-accion:hover { border-color: var(--hd-theme-text-muted); }

/* Botón sol/luna del tema (_VitrinaTemaBoton): solo ícono, 44×44. Muestra
   el tema al que se PASA: luna en claro, sol en oscuro. Lo decide el CSS y
   no el JS, para que el ícono correcto esté desde el primer pintado. */
.vt-accion--icono { padding: 0; width: 44px; }
.vt-accion--icono > span { display: inline-flex; }
.vt-accion--icono .hd-icon { color: var(--hd-theme-text-muted); }
.vt-accion--icono:hover .hd-icon { color: var(--hd-theme-text); }
[data-hd-vitrina-tema="oscuro"] .vt-tema__luna,
[data-hd-vitrina-tema="claro"] .vt-tema__sol { display: none; }

/* La acción principal de la cabecera, rellena con el acento de la vertical
   y en 700 ("Mis pedidos" de la tienda): el usuario pidió que se viera más
   (2026-10-13). Era un botón de borde, igual al de "Salir", y se perdía al
   lado del nombre del negocio. El par acento/contraste es el del botón
   primario: vale igual en claro y en oscuro. */
.vt-accion--destacada {
    background: var(--hd-theme-accent);
    color: var(--hd-color-accent-contrast);
    border-color: transparent;
    font-weight: 700;
}

.vt-accion--destacada .hd-icon { color: var(--hd-color-accent-contrast); }
.vt-accion--destacada:hover {
    box-shadow: 0 0 0 3px var(--hd-color-border-strong);
    border-color: transparent;
}

@media (max-width: 399.98px) {
    .vt-accion:not(.vt-accion--icono) > span { display: none; }
    .vt-accion { padding: 0; }
}

/* ── Pie: la firma de Hednora ──────────────────────────────────── */
.vt-pie {
    padding: var(--hd-space-6) var(--hd-space-4) var(--hd-space-5);
    text-align: center;
    font-size: var(--hd-text-meta);
    color: var(--hd-theme-text-muted);
}

.vt-pie strong { font-weight: 700; color: var(--hd-theme-text); }

/* ── Tarjeta de la Vitrina ─────────────────────────────────────
   Sin borde y con la sombra suave: sobre el fondo gris la tarjeta blanca
   se despega sola, y un borde de 1px además de la sombra sería el doble
   de señal para lo mismo. */
.vt-tarjeta {
    background: var(--hd-theme-surface);
    border-radius: var(--hd-radius-md);
    box-shadow: var(--hd-vt-shadow-card);
}

/* ── Primitivas del HUF dentro de la Vitrina ───────────────────
   Los TagHelpers emiten las mismas clases que en el panel; aquí solo se
   ajusta lo que la Vitrina cambia (§16.2). */

/* Botones en 700, igual que los títulos: en la Vitrina el botón es la
   frase que el cliente tiene que leer de un vistazo ("Agregar · $22.000"). */
[data-hd-theme="vitrina"] .hd-btn { font-weight: 700; }

/* Hoja inferior (§16.3 patrón 4). En el panel el modal ocupa la pantalla
   entera bajo 576px; en la Vitrina sube desde abajo, deja ver la carta
   detrás y se cierra tocando fuera — el gesto que el cliente ya conoce
   de cualquier app de pedidos. Mismo alto máximo con svh que el modal
   del panel, por la barra de direcciones del celular. */
[data-hd-theme="vitrina"] .hd-modal__content {
    border: none;
    border-radius: var(--hd-vt-radius-sheet);
}

[data-hd-theme="vitrina"] .hd-modal__header {
    background: var(--hd-color-bg-secondary);
    border-bottom: 1px solid var(--hd-color-border);
}

[data-hd-theme="vitrina"] .hd-modal__backdrop {
    background: rgba(15, 23, 42, 0.48);
}

@media (max-width: 575.98px) {
    [data-hd-theme="vitrina"] .hd-modal {
        align-items: flex-end;
        padding: 0;
    }

    [data-hd-theme="vitrina"] .hd-modal__dialog {
        height: auto;
        max-height: 92%;
    }

    [data-hd-theme="vitrina"] .hd-modal__content {
        height: auto;
        border-radius: var(--hd-vt-radius-sheet) var(--hd-vt-radius-sheet) 0 0;
    }

    /* El pie de la hoja respeta la zona del gesto de inicio del celular. */
    [data-hd-theme="vitrina"] .hd-modal__footer {
        padding-bottom: max(var(--hd-space-4), env(safe-area-inset-bottom));
    }
}

/* ── Contenedor de lectura de los portales (salón, gimnasio) ────────
   Una columna de ancho de lectura: son embudos de un paso a la vez, no
   tableros. Reemplaza a .salon-main y .cp-main, que vivían en un <style>
   de cada layout (HVL §12.3 los prohíbe en un .cshtml). */
.vt-main {
    max-width: 45rem;
    margin: 0 auto;
    padding: var(--hd-space-5) var(--hd-space-4) var(--hd-space-8);
}

/* Cabecera de portada: la del portal del salón, que es también su página
   de descubrimiento ("peluquerías en {ciudad} que agendan en línea"). Más
   grande que la de la tienda, pero sobre blanco: la franja sólida de
   acento con texto blanco que tenía daba 3.6:1 en rosa y no pasaba AA. */
.vt-cabecera--portada {
    flex-direction: column;
    text-align: center;
    padding: var(--hd-space-6) var(--hd-space-4) var(--hd-space-5);
}

.vt-cabecera--portada .vt-cabecera__logo,
.vt-cabecera--portada .vt-cabecera__marca {
    width: 80px;
    height: 80px;
}

.vt-cabecera--portada .vt-cabecera__texto { align-items: center; }

.vt-cabecera--portada .vt-cabecera__nombre {
    font-size: var(--hd-text-page);
    white-space: normal;
}

.vt-cabecera--portada .vt-cabecera__sub {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    white-space: normal;
    font-size: var(--hd-text-label);
}

/* Cabecera con contenido alineado a la columna de lectura del portal. */
.vt-cabecera--columna {
    padding-left: max(var(--hd-space-4), calc((100% - 45rem) / 2 + var(--hd-space-4)));
    padding-right: max(var(--hd-space-4), calc((100% - 45rem) / 2 + var(--hd-space-4)));
}

/* Quién está adentro, junto a "Salir": se apaga bajo 400px para no
   comerse el nombre del negocio. */
.vt-cabecera__usuario {
    font-size: var(--hd-text-caption);
    color: var(--hd-theme-text-muted);
}

@media (max-width: 399.98px) {
    .vt-cabecera__usuario { display: none; }
}

/* Encabezado de paso de un embudo: insignia con el numeral + título en
   una línea (el portal del salón: servicio → estilista → horario). */
.vt-paso {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
    margin-bottom: var(--hd-space-3);
}

.vt-paso h2 {
    margin: 0;
    font-size: var(--hd-text-section);
}

/* Navegación del portal (Inicio, Membresía, Rutinas, Agenda): pestañas
   sobre blanco, pegadas arriba para que cambiar de sección no obligue a
   volver al principio. */
.vt-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--hd-color-bg-secondary);
    border-bottom: 1px solid var(--hd-color-border);
}

.vt-nav .hd-tabs__list {
    max-width: 45rem;
    margin: 0 auto;
    padding: 0 var(--hd-space-4);
}

/* ── Tarjeta de panel en la Vitrina ────────────────────────────────
   Sin borde visible y con la sombra suave (§16.2), como la ficha de la
   tienda. El borde queda transparente —no se quita— para que la variante
   seleccionable lo pueda encender sin que la tarjeta cambie de tamaño. */
[data-hd-theme="vitrina"] .hd-panel-card {
    border-color: transparent;
    box-shadow: var(--hd-vt-shadow-card);
}

[data-hd-theme="vitrina"] .hd-panel-card:hover { border-color: transparent; }

[data-hd-theme="vitrina"] .hd-panel-card--selectable:hover { border-color: var(--hd-color-border-strong); }

[data-hd-theme="vitrina"] .hd-panel-card--selectable.is-selected {
    border-color: var(--hd-theme-accent);
    box-shadow: inset 0 0 0 1px var(--hd-theme-accent), var(--hd-vt-shadow-card);
}

[data-hd-theme="vitrina"] .hd-panel-card--selectable:focus-visible {
    outline: var(--hd-focus-ring);
    outline-offset: var(--hd-focus-offset);
}

/* ── Insignias de estado sobre claro ───────────────────────────────
   badges.css trae los pares calibrados para fondo oscuro ("sobre blanco
   da 2.1-3.8:1"). Mismos pares ya auditados de la variante clara del panel
   (docs/auditoria-tematizacion-2026-08-09.md); vivían en
   theme-portal-cliente.css y se mueven aquí con la Vitrina. Solo en el tema
   claro: en el oscuro valen los pares de badges.css, que son para fondo oscuro. */
[data-hd-theme="vitrina"]:not([data-hd-vitrina-tema="oscuro"]) .hd-badge--estado-activa,
[data-hd-theme="vitrina"]:not([data-hd-vitrina-tema="oscuro"]) .hd-badge--estado-confirmada {
    background: rgba(34, 197, 94, 0.14); color: #166534;
}
[data-hd-theme="vitrina"]:not([data-hd-vitrina-tema="oscuro"]) .hd-badge--estado-pendiente {
    background: rgba(245, 158, 11, 0.16); color: #92400E;
}
[data-hd-theme="vitrina"]:not([data-hd-vitrina-tema="oscuro"]) .hd-badge--estado-completada {
    background: rgba(0, 194, 168, 0.16); color: #00695C;
}
[data-hd-theme="vitrina"]:not([data-hd-vitrina-tema="oscuro"]) .hd-badge--estado-cancelada,
[data-hd-theme="vitrina"]:not([data-hd-vitrina-tema="oscuro"]) .hd-badge--estado-vencida {
    background: rgba(239, 68, 68, 0.14); color: #B91C1C;
}
[data-hd-theme="vitrina"]:not([data-hd-vitrina-tema="oscuro"]) .hd-badge--neutral {
    background: rgba(148, 163, 184, 0.20); color: #334155;
}

/* Las pestañas del portal son <a>: sin esto Bootstrap (reboot) las subraya.
   En el panel no pasa porque admin-portal.css ya lo neutraliza, y esa hoja
   la Vitrina no la carga. */
.vt-nav .hd-tabs__tab { text-decoration: none; }