/* GENERADO por tools/fluid.py desde src/css/base.css — no editar aquí */
/* HOTBET V2 — tokens + base. Los colores se sobreescriben con theme_config
 * del backend (core/system.js). Valores por defecto = brandbook HOTBET. */
:root {
    /* Responsive fluido: 1 px de diseño. En tablet y PC vale 1px; en teléfonos
     * 100vw / 390 (diseño a 390 px), entre 0,8 y 1 px: los teléfonos chicos
     * reducen toda la interfaz en proporción y los grandes no la agrandan.
     * Para que también crezca en teléfonos grandes: cambiar el 1px final del
     * clamp de abajo (p. ej. 1.12px). */
    --u: 1px ;
    /* Ancho de filas horizontales (accesos, proveedores, deportes): escala con
     * la pantalla sin tope, para que todos los teléfonos muestren los mismos
     * elementos; letras e íconos siguen con --u. */
    --uw: 1px ;
    --primary: #FF4900;           /* brandbook: primario */
    --primary-strong: #D63D00;
    --primary-rgb: 255, 73, 0;
    --on-primary: #FFFFFF;
    --bg: #0E0E0F;                /* fondo de contenido (más oscuro que los menús) */
    --chrome: #171717;            /* color del tema en menús (modo oscuro) */
    --header: var(--chrome);
    --sidebar: #131313;           /* brandbook: barra + footer */
    --bottom-nav: #171717;        /* menú inferior: mismo fondo que el sitio */
    --footer: #131313;
    --surface: #1C1C1C;           /* brandbook: desplegables / tarjetas */
    --surface-2: #212121;
    --surface-3: #2A2A2A;
    --chip: var(--surface);
    --nav-active: var(--primary);
    --nav-muted: rgba(255, 255, 255, .62);
    --nav-pill: rgba(var(--primary-rgb), .16);
    --nav-line: rgba(var(--primary-rgb), .35);
    --side-active: var(--primary);
    --btn-login: transparent;
    --btn-register: var(--primary);
    --search-bg: var(--surface);
    --search-border: rgba(255, 255, 255, .06);
    --input-bg: #F3F3F3;
    --input-border: #E4E4E4;
    --line: rgba(255, 255, 255, .07);
    --text: #FFFFFF;
    --text-2: #D2D2D2;
    --muted: #979797;
    --gold: #F2B600;
    --ok: #22C55E;
    --danger: #FF4D4F;

    --font-system: "Google Sans", "Google Sans Text", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-body: var(--font-system);

    --r-xs: calc(var(--u) * 6); --r-sm: calc(var(--u) * 8); --r: calc(var(--u) * 12); --r-lg: calc(var(--u) * 16); --r-xl: calc(var(--u) * 22);
    --gap: calc(var(--u) * 12);
    --pad: calc(var(--u) * 24);
    --sidebar-w: calc(var(--u) * 280);           /* como 1win */
    --topbar-h: calc(var(--u) * 68);
    --tabbar-h: calc(var(--u) * 62);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --ease: cubic-bezier(.2, .7, .2, 1);
    color-scheme: dark;
}@media (max-width: 767px) { :root { --u: clamp(0.8px, calc(100vw / 390), 1px) ; --uw: max(0.8px, calc(100vw / 390)) ; } }
/* PC (≥ 1024 px): misma idea que en el teléfono, con 1440 px como medida de
 * diseño. Portátiles más chicos reducen todo en proporción (hasta 80 %) y
 * monitores grandes lo agrandan con tope (125 %). Tablet queda en 1 px. */
@media (min-width: 1024px) { :root { --u: 1px ; --uw: 1px ; } }   /* PC: medidas fijas como 1win */


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + calc(var(--u) * 12)); }
body {
    margin: 0; min-height: 100vh; min-height: 100dvh;
    background: var(--bg); color: var(--text);
    font: 400 calc(var(--u) * 15)/1.45 var(--font-body);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: calc(var(--u) * 2) solid var(--primary); outline-offset: calc(var(--u) * 2); border-radius: var(--r-xs); }

.ic { width: calc(var(--u) * 22); height: calc(var(--u) * 22); flex: none; }
.ic--img { object-fit: contain; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Botones ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8);
    height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 22); border-radius: var(--r-sm);
    font-weight: 700; font-size: max(10px, calc(var(--u) * 15)); white-space: nowrap;
    transition: background-color .15s, border-color .15s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; cursor: default; }
.btn--primary { background: var(--btn-register); color: var(--on-register, var(--on-primary)); }
.btn--primary:hover { background: var(--primary-strong); }
.btn--ghost { background: var(--btn-login); border: 1px solid rgba(255, 255, 255, .2); color: var(--text); }
.btn--ghost:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .04); }
.btn--block { width: 100%; }
.btn--lg { height: calc(var(--u) * 52); font-size: max(10px, calc(var(--u) * 16)); border-radius: var(--r); }
.icon-btn {
    display: inline-grid; place-items: center; width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: 50%;
    color: var(--text-2); transition: background-color .15s, color .15s;
}
.icon-btn:hover { background: rgba(255, 255, 255, .06); color: var(--text); }

/* ---------- Skeleton (solo opacity/transform) ---------- */
.skel { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-sm); }
.skel::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), transparent);
    transform: translateX(-100%); animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skel--title { display: block; width: calc(var(--u) * 180); height: calc(var(--u) * 22); }
.skel--line { display: block; height: calc(var(--u) * 12); margin-top: calc(var(--u) * 8); width: 70%; }
.skel--pill { display: inline-block; width: calc(var(--u) * 150); height: calc(var(--u) * 44); border-radius: var(--r); }
.skel--circle { display: inline-block; width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: 50%; }

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

/* Transición entre páginas: breve y sin desplazar el layout. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; animation-timing-function: ease-out; }