/* =====================================================================
   SORTEOS DIARIOS — Hoja de estilos
   Identidad: base oscura (night arcade) + neón violeta/rosa + oro de premio.
   Tipografía: Russo One (display) / Chakra Petch (texto).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Russo+One&display=swap');

/* ---------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------- */
:root {
    /* Superficies */
    --bg:            #0F0F23;
    --bg-deep:       #09091A;
    --surface:       #1A1832;
    --surface-2:     #231F3F;
    --surface-3:     #2C2750;

    /* Texto */
    --text:          #EEF0F8;
    --text-muted:    #9FA6C4;
    --text-dim:      #868DB0;

    /* Marca */
    --primary:       #7C3AED;
    --primary-soft:  #A78BFA;
    --primary-deep:  #5B21B6;
    --on-primary:    #FFFFFF;

    --accent:        #F43F5E;   /* acentos, bordes y brillos */
    --accent-btn:    #BE123C;   /* fondo de botón: blanco encima da 6.3:1 */
    --accent-soft:   #FB7185;
    --on-accent:     #FFFFFF;

    --gold:          #FBBF24;
    --gold-deep:     #B45309;

    /* Estado */
    --ok:            #22C55E;
    --ok-deep:       #15803D;
    --warn:          #F59E0B;
    --danger:        #EF4444;
    --whatsapp:      #25D366;

    /* Bordes y sombras */
    --border:        rgba(167,139,250,.18);
    --border-strong: rgba(167,139,250,.38);
    --shadow:        0 18px 40px rgba(0,0,0,.45);
    --shadow-sm:     0 6px 16px rgba(0,0,0,.35);
    --glow-primary:  0 0 24px rgba(124,58,237,.45);
    --glow-accent:   0 0 24px rgba(244,63,94,.45);

    /* Formas */
    --r-sm: 8px;
    --r:    14px;
    --r-lg: 20px;
    --r-pill: 999px;

    /* Ritmo */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;

    /* Movimiento */
    --t-fast: 140ms cubic-bezier(.4,0,.2,1);
    --t:      220ms cubic-bezier(.4,0,.2,1);

    /* Tipografía */
    --font-display: 'Russo One', system-ui, sans-serif;
    --font-body:    'Chakra Petch', system-ui, -apple-system, sans-serif;

    /* Compatibilidad con estilos antiguos del marcado */
    --color-principal: var(--primary);
    --color-exito:     var(--ok);
    --color-peligro:   var(--danger);
    --color-fondo:     var(--bg);
    --color-texto:     var(--text);
    --fuente-principal: var(--font-body);

    color-scheme: dark;
}

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--bg);
    background-image:
        radial-gradient(900px 500px at 12% -8%, rgba(124,58,237,.22), transparent 60%),
        radial-gradient(760px 460px at 88% 4%, rgba(244,63,94,.14), transparent 62%);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: .4px;
    line-height: 1.2;
    color: var(--text);
}

a { color: var(--primary-soft); }

img { max-width: 100%; }

input, select, textarea, button { font-family: inherit; font-size: inherit; }

::selection { background: var(--primary); color: #fff; }

/* Foco visible y consistente en todo el sitio */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--primary-soft);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* Barras de scroll */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--r-pill); }
*::-webkit-scrollbar-thumb:hover { background: var(--primary-deep); }

/* ---------------------------------------------------------------
   3. Botones
   --------------------------------------------------------------- */
.btn-principal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border: none;
    border-radius: var(--r-pill);
    background: linear-gradient(100deg, var(--primary) 0%, var(--accent-btn) 100%);
    color: var(--on-primary);
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: .6px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(124,58,237,.38);
    transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
.btn-principal:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(244,63,94,.42);
    filter: brightness(1.08);
}
.btn-principal:active:not(:disabled) { transform: translateY(0) scale(.98); }
.btn-principal:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.btn-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    background: rgba(124,58,237,.10);
    color: var(--primary-soft);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn-secundario:hover {
    background: rgba(124,58,237,.22);
    border-color: var(--primary);
    color: #fff;
}

.btn-pequeno { padding: 9px 16px; font-size: 14px; }
.btn-grande  { padding: 17px 34px; font-size: 18px; }

/* Botones de acción compactos del panel */
.btn-ver, .btn-editar, .btn-eliminar, .btn-aprobar-mini, .btn-borrar-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 2px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--t-fast);
}
.btn-ver:hover        { background: rgba(124,58,237,.25); color: var(--primary-soft); border-color: var(--primary); }
.btn-editar:hover     { background: rgba(251,191,36,.20);  color: var(--gold);        border-color: var(--gold); }
.btn-eliminar:hover   { background: rgba(239,68,68,.20);   color: var(--danger);      border-color: var(--danger); }
.btn-aprobar-mini     { color: var(--ok); border-color: rgba(34,197,94,.4); }
.btn-aprobar-mini:hover { background: rgba(34,197,94,.22); }

/* Los mismos botones, pero cuando llevan texto al lado del icono */
.btn-ver.btn-pequeno,
.btn-editar.btn-pequeno,
.btn-eliminar.btn-pequeno {
    width: auto;
    height: auto;
    gap: 8px;
    padding: 9px 18px;
    border-radius: var(--r-pill);
    font-weight: 600;
}
.btn-eliminar.btn-pequeno {
    border-color: rgba(239,68,68,.45);
    background: rgba(239,68,68,.14);
    color: #FCA5A5;
}

/* ---------------------------------------------------------------
   4. Home pública
   --------------------------------------------------------------- */
.body-landing { padding-bottom: var(--space-6); }

.cliente-container {
    width: min(1180px, 100% - 32px);
    margin: 0 auto;
    padding-top: var(--space-4);
}

/* Banner del encabezado: a todo el ancho de la página. El alto sigue la
   proporción de la imagen (se ve completa) hasta un mínimo de 210 px; por
   debajo de ese ancho la imagen se recorta por los lados y en celular queda
   solo el centro. Con un máximo de 520 px en monitores muy anchos. */
.banner-header {
    width: 100%;
    height: clamp(210px, calc(100vw / var(--banner-proporcion, 4.436)), 520px);
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background: var(--bg-deep);
    line-height: 0;
}
.banner-header img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.public-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: var(--space-4);
}

/* --- Tarjeta de sorteo --- */
.public-card {
    position: relative;
    display: block;
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: linear-gradient(170deg, var(--surface-2) 0%, var(--surface) 70%);
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.public-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--gold));
    opacity: .9;
}
.public-card:hover {
    transform: translateY(-6px);
    border-color: var(--border-strong);
    box-shadow: 0 26px 50px rgba(0,0,0,.5), var(--glow-primary);
}

/* La portada sale de los márgenes de la tarjeta para quedar de borde a borde.
   `max-width: none` es obligatorio: sin él, la regla global `img { max-width: 100% }`
   la encoge al ancho interno y queda corta por el lado derecho. */
.public-card-portada {
    display: block;
    width: calc(100% + var(--space-4) * 2);
    max-width: none;
    margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4);
    border-bottom: 1px solid var(--border);
}

.public-card-header { text-align: center; }
.public-card-info   { width: 100%; }

.precio-dorado {
    display: inline-block;
    padding: 9px 20px;
    border-radius: var(--r-pill);
    background: linear-gradient(100deg, var(--gold) 0%, #F97316 100%);
    color: #1A1200;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: .8px;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(251,191,36,.3);
}

.meta-info span,
.badge-tipo,
.fecha-sorteo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-pill) !important;
    background: var(--surface-3) !important;
    color: var(--text-muted) !important;
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: .3px;
}

.public-criterios {
    margin-top: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: var(--r);
    background: rgba(251,191,36,.06);
}
.public-criterios h4 {
    margin: 0 0 10px;
    color: var(--gold);
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.public-criterios ul { margin: 0; padding: 0; list-style: none; }
.public-criterios li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--border);
}
.public-criterios li:last-child { border-bottom: none; }

.premio-nombre {
    font-family: var(--font-display);
    font-size: 19px;
    color: #fff;
}

.public-tag {
    padding: 4px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    background: rgba(124,58,237,.18);
    color: var(--primary-soft);
    font-size: 11px;
    font-weight: 600;
}

/* --- Barra de progreso --- */
.dash-sorteo-progreso,
.landing-progreso { margin-top: var(--space-3); }

.info-progreso {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.info-progreso strong {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--accent-soft);
}

.barra-mini-fondo {
    height: 10px;
    border-radius: var(--r-pill);
    background: var(--bg-deep);
    box-shadow: inset 0 1px 4px rgba(0,0,0,.6);
    overflow: hidden;
}
.barra-mini-relleno {
    height: 100%;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent-btn) 60%, var(--gold) 100%);
    box-shadow: 0 0 14px rgba(244,63,94,.6);
    transition: width 1s cubic-bezier(.4,0,.2,1);
}

.btn-jugar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: var(--space-4);
    padding: 15px;
    border-radius: var(--r-pill);
    background: linear-gradient(100deg, var(--primary) 0%, var(--accent-btn) 100%);
    color: #fff;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 10px 26px rgba(124,58,237,.4);
    transition: filter var(--t-fast);
}
.public-card:hover .btn-jugar { filter: brightness(1.12); }

/* --- Estado vacío --- */
.mensaje-vacio {
    grid-column: 1 / -1;
    padding: var(--space-6) var(--space-4);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--text-muted);
    text-align: center;
}
.mensaje-vacio h2 { color: var(--text) !important; }

/* --- Preguntas frecuentes --- */
.faq-section { width: min(820px, 100% - 32px); margin: var(--space-6) auto; }

.faq-title {
    margin-bottom: var(--space-4);
    color: var(--text);
    font-size: clamp(22px, 4vw, 30px);
    text-align: center;
}
.faq-title i { color: var(--accent); }

.faq-item {
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    overflow: hidden;
    transition: border-color var(--t);
}
.faq-item:hover, .faq-item.active { border-color: var(--border-strong); }

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 18px 20px;
    border: none;
    background: none;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.faq-question i { color: var(--primary-soft); transition: transform var(--t); }
.faq-item.active .faq-question i { transform: rotate(180deg); }

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t);
}
.faq-answer p {
    margin: 0;
    padding: 0 20px 20px;
    color: var(--text-muted);
    font-size: 14px;
}
.faq-answer strong { color: var(--primary-soft); }

/* ---------------------------------------------------------------
   5. Página del sorteo
   --------------------------------------------------------------- */
.landing-container {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding-bottom: var(--space-4);
}

.barra-volver { padding: var(--space-3) var(--space-3) 0; }

.btn-volver-sorteos {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 20px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    background: rgba(26,24,50,.85);
    backdrop-filter: blur(8px);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--t-fast);
}
.btn-volver-sorteos:hover {
    border-color: var(--primary);
    background: rgba(124,58,237,.2);
    color: #fff;
}

.landing-hero {
    margin: var(--space-3) var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    line-height: 0;
}
.landing-hero img { width: 100%; height: auto; display: block; }

.game-card { padding: 0 var(--space-3); }

/* --- Herramientas: buscador y dado --- */
.tools-container {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    background: rgba(15,15,35,.92);
    backdrop-filter: blur(12px);
}

.tool-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    gap: 10px;
    padding: 0 18px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.tool-search:focus-within { border-color: var(--primary); box-shadow: var(--glow-primary); }
.tool-search i { color: var(--text-dim); }
.tool-search input {
    flex: 1;
    width: 100%;
    padding: 14px 0;
    border: none;
    background: none;
    color: var(--text);
    font-size: 16px;
    outline: none;
}
.tool-search input::placeholder { color: var(--text-dim); }
.tool-search input::-webkit-outer-spin-button,
.tool-search input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tool-search input[type=number] { -moz-appearance: textfield; }

.tool-luck { display: flex; align-items: center; }
.luck-controls { display: flex; gap: 8px; align-items: center; }

.luck-input, .luck-select {
    height: 48px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
}

.btn-azar {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: var(--r-sm);
    background: linear-gradient(140deg, var(--accent-btn) 0%, var(--primary) 100%);
    color: #fff;
    font-size: 19px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(244,63,94,.35);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.btn-azar:hover  { transform: rotate(-12deg) scale(1.06); box-shadow: var(--glow-accent); }
.btn-azar:active { transform: scale(.94); }

/* --- Tableros de números --- */
.tablero-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
    margin-top: var(--space-3);
}

.numero-boleto, .numero-grilla {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 2px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: .5px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.numero-boleto:hover, .numero-grilla:hover {
    border-color: var(--primary);
    background: var(--surface-3);
    color: #fff;
}
.numero-boleto:active, .numero-grilla:active { transform: scale(.9); }

.numero-boleto.seleccionado, .numero-grilla.seleccionado {
    border-color: var(--accent);
    background: linear-gradient(145deg, var(--accent-btn) 0%, var(--primary) 100%);
    color: #fff;
    box-shadow: 0 0 16px rgba(244,63,94,.55);
}

.grilla-10k {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
}

/* --- Paginación --- */
.paginacion-10k {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: var(--space-4) 0;
}
.btn-pag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--primary-soft);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--t-fast);
}
.btn-pag:hover:not(:disabled) {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
    box-shadow: var(--glow-primary);
}
.btn-pag:disabled { opacity: .3; cursor: not-allowed; }

.info-pag {
    min-width: 110px;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: .6px;
    text-align: center;
}

.volver-final { text-align: center; padding: var(--space-3) var(--space-3) var(--space-5); }
.volver-final .btn-volver-sorteos { width: 100%; max-width: 420px; justify-content: center; padding: 15px; }

/* --- Barra flotante de la canasta --- */
.barra-compra {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(1100px, calc(100% - 28px));
    padding: 14px 18px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    background: rgba(26,24,50,.94);
    backdrop-filter: blur(16px);
    box-shadow: 0 -4px 50px rgba(0,0,0,.6), var(--glow-primary);
    transform: translate(-50%, calc(100% + 32px));
    opacity: 0;
    visibility: hidden;
    transition: transform var(--t), opacity var(--t), visibility var(--t);
}
.barra-compra.visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

.btn-cerrar-barra {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--t-fast);
}
.btn-cerrar-barra:hover { background: var(--danger); color: #fff; }

.info-compra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.info-compra > span:first-child {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.info-compra strong {
    font-family: var(--font-display);
    font-size: 23px;
    color: var(--gold);
}

.detalle-seleccion-publico,
.detalle-seleccion {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
    max-height: 62px;
    overflow-y: auto;
}
.mini-pastilla {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    background: rgba(124,58,237,.25);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--t-fast);
}
.mini-pastilla:hover { background: var(--danger); }

/* --- Modales --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(5,5,16,.82);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t), visibility var(--t);
}
.modal-overlay.visible { opacity: 1; visibility: visible; }

.modal-content, .modal-exito-content {
    width: min(460px, 100%);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow), var(--glow-primary);
    overflow: hidden;
    transform: translateY(18px) scale(.97);
    transition: transform var(--t);
}
.modal-overlay.visible .modal-content,
.modal-overlay.visible .modal-exito-content { transform: translateY(0) scale(1); }

.modal-header, .modal-exito-header {
    position: relative;
    padding: 24px 22px 12px;
    border-bottom: 1px solid var(--border);
}
.modal-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 19px;
}
.modal-header h2 i { color: var(--whatsapp); }

.close-modal {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: 24px;
    line-height: 1;
    border: none;          /* también se usa como <button> */
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--t-fast);
    z-index: 1;
}
.close-modal:hover { background: var(--danger); color: #fff; }

.modal-body, .modal-exito-body { padding: 20px 22px; overflow-y: auto; }
.modal-body p { color: var(--text-muted); }
.modal-footer { padding: 16px 22px 22px; border-top: 1px solid var(--border); }

.contenedor-numeros-scroll {
    max-height: 104px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--bg-deep);
    color: var(--primary-soft);
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 1px;
    word-break: break-all;
}

.icono-exito { background: rgba(251,191,36,.15) !important; color: var(--gold) !important; }

/* Cuentas bancarias */
.lista-bancos {
    list-style: none;
    margin: 18px 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
}
.banco-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.banco-item:last-child { border-bottom: none; }
.banco-info { display: flex; flex-direction: column; line-height: 1.35; }
.banco-nombre {
    color: var(--text-dim) !important;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 1px;
}
.banco-num {
    font-family: var(--font-display) !important;
    font-size: 20px !important;
    color: var(--gold) !important;
    letter-spacing: 1.5px;
}
.btn-copiar-banco {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-3);
    color: var(--primary-soft);
    cursor: pointer;
    transition: all var(--t-fast);
}
.btn-copiar-banco:hover { background: var(--primary); color: #fff; }

.btn-exito-inicio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
    padding: 15px;
    border: none;
    border-radius: var(--r-pill);
    color: #fff;
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: .5px;
    text-decoration: none;
    cursor: pointer;
    transition: filter var(--t-fast), transform var(--t-fast);
}
.btn-exito-inicio:hover { filter: brightness(1.1); transform: translateY(-2px); }

/* Pantalla de carga */
.carga-caja { text-align: center; max-width: 360px; color: var(--text-muted); }
.carga-caja strong { color: var(--text); font-family: var(--font-display); }
.carga-spinner {
    width: 46px;
    height: 46px;
    margin: 0 auto 16px;
    border: 4px solid var(--surface-3);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: giroCarga .8s linear infinite;
}
@keyframes giroCarga { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------
   6. Ticket público
   --------------------------------------------------------------- */
.ticket {
    width: min(430px, 100%);
    margin: 0 auto;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow), var(--glow-primary);
    overflow: hidden;
}
.ticket-top {
    padding: 26px 22px;
    border-bottom: 2px dashed var(--border-strong);
    background: linear-gradient(160deg, var(--surface-2), var(--surface));
    text-align: center;
}
/* El número de ticket tiene 12 cifras (202610070001): en una sola línea,
   achicándose en pantallas angostas */
.ticket-codigo {
    font-family: var(--font-display);
    font-size: clamp(20px, 6.6vw, 30px);
    letter-spacing: 2px;
    white-space: nowrap;
    color: var(--gold);
    text-shadow: 0 0 22px rgba(251,191,36,.45);
}
.ticket-codigo small { font-size: .55em; letter-spacing: 1px; opacity: .8; margin-right: 4px; }
.estado-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 7px 16px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
}
.ticket-body { padding: 22px; }
.dato {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.dato:last-of-type { border-bottom: none; }
.dato span   { color: var(--text-dim); }
.dato strong { color: var(--text); text-align: right; }
.nums { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.nums b {
    padding: 9px 13px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: rgba(124,58,237,.18);
    color: var(--primary-soft);
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 1.5px;
}
.volver {
    display: block;
    margin: var(--space-4) auto 0;
    color: var(--text-dim);
    font-size: 13px;
    text-align: center;
    text-decoration: none;
}
.volver:hover { color: var(--primary-soft); }

/* ---------------------------------------------------------------
   7. Login e instalación
   --------------------------------------------------------------- */
.body-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 20px;
}
.login-container { width: min(420px, 100%); }

.login-form {
    padding: 36px 30px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow), var(--glow-primary);
}
.login-form h2 {
    margin: 0 0 8px;
    font-size: 24px;
    text-align: center;
}
.login-form h2 i { color: var(--accent); margin-right: 8px; }
.login-form p { margin: 0 0 26px; color: var(--text-muted); text-align: center; }
.login-form .btn-principal { width: 100%; }

/* ---------------------------------------------------------------
   8. Formularios
   --------------------------------------------------------------- */
.input-group { margin-bottom: 18px; }
.input-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}
.label-con-icono i { margin-right: 6px; color: var(--primary-soft); }

.input-group input,
.input-group select,
.input-group textarea,
.form-admin input,
.form-admin select,
.form-admin textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
    font-size: 16px;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input-group input::placeholder,
.form-admin input::placeholder,
.form-admin textarea::placeholder { color: var(--text-dim); }

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus,
.form-admin input:focus,
.form-admin select:focus,
.form-admin textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(124,58,237,.25);
}

.form-admin textarea { min-height: 150px; line-height: 1.6; resize: vertical; }

.form-admin select, .input-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A78BFA' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 1em;
    padding-right: 42px;
    cursor: pointer;
}

input[type="file"] {
    padding: 11px !important;
    color: var(--text-muted) !important;
    cursor: pointer;
}
input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 15px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    background: rgba(124,58,237,.2);
    color: var(--primary-soft);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
}
input[type="checkbox"] { width: auto !important; accent-color: var(--primary); }
input[type="date"] { color-scheme: dark; }

.form-admin h2 {
    margin: var(--space-5) 0 var(--space-3);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    font-size: 19px;
}
.form-admin h2 i { color: var(--primary-soft); margin-right: 8px; }

.nota-ayuda {
    margin: -8px 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--r-sm);
    background: rgba(124,58,237,.08);
    color: var(--text-muted);
    font-size: 13px;
}
.nota-ayuda b { color: var(--primary-soft); }

.fila-premio input { margin: 0; }

/* Mensajes */
.error-message, .mensaje-error, .mensaje-exito {
    margin-bottom: 20px;
    padding: 14px 18px;
    border-radius: var(--r-sm);
    font-weight: 600;
    text-align: center;
}
.error-message, .mensaje-error {
    border: 1px solid rgba(239,68,68,.4);
    background: rgba(239,68,68,.14);
    color: #FCA5A5;
}
.mensaje-exito {
    border: 1px solid rgba(34,197,94,.4);
    background: rgba(34,197,94,.14);
    color: #86EFAC;
    text-align: left;
}

/* ---------------------------------------------------------------
   9. Panel de administración
   --------------------------------------------------------------- */
.admin-layout { display: flex; min-height: 100dvh; }

.admin-nav {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 262px;
    padding: 22px 18px;
    border-right: 1px solid var(--border);
    background: var(--bg-deep);
}
/* En computador el menú acompaña el desplazamiento: queda fijo a la vista
   mientras se baja por la página. Si la ventana es muy baja, el menú se
   desplaza por dentro. */
@media (min-width: 1025px) {
    .admin-nav {
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: 100dvh;
        overflow-y: auto;
    }
}
.admin-nav-logo {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    text-align: center;
}
.admin-nav-logo h3 { margin: 0; font-size: 19px; }
.admin-nav-logo h3 i { color: var(--accent); margin-right: 6px; }

.admin-nav ul { list-style: none; margin: 0; padding: 0; }   /* sin flex:1: el usuario y Salir van justo debajo */
.admin-nav ul li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    margin-bottom: 4px;
    border-radius: var(--r-sm);
    color: var(--text-muted);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--t-fast);
}
.admin-nav ul li a i { width: 20px; text-align: center; font-size: 15px; }
.admin-nav ul li a:hover { background: var(--surface-2); color: var(--text); }
.admin-nav ul li a.activo {
    background: linear-gradient(100deg, var(--primary), var(--primary-deep));
    color: #fff;
    box-shadow: 0 6px 18px rgba(124,58,237,.35);
}

.admin-nav-footer { margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--border); }
.admin-nav-footer .btn-secundario { width: 100%; }
.admin-user-profile { color: var(--text-muted); font-size: 13px; }
.admin-user-profile strong { display: block; color: var(--text); font-family: var(--font-display); }

.admin-main { flex: 1; min-width: 0; padding: var(--space-4); }

.admin-header {
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--r);
    background: var(--surface);
}
.admin-header h2 { margin: 0; font-size: 25px; }
.admin-header p { margin: 6px 0 0; color: var(--text-muted); }

.admin-container {
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.admin-container h1 { margin: 0 0 var(--space-3); font-size: 21px; }
.admin-container h1 i { color: var(--primary-soft); margin-right: 8px; }

.admin-header-con-boton {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}
.admin-header-con-boton h1 { margin-bottom: 0; }
.admin-header-con-boton .btn-principal { padding: 12px 22px; font-size: 14px; }

/* --- Tarjetas de métricas --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-3);
}
.dash-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    transition: transform var(--t), border-color var(--t);
}
.dash-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.dash-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: var(--r);
    font-size: 21px;
    color: #fff;
}
.card-azul    .dash-icon { background: linear-gradient(140deg, #7C3AED, #4C1D95); }
.card-verde   .dash-icon { background: linear-gradient(140deg, #22C55E, #15803D); }
.card-amarilla .dash-icon { background: linear-gradient(140deg, #FBBF24, #B45309); }
.card-morada  .dash-icon { background: linear-gradient(140deg, #F43F5E, #9F1239); }

.dash-info h3 {
    margin: 0;
    font-size: 25px;
    letter-spacing: .5px;
}
.dash-info p {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: .4px;
}

.dashboard-sorteos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: var(--space-3);
}
.dash-sorteo-card {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface-2);
}
.dash-sorteo-info h4 { margin: 0 0 10px; font-size: 15px; }
.dash-sorteo-info { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dash-sorteo-info h4 { width: 100%; }

/* --- Tablas --- */
.tabla-admin {
    width: 100%;
    margin-top: var(--space-3);
    border-collapse: collapse;
    font-size: 14px;
}
.tabla-admin th {
    padding: 14px 16px;
    border-bottom: 2px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.tabla-admin td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    vertical-align: middle;
}
.tabla-admin tbody tr { transition: background var(--t-fast); }
.tabla-admin tbody tr:hover { background: var(--surface-2); }
.tabla-admin tbody tr:last-child td { border-bottom: none; }
.tabla-admin td b, .tabla-admin td strong { color: var(--text); }
.tabla-admin small { color: var(--text-dim); }
.tabla-admin input[type="text"] {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-deep);
    color: var(--text-muted);
    font-size: 11px;
}

.venta-numeros {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 6px;
    background: var(--bg-deep);
    color: var(--primary-soft);
    font-family: var(--font-display);
    letter-spacing: .8px;
}

/* --- Badges --- */
.badge-verde, .badge-rojo, .badge-gris, .badge-sorpresa {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    white-space: nowrap;
}
.badge-verde { border: 1px solid rgba(34,197,94,.4);  background: rgba(34,197,94,.16);  color: #86EFAC; }
.badge-rojo  { border: 1px solid rgba(239,68,68,.4);  background: rgba(239,68,68,.16);  color: #FCA5A5; }
.badge-gris  { border: 1px solid rgba(245,158,11,.4); background: rgba(245,158,11,.16); color: #FCD34D; }
.badge-sorpresa { border: 1px solid var(--border-strong); background: rgba(124,58,237,.2); color: var(--primary-soft); }

.barra-masiva {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
.buscador-admin-contenedor { padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }

.acciones-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------------------------------------------------------------
   10. Responsive
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
    .admin-layout { flex-direction: column; }
    .admin-nav {
        width: auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .admin-nav ul { display: flex; flex-wrap: wrap; gap: 6px; }
    .admin-nav ul li a { padding: 10px 14px; font-size: 13px; }
    .admin-nav-footer { display: flex; gap: 14px; align-items: center; justify-content: space-between; }
    .admin-nav-footer .btn-secundario { width: auto; }
    .admin-main { padding: var(--space-3); }
}

@media (max-width: 768px) {
    .cliente-container { width: calc(100% - 24px); }
    .public-grid { grid-template-columns: 1fr; }

    .tablero-numeros, .grilla-10k {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }
    .numero-boleto, .numero-grilla { padding: 11px 0; font-size: 12px; letter-spacing: 0; }

    .tools-container { padding: 10px 0; gap: 8px; }
    .tool-search { padding: 0 14px; }
    .tool-search input { padding: 12px 0; }

    .barra-compra {
        width: calc(100% - 16px);
        bottom: 8px;
        padding: 12px 14px;
        gap: 10px;
    }
    .info-compra strong { font-size: 20px; }
    .barra-compra .btn-principal { padding: 13px 18px; font-size: 14px; }

    .admin-container, .admin-header { padding: var(--space-3); }
    .tabla-admin { display: block; overflow-x: auto; white-space: nowrap; }
    .fila-form { grid-template-columns: 1fr !important; }
    .fila-premio { grid-template-columns: 1fr !important; }
}

/* Tableros de 4 cifras: 8 columnas exactas en móvil */
@media (max-width: 768px) {
    .grilla-10k.cifras-4 { grid-template-columns: repeat(8, 1fr); gap: 5px; }
    .grilla-10k.cifras-4 .numero-grilla { padding: 9px 0; font-size: 11px; }
}

/* ---------------------------------------------------------------
   10b. Reglas del sorteo (promo y mínimo) y resultados
   --------------------------------------------------------------- */

/* Franja con la promo y el mínimo, encima del buscador */
.reglas-sorteo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: var(--space-4);
}
.regla-promo,
.regla-minimo {
    display: flex;
    flex: 1 1 260px;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--r);
    font-size: 14px;
    line-height: 1.4;
}
.regla-promo {
    border: 1px solid rgba(251,191,36,.45);
    background: linear-gradient(100deg, rgba(251,191,36,.16), rgba(244,63,94,.12));
    color: var(--text);
}
.regla-promo > i { color: var(--gold); font-size: 20px; }
.regla-promo strong { color: var(--gold); }
.regla-promo small { color: var(--text-muted); white-space: nowrap; }
.regla-minimo {
    border: 1px solid var(--border-strong);
    background: rgba(124,58,237,.14);
    color: var(--text-muted);
}
.regla-minimo > i { color: var(--primary-soft); font-size: 18px; }
.regla-minimo strong { color: var(--text); }

/* Línea de la promo dentro de la canasta */
.aviso-promo {
    margin-top: 4px;
    color: #FCD34D;
    font-size: 12px;
    font-weight: 600;
}
.aviso-promo i { margin-right: 4px; }

/* Etiqueta de promo en la tarjeta del home */
.chip-promo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 7px 14px;
    border: 1px solid rgba(251,191,36,.5);
    border-radius: var(--r-pill);
    background: rgba(251,191,36,.14);
    color: #FCD34D;
    font-size: 13px;
    font-weight: 700;
}

/* Botón "Sorteos anteriores" */
.btn-anteriores {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    margin-top: var(--space-4);
    padding: 11px 22px;
    border: 1px solid rgba(251,191,36,.45);
    border-radius: var(--r-pill);
    background: rgba(251,191,36,.1);
    color: #FCD34D;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.btn-anteriores:hover { border-color: var(--gold); background: rgba(251,191,36,.2); }

/* Página de resultado de un sorteo finalizado */
.resultado {
    margin: 0 var(--space-3);
    padding: var(--space-5) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    text-align: center;
}
.resultado-estado {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.resultado-titulo { margin: var(--space-3) 0 6px; font-size: clamp(22px, 5vw, 32px); }
.resultado-fecha { margin: 0; color: var(--text-dim); }

.resultado-lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.resultado-item {
    display: flex;
    flex: 0 1 300px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: var(--space-4) var(--space-3);
    border: 1px solid rgba(251,191,36,.45);
    border-radius: var(--r-lg);
    background: radial-gradient(circle at 50% 0%, rgba(251,191,36,.18), transparent 70%), var(--bg-deep);
}
.resultado-etiqueta {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.numero-ganador {
    font-family: var(--font-display);
    font-size: clamp(56px, 16vw, 88px);
    line-height: 1;
    letter-spacing: 6px;
    color: var(--gold);
    text-shadow: 0 0 28px rgba(251,191,36,.45);
}
.resultado-detalle { color: var(--text-muted); font-size: 14px; }
.resultado-premio { color: var(--text); font-weight: 700; }
.resultado-premio i { color: var(--gold); }
.resultado-nota { margin: var(--space-4) auto 0; max-width: 420px; color: var(--text-dim); font-size: 14px; }

.resultado-pendiente { margin-top: var(--space-4); color: var(--text-muted); }
.resultado-pendiente i { color: var(--gold); font-size: 34px; }

/* Lista de sorteos anteriores */
.anteriores-encabezado { padding: var(--space-4) 0; text-align: center; }
.anteriores-encabezado h1 { margin: 0 0 8px; font-size: clamp(26px, 6vw, 40px); text-transform: uppercase; }
.anteriores-encabezado h1 i { color: var(--gold); }
.anteriores-encabezado p { margin: 0; color: var(--text-muted); }

.anteriores-lista { display: grid; gap: var(--space-3); }
.anterior-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.anterior-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.anterior-portada {
    flex-shrink: 0;
    width: 112px;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--r-sm);
}
.anterior-info { flex: 1; min-width: 0; }
.anterior-info h2 { margin: 0 0 4px; font-size: 17px; }
.anterior-fecha { color: var(--text-dim); font-size: 13px; }
.anterior-ganadores {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 8px;
}
.anterior-etiqueta { color: var(--text-muted); font-size: 13px; }
.numero-ganador-mini {
    padding: 3px 12px;
    border: 1px solid rgba(251,191,36,.5);
    border-radius: var(--r-pill);
    background: rgba(251,191,36,.12);
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--gold);
}
.anterior-flecha { color: var(--text-dim); }

@media (max-width: 480px) {
    .anterior-portada { width: 84px; }
    .resultado { padding: var(--space-4) var(--space-3); }
}

/* ---------------------------------------------------------------
   10c. Tiempo para pagar, comprobante y cierre de ventas
   --------------------------------------------------------------- */

.caja-comprobante {
    display: grid;
    gap: 12px;
    margin: 16px 0;
    padding: 16px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--r);
    background: var(--bg-deep);
}

.contador-pago {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(245,158,11,.35);
    border-radius: var(--r-sm);
    background: rgba(245,158,11,.12);
    color: #FCD34D;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}
.contador-pago .contador-tiempo {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}
.contador-pago.urgente {
    border-color: rgba(239,68,68,.5);
    background: rgba(239,68,68,.14);
    color: #FCA5A5;
}

.form-comprobante { display: grid; gap: 10px; margin: 0; }
.form-comprobante .btn-principal { width: 100%; justify-content: center; }

/* El input de archivo nativo es feo y pequeño: se esconde y se toca la etiqueta */
.selector-archivo { position: relative; display: block; cursor: pointer; }
.selector-archivo input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.selector-archivo > span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-muted);
    font-weight: 600;
    text-align: center;
    overflow-wrap: anywhere;   /* solo parte nombres de archivo muy largos */
    transition: border-color var(--t-fast), background var(--t-fast);
}
.selector-archivo:hover > span,
.selector-archivo input:focus-visible + span { border-color: var(--primary); background: rgba(124,58,237,.16); color: var(--text); }
.selector-archivo i { color: var(--primary-soft); font-size: 18px; }

.aviso-ticket {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    font-size: 13px;
    line-height: 1.5;
}
.aviso-ticket.ok    { border: 1px solid rgba(34,197,94,.4); background: rgba(34,197,94,.14); color: #86EFAC; }
.aviso-ticket.error { border: 1px solid rgba(239,68,68,.4); background: rgba(239,68,68,.14); color: #FCA5A5; }
.caja-comprobante .aviso-ticket { margin: 0; }

/* Comprobante ya subido: nombre del archivo y X para quitarlo */
.comprobante-subido {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 8px 8px 8px 14px;
    border: 1px solid rgba(34,197,94,.45);
    border-radius: var(--r-sm);
    background: rgba(34,197,94,.12);
    color: #86EFAC;
    font-weight: 600;
}
.comprobante-subido[hidden] { display: none; }
.comprobante-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comprobante-quitar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(239,68,68,.18);
    color: #FCA5A5;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.comprobante-quitar:hover, .comprobante-quitar:focus-visible { background: var(--danger); color: #fff; }
.selector-archivo[hidden] { display: none; }

/* El botón de WhatsApp apagado hasta que haya comprobante */
.btn-exito-inicio:disabled { cursor: not-allowed; }

/* Aviso "Tienes una reserva sin terminar · Continuar" */
.aviso-reserva-pendiente {
    position: fixed;
    top: 12px;
    left: 50%;
    z-index: 950;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    width: min(560px, calc(100% - 24px));
    padding: 10px 12px 10px 16px;
    border: 1px solid rgba(245,158,11,.5);
    border-radius: var(--r);
    background: rgba(26,24,50,.96);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
    color: #FCD34D;
    font-size: 14px;
    transform: translateX(-50%);
}
.aviso-reserva-pendiente span { flex: 1 1 200px; color: var(--text); }
.aviso-reserva-pendiente button {
    padding: 9px 16px;
    border: none;
    border-radius: var(--r-pill);
    background: linear-gradient(100deg, var(--primary), var(--accent-btn));
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* Número de ticket en el modal de la reserva */
.exito-num-ticket { margin: 0 0 12px; color: var(--text-muted); font-size: 13px; }
.exito-num-ticket strong { font-family: var(--font-display); font-size: 16px; letter-spacing: 1px; color: var(--text); }

/* Después de enviar el comprobante: la subida y el WhatsApp quedan apagados */
.form-comprobante.deshabilitado,
.btn-exito-inicio.deshabilitado {
    opacity: .4;
    filter: grayscale(1);
    pointer-events: none;
    cursor: not-allowed;
}
.btn-exito-inicio.deshabilitado { transform: none; }

/* Tarjeta del home cuando ya no se puede comprar */
.btn-jugar.cerrado {
    background: var(--surface-3);
    box-shadow: none;
    color: var(--text-muted);
}

/* Avisos del escritorio del panel */
.aviso-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 14px 18px;
    border-radius: var(--r);
    font-size: 14px;
    text-decoration: none;
}
.aviso-panel span { flex: 1; }
.aviso-comprobantes { border: 1px solid rgba(34,197,94,.45); background: rgba(34,197,94,.12); color: #86EFAC; }
.aviso-cierre       { border: 1px solid rgba(245,158,11,.45); background: rgba(245,158,11,.12); color: #FCD34D; }

/* Selector de archivo del panel (banner): botón propio que muestra el nombre
   del archivo actual. El nativo dice "Ningún archivo seleccionado" y no se
   puede cambiar. */
.selector-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.selector-admin-boton {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 18px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--text);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}
.selector-admin-boton:hover { border-color: var(--primary); background: rgba(124,58,237,.18); }
.selector-admin-boton input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.selector-admin-nombre { color: var(--text-muted); font-size: 14px; overflow-wrap: anywhere; }
.selector-admin.apagado .selector-admin-boton {
    opacity: .4;
    filter: grayscale(1);
    cursor: not-allowed;
    pointer-events: none;
}
.selector-admin.apagado .selector-admin-nombre { color: var(--text); font-weight: 600; }

.quitar-banner {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}
.quitar-banner.apagado { opacity: .4; cursor: not-allowed; }

/* Escritorio: almacenamiento */
.almacenamiento .admin-header-con-boton form { margin: 0; }
.uso-cabecera {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 14px;
}
.uso-cabecera b { color: var(--text); }
.uso-barra {
    position: relative;
    height: 26px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--bg-deep);
    overflow: hidden;
}
.uso-relleno { height: 100%; border-radius: var(--r-pill); transition: width var(--t); }
.nivel-bien    .uso-relleno { background: linear-gradient(90deg, #15803D, #22C55E); }
.nivel-cuidado .uso-relleno { background: linear-gradient(90deg, #B45309, #F59E0B); }
.nivel-lleno   .uso-relleno { background: linear-gradient(90deg, #B91C1C, #EF4444); }
.uso-porcentaje {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.uso-detalle { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--text-muted); font-size: 14px; }
.uso-detalle i { width: 18px; color: var(--primary-soft); text-align: center; }
.uso-detalle b { color: var(--text); }
.uso-detalle small { color: var(--text-dim); }
.nivel-lleno { border-color: rgba(239,68,68,.55) !important; }
.aviso-disco { border: 1px solid rgba(239,68,68,.5); background: rgba(239,68,68,.14); color: #FCA5A5; }
#btn-limpiar:disabled { opacity: .45; filter: grayscale(1); cursor: not-allowed; transform: none; box-shadow: none; }

/* Escritorio: páginas de "Últimas reservas" */
.paginas-reservas {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}
.paginas-reservas > :last-child { justify-self: end; }
.paginas-reservas-info { color: var(--text-dim); font-size: 13px; text-align: center; }
@media (max-width: 600px) {
    .paginas-reservas { grid-template-columns: 1fr 1fr; }
    .paginas-reservas-info { grid-column: 1 / -1; grid-row: 1; }
}

/* Barra de acciones de Ventas: apagada hasta elegir ventas a las que aplique */
.accion-lote:disabled {
    opacity: .4;
    filter: grayscale(1);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.conteo-seleccion { color: var(--text-dim); font-size: 13px; margin-right: 4px; }

.link-comprobante {
    display: inline-block;
    margin-top: 6px;
    color: var(--primary-soft);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.link-comprobante:hover { text-decoration: underline; }

/* ---------------------------------------------------------------
   11. Accesibilidad: movimiento reducido
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .public-card:hover, .dash-card:hover, .btn-principal:hover { transform: none; }
}