/* =========================================================
   1. CONFIGURACIÓN Y CONTENEDOR BASE
========================================================= */

.restaurant-menu {
    max-width: 800px;
    margin: 0 auto 60px;
}

/* =========================================================
   2. CABECERAS DE SECCIÓN Y APARTADOS
========================================================= */

/* --- Títulos Principales --- */
.titulo-apartado,
.restaurant-menu-label-global-title,
.restaurant-menu .restaurant-menu-especial-curso {
    margin: 30px 0;
    text-align: center;
    font-weight: 900;
    color: var(--rm-font-secondary, #666);
    font-size: 2.0rem;
    text-transform: uppercase;
    letter-spacing: -1px;
    display: flex;
    align-items: center;
    gap: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.titulo-apartado::before,
.restaurant-menu-label-global-title::before {
    content: '';
    flex: 1;
    height: 5px;
    background: linear-gradient(to right, transparent, var(--rm-font-secondary, #666));
}

.titulo-apartado::after,
.restaurant-menu-label-global-title::after {
    content: '';
    flex: 1;
    height: 5px;
    background: linear-gradient(to left, transparent, var(--rm-font-secondary, #666));
}

/* Forzado específico para cursos de menú especial */
.restaurant-menu .restaurant-menu-especial-curso {
    font-size: 1.6em !important;
    position: relative;
}

/* --- Wrappers de Cabecera --- */
.restaurant-menu-section-header,
.restaurant-menu-label-global-header {
    text-align: center;
    margin: 60px 0 8px;
    padding: 0;
}

/* Primer apartado con menos margen arriba */
.restaurant-menu > .restaurant-menu-section-header:first-child,
.restaurant-menu > .restaurant-menu-label-global-header:first-child {
    margin-top: 20px;
}

/* Cuando justo antes hay una imagen, reducir margen */
.menu-section-image + .restaurant-menu-section-header,
.menu-section-image + .restaurant-menu-label-global-header {
    margin-top: 20px;
}

/* Reset de título dentro del header */
.restaurant-menu-section-header .titulo-apartado,
.restaurant-menu-label-global-header .restaurant-menu-label-global-title {
    margin: 0;
    border: none !important;
}

/* --- Líneas Divisorias (Underlines) --- */
.restaurant-menu-section-header::after,
.restaurant-menu-label-global-header::after {
    content: "";
    display: block;
    width: 100%;
    max-width: 800px;
    height: 5px;
    margin: 4px auto 0;
    background: linear-gradient(to right, transparent, var(--rm-font-secondary, #666), transparent);
}

/* --- Descripciones bajo título --- */
.restaurant-menu-section-note,
.restaurant-menu-section-note p,
.restaurant-menu-label-global-description,
.restaurant-menu-label-global-description p {
    font-size: 0.9em !important;
    line-height: 1.3 !important;
    margin: 2px 0 !important;
    text-align: center !important;
    text-transform: uppercase;
    font-weight: normal !important;
    font-family: inherit;
}

/* Cabecera Global por Etiqueta */
.rl-menu-global-label-header {
    background: #f1f1f1;
    padding: 1em;
    border-radius: 6px;
    margin-bottom: 1.2em;
}

.rl-menu-global-label-description {
    margin-top: 0.4em;
    padding: 0.2em 0 0.5em;
    font-size: 0.95em;
    line-height: 1.4;
    opacity: 0.85;
    color: var(--rm-font-secondary, #666);
}

/* --- Imagen de Sección --- */
.menu-section-image {
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--rm-font-tertiary, #666);
    width: 100%;
    height: 200px;
    margin: 80px 0 20px 0;
}

/* Primera imagen sin margen extra arriba */
.restaurant-menu > .menu-section-image:first-child {
    margin-top: 20px;
}

/* =========================================================
   3. COMPONENTES UI COMPARTIDOS (Cajas, Badges, Tooltips)
========================================================= */

/* --- Zona Gris Común --- */
.restaurant-menu-graybox,
.restaurant-menu-especial-resumen {
    display: block;
    width: 100%;
    max-width: 800px;
    padding: 0.8em 0;
    margin: 15px auto;
    border-radius: 8px;
    text-align: center;
    color: inherit;
    background: rgba(0, 0, 0, 0.1);
}

/* Ajuste específico menú especial (Compacto) */
.restaurant-menu-especial-resumen {
    padding: 0.5em 0;
    margin-top: 8px;
    margin-bottom: 8px;
}

.restaurant-menu-gray-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 6px;
}

.restaurant-menu-gray-title-wrap {
    text-align: center;
}

.restaurant-menu-gray-badge {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.85);
    color: #fff;
    margin-bottom: 4px;
}

.restaurant-menu-gray-title {
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
}

.restaurant-menu-gray-price {
    font-weight: 700;
    font-size: 1.4rem;
}

.restaurant-menu-gray-includes {
    margin-top: 4px;
    font-size: 0.95rem;
}

.restaurant-menu-gray-short-desc,
.restaurant-menu-gray-long-desc {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-size: 0.95em;
    line-height: 1.45;
}

.restaurant-menu-gray-notes,
.restaurant-menu-gray-warning {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 2px solid rgba(0,0,0,0.08);
    font-size: 0.9em;
    font-style: italic;
    opacity: 0.85;
    line-height: 1.35;
}

/* Contenido interno de zonas grises */
.restaurant-menu-graybox > *,
.restaurant-menu-especial-resumen > * {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* --- Badges de Platos --- */
.badge-recomendado-wrap {
    position: relative;
    display: inline-block;
    margin-right: 1px;
    cursor: help;
    margin-top: -2px;
}

.badge-recomendado {
    background: #c62828;
    color: #fff;
    padding: 2px 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85em;
    line-height: 1;
}

.badge-recomendado i {
    color: #fff;
    font-size: 0.95em;
    margin: 0;
}

/* Variantes de color */
.badge-recomendado-chef { background: #c62828; }
.badge-novedad { background: #1565c0; }
.badge-picante { background: #e65100; }
.badge-top-ventas { background: #f9a825; }

/* --- Tooltips (Badges y Alérgenos) --- */
.badge-recomendado-tooltip,
.alergeno-tooltip {
    visibility: hidden;
    opacity: 0;
    background: #000;
    color: #fff;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 4px;
    position: absolute;
    z-index: 30;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    transition: opacity .2s ease-in-out;
}

.badge-recomendado-tooltip { bottom: 125%; padding: 4px 8px; }
.alergeno-tooltip { bottom: 120%; pointer-events: none; }

.badge-recomendado-tooltip::after,
.alergeno-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -4px;
    border-width: 4px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

.badge-recomendado-wrap:hover .badge-recomendado-tooltip,
.badge-recomendado-wrap:active .badge-recomendado-tooltip,
.alergeno-wrap:hover .alergeno-tooltip,
.alergeno-wrap:active .alergeno-tooltip {
    visibility: visible;
    opacity: 1;
}

/* --- Alérgenos --- */
.alergenos {
    margin: 10px 0 5px;
    font-size: 0.6em;
    color: var(--rm-font-secondary, #666);
}

.alergeno-icon {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

.alergeno-wrap {
    position: relative;
    display: inline-block;
    margin-right: 6px;
    cursor: help;
}

/* --- Suplementos Generales --- */
.suplementos {
    margin: 0 auto 15px;
    line-height: 115%;
    font-size: 0.8em;
    width: 100%;
}

.titulo-suplementos,
.titulo-ingredientes,
.precio-suplemento {
    color: var(--rm-font-secondary, #666);
    font-weight: bold;
}

.suplemento {
    display: flex;
    justify-content: space-between;
}

/* =========================================================
   4. ITEM DEL MENÚ (PLATO INDIVIDUAL)
========================================================= */

.custom-menu-item {
    margin-bottom: 20px;
    border-bottom: 2px dashed color-mix(in srgb, var(--rm-font-secondary, #666) 40%, transparent);
    padding: 10px;
}

.menu-item-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Columna Izquierda: Imagen (miniatura cuadrada) */
.menu-item-thumb {
    flex-shrink: 0;
}

.menu-item-thumb a {
    display: block;
    border-radius: 10px;
    overflow: hidden;
}

.menu-item-thumb img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    border: 2px solid var(--rm-font-secondary, #666);
    display: block;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.menu-item-thumb a:hover img,
.menu-item-thumb a:focus img,
.menu-item-thumb a:active img {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Columna Derecha: Contenido */
.menu-item-content {
    flex: 1;
    min-width: 0;
}

.menu-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    font-weight: bold;
    font-size: 1.0em;
    line-height: 1.2;
    margin-bottom: 10px;
}

.item-number {
    color: var(--rm-font-secondary, #666);
    margin-right: 5px;
    white-space: nowrap;
}

.precio {
    margin-left: auto;
    font-weight: bold;
    font-size: 1.0em;
    color: var(--rm-precio-color, var(--rm-font-secondary, #666));
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- Detalles del Plato --- */
.descripcion-producto {
    font-size: 0.8em;
    margin-top: -10px;
    padding: 0;
}

.descripcion-producto p {
    text-align: left !important;
    line-height: 95% !important;
    padding: 0;
}

.denominacion-origen {
    font-size: 0.9em;
    color: var(--rm-font-tertiary, #666);
    margin-bottom: 10px;
    font-style: italic;
}

.titulo-ingredientes {
    display: inline;
}

.ingredientes {
    display: inline-block;
    font-size: 0.8em;
    color: var(--rm-font-tertiary, #666);
    line-height: 110%;
    margin-bottom: 10px;
}

/* --- Precio Extra (Flex) --- */
.menu-precio-extra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 0.95em;
    font-weight: bold;
    margin-top: 6px;
    margin-bottom: 10px;
    opacity: 0.85;
    color: var(--rm-font-tertiary, #666);
}

.menu-precio-extra-label { flex: 1; }

.menu-precio-extra-value {
    flex-shrink: 0;
    white-space: nowrap;
}

/* --- Suplemento Menú (Flex) --- */
.menu-item-suplemento-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    margin-bottom: 10px;
    font-size: 0.8em !important;
    line-height: 1.0 !important;
    font-weight: bold;
    opacity: 0.85;
}

.menu-suplemento-label { flex: 1; }

.menu-suplemento-value {
    flex-shrink: 0;
    white-space: nowrap;
    color: var(--rm-font-secondary, #666);
}

/* --- Condición Especial --- */
.menu-item-condicion-especial {
    margin-top: 10px;
    font-size: 0.8em !important;
    line-height: 1.0 !important;
    font-weight: bold;
    text-align: center !important;
    color: var(--rm-font-tertiary, #666);
}

/* =========================================================
   5. MÓDULO: MENÚ DEL DÍA
========================================================= */

.rl-menu-dias-wrapper {
    text-align: center;
    margin-bottom: 25px;
}

.mensaje-no-menu-hoy {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.rl-menu-dias-top {
    margin-top: 10px;
    margin-bottom: 20px;
}

.titulo-menu-dia {
    margin-top: 10px;
    font-size: 150%;
    font-weight: 600;
    text-transform: uppercase;
}

.rl-menu-dias-selector {
    display: inline-block;
    margin-top: 10px;
}

.rl-menu-dias-label {
    font-weight: bold;
    margin-right: 10px;
}

.rl-menu-dias-select,
.restaurant-menu-especial-select {
    padding: 6px 10px !important;
    font-size: 16px !important;
    border-radius: 4px !important;
    border: 2px solid rgba(0,0,0,0.2) !important;
    background: #f5f5f5 !important;
    cursor: pointer !important;
}

/* Resumen del Menú del Día */
.resumen-menu-dia {
    margin-top: 20px;
    margin-bottom: 60px;
    font-size: 16px;
}

.resumen-menu-dia-precio {
    font-size: 1.6em;
    font-weight: 700;
    margin-top: 8px;
    margin-bottom: 4px;
    color: inherit;
}

.resumen-menu-dia-incluye {
    margin-top: 4px;
    font-size: 18px;
    font-weight: 500;
}

.resumen-menu-dia-aviso {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 3px solid rgba(0,0,0,0.08);
    font-size: 0.9em;
    color: var(--rm-font-secondary, #555);
    font-style: italic;
    opacity: 0.85;
    line-height: 1.35;
}

/* =========================================================
   6. MÓDULO: MENÚ ESPECIAL
========================================================= */

.restaurant-menu-especial-wrapper { margin-top: 20px; }

.restaurant-menu-especial-select-wrap {
    text-align: center;
    margin-bottom: 20px;
}

.restaurant-menu-especial-select-label {
    font-weight: bold;
    font-size: 1.2rem;
    color: inherit;
    display: inline-block;
    margin-right: 10px;
}

/* Header y Contenidos Especiales */
.restaurant-menu-especial-header,
.restaurant-menu-especial-description {
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Ajuste específico: cabecera gris del MENÚ ESPECIAL en columna y compacta */
.restaurant-menu-especial-header.restaurant-menu-gray-header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-bottom: 2px;
	padding: 0.2em 1em;
}

.restaurant-menu-especial-title-wrap { display: inline-block; }
.restaurant-menu-especial-title-wrap.restaurant-menu-gray-title-wrap { display: block; }

.restaurant-menu-especial-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.85);
    color: #fff;
    margin-bottom: 6px;
}

.restaurant-menu-especial-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: inherit;
    text-transform: uppercase;
}

/* Precio dentro de zona especial (Compacto) */
.restaurant-menu-especial-price,
.restaurant-menu-gray-price.restaurant-menu-especial-price {
    font-weight: 700;
    font-size: 1.4rem;
    color: inherit;
    margin-top: 2px;
}

/* Notas / Aviso final (Compacto) */
.restaurant-menu-especial-notes {
    border-top: 3px solid rgba(0,0,0,0.08);
    font-size: 0.95rem;
    font-style: italic;
    color: var(--rm-font-tertiary, #666);
    opacity: 0.85;
    margin-top: 6px;
    padding-top: 4px;
    line-height: 1.1;
}

/* Descripción bajo etiqueta (Compacto) */
.restaurant-menu-especial-label-description,
.restaurant-menu-especial-description {
    font-size: 0.95em;
    opacity: 0.9;
    margin-top: 2px;
    margin-bottom: 15px;
    line-height: 1.1;
}

.restaurant-menu-especial-description {
    color: var(--rm-font-secondary, #666);
	font-weight: 700;
}

.restaurant-menu-especial-label-description p {
    margin: 0 !important;
    text-align: center !important;
	line-height: 0.6 !important;
	margin-bottom: 15px;
}

/* Lista de menús y contenedor de platos */
.restaurant-menu-especial-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.restaurant-menu-especial { margin-bottom: 30px; }
.restaurant-menu-especial-items { margin-top: 18px; }

.restaurant-menu-especial-debug-notice {
    margin-top: 8px;
    font-size: 0.75rem;
    color: #999;
    font-style: italic;
    text-align: center;
}

/* =========================================================
   7. UTILIDADES Y ESTADOS
========================================================= */

.restaurant-menu-especial-hidden { display: none; }
.restaurant-menu-especial-active { display: block; }

/* =========================================================
   8. PHOTOSWIPE
========================================================= */

.pswp__custom-caption {
    background: rgba(0, 0, 0, 0.75);
    font-size: 1.4rem;
    color: #E9F20F;
    width: calc(100% - 32px);
    max-width: 680px;
    padding: 4px 10px;
    border-radius: 4px;
    position: absolute;
    left: 50%;
    bottom: 120px;
    transform: translateX(-50%);
    text-align: center;
}

.pswp__custom-caption a {
    color: #fff;
    text-decoration: underline;
}

.hidden-caption-content { display: none; }

/* =========================================================
   9. RESPONSIVE
========================================================= */

@media (max-width: 768px) {
    .menu-section-image {
        margin: 70px 0 20px 0;
        height: 100px;
    }
    
    .restaurant-menu > .menu-section-image:first-child {
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .menu-item-inner {
        flex-direction: row;
        align-items: flex-start;
    }

    .restaurant-menu-especial-select-label {
        display: block;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .restaurant-menu-especial-select {
        width: 100%;
        box-sizing: border-box;
    }
}

/* =========================================================
   ICONOS SVG (sustituyen a los emojis)
   ---------------------------------------------------------
   Antes eran emojis (👨‍🍳 🆕 🌶️ 🏆 🍽️ ...). Como el tema desactiva
   los emojis de WordPress, se renderizaban como texto nativo y en
   muchos sistemas salían como "tofu" (▯). Los SVG se ven igual en
   todas partes y no dependen de ninguna fuente ni CDN.
   ========================================================= */

.rm-badge-svg {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

.rm-inline-svg {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    margin-right: 0.25em;
}

.rm-ph-svg {
    width: 40%;
    height: 40%;
    max-width: 64px;
    max-height: 64px;
    opacity: .35;
}

/* =========================================================
   SABORES  ([restaurant_menu_sabores])
   ---------------------------------------------------------
   Lista de sabores en columnas, debajo de los productos de un apartado.

   Se usa `columns` (columnas CSS) y no una rejilla: así los sabores se
   reparten en VERTICAL (A-B-C en la primera columna, D-E-F en la segunda),
   que es como se lee una lista. Con grid quedarían en horizontal (A-B en la
   primera fila), que se lee peor.
   ========================================================= */

.rl-sabores {
    /* Solo el margen inferior: `margin: 0 0 30px` pisaba el `margin: 0 auto`
       que .restaurant-menu usa para centrarse, y el bloque se iba a la
       izquierda mientras los productos quedaban centrados. */
    margin-bottom: 30px;
}

.rl-sabores__lista {
    /* En móvil SIEMPRE 2 columnas: con más, los nombres se apelotonan. */
    columns: 2;
    column-gap: 28px;

    margin: 0;
    padding: 0;
    list-style: none;
}

/* A partir de tablet, las columnas que diga el shortcode. */
@media (min-width: 600px) {
    .rl-sabores__lista {
        columns: var(--rl-sabores-cols, 3);
    }
}

/* CADA SABOR ES UNA UNIDAD.
   El nombre, la nota y los alérgenos van juntos, y una línea discontinua cierra
   el bloque por debajo. Sin ese cierre, la nota ("Normal o sin azúcar") quedaba
   visualmente más cerca del sabor SIGUIENTE que del suyo.

   Se usa exactamente el mismo separador que ya divide los productos de la carta
   (2px dashed, mismo color atenuado), para que el bloque de sabores no parezca
   de otro sitio. */
.rl-sabores__item {
    /* Impide que un sabor se parta entre dos columnas, dejando el nombre en una
       y su nota en la otra. */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;

    padding: 10px 0;

    /* Igual que el separador entre productos.
       El color-mix() lo atenúa, pero no todos los navegadores antiguos lo
       entienden: por eso se declara antes un color sólido de respaldo. Si
       color-mix falla, la línea se ve igual, solo algo más marcada. */
    border-bottom: 2px dashed var(--rm-font-secondary, #666);
    border-bottom-color: color-mix(in srgb, var(--rm-font-secondary, #666) 40%, transparent);
}

/* NOTA: aquí había un `:last-child { border-bottom: none; }` para quitar la
   línea al último sabor.
   Se ha eliminado porque con columnas CSS el "último" es solo el último de toda
   la LISTA, que cae en la última columna. Resultado: todas las columnas
   cerraban con su línea menos esa, que quedaba descolgada.
   Ahora todas cierran igual. */

.rl-sabores__nombre {
    display: block;
    font-weight: 600;
    line-height: 1.25;
}

.rl-sabores__nota {
    display: block;
    margin-top: 1px;
    font-size: 0.72em;
    line-height: 1.3;
    color: var(--rm-font-tertiary, #999);
}

/* Los alérgenos los pinta el mismo helper que la carta, así que llegan con la
   clase .alergenos y su tooltip ya montado. Solo se ajusta el margen: el de la
   carta (10px arriba) deja demasiado hueco dentro del bloque de un sabor. */
.rl-sabores__item .alergenos {
    margin: 5px 0 0;
}