/* ============================================================
   EL PASE — checkout propio de PANACA
   ------------------------------------------------------------
   La idea: comprar aqui no se parece a una tienda en linea, se
   parece a que te den tu pase. Por eso el pedido NO es un
   "resumen" arrinconado a la derecha —esa es la forma de todas
   las tiendas— sino una BOLETA a lo ancho, con su talon, su
   troquel y su total en grande. Debajo, la ficha en una sola
   columna. El total viaja abajo, con el comprador.

   Reglas de la casa que aqui se respetan al pie de la letra:

   · Poleno SOLO trae el peso 500. Pedir 700 hace que el navegador
     invente la negrilla engordando los trazos y el texto se
     vuelve ilegible. Ningun titular lleva otro peso.
   · Nada de border-radius en las piezas grandes: las esquinas de
     PANACA son cortes irregulares (--btn-path-1..4) y bordes
     rasgados (--clip-zigzag-*), no redondeos.
   · La paleta sale de las variables de panaca.css. Cero hex
     sueltos salvo transparencias.
   ============================================================ */

.pase {
    background: var(--color-cream);
    min-height: 70vh;
    /* Hueco para la barra de campo, que es fija abajo. */
    padding-bottom: calc(var(--spacing-xl) + 4.5rem);
}

/* ─────────────── Portada ─────────────── */

.pase__portada {
    background: var(--color-green-deep);
    color: var(--color-white);
    padding: var(--spacing-lg) var(--spacing-sm) calc(var(--spacing-lg) + 1.5rem);
    /* La banda no termina en una linea recta, termina rasgada: es la firma del sitio. */
    clip-path: var(--clip-zigzag-bottom);
}

.pase__portada-in {
    max-width: 900px;
    margin: 0 auto;
}

.pase__migas {
    font-family: var(--font-body);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    opacity: 0.75;
    margin: 0 0 var(--spacing-xs);
}

.pase__migas a { color: inherit; text-decoration: none; }
.pase__migas a:hover { text-decoration: underline; }
.pase__migas span { margin: 0 0.45rem; }

.pase__titulo {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(2.1rem, 5.5vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}

.pase__bajada {
    font-family: var(--font-body);
    font-size: 1rem;
    max-width: 46ch;
    opacity: 0.9;
    margin: 0;
}

/* ─────────────── Cuerpo ─────────────── */

.pase__cuerpo {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-sm) 0;
}

/* ═══════════════ LA BOLETA ═══════════════ */

.boleta {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    background: var(--color-white);
    box-shadow: var(--shadow-md);
    /* Corte irregular: los cuatro lados quedan levemente descuadrados, como
       una boleta troquelada a mano. */
    clip-path: var(--btn-path-1);
    margin-bottom: var(--spacing-lg);
}

/* El talon: la franja que se queda el portero. */
.boleta__talon {
    background: var(--color-red);
    display: flex;
    align-items: center;
    justify-content: center;
}

.boleta__talon-texto {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.35rem;
    letter-spacing: 0.22em;
    color: var(--color-white);
    /* Vertical, como en las boletas de verdad. */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-transform: uppercase;
}

.boleta__cuerpo {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg);
    min-width: 0;
}

.boleta__encabezado {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-sm);
}

.boleta__titulo {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.9rem;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-green-deep);
    margin: 0;
}

.boleta__folio {
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
    text-transform: uppercase;
    margin: 0;
}

.boleta__lineas {
    list-style: none;
    margin: 0;
    padding: 0;
}

.boleta__linea {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--color-gray);
}

.boleta__linea:last-child { border-bottom: 0; }

/* ── Subir, bajar y quitar: la boleta se toca como un carrito ──
   El control va junto —menos, cantidad, mas— para que se lea como una sola
   pieza y no como tres cosas sueltas al lado del nombre. */
.boleta__pasos {
    display: inline-flex;
    align-items: stretch;
    gap: 0.25rem;
}

.boleta__paso {
    width: 2rem;
    height: 2.3rem;
    flex-shrink: 0;
    background: var(--color-green-deep);
    color: var(--color-white);
    border: 0;
    font-family: var(--font-body-bold);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    clip-path: var(--btn-path-4);
    transition: background var(--transition-fast);
}

.boleta__paso:hover:not(:disabled) { background: var(--color-red); }
.boleta__paso:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 2px; }

/* Con una sola unidad no se baja mas: para eso esta el aspa. Se deja a la vista
   —apagado— porque esconderlo movería el resto de la fila a cada toque. */
.boleta__paso:disabled {
    background: var(--color-gray);
    color: var(--color-text-muted);
    cursor: default;
}

/* La cantidad en un cuadro descuadrado, no en un circulito. */
.boleta__cantidad {
    display: block;
    min-width: 2.3rem;
    padding: 0 0.35rem;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 2.3rem;
    text-align: center;
    height: 2.3rem;
    background: var(--color-yellow);
    color: var(--color-green-deep);
    font-variant-numeric: tabular-nums;
    clip-path: var(--btn-path-3);
}

/* Boton de verdad, con area de toque suficiente. Un aspa suelta pegada al precio
   es donde se borra una linea por error. */
.boleta__quitar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(2, 61, 27, 0.2);
    border-radius: 50%;
    color: var(--color-text-light);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.boleta__quitar:hover,
.boleta__quitar:focus-visible {
    background: var(--color-red);
    border-color: var(--color-red);
    color: var(--color-white);
}

.boleta__cuenta-y-vaciar {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
}

.boleta__vaciar {
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-decoration: underline;
    cursor: pointer;
}

.boleta__vaciar:hover { color: var(--color-red); }

.boleta__nombre {
    font-family: var(--font-body);
    font-size: 0.98rem;
    color: var(--color-text);
    min-width: 0;
}

.boleta__unitario {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.boleta__importe {
    font-family: var(--font-body-bold);
    font-size: 1rem;
    white-space: nowrap;
}

/* ─────────── El cumpleaños ───────────
   Sus lineas no llevan menos, mas ni aspa —salen de cuantas personas son—, pero guardan el
   hueco del aspa para que los importes sigan en columna con el resto. El recuadro dice de
   quien es la fiesta y deja cambiarla o quitarla entera. */

.boleta__quitar-hueco {
    width: 2rem;
    height: 2rem;
}

/* ─────────── Lo que no se vende para esa fecha ───────────
   El Pasaporte CAMPO para un dia sin funcion de Travesia: la linea se queda, apagada y con su
   motivo debajo, para que el comprador entienda por que el total no la incluye y que hacer. */

.boleta__aviso-linea {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--color-red);
}

.boleta__aviso-linea[hidden] { display: none; }

.boleta__linea--fuera .boleta__nombre-texto,
.boleta__linea--fuera .boleta__unitario {
    color: var(--color-text-muted);
}

.boleta__linea--fuera .boleta__importe {
    color: var(--color-red);
    font-size: 0.85rem;
}

/* Sin menos ni mas, la cantidad queda donde estaria entre los dos: asi los nombres y las
   cantidades del cumpleaños caen en la misma columna que los de las demas lineas. */
.boleta__linea--plan .boleta__pasos {
    padding: 0 calc(2rem + 0.25rem);
}

.boleta__cumple {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem var(--spacing-sm);
    margin-top: var(--spacing-sm);
    padding: 0.7rem 0.85rem;
    background: var(--color-cream);
    border-left: 4px solid var(--color-yellow);
}

.boleta__cumple[hidden] { display: none; }

.boleta__cumple-texto {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--color-green-deep);
    min-width: 0;
    overflow-wrap: anywhere;
}

.boleta__cumple-icono { font-size: 1.1rem; }

.boleta__cumple-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.boleta__cumple-boton {
    padding: 0.4rem 0.8rem;
    border: 0;
    background: var(--color-green-deep);
    color: var(--color-white);
    font-family: var(--font-body-bold);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    clip-path: var(--btn-path-4);
    transition: background var(--transition-fast);
}

.boleta__cumple-boton:hover { background: var(--color-red); }
.boleta__cumple-boton:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 2px; }

.boleta__cumple-boton--quitar {
    background: transparent;
    color: var(--color-text-muted);
    text-decoration: underline;
    clip-path: none;
}

.boleta__cumple-boton--quitar:hover {
    background: transparent;
    color: var(--color-red);
}

.boleta__codigo[hidden] { display: none; }

/* El troquel: por donde se rompe. */
.boleta__troquel {
    position: relative;
    height: 1px;
    margin: var(--spacing-md) 0;
    background-image: linear-gradient(90deg, var(--color-text-muted) 0 8px, transparent 8px 16px);
    background-size: 16px 1px;
    background-repeat: repeat-x;
}

.boleta__ojal {
    position: absolute;
    top: 50%;
    width: 1.4rem;
    height: 1.4rem;
    background: var(--color-cream);
    transform: translateY(-50%);
}

.boleta__ojal--izq { left: calc(var(--spacing-md) * -1 - 0.7rem); }
.boleta__ojal--der { right: calc(var(--spacing-md) * -1 - 0.7rem); }

/* ─────────── El código de convenio ───────────
   Va dentro de la boleta, pegado a las cuentas: es donde se mira el total y donde quien
   tiene un código lo busca. Discreto a propósito —una etiqueta pequeña y un campo— para
   que quien NO tiene código no se pregunte si le falta algo por hacer. */

.boleta__codigo {
    margin-bottom: var(--spacing-md);
}

.boleta__codigo-etiqueta {
    display: block;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 0.35rem;
}

.boleta__codigo-fila {
    display: flex;
    gap: 0.4rem;
}

.boleta__codigo-campo {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--color-gray);
    background: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.95rem;

    /* Los códigos son en mayúsculas y sin espacios: se ven como lo que son. */
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.boleta__codigo-campo:focus-visible {
    outline: 3px solid var(--color-yellow);
    outline-offset: 1px;
}

/* Mismo corte irregular que los botones de la boleta: aquí tampoco hay esquinas
   redondeadas, que es la regla de la casa. */
.boleta__codigo-boton {
    flex: 0 0 auto;
    padding: 0.6rem 1.2rem;
    border: 0;
    background: var(--color-green-deep);
    color: var(--color-white);
    font-family: var(--font-body-bold);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    clip-path: var(--btn-path-4);
    transition: background var(--transition-fast);
}

.boleta__codigo-boton:hover { background: var(--color-red); }
.boleta__codigo-boton:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 2px; }

.boleta__codigo-aviso {
    margin: 0.45rem 0 0;
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.45;
}

.boleta__codigo-aviso--bien { color: var(--color-green-dark); }
.boleta__codigo-aviso--mal  { color: var(--color-red); }

.boleta__cuentas {
    display: grid;
    gap: 0.4rem;
}

.boleta__cuenta {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text-light);
}

.boleta__cuenta--ahorro { color: var(--color-green); }

.boleta__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-top: 0.6rem;
    padding-top: 0.8rem;
    border-top: 3px solid var(--color-green-deep);
}

.boleta__total-etiqueta {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-green-deep);
}

.boleta__total-cifra {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(1.9rem, 6vw, 2.8rem);
    line-height: 1;
    color: var(--color-red);
}

/* El sello de ahorro: un trozo de cinta pegado torcido. */
.boleta__sello {
    display: inline-block;
    margin: var(--spacing-sm) 0 0;
    padding: 0.35rem 0.9rem;
    background: var(--color-yellow-bright);
    color: var(--color-green-deep);
    font-family: var(--font-body);
    font-size: 0.85rem;
    transform: rotate(-1.4deg);
    clip-path: var(--btn-path-2);
}

.boleta__sello strong { font-family: var(--font-body-bold); }

/* ═══════════════ LA FICHA ═══════════════ */

.ficha__bloque { margin-bottom: var(--spacing-lg); }
.ficha__bloque--suelto { margin-bottom: var(--spacing-md); }

/* La cinta: el titulo de seccion va sobre una banda de color cortada
   irregular, no sobre un numerito dentro de un circulo. */
.cinta {
    display: inline-block;
    margin: 0 0 -0.6rem;
    padding: 0.5rem 1.6rem 0.7rem 1.1rem;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.35rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-white);
    position: relative;
    z-index: 2;
    clip-path: var(--btn-path-2);
}

.cinta--verde { background: var(--color-green-dark); }
.cinta--palma { background: var(--color-palma-dark); }
.cinta--mar   { background: var(--color-mar-dark); }

.ficha__caja {
    background: var(--color-white);
    padding: calc(var(--spacing-md) + 0.4rem) var(--spacing-md) var(--spacing-md);
    box-shadow: var(--shadow-sm);
    clip-path: var(--btn-path-4);
}

.rejilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-sm);
}

.campo { display: flex; flex-direction: column; min-width: 0; }
.campo--fecha { max-width: 22rem; }
.campo--corto { max-width: 100%; }

.campo label {
    font-family: var(--font-body-bold);
    font-size: 0.83rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-green-deep);
    margin-bottom: 0.35rem;
}

.campo input,
.campo select {
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.7rem 0.85rem;
    border: 2px solid var(--color-gray);
    background: var(--color-white);
    color: var(--color-text);
    transition: border-color var(--transition-fast);
    /* Sin redondeo: el campo tambien es recto y seco. */
    border-radius: 0;
    width: 100%;
}

.campo input:focus,
.campo select:focus {
    outline: none;
    border-color: var(--color-green);
}

.campo input[aria-invalid="true"] { border-color: var(--color-red); }

.campo__ayuda {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin: 0.35rem 0 0;
}

.campo__error {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-red-dark);
    margin: 0.35rem 0 0;
}

/* ─────────────── Formas de pago ─────────────── */

/* ─────────────── Las formas de pago: se MUESTRAN, no se eligen ───────────────
   Lo que se elige es la pasarela, no la forma de pago. Estas filas estan aqui para
   que se vea con que se puede pagar dentro de cada grupo antes de escogerlo, asi
   que no llevan cursor, ni hover, ni marca de elegido: todo eso subio a .pasarela.
   Ofrecer aspecto de boton a algo que no se puede pulsar es mentirle al que mira. */

.medios { display: grid; gap: 0.35rem; }

.medios__titulo {
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.1rem;
}

.medio {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
}

.medio__icono svg {
    width: 1.6rem;
    height: 1.6rem;
    fill: var(--color-green-deep);
    opacity: 0.85;
}

.medio__texto { display: flex; flex-direction: column; min-width: 0; }

.medio__texto strong {
    font-family: var(--font-body-bold);
    font-size: 0.9rem;
}

.medio__texto small {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--color-text-light);
}

/* ─────────────── Billeteras agrupadas con su medio ───────────────
   Nequi, Daviplata, RappiPay… se pagan POR PSE, así que van en el mismo recuadro que el
   medio, como insignias —las mismas que ya muestra el pie del sitio—. Siguen la regla de
   arriba: se muestran, no se eligen, y no tienen hover ni marca propia. Pulsarlas
   selecciona la pasarela, que es justo lo que significa pagar con ellas.
   El fondo blanco las separa del crema que toma el recuadro de la pasarela elegida. */

.medio--agrupado {
    align-items: start;
    padding: 0.65rem 0.75rem;
    background: var(--color-white);
    border: 1px solid var(--color-cream-dark);
    border-radius: 10px;
}

.medio--agrupado .medio__icono { padding-top: 0.1rem; }

.medio__marcas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.medio__marcas-titulo {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-right: 0.15rem;
}

.medio__marca {
    font-family: var(--font-body-bold);
    font-size: 0.78rem;
    line-height: 1;
    white-space: nowrap;
    color: var(--color-green-deep);
    background: var(--color-cream);
    border: 1px solid var(--color-cream-dark);
    border-radius: 999px;
    padding: 0.3rem 0.62rem;
}

.medio__texto .medio__marcas-ayuda { margin-top: 0.35rem; }

.medios__nota {
    font-family: var(--font-body);
    font-size: 0.83rem;
    color: var(--color-text-light);
    margin: var(--spacing-sm) 0 0;
}

.medios__nota strong { color: var(--color-green-deep); }

/* ─────────────── Términos y avisos ─────────────── */

.acepta {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.45;
    cursor: pointer;
}

.acepta input {
    margin-top: 0.2rem;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--color-green-dark);
    flex: 0 0 auto;
}

.acepta a { color: var(--color-green-dark); }

.avisos {
    background: var(--color-red);
    color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-body);
    font-size: 0.92rem;
    clip-path: var(--btn-path-3);
}

.avisos ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }

/* ─────────────── Vacío / cerrado ─────────────── */

.pase__vacio {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-sm);
    text-align: center;
}

.pase__vacio-caja {
    background: var(--color-white);
    padding: var(--spacing-lg) var(--spacing-md);
    box-shadow: var(--shadow-sm);
    clip-path: var(--btn-path-1);
}

.pase__vacio-caja h2 {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.8rem;
    text-transform: uppercase;
    color: var(--color-green-deep);
    margin: 0 0 0.6rem;
}

.pase__vacio-caja p {
    font-family: var(--font-body);
    color: var(--color-text-light);
    max-width: 48ch;
    margin: 0 auto var(--spacing-md);
}

.pase__vacio-caja--aviso { border-top: 6px solid var(--color-yellow); }

/* ─────────────── Botones ─────────────── */

.pase-btn {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.85rem 2.2rem;
    border: 0;
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast);
    clip-path: var(--btn-path-1);
}

.pase-btn--rojo {
    background: var(--color-red);
    color: var(--color-white);
}

.pase-btn--rojo:hover { background: var(--color-red-dark); transform: translateY(-2px); }

.pase-btn--grande { font-size: 1.15rem; padding: 0.95rem 2.6rem; }

/*  La secundaria: los botones del pie de la confirmación, que no compiten con el principal. */
.pase-btn--claro {
    background: var(--color-white);
    color: var(--color-green-deep);
    clip-path: var(--btn-path-1);
}

.pase-btn--claro:hover { background: var(--color-cream); transform: translateY(-2px); }

/*  El botón de descargar el voucher: es lo único que se lleva quien pagó, así que respira. */
.pago-descarga { margin: 1.4rem 0 1rem; }

.pase-btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }

/* ─────────────── Barra de campo ─────────────── */

.barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--color-green-deep);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
}

.barra__in {
    max-width: 900px;
    margin: 0 auto;
    padding: 0.7rem var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.barra__cuenta { display: flex; flex-direction: column; min-width: 0; }

.barra__etiqueta {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-yellow-bright);
}

.barra__cifra {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.1;
    color: var(--color-white);
}

/*  El boton «volver arriba» del armazon es fijo abajo a la IZQUIERDA (panaca.css,
    .back-top-left) y justo ahi, abajo a la izquierda, va el TOTAL A PAGAR. En movil
    la flecha se montaba encima y tapaba el precio: el comprador no veia cuanto iba a
    pagar en el momento de decidirlo.

    Se sube por encima de la barra. La altura NO se escribe a mano porque la barra
    crece con el tamano de letra del telefono, con un total largo y con el area segura
    del iPhone; la mide el JS y la publica en --barra-alto. El valor de aqui es solo el
    respaldo para el instante antes de que el JS corra, y para cuando no hay barra.

    El z-index baja por debajo de la barra (40) a proposito: si algun dia la medida
    falla, la flecha se esconde detras y el precio se sigue leyendo. Entre tapar el
    precio y perder un boton de comodidad, se pierde el boton.                        */
.back-top-left {
    bottom: calc(var(--barra-alto, 0px) + 16px);
    z-index: 39;
}

/* ─────────────── Pantalla de despedida ─────────────── */

.despedida {
    background: var(--color-green-deep);
    color: var(--color-white);
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl) var(--spacing-sm);
    text-align: center;
}

.despedida__caja { max-width: 34rem; }

.despedida__titulo {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(1.9rem, 5vw, 2.8rem);
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0 0 0.8rem;
}

.despedida__texto {
    font-family: var(--font-body);
    opacity: 0.85;
    margin: 0 0 var(--spacing-md);
}

/* El importe que va a la pasarela. Se lee de un vistazo porque es lo unico de esta
   pantalla que el comprador todavia puede querer discutir. */
.despedida__total {
    font-family: var(--font-body);
    font-size: 1.05rem;
    margin: 0 0 var(--spacing-md);
}

.despedida__total strong {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-yellow-bright);
}

/* El aviso de que el servidor impuso su tarifa. Va en amarillo y con borde porque no es
   decoracion: es la unica diferencia entre ver el precio corregido y enterarse en la
   pasarela. Cuando aparece, la pagina deja de irse sola. */
.despedida__correccion {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.45;
    text-align: left;
    border: 1px solid var(--color-yellow-bright);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    margin: 0 0 var(--spacing-md);
}

.despedida__correccion a {
    color: var(--color-yellow-bright);
    text-decoration: underline;
    white-space: nowrap;
}

/* Tres portones que se abren por turnos mientras la pasarela responde. */
.despedida__portones {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.despedida__porton {
    width: 1.1rem;
    height: 2.6rem;
    background: var(--color-yellow-bright);
    animation: paseLatido 1.1s ease-in-out infinite;
}

.despedida__porton:nth-child(2) { animation-delay: 0.18s; }
.despedida__porton:nth-child(3) { animation-delay: 0.36s; }

@keyframes paseLatido {
    0%, 100% { transform: scaleY(0.45); opacity: 0.5; }
    50%      { transform: scaleY(1);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .despedida__porton { animation: none; opacity: 0.85; }
    .pase-btn:hover { transform: none; }
}

.despedida__aviso {
    font-family: var(--font-body);
    font-size: 0.85rem;
    opacity: 0.7;
}

.despedida__aviso button {
    background: none;
    border: 0;
    color: var(--color-yellow-bright);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

/* ─────────────── Teléfono ─────────────── */

@media (max-width: 640px) {
    .boleta {
        grid-template-columns: 2.6rem minmax(0, 1fr);
    }

    .boleta__talon-texto { font-size: 1rem; letter-spacing: 0.16em; }
    .boleta__cuerpo { padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md); }

    /* En el telefono las cuatro columnas dejaban el nombre en 113 px —medido—, o sea
       partido en dos lineas. El nombre se queda con el ancho entero y los controles
       bajan a su propia fila, que ademas es donde el pulgar los alcanza. */
    .boleta__linea {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "nombre quitar"
            "pasos  importe";
        gap: 0.5rem var(--spacing-xs);
    }

    .boleta__nombre { grid-area: nombre; }
    .boleta__quitar { grid-area: quitar; align-self: start; }

    .boleta__pasos {
        grid-area: pasos;
        justify-self: start;
    }

    .boleta__importe {
        grid-area: importe;
        align-self: center;
        text-align: right;
    }

    .boleta__ojal--izq { left: calc(var(--spacing-sm) * -1 - 0.7rem); }
    .boleta__ojal--der { right: calc(var(--spacing-sm) * -1 - 0.7rem); }

    .rejilla { grid-template-columns: minmax(0, 1fr); }

    .cinta { font-size: 1.1rem; padding: 0.45rem 1.3rem 0.6rem 0.9rem; }

    .barra__in { padding: 0.6rem var(--spacing-xs); }
    .barra__cifra { font-size: 1.3rem; }
    .pase-btn--grande { font-size: 1rem; padding: 0.8rem 1.6rem; }
}

/* ═══════════════ LA VUELTA ═══════════════
   La pantalla a la que regresa el comprador desde la pasarela. Existia sin una sola
   regla de estilo —se veia como HTML crudo— porque nunca hubo pasarela que la
   estrenara. Reusa el lenguaje de la boleta: cortes irregulares, Poleno y la paleta. */

.pago-respuesta {
    background: var(--color-cream);
    min-height: 70vh;
    padding: var(--spacing-xl) var(--spacing-sm);
}

.pago-tarjeta {
    max-width: 640px;
    margin: 0 auto;
    background: var(--color-white);
    padding: var(--spacing-lg) var(--spacing-md);
    box-shadow: var(--shadow-md);
    text-align: center;
    clip-path: var(--btn-path-1);
}

.pago-icono { font-size: 3rem; line-height: 1; display: block; margin-bottom: var(--spacing-xs); }

.pago-titulo {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(1.7rem, 4.5vw, 2.4rem);
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--color-green-deep);
    margin: 0 0 var(--spacing-xs);
}

.pago-texto {
    font-family: var(--font-body);
    color: var(--color-text-light);
    max-width: 46ch;
    margin: 0 auto var(--spacing-xs);
}

/* Mientras el banco confirma. El pulso dice "seguimos preguntando" sin prometer nada. */
.pago-espera {
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-green);
    margin: var(--spacing-sm) 0 0;
    animation: paseLatido 1.6s ease-in-out infinite;
}

.pago-aviso {
    background: var(--color-yellow-bright);
    color: var(--color-green-deep);
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
    margin: var(--spacing-sm) 0 0;
    clip-path: var(--btn-path-2);
}

.pago-detalle {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 3px solid var(--color-green-deep);
    text-align: left;
}

.pago-datos { display: grid; gap: 0.5rem; margin: 0; }

.pago-datos > div {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
    font-family: var(--font-body);
    font-size: 0.92rem;
}

.pago-datos dt { color: var(--color-text-light); margin: 0; }
.pago-datos dd { margin: 0; text-align: right; }

.pago-lineas { list-style: none; margin: var(--spacing-sm) 0 0; padding: 0; }

.pago-lineas li {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-gray);
    font-family: var(--font-body);
    font-size: 0.92rem;
}

.pago-lineas li:last-child { border-bottom: 0; }

/*  ── Tus últimas compras (7.1 de la guía de AvalPay) ────────────────────────────

    Una rejilla de tres columnas —referencia, estado, valor— que en el teléfono se
    apila, porque una referencia de 23 caracteres y un valor no caben en 360 px.     */
.pago-historico {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-gray);
}

.pago-historico__titulo {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-green-deep);
    margin: 0 0 var(--spacing-xs);
}

.pago-historico__lista { list-style: none; margin: 0; padding: 0; }

.pago-historico__fila {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: 0.35rem var(--spacing-sm);
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-gray);
    font-family: var(--font-body);
    font-size: 0.88rem;
}

.pago-historico__fila:last-child { border-bottom: 0; }

.pago-historico__ref { font-weight: 600; word-break: break-all; }
.pago-historico__fecha { display: block; font-weight: 400; color: var(--color-text-light); }
.pago-historico__estado { white-space: nowrap; color: var(--color-text-light); }
.pago-historico__valor { white-space: nowrap; font-weight: 600; }

/*  La autorización ocupa la fila entera, debajo: es un dato de reclamo, no de lectura. */
.pago-historico__aut {
    grid-column: 1 / -1;
    color: var(--color-text-light);
    font-size: 0.78rem;
}

.pago-historico__nota {
    margin: var(--spacing-xs) 0 0;
    font-size: 0.78rem;
    color: var(--color-text-light);
}

@media (max-width: 480px) {
    .pago-historico__fila { grid-template-columns: 1fr auto; }
    .pago-historico__valor { grid-column: 1 / -1; }
}

.pago-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    justify-content: center;
    margin-top: var(--spacing-md);
}

.pago-ayuda {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin: var(--spacing-sm) 0 0;
}

/* ═══════════════ PASARELAS Y SUGERIDOS ═══════════════
   Dos bloques nuevos del pase: quien cobra (agrupado, porque el comprador tiene
   derecho a saber en manos de quien queda) y que mas le podemos proponer antes de
   pagar. Van al final del archivo a proposito: aqui las reglas que se repiten
   ganan, y estas son las ultimas en llegar. */

/* ─────────────── Quién cobra ─────────────── */

/* Cada pasarela es UNA tarjeta que se elige entera: el nombre de quien cobra arriba y
   debajo, agrupado, con que se puede pagar ahi. La caja completa es el boton —se pulsa
   en cualquier parte, tambien sobre las formas de pago— porque lo que se esta diciendo
   al pulsar es "quiero pagar por este grupo", no "quiero esta fila". */
.pasarela { display: block; cursor: pointer; }
.pasarela + .pasarela { margin-top: var(--spacing-xs); }

.pasarela input { position: absolute; opacity: 0; pointer-events: none; }

.pasarela__caja {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-cream);
    border: 2px solid transparent;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    clip-path: var(--btn-path-4);
}

.pasarela:hover .pasarela__caja { background: var(--color-cream-dark); }

.pasarela input:checked + .pasarela__caja {
    background: var(--color-white);
    border-color: var(--color-green-deep);
}

.pasarela input:focus-visible + .pasarela__caja { outline: 3px solid var(--color-yellow); }

.pasarela__cabecera {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0 0 0.6rem;
    padding-bottom: 0.45rem;
    border-bottom: 2px solid var(--color-gray);
}

/* La marca de elegido: un sello cuadrado torcido, no un check redondo. */
.pasarela__marca-elegida {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    background: transparent;
    border: 2px solid var(--color-text-muted);
    transform: rotate(-4deg);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.pasarela input:checked + .pasarela__caja .pasarela__marca-elegida {
    background: var(--color-green-deep);
    border-color: var(--color-green-deep);
}

.pasarela__marca {
    font-family: var(--font-heading);
    font-weight: 500;          /* Poleno solo trae 500 */
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-green-deep);
}

/*  El logo de la pasarela, cuando lo tenemos. Ocupa el sitio del nombre escrito.

    Se le fija la ALTURA y se deja el ancho automatico: los logos oficiales vienen en
    proporciones distintas —el de AvalPay es 175x69— y amarrar el ancho los deformaria.
    El alto va en la linea del texto que reemplaza, para que la fila no salte.            */
.pasarela__logo {
    height: 1.6rem;
    width: auto;
    max-width: 9rem;
    object-fit: contain;
    display: block;
}

.pasarela__sello {
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-green);
    margin-left: auto;          /* se va al borde derecho, pegado al de la tarjeta */
}

.pasarela__sello::before { content: "🔒 "; }

@media (max-width: 520px) {
    /* En pantalla estrecha el sello ya no cabe al lado del nombre: baja a su propio
       renglon en vez de partir la marca en dos lineas. */
    .pasarela__sello { margin-left: 0; flex-basis: 100%; }
}

/* ─────────────── Súmale aventura ─────────────── */

.cinta--arena { background: var(--color-cafe-deep); }

.suma__bajada {
    font-family: var(--font-body);
    color: var(--color-text-light);
    margin: 0 0 var(--spacing-sm);
}

.suma__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-xs);
}

.suma__item {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.6rem;
    background: var(--color-cream);
    clip-path: var(--btn-path-4);
}

.suma__item[hidden] { display: none; }

/* La foto es decorativa: si no hay, queda la franja con el icono en vez de un hueco. */
.suma__foto {
    position: relative;
    height: 4.2rem;
    background: var(--color-green-deep) center / cover no-repeat;
    display: grid;
    place-items: center;
    clip-path: var(--btn-path-4);
}

.suma__icono {
    font-size: 1.6rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}

.suma__texto { min-width: 0; }

.suma__nombre {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-green-deep);
    margin: 0;
}

.suma__gancho {
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--color-text);
    margin: 0.15rem 0 0;
}

.suma__lugar {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: 0.2rem 0 0;
}

.suma__accion {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

.suma__precio {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.15rem;
    color: var(--color-green-deep);
    white-space: nowrap;
}

.suma__btn {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-white);
    background: var(--color-green-dark);
    border: 0;
    padding: 0.5rem 1.1rem;
    cursor: pointer;
    clip-path: var(--btn-path-4);
    transition: background var(--transition-fast);
}

.suma__btn:hover { background: var(--color-red); }
.suma__btn:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 2px; }

/* Un momento de "listo" antes de que la tarjeta se retire: sin esto, pulsar hace
   desaparecer la fila y parece que se rompio algo. */
.suma__item--puesto { background: var(--color-yellow-bright); }
.suma__item--puesto .suma__btn { background: var(--color-green-deep); }

.suma__nota {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: var(--spacing-sm) 0 0;
}

@media (max-width: 640px) {
    .suma__item {
        grid-template-columns: 3.6rem minmax(0, 1fr);
        grid-template-areas:
            "foto texto"
            "accion accion";
    }

    .suma__foto { grid-area: foto; height: 3.6rem; }
    .suma__texto { grid-area: texto; }

    .suma__accion {
        grid-area: accion;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ─────────────── El documento, primero ───────────────
   Va arriba porque es la llave: con el escrito, el resto del formulario se llena
   solo. La fila se estrecha a proposito —no ocupa el ancho completo— para que se
   lea como un paso previo y no como dos campos mas de la lista. */

.rejilla--documento {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    max-width: 34rem;
    margin-bottom: var(--spacing-sm);
}

/* «Ya te conocemos». Aparece cuando el formulario se llena solo: sin esto, seis
   campos cambian de golpe y no se sabe por que. */
.reconocido {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-arena);
    color: var(--color-green-deep);
    font-family: var(--font-body);
    font-size: 0.92rem;
    padding: 0.6rem 1rem;
    margin: 0 0 var(--spacing-sm);
    clip-path: var(--btn-path-2);
}

.reconocido::before { content: "👋"; font-size: 1.1rem; }

.reconocido[hidden] { display: none; }

@media (max-width: 640px) {
    .rejilla--documento { grid-template-columns: minmax(0, 1fr); }
}

/* ─────────────── Las tres casillas ───────────────
   Van en su propia caja, con aire entre ellas y separadas por una linea: tres
   permisos distintos leidos como tres, no como un parrafo con checkboxes. */

.acepta + .acepta {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-gray);
}

.acepta__nota {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin: var(--spacing-sm) 0 0;
    padding-top: var(--spacing-xs);
    border-top: 1px solid var(--color-gray);
}

/* La opcional se distingue de las obligatorias sin gritarlo: misma caja, un renglon
   mas que dice que se puede quitar. Marcarla en otro color la haria parecer un aviso
   de error. */
.acepta__opcional {
    display: block;
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 0.15rem;
}

/* ─────────────── El día, que se cambia en el modal ───────────────
   Parece un campo porque ocupa su sitio y su altura, pero es un botón: la fecha
   decide qué se puede comprar, y esa cuenta la sabe hacer el modal, no esta
   pantalla. Se le da aspecto de control editable —no de enlace— porque eso es
   lo que hace: cambiar un dato del pedido. */

.fecha-boton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--color-cream);
    border: 2px solid var(--color-gray);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.fecha-boton:hover { border-color: var(--color-green-dark); background: var(--color-cream-dark); }
.fecha-boton:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 2px; }

.fecha-boton[aria-invalid="true"] { border-color: var(--color-red-dark); }

.fecha-boton__valor {
    font-family: var(--font-body-bold);
    font-variant-numeric: tabular-nums;
}

.fecha-boton__accion {
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-green-dark);
    white-space: nowrap;
}

/* El precio de lista tachado, al lado del cobrado. Va antes y mas pequeño: lo que
   tiene que leerse primero es lo que se paga, no lo que se dejo de pagar. */
.suma__precio-antes {
    display: block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}