/* ============================================================
   Evento (/{fotografo}/{evento}) — donde el deportista elige sus fotos

   Es la pantalla más importante del sitio: la persona llega desde el link del
   fotógrafo, tiene que ENCONTRARSE entre cientos de fotos y elegir las suyas.

   Antes había cinco bloques antes de la primera foto —volver, migas, título,
   fila de precio y panel de descuentos plegado— y en móvil la grilla quedaba
   muy por debajo del pliegue. Y cada foto era una tarjeta con cuerpo: la fecha
   completa, el precio repetido (todas valen igual) y un botón de ancho
   completo. Veinticuatro botones por pantalla.

   Ahora la cabecera es una banda con la portada del propio evento, la escalera
   de precios se muestra abierta —es lo que hace que alguien elija cuatro fotos
   en vez de una— y la grilla es la misma tira de contactos del carrito y la
   entrega, con la selección encima de la foto.

   Lo que sigue del bloque original: la barra de carrito, la marca de agua y la
   paginación, que son piezas que funcionan y que acá solo se normalizan a la
   paleta.
   ============================================================ */

/* ── Descuentos: chip + tramos plegados ───────────────────────────── */

.ps-chip-chevron { font-size: 11px; transition: transform 0.22s ease; }

.ps-discount-panel {
    display: none;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 0; overflow: hidden;
}
.ps-discount-panel.is-open { display: block; animation: ps-tier-in 0.22s ease both; }
@keyframes ps-tier-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.ps-tier-row {
    display: grid; grid-template-columns: 1fr auto auto; gap: 16px;
    align-items: center; padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.ps-tier-qty { font-size: 14px; font-weight: 500; }
.ps-tier-off { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ps-tier-1 .ps-tier-off { color: var(--warning); }
.ps-tier-2 .ps-tier-off { color: var(--ice-bright); }
.ps-tier-unit {
    font-size: 14px; font-weight: 600; color: var(--text-secondary);
    font-variant-numeric: tabular-nums; text-align: right; min-width: 108px;
}
.ps-tier-unit s { color: var(--muted); font-weight: 400; margin-right: 6px; }
.ps-tier-row.is-live { background: rgba(24, 201, 100,0.06); }
.ps-tier-badge {
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 0; margin-left: 6px; vertical-align: middle;
    background: rgba(24, 201, 100,0.12); color: var(--accent);
}
.ps-tier-foot {
    padding: 10px 16px; background: rgba(255,255,255,0.02);
    font-size: 12px; color: var(--muted);
    display: flex; align-items: center; gap: 7px;
}
@media (max-width: 575.98px) {
    .ps-tier-row { grid-template-columns: 1fr auto; row-gap: 4px; }
    .ps-tier-unit { grid-column: 1 / -1; text-align: left; }
}
/* El panel se ancla bajo el chip que lo abre, no estirado a todo el ancho. */
@media (min-width: 768px) {
    .ps-discount-panel { max-width: 620px; margin-left: auto; }
}

/* ── Barra fija de carrito + progreso ─────────────────────────────── */
.ps-cartbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 600;
    background: rgba(17,17,24,0.97);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border-light);
    transform: translateY(102%);
    transition: transform 0.26s cubic-bezier(.22,.61,.36,1);
}
.ps-cartbar.is-visible { transform: translateY(0); }
.ps-cartbar-progress { position: relative; height: 4px; background: rgba(255,255,255,0.06); }
.ps-cartbar-progress i {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--warning), var(--ice-bright));
    transition: width 0.35s cubic-bezier(.22,.61,.36,1), background 0.3s ease;
}
/* Marca de cada tramo sobre la pista, para que el avance se lea por escalones. */
.ps-cb-tick {
    position: absolute; top: 0; bottom: 0; width: 2px;
    margin-left: -1px; background: var(--bg);
}
.ps-cartbar.is-maxed .ps-cartbar-progress i { background: linear-gradient(90deg, var(--accent), var(--accent)); }
.ps-cartbar-inner { display: flex; align-items: center; gap: 20px; padding: 13px 12px; flex-wrap: wrap; }
.ps-cb-count { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ps-cb-ico {
    width: 36px; height: 36px; border-radius: 0; flex: none;
    background: rgba(123, 110, 232,0.14); border: 1px solid rgba(123, 110, 232,0.3);
    display: flex; align-items: center; justify-content: center;
    color: var(--ice-bright);
}
.ps-cb-n { display: block; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ps-cb-sum { display: block; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ps-cb-sum s { margin-right: 5px; }
.ps-cb-sum b { color: var(--accent); font-weight: 600; }
.ps-cb-status {
    flex: 1; min-width: 200px; margin: 0;
    font-size: 13.5px; color: var(--text-secondary);
    display: flex; align-items: center; gap: 8px;
}
.ps-cb-status .ps-cb-k { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.ps-cb-cta {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    background: var(--primary); color: var(--white); border-radius: 0;
    padding: 11px 20px; font-size: 14px; font-weight: 600; text-decoration: none;
    transition: filter 0.18s ease;
}
.ps-cb-cta:hover { filter: brightness(1.12); color: var(--white); }
.ps-cb-cta:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
@media (max-width: 767.98px) {
    .ps-cartbar-inner { gap: 10px 14px; padding: 11px 12px; }
    .ps-cb-status { order: 3; flex-basis: 100%; min-width: 0; font-size: 12.5px; }
    .ps-cb-cta { margin-left: auto; padding: 10px 16px; }
}
/* Bajo ~360px la fila superior no admite las tres piezas: se recorta el
   resumen al total y el ahorro queda dicho una sola vez, en el estado. */
@media (max-width: 359.98px) {
    .ps-cb-scope, .ps-cb-ico, .ps-cb-sum s, .ps-cb-saving { display: none; }
}
/* El banner de cookies también es fixed-bottom: se apoya sobre la barra. */
body.ps-has-cartbar { padding-bottom: var(--ps-cartbar-h, 0px); }
body.ps-has-cartbar .ps-cookie-banner { bottom: calc(var(--ps-cartbar-h, 0px) + 24px); }
@media (prefers-reduced-motion: reduce) {
    .ps-cartbar, .ps-cartbar-progress i, .ps-discount-panel, .ps-chip-chevron {
        transition: none; animation: none;
    }
}

/* Date/time search form */
.datetime-filter-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}
.datetime-filter .form-select,
.datetime-filter .form-control {
    background-color: var(--panel);
    border: 1px solid rgba(123, 110, 232, 0.4);
    color: var(--text);
    border-radius: 0;
    font-size: 15px;
}
.datetime-filter .form-select:hover,
.datetime-filter .form-control:hover { border-color: rgba(123, 110, 232, 0.6); }
.datetime-filter .form-select:focus,
.datetime-filter .form-control:focus {
    background-color: var(--panel);
    color: var(--text);
    border-color: var(--ice);
    box-shadow: 0 0 0 0.2rem rgba(123, 110, 232, 0.25);
}
.datetime-filter .form-select option { background-color: var(--panel); color: var(--text); }

.photo-watermark-container { position: relative; overflow: hidden; }
.watermark-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 2;
    background-image:
        repeating-linear-gradient( 45deg, transparent 0, transparent 16px, rgba(255,255,255,0.10) 16px, rgba(255,255,255,0.10) 18px),
        repeating-linear-gradient(-45deg, transparent 0, transparent 16px, rgba(255,255,255,0.10) 16px, rgba(255,255,255,0.10) 18px);
}
.watermark-overlay::before, .watermark-overlay::after {
    content: 'PeakShot';
    position: absolute;
    font-size: 2.5rem; font-weight: bold;
    color: rgba(255, 255, 255, 0.35);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    transform: rotate(-45deg);
    white-space: nowrap; letter-spacing: 0.2em;
}
.watermark-overlay::before { top: 30%; left: -10%; width: 120%; text-align: center; }
.watermark-overlay::after  { top: 60%; left: -10%; width: 120%; text-align: center; }

.modal-body .watermark-overlay {
    background-image:
        repeating-linear-gradient( 45deg, transparent 0, transparent 22px, rgba(255,255,255,0.09) 22px, rgba(255,255,255,0.09) 24px),
        repeating-linear-gradient(-45deg, transparent 0, transparent 22px, rgba(255,255,255,0.09) 22px, rgba(255,255,255,0.09) 24px);
}
.modal-body .watermark-overlay::before,
.modal-body .watermark-overlay::after { font-size: 5rem; color: rgba(255,255,255,0.45); }
@media (min-width: 768px) {
    .modal-body .watermark-overlay::before { top: 20%; }
    .modal-body .watermark-overlay::after  { top: 55%; }
}

/* AI search tabs */
#aiSearchPanel .nav-pills .nav-link {
    color: rgba(165,180,252,0.7);
    background: transparent;
    border: 1px solid rgba(123, 110, 232,0.2);
    transition: all 0.2s ease;
}
#aiSearchPanel .nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--ice), var(--ice));
    border-color: transparent;
    color: var(--white) !important;
}
#aiSearchPanel .nav-pills .nav-link:hover:not(.active) {
    background: rgba(123, 110, 232,0.12);
    color: var(--ice-bright);
    border-color: rgba(123, 110, 232,0.4);
}

.no-save {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}
.photo-watermark-container { cursor: pointer; }

/* Pagination */
.pagination { gap: 4px; }
.pagination-item .page-link { border-radius: 0; }
.pagination-item.active .page-link { background-color: var(--ice); border-color: var(--ice); }

/* Selfie search — pulsing ring during auto-search */
.selfie-searching {
    animation: selfie-pulse 1.4s ease-in-out infinite;
}
@keyframes selfie-pulse {
    0%   { box-shadow: 0 0 0 0    rgba(123, 110, 232, 0.55); }
    70%  { box-shadow: 0 0 0 14px rgba(123, 110, 232, 0); }
    100% { box-shadow: 0 0 0 0    rgba(123, 110, 232, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .selfie-searching { animation: none; }
}

/* ============================================================
   CABECERA
   ============================================================ */
.ev { padding-bottom: 0; }

.ev-head__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ev-head .page-kicker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ev-head__back { color: var(--muted); text-decoration: none; }
.ev-head__back:hover { color: var(--ice-bright); }

.ev-head__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    font-size: var(--ps-fs-support);
    color: var(--muted);
}
.ev-head__author { color: var(--ice-bright); text-decoration: none; font-weight: 600; }
.ev-head__author:hover { text-decoration: underline; }
.ev-dot { width: 3px; height: 3px; background: var(--border-light); flex-shrink: 0; }

/* El precio va una vez, acá. Antes se repetía en una insignia sobre cada foto,
   y todas las fotos del evento valen lo mismo. */
.ev-head__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}
.ev-price {
    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;
}
.ev-price__unit {
    font-family: var(--font-display);
    font-size: var(--ps-fs-label);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ----------- Escalera de precios ----------- */
.ev-tiers-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 0;
    margin-bottom: 12px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: var(--warning);
    font-family: var(--font-display);
    font-size: var(--ps-fs-label);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}
.ev-tiers-toggle .ps-chip-chevron { margin-left: auto; transition: transform .2s ease; }
/* La rotación vivía en la regla del chip viejo y se fue con él al limpiar
   reglas muertas. Sin esto la flecha apunta siempre para el mismo lado, que es
   el único indicio de que la escalera se pliega. */
.ev-tiers-toggle[aria-expanded="true"] .ps-chip-chevron { transform: rotate(180deg); }
.ev-tiers-toggle:focus-visible { outline: 2px solid var(--warning); outline-offset: 2px; }

/* ============================================================
   TIRA DE CONTACTOS
   ============================================================ */
.ev-sheet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--ps-mortar);
}

.ev-tile {
    margin: 0;
    background: var(--panel);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.ev-tile__shot { position: relative; overflow: hidden; cursor: pointer; }
.ev-tile__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    /* En foto deportiva el sujeto cae arriba del centro. */
    object-position: center 38%;
    background: var(--black);
    transition: filter .2s ease;
}
.ev-tile:hover .ev-tile__img { filter: brightness(1.07); }

/* La hora es el dato que sirve para reconocerse ("pasé por ahí a las 10:40").
   Ocupa el lugar donde antes iba el precio repetido. */
.ev-tile__time {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(10, 10, 15, .78);
    color: var(--white);
    font-family: var(--font-display);
    font-size: var(--ps-fs-label);
    font-weight: 700;
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
}

/* Marca de elegida, sobre la foto: se ve de un vistazo cuáles ya están sin
   tener que leer los botones uno por uno. */
.ev-tile__check {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    width: 34px;
    height: 34px;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--black);
    font-size: 1rem;
}
.ev-tile.is-in-cart .ev-tile__check { display: flex; }
.ev-tile.is-in-cart { outline: 2px solid var(--accent); outline-offset: -2px; }
.ev-tile.is-in-cart .ev-tile__img { filter: brightness(.72) saturate(.9); }

/* ----------- Acción ----------- */
.ev-tile__btn {
    width: 100%;
    height: var(--ps-h-control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.ev-tile__btn:hover { background: var(--ice); color: var(--black); }
.ev-tile__btn:focus-visible { outline: 2px solid var(--ice-bright); outline-offset: -2px; }

/* Ya elegida: el botón baja de tono. Lo que hay que ver en ese marco es la
   marca sobre la foto, no un control compitiendo por atención. */
.remove-from-cart-btn { color: var(--muted); }
.remove-from-cart-btn:hover { background: var(--danger); color: var(--black); }

.ev-tile__btn:disabled { opacity: .6; cursor: default; }

@media (max-width: 767px) {
    /* Una sola columna. En dos, cada foto quedaba en unos 170 px de ancho y la
       tarea de esta pantalla —reconocerse entre cientos de tomas— se vuelve
       imposible: hay que abrir el modal foto por foto para saber si eres tú.
       A pantalla completa se decide de un vistazo. */
    .ev-sheet { grid-template-columns: minmax(0, 1fr); }
    .ev-head__price { align-items: flex-start; }
    /* El botón y la marca ya no se achican: se encogían para caber en una
       columna de ~170 px, y a ancho completo entran holgados y se leen mejor. */
}

/* ----------- Quién sacó las fotos -----------
   Era el tercer dato de un renglón gris, junto a la ubicación y el conteo. Es
   la señal de confianza de esta página: el deportista llegó por el link de esta
   persona, y desde acá tiene que poder llegar a su perfil. */
.ev-author {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    min-width: 0;
}
.ev-author__face {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    object-fit: cover;
    background: var(--panel);
    display: block;
}
.ev-author__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ev-author__label {
    font-family: var(--font-display);
    font-size: var(--ps-fs-label);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}
.ev-author__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.0625rem;
    letter-spacing: -.01em;
    color: var(--ice-bright);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.ev-author__name:hover { color: var(--white); text-decoration: underline; }
a.ev-author__name:focus-visible { outline: 2px solid var(--ice-bright); outline-offset: 3px; }
/* Perfil no público: se atribuye igual, pero no se promete una página que
   devolvería 404. */
.ev-author__name--plain { color: var(--white); }