/* site.css — capa de adaptación: lo que falta para que polla.css funcione en una app
   Razor Pages normal (sin wrappers .phone-screen / .browser-screen del prototipo). */

html, body { height: 100%; margin: 0; }

/* El prototipo confinaba .pweb dentro de un wrapper con altura controlada.
   Aquí .pweb ocupa la pantalla y delegamos el scroll a su hijo .scroll. */
.pweb {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-app);
}

/* En el prototipo los items de nav son <button>; en Razor Pages usamos <a>.
   Replicamos los estilos para que se apliquen igual. */
.web-nav a {
    text-decoration: none;
    border: 0; background: transparent; cursor: pointer;
    font-family: var(--font-display); font-weight: 700; font-size: 14px;
    color: var(--fg-2); padding: 9px 15px; border-radius: var(--r-pill);
    display: inline-flex; align-items: center; gap: 7px;
    transition: all 150ms ease-out;
}
.web-nav a:hover { color: var(--fg-1); background: var(--n-100); text-decoration: none; }
.web-nav a.is-active { background: var(--c-orange-tint); color: var(--c-orange-deep); }

.pnav a {
    text-decoration: none;
    border: 0; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 6px 0; color: var(--fg-3);
    font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
    transition: color 120ms;
}
.pnav a.is-active { color: var(--c-orange-deep); }
.pnav a .nav-ic { width: 24px; height: 24px; display: grid; place-items: center; }
.pnav a:hover { text-decoration: none; }

/* Iconos Lucide dentro de las navs: tamaño consistente */
.web-nav a > svg { width: 17px; height: 17px; stroke-width: 2; }
.pnav  a > svg { width: 22px; height: 22px; stroke-width: 2; }

/* Responsive: usamos las clases .is-desktop / .is-mobile que polla.js
   asigna a .pweb según window.innerWidth. Misma fuente de verdad que el
   resto del prototipo. Las reglas mobile añaden .pweb:not(.is-desktop)
   al selector para superar la especificidad de los layouts de
   .web-nav-left/.web-nav-right definidos más abajo en este archivo. */

.pweb:not(.is-desktop) .web-topnav--centered .web-nav-left,
.pweb:not(.is-desktop) .web-topnav--centered .web-nav-right,
.pweb:not(.is-desktop) .web-topnav--centered .web-topnav-right {
    display: none !important;
}
.pweb:not(.is-desktop) .web-topnav--centered {
    padding: 10px 16px;
    min-height: 60px;
}
.pweb:not(.is-desktop) .web-topnav--centered .web-brand-center > img {
    width: 78px;
    height: 78px;
    border-radius: 20px;
    padding: 5px;
    border-width: 3px;
}

/* Bottom nav: oculto en desktop, fijo en mobile. */
.pweb.is-desktop .pnav { display: none; }
.pweb:not(.is-desktop) .pnav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .08);
}
/* En mobile el logo cuelga del topbar — bajar el contenido para que el título
   no quede tapado. Y reservar espacio abajo para la .pnav fija. */
.pweb:not(.is-desktop) .web-scroll {
    padding-top: 40px;
    padding-bottom: 84px;
}

/* Brand del topbar (el wordmark "Porra Mundialera") */
.web-brand { text-decoration: none; color: inherit; }
.web-brand:hover { text-decoration: none; }

/* Logo de la marca: contenedor con borde redondeado y sin overflow */
.brand-logo {
    display: block;
    border-radius: 11px;
    object-fit: contain;
}

/* El layout admin no tiene topbar — el rail .arail hace de chrome */
.admin-shell {
    width: 100%;
    min-height: 100vh;
    background: var(--bg-app);
    padding: 16px;
}
.admin-shell .admin { margin: 0 auto; }
.admin-shell .awrap { padding-bottom: 60px; }

/* Mensaje de guardado en tarjetas de apuesta */
.save-msg { font-family: var(--font-display); font-weight: 700; font-size: 13px; margin-top: 10px; min-height: 18px; }
.save-msg-ok { color: var(--c-emerald); }
.save-msg-err { color: var(--c-red-deep); }

/* Banner flash en páginas admin */
.flash {
    padding: 14px 18px; margin-bottom: 16px;
    background: var(--c-teal-tint); color: var(--c-teal-deep);
    border-left: 4px solid var(--c-emerald);
    border-radius: var(--r-md);
    font-family: var(--font-display); font-weight: 700;
}
.flash-error { background: var(--c-red-tint); color: var(--c-red-deep); border-left-color: var(--c-red); }

/* Form helpers que usaremos en admin */
.form-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); }

/* Logout: <form> dentro de la topbar — quita el margen */
.web-topnav form, .arail-foot form { margin: 0; }

/* Filter chips (Apostar) */
.filter-chip {
    cursor: pointer;
    border: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12.5px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    color: var(--fg-2);
    box-shadow: inset 0 0 0 1px var(--border);
    transition: all 150ms;
    white-space: nowrap;
}
.filter-chip:hover { color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--border-strong); }
.filter-chip.is-active {
    background: var(--c-orange);
    color: #fff;
    box-shadow: 0 4px 10px rgba(243,147,57,.32);
}

/* Inicio: misma columna en móvil */
@media (max-width: 720px) {
    .inicio-cols { display: flex; flex-direction: column; gap: 22px; }
    .hero-jornada { display: flex; flex-direction: column; gap: 22px; }
}
@media (min-width: 721px) {
    /* Hero-jornada e inicio-cols comparten la misma rejilla 1fr 1fr para que
       las columnas queden alineadas verticalmente entre las dos secciones. */
    .inicio-cols,
    .pweb .hero-jornada {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
        align-items: start;
    }
}
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }

/* =====================================================================
   TOPBAR — Estadio. Verde césped, rayas de camiseta, naranja vibrante,
   logo dramático al centro con halo.
   ===================================================================== */
.web-topnav--centered {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    padding: 14px 28px;
    min-height: 80px;

    /* Tres capas de fondo:
       1. Rayas diagonales sutiles (camiseta de jersey)
       2. Halo naranja que sale desde el centro-arriba (foco de estadio)
       3. Gradiente verde césped */
    background:
        repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.025) 18px 19px),
        radial-gradient(ellipse 60% 65% at 50% 0%, rgba(243,147,57,.22) 0, transparent 70%),
        linear-gradient(180deg, #0E5238 0%, #093D2A 55%, #062B1E 100%);

    /* Línea naranja en el pie + sombra que cae al contenido */
    box-shadow:
        inset 0 -3px 0 0 var(--c-orange),
        0 6px 18px rgba(0, 0, 0, .14);
    color: rgba(255, 255, 255, .9);
}

.web-topnav--centered .web-nav-left,
.web-topnav--centered .web-nav-right {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.web-topnav--centered .web-nav-left  { justify-content: flex-end;   padding-right: 78px; }
.web-topnav--centered .web-nav-right { justify-content: flex-start; padding-left: 78px; }
/* Cluster de usuario/admin/logout: absoluto a la derecha → no roba flex
   space del nav-right, así nav-left y nav-right pueden repartirse el
   header al 50% y el logo queda al centro de verdad. */
.web-topnav--centered .web-topnav-right {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    display: flex; align-items: center; gap: 10px;
    z-index: 5;
}

/* Nav SOBRE fondo oscuro: blanco con peso, naranja vibrante al activo */
.web-topnav--centered .web-nav a {
    color: rgba(255, 255, 255, .72);
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    font-size: 12.5px;
    padding: 9px 14px;
}
.web-topnav--centered .web-nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}
.web-topnav--centered .web-nav a.is-active {
    background: var(--c-orange);
    color: #fff;
    box-shadow: 0 6px 18px rgba(243, 147, 57, .55);
}

/* Usuario/admin/logout sobre fondo oscuro */
.web-topnav--centered .web-pts {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .15);
}
.web-topnav--centered .btn-ghost {
    color: rgba(255, 255, 255, .8);
}
.web-topnav--centered .btn-ghost:hover {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

/* === LOGO === Halo naranja dramático sobre el verde */
.web-topnav--centered .web-brand-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -30%);
    z-index: 10;
    text-decoration: none;
    line-height: 0;
}
.web-topnav--centered .web-brand-center > img {
    display: block;
    width: 110px;
    height: 110px;
    border-radius: 28px;
    background: #fff;
    padding: 6px;
    border: 4px solid #fff;
    box-shadow:
        0 0 0 3px rgba(243, 147, 57, .45),
        0 22px 44px rgba(243, 147, 57, .45),
        0 8px 18px rgba(0, 0, 0, .35);
    transition: transform 280ms cubic-bezier(.34, 1.56, .64, 1);
}
.web-topnav--centered .web-brand-center:hover > img {
    transform: scale(1.06) rotate(-5deg);
}

@media (max-width: 1100px) and (min-width: 720px) {
    .web-topnav--centered .web-brand-center > img {
        width: 88px; height: 88px;
        border-radius: 22px;
    }
    .web-topnav--centered .web-nav-left  { padding-right: 62px; }
    .web-topnav--centered .web-nav-right { padding-left: 62px; }
}

/* Breakdown de puntos en tarjetas de Apostar */
.points-breakdown {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 10px 16px 0;
}
.points-breakdown .chip {
    font-size: 10.5px;
    padding: 4px 9px;
    gap: 4px;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .02em;
}
.points-breakdown .chip b { font-weight: 800; margin-left: 2px; }
.points-breakdown .chip > svg { width: 11px; height: 11px; flex: none; }

/* Fila de cuenta atrás dentro de la mcard: con margen sano en lugar de pegado arriba */
.countdown-row {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 16px 0;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--c-red-deep);
    font-weight: 700;
}
.countdown-row > svg { width: 12px; height: 12px; flex: none; }