/* _content/MenuQreator/Components/Editor/ContenidoTab.razor.rz.scp.css */
/* Sólo maquetación; el color vive en theme.css. Ver el encabezado de ese archivo. */

.editor-contenido[b-h6na8coisx] {
    padding: var(--app-space-unit);
    font-size: .9rem;
}

.editor-contenido .form-label[b-h6na8coisx] {
    margin-top: calc(var(--app-space-unit) * .75);
    margin-bottom: .15rem;
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.editor-contenido-encabezado[b-h6na8coisx] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--app-space-unit);
}

.editor-contenido-pendiente[b-h6na8coisx] {
    font-size: .75rem;
    color: var(--bs-danger);
    white-space: nowrap;
}

.editor-contenido-subtitulo[b-h6na8coisx] {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-secondary-color);
}

.editor-contenido-variacion[b-h6na8coisx] {
    display: grid;
    grid-template-columns: 1fr 1fr 5.5rem auto;
    gap: .25rem;
    margin-bottom: .25rem;
}

.editor-contenido-etiquetas[b-h6na8coisx] {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--app-space-unit) * 1.5);
}

.editor-contenido-fotos[b-h6na8coisx] {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--app-space-unit) * .75);
    margin-bottom: var(--app-space-unit);
}

.editor-contenido-foto img[b-h6na8coisx] {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: var(--bs-border-radius);
    display: block;
}

.editor-contenido-foto figcaption[b-h6na8coisx] {
    display: flex;
    gap: .15rem;
    margin-top: .25rem;
}
/* _content/MenuQreator/Components/Editor/EditorCanvas.razor.rz.scp.css */
/* Sólo maquetación; el color vive en theme.css. Ver el encabezado de ese archivo. */

/* overflow en los dos ejes: el marco tiene un ancho mínimo y no se deja apretar, así que en una
   pantalla angosta se desplaza en lugar de encogerse. Encogerlo era lo que hacía que el modo
   Escritorio dibujara el hero de celular en una laptop de 1280px. */
.editor-canvas[b-dg7ctxl5nj] {
    flex: 1;
    overflow: auto;
    display: flex;
    justify-content: center;
    padding: calc(var(--app-space-unit) * 2);
    background-color: var(--bs-secondary-bg);
}

/* El marco es lo que cambia de ancho al elegir escritorio / tablet / celular. El fondo va aquí y no
   en el menú: lo de adentro lo pinta el estilo del restaurante, y esto es el "papel" sobre el que
   se ve. */
.editor-canvas-marco[b-dg7ctxl5nj] {
    flex-shrink: 0;
    align-self: flex-start;
    background-color: var(--bs-card-bg);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--app-card-shadow);
    overflow: hidden;
}
/* _content/MenuQreator/Components/Editor/EditorInspector.razor.rz.scp.css */
/* Sólo maquetación; el color vive en theme.css. Ver el encabezado de ese archivo. */

.editor-inspector-pestanas[b-72a1dvarhc] {
    display: flex;
    border-bottom: 1px solid var(--bs-border-color);
    position: sticky;
    top: 0;
    background-color: var(--bs-card-bg);
    z-index: 1;
}

.editor-inspector-pestana[b-72a1dvarhc] {
    flex: 1;
    padding: calc(var(--app-space-unit) * .75);
    border: 0;
    /* Separado del atajo `border-bottom` a propósito: un atajo en CSS aislado puede colar un color
       sin que se note, y verify-theme sólo acepta el color cuando es el valor completo. */
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    background-color: transparent;
    color: var(--bs-secondary-color);
    font-size: .9rem;
}

.editor-inspector-pestana.is-activa[b-72a1dvarhc] {
    color: var(--bs-body-color);
    border-bottom-color: var(--bs-primary);
    font-weight: 600;
}

.editor-inspector-pestana:disabled[b-72a1dvarhc] {
    opacity: .5;
}

.editor-inspector-vacio[b-72a1dvarhc] {
    padding: calc(var(--app-space-unit) * 3);
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: .9rem;
}
/* _content/MenuQreator/Components/Editor/EditorRail.razor.rz.scp.css */
/* Sólo maquetación. El color vive en theme.css — ver el encabezado de ese archivo: el CSS aislado
   de Blazor compila a selectores de atributo y le gana a las reglas de clase, así que un color
   puesto aquí apagaría el tema EN SILENCIO. */

.editor-riel[b-gbuc2b4bld] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--app-space-unit) * .5);
    padding: calc(var(--app-space-unit) * .75);
    border-right: 1px solid var(--bs-border-color);
    background-color: var(--bs-secondary-bg);
}

.editor-riel-boton[b-gbuc2b4bld] {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    border: 0;
    border-radius: var(--bs-border-radius);
    background-color: transparent;
    color: var(--bs-body-color);
}

.editor-riel-boton:hover:not(:disabled)[b-gbuc2b4bld] {
    background-color: var(--bs-body-bg);
}

.editor-riel-boton.is-activo[b-gbuc2b4bld] {
    background-color: var(--bs-primary);
    color: var(--app-on-primary);
}

/* Atenuado, no invisible: el mapa completo del producto es parte de lo que el riel comunica. */
.editor-riel-boton:disabled[b-gbuc2b4bld] {
    opacity: .38;
}
/* _content/MenuQreator/Components/Editor/EditorSidebar.razor.rz.scp.css */
/* Sólo maquetación; el color vive en theme.css. Ver el encabezado de ese archivo. */

.editor-sidebar[b-jb9p70lpjp] {
    padding: var(--app-space-unit);
    font-size: .9rem;
}

.editor-sidebar-titulo[b-jb9p70lpjp] {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-secondary-color);
    margin-bottom: var(--app-space-unit);
}

.editor-sidebar-vacio[b-jb9p70lpjp] {
    color: var(--bs-secondary-color);
    font-size: .85rem;
}

.editor-seccion[b-jb9p70lpjp] {
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: calc(var(--app-space-unit) * .75);
    margin-bottom: calc(var(--app-space-unit) * .75);
}

.editor-seccion-cabecera[b-jb9p70lpjp] {
    display: flex;
    align-items: center;
    gap: calc(var(--app-space-unit) * .5);
    cursor: pointer;
    padding: calc(var(--app-space-unit) * .5) 0;
}

.editor-seccion-nombre[b-jb9p70lpjp] {
    font-weight: 600;
    flex: 1;
    text-align: left;
    border: 0;
    padding: 0;
    background-color: transparent;
    color: var(--bs-body-color);
}

.editor-seccion-contador[b-jb9p70lpjp] {
    font-size: .75rem;
    padding: .05rem .4rem;
    border-radius: 1rem;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

.editor-seccion-acciones[b-jb9p70lpjp],
.editor-platillo-acciones[b-jb9p70lpjp] {
    display: flex;
    gap: .15rem;
}

.editor-seccion-acciones[b-jb9p70lpjp] {
    padding: calc(var(--app-space-unit) * .25) 0 calc(var(--app-space-unit) * .5);
}

.editor-seccion-renombrar-acciones[b-jb9p70lpjp] {
    display: flex;
    gap: .25rem;
    margin-top: .35rem;
}

.editor-platillos[b-jb9p70lpjp] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.editor-platillo[b-jb9p70lpjp] {
    display: flex;
    align-items: center;
    gap: calc(var(--app-space-unit) * .5);
    border-radius: var(--bs-border-radius);
    padding: .15rem;
}

.editor-platillo.is-seleccionado[b-jb9p70lpjp] {
    background-color: var(--bs-secondary-bg);
    outline: 2px solid var(--app-accent);
}

.editor-platillo-boton[b-jb9p70lpjp] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: calc(var(--app-space-unit) * .5);
    text-align: left;
    border: 0;
    background-color: transparent;
    color: var(--bs-body-color);
    padding: .25rem;
    min-width: 0;
}

.editor-platillo-nombre[b-jb9p70lpjp] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editor-platillo-foto[b-jb9p70lpjp],
.editor-platillo-sinfoto[b-jb9p70lpjp] {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: var(--bs-border-radius);
    object-fit: cover;
}

.editor-platillo-sinfoto[b-jb9p70lpjp] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

.editor-platillo-agotado[b-jb9p70lpjp] {
    flex-shrink: 0;
}

.editor-platillo-nuevo[b-jb9p70lpjp],
.editor-seccion-nueva[b-jb9p70lpjp] {
    display: flex;
    gap: .25rem;
    margin-top: calc(var(--app-space-unit) * .75);
}

.editor-platillo-precio[b-jb9p70lpjp] {
    max-width: 5.5rem;
}
/* _content/MenuQreator/Components/Editor/QrPanel.razor.rz.scp.css */
/* El lienzo del código. El fondo es el del propio QR, que puede no ser blanco, así que la tarjeta
   pone un tablero neutro debajo para que un fondo claro sobre una tarjeta clara siga teniendo
   borde visible. */
.qr-lienzo[b-k7zjvs3pxw] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--app-space-unit) * 2);
    background-color: var(--bs-secondary-bg);
    border-radius: var(--bs-border-radius);
}

/* Ancho máximo y no ancho fijo: la tarjeta ocupa media fila en escritorio y la fila entera en
   celular, y un QR estirado más allá de su tamaño real sólo gasta píxeles. */
.qr-imagen[b-k7zjvs3pxw] {
    width: 100%;
    max-width: 15rem;
    height: auto;

    /* El navegador suaviza al escalar y un QR suavizado pierde el borde entre módulos. Esto es lo
       que hace que la vista previa se vea como lo que se va a imprimir. */
    image-rendering: pixelated;
}

/* El selector de color nativo es diminuto por omisión y aquí es un control principal. */
.qr-panel .form-control-color[b-k7zjvs3pxw] {
    height: calc(var(--app-space-unit) * 6);
}
/* _content/MenuQreator/Components/Layout/AdminLayout.razor.rz.scp.css */
.top-row.app-topbar[b-2dyb15ee22] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--app-space-unit) * 2);
}

.panel-logout[b-2dyb15ee22] {
    margin: 0;
}

.panel-logout-button[b-2dyb15ee22] {
    text-decoration: none;
    padding: 0;
}
/* _content/MenuQreator/Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-shell[b-oqhz1t2e4j] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--app-space-unit) * 4) calc(var(--app-space-unit) * 2);
}

.auth-panel[b-oqhz1t2e4j] {
    width: 100%;
    max-width: 26rem;
}

.auth-brand[b-oqhz1t2e4j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--app-space-unit) * 1.5);
    font-family: var(--app-font-heading);
    font-size: 1.5rem;
    text-decoration: none;
    margin-bottom: calc(var(--app-space-unit) * 3);
}
/* _content/MenuQreator/Components/Layout/EditorLayout.razor.rz.scp.css */
/* Sólo maquetación; el color vive en theme.css. Ver el encabezado de ese archivo. */

.editor-shell[b-zml2avatsx] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* _content/MenuQreator/Components/Layout/LandingLayout.razor.rz.scp.css */
/* El ancho comun de la landing y de /precios.

   Vive en el layout y no en cada pagina porque las dos lo usan: estaba solo en Home.razor.css y
   /precios lo referenciaba sin tenerlo, asi que sus tarjetas se servian sin contenedor y a todo lo
   ancho de la pantalla. Ninguna prueba lo ve — el CSS no se prueba — y se descubrio al ponerle el
   layout a la pagina.

   ::deep porque quien lleva la clase es el contenido, no este componente. */
[b-nynlhsdbo7] .publico-ancho {
    width: 100%;
    max-width: 68rem;
    margin-inline: auto;
    padding-inline: calc(var(--app-space-unit) * 3);
}

@media (max-width: 767.98px) {
    [b-nynlhsdbo7] .publico-ancho {
        padding-inline: calc(var(--app-space-unit) * 2);
    }
}
/* _content/MenuQreator/Components/Layout/MainLayout.razor.rz.scp.css */
/* Solo maquetación: la estructura compartida del cromo (sidebar + topbar) — .page, .sidebar,
   main, .top-row, .navbar-toggler, .nav-item, #blazor-error-ui, el breakpoint de 641px — se
   movió a wwwroot/app.css. PanelLayout y AdminLayout repiten el mismo markup de sidebar/topbar a
   mano (no reusan <NavMenu/> ni heredan de MainLayout), y el aislamiento de CSS de Blazor compila
   este archivo a un selector con atributo de alcance que solo aplica a lo que MainLayout.razor
   renderiza — dejar esa maquetación aquí habría dejado a los otros dos layouts sin ella (el bug
   real detectado en la Tarea 8). Lo único que queda es lo que de verdad es exclusivo de este
   archivo. */

@media (min-width: 641px) {
    /* Nota: sin markup que use la clase "auth" en ningún top-row de este proyecto hoy (AuthLayout
       es un shell centrado sin sidebar/topbar). Regla heredada del scaffold; se deja tal cual por
       no ser parte de lo que esta tarea pidió tocar. */
    .top-row.auth[b-2fcktuam58]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }
}
/* _content/MenuQreator/Components/Layout/PanelLayout.razor.rz.scp.css */
.top-row.app-topbar[b-xkjuoc2nsi] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--app-space-unit) * 2);
}

.panel-logout[b-xkjuoc2nsi] {
    margin: 0;
}

.panel-logout-button[b-xkjuoc2nsi] {
    text-decoration: none;
    padding: 0;
}
/* _content/MenuQreator/Components/Pages/Home.razor.rz.scp.css */
/* El ancho comun de las secciones vive en LandingLayout.razor.css: lo comparten esta pagina y
   /precios, y tenerlo solo aqui dejaba a la de precios sin contenedor. */

.landing-nav[b-eine171pau] {
    padding: calc(var(--app-space-unit) * 2) 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.landing-nav-cuerpo[b-eine171pau] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--app-space-unit) * 2);
}

.landing-marca[b-eine171pau] {
    font-family: var(--app-font-heading);
    font-size: 1.25rem;
}

.landing-nav-enlaces[b-eine171pau] {
    display: flex;
    align-items: center;
    gap: calc(var(--app-space-unit) * 2.5);
}

.landing-nav-enlaces a:not(.btn)[b-eine171pau] {
    text-decoration: none;
    color: var(--bs-secondary-color);
}

.landing-hero[b-eine171pau] {
    padding: calc(var(--app-space-unit) * 8) 0;
}

.landing-hero-cuerpo[b-eine171pau] {
    display: flex;
    align-items: center;
    gap: calc(var(--app-space-unit) * 6);
}

.landing-hero-texto[b-eine171pau] {
    flex: 1 1 55%;
}

.landing-hero-muestra[b-eine171pau] {
    flex: 0 0 auto;
}

.landing-titulo[b-eine171pau] {
    margin-bottom: calc(var(--app-space-unit) * 2);
    font-family: var(--app-font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
}

.landing-hero-acciones[b-eine171pau] {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--app-space-unit) * 1.5);
    margin: calc(var(--app-space-unit) * 3) 0 calc(var(--app-space-unit));
}

.landing-seccion[b-eine171pau] {
    padding: calc(var(--app-space-unit) * 8) 0;
}

.landing-seccion--alterna[b-eine171pau] {
    background-color: var(--bs-secondary-bg);
}

.landing-h2[b-eine171pau] {
    margin-bottom: calc(var(--app-space-unit) * 2);
    font-family: var(--app-font-heading);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.landing-h2--claro[b-eine171pau] {
    margin-bottom: 0;
    color: var(--app-on-primary);
}

/* Los dolores van entrecomillados y en cursiva: son frases de restaurantero, no funcionalidades, y
   la tipografia tiene que decirlo antes de que se lean. */
.landing-dolor[b-eine171pau] {
    display: flex;
    gap: calc(var(--app-space-unit) * 1.5);
    align-items: flex-start;
}

.landing-dolor-icono[b-eine171pau] {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--app-accent);
}

.landing-dolor-texto[b-eine171pau] {
    margin-bottom: 0;
    font-style: italic;
    color: var(--bs-secondary-color);
}

.landing-zigzag[b-eine171pau] {
    display: flex;
    align-items: center;
    gap: calc(var(--app-space-unit) * 5);
    margin-top: calc(var(--app-space-unit) * 3);
}

.landing-zigzag-texto[b-eine171pau] {
    flex: 1 1 38%;
}

.landing-zigzag-muestra[b-eine171pau] {
    flex: 1 1 62%;
    min-width: 0;
}

.landing-paso-numero[b-eine171pau] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: calc(var(--app-space-unit));
    font-family: var(--app-font-heading);
    background-color: var(--bs-primary);
    color: var(--app-on-primary);
    border-radius: 50%;
}

.landing-cta[b-eine171pau] {
    padding: calc(var(--app-space-unit) * 8) 0;
    background-color: var(--bs-primary);
}

.landing-footer[b-eine171pau] {
    padding: calc(var(--app-space-unit) * 4) 0;
    border-top: 1px solid var(--bs-border-color);
}

.landing-footer-cuerpo[b-eine171pau] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--app-space-unit) * 2);
    font-size: .9rem;
}

/* En celular todo se apila. El hero pone la muestra DEBAJO del texto y no encima: lo primero que
   tiene que leerse es la promesa, no la maqueta. */
@media (max-width: 767.98px) {
    .landing-hero[b-eine171pau],
    .landing-seccion[b-eine171pau],
    .landing-cta[b-eine171pau] {
        padding: calc(var(--app-space-unit) * 5) 0;
    }

    .landing-hero-cuerpo[b-eine171pau],
    .landing-zigzag[b-eine171pau] {
        flex-direction: column;
        gap: calc(var(--app-space-unit) * 4);
    }

    .landing-nav-enlaces[b-eine171pau] {
        gap: calc(var(--app-space-unit) * 1.5);
    }
}
/* _content/MenuQreator/Components/Pages/Panel/Analiticas.razor.rz.scp.css */
/* La cifra del periodo. Es un titular, no un dato de tabla: se lee de lejos y no compite con las
   graficas de al lado. */
.analiticas-cifra[b-ac0itl02w9] {
    margin-bottom: calc(var(--app-space-unit));
    font-family: var(--app-font-heading);
    font-size: 2.75rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
/* _content/MenuQreator/Components/Pages/Panel/Bienvenida.razor.rz.scp.css */
.wizard-qr[b-j6ptlryb12] {
    width: 12rem;
    height: 12rem;
    max-width: 100%;
}
/* _content/MenuQreator/Components/Pages/Panel/Cuenta.razor.rz.scp.css */
.cuenta-cuotas[b-3qi5tlf4kv] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--app-space-unit) * 2.5);
}

/* Medidor contra un tope, no grafica de comparacion: por eso no reusa BarrasHorizontales, que escala
   contra el mayor de la serie y con una sola barra siempre daria 100 %. */
.cuenta-barra[b-3qi5tlf4kv] {
    width: 100%;
    height: .5rem;
    margin: calc(var(--app-space-unit) * .5) 0;
    overflow: hidden;
    background-color: var(--bs-secondary-bg);
    border-radius: 4px;
}

.cuenta-barra-fill[b-3qi5tlf4kv] {
    height: 100%;
    background-color: var(--bs-primary);
    border-radius: 4px;
}
/* _content/MenuQreator/Components/Pages/Panel/Index.razor.rz.scp.css */
/* Misma cifra que en /panel/analiticas, un punto mas chica: aqui convive con tres tarjetas y no es
   el titular de la pantalla. */
.panel-cifra[b-8cwujb36kj] {
    margin-bottom: calc(var(--app-space-unit));
    font-family: var(--app-font-heading);
    font-size: 2.25rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
/* _content/MenuQreator/Components/Pages/Panel/MenuEditar.razor.rz.scp.css */
/* Sólo maquetación; el color vive en theme.css. Ver el encabezado de ese archivo. */

.editor-barra[b-8z64eet8zo] {
    display: flex;
    align-items: center;
    gap: var(--app-space-unit);
    padding: calc(var(--app-space-unit) * .75) var(--app-space-unit);
    border-bottom: 1px solid var(--bs-border-color);
    background-color: var(--bs-card-bg);
    flex-shrink: 0;
}

.editor-barra-volver[b-8z64eet8zo] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    text-decoration: none;
    font-size: .9rem;
    color: var(--bs-body-color);
}

.editor-barra-titulo[b-8z64eet8zo] {
    font-family: var(--app-font-heading);
    font-size: 1.05rem;
    margin-right: auto;
    padding: .2rem var(--app-space-unit);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 0;
    border-radius: var(--bs-border-radius);
    background-color: transparent;
    color: var(--bs-body-color);
}

.editor-barra-titulo:hover[b-8z64eet8zo] {
    background-color: var(--bs-secondary-bg);
}

.editor-textos[b-8z64eet8zo] {
    padding: var(--app-space-unit);
    border-bottom: 1px solid var(--bs-border-color);
    background-color: var(--bs-secondary-bg);
    flex-shrink: 0;
}

.editor-barra-viewport[b-8z64eet8zo] {
    display: flex;
    gap: .15rem;
    padding: .15rem;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-secondary-bg);
}

.editor-barra-boton[b-8z64eet8zo] {
    width: 2.1rem;
    height: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--bs-border-radius);
    background-color: transparent;
    color: var(--bs-body-color);
}

.editor-barra-boton.is-activo[b-8z64eet8zo] {
    background-color: var(--bs-card-bg);
    box-shadow: var(--app-card-shadow);
}

.editor-barra-acciones[b-8z64eet8zo] {
    display: flex;
    gap: calc(var(--app-space-unit) * .75);
}

.editor-mensaje[b-8z64eet8zo] {
    margin: calc(var(--app-space-unit) * .75);
    margin-bottom: 0;
    flex-shrink: 0;
}

/* Riel · sidebar · canvas · inspector. El canvas es el único que crece. */
.editor-rejilla[b-8z64eet8zo] {
    flex: 1;
    display: grid;
    grid-template-columns: auto 18rem 1fr 22rem;
    min-height: 0;
}

.editor-columna[b-8z64eet8zo] {
    overflow-y: auto;
    background-color: var(--bs-card-bg);
}

.editor-columna--sidebar[b-8z64eet8zo] {
    border-right: 1px solid var(--bs-border-color);
}

.editor-columna--inspector[b-8z64eet8zo] {
    border-left: 1px solid var(--bs-border-color);
}

.editor-aviso[b-8z64eet8zo] {
    padding: calc(var(--app-space-unit) * 4);
    max-width: 32rem;
    margin: 0 auto;
}

.editor-angosto[b-8z64eet8zo] {
    display: none;
    padding: calc(var(--app-space-unit) * 4);
    text-align: center;
}

/* Bajo 900px el editor no cabe: cuatro columnas de 6rem no son un editor, son un rompecabezas.
   Decirlo es más honesto que dejar que la persona pelee con él. */
@media (max-width: 899.98px) {
    .editor-rejilla[b-8z64eet8zo] {
        display: none;
    }

    .editor-angosto[b-8z64eet8zo] {
        display: block;
    }
}
/* _content/MenuQreator/Components/Pages/Panel/QrImprimir.razor.rz.scp.css */
/* La barra de ayuda existe en pantalla y desaparece en papel: impresa seria una instruccion sobre
   como imprimir, ya impresa. */
.print-barra[b-q9e6231xap] {
    display: flex;
    align-items: center;
    gap: calc(var(--app-space-unit) * 2);
    padding: calc(var(--app-space-unit) * 2);
    background-color: var(--bs-secondary-bg);
}

.print-hoja[b-q9e6231xap] {
    display: flex;
    justify-content: center;
    padding: calc(var(--app-space-unit) * 6);
}

.print-tarjeta[b-q9e6231xap] {
    width: 100%;
    max-width: 21rem;
    padding: calc(var(--app-space-unit) * 4);
    text-align: center;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.print-invitacion[b-q9e6231xap] {
    margin-bottom: calc(var(--app-space-unit));
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.print-nombre[b-q9e6231xap] {
    margin-bottom: calc(var(--app-space-unit));
    font-family: var(--app-font-heading);
    font-size: 1.6rem;
}

.print-menu[b-q9e6231xap] {
    margin-bottom: calc(var(--app-space-unit) * 2);
    color: var(--bs-secondary-color);
}

.print-qr[b-q9e6231xap] {
    width: 100%;
    max-width: 15rem;
    height: auto;

    /* Un QR suavizado al escalar pierde el borde entre modulos, que es justo lo que la camara lee. */
    image-rendering: pixelated;
}

/* Monoespaciada y con las letras separadas: esta linea existe para teclearse a mano cuando la
   camara falla, y en una tipografia de texto un codigo dictado por telefono se transcribe mal. */
.print-direccion[b-q9e6231xap] {
    margin: calc(var(--app-space-unit) * 2) 0 0;
    font-family: var(--bs-font-monospace);
    font-size: .9rem;
    letter-spacing: .02em;
    word-break: break-all;
}

/* Margen fijo de la hoja. Sin el, cada navegador aplica el suyo: cuatro tarjetas impresas desde
   equipos distintos salen con el codigo a distinta altura, y quien las corta a ojo lo nota. 1cm es
   lo que casi toda impresora domestica puede imprimir sin recortar. */
@page {
    margin: 1cm;
}

@media print {
    /* La barra de ayuda no se imprime: en papel seria una instruccion sobre como imprimir, ya
       impresa. */
    .print-barra[b-q9e6231xap] {
        display: none;
    }

    .print-hoja[b-q9e6231xap] {
        padding: 0;
    }

    /* La linea de corte SI se imprime, y por eso pasa de punteada a un pelo continuo: el punteado
       de pantalla es una decoracion que en papel se lee como parte del diseno de la tarjeta,
       mientras que un pelo de un cuarto de punto es lo que un taller espera como guia de corte y lo
       que desaparece al cortar encima. Sin ninguna linea, cuatro tarjetas cortadas a ojo salen
       desiguales; con el borde punteado original, la tarjeta terminada conserva un marco que nadie
       pidio. */
    .print-tarjeta[b-q9e6231xap] {
        max-width: none;
        border: .25pt solid var(--bs-border-color);
        border-radius: 0;
    }

    /* Tamano real y no escalado a la pagina: un QR impreso mas chico de lo que el modulo necesita
       deja de leerse a la distancia a la que alguien lo va a escanear, sentado en la mesa. */
    .print-qr[b-q9e6231xap] {
        width: 5.5cm;
        max-width: none;
    }
}
/* _content/MenuQreator/Components/Shared/BarrasHorizontales.razor.rz.scp.css */
.barras-h[b-m0z7sno9oh] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--app-space-unit));
}

/* Rejilla de tres columnas y no flex: asi las barras de todas las filas empiezan y terminan en la
   misma vertical aunque los nombres midan distinto, que es lo que permite compararlas de un vistazo.
   El nombre tiene un maximo para que uno muy largo no se coma la pista. */
.barra-fila[b-m0z7sno9oh] {
    display: grid;
    align-items: center;
    gap: calc(var(--app-space-unit) * 1.5);
    grid-template-columns: minmax(0, 11rem) 1fr auto;
}

/* Recortado con puntos suspensivos y no partido en dos renglones: una lista de diez donde algunas
   filas miden el doble se lee como si tuvieran mas importancia. El nombre completo sigue disponible
   en el globo del navegador. */
.barra-nombre[b-m0z7sno9oh] {
    overflow: hidden;
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barra-pista-h[b-m0z7sno9oh] {
    display: block;
    width: 100%;
    height: .75rem;
    background-color: var(--bs-secondary-bg);
    border-radius: 4px;
}

.barra-fill-h[b-m0z7sno9oh] {
    display: block;
    height: 100%;
    background-color: var(--bs-primary);

    /* Redondeado solo en el extremo del dato: el origen esta anclado al eje. */
    border-radius: 0 4px 4px 0;
}

.barra-valor[b-m0z7sno9oh] {
    font-size: .85rem;
    font-variant-numeric: tabular-nums;   /* para que las cifras se alineen entre filas */
    color: var(--bs-secondary-color);
}

@media (max-width: 575.98px) {
    .barra-fila[b-m0z7sno9oh] {
        grid-template-columns: minmax(0, 7rem) 1fr auto;
    }
}
/* _content/MenuQreator/Components/Shared/BarrasVerticales.razor.rz.scp.css */
/* Columnas de altura proporcional. Toda la aritmetica esta en el componente; aqui solo hay caja. */
.barras-v[b-12255gyllp] {
    display: flex;
    align-items: flex-end;
    gap: 2px;                       /* la separacion de 2px entre marcas, no un hueco decorativo */
    width: 100%;
    height: 12rem;
}

.barra-col[b-12255gyllp] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    min-width: 0;                   /* sin esto, 30 columnas desbordan el contenedor en vez de encogerse */
    height: 100%;
}

/* La pista ocupa el alto menos el renglon de la etiqueta, y es la referencia del porcentaje: sin un
   contenedor de altura conocida, un `height: 40%` no tiene contra que medirse. */
.barra-pista[b-12255gyllp] {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: calc(100% - 1.25rem);
}

.barra-fill[b-12255gyllp] {
    width: 100%;
    background-color: var(--bs-primary);

    /* Redondeado solo arriba: la barra esta anclada a la linea base y un extremo inferior redondo la
       despegaria de ella. */
    border-radius: 4px 4px 0 0;
}

.barra-etiqueta[b-12255gyllp] {
    overflow: hidden;
    height: 1.25rem;
    font-size: .7rem;
    line-height: 1.25rem;
    white-space: nowrap;
    color: var(--bs-secondary-color);
}
/* _content/MenuQreator/Components/Shared/MuestraEditor.razor.rz.scp.css */
.muestra-editor[b-cbmy2nn8lc] {
    overflow: hidden;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--app-card-shadow);
}

.muestra-editor-barra[b-cbmy2nn8lc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--app-space-unit)) calc(var(--app-space-unit) * 2);
    background-color: var(--bs-secondary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.muestra-editor-titulo[b-cbmy2nn8lc] {
    font-family: var(--app-font-heading);
    font-size: .9rem;
}

.muestra-editor-boton[b-cbmy2nn8lc] {
    padding: calc(var(--app-space-unit) * .25) calc(var(--app-space-unit) * 1.5);
    font-size: .7rem;
    background-color: var(--bs-primary);
    color: var(--app-on-primary);
    border-radius: var(--bs-border-radius);
}

.muestra-editor-cuerpo[b-cbmy2nn8lc] {
    display: flex;
    align-items: stretch;
    min-height: 15rem;
}

.muestra-editor-riel[b-cbmy2nn8lc] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--app-space-unit));
    padding: calc(var(--app-space-unit) * 1.5) calc(var(--app-space-unit) * .75);
    background-color: var(--app-sidebar-bg);
    color: var(--app-sidebar-fg);
}

.muestra-editor-icono[b-cbmy2nn8lc] {
    font-size: .8rem;
    line-height: 1;
    opacity: .55;
}

.muestra-editor-icono.is-activo[b-cbmy2nn8lc] {
    opacity: 1;
}

.muestra-editor-sidebar[b-cbmy2nn8lc] {
    flex: 0 0 8.5rem;
    padding: calc(var(--app-space-unit) * 1.5);
    background-color: var(--bs-secondary-bg);
    border-right: 1px solid var(--bs-border-color);
}

.muestra-editor-grupo[b-cbmy2nn8lc] {
    margin: calc(var(--app-space-unit) * 1.5) 0 calc(var(--app-space-unit) * .5);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.muestra-editor-grupo:first-child[b-cbmy2nn8lc] {
    margin-top: 0;
}

.muestra-editor-fila[b-cbmy2nn8lc] {
    overflow: hidden;
    margin-bottom: calc(var(--app-space-unit) * .25);
    padding: calc(var(--app-space-unit) * .25) calc(var(--app-space-unit) * .5);
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: var(--bs-border-radius-sm);
}

.muestra-editor-fila.is-seleccionada[b-cbmy2nn8lc] {
    background-color: var(--bs-primary);
    color: var(--app-on-primary);
}

.muestra-editor-canvas[b-cbmy2nn8lc] {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: calc(var(--app-space-unit) * 2);
    background-color: var(--bs-tertiary-bg);
}

/* En celular el riel y el sidebar no aportan nada a la muestra y se comen el canvas, que es lo que
   de verdad hay que ver. Se ocultan en vez de encogerlos: media docena de pixeles de sidebar se lee
   como un fallo de maquetacion, no como un editor. */
@media (max-width: 575.98px) {
    .muestra-editor-riel[b-cbmy2nn8lc],
    .muestra-editor-sidebar[b-cbmy2nn8lc] {
        display: none;
    }
}
/* _content/MenuQreator/Components/Shared/MuestraMenu.razor.rz.scp.css */
/* Marco de celular. Ancho maximo y no fijo: a 320 px de pantalla esto tiene que encoger, no
   desbordar — es la landing que se lee desde un anuncio en el telefono. */
.muestra-celular[b-n6e5xi7zui] {
    width: 100%;
    max-width: 17rem;
    margin-inline: auto;
    padding: calc(var(--app-space-unit) * 1.5);
    background-color: var(--bs-emphasis-color);
    border-radius: 2rem;
    box-shadow: var(--app-card-shadow);
}

.muestra-pantalla[b-n6e5xi7zui] {
    overflow: hidden;
    background-color: var(--bs-body-bg);
    border-radius: 1.5rem;
}

.muestra-portada[b-n6e5xi7zui] {
    padding: calc(var(--app-space-unit) * 3) calc(var(--app-space-unit) * 2);
    text-align: center;
    background-color: var(--bs-primary);
    color: var(--app-on-primary);
}

.muestra-restaurante[b-n6e5xi7zui] {
    margin-bottom: calc(var(--app-space-unit) * .25);
    font-family: var(--app-font-heading);
    font-size: 1.15rem;
    line-height: 1.2;
}

.muestra-menu-nombre[b-n6e5xi7zui] {
    margin-bottom: 0;
    font-size: .75rem;
    opacity: .85;
}

.muestra-seccion[b-n6e5xi7zui] {
    padding: calc(var(--app-space-unit) * 2);
}

.muestra-seccion-nombre[b-n6e5xi7zui] {
    margin-bottom: calc(var(--app-space-unit) * 1.5);
    padding-bottom: calc(var(--app-space-unit) * .5);
    font-family: var(--app-font-heading);
    font-size: .9rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.muestra-platillo[b-n6e5xi7zui] {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--app-space-unit));
    margin-bottom: calc(var(--app-space-unit) * 1.5);
}

.muestra-platillo:last-child[b-n6e5xi7zui] {
    margin-bottom: 0;
}

.muestra-platillo-texto[b-n6e5xi7zui] {
    flex: 1 1 auto;
    min-width: 0;
}

.muestra-platillo-nombre[b-n6e5xi7zui] {
    margin-bottom: 0;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
}

.muestra-platillo-desc[b-n6e5xi7zui] {
    margin-bottom: 0;
    font-size: .68rem;
    line-height: 1.35;
    color: var(--bs-secondary-color);
}

.muestra-precio[b-n6e5xi7zui] {
    flex-shrink: 0;
    margin-bottom: 0;
    font-size: .8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--bs-primary);
}

/* La foto del platillo, sin archivo: un degradado con los colores del tema. Sugiere una foto sin
   pretender ser una, que es justo lo que hace falta aqui. */
.muestra-foto[b-n6e5xi7zui] {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    background-image: linear-gradient(135deg, var(--app-accent), var(--bs-primary));
    border-radius: var(--bs-border-radius);
}
/* _content/MenuQreator/Components/Shared/PanelDeInvitacion.razor.rz.scp.css */
/* Deliberadamente NO es .alert-danger ni .alert-warning: el rojo dice "algo se rompio" y aqui no se
   rompio nada. Fondo de acento suave y borde a la izquierda, que es como se marca una nota y no una
   falla. */
.invitacion[b-rkqgxh8pkv] {
    display: flex;
    gap: calc(var(--app-space-unit) * 2);
    align-items: flex-start;
    padding: calc(var(--app-space-unit) * 2) calc(var(--app-space-unit) * 2.5);
    background-color: var(--bs-secondary-bg);
    border-left: 3px solid var(--app-accent);
    border-radius: var(--bs-border-radius);
}

.invitacion-icono[b-rkqgxh8pkv] {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--app-accent);
}

.invitacion-texto[b-rkqgxh8pkv] {
    min-width: 0;
}
/* _content/MenuQreator/Components/Shared/StepIndicator.razor.rz.scp.css */
.step-indicator[b-db0k90dfdq] {
    display: flex;
    gap: calc(var(--app-space-unit) * 3);
    list-style: none;
    padding: 0;
    margin: 0 0 calc(var(--app-space-unit) * 4) 0;
    flex-wrap: wrap;
}

.step-indicator-item[b-db0k90dfdq] {
    display: flex;
    align-items: center;
    gap: calc(var(--app-space-unit) * 1.5);
    font-size: .9rem;
}

.step-indicator-badge[b-db0k90dfdq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-weight: 600;
    flex-shrink: 0;
}
/* _content/MenuQreator/Components/Shared/TarjetaDePlan.razor.rz.scp.css */
.plan[b-tidr2rq18w] {
    border: 1px solid var(--bs-border-color);
}

/* El plan destacado se marca con el color de marca y un poco de elevacion, no con tamano: una
   tarjeta mas grande rompe la rejilla en celular, que es donde mas gente la va a leer. */
.plan--destacado[b-tidr2rq18w] {
    border-color: var(--bs-primary);
    box-shadow: var(--app-card-shadow);
}

.plan-precio[b-tidr2rq18w] {
    font-family: var(--app-font-heading);
    font-size: 2.5rem;
    line-height: 1.1;
}

.plan-periodo[b-tidr2rq18w] {
    font-family: var(--bs-body-font-family);
    font-size: 1rem;
    color: var(--bs-secondary-color);
}

.plan-lista li[b-tidr2rq18w] {
    padding: calc(var(--app-space-unit) * .5) 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.plan-lista li:last-child[b-tidr2rq18w] {
    border-bottom: none;
}