/* wwwroot/css/theme.css — fuente única de la identidad visual de MenuQreator.
   Generado por blazor-app-base a partir de la paleta Restaurant/Food Service. bootstrap.min.css
   nunca se edita.

   POR QUÉ ESTE ARCHIVO MANDA:
   El CSS "scoped" de Blazor (MainLayout.razor.css, NavMenu.razor.css) compila a selectores de
   atributo (.sidebar[b-abc123], especificidad 0,2,0) y le gana a cualquier regla de clase de aquí
   (0,1,0), SIN IMPORTAR el orden de los <link>. El orden solo desempata entre reglas de igual
   especificidad. Por eso los .razor.css se limitan a maquetación y todo el color vive aquí.
   Si vuelves a poner un color en un .razor.css, este archivo deja de tener efecto EN SILENCIO. */

:root {
    /* ---- Paleta Restaurant/Food Service (16 tokens). Ver references/palettes.md. ---- */
    --bs-primary: #DC2626;
    --bs-primary-rgb: 220, 38, 38;
    --bs-secondary: #F87171;
    --bs-secondary-rgb: 248, 113, 113;
    --bs-body-bg: #FEF2F2;
    --bs-body-color: #450A0A;
    --bs-secondary-bg: #FDF7F2;      /* Muted — warm neutral cream, same family as the dark
                                         counterpart #2A1414; a cool lilac-grey here would break
                                         the warm terracotta palette on this "fondo dos tonos"
                                         section band */
    --bs-secondary-color: #64748B;   /* Muted Foreground */
    --bs-border-color: #FECACA;
    --bs-danger: #DC2626;            /* Destructive (coincide con Primary en esta paleta) */
    --bs-danger-rgb: 220, 38, 38;

    /* Card: sin esto Bootstrap 5.3 hereda --bs-card-bg de --bs-body-bg y la tarjeta queda
       del mismo color que la página — se pierde la separación que da profundidad. */
    --bs-card-bg: #FFFFFF;
    --bs-card-color: #450A0A;

    /* Accent no existe en Bootstrap: es el color de CTA que evita la pantalla monótona. */
    --app-accent: #A16207;
    --app-on-accent: #FFFFFF;

    /* Texto sobre cada color de fondo. Bootstrap compila el suyo a partir del primario POR
       DEFECTO, así que con un primario claro pondría blanco sobre claro. */
    --app-on-primary: #FFFFFF;
    --app-on-secondary: #0F172A;
    --app-on-destructive: #FFFFFF;

    /* Anillo de foco de marca: reemplaza el halo blanco fijo de app.css, que se ve roto
       sobre superficies oscuras. En esta paleta Ring == Primary (#DC2626).
       La opacidad NO es decorativa: WCAG 2.1 (1.4.11, componentes de interfaz) pide ≥3:1 del
       indicador de foco contra su fondo. A .70 el anillo compuesto sobre --bs-body-bg
       (#FEF2F2) supera el mínimo. */
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), .7);

    /* ---- Densidad (del DESIGN-BRIEF: cómoda) ---- */
    --app-space-unit: .5rem;
    --bs-border-radius: .5rem;

    /* ---- Tipografía (del DESIGN-BRIEF). Fuentes servidas LOCAL, nunca desde Google. ---- */
    --bs-body-font-family: "Inter", system-ui, sans-serif;
    --app-font-heading: "Playfair Display", Georgia, serif;

    /* ---- Superficie de card (del DESIGN-BRIEF: sombra) ----
       plano  → border: 0     / shadow: none
       borde  → border: 1px   / shadow: none
       sombra → border: none  / shadow: la de abajo */
    --app-card-border: none;
    --app-card-shadow: 0 1px 3px rgba(69, 10, 10, .08), 0 4px 12px rgba(69, 10, 10, .06);

    /* ---- Cromo corporativo ---- */
    --app-topbar-bg: var(--bs-primary);
    --app-topbar-fg: #FFFFFF;
    --app-topbar-fg-muted: rgba(255, 255, 255, .78);
    --app-sidebar-bg: var(--bs-primary);
    --app-sidebar-fg: #FDEEEE;
}

/* Modo oscuro. Requiere Bootstrap 5.3: en 5.1 este bloque no afecta a los componentes de
   Bootstrap y el modo oscuro queda a medias (bug observado en TiendaGest). */
[data-bs-theme="dark"] {
    --bs-body-bg: #1C0A0A;
    --bs-body-color: #FDEEEE;
    --bs-secondary-bg: #2A1414;
    --bs-secondary-color: #C4A5A5;
    --bs-border-color: #4A1F1F;
    --app-topbar-bg: #2A0F0F;
    --app-sidebar-bg: #2A0F0F;
    --app-card-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    /* El anillo de foco hereda el primario, que en oscuro sigue siendo visible por ser un rojo
       saturado; se conserva la misma opacidad que en claro (WCAG 2.4.7 / 1.4.11, ≥3:1). */
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), .7);
    --bs-card-bg: #2A1414;
    --bs-card-color: #FDEEEE;
}

/* ---- Tipografía local: Inter (body) + Playfair Display (headings). Nunca Google Fonts. ---- */

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

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

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../lib/fonts/inter-latin-600-normal.woff2') format('woff2');
}

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

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../lib/fonts/playfair-display-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../lib/fonts/playfair-display-latin-600-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../lib/fonts/playfair-display-latin-700-normal.woff2') format('woff2');
}

html, body {
    font-family: var(--bs-body-font-family);
}

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

/* Fondo de la app: dos tonos (del DESIGN-BRIEF). Bootstrap ya pinta `body` con --bs-body-bg
   (reboot.css); las bandas de sección usan --bs-secondary-bg donde la pantalla lo pida — no
   introduce colores nuevos, solo compone los dos tokens que ya existen arriba. */

/* Los botones leen sus propias variables de componente; atar el primario a la marca.
   El color de TEXTO también hay que fijarlo: Bootstrap lo compila a partir del primario por
   defecto (azul oscuro), así que con una paleta de primario claro pondría blanco sobre claro.
   Hay que fijar los tres estados — normal, hover y active — o el hover revierte al compilado. */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-color: var(--app-on-primary);
    --bs-btn-hover-color: var(--app-on-primary);
    --bs-btn-active-color: var(--app-on-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 75%, black);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-secondary {
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-color: var(--app-on-secondary);
    --bs-btn-hover-color: var(--app-on-secondary);
    --bs-btn-active-color: var(--app-on-secondary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 75%, black);
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
}

.btn-danger {
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-color: var(--app-on-destructive);
    --bs-btn-hover-color: var(--app-on-destructive);
    --bs-btn-active-color: var(--app-on-destructive);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-danger) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-danger) 75%, black);
    --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}

/* Botón de acento: la acción principal de cada pantalla. */
.btn-accent {
    --bs-btn-bg: var(--app-accent);
    --bs-btn-color: var(--app-on-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--app-accent) 85%, black);
    --bs-btn-hover-color: var(--app-on-accent);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--app-accent) 80%, black);
    /* El .btn base de Bootstrap 5.3.3 no define estas cuatro: las pone el mixin de variante, y
       .btn-accent no es una variante de Bootstrap, así que no hereda de ninguna. Sin ellas,
       `background-color: var(--bs-btn-active-bg)` queda inválido y el botón se vuelve
       TRANSPARENTE al pulsarlo, y `.btn:focus-visible` computa `box-shadow: none`.
       El anillo usa --bs-primary-rgb porque la paleta no define un `--app-accent-rgb`; es el
       triplete que sí existe siempre y da un halo visible sobre cualquier fondo del tema. */
    --bs-btn-active-bg: color-mix(in srgb, var(--app-accent) 75%, black);
    --bs-btn-active-color: var(--app-on-accent);
    --bs-btn-active-border-color: color-mix(in srgb, var(--app-accent) 75%, black);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* Bootstrap 5.3 compila los colores de estos componentes como hex literal, no como variable:
   --bs-focus-ring-color solo la consume la utilidad .focus-ring, que el scaffold nunca usa.
   Sin reengancharlos, todo formulario sale azul Bootstrap aunque la paleta sea otra. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.pagination {
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
}

.nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); }

.dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary); }

/* Aquí es donde la densidad del DESIGN-BRIEF se materializa de verdad. Sin estas dos reglas,
   --app-space-unit no lo consume nadie y elegir "cómoda" no cambia un solo píxel: el brief
   prometería una decisión que el CSS no honra. Card y tabla son las dos superficies donde la
   densidad se nota, y son las dos que esta skill genera en cada pantalla.
   El selector de la tabla es EL MISMO que usa Bootstrap, así que gana por orden de carga
   (theme.css va después) sin subir la especificidad. */
.card {
    border: var(--app-card-border);
    box-shadow: var(--app-card-shadow);
    --bs-card-spacer-y: calc(var(--app-space-unit) * 2);
    --bs-card-spacer-x: calc(var(--app-space-unit) * 2);
}

.table > :not(caption) > * > * {
    padding: var(--app-space-unit) calc(var(--app-space-unit) * 1.5);
}

/* Marca del auth-shell (AuthLayout): mismo primario que el resto del cromo corporativo. */
.auth-brand,
.auth-brand:hover {
    color: var(--bs-primary);
}

/* Barra superior corporativa. */
.app-topbar {
    background-color: var(--app-topbar-bg);
    color: var(--app-topbar-fg);
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.app-topbar a,
.app-topbar .btn-link {
    color: var(--app-topbar-fg);
}

/* Bootstrap declara .text-secondary con !important; la corrección tiene que igualarlo. */
.app-topbar .text-secondary {
    color: var(--app-topbar-fg-muted) !important;
}

/* Barra lateral. */
.sidebar {
    background-color: var(--app-sidebar-bg);
    background-image: none;
}

.sidebar .navbar-brand,
.sidebar .nav-link {
    color: var(--app-sidebar-fg);
}

/* El texto va con --app-on-primary, no con blanco fijo: el fondo del sidebar ES el primario. */
.sidebar .nav-link.active {
    background-color: rgba(var(--bs-primary-rgb), .85);
    color: var(--app-on-primary);
}

.sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, .08);
    color: var(--app-on-primary);
}

.panel-user,
.panel-logout-button,
.panel-logout-button:hover {
    color: var(--app-topbar-fg);
}

/* Cifras tabulares: sin esto las columnas de dinero y cantidad se desalinean carácter a
   carácter al cambiar de valor. Aplica donde vive todo el importe de la app. */
table,
dl.row dd,
input[type="number"],
.app-num {
    font-variant-numeric: tabular-nums;
}

/* Validación. El scaffold la trae con hex fijos en app.css (#e50000, #26b050); al purgar
   ese archivo aterriza aquí, atada al tema. Las clases las emite el FieldCssClassProvider
   de Blazor sobre los inputs de un EditForm. */
.validation-message {
    color: var(--bs-danger);
}

.invalid {
    outline: 1px solid var(--bs-danger);
}

.valid.modified:not([type="checkbox"]) {
    outline: 1px solid var(--bs-success);
}

/* Banner de error no manejado de Blazor. OJO: el elemento es un ID, no una clase
   (`<div id="blazor-error-ui">` en MainLayout.razor), y el scaffold lo pinta en
   MainLayout.razor.css — CSS scoped, no app.css. Un selector de clase `.blazor-error-ui`
   nunca haría match. Al purgar el scoped, el color vive aquí. */
#blazor-error-ui {
    background-color: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

/* Indicador de pasos del asistente (StepIndicator). Un color por estado, más el ✓/número que ya
   trae el marcado — el color nunca es la única señal (regla 4 de content-rules). */
.step-indicator-item.is-pending { color: var(--bs-secondary-color); }
.step-indicator-item.is-current { color: var(--bs-primary); font-weight: 600; }
.step-indicator-item.is-done { color: var(--app-accent); }

.step-indicator-item.is-pending .step-indicator-badge {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

.step-indicator-item.is-current .step-indicator-badge {
    background-color: var(--bs-primary);
    color: var(--app-on-primary);
}

.step-indicator-item.is-done .step-indicator-badge {
    background-color: var(--app-accent);
    color: var(--app-on-accent);
}

/* Franja de <ErrorBoundary>. Ésta sí viene de app.css, con `#b32121` y `color: white`.
   Se conserva el icono SVG embebido del scaffold (es un asset, no un color) y se tokeniza
   solo el color. */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--bs-danger);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--app-on-destructive);
}

/* ---------------------------------------------------------------------------
   Menú público (Fase 4)

   Reparto deliberado: el COLOR del menú (fondo, texto, acento, tipografías) es
   dato del restaurantero y viaja inline desde MenuStyle vía StyleCss, porque
   cambia por menú y no puede vivir en una hoja estática. Lo que está aquí es
   solo el cromo que NO personaliza el usuario: agotado, etiquetas, pie y la
   maquetación. Si algo de esto se mueve a un .razor, verify-theme.sh lo caza.
   --------------------------------------------------------------------------- */

.public-page {
    min-height: 100vh;
}

.public-footer {
    padding: 2rem 1rem 3rem;
    text-align: center;
}

.public-footer-link {
    color: var(--bs-secondary-color);
    font-size: .8rem;
    text-decoration: none;
}

/* container-type hace de este elemento la referencia de ancho de sus reglas, en vez de la ventana.
   Es lo que permite que el canvas del editor, que mide 390px sin que la ventana cambie de tamaño,
   dibuje exactamente lo que ve el comensal en su celular. Ver el @container del hero más abajo. */
.menu-render {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 2rem;
    container-type: inline-size;
    background-color: var(--menu-fondo, #FFFFFF);
    color: var(--menu-texto-color, #1F2937);
}

/* Separación y ancho del hero: variables de sección, para que el panel de layout las arrastre. La
   cantidad de columnas NO es variable — es un clic, y se sigue emitiendo como declaración. */
.menu-render-platillos {
    gap: var(--sc-separacion, 16px);
}

.menu-render-cabecera {
    text-align: center;
    margin-bottom: 2rem;
}

.menu-render-titulo {
    font-family: var(--menu-heading-font, var(--app-font-heading));
    color: var(--menu-heading-color, inherit);
    margin-bottom: .25rem;
}

.menu-render-descripcion,
.menu-render-seccion-descripcion {
    opacity: .8;
}

.menu-render-seccion {
    margin-bottom: 2.5rem;
}

.menu-render-seccion-titulo {
    font-family: var(--menu-heading-font, var(--app-font-heading));
    color: var(--menu-heading-color, inherit);
    font-size: 1.35rem;
    border-bottom: 1px solid currentColor;
    padding-bottom: .35rem;
    margin-bottom: 1rem;
    opacity: .95;
}

.menu-render-hero img {
    width: 100%;
    height: auto;
    border-radius: .5rem;
    margin-bottom: 1rem;
}

.menu-render-vacio {
    text-align: center;
    padding: 2rem 0;
    opacity: .75;
}

.menu-render-enlace {
    display: block;
    color: inherit;
    text-decoration: none;
}

.menu-render-seleccionable {
    cursor: pointer;
}

/* El estilo continuo del platillo llega como variables CSS sobre la tarjeta y se consume aquí.
   Existe así porque arrastrar un deslizador sobre un circuito Blazor Server costaría un viaje por
   WebSocket por pixel: como variable, el módulo JS la mueve sin que el servidor se entere, y sólo al
   soltar se guarda. Los nombres los declara Domain/Styling/StyleVars.cs, y StyleVarsCssTests cuadra
   las emitidas contra las consumidas aquí — sin esa prueba, una letra de más deja el deslizador
   moviéndose y el canvas quieto, sin que nada falle.

   Los valores de reserva son los mismos que ItemStyle trae por omisión: una tarjeta renderizada
   fuera de su contenedor, o un StyleJson corrupto, se sigue viendo como un menú y no como texto
   plano. */
.menu-item {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background-color: var(--mi-fondo, transparent);
    padding: var(--mi-relleno-y, 8px) var(--mi-relleno-x, 0px);
    border-radius: var(--mi-radio, 0px);
}

/* Separador entre platillos. Es discreto —tres opciones y un clic—, así que viaja como clase y no
   como variable. La opción "none" no necesita regla: es la ausencia de las otras dos. */
.menu-item--sep-line {
    border-top: 1px solid var(--bs-border-color);
    padding-top: .75rem;
}

.menu-item--sep-dots {
    border-top: 1px dotted var(--bs-border-color);
    padding-top: .75rem;
}

.menu-item-subtitulo {
    font-size: var(--mi-subtitulo-tam, 14px);
    line-height: var(--mi-subtitulo-alto, 1.4);
    color: var(--mi-subtitulo-color, inherit);
}

.menu-item-descripcion {
    font-size: var(--mi-descripcion-tam, 16px);
    line-height: var(--mi-descripcion-alto, 1.5);
    color: var(--mi-descripcion-color, inherit);
}

.menu-item-cuerpo {
    flex: 1;
    min-width: 0;
}

.menu-item-encabezado {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
}

.menu-item-nombre {
    flex: 1;
    min-width: 0;
    font-size: var(--mi-nombre-tam, 18px);
    line-height: var(--mi-nombre-alto, 1.4);
    color: var(--mi-nombre-color, inherit);
}

.menu-item-precio {
    white-space: nowrap;
    font-size: var(--mi-precio-tam, 16px);
    color: var(--mi-precio-color, inherit);
}

.menu-item-foto {
    object-fit: cover;
    flex-shrink: 0;
}

.menu-item-foto--sm { width: 3rem; height: 3rem; }
.menu-item-foto--md { width: 4.5rem; height: 4.5rem; }
.menu-item-foto--lg { width: 6.5rem; height: 6.5rem; }

.menu-item-foto--square { border-radius: 0; }
.menu-item-foto--rounded { border-radius: .5rem; }
.menu-item-foto--circle { border-radius: 50%; }

.menu-item-variaciones {
    list-style: none;
    padding: 0;
    margin: .35rem 0 0;
    font-size: .9em;
    opacity: .9;
}

.menu-item-variaciones--inline {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.menu-item-variaciones li {
    display: flex;
    gap: .35rem;
}

.menu-item-variacion-precio {
    font-weight: 600;
}

.menu-item-etiquetas {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.menu-item-etiqueta {
    font-size: .7rem;
    line-height: 1;
    padding: .25rem .5rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}

.menu-item-etiqueta--pill {
    border-radius: 999px;
    background-color: var(--etiqueta-color);
    color: var(--app-on-accent);
}

.menu-item-etiqueta--flat {
    background-color: var(--etiqueta-color);
    color: var(--app-on-accent);
}

.menu-item-etiqueta--outline {
    border: 1px solid var(--etiqueta-color);
    color: var(--etiqueta-color);
    border-radius: 999px;
}

.menu-item--agotado {
    opacity: .55;
}

.menu-item-agotado-marca {
    display: inline-block;
    margin-top: .35rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .15rem .45rem;
    border-radius: .25rem;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

.menu-item--destacado .menu-item-nombre::after {
    content: " \2605";
    color: var(--menu-accent, var(--app-accent));
}

/* Hero a la izquierda o a la derecha: la imagen de la seccion y sus platillos
   comparten renglon. Sin esto los dos valores se veian identicos a "list", y el
   estilo elegido en el editor no se notaba por ningun lado. */
.menu-render-seccion:has(.menu-render-hero--hero-left),
.menu-render-seccion:has(.menu-render-hero--hero-right) {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.menu-render-seccion:has(.menu-render-hero--hero-right) {
    flex-direction: row-reverse;
}

.menu-render-hero--hero-left,
.menu-render-hero--hero-right {
    flex-shrink: 0;
    width: var(--sc-hero-ancho, 40%);
}

/* En celular no hay ancho para dos columnas: el hero vuelve a ir arriba.

   Es @container y no @media a propósito. Una media query pregunta por el ancho de la ventana, y el
   canvas del editor cambia de ancho sin que la ventana se entere: el modo celular habría dejado el
   hero en dos columnas, mintiendo justo en la única regla escrita para el celular.

   608.98 y no 640.98: una @container mide el CONTENT BOX de .menu-render, que descuenta sus 2rem
   (32px) de padding horizontal. 640.98 - 32 = 608.98 deja el corte donde estaba para el comensal;
   dejarlo en 640.98 lo habría corrido a ventanas de hasta ~673px sin que nadie lo pidiera. */
@container (max-width: 608.98px) {
    .menu-render-seccion:has(.menu-render-hero--hero-left),
    .menu-render-seccion:has(.menu-render-hero--hero-right) {
        display: block;
    }
}

.menu-item--seleccionado {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

.menu-barra {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1rem 1rem 0;
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.menu-barra-idioma a {
    text-decoration: none;
    font-size: .85rem;
    padding: .2rem .5rem;
    border-radius: .25rem;
}

.menu-barra-idioma a.is-activo {
    background-color: var(--app-accent);
    color: var(--app-on-accent);
}

.portada {
    max-width: 46rem;
    margin: 0 auto;
    padding: 2rem 1rem;
    text-align: center;
}

.portada-logo {
    width: 7rem;
    height: 7rem;
    object-fit: contain;
    margin-bottom: 1rem;
}

.portada-nombre {
    font-family: var(--app-font-heading);
}

.portada-datos {
    color: var(--bs-secondary-color);
    font-size: .9rem;
    margin-bottom: 1.5rem;
}

.portada-menus {
    display: grid;
    gap: .75rem;
    margin-top: 1.5rem;
}

.portada-menu-card {
    display: block;
    padding: 1rem;
    border-radius: .5rem;
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--app-card-shadow);
    text-decoration: none;
    color: inherit;
    background-color: var(--bs-body-bg);
}

.portada-redes a {
    margin: 0 .4rem;
    font-size: 1.25rem;
    text-decoration: none;
}

.no-disponible {
    max-width: 32rem;
    margin: 0 auto;
    padding: 4rem 1rem;
    text-align: center;
}

.no-disponible-icono {
    font-size: 3rem;
    color: var(--bs-secondary-color);
    margin-bottom: 1rem;
}