/* Carta pública con secciones dentro de otras (fase 4, paso 8; boceto aprobado el 23 oct
   2026, opción A; "Sin cortes" el 24 oct): pestañas arriba (bajan de línea si no caben),
   regiones bajo el título como índice en texto, "↑ Regiones" y "Anterior"/"Siguiente". Lo
   pinta js/carta_grupos.js. Diseño nuevo del paso 8b (boceto del 24 oct): colores y tamaños
   de carta_base.css; la fila del plato está en carta_platos.css. */

/* Barra fija: las pestañas, subrayada la que se ve, en las líneas que hagan falta */
.cat-nav.con-grupos .cat-nav-inner {
    display: block;
    overflow: visible;
    white-space: normal;
}

.grupo-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.1rem;
}

.grupo-tab {
    min-height: var(--boton);
    padding: .6rem 0;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--tinta-2);
    font-size: 1rem;
    cursor: pointer;
}

.grupo-tab.active {
    color: var(--tinta);
    font-weight: 700;
    border-bottom-color: var(--acento);
}

/* La pestaña que se ve: título grande */
.grupo-titulo {
    font-family: var(--f-titulo);
    font-weight: 400;
    font-size: var(--t-tipo);
    line-height: 1.15;
    text-wrap: balance;
}

/* Bajo el título: las regiones, como índice en texto ("Regiones Andalucía · Galicia…") */
.grupo-indice {
    margin-top: 1.25rem;
    font-size: var(--t-detalle);
    color: var(--tinta-2);
    line-height: 1.6;
}

.grupo-indice strong {
    color: var(--tinta);
    margin-right: .5rem;
}

.grupo-region-btn {
    display: inline-flex;
    align-items: center;
    min-height: var(--boton);
    padding: 0;
    background: none;
    border: 0;
    color: var(--tinta);
    font-size: var(--t-detalle);
    text-decoration: underline;
    text-decoration-color: var(--linea);
    text-underline-offset: 3px;
    white-space: nowrap;
    cursor: pointer;
}

/* El punto que separa va detrás de cada región (nunca empieza una línea) */
.grupo-region-btn:not(:last-child)::after {
    content: '·';
    display: inline-block;
    margin: 0 .5rem;
    color: var(--tinta-2);
    text-decoration: none;
}

.grupo-region {
    margin-top: 1.75rem;
}

.grupo-region-titulo {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-size: var(--t-region);
    font-weight: 700;
    margin-bottom: .25rem;
}

.grupo-region-titulo small {
    font-weight: 400;
    font-size: var(--t-detalle);
    color: var(--tinta-2);
}

.grupo-volver {
    min-height: var(--boton);
    margin-top: .25rem;
    padding: 0;
    background: none;
    border: 0;
    color: var(--tinta-2);
    font-size: var(--t-detalle);
    cursor: pointer;
}

/* Anterior / Siguiente */
.grupo-pasar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2.5rem;
}

.grupo-pasar button {
    min-width: 0;
    min-height: var(--boton);
    padding: .7rem 1rem;
    background: var(--hoja);
    border: 1px solid var(--linea);
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
}

.grupo-pasar small {
    display: block;
    font-size: var(--t-detalle);
    color: var(--tinta-2);
}

.grupo-pasar strong {
    display: block;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.grupo-pasar .grupo-sig {
    grid-column: 2;
    text-align: right;
}

.grupo-busqueda .grupo-platos {
    margin-top: .5rem;
}