/* Carta pública: la ficha que se abre al tocar un plato. Diseño nuevo (fase 4, paso 8b;
   boceto aprobado por Adolfo el 24 oct 2026): sube desde abajo, dónde está el plato, el
   nombre en letra de título, sus precios (botella y copa, si hay copa), los detalles, los
   alérgenos y un botón grande "Volver a la carta". */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: color-mix(in srgb, var(--tinta) 45%, transparent);
}

.modal-carta {
    position: relative;
    width: 100%;
    max-width: var(--ancho);
    max-height: 88vh;
    overflow: auto;
    background: var(--hoja);
    border-radius: 16px 16px 0 0;
}

.modal-close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 1;
    width: var(--boton);
    height: var(--boton);
    border: 0;
    border-radius: 50%;
    background: var(--hoja);
    color: var(--tinta-2);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.modal-img {
    display: block;
    width: 100%;
    max-height: 40vh;
    object-fit: cover;
    border-radius: 16px 16px 0 0;
}

.modal-content {
    padding: 1.25rem max(16px, env(safe-area-inset-right, 0px)) calc(1.5rem + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}

.modal-ruta {
    font-size: var(--t-detalle);
    color: var(--acento);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-right: 3rem;
}

.modal-name {
    font-family: var(--f-titulo);
    font-weight: 400;
    font-size: 1.625rem;
    line-height: 1.2;
    margin: .25rem 0 1rem;
    padding-right: 3rem;
    text-wrap: balance;
}

.modal-desc {
    font-size: var(--t-texto);
    color: var(--tinta);
}

.modal-desc p + p,
.modal-desc p + ul, .modal-desc p + ol,
.modal-desc ul + p, .modal-desc ol + p { margin-top: .5rem; }

.modal-alergenos {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .5rem 1rem;
    margin-top: 1rem;
}

.modal-alergenos dt { color: var(--tinta-2); }
.modal-alergenos dd { min-width: 0; }

/* Cada alérgeno con su dibujo junto al nombre (carta_iconos.js, 3 nov 2026); el dibujo, en el
   color de acento de la carta, que cambia solo de noche */
.alergenos-iconos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
}

.alergenos-iconos li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.icono-alergeno {
    flex: none;
    width: 26px;
    height: 26px;
    color: var(--acento);
}

.modal-share {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem;
}

.share-btn {
    min-height: var(--boton);
    padding: 0 1rem;
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: var(--hoja);
    font-size: var(--t-detalle);
    cursor: pointer;
}

/* «Enlace copiado» (o el enlace a la vista si no se pudo copiar), bajo «Compartir» */
.compartir-aviso {
    flex-basis: 100%;
    margin: 0;
    color: var(--tinta-2);
    overflow-wrap: anywhere;
}

.compartir-aviso:empty { display: none; }

.modal-volver {
    width: 100%;
    min-height: 48px;
    margin-top: 1.25rem;
    border: 0;
    border-radius: 10px;
    background: var(--tinta);
    color: var(--hoja);
    font-size: 1rem;
    cursor: pointer;
}

/* «Recomendado» en la ficha (fase 4, paso 8b, parte 4) */
.modal-recomendado {
    font-size: var(--t-detalle);
    font-weight: 700;
    color: var(--acento);
}