@import '_content/RISuiteSharedUI/RISuiteSharedUI.jb7gikhwnn.bundle.scp.css';

/* _content/DigitalMenu/Components/Pages/Admin.razor.rz.scp.css */
/* Barra de búsqueda.

   No reutiliza .liga-caja: esa es la caja del QR en /publicar y es una píldora
   (border-radius: 99px). La maqueta de admin la quiere cuadrada con las
   esquinas suaves, y como .liga-caja la comparten otras pantallas, tocarle el
   radio ahí escuadraría también el QR. Por eso una clase propia.

   Copia lo que sí servía de .liga-caja —campo sin borde, botón dentro— y solo
   cambia la forma. */

.admin-busqueda[b-mgw7e1gxx1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 0.3rem 0.3rem 0.3rem 0.9rem;
    background: var(--humo);
}

.admin-busqueda__lupa[b-mgw7e1gxx1] {
    color: var(--tinta-45);
    font-size: 1rem;
    line-height: 1;
}

.admin-busqueda input[b-mgw7e1gxx1] {
    border: 0;
    flex: 1;
    min-width: 0;
    font-family: var(--dato);
    font-size: var(--t-sm);
    background: transparent;
    color: var(--hueso);
}

    .admin-busqueda input:focus[b-mgw7e1gxx1] {
        outline: none;
    }


/* Conteos del lado derecho de la fila de pestañas: son el tamaño de la
   plataforma, no un control. Se pintan apagados a propósito para que no
   compitan con las pestañas, que sí se pulsan. */

.admin-conteos[b-mgw7e1gxx1] {
    display: flex;
    gap: 1.1rem;
    flex-wrap: wrap;
    font-family: var(--dato);
    font-size: var(--t-sm);
    color: var(--tinta-45);
}


/* ------------------------------------------------------------
   Lista de resultados

   Filas apiladas dentro de un solo panel, con una línea entre ellas. La de
   negocio es un enlace (se entra a su panel); la de usuario no, por ahora.
   ------------------------------------------------------------ */

.admin-lista[b-mgw7e1gxx1] {
    overflow: hidden;
}

.admin-lista--modal[b-mgw7e1gxx1] {
    max-height: min(60vh, 300px);
    overflow-y: auto;
}

.admin-fila[b-mgw7e1gxx1] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--linea);
    text-decoration: none;
    color: inherit;
}

    /* La primera no lleva línea arriba: el borde del panel ya la separa. */
    .admin-fila:first-child[b-mgw7e1gxx1] {
        border-top: 0;
    }

.admin-fila__icono[b-mgw7e1gxx1] {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--cobalto-10, rgba(27, 63, 203, 0.08));
    color: var(--cobalto, #1B3FCB);
}

.admin-fila__cuerpo[b-mgw7e1gxx1] {
    flex: 1 1 auto;
}

.admin-fila__sub[b-mgw7e1gxx1] {
    color: var(--tinta-45);
}

/* El nombre del dueño / el conteo, a la derecha. Se empuja con el margen y no
   deja que se parta en dos renglones. */
.admin-fila__lado[b-mgw7e1gxx1] {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
    font-family: var(--dato);
    font-size: var(--t-sm);
    color: var(--tinta);
}


/* ------------------------------------------------------------
   Selector de tope y paginación
   ------------------------------------------------------------ */

.admin-tope[b-mgw7e1gxx1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

    .admin-tope select[b-mgw7e1gxx1] {
        width: auto;
    }

.admin-pager[b-mgw7e1gxx1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.9rem;
    color: var(--tinta-45);
}

.admin-pager__solo[b-mgw7e1gxx1] {
    margin-top: 0.9rem;
    color: var(--tinta-45);
}

.admin-pager__nums[b-mgw7e1gxx1] {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

/* Modal de negocios del usuario */
.velo-modal[b-mgw7e1gxx1] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(23, 19, 16, .5);
    overflow-y: auto;
}

.ventana-modal[b-mgw7e1gxx1] {
    width: 100%;
    max-width: 540px;
    box-shadow: var(--sombra-alta);
}
/* _content/DigitalMenu/Components/Pages/AdminNegocio.razor.rz.scp.css */

/* Fila de botones de "Menú y licencia": se envuelven en pantallas angostas. */
.acciones-menu[b-ffpi0t5jqc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.tarjeta__cabeza[b-ffpi0t5jqc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-bottom: 0.85rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--linea);
}

.tarjeta__marca[b-ffpi0t5jqc] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.tarjeta__icono[b-ffpi0t5jqc] {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: var(--radio-sm);
    background: var(--humo);
    border: 1px solid var(--linea);
    color: var(--ambar-hondo);
    font-size: 0.9375rem;
    line-height: 1;
}

/* ---------- Nombre e identificador ---------- */

.tarjeta__nombre[b-ffpi0t5jqc] {
    font-size: var(--t-xl);
    margin: 0 0 0.15rem;
    overflow-wrap: anywhere;
}

.tarjeta__nombre--chico[b-ffpi0t5jqc] {
    font-size: 1.25rem;
}

.tarjeta__id[b-ffpi0t5jqc] {
    font-family: var(--dato);
    font-size: var(--t-xs);
    letter-spacing: 0.1em;
    color: var(--hueso-45);
    margin: 0 0 1.1rem;
    overflow-wrap: anywhere;
}

/* ---------- Lista de datos ---------- */

.datos[b-ffpi0t5jqc] {
    display: grid;
    grid-template-columns: minmax(8rem, 34%) 1fr;
    column-gap: 1rem;
    margin: 0;
}

    .datos dt[b-ffpi0t5jqc],
    .datos dd[b-ffpi0t5jqc] {
        padding: 0.6rem 0;
        border-top: 1px solid var(--linea);
        margin: 0;
        min-width: 0;
    }

    .datos dt[b-ffpi0t5jqc] {
        display: flex;
        align-items: baseline;
        gap: 0.4rem;
        font-family: var(--dato);
        font-size: var(--t-xs);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-weight: 400;
        color: var(--hueso-45);
    }

        .datos dt i[b-ffpi0t5jqc] {
            color: var(--hueso-25);
            font-size: 0.8125rem;
        }

    .datos dd[b-ffpi0t5jqc] {
        font-size: var(--t-sm);
        overflow-wrap: anywhere;
    }

        /* Los dos primeros son la primera fila: sin línea arriba. */
        .datos dt:first-of-type[b-ffpi0t5jqc],
        .datos dd:first-of-type[b-ffpi0t5jqc] {
            border-top: 0;
            padding-top: 0;
        }

.datos__nada[b-ffpi0t5jqc] {
    color: var(--hueso-25);
}

/* Contraseña del dueño: el texto y el botón de enseñarla, en una línea */
.contrasena[b-ffpi0t5jqc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.contrasena__texto[b-ffpi0t5jqc] {
    font-family: var(--dato);
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .datos[b-ffpi0t5jqc] {
        grid-template-columns: 1fr;
    }

        .datos dd[b-ffpi0t5jqc] {
            border-top: 0;
            padding-top: 0;
        }

        .datos dt[b-ffpi0t5jqc] {
            padding-bottom: 0.2rem;
        }

        .datos dd:first-of-type[b-ffpi0t5jqc] {
            padding-top: 0;
        }
}

/* ---------- Nota al pie de una tarjeta ---------- */

.nota[b-ffpi0t5jqc] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 1.1rem 0 0;
    padding: 0.65rem 0.8rem;
    border-radius: var(--radio-sm);
    background: var(--humo);
    color: var(--hueso-70);
    font-size: var(--t-sm);
    line-height: 1.45;
}

    .nota i[b-ffpi0t5jqc] {
        color: var(--ambar-hondo);
    }

/* ---------- Estado vacío ---------- */

.vacio[b-ffpi0t5jqc] {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 1.5rem 0;
    text-align: center;
    color: var(--hueso-45);
    font-size: var(--t-sm);
}

    .vacio i[b-ffpi0t5jqc] {
        font-size: 1.5rem;
        color: var(--hueso-25);
    }

/* ---------- Resumen del menú ---------- */

.resumen[b-ffpi0t5jqc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.resumen__celda[b-ffpi0t5jqc] {
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-sm);
    background: var(--humo);
    min-width: 0;
}

.resumen__llave[b-ffpi0t5jqc] {
    font-family: var(--dato);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hueso-45);
    margin: 0 0 0.5rem;
}

.resumen__valor[b-ffpi0t5jqc] {
    font-family: var(--display);
    font-size: 1.5rem;
    line-height: 1.1;
    margin: 0;
    overflow-wrap: anywhere;
}

.resumen__valor--texto[b-ffpi0t5jqc] {
    font-family: var(--texto);
    font-size: var(--t-md);
    line-height: 1.35;
}

/* ---------- Bloque de licencia ---------- */

.licencia[b-ffpi0t5jqc] {
    position: relative;
    padding: 0.9rem 1rem 0.9rem 1.1rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-sm);
    background: var(--carbon);
    overflow: hidden;
}

    /* Barra de color a la izquierda: dice el estado de un vistazo. */
    .licencia[b-ffpi0t5jqc]::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 3px;
        background: var(--hueso-25);
    }

.licencia--vigente[b-ffpi0t5jqc]::before {
    background: var(--jade);
}

.licencia--vencida[b-ffpi0t5jqc]::before {
    background: var(--ambar);
}

.licencia--sin[b-ffpi0t5jqc]::before {
    background: var(--cobre);
}

.licencia--bloqueada[b-ffpi0t5jqc]::before {
    background: var(--hueso-25);
}

.licencia--vigente[b-ffpi0t5jqc] {
    background: rgba(20, 102, 75, 0.04);
}

.licencia--vencida[b-ffpi0t5jqc] {
    background: rgba(169, 118, 26, 0.05);
}

.licencia--sin[b-ffpi0t5jqc],
.licencia--bloqueada[b-ffpi0t5jqc] {
    background: var(--humo);
}

.licencia__texto[b-ffpi0t5jqc] {
    margin: 0.6rem 0 0;
    font-size: var(--t-sm);
    color: var(--hueso-70);
    line-height: 1.5;
}

/* ---------- Modal ---------- */

.modal-licencia[b-ffpi0t5jqc] {
    background: rgba(23, 19, 16, 0.5);
    animation: licencia-velo-b-ffpi0t5jqc 0.18s ease-out;
}

    .modal-licencia .modal-content[b-ffpi0t5jqc] {
        border: 1px solid var(--linea);
        border-radius: var(--radio);
        background: var(--carbon);
        box-shadow: var(--sombra-alta);
        animation: licencia-sube-b-ffpi0t5jqc 0.28s var(--curva);
    }

@keyframes licencia-velo-b-ffpi0t5jqc {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes licencia-sube-b-ffpi0t5jqc {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Campo de fecha ---------- */

.campo__llave[b-ffpi0t5jqc] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--dato);
    font-size: var(--t-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hueso-45);
    margin-bottom: 0.4rem;
}

    .campo__llave i[b-ffpi0t5jqc] {
        color: var(--ambar-hondo);
    }

.campo__fecha[b-ffpi0t5jqc] {
    width: 100%;
    padding: 0.65rem 0.8rem;
    font-family: var(--dato);
    font-size: var(--t-sm);
    letter-spacing: 0.08em;
    color: var(--hueso);
    background: var(--humo);
    border: 1px solid var(--linea-viva);
    border-radius: var(--radio-sm);
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

    .campo__fecha:hover:not(:disabled)[b-ffpi0t5jqc] {
        border-color: var(--hueso-25);
    }

    .campo__fecha:focus[b-ffpi0t5jqc] {
        outline: none;
        background: var(--carbon);
        border-color: var(--brasa);
        box-shadow: 0 0 0 3px rgba(196, 22, 46, 0.12);
    }

    .campo__fecha:disabled[b-ffpi0t5jqc] {
        opacity: 0.55;
        cursor: not-allowed;
    }

    /* El icono nativo del calendario: se apaga un poco y se aviva al pasar. */
    .campo__fecha[b-ffpi0t5jqc]::-webkit-calendar-picker-indicator {
        cursor: pointer;
        opacity: 0.45;
        transition: opacity 0.16s ease;
    }

    .campo__fecha:hover[b-ffpi0t5jqc]::-webkit-calendar-picker-indicator,
    .campo__fecha:focus[b-ffpi0t5jqc]::-webkit-calendar-picker-indicator {
        opacity: 0.9;
    }

.campo__pie[b-ffpi0t5jqc] {
    margin: 0.45rem 0 0;
    font-size: var(--t-xs);
    color: var(--hueso-45);
    line-height: 1.45;
}

/* ---------- Resultado de la acción ---------- */

.resultado[b-ffpi0t5jqc] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 1rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radio-sm);
    border: 1px solid var(--linea);
    font-size: var(--t-sm);
    line-height: 1.45;
    animation: licencia-aparece-b-ffpi0t5jqc 0.2s var(--curva);
}

    .resultado i[b-ffpi0t5jqc] {
        font-size: 1rem;
        line-height: 1.35;
    }

.resultado--bien[b-ffpi0t5jqc] {
    background: rgba(20, 102, 75, 0.06);
    border-color: rgba(20, 102, 75, 0.22);
    color: var(--jade);
}

.resultado--mal[b-ffpi0t5jqc] {
    background: rgba(196, 22, 46, 0.06);
    border-color: rgba(196, 22, 46, 0.22);
    color: var(--brasa-viva);
}

@keyframes licencia-aparece-b-ffpi0t5jqc {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Botones del modal ---------- */

.acciones[b-ffpi0t5jqc] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--linea);
}

@media (max-width: 480px) {
    .acciones[b-ffpi0t5jqc] {
        justify-content: stretch;
    }

        .acciones .btn[b-ffpi0t5jqc] {
            flex: 1 1 auto;
        }
}

/* ---------- Menos movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
    .modal-licencia[b-ffpi0t5jqc],
    .modal-licencia .modal-content[b-ffpi0t5jqc],
    .resultado[b-ffpi0t5jqc] {
        animation: none;
    }

    .campo__fecha[b-ffpi0t5jqc] {
        transition: none;
    }
}

/* _content/DigitalMenu/Components/Pages/Editor.razor.rz.scp.css */
.editor[b-9tiq7rss3s] { grid-template-columns: 340px 1fr; }

@media (max-width: 991.98px) {
    .editor[b-9tiq7rss3s] { grid-template-columns: 1fr; }
}


.seccion-item[b-9tiq7rss3s] {
    font-size: var(--t-md);
    padding: 0.7rem 0.85rem;
    gap: 0.5rem;
}

.seccion-item__conteo[b-9tiq7rss3s] { font-size: 0.75rem; }


/* Mover en bloque los platillos de "Sin categoría": la casilla de todos,
   la sección destino y el botón, en una fila que se parte en celular. */

.mover-bloque[b-9tiq7rss3s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-sm);
    background: var(--humo);
}

.mover-bloque .form-select[b-9tiq7rss3s] {
    flex: 1 1 180px;
    width: auto;
}

.fila-con-casilla[b-9tiq7rss3s] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.fila-con-casilla > .form-check-input[b-9tiq7rss3s] {
    flex: none;
    margin: 0;
}

.fila-con-casilla > .producto-fila[b-9tiq7rss3s] {
    flex: 1 1 auto;
    min-width: 0;
}


/* Control de orden: las dos flechas en una sola caja partida. */

.fila-seccion[b-9tiq7rss3s] { display: flex; align-items: center; gap: 0.35rem; }

.orden[b-9tiq7rss3s] {
    display: inline-flex;
    flex-direction: column;
    width: 26px;
    flex: 0 0 26px;
    border: 1px solid var(--linea-viva);
    border-radius: 6px;
    overflow: hidden;
    background: var(--carbon);
    line-height: 1;
}

.orden button[b-9tiq7rss3s] {
    border: 0;
    background: none;
    color: var(--hueso-45);
    font-size: 0.75rem;
    padding: 0.2rem 0;
    cursor: pointer;
}

.orden button + button[b-9tiq7rss3s] { border-top: 1px solid var(--linea-viva); }

.orden button:hover:not(:disabled)[b-9tiq7rss3s] {
    background: rgba(23, 19, 16, 0.06);
    color: var(--hueso);
}

.orden button:disabled[b-9tiq7rss3s] { opacity: 0.3; cursor: default; }

/* Teléfono: flechas más grandes para atinarles con el dedo. */
@media (max-width: 575.98px) {
    .orden[b-9tiq7rss3s] { width: 36px; flex-basis: 36px; }
    .orden button[b-9tiq7rss3s] { font-size: 0.9rem; padding: 0.5rem 0; }
}


/* En la lista de secciones el control solo aparece en la activa. Se
   oculta con visibility y no con display para que los nombres y los
   conteos queden alineados en todas las filas. */

.fila-seccion .orden[b-9tiq7rss3s] { visibility: hidden; }

.fila-seccion.activa .orden:not(.orden--hueco)[b-9tiq7rss3s] { visibility: visible; }


/* Botón de quitar una opción. Ocupa la tercera columna de
   .variante-fila, que mide 40px. */

.quitar[b-9tiq7rss3s] {
    border: 1px solid var(--linea-viva);
    border-radius: var(--radio-sm);
    background: none;
    color: var(--hueso-45);
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.quitar:hover:not(:disabled)[b-9tiq7rss3s] {
    background: rgba(23, 19, 16, 0.06);
    color: var(--hueso);
}

.quitar:disabled[b-9tiq7rss3s] { opacity: 0.3; cursor: default; }

/* ───── Pago con tarjeta panel ───── */
.pago-con-tarjeta[b-9tiq7rss3s] {
    animation: fadeInUp-b-9tiq7rss3s 0.5s ease-out forwards;
    transition: transform 0.2s ease;
}

    /* Hover pop‑out effect (solo con mouse: en pantalla táctil se queda pegado) */
@media (hover: hover) {
    .pago-con-tarjeta:hover[b-9tiq7rss3s] {
        transform: translateX(4px);
    }
}

/* Fade‑in / slide‑up animation */
@keyframes fadeInUp-b-9tiq7rss3s {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ───── Switch styling ───── */
.form-check-input:checked[b-9tiq7rss3s] {
    background-color: var(--marca-1);
    border-color: var(--marca-1);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.form-check-input[b-9tiq7rss3s] {
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* Light hover effect on switch container */
.form-check.form-switch[b-9tiq7rss3s] {
    transition: background 0.2s ease;
}

    .form-check.form-switch:hover[b-9tiq7rss3s] {
        background: rgba(23, 19, 16, 0.04);
    }

/* ───── Select styling ───── */
.form-select[b-9tiq7rss3s] {
    border: 1px solid var(--linea);
    border-radius: 4px;
    transition: border-color .2s, box-shadow .2s;
    background-color: var(--blanco);
}

    .form-select:focus[b-9tiq7rss3s] {
        border-color: var(--marca-1);
        box-shadow: 0 0 0 2px rgba(var(--marca-1rgb), 0.15);
    }

/* ───── Label styling ───── */
.form-check-label[b-9tiq7rss3s] {
    font-weight: 500;
}
/* _content/DigitalMenu/Components/Pages/Home.razor.rz.scp.css */
/* ============================================================
   Estilos propios de la landing en Blazor.

   Va aparte de revista.css a propósito: ese archivo es del
   diseño original y puede actualizarse. Aquí solo vive lo que
   sustituye al JavaScript.

   Blazor aísla este CSS por componente. Para llegar a los hijos
   se usa ::deep, que aplica el atributo de aislamiento al
   descendiente en lugar de al elemento raíz.
   ============================================================ */


/* ------------------------------------------------------------
   0. Fondo de papel

   revista.css lo aplica con body.revista-portada, pero Blazor no
   pone clases en <body> desde un componente sin JavaScript. Se
   reponen aquí sobre el contenedor de la landing, con el mismo
   resultado visual y sin afectar a las demás pantallas.
   ------------------------------------------------------------ */

.rev[b-vahp60iseg] {
    background: var(--rev-papel);
    color: var(--rev-tinta);
    font-family: var(--texto);
    min-height: 100vh;
}

/* Fibra del papel, apenas perceptible */
.rev[b-vahp60iseg]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        repeating-linear-gradient(0deg, rgba(20, 17, 13, 0.018) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(20, 17, 13, 0.014) 0 1px, transparent 1px 4px);
}


/* ------------------------------------------------------------
   1. Aparecer al hacer scroll  (sustituye a hojear())

   Antes lo hacía IntersectionObserver agregando la clase .dentro.
   animation-timeline: view() lo resuelve sin JavaScript: la
   animación avanza según la posición del elemento en la pantalla.

   Chrome y Edge lo aplican. Safari y Firefox lo ignoran, y ahí
   el bloque simplemente se ve desde el inicio: el contenido nunca
   queda escondido, que es justo lo que hacía el respaldo del JS.
   ------------------------------------------------------------ */

@supports (animation-timeline: view()) {

    [b-vahp60iseg] .surge {
        opacity: 0;
        transform: translateY(18px);
        animation: revSurge-b-vahp60iseg linear both;
        animation-timeline: view();
        animation-range: entry 8% cover 26%;
    }

    @keyframes revSurge-b-vahp60iseg {
        to {
            opacity: 1;
            transform: none;
        }
    }

    /* El folio lateral marca el pliego que se está leyendo.
       Antes lo hacía el segundo IntersectionObserver. */
    [b-vahp60iseg] .rev-folio a i {
        transform: scaleY(0.35);
        transform-origin: center;
        transition: transform .28s ease, opacity .28s ease;
    }
}

/* Si alguien pidió menos movimiento, todo aparece de una vez. */
@media (prefers-reduced-motion: reduce) {

    [b-vahp60iseg] .surge {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    [b-vahp60iseg] .tele-lamina {
        animation: none !important;
    }

    /* Sin movimiento se muestra solo la primera lámina. */
    [b-vahp60iseg] .tele-lamina:not(:first-child) {
        display: none;
    }

    [b-vahp60iseg] .tele-lamina:first-child {
        opacity: 1;
    }
}


/* ------------------------------------------------------------
   2. El pase de la tele  (sustituye al <canvas> de pantalla())

   Antes: un canvas de 1280x720 dibujado cuadro por cuadro con
   requestAnimationFrame, 5 láminas de 5 segundos cada una.

   Ahora: las mismas 5 láminas como HTML real, apiladas una sobre
   otra. Cada una se muestra durante su turno del ciclo mediante
   un retraso de animación distinto.

   Ciclo total: 5 láminas x 5 s = 25 s.
   Cada lámina está visible el 20% del ciclo, con un cruce corto
   al entrar y al salir.
   ------------------------------------------------------------ */

[b-vahp60iseg] .tele-pase {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--rev-tinta, #1A1613);
    border-radius: inherit;
}

[b-vahp60iseg] .tele-lamina {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(.75rem, 2.5cqw, 1.75rem);
    opacity: 0;
    animation: telePase-b-vahp60iseg 25s linear infinite;
    container-type: inline-size;
}

@keyframes telePase-b-vahp60iseg {
     0%   { opacity: 0; transform: scale(1.015); }
     2%   { opacity: 1; transform: scale(1); }
    18%   { opacity: 1; transform: scale(1); }
    20%   { opacity: 0; transform: scale(.995); }
   100%   { opacity: 0; }
}

/* --- Lámina de portada --- */

[b-vahp60iseg] .tele-lamina__portada {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .4rem;
    color: var(--rev-papel, #FBF6EC);
}

[b-vahp60iseg] .tele-lamina__rotulo {
    font-family: var(--dato, "IBM Plex Mono", monospace);
    font-size: clamp(.5rem, 1.6cqw, .75rem);
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .6;
}

[b-vahp60iseg] .tele-lamina__portada h3 {
    font-family: var(--titular, "Instrument Serif", Georgia, serif);
    font-size: clamp(1.4rem, 7cqw, 3.4rem);
    line-height: 1.05;
    margin: 0;
}

[b-vahp60iseg] .tele-lamina__portada p {
    font-size: clamp(.6rem, 2cqw, .95rem);
    opacity: .65;
    margin: 0;
}

/* --- Lámina de sección --- */

[b-vahp60iseg] .tele-lamina__seccion {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(.4rem, 1.4cqw, .9rem);
}

[b-vahp60iseg] .tele-lamina__seccion h3 {
    font-family: var(--titular, "Instrument Serif", Georgia, serif);
    font-size: clamp(.85rem, 3.4cqw, 1.7rem);
    color: var(--rev-papel, #FBF6EC);
    margin: 0;
    flex: 0 0 auto;
}

[b-vahp60iseg] .tele-lamina__reja {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(.3rem, 1.2cqw, .75rem);
    min-height: 0;
}

[b-vahp60iseg] .tele-plato {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-height: 0;
}

[b-vahp60iseg] .tele-plato img {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    object-fit: cover;
    border-radius: .35rem;
    background: rgba(255, 255, 255, .06);
}

[b-vahp60iseg] .tele-plato figcaption {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: .05rem;
    color: var(--rev-papel, #FBF6EC);
    line-height: 1.15;
}

[b-vahp60iseg] .tele-plato figcaption b {
    font-size: clamp(.42rem, 1.5cqw, .8rem);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-vahp60iseg] .tele-plato figcaption i {
    font-family: var(--dato, "IBM Plex Mono", monospace);
    font-style: normal;
    font-size: clamp(.4rem, 1.4cqw, .75rem);
    opacity: .7;
}


/* ------------------------------------------------------------
   3. Desplegable

   El componente ya trae sus estilos de revista.css. Aquí solo se
   asegura que el contenedor pueda recibir foco para que
   @onfocusout dispare al salir con el tabulador.
   ------------------------------------------------------------ */

[b-vahp60iseg] .rev-desplegable {
    outline: none;
}


/* ------------------------------------------------------------
   4. Contraportada de contacto
   ------------------------------------------------------------ */

[b-vahp60iseg] .contraportada__cuerpo h2 em {
    font-style: italic;
    color: #F0C46A;
}

.btn-whatsapp[b-vahp60iseg] {
    background-color: #25D366 !important;
    color: #fff !important;
    border: 0;
    border-radius: 4px;
    padding: 0.75rem 1.6rem;
    font-weight: 600;
}

.btn-whatsapp:hover[b-vahp60iseg] {
    background-color: #1EBE5A !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.btn-whatsapp i[b-vahp60iseg] {
    font-size: 1.05em;
}

.cta-contacto[b-vahp60iseg] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

@media (max-width: 480px) {
    .cta-contacto .btn[b-vahp60iseg] {
        width: 100%;
    }
}
/* _content/DigitalMenu/Components/Pages/Logs.razor.rz.scp.css */
.logs-meta[b-waawk5ry88] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
    align-items: center;
    font-family: var(--dato);
    font-size: var(--t-sm);
    color: var(--tinta-45);
    margin-bottom: 1rem;
}

.logs-chips[b-waawk5ry88] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.logs-chips__conteo[b-waawk5ry88] {
    opacity: 0.65;
}

.logs-busqueda[b-waawk5ry88] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 0.3rem 0.3rem 0.3rem 0.9rem;
    background: var(--humo);
    margin: 0.9rem 0;
}

.logs-busqueda__lupa[b-waawk5ry88] {
    color: var(--tinta-45);
    font-size: 1rem;
    line-height: 1;
}

.logs-busqueda input[b-waawk5ry88] {
    border: 0;
    flex: 1;
    min-width: 0;
    font-family: var(--dato);
    font-size: var(--t-sm);
    background: transparent;
    color: var(--hueso);
}

    .logs-busqueda input:focus[b-waawk5ry88] {
        outline: none;
    }

.logs-lista[b-waawk5ry88] {
    overflow: hidden;
}

.logs-fila[b-waawk5ry88] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--linea);
}

    /* La primera no lleva línea arriba: el borde del panel ya la separa. */
    .logs-fila:first-child[b-waawk5ry88] {
        border-top: 0;
    }

.logs-fila__icono[b-waawk5ry88] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
}

.logs-fila--error .logs-fila__icono[b-waawk5ry88] {
    background: rgba(196, 22, 46, 0.10);
    color: var(--brasa);
}

.logs-fila--warn .logs-fila__icono[b-waawk5ry88] {
    background: rgba(169, 118, 26, 0.12);
    color: var(--ambar);
}

.logs-fila--info .logs-fila__icono[b-waawk5ry88] {
    background: rgba(31, 79, 216, 0.10);
    color: var(--cobalto);
}

.logs-fila__cuerpo[b-waawk5ry88] {
    flex: 1 1 auto;
    min-width: 0;
}

.logs-fila__cabecera[b-waawk5ry88] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-bottom: 0.2rem;
}

.logs-fila__fecha[b-waawk5ry88] {
    font-family: var(--dato);
    font-size: var(--t-xs);
    color: var(--tinta-45);
}

.logs-fila__fuente[b-waawk5ry88] {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logs-fila__msj[b-waawk5ry88] {
    display: block;
    word-break: break-word;
    color: var(--tinta);
}

.logs-fila__llave[b-waawk5ry88] {
    flex: 0 0 auto;
    margin-left: auto;
    cursor: pointer;
    color: var(--tinta-45);
    font-size: 0.9rem;
    line-height: 1;
    /* Es un <button>: sin estilo de navegador y con área tocable de 36px. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border: 0;
    background: none;
}

.logs-meta__ruta[b-waawk5ry88] {
    min-width: 0;
    word-break: break-all;
}

.logs-stack[b-waawk5ry88] {
    padding: 0 1rem 0.85rem calc(1rem + 34px + 0.85rem);
}

.logs-stack pre[b-waawk5ry88] {
    margin: 0;
    padding: 0.7rem 0.9rem;
    background: var(--humo);
    border: 1px solid var(--linea);
    border-radius: var(--radio-sm);
    font-family: var(--dato);
    font-size: var(--t-xs);
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--hueso-70);
    max-height: 22rem;
    overflow: auto;
}

.logs-pie[b-waawk5ry88] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.9rem;
    color: var(--tinta-45);
    font-family: var(--dato);
    font-size: var(--t-sm);
}

/* El Paginador compartido pinta .admin-pager__nums, cuyo estilo vive aislado
   en Admin.razor.css. Aquí se replica solo el acomodo para que no quede plano. */
.admin-pager__nums[b-waawk5ry88] {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.logs-aviso[b-waawk5ry88] {
    padding: 1rem 1.25rem;
    color: var(--tinta-70);
}

.logs-aviso--error[b-waawk5ry88] {
    border-color: rgba(196, 22, 46, 0.35);
}

.logs-aviso__ruta[b-waawk5ry88] {
    font-family: var(--dato);
    font-size: var(--t-xs);
    color: var(--tinta-45);
    word-break: break-all;
}

/* Teléfono: búsqueda a 16px (iOS no hace zoom) y el detalle usa todo el ancho.
   Va al final para ganarle a las reglas base de arriba. */
@media (max-width: 575.98px) {
    .logs-busqueda input[b-waawk5ry88] { font-size: 16px; }
    .logs-stack[b-waawk5ry88] { padding-left: 1rem; }
}
/* _content/DigitalMenu/Components/Pages/Menu.razor.rz.scp.css */
/* ------------------------------------------------------------
   0. Fondo y tema

   ------------------------------------------------------------ */

.menu-raiz[b-8724g0szpp] {
    background: var(--marca-fondo);
    color: var(--marca-texto);
    min-height: 100dvh;
    /* La fuente del diseño: el body de RISuite (cargado al final) la cambiaba
       por una que no se descarga y el menú caía en la del sistema. */
    font-family: var(--texto);
    /* Una palabra que no cabe en el ancho (nombre o sección larga) se parte
       en vez de salirse o quedar cortada. No cambia nada si sí cabe. */
    overflow-wrap: break-word;
}


/* ------------------------------------------------------------
   1. Índice y fichas
   ------------------------------------------------------------ */

[b-8724g0szpp] .indice.abierto,
[b-8724g0szpp] .ficha.abierta {
    overscroll-behavior: contain;
}

    /* Entrada suave, del mismo tipo que tenía el prototipo */
    [b-8724g0szpp] .indice.abierto .indice__panel {
        animation: menuEntraLado-b-8724g0szpp .22s ease-out;
    }

    [b-8724g0szpp] .ficha.abierta .ficha__panel {
        animation: menuEntraAbajo-b-8724g0szpp .24s ease-out;
    }

@keyframes menuEntraLado-b-8724g0szpp {
    from {
        transform: translateX(-16px);
        opacity: 0;
    }
}

@keyframes menuEntraAbajo-b-8724g0szpp {
    from {
        transform: translateY(18px);
        opacity: 0;
    }
}

/* El velo y la ✕ son enlaces sin href: se repone el cursor y se quita
   la decoración que el navegador les da por defecto */
[b-8724g0szpp] .indice__velo,
[b-8724g0szpp] .ficha__velo,
[b-8724g0szpp] .ficha__cerrar,
[b-8724g0szpp] .btn-redondo {
    text-decoration: none;
}

[b-8724g0szpp] .indice__velo,
[b-8724g0szpp] .ficha__velo {
    display: block;
}

/* Un <a> sin href no muestra la manita: se repone en todo lo que se toca */
[b-8724g0szpp] .indice__velo,
[b-8724g0szpp] .ficha__velo,
[b-8724g0szpp] .ficha__cerrar,
[b-8724g0szpp] .btn-redondo,
[b-8724g0szpp] .plato,
[b-8724g0szpp] .renglon,
[b-8724g0szpp] .tarjeton,
[b-8724g0szpp] .poster,
[b-8724g0szpp] .cartel__cta,
[b-8724g0szpp] .indice__fila {
    cursor: pointer;
}


/* ------------------------------------------------------------
   2. Rieles con arrastre  (sustituye a las flechas y a scrollBy)
   ------------------------------------------------------------ */

[b-8724g0szpp] .riel__pista {
    scroll-snap-type: x proximity;
    scroll-padding-left: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    [b-8724g0szpp] .riel__pista::-webkit-scrollbar {
        display: none;
    }

    [b-8724g0szpp] .riel__pista > .poster {
        scroll-snap-align: start;
    }

/* Los posters son enlaces sin href: se igualan al diseño original */
[b-8724g0szpp] .poster {
    text-decoration: none;
    color: inherit;
    display: block;
}

[b-8724g0szpp] .poster--chico {
    max-width: 150px;
}


/* ------------------------------------------------------------
   3. Salto a sección sin que la cabecera lo tape
   ------------------------------------------------------------ */

[b-8724g0szpp] .riel {
    scroll-margin-top: 8rem;
}


/* ------------------------------------------------------------
   4. Menos movimiento si el sistema lo pide
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    [b-8724g0szpp] .indice.abierto .indice__panel,
    [b-8724g0szpp] .ficha.abierta .ficha__panel {
        animation: none;
    }
}

/* ------------------------------------------------------------
   5. Barras superiores con fondo sólido
   ------------------------------------------------------------ */

[b-8724g0szpp] .cine-top {
    background: var(--marca-fondo);
}


/* ------------------------------------------------------------
   6. Las cuatro formas: enlaces en lugar de botones
   ------------------------------------------------------------ */

[b-8724g0szpp] .plato,
[b-8724g0szpp] .renglon,
[b-8724g0szpp] .tarjeton,
[b-8724g0szpp] .indice__fila {
    text-decoration: none;
    color: inherit;
    display: block;
}

[b-8724g0szpp] .renglon {
    display: flex;
}

/* .indice__fila conserva su rejilla de menu.css (nombre | conteo a la derecha).
   Alto de fila ~44px para el dedo. */
[b-8724g0szpp] .indice__fila {
    display: grid;
    padding: 0.7rem 0.5rem;
}

[b-8724g0szpp] .tarjeton {
    scroll-snap-align: center;
}

/* La revista muestra todas las hojas seguidas: se separan entre sí */
[b-8724g0szpp] .revista__hoja + .revista__hoja {
    margin-top: 3rem;
}

[b-8724g0szpp] .revista__hoja,
[b-8724g0szpp] .lista__grupo {
    scroll-margin-top: 8rem;
}

/* La pasarela salta de tarjetón en tarjetón */
[b-8724g0szpp] .pasarela {
    scroll-padding-inline: 1rem;
}

[b-8724g0szpp] .pasarela > .tarjeton {
    scroll-margin-top: 8rem;
}

/* Formas dentro del índice */
[b-8724g0szpp] .indice__formas {
    border-top: 1px solid var(--linea);
    padding-top: .5rem;
}

/* Nombre largo en la revista: se encoge y corta con "…" aunque el diseño
   vuelva mágicamente a traer su menú.css (misma razón que MenuBaraja) */
[b-8724g0szpp] .plato__nombre {
    flex: 0 1 auto;
    min-width: 0;
}


/* ------------------------------------------------------------
   7. Colores del tema en lo que menu.css trae escrito a mano
   La paleta (--hueso, --linea, --carbon…) ya la re-mapea EstiloTema
   en Menu.razor; aquí van solo las reglas con colores fijos.
   ------------------------------------------------------------ */

[b-8724g0szpp] .pastilla.activa {
    color: var(--marca-fondo);
}

@media (hover: hover) {
    [b-8724g0szpp] .renglon:hover,
    [b-8724g0szpp] .indice__fila:hover {
        background: var(--humo);
    }
}

/* Respuesta al tocar: el servidor tarda en contestar y sin esto el comensal
   no sabe si su toque llegó. */
[b-8724g0szpp] .poster:active .poster__lienzo,
[b-8724g0szpp] .renglon:active,
[b-8724g0szpp] .plato:active,
[b-8724g0szpp] .indice__fila:active {
    opacity: 0.7;
}

[b-8724g0szpp] .indice__fila.activa {
    background: var(--niebla);
}

[b-8724g0szpp] .ficha__cerrar,
[b-8724g0szpp] .riel__flecha {
    background: var(--carbon);
}

[b-8724g0szpp] .ficha__foto::after {
    background: linear-gradient(to top, var(--carbon) 2%, var(--carbon-75) 42%, transparent 78%);
}

/* El nombre del tarjetón va sobre el velo negro de la foto. La regla de la
   sección 6 le quita el color al <a> para que no salga azul, y con eso el
   nombre heredaba el texto del tema: oscuro sobre oscuro. */
[b-8724g0szpp] .tarjeton__nombre {
    color: #fff;
}

/* Botón "Cerrar" de la ficha y etiquetas: traían un gris fijo de fondo que
   en un tema oscuro no se distingue. El CTA del cartel tiene su propia regla
   más abajo. */
[b-8724g0szpp] .btn-hueso,
[b-8724g0szpp] .etiqueta {
    background: var(--humo);
    border-color: var(--linea);
}

[b-8724g0szpp] .btn-hueso:hover,
[b-8724g0szpp] .btn-hueso:focus-visible {
    background: var(--niebla);
    color: var(--hueso);
}

/* Iniciales del logotipo: van sobre los dos colores del negocio, así que el
   blanco fijo no se leía con colores claros. */
[b-8724g0szpp] .cine-logo {
    color: var(--sobre-marca, #fff);
}

/* RISuite pinta de índigo los enlaces al pasar el ratón, la selección de
   texto y el contorno de foco. Aquí mandan los colores del negocio. */
[b-8724g0szpp] a.btn-redondo:hover,
[b-8724g0szpp] a.ficha__cerrar:hover {
    color: var(--hueso);
}

[b-8724g0szpp] ::selection {
    background: var(--marca-1);
    color: var(--sobre-marca, #fff);
}

[b-8724g0szpp] :focus-visible {
    outline-color: var(--marca-1);
}

/* Precio de un platillo con una sola presentación: igual que los de
   .precio-fila, pero suelto, sin etiqueta ni línea de fila */
[b-8724g0szpp] .precio-suelto {
    font-family: var(--dato);
    font-weight: 700;
    color: var(--marca-1);
    font-size: 1.375rem;
}

/* Platillo sin foto: en las tarjetas va el logotipo del negocio (o el de
   DigitalMenu). Un logotipo no se recorta como una foto: entra completo,
   con aire alrededor y sobre el color de la tarjeta. */
[b-8724g0szpp] img.sin-foto {
    object-fit: contain;
    object-position: center;
    padding: clamp(0.75rem, 8%, 2rem);
    background: var(--carbon);
}

/* En rieles y baraja el nombre y el precio van abajo, encima de la imagen:
   el logotipo sube para que no le queden encima. */
[b-8724g0szpp] .poster__lienzo img.sin-foto,
[b-8724g0szpp] .tarjeton img.sin-foto {
    object-position: center 30%;
}

/* Ficha de un platillo sin foto: sin imagen ni logotipo, el nombre va sobre
   el color de la tarjeta. El margen derecho le deja su lugar a la ✕. */
[b-8724g0szpp] .ficha__cabeza {
    position: relative;
    min-height: 4.75rem;
    padding: 1.75rem 4.75rem 0 1.75rem;
}

[b-8724g0szpp] .ficha__cabeza .ficha__cerrar {
    background: var(--niebla);
}

/* Precios sobre papel: con el acento, igual que Revista y la ficha */
[b-8724g0szpp] .renglon__precios .precio {
    color: var(--marca-1);
}

/* El CTA del cartel va sobre el velo del fondo: sólido e invertido al tema,
   para que se lea con cualquier combinación que elija el negocio */
[b-8724g0szpp] .cartel__acciones .btn-hueso {
    background: var(--marca-texto);
    color: var(--marca-fondo);
    border-color: transparent;
    font-weight: 600;
}

[b-8724g0szpp] .cartel__acciones .btn-hueso:hover,
[b-8724g0szpp] .cartel__acciones .btn-hueso:focus-visible {
    background: var(--marca-texto);
    color: var(--marca-fondo);
    opacity: .88;
}


/* ------------------------------------------------------------
   8. Cartel en celular: que crezca si el texto no cabe
   Con overflow:hidden el cartel es contenedor de scroll y el
   aspect-ratio 4/5 no crece con su contenido: un título largo se
   cortaba por arriba. clip recorta igual el zoom y las esquinas,
   pero deja que el 4/5 funcione como mínimo. Safari < 16 no entiende
   clip y se queda con hidden, como antes.
   ------------------------------------------------------------ */

@media (max-width: 575.98px) {
    [b-8724g0szpp] .cartel {
        min-height: auto;
        overflow: hidden;
        overflow: clip;
    }
}

/* ------------------------------------------------------------
   9. Revista en celular: nombres en hasta 3 líneas
   Sin perder "Nombre ······ precio": la guía y el precio se
   alinean con la última línea del nombre. Si no cabe en tres,
   termina en "…". En pantallas anchas sigue en una sola línea.
   ------------------------------------------------------------ */

@media (max-width: 575.98px) {
    [b-8724g0szpp] .plato__linea {
        align-items: flex-end;
        align-items: last baseline;
    }

    [b-8724g0szpp] .plato__nombre {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}


/* ------------------------------------------------------------
   10. Espacio del encabezado fijo
   .cine-top mide 71px en celular (botón de 44 + padding) y 76px
   en escritorio; menu.css solo reservaba 60/68 y tapaba el
   borde de arriba del contenido.
   ------------------------------------------------------------ */

.cine[b-8724g0szpp] {
    padding-top: 72px;
}

@media (min-width: 768px) {
    .cine[b-8724g0szpp] {
        padding-top: 76px;
    }
}


/* ------------------------------------------------------------
   11. Pastillas de secciones de la baraja
   Reusa .cine-nav y .pastilla de menu.css; aquí solo se acomoda
   debajo del encabezado fijo, que ya reserva su alto en .cine.
   ------------------------------------------------------------ */

/* El tarjetón se mide por la altura libre (MenuBaraja.razor.css): se le
   descuenta el alto de esta fila de pastillas. */
.baraja-con-nav[b-8724g0szpp] {
    --baraja-extra: 56px;
}

.baraja-nav[b-8724g0szpp] {
    margin-top: 0;
    top: 72px;
}

@media (min-width: 768px) {
    .baraja-nav[b-8724g0szpp] {
        top: 76px;
    }
}

.baraja-nav .pastilla[b-8724g0szpp] {
    cursor: pointer;
    text-decoration: none;
}


/* ------------------------------------------------------------
   12. Teléfono en horizontal: encabezado más bajo
   Con ~360px de alto, los 72px fijos se comían un 20% de la pantalla.
   Va al final para ganarle a las reglas base de .cine y .baraja-nav.
   ------------------------------------------------------------ */

@media (max-height: 500px) and (orientation: landscape) {
    .cine-top[b-8724g0szpp] {
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

    .cine[b-8724g0szpp] {
        padding-top: 56px;
    }

    .baraja-nav[b-8724g0szpp] {
        top: 56px;
    }
}
/* _content/DigitalMenu/Components/Pages/Panel.razor.rz.scp.css */
/* Estilos de la maqueta y de las muestras de color.

   Vivían en Negocio.razor.css. Al mudarse a /panel el markup de la forma, los
   colores y la vista previa, estas reglas se quedaron sin a quién aplicar: el
   CSS con ámbito se compila contra el identificador del componente, así que
   una regla de Negocio.razor.css no alcanza a un elemento que ahora pinta
   Panel.razor. Lo que sigue global —.mini, .mini__cartel, .mini__riel,
   .mini__pastillas, .tema-opcion— está en app.css y no hizo falta moverlo. */

.muestra-color[b-ier7b6v8gs] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 2px solid var(--linea);
    cursor: pointer;
    padding: 0;
}

/* El marco del telefono. En escritorio no se envuelve en nada: la maqueta
       ocupa el ancho del panel, que es justo la diferencia entre las dos vistas. */
.marco-movil[b-ier7b6v8gs] {
    width: min(260px, 100%);
    padding: 10px 8px;
    border-radius: 26px;
    background: var(--carbon, #17130F);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

    .marco-movil .mini[b-ier7b6v8gs] {
        border-radius: 18px;
    }

/* --- Listado --- */
.mini__lista[b-ier7b6v8gs] {
    padding: 0.2rem 0.85rem 0.9rem;
}

/* Platillo sin foto: va el logotipo, completo y sin recortar, como en la carta */
.mini img.sin-foto[b-ier7b6v8gs] {
    object-fit: contain;
    padding: 8%;
}

.mini__lista-fila[b-ier7b6v8gs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid;
}

    .mini__lista-fila img[b-ier7b6v8gs] {
        width: 30px;
        height: 30px;
        border-radius: 6px;
        object-fit: cover;
        flex: none;
    }

    .mini__lista-fila b[b-ier7b6v8gs] {
        font-size: 0.72rem;
        font-weight: 600;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mini__lista-fila i[b-ier7b6v8gs] {
        font-style: normal;
        font-family: var(--dato);
        font-size: 0.72rem;
        font-weight: 600;
    }

/* --- Slider --- */
.mini__baraja[b-ier7b6v8gs] {
    padding: 0.2rem 0.85rem 0.9rem;
}

.mini__poster--grande[b-ier7b6v8gs] {
    display: block;
    width: 100%;
    aspect-ratio: 4/5;
}

.mini__puntos[b-ier7b6v8gs] {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 0.5rem;
}

    .mini__puntos i[b-ier7b6v8gs] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        display: block;
    }

/* --- Tradicional --- */
.mini__revista[b-ier7b6v8gs] {
    padding: 0.2rem 0.85rem 0.9rem;
}

.mini__revista-fila[b-ier7b6v8gs] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid;
}

    .mini__revista-fila b[b-ier7b6v8gs] {
        font-size: 0.72rem;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mini__revista-fila i[b-ier7b6v8gs] {
        font-style: normal;
        font-family: var(--dato);
        font-size: 0.72rem;
        font-weight: 600;
        margin-left: auto;
    }

.mini__puntitos[b-ier7b6v8gs] {
    flex: 1;
    border-bottom: 1px dotted;
    min-width: 12px;
}

/* Alto de la maqueta.

   Sin proporcion fija el alto lo decidia el contenido, asi que cambiaba con la
   forma elegida: el Slider estiraba con su poster de 4/5 y la Cartelera quedaba
   corta. Para que la vista Movil sirva de referencia tiene que medir siempre lo
   mismo, y ese mismo debe parecerse a un telefono.

   Lo que no cabe se corta: .mini ya trae overflow:hidden desde app.css, y es lo
   que pasa en un celular de verdad, donde el resto se baja con el dedo. */
.marco-movil .mini[b-ier7b6v8gs] {
    aspect-ratio: 9 / 16;
}
/* _content/DigitalMenu/Components/Shared/AltaNegocio.razor.rz.scp.css */
.modal[b-ljtdyii4ix] {
    animation: alta-velo-b-ljtdyii4ix .2s ease-out;
}

.modal-dialog[b-ljtdyii4ix] {
    animation: alta-sube-b-ljtdyii4ix .28s var(--curva);
}

.modal-content[b-ljtdyii4ix] {
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra-alta);
}

.opcion[b-ljtdyii4ix] {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--humo);
    border: 1px solid transparent;
    border-radius: var(--radio-sm);
    padding: .85rem 1rem;
    transition: border-color .18s ease, background .18s ease, transform .18s var(--curva);
}

    .opcion:hover[b-ljtdyii4ix] {
        background: var(--niebla);
        border-color: var(--ambar);
        transform: translateY(-1px);
    }

    .opcion:active[b-ljtdyii4ix] {
        transform: translateY(0);
    }

    .opcion:focus-visible[b-ljtdyii4ix] {
        outline: 2px solid var(--ambar);
        outline-offset: 2px;
    }

.candidato[b-ljtdyii4ix] {
    border: 1px solid transparent;
    transition: border-color .18s ease, background .18s ease;
}

    .candidato:hover[b-ljtdyii4ix] {
        background: var(--niebla);
        border-color: var(--linea-viva);
    }

.pulso[b-ljtdyii4ix] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ambar);
    animation: alta-pulso-b-ljtdyii4ix 1.1s ease-in-out infinite;
}

@keyframes alta-velo-b-ljtdyii4ix {
    from {
        opacity: 0;
    }
}

@keyframes alta-sube-b-ljtdyii4ix {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

@keyframes alta-pulso-b-ljtdyii4ix {
    50% {
        opacity: .25;
        transform: scale(.75);
    }
}
/* _content/DigitalMenu/Components/Shared/Campo.razor.rz.scp.css */
.campo[b-k6dxlqflyn] {
    margin-bottom: .25rem;
}

.campo__obligatorio[b-k6dxlqflyn] {
    color: var(--brasa);
    margin-left: .15rem;
}

.campo__error[b-k6dxlqflyn] {
    color: var(--brasa);
}

.form-control.is-invalid[b-k6dxlqflyn] {
    border-color: var(--brasa);
}
/* _content/DigitalMenu/Components/Shared/ConfirmarModal.razor.rz.scp.css */
.velo-modal[b-g5ujiy9y44] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(23, 19, 16, .5);
    animation: confirmar-velo-b-g5ujiy9y44 .18s ease-out;
    overflow-y: auto;
}

.ventana-modal[b-g5ujiy9y44] {
    width: 100%;
    max-width: 480px;
    box-shadow: var(--sombra-alta);
    animation: confirmar-sube-b-g5ujiy9y44 .26s var(--curva);
}

@keyframes confirmar-velo-b-g5ujiy9y44 {
    from {
        opacity: 0;
    }
}

@keyframes confirmar-sube-b-g5ujiy9y44 {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}
/* _content/DigitalMenu/Components/Shared/DesplegableFormas.razor.rz.scp.css */
/* Fondo invisible que cubre la pantalla mientras el desplegable está abierto.

   Sirve para cerrarlo al hacer clic en cualquier otro lado, sin JavaScript
   propio: es un div con su @onclick en C#.

   El z-index es la clave. revista.css pone el panel en 300, así que el
   fondo va en 299: queda por encima del resto de la página pero por debajo
   del panel, y los enlaces de dentro reciben su clic con normalidad. */

.rev-desplegable__fondo[b-6kxeq7ewic] {
    position: fixed;
    inset: 0;
    z-index: 299;
    background: transparent;
    cursor: default;
}
/* _content/DigitalMenu/Components/Shared/FileInput.razor.rz.scp.css */
.zona-suelta[b-y6jjloo7qh] {
    border: 1px dashed var(--linea-viva);
    border-radius: var(--radio);
    background: var(--humo);
    padding: 2.5rem 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.18s ease;
}

.zona-suelta:hover[b-y6jjloo7qh],
.zona-suelta.encima[b-y6jjloo7qh] {
    border-color: var(--ambar);
    background: rgba(232, 180, 74, 0.12);
    box-shadow: 0 0 0 4px rgba(232, 180, 74, 0.18);
}

.zona-suelta__icono[b-y6jjloo7qh] {
    font-size: 1.8rem;
    opacity: 0.6;
}
/* _content/DigitalMenu/Components/Shared/MenuBaraja.razor.rz.scp.css */

.control:disabled[b-04wvgxaqjg] {
    background: var(--carbon);
    border-color: var(--linea);
    color: var(--hueso-25);
    box-shadow: none;
    opacity: 0.45;
    cursor: default;
}

.control:disabled:hover[b-04wvgxaqjg] {
    background: var(--carbon);
    border-color: var(--linea);
}

/* Van sobre el velo negro de la foto: --acento-foto es el color principal del
   negocio, aclarado si no se leería (ColorTema.SobreFoto, desde Menu.razor). */
.tarjeton__seccion[b-04wvgxaqjg] {
    color: var(--acento-foto, var(--ambar-claro));
}

.talla b[b-04wvgxaqjg] {
    color: var(--acento-foto, var(--ambar-claro));
}

.pasarela[b-04wvgxaqjg] {
    /* pan-y deja que el dedo siga bajando la página, pero le cede el gesto
       horizontal al carrusel. Sin esto el navegador se lo queda y el arrastre
       nunca llega al componente. */
    touch-action: pan-y;

    /* Arrastrar con el ratón sobre texto lo selecciona y deja el tarjetón
       lleno de azul a media pasada. */
    user-select: none;
    -webkit-user-select: none;
}

/* Presionar largo la foto abría el menú "Guardar imagen" de iOS a media pasada. */
.pasarela img[b-04wvgxaqjg] {
    -webkit-touch-callout: none;
}

.pasarela__riel[b-04wvgxaqjg] {
    transform: translateX(calc(
        var(--indice) * -1 * (var(--tarjeton-ancho) + var(--tarjeton-hueco))
        + var(--arrastre, 0px)));
}

.pasarela.arrastrando .pasarela__riel[b-04wvgxaqjg] {
    transition: none;
}

/* Que se note que el carrusel se puede agarrar. */
.pasarela[b-04wvgxaqjg] {
    cursor: grab;
}

.pasarela.arrastrando[b-04wvgxaqjg] {
    cursor: grabbing;
}

/* Sin blur: hay una etiqueta por opción en cada tarjetón y todas se volvían a
   difuminar al mover el carrusel (tirones en Android). El fondo más oscuro
   compensa sobre la foto. */
.talla[b-04wvgxaqjg] {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(23, 19, 16, 0.6);
}

/* El tarjetón también se limita por la altura: fuera de él se van ~240px
   (encabezado, sección y avance, padding de la pasarela, botones ‹ ›), y su
   alto es el ancho × 1.6 (10/16). Así en celulares bajos o en horizontal cabe
   en pantalla; 180px es el mínimo para que no quede diminuto. El centrado usa
   el mismo ancho en vez de la mitad escrita a mano en menu.css.
   svh y no dvh: con dvh el tarjetón cambiaba de tamaño cada vez que la barra
   del navegador se escondía o aparecía al hacer scroll.
   --baraja-extra: alto de las pastillas de secciones (Menu.razor), 0 si no hay. */
.pasarela[b-04wvgxaqjg] {
    --tarjeton-ancho: clamp(180px, calc((100svh - 240px - var(--baraja-extra, 0px)) * 0.625), min(74vw, 300px));
    padding-left: max(1rem, calc(50% - var(--tarjeton-ancho) / 2));
    padding-right: max(1rem, calc(50% - var(--tarjeton-ancho) / 2));
}

/* En pantallas anchas el tope es 320px, pero se sigue limitando por la altura:
   casi todos los celulares en horizontal miden más de 768px de ancho y caen
   aquí; con un 320 fijo el tarjetón no cabía. */
@media (min-width: 768px) {
    .pasarela[b-04wvgxaqjg] {
        --tarjeton-ancho: clamp(180px, calc((100svh - 240px - var(--baraja-extra, 0px)) * 0.625), 320px);
    }
}