/* Fuente del sistema: Inter, autocontenida localmente (sin CDN) */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-var-latin.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ========================================================
   Sistema de Rifas — Design System (theme.css)
   Tokens compartidos entre panel administrativo y portal
   publico. Importar ANTES de admin.css o raffle.css.
   ======================================================== */

:root {
    /* ----------------------------------------------------
       Admin — Boleto dorado
       ---------------------------------------------------- */
    --paper: #F6F1E7;
    --paper-raised: #FDFBF5;
    --paper-sunken: #EFE8D8;
    --ink: #211D16;
    --ink-soft: #5A5245;
    --ink-faint: #8A8171;
    --gold: #A67C00;
    --gold-deep: #8A6600;
    --gold-bright: #C19A3D;
    --gold-pale: #EAD9A6;
    --gold-wash: #F3EBD3;
    --seal: #1E3A5F;
    --seal-soft: #3D5A80;
    --danger: #7A2E2E;
    --danger-soft: #A85B5B;
    --success: #2F5233;
    --line: #D9CDB2;
    --line-strong: #C4B48D;

    /* ----------------------------------------------------
       Publico — Noche de sorteo
       ---------------------------------------------------- */
    --night: #0B1020;
    --night-raised: #131A33;
    --night-deep: #060912;
    --star: #F2C14E;
    --star-soft: #FFD97A;
    --coral: #FF6B5B;
    --coral-soft: #FF9A8C;
    --mist: #8E9BC4;

    /* ----------------------------------------------------
       Tipografia
       ---------------------------------------------------- */
    --font-display: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-jackpot: 'Inter', sans-serif;

    /* ----------------------------------------------------
       Ritmo y forma
       ---------------------------------------------------- */
    --radius-sm: 4px;
    --radius: 10px;
    --radius-lg: 16px;
    --shadow-lift: 0 1px 2px rgba(33, 29, 22, .06), 0 8px 24px rgba(33, 29, 22, .08);
    --shadow-float: 0 2px 4px rgba(33, 29, 22, .08), 0 16px 40px rgba(33, 29, 22, .14);
    --ring-gold: 0 0 0 3px rgba(166, 124, 0, .28);
    --ring-star: 0 0 0 3px rgba(242, 193, 78, .32);
    --speed-fast: 160ms;
    --speed: 280ms;
    --speed-slow: 560ms;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
}

/* --------------------------------------------------------
   Reset suave
   -------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    overflow-x: clip;
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.55;
    color: var(--ink);
    background-color: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    color: var(--ink);
    margin-top: 0;
    overflow-wrap: break-word;
}

/* Palabras largas (URLs, tokens, nombres sin espacios) rompen dentro de tarjetas/tablas */
.card,
.table {
    overflow-wrap: break-word;
}

/* Cabeceras de pagina flexibles: el boton baja de linea en vez de comprimir el titulo */
.wrap-header {
    flex-wrap: wrap;
    gap: .75rem;
}

a {
    color: var(--seal);
    transition: color var(--speed-fast) ease;
}

a:hover {
    color: var(--gold-deep);
}

::selection {
    background: var(--gold-pale);
    color: var(--ink);
}

/* --------------------------------------------------------
   Accesibilidad: foco visible y movimiento reducido
   -------------------------------------------------------- */
:focus-visible {
    outline: none;
    box-shadow: var(--ring-gold);
    border-radius: var(--radius-sm);
}

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

/* --------------------------------------------------------
   Utilidades compartidas
   -------------------------------------------------------- */
.font-display { font-family: var(--font-display); }
.font-jackpot { font-family: var(--font-jackpot); }

.eyebrow {
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-deep);
}

/* Numero de serie estilo boleto */
.serial {
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    letter-spacing: .14em;
    font-size: .68rem;
    color: var(--ink-faint);
    text-transform: uppercase;
}

/* --------------------------------------------------------
   Botones base (complementan a Bootstrap)
   -------------------------------------------------------- */
.btn-gold {
    --bs-btn-font-family: var(--font-body);
    --bs-btn-font-weight: 600;
    --bs-btn-color: #FFFDF6;
    --bs-btn-bg: var(--gold);
    --bs-btn-border-color: var(--gold);
    --bs-btn-hover-color: #FFFDF6;
    --bs-btn-hover-bg: var(--gold-deep);
    --bs-btn-hover-border-color: var(--gold-deep);
    --bs-btn-active-color: #FFFDF6;
    --bs-btn-active-bg: var(--gold-deep);
    --bs-btn-active-border-color: var(--gold-deep);
    --bs-btn-disabled-color: var(--paper-raised);
    --bs-btn-disabled-bg: var(--line-strong);
    --bs-btn-disabled-border-color: var(--line-strong);
    letter-spacing: .02em;
    border-radius: var(--radius-sm);
}

.btn-outline-gold {
    --bs-btn-color: var(--gold-deep);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-color: #FFFDF6;
    --bs-btn-hover-bg: var(--gold);
    --bs-btn-hover-border-color: var(--gold);
    --bs-btn-active-color: #FFFDF6;
    --bs-btn-active-bg: var(--gold-deep);
    --bs-btn-active-border-color: var(--gold-deep);
    --bs-btn-disabled-color: var(--ink-faint);
    --bs-btn-disabled-border-color: var(--line);
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------
   Animaciones de entrada (reveal escalonado)
   Se activan con .reveal y retrasos utilitarios
   -------------------------------------------------------- */
@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.reveal {
    opacity: 0;
}

.reveal.is-shown {
    animation: rise-in var(--speed-slow) var(--ease-out) forwards;
}

.reveal-1.is-shown { animation-delay: .05s; }
.reveal-2.is-shown { animation-delay: .14s; }
.reveal-3.is-shown { animation-delay: .23s; }
.reveal-4.is-shown { animation-delay: .32s; }