/* ==========================================================================
   Quinielas UI - Custom Styles
   Sistema de Quinielas El Tr�bol
   Extra�do de components/head.php para mejor performance
   ========================================================================== */

/* ---------------------------------- */
/* 1) VARIABLES + RESET               */
/* ---------------------------------- */
:root{
  --bg-1:#0b0f19; --bg-2:#111827;
  --card:#ffffff; --card-border:#e5e7eb;
  --ink:#0f172a; --ink-sub:#475569;
  --brand:#0d6efd; --ring:rgba(13,110,253,.32);
  --ok:#16a34a; --warn:#f59e0b; --danger:#ef4444;
  --pill:#0b1220; --pill-b:#1f2937;
  --muted:#f8fafc;
  --r:10px; --r-lg:14px;
  --navH:46px; --errH:0px;

  /* EXTREMO compacto - Reducido 70% total - M�NIMOS ABSOLUTOS */
  --card-min-h:18px;
  --btn-size:24px;
  --crest:22px; /* Escudos m�nimos */
  --name-fs:9px;
  --grid-gap:1px;

  /* ANCHO CENTRAL FIJO: alinea TODOS los escudos derechos en la MISMA X */
  --selector-fixed-w: calc(var(--btn-size)*3 + 16px);

  /* padding consistente */
  --pad-x:10px;
  --pad-y:4px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--ink); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  background:
    radial-gradient(900px 460px at 110% -10%, rgba(13,110,253,.07), transparent 60%),
    radial-gradient(800px 420px at -10% 0%, rgba(255,212,0,.07), transparent 55%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  min-height:100dvh;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
.container{ width:100%; max-width:1160px; margin:0 auto; padding:0 10px; }
.elev{ box-shadow:0 6px 14px rgba(0,0,0,.18); }

/* ---------------------------------- */
/* 2) NAVBAR                          */
/* ---------------------------------- */
.appbar{
  position:sticky; top:0; z-index:1030; height:var(--navH);
  background:rgba(15,23,42,.95); backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.brand{ display:flex; align-items:center; gap:8px; color:#fff; }
.brand img{ width:62px; } /* tr�bol ~ +35% */
.brand span{ font-family:"Bebas Neue"; letter-spacing:.2px; font-size:1rem; }
.nav-links{ display:flex; gap:14px; align-items:center; }
.nav-link{ color:#fff; font-weight:800; font-size:1rem; padding:6px 8px; border-radius:8px; }
.nav-link:hover{ background:rgba(255,255,255,.1); }
.burger{ display:none; border:1px solid rgba(255,255,255,.5); color:#fff; background:transparent; border-radius:8px; width:38px; height:32px; }
@media (max-width: 720px){
  .burger{ display:inline-grid; place-items:center; }
  .nav-links{
    position:absolute; left:0; right:0; top:var(--navH);
    background:#0b1220; border-bottom:1px solid rgba(255,255,255,.1);
    display:none; flex-direction:column; align-items:flex-start; padding:10px;
    z-index:1040;
  }
  .nav-links.show{ display:flex; }
  .nav-link{ width:100%; font-size:1.05rem; }
}

/* ---------------------------------- */
/* 3) HERO ULTRA COMPACTO M�VIL       */
/* ---------------------------------- */
.hero{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  color:#fff; margin-top:4px; /* Reducido de 6px a 4px */
}
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.18)); }

/* M�VIL: Todo en UNA sola l�nea horizontal - REDUCIDO 30% */
.hero-inner{
  position:relative; z-index:1; padding:4px 6px; /* Reducido de 6px 8px a 4px 6px (-33% vertical, -25% horizontal) */
  display:flex; align-items:center; justify-content:space-between; gap:4px; /* Reducido de 6px a 4px */
}
.hero-left{ display:flex; align-items:center; gap:6px; flex-shrink:0; } /* Reducido de 8px a 6px */
.crest{ width:38px; height:38px; object-fit:contain; } /* Reducido de 48px a 38px (-21%) */
.hero-txt{ text-align:left; flex:1; min-width:0; }
.hero-txt .title{ display:none; }
.hero-txt .subtitle{ font-weight:800; color:#ffe27a; font-size:.75rem; line-height:1.05; } /* Reducido de .85rem a .75rem y line-height de 1.1 a 1.05 */
.hero-txt .prize{ font-weight:900; text-shadow:0 1px 0 #000; font-size:.75rem; margin-top:1px; } /* Reducido de .85rem a .75rem y margin de 2px a 1px */
.hero-right{ display:none; }

/* META ROW: Tambi�n en la misma l�nea - REDUCIDO 30% */
.meta-row{
  position:relative; z-index:1;
  display:flex; flex-wrap:nowrap; gap:3px; /* Reducido de 4px a 3px */
  padding:0 6px 4px; /* Reducido de 0 8px 6px a 0 6px 4px (-25% horizontal, -33% vertical) */
  justify-content:flex-end;
}
.pill{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); color:#fff;
  padding:.07rem .3rem; border-radius:999px; font-weight:800; font-size:.65rem; white-space:nowrap; /* Reducido padding de .1rem .4rem a .07rem .3rem, font-size de .7rem a .65rem */
}
.pill .price{ font-weight:900; color:#00e676; }

/* ---------------------------------- */
/* 4) STICKY ERROR BAR                */
/* ---------------------------------- */
#stickyErrorBar{ display:none; position:sticky; top:calc(var(--navH)); z-index:1029; background:var(--danger); color:#fff; }
#stickyErrorBar.show{ display:block; }
.err-inner{ display:flex; align-items:center; gap:.5rem; justify-content:center; padding:.45rem .5rem; font-weight:800; }
.err-btn{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.7); border-radius:8px; padding:.2rem .5rem; cursor:pointer; }
.err-close{ background:transparent; border:none; color:#fff; font-size:1rem; margin-left:auto; cursor:pointer; }

/* ---------------------------------- */
/* 5) GRID DE PARTIDOS (alineado)     */
/* ---------------------------------- */
.matches{ margin-top:4px; }
.grid{
  display:grid; gap:var(--grid-gap);
  grid-template-columns: 1fr; /* m�vil */
}
@media (min-width: 640px){
  .grid{ grid-template-columns: repeat(2, 1fr); } /* tablet */
}
@media (min-width: 1024px){
  .grid{ grid-template-columns: repeat(3, 1fr); } /* desktop */
}
@media (orientation: landscape) and (min-width: 680px){
  .grid{ grid-template-columns: repeat(3, 1fr); }
}
.grid.odd > .card:last-child{
  grid-column: 1 / -1; max-width:520px; justify-self:center; width:100%;
}

.card{
  background:var(--card); border:1px solid var(--card-border); border-radius:8px;
  display:grid;
  /* OPCI�N 2: 7 columnas [Btn L] [Equipo Local] [|] [Btn E] [|] [Equipo Visitante] [Btn V] */
  grid-template-columns: auto minmax(0,1fr) 1px auto 1px minmax(0,1fr) auto;
  align-items:center; min-height:var(--card-min-h); overflow:hidden;
  gap:3px;
  padding:3px 3px;
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
  transition:all 0.15s ease;
}
.card:hover{
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  transform:translateY(-1px);
}

/* Divisores verticales entre secciones - M�NIMOS */
.divider{
  width:1px; height:22px;
  background:linear-gradient(180deg, transparent, #cbd5e1, transparent);
}

/* Lado local: rejilla (escudo + nombre) - EXTREMO compacto */
.team{
  display:flex; flex-direction:column; align-items:center;
  gap:1px; padding:0; min-width:0;
}

/* Lado visitante: igual que local pero alineado */
.team-visitor{
  display:flex; flex-direction:column; align-items:center;
  gap:1px; padding:0; min-width:0;
}

.crest-sm{ width:var(--crest); height:var(--crest); object-fit:contain; flex:0 0 auto; }
.name{
  font-weight:900; text-transform:uppercase; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:var(--name-fs); line-height:1.05; max-width:100%;
  cursor:help; /* Indica que hay tooltip */
}
.name.autofit{ letter-spacing:0.05px; }

/* Ajuste responsivo para nombres largos en m�vil */
@media (max-width: 480px){
  .name{
    font-size:11px; /* M�s peque�o en m�vil */
    letter-spacing:0;
  }
}
@media (max-width: 360px){
  .name{
    font-size:10px; /* Extra peque�o en pantallas muy chicas */
  }
}

/* Tooltip premium para nombres truncados (solo desktop/tablet con hover) */
@media (hover: hover) and (min-width: 640px) {
  .name{
    position:relative;
  }
  .name:hover::after{
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15,23,42,0.95);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    pointer-events: none;
    animation: tooltipFadeIn 0.2s ease;
  }
  .name:hover::before{
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(15,23,42,0.95);
    z-index: 1001;
    pointer-events: none;
    animation: tooltipFadeIn 0.2s ease;
  }
  .team-visitor .name:hover::after{
    left: auto;
    right: 0;
    transform: translateX(0);
  }
  .team-visitor .name:hover::before{
    left: auto;
    right: 12px;
    transform: translateX(0);
  }
}

@keyframes tooltipFadeIn{
  from{ opacity:0; transform:translateX(-50%) translateY(4px); }
  to{ opacity:1; transform:translateX(-50%) translateY(0); }
}

/* Botones individuales - Opci�n 2: al lado de equipos */
input[type="checkbox"]{ display:none; }

.btn-option{
  width:24px; height:24px; /* EXTREMO compacto - m�nimo funcional */
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:900;
  border:1.5px solid; border-radius:6px; cursor:pointer;
  transition:all 0.12s ease; background:#fff;
  flex-shrink:0;
}

/* Bot�n L (Local) - IZQUIERDA junto al equipo local */
.btn-option-local{
  border-color:#7c3aed; color:#7c3aed;
}

/* Bot�n E (Empate) - CENTRO */
.btn-option-empate{
  border-color:#f59e0b; color:#f59e0b;
}

/* Bot�n V (Visitante) - DERECHA junto al equipo visitante */
.btn-option-visitante{
  border-color:#10b981; color:#10b981;
}

/* Estados activos (checked) con elevaci�n */
input[type="checkbox"]:checked + label.btn-option-local{
  background:#7c3aed; color:#fff;
  box-shadow:0 4px 12px rgba(124,58,237,.4);
  transform:scale(1.1);
}
input[type="checkbox"]:checked + label.btn-option-empate{
  background:#f59e0b; color:#fff;
  box-shadow:0 4px 12px rgba(245,158,11,.4);
  transform:scale(1.1);
}
input[type="checkbox"]:checked + label.btn-option-visitante{
  background:#10b981; color:#fff;
  box-shadow:0 4px 12px rgba(16,185,129,.4);
  transform:scale(1.1);
}

.card:focus-within{ outline:2px solid var(--ring); outline-offset:2px; }

/* ---------------------------------- */
/* 6) FORM PARTICIPANTE + ACCIONES    */
/* ---------------------------------- */
.panel{
  background:#0b1220; border:1px solid rgba(255,255,255,.09); color:#e5e7eb;
  border-radius:var(--r); padding:10px; margin-top:10px;
}
.row{ display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width: 720px){ .row.cols-3{ grid-template-columns:1fr 1fr 1fr; } }
.label{ display:block; font-weight:800; margin-bottom:4px; color:#cbd5e1; font-size:.95rem; }
.input{
  width:100%; padding:9px 10px; border:2px solid #9ca3af; border-radius:10px; background:#e5e7eb; color:#111827; font-weight:800; font-size:1rem;
  outline:none;
}
.input:focus{ border-color:#64748b; box-shadow:0 0 0 3px rgba(100,116,139,.25); }
.error-msg{ display:none; font-size:.86rem; color:#ffd1d1; font-weight:700; margin-top:4px; }

.actions{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:8px; }
.btn{
  border:none; border-radius:10px; padding:.7rem .9rem; font-weight:900; font-size:1rem; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn-warning{ background:#f59e0b; color:#111827; }
.btn-success{ background:#16a34a; color:#fff; }
.btn-primary{ background:#0d6efd; color:#fff; }
.btn:active{ transform:translateY(1px); }

/* ---------------------------------- */
/* 7) LISTA GUARDADOS + FOOTER        */
/* ---------------------------------- */
.saved{ background:#fff; border:1px solid var(--card-border); border-radius:var(--r); margin-top:10px; overflow:hidden; }
.saved-hd{ background:#0b1220; color:#fff; padding:8px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); padding:.2rem .6rem; border-radius:999px; font-weight:800; font-size:.92rem; color:#fff; }
.strong{ color:#00e676; }
.table{ width:100%; border-collapse:collapse; }
.table tr{ border-bottom:1px solid #eef2f7; }
.table td{ padding:8px 10px; font-size:.95rem; color:#1f2937; }
.td-actions{ text-align:right; }
.badge-enviado{ display:inline-block; padding:2px 8px; font-size:.8rem; font-weight:800; border-radius:999px; background:#e6f4ea; border:1px solid #34a853; color:#167c2b; margin-left:6px; }
.btn-xs{ font-size:.86rem; padding:.25rem .55rem; border-radius:8px; border:none; background:#ef4444; color:#fff; cursor:pointer; }

.footer{
  position:sticky; bottom:0; z-index:1028; background:rgba(15,23,42,.94); backdrop-filter:blur(6px);
  border-top:1px solid rgba(255,255,255,.08); padding:.45rem 0; color:#fff;
}
.footer-inner{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.footer .tag{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); }

/* ---------------------------------- */
/* 8) TUTORIAL (DEPRECADO - Ahora usa componente tutorial_help.php) */
/* ---------------------------------- */

/* ---------------------------------- */
/* 9) A11Y & UTILS                    */
/* ---------------------------------- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.highlight-missing{ outline:2px solid var(--danger); animation: blink 1s ease 2; }
@keyframes blink{ 0%{outline-color:transparent;} 50%{outline-color:var(--danger);} 100%{outline-color:transparent;} }

/* ======== Ajustes por alto de ventana ======== */
@media (max-height: 700px){
  :root{
    --card-min-h:38px;
    --btn-size:26px;
    --selector-fixed-w: calc(var(--btn-size)*3 + 16px);
    --crest:28px;
    --name-fs:12.2px;
    --grid-gap:3px;
  }
}

/* ======== Ajustes finos m�viles ======== */
@media (max-width: 480px){
  .hero-txt .subtitle, .hero-txt .prize{ font-size:.70rem; } /* Reducido de .98rem a .70rem (-29%) */
  .crest{ width:34px; height:34px; } /* Reducido a�n m�s en m�viles */
  /* Pill única de CIERRE (COSTO eliminado) - Texto completo sin truncar */
  .pill{
    font-size:.65rem !important;
    padding:.25rem .4rem !important;
    white-space:normal !important;
    word-wrap:break-word !important;
    overflow-wrap:break-word !important;
    box-sizing:border-box !important;
    display:block !important;
    line-height:1.3 !important;
    max-width:100% !important;
    width:auto !important;
    text-align:center !important;
  }
  .pill .fw-bold,
  .pill span{
    white-space:normal !important;
    word-wrap:break-word !important;
    overflow-wrap:break-word !important;
    display:inline !important;
  }
  .meta-row{
    gap:0 !important;
    flex-wrap:nowrap !important;
    justify-content:center !important;
    overflow:hidden !important;
    padding:0 4px 4px !important;
    display:flex !important;
  }
}
/* ==========================================================================
   Quinielas UI – main.css (Fase 1/10)
   Compatibilidad: CodeIgniter 3.x + Bootstrap 5
   Principios: Progressive enhancement, WCAG 2.1 AA, Lighthouse 95+
   Convenciones: prefijo q- para utilitarias y componentes propios
   ========================================================================== */

/* ------------------------------
   0) Reset mínimo y saneamiento
   ------------------------------ */
:root {
  /* Tokens (modo claro) */
  --brand-primary: #0d6efd;
  --brand-secondary: #6c757d;
  --bg: #f7f8fa;
  --surface: #ffffff;
  --text-1: #1b1f24;
  --text-2: #6b7280;
  --success: #16a34a;
  --warning: #f59e0b;
  --error: #dc2626;

  /* Tipografía fluida */
  --fs-900: clamp(1.75rem, 1.1rem + 2.2vw, 2.25rem);
  --fs-800: clamp(1.5rem, 1rem + 1.6vw, 1.875rem);
  --fs-700: clamp(1.25rem, 0.9rem + 1.2vw, 1.5rem);
  --fs-600: clamp(1.125rem, 0.9rem + 0.6vw, 1.25rem);
  --fs-500: 1rem;
  --fs-400: 0.9375rem;
  --fs-300: 0.875rem;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 6px 16px rgba(0,0,0,.08);

  /* Motion */
  --easing: cubic-bezier(.2, .8, .2, 1);
  --speed-fast: 150ms;
}

/* Modo oscuro opcional si el usuario lo prefiere */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0d10;
    --surface: #111318;
    --text-1: #e5e7eb;
    --text-2: #9ca3af;
    --brand-secondary: #9aa0a6;
  }
}

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

html:focus-within {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font-feature-settings: "rlig" 1, "calt" 1;
  text-rendering: optimizeLegibility;
}

/* Respeta Bootstrap; solo afinamos */
img,
svg {
  max-width: 100%;
  height: auto;
}

/* Accesibilidad: foco siempre visible (sin romper Bootstrap) */
:focus-visible {
  outline: 3px solid rgba(13, 110, 253, .5);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Reduce animaciones si el usuario lo solicita */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------
   1) Tipografía y jerarquía
   ------------------------------ */
h1, .q-h1 { font-size: var(--fs-900); line-height: 1.2; margin: .5rem 0 1rem; }
h2, .q-h2 { font-size: var(--fs-800); line-height: 1.25; margin: .5rem 0 1rem; }
h3, .q-h3 { font-size: var(--fs-700); line-height: 1.3; margin: .5rem 0 .75rem; }
.lead, .q-lead { font-size: var(--fs-600); color: var(--text-2); }
.muted, .q-muted { color: var(--text-2); font-size: var(--fs-300); }

/* ------------------------------
   2) Layout utilitario
   ------------------------------ */
.q-container {
  width: min(1100px, 94vw);
  margin-inline: auto;
  padding: 16px;
}

.q-surface {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}

.q-stack { display: grid; gap: 12px; }
.q-stack-lg { display: grid; gap: 20px; }
.q-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.q-gap-sm { gap: 6px; } .q-gap-md { gap: 12px; } .q-gap-lg { gap: 20px; }

/* Body flags para detección de página (las añade main.js) */
body.q--fs .q-page-flag::before { content: "Fin de Semana"; }
body.q--ms .q-page-flag::before { content: "Media Semana"; }
body.q--dg .q-page-flag::before { content: "Dominguera"; }

/* ------------------------------
   3) Header y Footer
   ------------------------------ */
.q-header {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.q-header__title { display: flex; align-items: center; gap: 10px; }
.q-header__subtitle { color: var(--text-2); font-size: var(--fs-300); }

.q-footer {
  color: var(--text-2);
  font-size: var(--fs-300);
  padding: 12px 4px 24px;
}

/* ------------------------------
   4) Cards de partido (no tocan IDs/clases existentes)
   ------------------------------ */
.q-match {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 8px; /* Reducido de 12px a 8px (-33%) */
  transition: transform var(--speed-fast) var(--easing), box-shadow var(--speed-fast) var(--easing);
}
.q-match:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.q-match__meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-300); color: var(--text-2); margin-bottom: 3px; /* Reducido de 6px a 3px (-50%) */
}
.q-match__teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; } /* Reducido de 10px a 6px (-40%) */
.q-match__team { display: flex; align-items: center; gap: 5px; justify-content: flex-start; } /* Reducido de 8px a 5px (-37.5%) */
.q-match__team--right { justify-content: flex-end; }

.q-match__badge {
  width: 22px; height: 22px; border-radius: 50%; background: #f0f2f5; /* Reducido de 28px a 22px (-21.4%) */
  display: inline-grid; place-items: center; overflow: hidden;
}

/* ------------------------------
   5) Botones 1 / X / 2 (mutuamente excluyentes)
   ------------------------------ */
.q-picks { display: grid; grid-auto-flow: column; gap: 5px; margin-top: 6px; } /* Reducido gap de 8px a 5px y margin-top de 10px a 6px (-40%) */

.btn-pick {
  --pick-bg: #f3f4f6;
  --pick-fg: var(--text-1);
  --pick-bd: #e5e7eb;

  background: var(--pick-bg);
  color: var(--pick-fg);
  border: 1px solid var(--pick-bd);
  border-radius: var(--radius-md);
  padding: 5px 8px; /* Reducido de 8px 12px a 5px 8px (-37.5% vertical, -33% horizontal) */
  font-weight: 600;
  font-size: 0.875rem; /* Agregado para mantener legibilidad con padding reducido */
  transition: transform var(--speed-fast) var(--easing), background var(--speed-fast) var(--easing), border-color var(--speed-fast) var(--easing);
}
.btn-pick:hover { transform: translateY(-1px); }

.btn-pick--active {
  --pick-bg: var(--brand-primary);
  --pick-fg: #fff;
  --pick-bd: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(13,110,253,.15);
}

.btn-pick[disabled],
.btn-pick:disabled {
  opacity: .6; cursor: not-allowed;
}

/* Estados semánticos opcionales */
.btn-pick--success { --pick-bg: var(--success); --pick-fg:#fff; --pick-bd: var(--success); }
.btn-pick--warn    { --pick-bg: var(--warning); --pick-fg:#111; --pick-bd: var(--warning); }
.btn-pick--error   { --pick-bg: var(--error); --pick-fg:#fff; --pick-bd: var(--error); }

/* ------------------------------
   6) Barra de progreso + “faltan N”
   ------------------------------ */
.q-progress {
  display: grid; gap: 6px; margin: 10px 0 4px;
}
.q-progress__track {
  position: relative; height: 10px; background: #e9ecef; border-radius: 999px; overflow: hidden;
}
.q-progress__bar {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: var(--brand-primary); transition: width var(--speed-fast) var(--easing);
}
.q-progress__meta { display: flex; justify-content: space-between; font-size: var(--fs-300); color: var(--text-2); }

/* ------------------------------
   7) Alerts / Toasts accesibles
   ------------------------------ */
.q-toast-region {
  position: fixed; z-index: 1080; right: 16px; bottom: 16px;
  display: grid; gap: 10px;
}
.q-toast {
  background: var(--surface);
  border-left: 4px solid var(--brand-secondary);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  min-width: 240px;
}
.q-toast--success { border-color: var(--success); }
.q-toast--info    { border-color: var(--brand-primary); }
.q-toast--warn    { border-color: var(--warning); }
.q-toast--error   { border-color: var(--error); }

/* Región viva para lectores de pantalla (la creará JS) */
.q-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ------------------------------
   8) Helpers y microinteracciones
   ------------------------------ */
.q-fade-in { animation: q-fade-in var(--speed-fast) var(--easing) both; }
@keyframes q-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.q-divider { height: 1px; background: #e5e7eb; margin: 10px 0; }

/* ------------------------------
   9) Compatibilidad con Bootstrap
   ------------------------------ */
/* No sobrescribimos .btn ni .card de Bootstrap.
   Si alguna vista usa .btn para 1/X/2, aplica también .btn-pick para los estilos nuevos sin romper lo actual. */

/* ------------------------------
   10) Tamaño crítico
   ------------------------------ */
/* Mantener este archivo <= 80KB minificados. Este es el baseline inicial (~pequeño). */