/* ═══════════════════════════════════════════════════════════════════════════
   TICKETU · Compra de ABONADOS (pases anuales)
   ───────────────────────────────────────────────────────────────────────────
   Se carga DESPUÉS de tickets.css: la página es la misma que la de boletos y
   aquí sólo va lo que la distingue visualmente (cabecera azul, distintivo
   "Abono" y la lista de promociones del modal).
   ═══════════════════════════════════════════════════════════════════════════ */

.is-abono {
    /* Acento propio del abono: azul, para no confundirlo con la venta de
       boletos (naranja) de un vistazo. */
    --abono: #2a74e3;
    --abono-dark: #1d5cba;
    --abono-light: #eff5fe;
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.header--abono {
    background: linear-gradient(90deg, var(--abono) 0%, var(--abono-dark) 100%);
}

.abono-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    margin-right: 8px;
    vertical-align: middle;
}

/* ── Distintivo en la lista de precios ────────────────────────────────────── */
.localidad-tag--abono {
    background: var(--abono-light);
    color: var(--abono-dark);
    border: 1px solid #c7ddf9;
}

/* ── Botón de compra ──────────────────────────────────────────────────────── */
.is-abono .btn-checkout {
    background: var(--abono);
}

    .is-abono .btn-checkout:hover:not(:disabled) {
        background: var(--abono-dark);
    }

/* ── Promociones visibles del abono (modal compartido) ────────────────────── */
.promo-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.promo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: var(--abono-light, #eff5fe);
    border: 1px solid #c7ddf9;
    border-radius: var(--radius);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: var(--transition);
}

    .promo-item:hover:not(:disabled) {
        border-color: #7fb0f0;
        transform: translateY(-1px);
    }

    .promo-item:disabled {
        opacity: 0.6;
        cursor: default;
    }

.promo-item-name {
    font-size: 12px;
    font-weight: 700;
    color: #14417f;
}

.promo-item-desc {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-light);
    white-space: nowrap;
}