/* Plano de butacas del checkout (eventos con selección de butacas) */

/* El modal se ensancha para que el plano respire */
.ymt-modal.ymt-has-seats .ymt-modal-dialog {
    width: min(1120px, calc(100vw - 32px));
}

/* Un <fieldset> crece por defecto hasta el ancho de su contenido: sin esto, el plano
   ampliado ensancharía el formulario entero en vez de desplazarse dentro de su recuadro. */
.ymt-seats-fs {
    min-width: 0;
    min-inline-size: 0;
}
.ymt-seats {
    min-width: 0;
    max-width: 100%;
}

.ymt-seats-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #444;
}
.ymt-seats-key {
    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
    line-height: 1.35;
}
.ymt-seats-key.is-off { opacity: 0.55; }
.ymt-seats-key i {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    border-radius: 4px;
}
.ymt-seats-key i.is-taken { background: #d9d9d9; }
.ymt-seats-key i.is-sel {
    background: var(--ink, #1a1a1a);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ink, #1a1a1a);
}

.ymt-seats-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ymt-seats-tab,
.ymt-seats-zoom button {
    border: 1px solid #dcdcdc;
    background: #fff;
    color: var(--ink, #1a1a1a);
    border-radius: 6px;
    padding: 8px 14px;
    font: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.ymt-seats-tab:hover,
.ymt-seats-zoom button:hover { border-color: var(--ink, #1a1a1a); }
.ymt-seats-tab.is-active {
    background: var(--ink, #1a1a1a);
    border-color: var(--ink, #1a1a1a);
    color: #fff;
}
.ymt-seats-tab.is-empty:not(.is-active) { color: #999; }
.ymt-seats-zoom {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}
.ymt-seats-zoom button {
    width: 36px;
    padding: 8px 0;
    font-size: 18px;
}

.ymt-seats-view {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fafafa;
    overflow: auto;
    max-height: min(62vh, 620px);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.ymt-seats-svg {
    display: block;
    height: auto;
    max-width: none;
}
/* Escenario en el verde de la web (--sage-deep del tema) */
.ymt-seats-stage { fill: var(--sage-deep, #646B4F); }
.ymt-seats-stage-txt {
    fill: #fff;
    font-size: 15px;
    letter-spacing: 0.25em;
    text-anchor: middle;
}
.ymt-seats-lbl {
    fill: #999;
    font-size: 12px;
    text-anchor: middle;
    pointer-events: none;
}

.ymt-seat { stroke: transparent; stroke-width: 2; }
.ymt-seat.is-free { cursor: pointer; }
.ymt-seat.is-free:hover { stroke: var(--ink, #1a1a1a); }
.ymt-seat.is-taken { fill: #d9d9d9; }
.ymt-seat.is-off {
    fill: #fff;
    stroke: #e3e3e3;
    stroke-width: 1;
}
.ymt-seat.is-sel {
    fill: var(--ink, #1a1a1a);
    stroke: #fff;
    cursor: pointer;
}

.ymt-seats-msg {
    min-height: 18px;
    margin: 8px 0 0;
    font-size: 13px;
    color: #c0392b;
}
.ymt-seats-msg:empty { min-height: 0; margin: 0; }

.ymt-seats-picked { margin-top: 12px; }
.ymt-seats-empty {
    margin: 0;
    font-size: 14px;
    color: #777;
}
.ymt-seats-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ymt-seats-list li {
    display: grid;
    grid-template-columns: 1fr auto 32px;
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}
.ymt-seats-line-name small {
    display: block;
    color: #777;
    font-size: 12px;
}
.ymt-seats-line-price {
    font-weight: 600;
    white-space: nowrap;
}
.ymt-seats-line-rm {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #f1f1f1;
    color: #555;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.ymt-seats-line-rm:hover {
    background: #c0392b;
    color: #fff;
}

.ymt-fs.ymt-invalid .ymt-seats-view { border-color: #c0392b; }

/* A zoom 1 el plano cabe entero y queda centrado en su recuadro */
.ymt-seats-svg { margin: 0 auto; }
.ymt-seats-zoom button:disabled {
    opacity: 0.35;
    cursor: default;
    border-color: #dcdcdc;
}

/* ---- Disposición: controles + plano ----
   Móvil: apilado (plantas y zoom en una fila, leyenda debajo, plano a todo el ancho).
   Escritorio: columna izquierda con plantas, zonas y zoom; el plano ocupa el resto. */
.ymt-seats-layout { min-width: 0; }
.ymt-seats-side {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}
.ymt-seats-side .ymt-seats-legend {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-bottom: 0;
}
.ymt-seats-view { min-width: 0; }

@media (min-width: 820px) {
    .ymt-seats-layout {
        display: grid;
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 18px;
        align-items: start;
    }
    .ymt-seats-side {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        margin-bottom: 0;
    }
    .ymt-seats-tabs {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .ymt-seats-tab {
        text-align: left;
        padding: 10px 14px;
    }
    .ymt-seats-side .ymt-seats-legend {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
    }
    .ymt-seats-view { max-height: min(72vh, 720px); }
}

/* ---- Plano conjunto: plantas, rótulos y atenuado ---- */
.ymt-seats-stage-txt { font-size: 26px; }
.ymt-seats-section {
    fill: #555;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-anchor: middle;
}
.ymt-floor { transition: opacity 0.25s ease; }
/* Con una planta activa, las demás se quedan al 20 %: se sigue viendo el teatro entero.
   Siguen siendo pulsables para cambiar de planta. */
.ymt-floor.is-dim {
    opacity: 0.2;
    cursor: pointer;
}
.ymt-floor.is-dim .ymt-seat { cursor: pointer; }
.ymt-floor.is-active .ymt-seats-section { fill: var(--ink, #1a1a1a); }
/* Vista general: se elige planta, no butaca */
.ymt-seats-svg.is-overview .ymt-floor { cursor: pointer; }
.ymt-seats-svg.is-overview .ymt-seat { cursor: pointer; }
.ymt-seats-svg.is-overview .ymt-seat.is-free:hover { stroke: transparent; }
.ymt-seats-svg.is-overview .ymt-floor:hover .ymt-seats-section { fill: var(--ink, #1a1a1a); }

/* Butacas sin zona asignada (no a la venta): gris claro con borde, para que la planta
   se siga viendo en el plano aunque no se venda. */
.ymt-seat.is-off {
    fill: #efefef;
    stroke: #cfcfcf;
}

/* Tu selección: butaca blanca con aro negro grueso. Con la paleta de marca (que incluye
   un azul muy oscuro) un relleno negro se confundía con una zona. */
.ymt-seat.is-sel {
    fill: #fff;
    stroke: var(--ink, #1a1a1a);
    stroke-width: 4;
}
.ymt-seats-key i.is-sel {
    background: #fff;
    box-shadow: inset 0 0 0 3px var(--ink, #1a1a1a);
}

/* Con butacas no se repite el nombre del evento (ya está en la ficha de detrás): así el
   plano sube y cabe más a la vista. */
.ymt-modal.ymt-has-seats .ymt-modal-event { display: none; }
.ymt-modal.ymt-has-seats .ymt-modal-title { margin-bottom: 14px; }

/* Cuenta atrás de la retención de butacas */
.ymt-seats-timer {
    margin: 12px 0 0;
    padding: 9px 12px;
    border-radius: 6px;
    background: #f4f1ea;
    font-size: 13px;
    color: #444;
}
.ymt-seats-timer b { font-variant-numeric: tabular-nums; }
.ymt-seats-timer.is-ending {
    background: #fdecea;
    color: #c0392b;
}
.ymt-seat.is-wait { opacity: 0.55; }

/* ---- Botón «Continuar»: flota abajo a la derecha de la ventana mientras se eligen
   butacas y se queda en su sitio (justo antes de «Tus datos») al llegar allí. ---- */
.ymt-seats-cta-wrap {
    position: sticky;
    bottom: 14px;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    margin: -6px 0 22px;
    pointer-events: none;          /* el hueco a su izquierda no tapa el plano */
}
.ymt-seats-cta-wrap[hidden] { display: none; }
.ymt-seats-cta {
    pointer-events: auto;
    padding: 14px 22px;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}
@media (max-width: 819px) {
    .ymt-seats-cta { width: 100%; }
}

/* Planta seleccionada: verde corporativo (--sage-deep del tema) */
.ymt-seats-tab.is-active {
    background: var(--sage-deep, #646B4F);
    border-color: var(--sage-deep, #646B4F);
    color: #fff;
}
.ymt-seats-tab:hover,
.ymt-seats-zoom button:hover:not(:disabled) { border-color: var(--sage-deep, #646B4F); }

/* «Continuar» en la columna izquierda (escritorio), bajo el zoom. En móvil no hay
   columna: ahí se usa el flotante de abajo. */
.ymt-seats-cta-side { display: none; }
@media (min-width: 820px) {
    .ymt-seats-cta-wrap { display: none; }
    .ymt-seats-cta-side {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
        padding: 14px 12px;
        box-shadow: none;
    }
    .ymt-seats-cta-side[hidden] { display: none; }
    .ymt-seats-cta-side small {
        font-size: 12px;
        letter-spacing: 0.02em;
        text-transform: none;
        opacity: 0.9;
    }
}

/* Butaca enfocada con el teclado */
.ymt-seats-svg .ymt-seat:focus { outline: none; }
.ymt-seats-svg .ymt-seat:focus-visible { outline: 3px solid #111; outline-offset: 2px; }

/* Moverse por el plano arrastrando (ratón) o deslizando (dedo) */
.ymt-seats-view { cursor: grab; touch-action: pan-x pan-y; scrollbar-width: thin; }
.ymt-seats-view.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.ymt-seats-view.is-dragging .ymt-seat { pointer-events: none; }
.ymt-seats-view .ymt-seat.is-free, .ymt-seats-view .ymt-seat.is-sel { cursor: pointer; }
.ymt-seats-view::-webkit-scrollbar { width: 8px; height: 8px; }
.ymt-seats-view::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .25); border-radius: 4px; }

/* =====================================================================
   MÓVIL (menos de 820 px)
   Todo en una columna y sin desperdiciar alto: las plantas y las zonas van en una
   fila cada una que se desliza con el dedo, los botones de zoom flotan sobre el
   plano y el plano se queda con casi toda la pantalla.
   ===================================================================== */
@media (max-width: 819px) {
    .ymt-modal.ymt-has-seats .ymt-modal-dialog { width: calc(100vw - 16px); }

    .ymt-seats-layout { position: relative; }
    .ymt-seats-side {
        display: block;
        margin-bottom: 8px;
    }

    /* Plantas: una sola fila deslizable, botones del mismo alto */
    .ymt-seats-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        margin: 0 -2px 8px;
        padding: 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .ymt-seats-tabs::-webkit-scrollbar { display: none; }
    .ymt-seats-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 10px 14px;
        font-size: 14px;
    }

    /* Zonas y precios: una rejilla de fichas IGUALES (dos por fila), cada una con el
       color, el nombre y el precio en el mismo sitio. Debajo, en una línea aparte,
       la clave de «ocupada» y «tu selección». */
    .ymt-seats-side .ymt-seats-legend,
    .ymt-seats-legend {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        align-items: stretch;
        margin: 0;
        font-size: 12px;
    }
    .ymt-seats-key--zone {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
        min-height: 66px;          /* todas las fichas igual de altas, lleven o no aclaración */
        box-sizing: border-box;
        padding: 7px 10px;
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        background: #fff;
        line-height: 1.25;
    }
    .ymt-seats-key--zone i {
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        margin-top: 0;
        border-radius: 4px;
    }
    .ymt-seats-key-txt {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .ymt-seats-key-txt b {
        font-weight: 700;
        color: #222;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ymt-seats-key-price {
        font-size: 13px;
        color: #222;
    }
    .ymt-seats-key-note {
        font-size: 10.5px;
        color: #777;
        line-height: 1.25;
    }
    /* Una sola zona (planta con un único precio): que ocupe todo el ancho */
    .ymt-seats-key--zone:first-child:nth-last-child(3) { grid-column: 1 / -1; }
    .ymt-seats-key--state {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 0;
        padding: 4px 0 2px;
        color: #666;
        font-size: 11.5px;
    }
    .ymt-seats-key--state i {
        flex: 0 0 12px;
        width: 12px;
        height: 12px;
        margin-top: 0;
        border-radius: 3px;
    }

    /* Zoom: flotando en la esquina del plano, grande para el dedo */
    .ymt-seats-zoom {
        position: absolute;
        right: 8px;
        bottom: 8px;
        z-index: 3;
        flex-direction: column;
        gap: 6px;
    }
    .ymt-seats-zoom button {
        width: 40px;
        height: 40px;
        padding: 0;
        font-size: 20px;
        border-color: #cfcfcf;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    }

    /* El plano, con casi toda la pantalla */
    .ymt-seats-view {
        max-height: 62vh;
        min-height: 300px;
    }
    .ymt-seats-empty { font-size: 13px; }
    .ymt-seats-list li { font-size: 13px; gap: 8px; }
    .ymt-seats-cta-side { display: none; }
}

@media (max-width: 819px) {
    /* Botón «Continuar» flotante: una línea, sin el espaciado de titular */
    .ymt-seats-cta-wrap .ymt-seats-cta {
        font-size: 13px;
        letter-spacing: 0.06em;
        padding: 14px 12px;
        white-space: nowrap;
    }
    /* Hueco para que el botón flotante no tape la primera butaca de la lista */
    .ymt-seats-picked { padding-bottom: 8px; }
}

/* Leyenda (todas las pantallas): precio y aclaración seguidos del nombre */
.ymt-seats-key-note { font-size: inherit; }
@media (max-width: 819px) {
    .ymt-seats-key-note { font-size: 10.5px; }
    .ymt-seats-key-price, .ymt-seats-key-note { white-space: normal; }
}