/* Carta pública: secciones y platos. Diseño nuevo (fase 4, paso 8b; boceto aprobado por
   Adolfo el 24 oct 2026): una sola columna de lectura; el plato en Lista: nombre y precio a 17 px
   en negrita, detalles a 15 px (los otros modos de cada sección, en carta_modos.css; parte C,
   28 oct 2026). Colores y tamaños en carta_base.css. */

main.carta-content {
    padding-top: 1.25rem;
    padding-bottom: 3rem;
    min-height: 50vh;
}

/* Secciones de una carta sin pestañas (boceto aprobado por Adolfo el 28 oct 2026, parte A): la
   fila de todas, siempre a la vista, que se desliza ella sola (la página nunca se sale de lado),
   con la marcada subrayada como las pestañas y el borde difuminado si hay más; al final,
   «Todas», que abre la lista de todas en dos columnas (los nombres largos bajan de línea; si la
   lista no cabe, baja ella sola). */
.secciones-barra {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .125rem 0 .375rem;
}

.secciones-fila {
    position: relative; /* para medir dónde está cada sección al deslizarla */
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-right: 1.75rem;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.25rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 2.25rem), transparent);
}

.secciones-fila::-webkit-scrollbar {
    display: none;
}

.secciones-fila.cabe {
    padding-right: 0;
    -webkit-mask-image: none;
    mask-image: none;
}

.secciones-fila-item {
    flex: none;
    min-height: var(--boton);
    padding: .5rem 0 .375rem;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--tinta-2);
    font-size: 1rem;
    white-space: nowrap;
    cursor: pointer;
}

.secciones-fila-item[aria-current="true"] {
    color: var(--tinta);
    font-weight: 700;
    border-bottom-color: var(--acento);
}

.secciones-boton {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-height: var(--boton);
    padding: .45rem .875rem;
    background: var(--hoja);
    border: 1px solid var(--linea);
    border-radius: 999px;
    color: var(--tinta);
    font-size: var(--t-detalle);
    font-weight: 700;
    cursor: pointer;
}

.secciones-boton[aria-expanded="true"] {
    border-color: var(--acento);
}

.secciones-lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
    max-height: calc(100vh - 12rem);
    max-height: calc(100dvh - 12rem);
    overflow-y: auto;
    padding-bottom: .5rem;
}

.secciones-lista[hidden] {
    display: none;
}

.secciones-item {
    min-width: 0;
    min-height: var(--boton);
    padding: .5rem 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--linea);
    color: var(--tinta);
    font-size: 1rem;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

/* La sección en la que estás: en negrita, subrayada con el color del restaurante */
.secciones-item[aria-current="true"] {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--acento);
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}

.cat-section + .cat-section {
    margin-top: 2.5rem;
}

.cat-section-title {
    font-family: var(--f-titulo);
    font-weight: 400;
    font-size: var(--t-tipo);
    line-height: 1.15;
    text-wrap: balance;
}

.cat-section-desc {
    font-size: var(--t-detalle);
    color: var(--tinta-2);
    margin-top: .25rem;
}

.cat-platos {
    margin-top: .5rem;
}

/* Un plato por fila: nombre y precio arriba, detalles debajo */
.plato-fila {
    padding: .85rem 0;
    border-bottom: 1px solid var(--linea);
    cursor: pointer;
}

.plato-fila-cab {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.plato-fila-name {
    font-size: var(--t-nombre);
    font-weight: 700;
    min-width: 0;
    overflow-wrap: anywhere;
}

.plato-price {
    flex-shrink: 0;
    max-width: 55%;
    text-align: right;
    font-size: var(--t-nombre);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.plato-precio-uno {
    white-space: nowrap;
}

.plato-precio-uno + .plato-precio-uno {
    margin-left: .75rem;
}

.plato-precio-nombre {
    font-weight: 400;
    font-size: var(--t-detalle);
    color: var(--tinta-2);
}

.plato-fila-desc {
    font-size: var(--t-detalle);
    color: var(--tinta-2);
    margin-top: .15rem;
}

/* El formato del editor (3 nov 2026): párrafos, listas y negrita, en la fila y en la ficha */
.plato-fila-desc p + p,
.plato-fila-desc p + ul, .plato-fila-desc p + ol,
.plato-fila-desc ul + p, .plato-fila-desc ol + p { margin-top: .35rem; }
.plato-fila-desc ul, .plato-fila-desc ol,
.modal-desc ul, .modal-desc ol { padding-left: 1.25rem; }
.plato-fila-desc strong, .modal-desc strong { font-weight: 700; }

/* Al buscar: dónde está cada plato ("Tintos › Andalucía") */
.plato-fila-camino {
    font-size: var(--t-detalle);
    color: var(--acento);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .1rem;
}

/* Recomendados (fase 4, paso 8b, parte 4): bloque arriba de la carta o de cada tipo, y la marca
   en su sección. Solo con las variables de carta_base.css (regla de ARCHITECTURE.md). */
.recomendados {
    background: var(--acento-suave);
    border-radius: 12px;
    padding: .75rem 1rem .25rem;
    margin: 1rem 0 1.25rem;
}
.recomendados-titulo {
    font-family: var(--f-titulo);
    font-weight: 400;
    font-size: var(--t-region);
    color: var(--tinta);
}
.recomendados .plato-fila:last-child {
    border-bottom: 0;
}
.plato-recomendado {
    font-size: var(--t-detalle);
    font-weight: 700;
    color: var(--acento);
    margin-bottom: .1rem;
}