/* ============================================================
   Carrito (/Cart)

   Era una lista de carrito genérica: miniatura de 150px en una columna de
   tres, "Foto #1234" —el id de la base de datos— ocupando media fila, y el
   precio al costado. El 80% del ancho describía atributos que estos productos
   no tienen: no hay talle, ni color, ni cantidad. La foto ES el producto
   entero.

   Así que la página pasa a ser una tira de contactos: las fotos elegidas
   pegadas con el mortero de 2px del sistema, agrupadas por evento, y el texto
   reducido a lo único que agrega algo —la hora de captura y el precio—.

   El resumen dejó de repetir la lista (antes cada evento aparecía dos veces en
   la misma pantalla) y responde solo lo que la tira no puede: cuánto se paga.

   Primitivas en ps-system.css. Misma retícula que /PaymentInfo y /Profile.
   ============================================================ */

.ca { padding-bottom: 0; }

/* ----------- Retícula ----------- */
.ca__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
    align-items: start;
}
.ca__main { min-width: 0; }

/* ----------- Grupo por evento ----------- */
.ca__group { margin-bottom: 44px; }
.ca__group:last-of-type { margin-bottom: 32px; }

.ca__group-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
/* El gap de 16px de .ps-slab separa la etiqueta de su regla; entre el ícono
   del deporte y el título es demasiado. */
.ca__group-head .ps-slab { gap: 10px; flex-wrap: wrap; }
.ca__group-sport { font-size: 1.1em; letter-spacing: normal; }

.ca__group-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: var(--ps-fs-support);
    color: var(--muted);
}
.ca__dot { width: 3px; height: 3px; background: var(--border-light); flex-shrink: 0; }
.ca__off {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
}

/* ----------- La tira de contactos ----------- */
.ca__sheet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--ps-mortar);
}

.ca__frame {
    position: relative;
    margin: 0;
    background: var(--panel);
    display: flex;
    flex-direction: column;
    /* Red de seguridad: pase lo que pase con el contenido, nada se dibuja
       fuera de la tarjeta. Sin esto, la equis de quitar aparecía flotando
       al costado del marco. */
    overflow: hidden;
}
.ca__frame-img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    /* Los sujetos caen arriba del centro en foto deportiva: el recorte por
       abajo se lleva pista y pasto, no al corredor. */
    object-position: center 40%;
    background: var(--black);
    transition: filter .2s ease;
}
.ca__frame:hover .ca__frame-img { filter: brightness(1.08); }

/* La barra tenía tres piezas con white-space: nowrap —hora, precio y la equis—
   y los flex items traen min-width: auto, así que ninguna podía encogerse: la
   fila desbordaba y la equis quedaba fuera de la tarjeta.

   Se notaba a partir de unas diez fotos porque ahí entra el descuento por
   cantidad y el precio pasa a mostrar DOS cifras, la tachada y la rebajada,
   casi duplicando ese bloque. Pero desbordaba desde antes, solo que por poco.

   Ahora quitar vive sobre la foto y la barra queda con hora y precio. */
.ca__frame-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 12px;
    min-height: 46px;
    min-width: 0;
}
.ca__frame-bar > * { min-width: 0; }
.ca__frame-time {
    font-family: var(--font-display);
    font-size: var(--ps-fs-label);
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ca__frame-price {
    margin-left: auto;
    flex-shrink: 1;
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ca__frame-price strong {
    font-weight: 800;
    font-size: 1.0625rem;
    letter-spacing: -.01em;
    color: var(--white);
}
.ca__frame-was {
    font-size: var(--ps-fs-support);
    font-weight: 600;
    color: var(--muted);
    text-decoration: line-through;
}
.ca__frame-now { color: var(--accent) !important; }

/* Sobre la foto, arriba a la derecha: es el patrón habitual para quitar un
   elemento visual de un carrito, y saca del renglón la pieza que lo hacía
   desbordar. El objetivo táctil queda entero sin competir por ancho. */
/* La ranura, no el form: el logueado pone un <form> aca y el invitado un
   <button> suelto, porque su carrito vive en el navegador. */
.ca__frame-remove-slot { position: absolute; top: 0; right: 0; z-index: 3; }
.ca__frame-remove {
    width: var(--ps-h-control-sm);
    height: var(--ps-h-control-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 15, .72);
    border: 0;
    border-radius: 0;
    color: var(--white);
    font-size: .75rem;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.ca__frame-remove:hover { color: var(--black); background: var(--danger); }
.ca__frame-remove:focus-visible { outline: 2px solid var(--danger); outline-offset: -2px; }

/* ----------- El empujón al próximo tramo ----------- */
/* Lo único accionable de la página. Va como enlace entero, no como un botón
   suelto al final: el aviso completo lleva al evento. */
.ca__nudge { align-items: center; }
a.ca__nudge:hover { background: #2E2B47; }
.ca__nudge-go {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: var(--ps-fs-label);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ice-bright);
    white-space: nowrap;
}

.ca__main-actions { display: flex; justify-content: flex-start; }
/* Vaciar es destructivo: en reposo no grita, pero al acercarse avisa de qué
   color es la acción, en vez de encenderse en morado como el resto. */
.ca__clear:hover { border-color: var(--danger); color: var(--danger) !important; }
.ca__btn-danger { background: var(--danger); }
.ca__btn-danger:hover { background: #ff6d6f; }

/* ----------- Resumen ----------- */
.ca__summary { min-width: 0; }
.ca__summary-inner {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: var(--panel);
    /* Filete verde: en el sitio el verde es el lado del deportista y la plata
       que te queda. Acá el comprador ES el deportista. */
    border-left: 2px solid var(--accent);
    padding: 24px 24px 26px;
}

.ca__lines { display: flex; flex-direction: column; gap: 11px; }
.ca__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    font-size: var(--ps-fs-support);
    color: var(--text-secondary);
}
.ca__amount {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .9375rem;
    color: var(--white);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ca__line--save,
.ca__line--save .ca__amount { color: var(--accent); }

.ca__code { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ca__code-remove {
    background: none;
    border: 0;
    padding: 0;
    color: var(--muted);
    font-size: var(--ps-fs-support);
    text-decoration: underline;
    cursor: pointer;
}
.ca__code-remove:hover { color: var(--white); }

/* ----------- Código de descuento ----------- */
.ca__codeform { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.ca__codeform-label {
    font-family: var(--font-display);
    font-size: var(--ps-fs-label);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}
.ca__codeform-row { display: flex; gap: var(--ps-mortar); }
.ca__codeform-row .form-control {
    min-height: var(--ps-h-control);
    text-transform: uppercase;
    letter-spacing: .1em;
}
.ca__codeform-row .ps-btn { flex-shrink: 0; padding: 0 16px; }
.ca__codeform-hint {
    font-size: var(--ps-fs-support);
    color: var(--warning);
    line-height: 1.5;
    margin: 0;
}

/* ----------- Total ----------- */
.ca__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.ca__total-label {
    font-family: var(--font-display);
    font-size: var(--ps-fs-label);
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
}
.ca__total-figure {
    font-family: var(--font-display);
    font-size: var(--ps-fs-figure-sm);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--white);
    font-variant-numeric: tabular-nums;
}
.ca__saving {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.0625rem;
    color: var(--accent);
    margin: -6px 0 0;
}
.ca__pay { width: 100%; height: 50px; }

.ca__included { list-style: none; margin: 0; padding: 6px 0 0; display: flex; flex-direction: column; gap: 9px; }
.ca__included li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: var(--ps-fs-support);
    color: var(--muted);
    line-height: 1.45;
}
.ca__included .bi { color: var(--accent); flex-shrink: 0; }

/* ----------- Barra fija de móvil ----------- */
/* La tira es larga y el total quedaba al final de todo el scroll. */
.ca__dock { display: none; }

/* ----------- Carrito vacío ----------- */
.ca__empty {
    max-width: 560px;
    margin-inline: auto;
    padding: 56px 0 72px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}
.ca__empty-lead {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--ps-fs-serif);
    line-height: 1.15;
    color: var(--white);
    margin: 0;
}
.ca__empty-lead em { font-style: italic; color: var(--ice); }
.ca__empty-hint {
    font-size: var(--ps-fs-body);
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

/* ----------- Responsive ----------- */
@media (max-width: 1199px) {
    .ca__layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
}

@media (max-width: 991px) {
    /* El resumen baja al final: no puede robarle ancho a las fotos, que es lo
       que se viene a mirar. El total viaja en la barra fija. */
    .ca__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .ca__summary-inner { position: static; }
    .ca__summary { margin-top: 32px; }
    /* En la barra fija ya está el total y el pago. */
    .ca__pay { display: none; }

    .ca__dock {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 12px var(--ps-pad-x);
        background: var(--charcoal);
        border-top: 1px solid var(--border);
    }
    .ca__dock-figures { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .ca__dock-label {
        font-family: var(--font-display);
        font-size: var(--ps-fs-label);
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--muted);
    }
    .ca__dock-total {
        font-family: var(--font-display);
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -.02em;
        color: var(--white);
        font-variant-numeric: tabular-nums;
    }
    .ca__dock .ps-btn { flex-shrink: 0; }
    /* Que la barra no tape el último bloque */
    .ca { padding-bottom: 88px; }
}

@media (max-width: 767px) {
    .ca__sheet { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    /* En táctil el sistema no baja de 44px, y quitar una foto por error acá
       obliga a volver a buscarla en la galería. */
    .ca__frame-remove { width: var(--ps-h-control); height: var(--ps-h-control); }
    /* Hora arriba y precio abajo. En una columna de ~170px las dos cifras del
       descuento no entran en el mismo renglón que la hora, y apilar da una
       altura pareja en vez de un salto de línea distinto por tarjeta. */
    .ca__frame-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-height: 52px;
        padding: 8px 10px;
    }
    .ca__frame-price { margin-left: 0; }
    .ca__frame-time { letter-spacing: .08em; }
    .ca__group { margin-bottom: 36px; }
    .ca__nudge { flex-wrap: wrap; gap: 12px; }
    .ca__nudge-go { width: 100%; }
    .ca__main-actions .ps-btn { width: 100%; }
    .ca__empty { padding: 40px 0 56px; }
}

/* La marca del medio de pago, al pie del resumen. */
.ca__paymark { padding-top: 14px; border-top: 1px solid var(--border); }