:root {
    --brand: #b45309;
    --ink: #1f2937;
    --ink-soft: #6b7280;
    --bg: #f9fafb;
    --card-bg: #ffffff;
    --border: #e5e7eb;
    --success: #15803d;
    --success-bg: #f0fdf4;
    --error: #b91c1c;
    --error-bg: #fef2f2;
    --radius: 12px;
    font-size: 16px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5rem; }
.muted { color: var(--ink-soft); font-size: 0.95rem; }
.center { text-align: center; }

/* ---------- App nav ---------- */
.app-nav {
    background: var(--ink);
    color: white;
}
.app-nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.75rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.app-nav .brand {
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
}
.app-nav nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.app-nav nav a {
    color: #d1d5db;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    font-size: 0.92rem;
}
.app-nav nav a:hover, .app-nav nav a.active {
    background: rgba(255,255,255,0.12);
    color: white;
    text-decoration: none;
}
.app-nav nav a.logout { color: #fca5a5; }

.demo-banner {
    background: #ecfdf5;
    border-bottom: 1px solid #a7f3d0;
    color: #065f46;
    padding: 0.6rem 1rem;
    font-size: 0.88rem;
    text-align: center;
}
.demo-banner a { color: inherit; text-decoration: underline; font-weight: 600; }

.impersonate-banner {
    background: #7c2d12;
    color: #fed7aa;
    text-align: center;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
}
.impersonate-banner a { color: white; font-weight: 600; margin-left: 0.6rem; }

.app-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 4rem;
}

.page-header { margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.6rem; }

/* ---------- Layout helpers ---------- */
.grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
    .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.card h2 { font-size: 1.15rem; }

.stat { text-align: center; }
.stat-num { display: block; font-size: 1.8rem; font-weight: 700; color: var(--brand); }
.stat-label { color: var(--ink-soft); font-size: 0.9rem; }

/* ---------- Forms ---------- */
form label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.85rem;
}
form.inline-form { margin-bottom: 0; display: inline-block; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=file], input[type=color], select, textarea {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--ink);
    background: white;
}
input[type=color] { padding: 0.2rem; height: 2.6rem; }
.checkbox-label { display: flex; align-items: center; gap: 0.4rem; font-weight: 400; }
.checkbox-label input { width: auto; margin: 0; }

.btn {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--brand); color: white; }
.btn-primary:hover { background: #92400e; }
.btn-secondary { background: white; color: var(--ink); border-color: var(--border); }
.btn-secondary:hover { background: #f3f4f6; }
.btn-danger { background: var(--error); color: white; }
.btn-danger-outline { background: white; color: var(--error); border-color: #fecaca; }
.btn-small { padding: 0.35rem 0.7rem; font-size: 0.85rem; }
.btn-icon { padding: 0.3rem 0.6rem; }
.btn-block { display: block; width: 100%; margin-bottom: 0.6rem; }
.btn[disabled] { opacity: 0.35; cursor: not-allowed; }

/* ---------- Flash ---------- */
.flash {
    padding: 0.8rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}
.flash-success { background: var(--success-bg); color: var(--success); }
.flash-error { background: var(--error-bg); color: var(--error); }

/* ---------- Auth pages ---------- */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.auth-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    max-width: 420px;
    width: 100%;
}
.auth-card h1 { font-size: 1.4rem; }

/* ---------- Dashboard specific ---------- */
.link-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    margin: 0.7rem 0;
    overflow-x: auto;
}
.link-box code { flex: 1; white-space: nowrap; font-size: 0.85rem; }

.qr-preview { display: inline-block; padding: 0.8rem; background: white; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 0.8rem; }
.qr-preview img { display: block; }
.qr-preview-large { width: 260px; max-width: 100%; }
.qr-download-options { margin: 1rem 0; }

.qr-sheet-form { max-width: 420px; }
.qr-size-options { display: flex; gap: 0.6rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.radio-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-weight: 400;
    font-size: 0.92rem;
    cursor: pointer;
    flex: 1;
    min-width: 180px;
}
.radio-card input { width: auto; margin: 0; }
.radio-card:has(input:checked) { border-color: var(--brand); background: #fff7ed; }
#qr-sheet-info { margin: 0.6rem 0 1rem; font-weight: 600; color: var(--ink); }

.logo-preview, .menu-file-preview { max-width: 160px; border-radius: 8px; margin-top: 0.5rem; border: 1px solid var(--border); }

.danger-zone { border-color: #fecaca; }
.danger-zone h2 { color: var(--error); font-size: 1.05rem; }

/* ---------- Menu editor ---------- */
.category-block { }
.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
    flex-wrap: wrap;
}
.category-header .rename-form { flex: 1; min-width: 180px; }
.category-header input[type=text] {
    font-size: 1.1rem;
    font-weight: 700;
    border: 1px solid transparent;
    background: transparent;
    padding: 0.2rem 0.3rem;
}
.category-header input[type=text]:hover, .category-header input[type=text]:focus {
    border-color: var(--border);
    background: white;
}
.category-actions { display: flex; gap: 0.3rem; }

/* Los platos eran una tabla con un <form> dentro de cada <tr>, que es
   HTML inválido: el navegador saca el formulario de la tabla y sólo sigue
   funcionando por una peculiaridad del analizador. Ahora son tarjetas.

   ── Por qué en vertical ──
   El editor vive en una columna estrecha, con la carta de verdad al lado.
   Con los campos en una línea, el nombre del plato caía a 130px y se leía
   «Croquetas de l». En vertical cada campo tiene todo el ancho de la
   columna, y abajo va una sola línea con lo pequeño: precio, alérgenos y
   guardar. */
.item-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.9rem; }
.item-card {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.7rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fcfcfd;
}
.item-card > .item-form { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
/* Sólo los hijos directos del formulario —nombre y descripción— ocupan
   todo el ancho. El precio vive dentro de .item-linea y conserva el suyo:
   con la regla general lo alcanzaba y se estiraba a toda la línea. */
.item-card .item-form > input[type=text] { margin-top: 0; width: 100%; }
.item-card input[type=text] { margin-top: 0; }
.input-name { font-weight: 600; }

/* La línea de abajo: lo que no necesita ancho. */
.item-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
/* Más específico que la regla de ancho completo de la tarjeta: si no, el
   precio se estira a toda la línea y parece un campo de texto largo. */
.item-linea .input-price { width: 84px; flex: 0 0 auto; text-align: right; }
.item-linea .btn { flex: 0 0 auto; }

.item-estado { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.2rem; font-size: 0.8rem; color: var(--ink-soft); }

/* El plato agotado se atenúa, pero no tanto que no se pueda leer: hay que
   poder repasar de un vistazo qué falta hoy para reponerlo mañana. */
.item-unavailable { background: #fafafa; border-style: dashed; }
.item-unavailable .input-name,
.item-unavailable .input-desc,
.item-unavailable .input-price { color: var(--ink-soft); }

.etiqueta-agotado {
    background: var(--error-bg);
    color: var(--error);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.18rem 0.5rem;
    border-radius: 6px;
    white-space: nowrap;
}

/* Las acciones, en columna a la derecha y pequeñas: se usan poco y no
   deben competir con los campos. */
.item-acciones { display: flex; flex-direction: column; gap: 0.3rem; flex: 0 0 auto; align-items: stretch; }
.item-acciones form { margin: 0; }
.item-acciones .btn { white-space: nowrap; font-size: 0.75rem; padding: 0.28rem 0.55rem; }

/* Agotar no es destructivo —el plato se queda— así que no lleva el rojo
   de eliminar. Ámbar: llama la atención sin dar miedo. */
.btn-agotar { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.btn-agotar:hover { background: #fde68a; }
.btn-reponer { background: var(--success-bg); color: var(--success); border: 1px solid currentColor; }
.btn-reponer:hover { filter: brightness(0.97); }

.add-item-form { border-top: 1px dashed var(--border); padding-top: 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; }
.add-item-form input[type=text] { margin-top: 0; width: 100%; }

/* ---------- Alérgenos (editor) ---------- */

/* Detrás de un botón, y cerrados de partida. Catorce casillas por plato
   son cuatrocientas en una carta de treinta: abiertas, no hay forma de
   repasar nada. El botón enseña las siglas de lo que lleva, que es justo
   lo que se consulta. */
.alergenos { flex: 1 1 auto; min-width: 0; }
.alergenos > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: white;
    border: 1px dashed var(--border);
    color: var(--ink-soft);
    font-size: 0.75rem;
    padding: 0.28rem 0.55rem;
}
.alergenos > summary::-webkit-details-marker { display: none; }
.alergenos > summary::after { content: '▾'; font-size: 0.65rem; opacity: 0.6; }
.alergenos[open] > summary { border-style: solid; border-color: var(--brand); color: var(--brand); }
.alergenos[open] > summary::after { content: '▴'; }
.alergenos > summary .alergeno { border-color: currentColor; opacity: 1; font-size: 0.62rem; }

/* El desglose se despliega en vez de aparecer de golpe: el salto seco
   hacía perder de vista en qué plato estabas. */
.alergenos-desglose {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.18s ease-out;
    width: 100%;
}
.alergenos[open] .alergenos-desglose { grid-template-rows: 1fr; }
.alergenos-desglose > * { overflow: hidden; }

.alergenos-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.55rem 0 0; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: white;
    font-size: 0.78rem;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
}
.chip input { margin: 0; }
.chip:has(input:checked) { border-color: var(--brand); background: #fff7ed; font-weight: 600; }
.chip:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.alergenos-nota { font-size: 0.75rem; margin: 0.45rem 0 0.2rem; }

@media (max-width: 767px) {
    .item-card { flex-direction: column; }
    .item-acciones { flex-direction: row; align-items: stretch; width: 100%; }
    .item-acciones form:first-child { flex: 1; }
    .item-acciones form:first-child .btn { width: 100%; }
}

/* ---------- Temas de color (ajustes) ---------- */
.temas { border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem; margin-top: 0.9rem; }
.temas legend { font-size: 0.85rem; font-weight: 600; padding: 0 0.35rem; }
.temas-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tema-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 68px;
    max-width: 96px;
    padding: 0.5rem 0.3rem;
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 400;
    text-align: center;
}
.tema-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.tema-card:has(input:checked) { border-color: var(--brand); background: #fff7ed; }
/* El radio está oculto, así que sin esto quien navega con el teclado no
   ve dónde está: la tarjeta hereda el foco de su input. */
.tema-card:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.chip:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.tema-muestra {
    display: grid;
    place-items: center;
    width: 100%;
    height: 42px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    font-weight: 700;
}
.tema-nombre { font-size: 0.78rem; }

.tema-propio { display: none; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px dashed var(--border); }
.tema-propio.visible { display: block; }
.tema-propio-campos { display: flex; gap: 1rem; flex-wrap: wrap; }
.tema-propio-campos label { font-size: 0.85rem; }
.contraste { font-size: 0.83rem; margin: 0.6rem 0 0; font-weight: 600; }
.contraste.bien { color: var(--success); }
.contraste.regular { color: #92400e; }
.contraste.mal { color: var(--error); }

/* ---------- Vista previa de la carta ---------- */
.previa { border: 1px solid var(--border); border-radius: 10px; padding: 1rem; margin-top: 0.9rem; transition: background 0.2s, color 0.2s; }
.previa-titulo { font-weight: 700; margin: 0 0 0.5rem; border-bottom: 2px solid currentColor; display: inline-block; padding-bottom: 0.15rem; }
.previa-plato { display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline; }
.previa-nombre { font-weight: 600; }
.previa-precio { font-weight: 700; white-space: nowrap; }
.previa-desc { margin: 0.15rem 0 0; font-size: 0.88rem; }
.previa-alergenos { margin: 0.4rem 0 0; }

/* ---------- Admin ---------- */
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin-table th, .admin-table td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--border); }
.badge { background: var(--brand); color: white; font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 6px; margin-left: 0.3rem; }

.status-pill { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.status-active { background: var(--success-bg); color: var(--success); }
.status-paused { background: #fef3c7; color: #92400e; }
.status-cancelled { background: var(--error-bg); color: var(--error); }

.admin-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; white-space: nowrap; }
.btn-link { background: none; border: none; padding: 0; color: var(--brand); font-size: 0.9rem; cursor: pointer; text-decoration: none; font-family: inherit; }
.btn-link:hover { text-decoration: underline; }

/* ---------- Public menu page ---------- */
.public-wrap { max-width: 640px; margin: 0 auto; padding: 1.5rem 1.1rem 3rem; }
.public-header {
    text-align: center;
    padding-bottom: 1.2rem;
    margin-bottom: 1.2rem;
    border-bottom: 3px solid var(--brand);
}
.public-logo { max-width: 110px; max-height: 110px; border-radius: 12px; margin-bottom: 0.6rem; }
.public-header h1 { font-size: 1.6rem; }

.cat-jump {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.6rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--border);
}
.cat-jump a {
    white-space: nowrap;
    background: #f3f4f6;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--ink);
}
.cat-jump a:hover { background: #e5e7eb; text-decoration: none; }

.menu-category { margin-bottom: 1.8rem; scroll-margin-top: 1rem; }
.menu-category h2 { font-size: 1.25rem; border-bottom: 2px solid currentColor; display: inline-block; padding-bottom: 0.2rem; margin-bottom: 0.8rem; }
.menu-items { list-style: none; margin: 0; padding: 0; }
.menu-item { padding: 0.6rem 0; border-bottom: 1px dashed var(--border); }
.menu-item:last-child { border-bottom: none; }
.menu-item-row { display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline; }
.menu-item-name { font-weight: 600; }
.menu-item-price { color: var(--brand); font-weight: 700; white-space: nowrap; }
.menu-item-desc { margin: 0.15rem 0 0; color: var(--ink-soft); font-size: 0.88rem; }

/* El plato agotado se queda a la vista, tachado.
 *
 * No basta con la raya: quien no distinga bien el tachado se quedaría sin
 * enterarse. Por eso el precio se sustituye por la palabra «Agotado hoy»,
 * que se lee igual en voz alta que en pantalla. */
.menu-item-agotado .menu-item-name { text-decoration: line-through; opacity: 0.55; }
.menu-item-agotado .menu-item-desc { opacity: 0.55; }
.menu-item-agotado .menu-item-alergenos { opacity: 0.55; }
/* ── Qué se ve, decidido sólo por la clase ──
 * carta.php pinta siempre la etiqueta «Agotado hoy» y el precio; aquí se
 * muestra uno u otro según el plato esté o no agotado. Es lo que permite
 * que assets/js/agotados.js, al cambiar sólo la clase `menu-item-agotado`,
 * deje la fila exactamente como la habría pintado el servidor. */
.menu-item .etiqueta-hoy { display: none; }
.menu-item-agotado .etiqueta-hoy { display: inline-block; }
.menu-item-agotado .menu-item-price { display: none; }

/* Texto sólo para lector de pantalla (el aviso «Se ha agotado: …»). */
.solo-lector {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.etiqueta-hoy {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.12rem 0.45rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    white-space: nowrap;
    opacity: 0.75;
}

/* ---------- Alérgenos (carta pública) ---------- */
.menu-item-alergenos { margin: 0.3rem 0 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.alergeno {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    opacity: 0.75;
    cursor: help;
}
.alergenos-leyenda { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.alergenos-leyenda h2 { font-size: 1rem; margin-bottom: 0.6rem; }
.alergenos-leyenda ul { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.3rem; }
.alergenos-leyenda li { font-size: 0.83rem; display: flex; align-items: center; gap: 0.4rem; }
.alergenos-leyenda .alergeno { cursor: default; }
.alergenos-leyenda p { font-size: 0.78rem; line-height: 1.5; }

.pdf-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; }
.pdf-frame { width: 100%; height: 70vh; border: none; }
.menu-file-full { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); }

.html-preview-wrap { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 0.5rem; }
.html-preview-frame { width: 100%; height: 320px; border: none; background: white; }

.public-footer { text-align: center; margin-top: 2rem; }

/* ---------- Editor con vista previa al lado ---------- */

/* Con el móvil al lado, el ancho de siempre dejaba los campos del editor
   en su mínimo: el nombre del plato se leía «Croquetas de l». Esta página
   se ensancha, y sólo ésta — se reconoce por llevar la vista previa
   dentro. */
.app-main:has(.editor-con-previa) { max-width: 1420px; }

.editor-con-previa { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; align-items: start; }
.editor-columna { min-width: 0; }

/* El móvil se queda pegado mientras se recorre la carta: editar el postre
   y tener que subir hasta arriba para ver el efecto no sirve de nada. */
.editor-previa { position: sticky; top: 1rem; }
.previa-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; }
.previa-cabecera h2 { font-size: 1rem; margin: 0; }
.previa-nota { font-size: 0.78rem; margin: 0.5rem 0 0; line-height: 1.5; }

/* La carcasa. No es decoración: un móvil dibujado recuerda que eso se lee
   en una pantalla de seis pulgadas, y eso cambia cómo se escriben las
   descripciones. */
.movil {
    width: 100%;
    aspect-ratio: 375 / 700;
    border: 10px solid #1f2937;
    border-radius: 26px;
    overflow: hidden;
    background: white;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}
.movil iframe { width: 100%; height: 100%; border: none; display: block; }

/* Entre 1024 y 1280 el móvil adelgaza en vez de bajarse: sigue cabiendo
   al lado y el editor recupera el ancho que le hacía falta. */
@media (max-width: 1279px) {
    .editor-con-previa { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* Las dos vistas en vertical aguantan hasta bien abajo porque la ficha
   del plato ya es estrecha de por sí. Por debajo de 900 no cabrían dos
   columnas sin estrujar las dos. */
@media (max-width: 899px) {
    /* Apilado. Y la vista previa va ARRIBA, no al final: puesta abajo hay
       que recorrer la carta entera para verla, que es justo lo contrario
       de lo que se busca. */
    .editor-con-previa { grid-template-columns: 1fr; }
    .editor-previa { position: static; order: -1; max-width: 420px; margin: 0 auto 0.5rem; }
    .movil { aspect-ratio: 375 / 560; }
}

/* ---------- Pies legales ---------- */
.pie-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem 1rem;
    padding: 1.5rem 1rem 2rem;
    font-size: 0.8rem;
    color: var(--ink-soft);
}
.pie-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pie-legal a:hover { color: var(--brand); }

.pie-legal-carta { font-size: 0.75rem; margin-top: 0.35rem; }
.pie-legal-carta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }