/* ============================================================
   Decena de Oro — capa de diseño sobre Bootstrap 5.3

   Dirección: swiss / tipográfica. Retícula limpia, jerarquía por
   tamaño y peso más que por color, un verde profundo como color
   dominante y el oro reservado exclusivamente para la plata (pozo,
   recaudación). Nada de degradés decorativos.

   Mobile-first de verdad: todo lo táctil arranca en 48px, la acción
   principal de cada pantalla vive fija abajo al alcance del pulgar,
   y ninguna tabla obliga a hacer scroll horizontal.
   ============================================================ */

/* Las fuentes se cargan como <link> local desde includes/head.php
   (assets/vendor/fuentes-portal.css), no con un @import aca: un
   @import dentro de un CSS es serialmente bloqueante -- el navegador
   tiene que bajar y parsear este archivo entero antes de descubrir que
   necesita las fuentes, y recien ahi pedirlas. */

:root {
    /* Tipografías */
    --ff-display: 'Bricolage Grotesque', 'Sora', 'Segoe UI', sans-serif;
    --ff-texto:   'Sora', 'Segoe UI', sans-serif;
    --ff-cifra:   'Space Grotesk', 'Consolas', monospace;

    /* Paleta */
    --tinta:        #10201a;
    --tinta-suave:  #4b5b54;
    --tinta-tenue:  #8b9a93;
    --papel:        #f4f3ee;
    --superficie:   #ffffff;
    --borde:        #e2e0d8;
    --borde-fuerte: #cbc8bc;

    --verde:        #14663f;
    --verde-oscuro: #0d4a2d;
    --verde-claro:  #e6f1eb;
    --oro:          #a67c12;
    --oro-claro:    #fbf3dd;
    /* Mismo oro, pero calibrado para leerse sobre el verde oscuro
       (pozo, login, "ganaste"): el tono base pierde contraste ahi. */
    --oro-sobre-oscuro: #f2d382;
    --rojo:         #a52620;
    --rojo-claro:   #fbeae9;

    /* Retícula */
    --radio:     14px;
    --radio-sm:  10px;
    --toque:     48px;   /* alto mínimo de todo lo que se toca */
    --barra:     76px;   /* alto de la barra de navegación inferior */

    --sombra-sutil: 0 1px 2px rgba(16, 32, 26, .05);
    --sombra-card:  0 1px 3px rgba(16, 32, 26, .06), 0 8px 24px -12px rgba(16, 32, 26, .12);
}

/* ── Base ─────────────────────────────────────────────────── */

body {
    font-family: var(--ff-texto);
    background-color: var(--papel);
    color: var(--tinta);
    -webkit-font-smoothing: antialiased;
    /* Deja aire para la barra inferior + el gesto de inicio del celular */
    padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom));
}

body.sin-barra { padding-bottom: 0; }

h1, h2, h3, h4 {
    font-family: var(--ff-display);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--tinta);
}

.cifra {
    font-family: var(--ff-cifra);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* Rótulo de sección: chico, espaciado, en versalitas */
.rotulo {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
}

a { color: var(--verde); }

/* Foco visible y consistente en todo lo interactivo (WCAG 2.4.7) */
:focus-visible {
    outline: 3px solid var(--verde);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Encabezado ───────────────────────────────────────────── */

.topbar {
    background: var(--verde-oscuro);
    color: #fff;
    padding: .75rem 1rem;
    padding-top: calc(.75rem + env(safe-area-inset-top));
    position: sticky;
    top: 0;
    z-index: 1030;
}

.topbar__marca {
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: 1.0625rem;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: #fff;
    text-decoration: none;
}

.topbar__sub {
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

.topbar__usuario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--toque);
    height: var(--toque);
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-weight: 700;
    font-size: .875rem;
    text-decoration: none;
}

/* ── Contenedor ───────────────────────────────────────────── */

.pantalla {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.25rem 1rem 1.5rem;
}

.pantalla__titulo {
    font-size: 1.625rem;
    line-height: 1.15;
    margin: 0;
}

.pantalla__bajada {
    color: var(--tinta-suave);
    font-size: .9375rem;
    margin: .375rem 0 0;
}

/* ── Tarjetas ─────────────────────────────────────────────── */

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sutil);
}

.tarjeta--realce { box-shadow: var(--sombra-card); }

/* Tarjeta de aviso "esto necesita tu atención" (solicitud sin pagar,
   ganador sin liquidar, etc.): mismo tratamiento en todo el sitio en
   vez de repetir el mismo style="border-color:#e8d6a4" en cada pantalla. */
.tarjeta--oro { border-color: #e8d6a4; }

/* Util para no repetir style="color:var(--oro)" en cada ícono/cifra
   suelta que necesita el tono de "esto es plata". */
.texto-oro { color: var(--oro); }

/* Tarjeta del pozo: el único lugar donde manda el oro */
.pozo {
    background: var(--verde-oscuro);
    border-radius: var(--radio);
    color: #fff;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
}

/* Trama diagonal tenue: la firma visual del tablero */
.pozo::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, .05) 0 1px,
        transparent 1px 11px
    );
    pointer-events: none;
}

.pozo__monto {
    font-family: var(--ff-cifra);
    font-weight: 700;
    font-size: clamp(2.25rem, 12vw, 3.25rem);
    line-height: 1;
    color: var(--oro-sobre-oscuro);
    font-variant-numeric: tabular-nums;
}

.pozo__rotulo {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

/* ── Métricas ─────────────────────────────────────────────── */

.metrica {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    padding: .875rem;
}

.metrica__valor {
    font-family: var(--ff-cifra);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.metrica__valor--oro { color: var(--oro); }

.metrica__rotulo {
    font-size: .6875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
    margin-top: .25rem;
}

/* ── Bolillas (los números de la quiniela) ────────────────── */

.bolilla {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.125rem;
    height: 2.125rem;
    padding: 0 .375rem;
    border-radius: 8px;
    background: var(--verde-claro);
    border: 1px solid #cfe2d8;
    color: var(--verde-oscuro);
    font-family: var(--ff-cifra);
    font-weight: 700;
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
}

.bolilla--acertada {
    background: var(--verde);
    border-color: var(--verde);
    color: #fff;
}

/* Para una bolilla mas chica que la de siempre (leyendas, tablas
   densas): .bolilla trae min-width: 2.125rem, que le gana a cualquier
   width mas chico puesto inline -- 4 lugares la usaban con
   style="width:16/24/26px" y salian deformadas (34px de ancho real en
   vez del que se pedia). Este modificador baja min-width y el padding
   junto con el width, para que el width que le pongan sea el real. */
.bolilla--chica {
    min-width: 0;
    padding: 0;
}

.bolillas {
    display: flex;
    flex-wrap: wrap;
    gap: .3125rem;
}

/* ── Formularios ──────────────────────────────────────────── */

.form-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--tinta-suave);
    margin-bottom: .375rem;
}

.form-control,
.form-select {
    min-height: var(--toque);
    border-radius: var(--radio-sm);
    border-color: var(--borde-fuerte);
    /* 16px evita que Safari en iOS haga zoom al enfocar el campo */
    font-size: 1rem;
    padding: .625rem .875rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--verde);
    box-shadow: 0 0 0 .2rem rgba(20, 102, 63, .15);
}

.form-control::placeholder { color: var(--tinta-tenue); }

.form-text { font-size: .8125rem; color: var(--tinta-suave); }

/* Switches "activo" (clientes, usuarios, vendedores, promociones):
   sin esto, Bootstrap los pinta en azul cuando estan en ON. */
.form-check-input:checked {
    background-color: var(--verde);
    border-color: var(--verde);
}

.form-check-input:focus {
    border-color: var(--verde);
    box-shadow: 0 0 0 .2rem rgba(20, 102, 63, .15);
}

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

.btn {
    min-height: var(--toque);
    border-radius: var(--radio-sm);
    font-weight: 600;
    font-size: 1rem;
    padding: .625rem 1.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.btn-sm {
    min-height: 40px;
    font-size: .875rem;
    padding: .375rem .75rem;
}

.btn-primary {
    background: var(--verde);
    border-color: var(--verde);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--verde-oscuro) !important;
    border-color: var(--verde-oscuro) !important;
}

.btn-primary:disabled {
    background: var(--borde-fuerte);
    border-color: var(--borde-fuerte);
    color: #fff;
    opacity: 1;
}

.btn-whatsapp {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus,
.btn-whatsapp:active {
    background: #1EBE5D !important;
    border-color: #1EBE5D !important;
    color: #fff !important;
}

.btn-outline-secondary {
    border-color: var(--borde-fuerte);
    color: var(--tinta-suave);
    background: var(--superficie);
}

.btn-outline-danger { border-color: #ddb3b0; color: var(--rojo); }

/* ── Pestañas Semana/Sábado (nav-pills) ──────────────────────
   Sin esto, la pestaña activa sale con el azul por defecto de
   Bootstrap en vez del verde del sistema. */

.nav-pills .nav-link {
    color: var(--tinta-suave);
    font-weight: 600;
    border-radius: 999px;
}

.nav-pills .nav-link:hover { color: var(--verde-oscuro); }

.nav-pills .nav-link.active {
    background: var(--verde);
    color: #fff;
}

/* ── Menús de usuario (topbar, portal, vendedor) ─────────────
   El dropdown de Bootstrap trae su propio azul para hover/activo;
   estos tres menus lo usan sin ningun override propio. */

.dropdown-menu {
    border-color: var(--borde);
    border-radius: var(--radio-sm);
    box-shadow: var(--sombra-card);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--verde-claro);
    color: var(--verde-oscuro);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--verde);
    color: #fff;
}

/* ── Acción principal fija al pulgar ──────────────────────── */

.accion-fija {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035;
    background: rgba(244, 243, 238, .94);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--borde);
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
}

.accion-fija__interior {
    max-width: 720px;
    margin: 0 auto;
}

/* Cuando hay barra de acción, no hay barra de navegación */
body.con-accion-fija { padding-bottom: 7.5rem; }

/* ── Navegación inferior ──────────────────────────────────── */

/* Mismo verde que .topbar: la barra de arriba, el theme-color del
   navegador y el manifest de la PWA ya son --verde-oscuro, asi que la
   navegacion de abajo cierra ese marco en vez de desvanecerse. En
   blanco daba 1,11:1 contra el papel (invisible); asi da 9,3:1 y no
   necesita borde para separarse. De paso, la franja del gesto de
   inicio del celular queda verde y no blanca. */
.navbar-abajo {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    background: var(--verde-oscuro);
    padding-bottom: env(safe-area-inset-bottom);
}

.navbar-abajo__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .125rem;
    min-height: var(--barra);
    padding: .5rem .25rem;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.navbar-abajo__item i { font-size: 1.375rem; }

/* Fondo + barrita indicadora ademas del color: el estado activo no
   depende solo del brillo del texto. La barrita va con box-shadow
   inset (no border/margin) para no alterar min-height: var(--barra),
   que el body usa tal cual para reservar su padding-bottom. */
.navbar-abajo__item.active {
    color: #fff;
    background: rgba(255, 255, 255, .10);
    box-shadow: inset 0 3px 0 #fff;
}

.navbar-abajo__item.active i { transform: translateY(-1px); }

/* El disparador de "Más" es un <button>, no un <a>: reset de los
   estilos por defecto del navegador para que quede igual que los
   demas items (misma tipografia, sin fondo/borde propios de boton). */
.navbar-abajo__item--boton {
    background: none;
    border: 0;
    font-family: inherit;
}

/* ── Hoja "Más secciones" ─────────────────────────────────────
   Lista agrupada por categoria (Jugadas / Equipo / Negocio) sobre la
   superficie clara de siempre -- opcion elegida entre 4 alternativas
   mostradas al usuario. Mismo criterio visual que .dropdown-menu (el
   otro menu de navegacion que ya existe, en la topbar): fondo blanco,
   icono en verde, texto en tinta. Los rotulos de grupo usan la misma
   clase .rotulo que ya define el resto de la app (mayusculas chicas,
   letter-spacing, tinta-tenue). */
.menu-mas {
    background: var(--superficie);
    color: var(--tinta);
    max-height: 85vh;
}

.menu-mas__header {
    border-bottom: 1px solid var(--borde);
    padding: 1rem 1.25rem;
}

.menu-mas__titulo {
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: 1.0625rem;
    color: var(--tinta);
}

.menu-mas__body {
    padding: .25rem 0 calc(1.25rem + env(safe-area-inset-bottom));
}

.menu-mas__grupo { margin-top: .875rem; }
.menu-mas__grupo:first-child { margin-top: .25rem; }

.menu-mas__rotulo {
    padding: 0 1.25rem .375rem;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
}

.menu-mas__fila {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .625rem 1.25rem;
    color: var(--tinta);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 600;
}

.menu-mas__fila i { font-size: 1.1875rem; color: var(--verde); flex-shrink: 0; }

.menu-mas__fila:hover,
.menu-mas__fila:focus,
.menu-mas__fila:active {
    background: var(--verde-claro);
    color: var(--tinta);
}

/* ── Listados ─────────────────────────────────────────────── */

/* En vez de tablas: filas apiladas que entran en 360px de ancho */
.fila {
    display: block;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    padding: .875rem;
    color: inherit;
    text-decoration: none;
}

.fila + .fila { margin-top: .5rem; }

a.fila:hover { border-color: var(--verde); }

.fila__titulo {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    margin: 0;
}

.fila__meta {
    font-size: .8125rem;
    color: var(--tinta-suave);
    margin: .125rem 0 0;
}

.vacio {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--tinta-suave);
}

.vacio i {
    font-size: 2.5rem;
    color: var(--borde-fuerte);
    display: block;
    margin-bottom: .75rem;
}

/* ── Etiquetas de estado ──────────────────────────────────── */

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1875rem .5rem;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.etiqueta--verde   { background: var(--verde-claro); color: var(--verde-oscuro); }
.etiqueta--oro     { background: var(--oro-claro);   color: var(--oro); }
.etiqueta--roja    { background: var(--rojo-claro);  color: var(--rojo); }
.etiqueta--gris    { background: #eceae3;            color: var(--tinta-suave); }

/* ── Login ────────────────────────────────────────────────── */

.login {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem 1.25rem;
    background: var(--verde-oscuro);
}

/* Misma trama diagonal que el pozo: hilo visual entre las dos pantallas */
.login::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, .04) 0 1px,
        transparent 1px 12px
    );
    pointer-events: none;
}

.login__caja {
    position: relative;
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
}

.login__marca {
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: clamp(2rem, 9vw, 2.75rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    color: #fff;
    margin-bottom: .5rem;
}

.login__marca em {
    font-style: normal;
    color: var(--oro-sobre-oscuro);
    display: block;
}

.login__bajada {
    color: rgba(255, 255, 255, .68);
    font-size: .9375rem;
    margin-bottom: 1.75rem;
}

.login__panel {
    background: var(--superficie);
    border-radius: var(--radio);
    padding: 1.5rem 1.25rem;
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .5);
}

/* ── Alertas ──────────────────────────────────────────────── */

.alert {
    border-radius: var(--radio-sm);
    border: 1px solid transparent;
    font-size: .9375rem;
    padding: .875rem 1rem;
}

.alert-success { background: var(--verde-claro); border-color: #c6ded1; color: var(--verde-oscuro); }
.alert-danger  { background: var(--rojo-claro);  border-color: #eec9c7; color: var(--rojo); }
.alert-warning { background: var(--oro-claro);   border-color: #e8d6a4; color: #7a5a0d; }
.alert-info    { background: #e9eff4;            border-color: #cddbe6; color: #22475f; }

/* ── Escritorio ───────────────────────────────────────────── */

@media (min-width: 768px) {
    .pantalla { padding: 2rem 1.5rem 2.5rem; }
    .pantalla__titulo { font-size: 2rem; }
    body { padding-bottom: 2rem; }

    /* En pantalla grande el menú va arriba, no tapando el contenido.
       Sin borde: uno claro alrededor de la caja verde oscura queda
       como un artefacto (antes separaba la barra blanca del fondo,
       ahora el contraste ya la separa solo). */
    .navbar-abajo {
        position: static;
        max-width: 720px;
        margin: 1rem auto 0;
        border: 0;
        border-radius: var(--radio-sm);
        overflow: hidden;
    }

    .navbar-abajo__item { min-height: 60px; flex-direction: row; gap: .5rem; font-size: .875rem; }
    .navbar-abajo__item i { font-size: 1.125rem; }

    .accion-fija {
        position: static;
        background: none;
        border-top: 0;
        padding: 0;
        backdrop-filter: none;
    }

    body.con-accion-fija { padding-bottom: 2rem; }
}

/* ── Respeto por prefers-reduced-motion ───────────────────── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ============================================================
   Carga de jugada — el corazón táctil de la app
   ============================================================ */

/* Las 10 casillas: 5 por fila en el celular, 10 en pantalla ancha.
   Cada una entra holgada bajo el pulgar y muestra el número en la
   misma tipografía monoespaciada que el resto de las cifras. */
.casillas {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .5rem;
}

.casilla { position: relative; }

.casilla__indice {
    position: absolute;
    top: .25rem;
    left: .4375rem;
    font-size: .625rem;
    font-weight: 700;
    color: var(--tinta-tenue);
    pointer-events: none;
}

.casilla__input {
    width: 100%;
    height: 4rem;
    padding: .75rem 0 0;
    text-align: center;
    font-family: var(--ff-cifra);
    font-weight: 700;
    /* 1.5rem = 24px: bien por encima del umbral de zoom de iOS */
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    color: var(--tinta);
    background: var(--superficie);
    border: 1.5px solid var(--borde-fuerte);
    border-radius: var(--radio-sm);
    transition: border-color .12s ease, background-color .12s ease;
}

.casilla__input::placeholder { color: var(--borde-fuerte); font-weight: 500; }

.casilla__input:focus {
    outline: none;
    border-color: var(--verde);
    background: #fff;
    box-shadow: 0 0 0 .2rem rgba(20, 102, 63, .15);
}

.casilla__input.cargada {
    border-color: var(--verde);
    background: var(--verde-claro);
    color: var(--verde-oscuro);
}

/* Repetido: color + un aro grueso, para que no dependa sólo del color */
.casilla__input.repetida {
    border-color: var(--rojo);
    border-width: 2.5px;
    background: var(--rojo-claro);
    color: var(--rojo);
}

/* Tablero 00–99 de sólo lectura: confirmación visual de la jugada.
   No se toca (sería un blanco de 30px), sólo se mira. */
.tablero {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 2px;
}

.tablero__celda {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background: #eceae3;
    color: var(--tinta-tenue);
    font-family: var(--ff-cifra);
    font-size: .5625rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.tablero__celda.marcada {
    background: var(--verde);
    color: #fff;
    font-weight: 700;
}

/* Mapa de calor de frecuencia (admin/reportes/numeros.php).
   Escala secuencial de un solo matiz -verde, la marca-, reusando los
   3 tonos ya existentes en vez de inventar colores nuevos: mas claro
   que el esperado, el esperado (mismo par bg/texto que .marcada,
   ya probado), y mas oscuro que el esperado. El default de
   .tablero__celda (arriba) cubre "nunca salio en el periodo": no
   hace falta una clase mas para eso. El acento dorado se reserva para
   marcar el numero mas caliente puntual (--record), nunca como un
   escalon mas de la escala -mezclar matices en una escala secuencial
   confunde magnitud con identidad. */
.tablero__celda--n1 { background: var(--verde-claro); color: var(--verde-oscuro); }
.tablero__celda--n2 { background: var(--verde); color: #fff; font-weight: 700; }
.tablero__celda--n3 { background: var(--verde-oscuro); color: #fff; font-weight: 700; }

.tablero__celda--record {
    outline: 2px solid var(--oro);
    outline-offset: -2px;
}

/* Contador de la barra fija: 7/10 */
.contador {
    font-family: var(--ff-cifra);
    font-weight: 700;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.contador--completo { color: var(--verde); }

@media (min-width: 576px) {
    .casillas { grid-template-columns: repeat(10, 1fr); }
    .casilla__input { height: 3.75rem; font-size: 1.375rem; }
}

/* ============================================================
   Portal del cliente

   Misma paleta y tipografías que el panel — es la misma marca —
   pero todo un escalón más grande y más quieto. El supervisor
   mira estas pantallas cien veces por semana; el cliente, una.
   Así que acá manda el estado (ganó / no ganó / sigue jugando),
   y los números son el respaldo, no el titular.

   Los aciertos NO se marcan sólo por color: llevan un tilde
   adentro. Marcar "salió" únicamente en verde deja afuera a
   quien no distingue verde de gris, que es ~8% de los varones.
   ============================================================ */

.portal-nav { --barra: 84px; }

/* ── Encabezado del cliente ───────────────────────────────── */

.cabecera-cliente {
    background: var(--verde-oscuro);
    color: #fff;
    padding: 1rem 1rem 1.25rem;
    padding-top: calc(1rem + env(safe-area-inset-top));
    position: relative;
    /* Sin overflow:hidden a proposito: a diferencia de .pozo (una tarjeta
       con bordes redondeados que si necesita recortar la trama), este
       header no tiene border-radius, asi que no hace falta recortar nada
       — y el recorte era lo que le comia el menu de "Salir" cuando se
       abria (queda mas alto que el header). */
}

/* La misma trama diagonal del pozo y del login: hilo entre pantallas */
.cabecera-cliente::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, .05) 0 1px,
        transparent 1px 12px
    );
    pointer-events: none;
}

.cabecera-cliente__interior {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
}

.cabecera-cliente__saludo {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0;
}

.cabecera-cliente__nro {
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

/* ── Estado de la jugada: el titular de cada tarjeta ──────── */

.estado-jugada {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1rem .875rem;
    border-radius: var(--radio) var(--radio) 0 0;
    margin: -1px -1px 0;
}

.estado-jugada__icono {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    font-size: 1.5rem;
}

.estado-jugada__titulo {
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0;
}

.estado-jugada__detalle {
    font-size: .875rem;
    margin: .125rem 0 0;
    opacity: .85;
}

/* Ganó: el único lugar del portal donde aparece el oro */
.estado-jugada--gano {
    background: var(--verde-oscuro);
    color: #fff;
}
.estado-jugada--gano .estado-jugada__icono { background: var(--oro-sobre-oscuro); color: var(--verde-oscuro); }
.estado-jugada--gano .estado-jugada__titulo { color: var(--oro-sobre-oscuro); }

/* Sigue en juego */
.estado-jugada--jugando { background: var(--verde-claro); color: var(--verde-oscuro); }
.estado-jugada--jugando .estado-jugada__icono { background: var(--verde); color: #fff; }

/* Ciclo cerrado sin premio: gris tranquilo, sin dramatismo */
.estado-jugada--cerrada { background: #eceae3; color: var(--tinta-suave); }
.estado-jugada--cerrada .estado-jugada__icono { background: var(--borde-fuerte); color: #fff; }

.premio-monto {
    font-family: var(--ff-cifra);
    font-weight: 700;
    font-size: clamp(2rem, 10vw, 2.75rem);
    line-height: 1;
    color: var(--oro-sobre-oscuro);
    font-variant-numeric: tabular-nums;
}

/* ── Bolillas grandes, para el cliente ────────────────────── */

.bolillas-cliente {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .5rem;
}

.bolilla-cli {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: var(--radio-sm);
    background: var(--superficie);
    border: 2px solid var(--borde);
    color: var(--tinta-tenue);
    font-family: var(--ff-cifra);
    font-weight: 700;
    font-size: 1.375rem;
    font-variant-numeric: tabular-nums;
}

/* Salió: color + tilde. Nunca sólo color. */
.bolilla-cli--salio {
    background: var(--verde);
    border-color: var(--verde);
    color: #fff;
}

.bolilla-cli--salio::after {
    content: '';
    position: absolute;
    top: -6px;
    right: -6px;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--verde);
    /* Tilde dibujado en SVG para no depender de la fuente de íconos */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2314663f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
    background-size: .75rem;
    background-repeat: no-repeat;
    background-position: center;
}

/* ── Renglón por sorteo ───────────────────────────────────── */

.reng-sorteo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .625rem .75rem;
    border-radius: var(--radio-sm);
    font-size: .9375rem;
}

.reng-sorteo + .reng-sorteo { margin-top: .25rem; }

.reng-sorteo--mejor {
    background: var(--verde-claro);
    font-weight: 600;
    color: var(--verde-oscuro);
}

.reng-sorteo__conteo {
    font-family: var(--ff-cifra);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.reng-sorteo--clic {
    width: 100%;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.reng-sorteo__flecha { transition: transform .15s ease; }
.reng-sorteo--clic:not(.collapsed) .reng-sorteo__flecha { transform: rotate(180deg); }

/* ── Pozo del portal: más grande que en el panel ──────────── */

.pozo-cliente { padding: 1.5rem 1.25rem; }
.pozo-cliente .pozo__monto { font-size: clamp(2.75rem, 15vw, 4rem); }

@media (min-width: 576px) {
    .bolillas-cliente { grid-template-columns: repeat(10, 1fr); }
    .bolilla-cli { font-size: 1.25rem; }
}

/* ============================================================
   Reportes

   Sobre los gráficos: la recaudación por ciclo va como barras de
   UNA sola serie, no apiladas 60/40. El reparto es un porcentaje
   fijo, así que una barra apilada mostraría exactamente la misma
   proporción todas las semanas — codificaría una constante y no
   agregaría información. El 60/40 vive arriba, en las tarjetas,
   que es donde un número fijo se lee mejor.

   Una serie ⇒ sin leyenda (el título la nombra), un solo tono,
   etiqueta directa por barra, ejes recesivos.
   ============================================================ */

.barra-ciclo {
    display: block;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    padding: .75rem .875rem;
    color: inherit;
    text-decoration: none;
}

.barra-ciclo + .barra-ciclo { margin-top: .5rem; }

a.barra-ciclo:hover { border-color: var(--verde); }

/* La pista es recesiva; el dato es lo único con color */
.barra-ciclo__pista {
    position: relative;
    height: 10px;
    margin-top: .5rem;
    border-radius: 999px;
    background: #eceae3;
    overflow: hidden;
}

.barra-ciclo__dato {
    position: absolute;
    inset: 0 auto 0 0;
    /* Extremo redondeado sólo del lado del dato: el otro queda anclado
       a la línea de base, que es de donde arranca la comparación */
    border-radius: 0 999px 999px 0;
    background: var(--verde);
    min-width: 3px;
}


/* ── Tablas densas ────────────────────────────────────────── */

/* La tabla scrollea dentro de su caja; el body nunca de costado */
.tabla-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    background: var(--superficie);
}

.tabla-reporte {
    width: 100%;
    margin: 0;
    font-size: .875rem;
    border-collapse: separate;
    border-spacing: 0;
}

.tabla-reporte th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--papel);
    border-bottom: 1px solid var(--borde);
    padding: .625rem .75rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
    white-space: nowrap;
    text-align: left;
}

.tabla-reporte td {
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--borde);
    vertical-align: top;
    white-space: nowrap;
}

.tabla-reporte tbody tr:last-child td { border-bottom: 0; }

.tabla-reporte .num {
    font-family: var(--ff-cifra);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Aviso de que la tabla se desplaza, que en un celular no es obvio */
.tabla-pista {
    font-size: .75rem;
    color: var(--tinta-tenue);
    margin-top: .375rem;
}

/* ── Filtros ──────────────────────────────────────────────── */

.filtros {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    padding: .875rem;
}

.filtros .form-label { margin-bottom: .25rem; }

/* ============================================================
   Solicitud de pago (Fase 6)

   El código es lo primero que hay que poder leer y dictar por
   teléfono, así que se separa letra por letra como un localizador
   de vuelo. El monto sigue la regla del resto de la app: el oro
   es sólo para plata, y el código no lo es — va en blanco sobre el
   mismo verde oscuro que el pozo, para que ambas pantallas se
   sientan de la misma familia.
   ============================================================ */

.codigo-solicitud {
    background: var(--verde-oscuro);
    border-radius: var(--radio);
    color: #fff;
    padding: 1.75rem 1.25rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.codigo-solicitud::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, .05) 0 1px,
        transparent 1px 12px
    );
    pointer-events: none;
}

.codigo-solicitud__rotulo {
    position: relative;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

.codigo-solicitud__valor {
    position: relative;
    font-family: var(--ff-cifra);
    font-weight: 700;
    font-size: clamp(2.5rem, 15vw, 3.75rem);
    line-height: 1.15;
    /* Separado como un localizador: mas facil de leer y dictar */
    letter-spacing: .3em;
    /* Compensa el letter-spacing para que el bloque quede centrado */
    padding-left: .3em;
    color: #fff;
    word-break: break-all;
}

.codigo-solicitud__copiar {
    position: relative;
    margin-top: .5rem;
}

/* Monto a pagar: a diferencia del premio de portal_jugada, esto es
   plata que el cliente TODAVIA DEBE, no plata que gano — por eso NO
   lleva el oro (reservado para pozo/recaudacion/premio), va en la
   tinta normal para no confundir una deuda con un premio. */
.monto-a-pagar {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1.25rem;
    text-align: center;
}

.monto-a-pagar__valor {
    font-family: var(--ff-cifra);
    font-weight: 700;
    font-size: clamp(2rem, 11vw, 2.75rem);
    line-height: 1.1;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}

/* Alias de transferencia: separado del texto de la instruccion para que
   se pueda leer (o dictar) de un vistazo, sin perderse en el parrafo. */
.alias-transferencia {
    display: inline-block;
    margin: .5rem 0;
    padding: .5rem 1rem;
    background: var(--superficie);
    border: 1.5px dashed var(--oro);
    border-radius: var(--radio-sm);
    font-family: var(--ff-cifra);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: .01em;
    color: var(--tinta);
}