/* quiniweb · web pública — tokens del sistema de diseño (solo lo que usa la portada) */
/* Fuentes servidas desde nuestro dominio (assets/fonts/). Sin Google Fonts: no se envía la IP del socio a terceros.
   Subconjuntos latin y latin-ext. Rutas relativas a este archivo (tokens/). */
@font-face{font-family:"Caveat";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/caveat-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Caveat";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/caveat-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/poppins-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/poppins-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/poppins-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/poppins-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/poppins-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/poppins-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/poppins-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/poppins-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --qw-font-display:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --qw-font-ui:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --qw-font-mono:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* La X de la casilla marcada: trazo suelto, no tipográfico — la marca real de un boli sobre el boleto. */
  --qw-font-manuscrito:"Caveat",cursive;
  --qw-font-iconos:"Material Symbols Outlined";
}

/* Iconos de Material Symbols por ligadura (p. ej. <span class="qw-ms">trophy</span>). Los mockups usan IconoGoogle (SVG en línea); esta clase es para el front. */
.qw-ms{font-family:var(--qw-font-iconos);font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;font-feature-settings:"liga";font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24}

/* quiniweb — paleta. Base extraída del logotipo: negro #0B0D0F, amarillo #FFC401, gris #9A9EA5. */
:root{
  /* Marca — los tres valores literales del logotipo */
  --qw-negro:#0B0D0F;
  --qw-amarillo:#FFC401;
  --qw-gris:#9A9EA5;

  /* Tinta: neutros fríos, del negro del logotipo al blanco */
  --qw-ink-950:#050607;
  --qw-ink-900:#0B0D0F;
  --qw-ink-800:#14171A;
  --qw-ink-700:#1B1F23;
  --qw-ink-600:#252A30;
  --qw-ink-500:#333941;
  --qw-ink-400:#4A525C;
  --qw-ink-300:#6C757F;
  --qw-ink-200:#9A9EA5;
  --qw-ink-150:#BEC2C8;
  --qw-ink-100:#DBDEE1;
  --qw-ink-75:#E8EAEC;
  --qw-ink-50:#F2F3F5;
  --qw-ink-25:#F8F9FA;
  --qw-blanco:#FFFFFF;

  /* Amarillo: el signo marcado, el bote, la acción principal */
  --qw-amarillo-800:#4D3B00;
  --qw-amarillo-700:#7A5E00;
  --qw-amarillo-600:#A87F00;
  --qw-amarillo-500:#D9A400;
  --qw-amarillo-400:#FFC401;
  --qw-amarillo-300:#FFD64A;
  --qw-amarillo-200:#FFE896;
  --qw-amarillo-100:#FFF4D0;
  --qw-amarillo-50:#FFFBEE;

  /* Verde — acierto, pago al día */
  --qw-verde-700:#0A5C34;
  --qw-verde-600:#0E7A46;
  --qw-verde-500:#149656;
  --qw-verde-400:#1FB86A;
  --qw-verde-300:#4ED696;
  --qw-verde-100:#DCF4E6;
  --qw-verde-50:#EEFAF3;

  /* Rojo — fallo, deuda, jornada perdida */
  --qw-rojo-700:#821A20;
  --qw-rojo-600:#A62026;
  --qw-rojo-500:#C92B33;
  --qw-rojo-400:#E5484D;
  --qw-rojo-300:#FF8A8F;
  --qw-rojo-100:#FBE0E1;
  --qw-rojo-50:#FDF0F0;

  /* Naranja — aviso. El amarillo está reservado a la marca, nunca avisa. */
  --qw-naranja-600:#944900;
  --qw-naranja-500:#B85C00;
  --qw-naranja-400:#E8760C;
  --qw-naranja-300:#FFA04D;
  --qw-naranja-100:#FDE8D3;

  /* Azul — enlaces e informativo */
  --qw-azul-600:#1E4FBF;
  --qw-azul-500:#2C63E0;
  --qw-azul-400:#3E82F7;
  --qw-azul-300:#7FB0FF;
  --qw-azul-100:#DCE9FE;

  /* ── Alias semánticos: tema claro (web pública) ────────────────── */
  --qw-bg:var(--qw-blanco);
  --qw-bg-sutil:var(--qw-ink-50);
  --qw-bg-hundido:var(--qw-ink-75);
  --qw-bg-inverso:var(--qw-ink-900);
  --qw-superficie:var(--qw-blanco);
  --qw-superficie-elevada:var(--qw-blanco);
  --qw-superficie-hover:var(--qw-ink-25);

  --qw-borde:var(--qw-ink-100);
  --qw-borde-suave:var(--qw-ink-75);
  --qw-borde-fuerte:var(--qw-ink-150);
  --qw-borde-inverso:var(--qw-ink-600);
  --qw-anillo-foco:var(--qw-ink-900);

  --qw-texto:var(--qw-ink-900);
  --qw-texto-suave:var(--qw-ink-400);
  --qw-metrica-valor:var(--qw-texto); /* color del número destacado de CardMetrica */
  --qw-texto-tenue:var(--qw-ink-300);
  --qw-texto-inverso:var(--qw-blanco);
  --qw-texto-sobre-amarillo:var(--qw-ink-900);

  --qw-enlace:var(--qw-azul-500);
  --qw-enlace-hover:var(--qw-azul-600);

  --qw-acento:var(--qw-amarillo-400);
  --qw-acento-hover:var(--qw-amarillo-300);
  --qw-acento-activo:var(--qw-amarillo-500);
  --qw-acento-sutil:var(--qw-amarillo-100);
  /* Fondo de fila (o columna) marcada en tablas: seleccionada, la tuya, el pleno, la columna ordenada */
  --qw-fila-marcada:var(--qw-amarillo-100);
  /* Tinte de columna destacada: banda de apuesta, columna ordenada. Amarillo 400 (#FFC401) al 22 %.
     Literal a propósito: los tokens de :root no usan color-mix (Tailwind lo envuelve en un bloque anidado que jsdom no entiende). */
  --qw-tinte-columna:rgba(255,196,1,.22);
  /* Avatar sin destacar: empates, ganadores en tablas */
  --qw-avatar-gris:#DBDEE1;
  --qw-avatar-gris-texto:var(--qw-ink-700);
  /* Columna ordenada en tablas (Clasificaciones): banda entera y su texto */
  --qw-columna-orden-bg:var(--qw-amarillo-100);
  --qw-columna-orden-texto:var(--qw-ink-900);
  /* Gráficas: rótulo de la serie amarilla (texto legible sobre el fondo) */
  --qw-grafica-rotulo-acento:var(--qw-amarillo-700);

  --qw-exito:var(--qw-verde-500);
  --qw-exito-sutil:var(--qw-verde-100);
  --qw-exito-texto:var(--qw-verde-700);
  --qw-error:var(--qw-rojo-500);
  --qw-error-sutil:var(--qw-rojo-100);
  --qw-error-texto:var(--qw-rojo-700);
  --qw-aviso:var(--qw-naranja-400);
  --qw-aviso-sutil:var(--qw-naranja-100);
  --qw-aviso-texto:var(--qw-naranja-500);
  --qw-info:var(--qw-azul-500);
  --qw-info-sutil:var(--qw-azul-100);
  --qw-info-texto:var(--qw-azul-600);

  /* ── Dominio: la quiniela ──────────────────────────────────────── */
  /* La casilla marcada es amarilla y la vacía gris — exactamente como el logotipo. */
  --qw-signo-bg:var(--qw-ink-50);
  --qw-signo-borde:var(--qw-ink-100);
  --qw-signo-texto:var(--qw-ink-300);
  --qw-signo-hover-bg:var(--qw-ink-75);
  --qw-signo-marcado-bg:var(--qw-amarillo-400);
  --qw-signo-marcado-texto:var(--qw-ink-900);
  --qw-signo-marcado-borde:var(--qw-amarillo-500);
  /* Doble y triple: la peña juega múltiples, hay que distinguirlos del sencillo */
  --qw-signo-doble-bg:var(--qw-amarillo-200);
  --qw-signo-triple-bg:var(--qw-amarillo-100);

  /* Resultado de un signo una vez escrutada la jornada */
  --qw-acierto-bg:var(--qw-verde-100);
  --qw-acierto-texto:var(--qw-verde-700);
  --qw-fallo-bg:var(--qw-rojo-100);
  --qw-fallo-texto:var(--qw-rojo-700);
  --qw-pendiente-bg:transparent;
  --qw-pendiente-borde:var(--qw-ink-150);
  --qw-directo:var(--qw-rojo-500);

  /* El bote es siempre amarillo. Es el único número que puede llevar el color de marca. */
  --qw-bote:var(--qw-amarillo-400);
  --qw-bote-sobre-oscuro:var(--qw-amarillo-300);
  --qw-saldo-positivo:var(--qw-verde-500);
  --qw-saldo-negativo:var(--qw-rojo-500);
}

/* quiniweb — tipografía. Poppins para todo: lo que se lee y lo que se cuenta. */
:root{
  /* Familias en tokens/fonts.css */

  --qw-fw-regular:400; /* @kind font */
  --qw-fw-medium:500; /* @kind font */
  --qw-fw-semibold:600; /* @kind font */
  --qw-fw-bold:700; /* @kind font */

  /* Títulos y cifras grandes son fluidos: tamaño de móvil hasta 560px, de escritorio desde 760px. */
  /* Escala — atajo `font` + interletraje aparte (el shorthand no lo lleva) */
  --qw-t-hero:var(--qw-fw-bold) 76px/1.05 var(--qw-font-display);
  --qw-ls-hero:-0.025em;
  --qw-t-display:var(--qw-fw-bold) 56px/1.08 var(--qw-font-display);
  --qw-ls-display:-0.02em;
  --qw-t-h1:var(--qw-fw-bold) clamp(30px, calc(30px + (100vw - 560px) * 0.050), 40px)/1.15 var(--qw-font-display);
  --qw-ls-h1:-0.018em;
  --qw-t-h2:var(--qw-fw-bold) clamp(24px, calc(24px + (100vw - 560px) * 0.030), 30px)/1.2 var(--qw-font-display);
  --qw-ls-h2:-0.015em;
  --qw-t-h3:var(--qw-fw-bold) clamp(18px, calc(18px + (100vw - 560px) * 0.020), 22px)/1.25 var(--qw-font-display);
  --qw-ls-h3:-0.012em;
  --qw-t-h4:var(--qw-fw-bold) clamp(16px, calc(16px + (100vw - 560px) * 0.005), 17px)/1.3 var(--qw-font-ui);
  --qw-ls-h4:-0.01em;
  --qw-t-h5:var(--qw-fw-bold) 15px/1.35 var(--qw-font-ui);
  --qw-ls-h5:-0.005em;

  --qw-t-body-lg:var(--qw-fw-regular) 18px/1.6 var(--qw-font-ui);
  --qw-t-body:var(--qw-fw-regular) 16px/1.55 var(--qw-font-ui);
  --qw-t-body-medium:var(--qw-fw-medium) 16px/1.55 var(--qw-font-ui);
  --qw-t-body-sm:var(--qw-fw-regular) 15px/1.45 var(--qw-font-ui);
  --qw-t-body-sm-medium:var(--qw-fw-regular) 15px/1.45 var(--qw-font-ui); /* igualada a la regular (mockups) */
  --qw-t-caption:var(--qw-fw-regular) 13px/1.4 var(--qw-font-ui);
  --qw-t-boton:var(--qw-fw-semibold) 15px/1 var(--qw-font-ui);
  --qw-ls-boton:-0.01em;
  --qw-t-boton-sm:var(--qw-fw-semibold) 13px/1 var(--qw-font-ui);

  /* Mono — etiquetas, cifras, signos. El «LA PEÑA DE LA QUINIELA» del logotipo vive aquí. */
  --qw-t-etiqueta:var(--qw-fw-bold) 11px/1.3 var(--qw-font-mono);
  --qw-ls-etiqueta:0.145em;
  --qw-t-etiqueta-sm:var(--qw-fw-semibold) 10px/1.4 var(--qw-font-mono);
  --qw-ls-etiqueta-sm:0.16em;
  --qw-t-metrica:var(--qw-fw-bold) clamp(24px, calc(24px + (100vw - 560px) * 0.020), 28px)/1 var(--qw-font-ui); /* número destacado de CardMetrica */
  --qw-t-dato:var(--qw-fw-regular) 16px/1.3 var(--qw-font-mono);
  --qw-t-dato-sm:var(--qw-fw-medium) 12px/1.3 var(--qw-font-mono);
  --qw-t-dato-lg:var(--qw-fw-semibold) clamp(19px, calc(19px + (100vw - 560px) * 0.015), 22px)/1.15 var(--qw-font-mono);
  --qw-ls-dato-lg:-0.01em;
  --qw-t-cifra:var(--qw-fw-bold) clamp(36px, calc(36px + (100vw - 560px) * 0.040), 44px)/1 var(--qw-font-mono);
  --qw-ls-cifra:-0.02em;
  --qw-t-cifra-xl:var(--qw-fw-bold) clamp(44px, calc(44px + (100vw - 560px) * 0.120), 68px)/1 var(--qw-font-mono);
  --qw-ls-cifra-xl:-0.025em;
  --qw-t-signo:var(--qw-fw-bold) 15px/1 var(--qw-font-mono);
  --qw-t-signo-sm:var(--qw-fw-bold) 12px/1 var(--qw-font-mono);

  /* Todas las cifras se alinean en columna */
  --qw-num:tabular-nums lining-nums; /* @kind other */
  --qw-medida:64ch; /* @kind spacing */
}


/* quiniweb — retícula de 4. Los saltos grandes son deliberadamente escasos. */
:root{
  --qw-e-1:4px;
  --qw-e-2:8px;
  --qw-e-3:12px;
  --qw-e-4:16px;
  --qw-e-5:20px;
  --qw-e-6:24px;
  --qw-e-8:32px;
  --qw-e-10:40px;
  --qw-e-12:48px;
  --qw-e-16:64px;
  --qw-e-24:96px;
  --qw-e-30:120px;

  /* Ritmo de página */
  --qw-seccion:96px;
  --qw-seccion-sm:64px;
  --qw-margen-pagina:24px;
  --qw-ancho-contenido:1200px;
  --qw-ancho-estrecho:720px;
  --qw-ancho-app:1800px;

  /* Chasis de la aplicación */
  --qw-alto-cabecera:66px;
  --qw-ancho-lateral:200px;
  --qw-ancho-lateral-plegado:60px;
  --qw-aire-bloques:44px;
  --qw-gap-tarjetas:12px; /* entre cards de resumen */
  --qw-ancho-panel:400px; /* panel lateral de edición en admin */ /* separación vertical entre bloques de una pantalla */

  /* La casilla del boleto — cuadrada, siempre */
  --qw-casilla:34px;
  --qw-casilla-sm:26px;
  --qw-casilla-lg:44px;

  /* Alturas de control */
  --qw-alto-control:40px;
  --qw-alto-control-sm:32px;
  --qw-alto-control-lg:48px;

  /* Tabla: separación mínima entre columnas (se reparte a mitades en cada celda) */
  --qw-tabla-sep-col:48px;

  /* Celda de tabla compacta (muchas columnas sin scroll) */
  --qw-celda-compacta-y:6px;
  --qw-celda-compacta-x:6px;
}

/* quiniweb — geometría. El logotipo son tres cuadrados sin radio: el cuadrado manda. */
:root{
  --qw-r-0:0px;      /* casillas del boleto, celdas de tabla, franjas — la firma */
  --qw-r-2:2px;      /* chips, etiquetas mono */
  --qw-r-4:4px;      /* campos pequeños, casillas de verificación */
  --qw-r-6:6px;      /* botones, inputs, selects */
  --qw-r-10:10px;    /* tarjetas */
  --qw-r-14:14px;    /* paneles, diálogos, tarjetas destacadas */
  --qw-r-22:22px;    /* solo el icono de aplicación (7/32 del favicon) */
  --qw-r-full:9999px;/* solo avatares y puntos de estado */

  --qw-borde-1:1px;
  --qw-borde-2:2px;
  --qw-borde-acento:3px; /* franja lateral/superior amarilla de la tarjeta destacada */

  /* Sombras: en claro son sutiles; en oscuro se sustituyen por tinte de superficie. */
  --qw-sombra-0:none; /* @kind shadow */
  --qw-sombra-1:0 1px 2px rgba(11,13,15,.06);
  --qw-sombra-2:0 2px 6px rgba(11,13,15,.07),0 1px 2px rgba(11,13,15,.05);
  --qw-sombra-3:0 8px 20px -6px rgba(11,13,15,.13),0 2px 6px rgba(11,13,15,.05);
  --qw-sombra-4:0 24px 48px -12px rgba(11,13,15,.22),0 4px 10px rgba(11,13,15,.06);
  --qw-sombra-foco:0 0 0 3px rgba(11,13,15,.14);
  --qw-sombra-foco-acento:0 0 0 3px rgba(255,196,1,.42);
  --qw-sombra-error:0 0 0 3px rgba(229,72,77,.24);
  --qw-sombra-interior:inset 0 1px 0 rgba(255,255,255,.06); /* @kind shadow */
}

/* quiniweb — movimiento. Corto y seco: marcar un signo es un chasquido, no una animación. */
:root{
  --qw-dur-instante:90ms; /* @kind other */
  --qw-dur-rapida:140ms; /* @kind other */
  --qw-dur-media:220ms; /* @kind other */
  --qw-dur-lenta:360ms; /* @kind other */

  --qw-ease:cubic-bezier(.2,0,.2,1); /* @kind other */
  --qw-ease-salida:cubic-bezier(.4,0,1,1); /* @kind other */
  --qw-ease-entrada:cubic-bezier(0,0,.2,1); /* @kind other */
  --qw-ease-golpe:cubic-bezier(.34,1.3,.64,1); /* @kind other */ /* solo para marcar signo y para el contador del bote */

  --qw-trans-color:color var(--qw-dur-rapida) var(--qw-ease),background-color var(--qw-dur-rapida) var(--qw-ease),border-color var(--qw-dur-rapida) var(--qw-ease); /* @kind other */
  --qw-trans-todo:all var(--qw-dur-rapida) var(--qw-ease); /* @kind other */
}
/* Movimiento reducido: se aplica a las propiedades, no a los tokens. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0ms!important;animation-duration:0ms!important}
}