/* ============================================================================
   campuzanos · dark premium
   Negro casi puro, oro para lo importante, verde a favor, rojo de riesgo.
   Oswald condensada para nombres tipo cartel, Inter para leer.
   Mobile-first: primero el celular, luego se ensancha.
   ============================================================================ */

:root {
  --negro:      #0a0a0b;
  --negro-2:    #101012;
  --negro-3:    #16161a;
  --linea:      #26262c;
  --humo:       #9a9aa6;
  --hueso:      #ecedf1;

  --oro:        #e3b34e;
  --oro-hondo:  #a77f2a;
  --verde:      #3ddc84;
  --rojo:       #f06363;
  --azulito:    #5aa9f8;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;

  --vidrio:     rgba(255, 255, 255, .045);
  --vidrio-bord:rgba(255, 255, 255, .09);
  --sombra:     0 2px 8px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.45);
}

* { box-sizing: border-box; margin: 0; }

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

body {
  min-height: 100vh;
  background: var(--negro);
  color: var(--hueso);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  overflow-x: hidden;   /* red de seguridad: la página nunca se pasea de lado */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Brillo tenue de fondo, como mesa de casino a media luz */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 480px at 12% -10%, rgba(227,179,78,.09), transparent 70%),
    radial-gradient(700px 420px at 92% 4%, rgba(61,220,132,.055), transparent 70%);
}

h1, h2, h3, .cartel {
  font-family: Oswald, "Arial Narrow", sans-serif;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.1;
}

a { color: var(--oro); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 2px;
  border-radius: 6px;
}

.envoltura { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 0 14px 64px; }

/* ─────────────────────────────── BARRA ─────────────────────────────────── */
.barra {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(10,10,11,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}
.marca { font-family: Oswald, sans-serif; font-size: 1.15rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hueso); }
.marca b { color: var(--oro); font-weight: 600; }
.barra .crece { margin-left: auto; }
.quien { font-size: .8rem; color: var(--humo); display: flex; align-items: center; gap: 8px; }
.chip-dios {
  font-family: Oswald, sans-serif; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: #2a1f05; background: linear-gradient(135deg, var(--oro), #f5cf7a);
  padding: 3px 9px; border-radius: 999px; font-weight: 600;
}

/* ─────────────────────────────── BOTONES ───────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border: 0; border-radius: var(--r-sm);
  font-family: Oswald, sans-serif; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: #1b1405; cursor: pointer;
  background: linear-gradient(135deg, var(--oro), #f0c76a);
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 22px rgba(227,179,78,.22);
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, filter .16s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; filter: grayscale(.4); }
.btn.fantasma {
  background: transparent; color: var(--hueso);
  box-shadow: inset 0 0 0 1.5px var(--vidrio-bord);
}
.btn.fantasma:hover { background: var(--vidrio); }
.btn.chico { padding: 7px 13px; font-size: .72rem; }
.btn.ancho { width: 100%; }

/* ──────────────────────────────── FORMAS ───────────────────────────────── */
label { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--humo); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; padding: 12px 14px;
  background: var(--negro-3); color: var(--hueso);
  border: 1.5px solid var(--linea); border-radius: var(--r-sm);
  font-family: inherit; font-size: .95rem;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--oro);
  box-shadow: 0 0 0 3px rgba(227,179,78,.16);
}
input::placeholder { color: #5c5c68; }
.campo { margin-bottom: 14px; }

/* ──────────────────────────── TARJETA / VIDRIO ─────────────────────────── */
.vidrio {
  background: var(--vidrio);
  border: 1px solid var(--vidrio-bord);
  border-radius: var(--r-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--sombra);
}

/* ───────────────────────────── ENTRAR / ALTA ───────────────────────────── */
.portada-acceso { min-height: 100vh; display: grid; place-items: center; padding: 24px 14px; position: relative; z-index: 1; }
.caja-acceso { width: 100%; max-width: 400px; padding: 32px 26px; }
.caja-acceso .marca { display: block; text-align: center; font-size: 1.5rem; margin-bottom: 4px; }
.lema { text-align: center; color: var(--humo); font-size: .82rem; margin-bottom: 24px; }
.pestanas { display: flex; gap: 6px; margin-bottom: 20px; background: var(--negro-3); padding: 4px; border-radius: var(--r-sm); }
.pestanas button {
  flex: 1; padding: 9px; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--humo);
  font-family: Oswald, sans-serif; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
}
.pestanas button.on { background: var(--oro); color: #1b1405; }

/* ────────────────────────────── FILTROS ────────────────────────────────── */
.filtros { display: flex; gap: 7px; flex-wrap: wrap; margin: 18px 0 16px; }
.filtro {
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: var(--negro-3); border: 1px solid var(--linea); color: var(--humo);
  font-size: .78rem; font-weight: 500;
  transition: all .15s;
}
.filtro:hover { border-color: #3a3a44; color: var(--hueso); }
.filtro.on { background: var(--oro); border-color: var(--oro); color: #1b1405; font-weight: 600; }

/* ──────────────────────────── LISTA DE PARTIDOS ────────────────────────── */
.dia-sep {
  font-family: Oswald, sans-serif; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro); margin: 22px 0 10px; display: flex; align-items: center; gap: 10px;
}
.dia-sep::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--linea), transparent); }

.partido {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 14px 16px; margin-bottom: 9px;
  background: var(--vidrio); border: 1px solid var(--vidrio-bord); border-radius: var(--r-md);
  transition: border-color .16s, transform .16s, background .16s;
}
.partido:hover { border-color: rgba(227,179,78,.35); transform: translateY(-1px); }
/* Sin esto la primera columna del grid no se puede encoger (min-width:auto por
   defecto) y en pantalla chica empuja los botones fuera de la tarjeta. */
.partido > div:first-child { min-width: 0; }
.partido.elegido { border-color: var(--oro); background: rgba(227,179,78,.08); }

/* El markup (fase 11) agrupa escudo+nombre DENTRO de cada .equipo, y el
   centro (VS o marcador) va en su propia columna: rejilla 1fr auto 1fr para
   que el centro quede SIEMPRE al centro, sin importar lo largo de los
   nombres. Cada lado recorta parejo. */
.duelo { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; min-width: 0; }
.equipo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.equipo.visita { justify-content: flex-end; text-align: right; }
/* ESCUDOS · caja fija, igual en los cuatro deportes.
   OJO: el <img> cuelga de .duelo, no de .equipo, asi que la regla tiene que
   cubrir las dos posiciones. ESPN los sirve a 500x500, asi que sin caja fija
   se pintan a tamano natural y revientan la tarjeta.
   object-fit:contain para que no se deformen los que no son cuadrados. */
.duelo img,
.equipo img,
.partido .duelo > img {
  width: 44px;
  height: 44px;
  min-width: 44px;
  max-width: 44px;
  object-fit: contain;
  object-position: center;
  flex: 0 0 44px;
  align-self: center;
}
.equipo span { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs { font-family: Oswald, sans-serif; color: var(--humo); font-size: .72rem; letter-spacing: .1em; flex-shrink: 0; justify-self: center; }
/* El marcador vivo/final ocupa el lugar del VS, más grande y en oro. */
.vs.marcador { font-size: 1.2rem; font-weight: 600; color: var(--hueso); letter-spacing: .04em; }
.vs.marcador.envivo { color: var(--oro); }
.eti.final { background: rgba(255,255,255,.07); color: var(--hueso);
             max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 5px; }
.eti {
  font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,.07); color: var(--humo);
}
.eti.hora { color: var(--hueso); }
.eti.vivo { background: rgba(240,99,99,.16); color: var(--rojo); animation: latir 1.6s ease-in-out infinite; }
.eti.listo { background: rgba(61,220,132,.15); color: var(--verde); }
@keyframes latir { 50% { opacity: .55; } }

.acciones-partido { display: flex; gap: 7px; align-items: center; flex-shrink: 0; }
.marca-sel {
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
  border: 1.5px solid var(--linea); background: var(--negro-3);
  display: grid; place-items: center; color: transparent; font-size: .8rem;
}
.marca-sel.on { background: var(--oro); border-color: var(--oro); color: #1b1405; }

/* ─────────────────────────────── VEREDICTO ─────────────────────────────── */
.veredicto { margin-top: 18px; padding: 22px 20px; }
.veredicto h2 { font-size: 1.3rem; margin-bottom: 4px; }
.sub-ver { color: var(--humo); font-size: .8rem; margin-bottom: 18px; }

.tape { display: grid; gap: 14px; margin-bottom: 20px; }
.lado { padding: 14px 16px; border-radius: var(--r-md); background: var(--negro-2); border: 1px solid var(--linea); }
.lado.gana { border-color: rgba(227,179,78,.45); background: linear-gradient(160deg, rgba(227,179,78,.09), var(--negro-2)); }
.lado-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.lado-nom { font-family: Oswald, sans-serif; font-size: 1.05rem; }
.lado-pct { font-family: Oswald, sans-serif; font-size: 1.6rem; color: var(--oro); }
.barra-prob { height: 7px; background: var(--negro-3); border-radius: 999px; overflow: hidden; margin-bottom: 12px; }
.barra-prob i {
  display: block; height: 100%; border-radius: 999px; width: 0;
  background: linear-gradient(90deg, var(--oro-hondo), var(--oro));
  transition: width .9s cubic-bezier(.2,.9,.25,1);
}
.lado.b .barra-prob i { background: linear-gradient(90deg, #2f6ea8, var(--azulito)); }
.lado.b .lado-pct { color: var(--azulito); }

.puntos { list-style: none; padding: 0; display: grid; gap: 5px; }
.puntos li { font-size: .84rem; color: #c6c7cf; padding-left: 18px; position: relative; line-height: 1.45; }
.puntos li::before { position: absolute; left: 0; top: -1px; font-weight: 700; }
.puntos.pro li::before { content: "▲"; color: var(--verde); font-size: .62rem; top: 3px; }
.puntos.con li::before { content: "▼"; color: var(--rojo); font-size: .62rem; top: 3px; }
.mini-tit { font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--humo); margin: 10px 0 5px; }

.bloque { margin-bottom: 16px; }
.bloque h3 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--humo); margin-bottom: 8px; }
.lista-simple { list-style: none; padding: 0; display: grid; gap: 6px; }
.lista-simple li {
  font-size: .86rem; color: #c6c7cf; padding: 9px 12px;
  background: var(--negro-2); border-left: 2px solid var(--linea); border-radius: 0 8px 8px 0;
}
.lista-simple.alerta li { border-left-color: var(--rojo); color: #e8b9b9; }

.riesgo {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: Oswald, sans-serif; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 999px;
}
.riesgo.bajo  { background: rgba(61,220,132,.14); color: var(--verde); }
.riesgo.medio { background: rgba(227,179,78,.14); color: var(--oro); }
.riesgo.alto  { background: rgba(240,99,99,.14); color: var(--rojo); }

.tarjeta-oro {
  margin-top: 18px; padding: 18px;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, rgba(227,179,78,.16), rgba(227,179,78,.045));
  border: 1px solid rgba(227,179,78,.4);
}
.tarjeta-oro .eti-rec { font-family: Oswald, sans-serif; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); }
.tarjeta-oro .apuesta { font-family: Oswald, sans-serif; font-size: 1.25rem; margin: 6px 0 10px; }
.conf-fila { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.conf-barra { flex: 1; height: 6px; background: rgba(0,0,0,.4); border-radius: 999px; overflow: hidden; }
.conf-barra i { display: block; height: 100%; background: var(--oro); border-radius: 999px; width: 0; transition: width .9s ease; }
.just { font-size: .87rem; color: #d8d9e0; }
.alterna { margin-top: 10px; font-size: .82rem; color: var(--humo); }
.advertencia { margin-top: 16px; font-size: .74rem; color: #6f7079; text-align: center; font-style: italic; }

/* ───────────────────────────── PANEL DIOS ──────────────────────────────── */
.panel-dios { margin: 18px 0; padding: 16px 18px; border-radius: var(--r-md);
  background: linear-gradient(150deg, rgba(227,179,78,.09), transparent); border: 1px solid rgba(227,179,78,.3); }
.panel-dios h3 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); margin-bottom: 10px; }
.barra-dios { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cuenta-sel { font-size: .8rem; color: var(--humo); margin-right: auto; }

/* ──────────────────────────────── AVISOS ───────────────────────────────── */
.aviso { padding: 12px 14px; border-radius: var(--r-sm); font-size: .86rem; margin-bottom: 14px; }
.aviso.mal  { background: rgba(240,99,99,.12); border: 1px solid rgba(240,99,99,.3); color: #f3b0b0; }
.aviso.bien { background: rgba(61,220,132,.12); border: 1px solid rgba(61,220,132,.3); color: #a7ecc7; }
.aviso.ojo  { background: rgba(227,179,78,.1); border: 1px solid rgba(227,179,78,.3); color: #ecd39a; }

.vacio { text-align: center; padding: 46px 20px; color: var(--humo); }
.vacio .grande { font-size: 2.4rem; margin-bottom: 10px; opacity: .5; }

/* ─────────────────────────────── ESCRITORIO ────────────────────────────── */
@media (min-width: 720px) {
  body { font-size: 16px; }
  .envoltura { padding: 0 20px 80px; }
  .tape { grid-template-columns: 1fr 1fr; }
  .partido { grid-template-columns: 1fr auto auto; }
}

/* ── Móvil (fase 11): el duelo se APILA — escudo arriba, nombre abajo,
   centrados en su columna, con el VS/marcador al centro vertical. Los
   nombres largos cortan en dos renglones sin romper nada. ── */
@media (max-width: 520px) {
  .duelo { gap: 6px; }
  .equipo,
  .equipo.visita { flex-direction: column; justify-content: flex-start;
                   align-items: center; gap: 5px; text-align: center; }
  .equipo img { order: -1; }   /* el escudo SIEMPRE arriba, en los dos lados */
  .duelo img, .equipo img, .partido .duelo > img {
    width: 38px; height: 38px; min-width: 38px; max-width: 38px; flex-basis: 38px;
  }
  .equipo span {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    font-size: .8rem; line-height: 1.22; text-align: center; word-break: break-word;
  }
  .vs { align-self: center; }
  .vs.marcador { font-size: 1.3rem; }
  .partido { padding: 12px; gap: 10px; grid-template-columns: 1fr; }
  .meta { justify-content: center; }
  /* En celular los botones se van a su propio renglón y se reparten parejo
     en dos columnas: en una fila no caben sin salirse de la tarjeta. */
  .acciones-partido { gap: 6px; flex-wrap: wrap; justify-content: stretch; }
  .acciones-partido .btn { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .acciones-partido .marca-sel { flex: 0 0 auto; }
  .btn.chico { padding: 8px 8px; font-size: .68rem; }
  /* nada se asoma de lado en el cel */
  .barra { padding: 10px 12px; gap: 8px; }
  .quien { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 380px) {
  .duelo img, .equipo img, .partido .duelo > img {
    width: 32px; height: 32px; min-width: 32px; max-width: 32px; flex-basis: 32px;
  }
  .equipo span { font-size: .74rem; }
}

/* ───────────────────── MENOS MOVIMIENTO SI ASÍ LO PIDEN ────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover, .partido:hover { transform: none; }
}

/* ─────────────────────────────── EL RITUAL ─────────────────────────────── */
.ritual {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: rgba(6,6,7,.90);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .28s ease;
}
.ritual.on { opacity: 1; }
.ritual-caja {
  text-align: center; padding: 26px 20px;
  border-radius: var(--r-lg);
  background: rgba(16,16,18,.7);
  border: 1px solid rgba(227,179,78,.25);
  box-shadow: 0 0 60px rgba(227,179,78,.10), var(--sombra);
  transform: translateY(10px); transition: transform .34s cubic-bezier(.2,.9,.25,1);
}
.ritual.on .ritual-caja { transform: translateY(0); }
.ritual-lienzo { display: block; margin: 0 auto 6px; }
.ritual-frase {
  font-family: Oswald, sans-serif; font-size: .96rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--oro);
  transition: opacity .22s ease; min-height: 1.4em;
}
.ritual-pie { margin-top: 8px; font-size: .72rem; color: #6f7079; }

@media (prefers-reduced-motion: reduce) {
  .ritual-lienzo { display: none; }
  .ritual-caja { min-width: 260px; }
}

/* ──────────────────────── LISTÓN DE DEMO ───────────────────────────────── */
.veredicto.es-demo { border-color: rgba(90,169,248,.45); }
.liston-demo {
  display: block; margin: -22px -20px 16px; padding: 9px 16px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: repeating-linear-gradient(135deg,
      rgba(90,169,248,.22) 0 12px, rgba(90,169,248,.10) 12px 24px);
  border-bottom: 1px solid rgba(90,169,248,.4);
  color: #bcd9fb;
  font-family: Oswald, sans-serif; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; text-align: center;
}

/* ─────────────────── AMBIENTE del login (cartas, fichas, dados) ─────────── */
/* Va detrás de todo y no recibe clics: es decorado, no interfaz. */
.ambiente {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Se desvanece hacia el centro para que no compita con el formulario */
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, transparent 22%, rgba(0,0,0,.55) 46%, #000 78%);
          mask-image: radial-gradient(closest-side at 50% 50%, transparent 22%, rgba(0,0,0,.55) 46%, #000 78%);
}
.portada-acceso { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .ambiente { display: none; } }

/* ───────────────── CAMPO DE CORREO CON DOMINIO FIJO ─────────────────────── */
.correo-fijo {
  display: flex; align-items: stretch;
  border: 1.5px solid var(--linea); border-radius: var(--r-sm);
  background: var(--negro-3); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.correo-fijo:focus-within { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(227,179,78,.16); }
.correo-fijo input { border: 0; border-radius: 0; background: transparent; flex: 1; min-width: 0; }
.correo-fijo input:focus { box-shadow: none; }
.correo-fijo span {
  display: flex; align-items: center; padding: 0 12px;
  background: rgba(255,255,255,.05); border-left: 1px solid var(--linea);
  color: var(--humo); font-size: .84rem; white-space: nowrap;
}
.pista { margin-top: 6px; font-size: .74rem; color: var(--humo); line-height: 1.4; }
.pista b { color: var(--oro); }
@media (max-width: 400px) { .correo-fijo span { font-size: .72rem; padding: 0 8px; } }

/* ─────────────────────────── SECCIONES ─────────────────────────────────── */
.secciones { display: flex; gap: 4px; margin: 16px 0 4px; background: var(--negro-3);
             padding: 4px; border-radius: var(--r-sm);
             /* Con seis secciones ya no caben en un cel: la barra se desliza
                de lado (como la de ligas) en vez de desbordar la página. */
             overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.secciones::-webkit-scrollbar { display: none; }
.secciones .sec {
  flex: 1; padding: 10px; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--humo);
  font-family: Oswald, sans-serif; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .secciones .sec { flex: none; padding: 10px 13px; }
}
.secciones .sec.on { background: var(--oro); color: #1b1405; }

/* ─────────────────────────── CAPA SOCIAL ───────────────────────────────── */
.social { margin-top: 10px; padding: 16px; border-radius: var(--r-md);
          background: var(--negro-2); border: 1px solid var(--linea); }
.social h4 { font-family: Oswald, sans-serif; font-size: .72rem; letter-spacing: .14em;
             text-transform: uppercase; color: var(--humo); margin-bottom: 9px; }
.votos { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.voto {
  flex: 1; min-width: 92px; padding: 11px 8px; border-radius: var(--r-sm); cursor: pointer;
  background: var(--negro-3); border: 1.5px solid var(--linea); color: var(--hueso);
  font-size: .82rem; font-weight: 600; text-align: center; transition: all .15s;
}
.voto:hover { border-color: #3a3a44; }
.voto.on { background: rgba(227,179,78,.14); border-color: var(--oro); color: var(--oro); }
.voto small { display: block; font-weight: 400; font-size: .68rem; color: var(--humo); margin-top: 3px; }
.voto.on small { color: rgba(227,179,78,.75); }
.conf-slider { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.conf-slider input[type=range] { flex: 1; accent-color: var(--oro); padding: 0; }
.conf-slider b { font-family: Oswald, sans-serif; min-width: 42px; text-align: right; color: var(--oro); }

.tip-form { display: grid; gap: 8px; margin-bottom: 12px; }
.tip-form textarea { min-height: 62px; resize: vertical; font-size: .9rem; }
.tip-fila { display: flex; gap: 8px; }
.tip-fila select { flex: 1; }

.tip {
  padding: 10px 12px; border-radius: 10px; margin-bottom: 7px;
  background: var(--negro-3); border-left: 2px solid var(--oro-hondo);
}
.tip-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.tip-cab b { font-size: .82rem; }
.tip-cab .eti { font-size: .62rem; }
.tip-cab .cuando { color: var(--humo); font-size: .7rem; margin-left: auto; }
.tip p { font-size: .87rem; color: #c6c7cf; }
.tip .quitar { background: none; border: 0; color: var(--rojo); cursor: pointer; font-size: .72rem; padding: 0; }

/* ──────────────────────── COMPARACIÓN A vs B ───────────────────────────── */
.comparo { display: grid; gap: 12px; margin-top: 14px; }
@media (min-width: 720px) { .comparo { grid-template-columns: 1fr 1fr; } }
.comparo-col { padding: 14px; border-radius: var(--r-md); background: var(--negro-2); border: 1px solid var(--linea); }
.comparo-col h4 { font-family: Oswald, sans-serif; font-size: .74rem; letter-spacing: .12em;
                  text-transform: uppercase; margin-bottom: 8px; }
.comparo-col.a h4 { color: var(--oro); }
.comparo-col.b h4 { color: var(--azulito); }
.comparo-fila { display: flex; justify-content: space-between; font-size: .86rem; padding: 5px 0;
                border-bottom: 1px solid #1e1e24; }
.comparo-fila:last-child { border-bottom: 0; }
.delta { font-family: Oswald, sans-serif; font-size: .8rem; }
.delta.sube { color: var(--verde); } .delta.baja { color: var(--rojo); } .delta.igual { color: var(--humo); }
.senal { padding: 9px 11px; border-radius: 9px; margin-bottom: 6px; font-size: .84rem; }
.senal.usada { background: rgba(61,220,132,.09); border-left: 2px solid var(--verde); }
.senal.tirada { background: rgba(240,99,99,.08); border-left: 2px solid var(--rojo); }
.senal .de { color: var(--humo); font-size: .74rem; }
.veredicto-juntos { margin-top: 14px; padding: 13px 15px; border-radius: var(--r-md);
                    background: linear-gradient(140deg, rgba(61,220,132,.1), transparent);
                    border: 1px solid rgba(61,220,132,.3); font-size: .88rem; }
.veredicto-juntos.difieren { background: linear-gradient(140deg, rgba(227,179,78,.1), transparent);
                             border-color: rgba(227,179,78,.35); }

/* ──────────────────────────── TABLA / GENTE ────────────────────────────── */
.tabla-pos { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla-pos th { font-family: Oswald, sans-serif; font-size: .66rem; letter-spacing: .1em;
                text-transform: uppercase; color: var(--humo); text-align: left;
                padding: 9px 8px; border-bottom: 1px solid var(--linea); }
.tabla-pos td { padding: 11px 8px; border-bottom: 1px solid #17171c; }
.tabla-pos tr:last-child td { border-bottom: 0; }
.tabla-pos .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-pos tr.oro td { background: linear-gradient(90deg, rgba(227,179,78,.13), transparent); }
.tabla-pos tr.oro .pos { color: var(--oro); font-weight: 800; }
.tabla-pos tr.yo td { box-shadow: inset 2px 0 0 var(--azulito); }
.tabla-pos .pos { font-family: Oswald, sans-serif; width: 34px; }
.racha { font-size: .74rem; padding: 2px 7px; border-radius: 999px; }
.racha.bien { background: rgba(61,220,132,.14); color: var(--verde); }
.racha.mal  { background: rgba(240,99,99,.14); color: var(--rojo); }

.fila-user { display: flex; align-items: center; gap: 10px; padding: 12px;
             border-bottom: 1px solid #17171c; flex-wrap: wrap; }
.fila-user:last-child { border-bottom: 0; }
.fila-user .nom { font-weight: 600; }
.fila-user .correo { color: var(--humo); font-size: .78rem; }
.fila-user .crece { margin-left: auto; }
.fila-user.apagado { opacity: .5; }

/* ─────────────── QUIÉN APORTÓ cada dato (capa social) ──────────────────── */
.quien-aporta {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--oro-hondo), var(--oro));
  color: #1b1405; font-family: Oswald, sans-serif; font-size: .68rem; font-weight: 600;
  flex-shrink: 0;
}
.tip-cab b { font-size: .88rem; color: var(--hueso); }
.eti.voto-de { background: rgba(61,220,132,.14); color: var(--verde); }
.tip-form label { margin-bottom: 4px; }
.tip-form textarea { min-height: 74px; }

/* ============================================================================
   FASE 4 · "El Consejo" y el modelo matemático
   Mismo idioma visual: negro, oro para lo que importa, vidrio. Mobile-first:
   todo apilado en el celular, en rejilla cuando hay ancho.
   ============================================================================ */

.b4-cab { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.b4-cab > div:first-child { min-width: 0; }
.b4-cab h2 { font-size: 1.3rem; }
.b4-cab h3 { font-family: Oswald, sans-serif; font-size: 1.05rem; letter-spacing: .04em;
             text-transform: uppercase; color: var(--oro); }
.b4-cab .eti { margin-left: auto; flex: none; }
.eti.demo-eti { background: rgba(90,169,248,.16); color: var(--azulito); }

/* ── la banda de acuerdo ─────────────────────────────────────────────────── */
.b4-acuerdo { padding: 15px 17px; border-radius: var(--r-md); margin-bottom: 16px;
              border: 1px solid var(--linea); background: var(--negro-2); }
.b4-acuerdo-tit { display: flex; align-items: center; gap: 9px;
                  font-family: Oswald, sans-serif; font-size: .92rem; letter-spacing: .14em;
                  text-transform: uppercase; margin-bottom: 6px; }
.b4-acuerdo-tit .ico { font-size: 1.1rem; line-height: 1; }
.b4-acuerdo p { font-size: .88rem; color: var(--humo); line-height: 1.5; }

.b4-acuerdo.fuerte { border-color: rgba(227,179,78,.5);
  background: linear-gradient(140deg, rgba(227,179,78,.14), rgba(227,179,78,.02) 60%, transparent); }
.b4-acuerdo.fuerte .b4-acuerdo-tit { color: var(--oro); }
.b4-acuerdo.dividido { border-color: rgba(240,99,99,.4);
  background: linear-gradient(140deg, rgba(240,99,99,.1), transparent 65%); }
.b4-acuerdo.dividido .b4-acuerdo-tit { color: var(--rojo); }
.b4-acuerdo.flojo .b4-acuerdo-tit { color: var(--humo); }

.b4-prom { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; margin-top: 11px;
           padding-top: 11px; border-top: 1px solid var(--linea); }
.b4-prom span { font-size: .8rem; color: var(--humo); }
.b4-prom b { font-family: Oswald, sans-serif; font-size: 1.05rem; color: var(--hueso);
             margin-right: 4px; }
.b4-prom small { width: 100%; font-size: .7rem; color: var(--humo); opacity: .75; }

/* ── las cuatro fuentes ──────────────────────────────────────────────────── */
.b4-rejilla { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .b4-rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .b4-rejilla { grid-template-columns: repeat(4, 1fr); } }

.b4-fuente { padding: 14px; border-radius: var(--r-md); background: var(--negro-2);
             border: 1px solid var(--linea); min-width: 0; }
.b4-fuente.vacia { opacity: .72; display: flex; flex-direction: column; gap: 9px;
                   align-items: flex-start; }
.b4-fuente-cab { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 3px; }
.b4-fuente-cab h4 { font-family: Oswald, sans-serif; font-size: .8rem; letter-spacing: .1em;
                    text-transform: uppercase; color: var(--oro); }
.b4-fuente[data-fuente="modelo"] .b4-fuente-cab h4 { color: var(--azulito); }
.b4-fuente[data-fuente="grupo"]  .b4-fuente-cab h4 { color: var(--verde); }
.b4-quees { font-size: .74rem; color: var(--humo); line-height: 1.45; margin-bottom: 12px; }
.b4-falta { font-size: .8rem; color: var(--humo); line-height: 1.5; }

.b4-fila { margin-bottom: 10px; }
.b4-eq { display: inline-block; font-size: .8rem; max-width: 68%; overflow: hidden;
         text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.b4-num { float: right; font-family: Oswald, sans-serif; font-size: .86rem; color: var(--humo); }
.b4-fila.gana .b4-num { color: var(--oro); }
.b4-fila.gana .b4-eq  { color: var(--hueso); font-weight: 600; }
.b4-barra { clear: both; height: 6px; background: var(--negro-3); border-radius: 999px;
            overflow: hidden; margin-top: 4px; }
.b4-barra i { display: block; height: 100%; border-radius: 999px; width: 0;
              background: linear-gradient(90deg, var(--oro-hondo), var(--oro));
              transition: width .7s cubic-bezier(.22,1,.36,1); }
.b4-fila:not(.gana) .b4-barra i { background: #3a3a44; }
.b4-fuente[data-fuente="modelo"] .b4-fila.gana .b4-barra i {
  background: linear-gradient(90deg, #2f6ea8, var(--azulito)); }
.b4-fuente[data-fuente="modelo"] .b4-fila.gana .b4-num { color: var(--azulito); }
.b4-fuente[data-fuente="grupo"] .b4-fila.gana .b4-barra i {
  background: linear-gradient(90deg, #1f7a4a, var(--verde)); }
.b4-fuente[data-fuente="grupo"] .b4-fila.gana .b4-num { color: var(--verde); }

.b4-conf { font-size: .72rem; color: var(--humo); padding-top: 8px;
           border-top: 1px solid var(--linea); }
.b4-conf b { color: var(--hueso); }
.b4-nota { font-size: .72rem; color: var(--humo); line-height: 1.5; margin-top: 8px; opacity: .9; }
.b4-legal { font-size: .71rem; color: var(--humo); line-height: 1.5; margin-top: 12px;
            padding-top: 10px; border-top: 1px solid var(--linea); opacity: .8; }

/* ── donde está el dinero ────────────────────────────────────────────────── */
.b4-dinero { margin-top: 20px; padding: 17px; border-radius: var(--r-md);
             border: 1px solid rgba(227,179,78,.28);
             background: linear-gradient(160deg, rgba(227,179,78,.06), transparent 55%),
                         var(--negro-2); }

.b4-mejor { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline;
            padding: 13px 15px; border-radius: var(--r-sm); margin-bottom: 14px;
            background: rgba(61,220,132,.09); border: 1px solid rgba(61,220,132,.3); }
.b4-mejor .et { font-family: Oswald, sans-serif; font-size: .66rem; letter-spacing: .16em;
                text-transform: uppercase; color: var(--verde); width: 100%; }
.b4-mejor > b { font-family: Oswald, sans-serif; font-size: 1.1rem; }
.b4-mejor span { font-size: .8rem; color: var(--humo); }
.b4-mejor span b { color: var(--hueso); }
.b4-mejor .pos { color: var(--verde); }
.b4-nada { padding: 12px 14px; border-radius: var(--r-sm); background: var(--negro-3);
           font-size: .84rem; color: var(--humo); line-height: 1.5; margin-bottom: 14px; }

/* La tabla se desborda sola en celular en vez de romper la página. */
.b4-tabla-env { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.b4-tabla { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .82rem; }
.b4-tabla th { font-family: Oswald, sans-serif; font-size: .64rem; letter-spacing: .13em;
               text-transform: uppercase; color: var(--humo); text-align: right;
               padding: 0 9px 8px; font-weight: 500; white-space: nowrap; }
.b4-tabla th:first-child { text-align: left; }
.b4-tabla td { padding: 9px; text-align: right; border-top: 1px solid var(--linea);
               white-space: nowrap; }
.b4-tabla td.j-nom { text-align: left; white-space: normal; }
.b4-tabla tr.es-valor td { background: rgba(61,220,132,.07); }
.b4-tabla tr.malo td { color: var(--humo); }
.b4-tabla .chispa { display: inline-block; font-family: Oswald, sans-serif; font-size: .6rem;
                    letter-spacing: .1em; padding: 2px 6px; border-radius: 999px;
                    background: var(--verde); color: #06210f; margin-right: 7px;
                    vertical-align: 1px; }
.b4-tabla .j-cuota b { font-family: Oswald, sans-serif; font-size: .95rem; }
.b4-tabla small { display: block; font-size: .66rem; color: var(--humo); font-weight: 400; }
.b4-tabla .j-ev { font-family: Oswald, sans-serif; font-size: .95rem; }
.b4-tabla .j-ev.pos { color: var(--verde); }
.b4-tabla .j-ev.neg { color: var(--humo); }
.b4-tabla .j-kelly { font-family: Oswald, sans-serif; color: var(--oro); }

/* ── el modelo por dentro ────────────────────────────────────────────────── */
.b4-detalle { margin-top: 18px; border-top: 1px solid var(--linea); padding-top: 14px; }
.b4-detalle > summary { cursor: pointer; font-family: Oswald, sans-serif; font-size: .78rem;
                        letter-spacing: .1em; text-transform: uppercase; color: var(--oro);
                        list-style: none; padding: 7px 0; }
.b4-detalle > summary::-webkit-details-marker { display: none; }
.b4-detalle > summary::before { content: "\25B8  "; }
.b4-detalle[open] > summary::before { content: "\25BE  "; }

.b4-sub { font-family: Oswald, sans-serif; font-size: .72rem; letter-spacing: .13em;
          text-transform: uppercase; color: var(--humo); margin: 16px 0 9px; }
.b4-cifras { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.b4-cifras > div { padding: 10px 12px; border-radius: var(--r-sm); background: var(--negro-3);
                   border: 1px solid var(--linea); }
.b4-cifras span { display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
                  color: var(--humo); margin-bottom: 3px; }
.b4-cifras b { font-family: Oswald, sans-serif; font-size: 1.05rem; }

.b4-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.b4-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px;
           border-radius: 999px; background: var(--negro-3); border: 1px solid var(--linea);
           font-size: .74rem; color: var(--humo); }
.b4-chip b { font-family: Oswald, sans-serif; font-size: .88rem; color: var(--hueso); }

.b4-frase { font-size: .92rem; line-height: 1.55; padding: 11px 13px; border-radius: var(--r-sm);
            background: var(--negro-3); border-left: 3px solid var(--oro); }
.b4-reparto { margin-top: 11px; }
.b4-fila-rep { display: grid; grid-template-columns: 1fr 72px 72px; gap: 8px; font-size: .8rem;
               padding: 6px 0; border-bottom: 1px solid var(--linea); }
.b4-fila-rep .l, .b4-fila-rep .v { text-align: right; font-family: Oswald, sans-serif; }
.b4-fila-rep .l { color: var(--oro); }
.b4-fila-rep .v { color: var(--azulito); }
.b4-fila-rep.cab { border-bottom: 0; font-size: .66rem; letter-spacing: .08em;
                   text-transform: uppercase; color: var(--humo); }
.b4-fila-rep.cab .l, .b4-fila-rep.cab .v { font-family: inherit; overflow: hidden;
                                           text-overflow: ellipsis; }

.b4-mapa-env { overflow-x: auto; }
.b4-mapa { min-width: 320px; }
.b4-mapa table { border-collapse: collapse; width: 100%; }
.b4-mapa th { font-size: .66rem; color: var(--humo); font-weight: 500; padding: 3px; }
.b4-mapa td { text-align: center; font-size: .64rem; padding: 0; height: 26px;
              border: 1px solid var(--negro); color: var(--negro); font-weight: 700; }
.b4-mapa-ejes { display: flex; justify-content: space-between; gap: 12px; padding: 0 0 5px;
                font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
                color: var(--humo); }
.b4-mapa-ejes .l { color: var(--oro); }
.b4-mapa-ejes .v { color: var(--azulito); text-align: right; }

/* ── pie con las vistas que se metieron adentro ──────────────────────────── */
.b4-pie { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; padding-top: 12px;
          border-top: 1px solid var(--linea); }
.enlace { background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
          font-size: .78rem; color: var(--oro); text-decoration: underline;
          text-underline-offset: 3px; text-align: left; }
.enlace:hover { color: var(--hueso); }

/* ── el botón de la tarjeta ──────────────────────────────────────────────── */
.btn.oro-linea { border-color: rgba(227,179,78,.55); color: var(--oro);
                 background: rgba(227,179,78,.08); }
.btn.oro-linea:hover { background: rgba(227,179,78,.17); border-color: var(--oro); }

/* Quien pidió menos movimiento, que no vea barras creciendo. */
@media (prefers-reduced-motion: reduce) {
  .b4-barra i { transition: none; }
}

/* ============================================================================
   FASE 5 · "El Radar"
   Centro de mando: negro, oro, y rojo solo cuando de verdad arde.
   ============================================================================ */

/* ── El Consejo ahora son CINCO columnas ─────────────────────────────────── */
@media (min-width: 1180px) { .b4-rejilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1500px) { .b4-rejilla { grid-template-columns: repeat(5, 1fr); } }

.b4-fuente[data-fuente="poly"] .b4-fuente-cab h4 { color: #a78bfa; }
.b4-fuente[data-fuente="poly"] .b4-fila.gana .b4-barra i {
  background: linear-gradient(90deg, #5b3fa8, #a78bfa); }
.b4-fuente[data-fuente="poly"] .b4-fila.gana .b4-num { color: #a78bfa; }
.b4-vol { display: flex; align-items: baseline; gap: 6px; font-size: .72rem; color: var(--humo);
          padding-top: 8px; border-top: 1px solid var(--linea); }
.b4-vol b { font-family: Oswald, sans-serif; color: var(--hueso); font-size: .84rem; }
.b4-vol .chico { color: var(--rojo); }

/* la joya: valor que confirma el mercado */
.b4-confirmado { margin-bottom: 14px; padding: 14px 16px; border-radius: var(--r-sm);
  border: 1px solid rgba(227,179,78,.6);
  background: linear-gradient(140deg, rgba(227,179,78,.2), rgba(227,179,78,.04) 65%, transparent);
  box-shadow: 0 0 0 1px rgba(227,179,78,.12) inset; }
.b4-confirmado .et { display: flex; align-items: center; gap: 8px;
  font-family: Oswald, sans-serif; font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--oro); margin-bottom: 7px; }
.b4-confirmado .et::before { content: '★'; font-size: 1rem; letter-spacing: 0; }
.b4-confirmado h5 { font-family: Oswald, sans-serif; font-size: 1.12rem; margin-bottom: 5px; }
.b4-confirmado p { font-size: .82rem; color: var(--humo); line-height: 1.55; }
.b4-confirmado .datos { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 9px;
                        font-size: .8rem; color: var(--humo); }
.b4-confirmado .datos b { color: var(--hueso); }
.b4-tabla .chispa.doble { background: var(--oro); color: #201603; }

/* ── cabecera de la pantalla ─────────────────────────────────────────────── */
.rad-cab { padding: 20px; border-radius: var(--r-lg); margin-bottom: 16px; }
.rad-cab h2 { font-size: 1.4rem; }
.rad-cuenta { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 12px; }
.rad-chip { display: flex; align-items: baseline; gap: 8px; padding: 9px 14px;
            border-radius: var(--r-sm); background: var(--negro-3);
            border: 1px solid var(--linea); }
.rad-chip b { font-family: Oswald, sans-serif; font-size: 1.35rem; line-height: 1; }
.rad-chip span { font-size: .74rem; color: var(--humo); }
.rad-chip.alerta      { border-color: rgba(240,99,99,.45); }
.rad-chip.alerta b    { color: var(--rojo); }
.rad-chip.divergencia { border-color: rgba(227,179,78,.4); }
.rad-chip.divergencia b { color: var(--oro); }
.rad-chip.alineado b  { color: var(--verde); }
.rad-chip.cero        { opacity: .45; }
.rad-umbral { font-size: .8rem; color: var(--humo); line-height: 1.5; }
.rad-umbral b { color: var(--hueso); }
.rad-sin { font-size: .78rem; color: var(--humo); text-align: center; margin-top: 14px; opacity: .8; }

/* ── cada partido ────────────────────────────────────────────────────────── */
.rad-lista { display: flex; flex-direction: column; gap: 12px; }
.rad-item { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 15px;
            border-radius: var(--r-md); background: var(--negro-2);
            border: 1px solid var(--linea); }
@media (min-width: 620px) { .rad-item { grid-template-columns: 120px 1fr; align-items: start; } }

.rad-item.alerta { border-color: rgba(240,99,99,.42);
  background: linear-gradient(120deg, rgba(240,99,99,.07), transparent 42%), var(--negro-2); }
.rad-item.divergencia { border-color: rgba(227,179,78,.3); }

.rad-sonar { display: flex; justify-content: center; }
.rad-cuerpo { min-width: 0; }
.rad-fila-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; }
.rad-cuerpo h3 { font-family: Oswald, sans-serif; font-size: 1.08rem; font-weight: 500;
                 margin-bottom: 6px; }
.rad-texto { font-size: .84rem; color: var(--humo); line-height: 1.55; }

.rad-badge { font-family: Oswald, sans-serif; font-size: .64rem; letter-spacing: .15em;
             text-transform: uppercase; padding: 4px 9px; border-radius: 999px;
             background: var(--negro-3); color: var(--humo); }
.rad-badge.alineado    { background: rgba(61,220,132,.14); color: var(--verde); }
.rad-badge.divergencia { background: rgba(227,179,78,.16); color: var(--oro); }
.rad-badge.alerta      { background: var(--rojo); color: #2a0808;
                         animation: pulsa-rojo 1.9s ease-in-out infinite; }
@keyframes pulsa-rojo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,99,99,.55); }
  55%      { box-shadow: 0 0 0 7px rgba(240,99,99,0); }
}
.rad-brecha { font-family: Oswald, sans-serif; font-size: .92rem; color: var(--hueso); }
.rad-cuando { font-size: .72rem; color: var(--humo); margin-left: auto; }

.rad-fuentes { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0 9px; }
.rad-chip-f { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px;
              border-radius: 999px; background: var(--negro-3); border: 1px solid var(--linea);
              font-size: .72rem; color: var(--humo); }
.rad-chip-f i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.rad-chip-f b { font-family: Oswald, sans-serif; color: var(--hueso); font-size: .8rem; }
.rad-chip-f em { font-style: normal; font-size: .62rem; letter-spacing: .06em;
                 text-transform: uppercase; color: var(--rojo); }

/* ── el sonar ────────────────────────────────────────────────────────────── */
.sonar { width: 108px; height: 108px; display: block; }
.sonar .rejilla circle { fill: none; stroke: var(--linea); stroke-width: 1; }
.sonar .rejilla line   { stroke: var(--linea); stroke-width: 1; }
.sonar .forma { fill: rgba(227,179,78,.16); stroke: var(--oro); stroke-width: 1.6;
                stroke-linejoin: round; }
.sonar.alerta .forma      { fill: rgba(240,99,99,.18); stroke: var(--rojo); }
.sonar.alineado .forma    { fill: rgba(61,220,132,.16); stroke: var(--verde); }
.sonar .pt { stroke: var(--negro); stroke-width: 1.2; }
.sonar .barrido path { fill: rgba(227,179,78,.13); transform-origin: 60px 60px;
                       animation: barre 4.2s linear infinite; }
.sonar.alerta .barrido path { fill: rgba(240,99,99,.16); }
@keyframes barre { to { transform: rotate(360deg); } }

/* ── el puntito de aviso en la pestaña ───────────────────────────────────── */
.sec-punto { display: inline-block; width: 6px; height: 6px; border-radius: 50%;
             background: var(--rojo); margin-left: 5px; vertical-align: 2px;
             animation: pulsa-rojo 1.9s ease-in-out infinite; }

/* ── panel dios de Polymarket ────────────────────────────────────────────── */
.poly-dios { margin-bottom: 14px; padding: 15px 17px; border-radius: var(--r-md);
             background: var(--negro-2); border: 1px solid rgba(167,139,250,.3); }
.poly-dios h3 { font-family: Oswald, sans-serif; font-size: .8rem; letter-spacing: .14em;
                text-transform: uppercase; color: #a78bfa; margin-bottom: 10px; }
.poly-dios .cifras { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .8rem;
                     color: var(--humo); margin-bottom: 11px; }
.poly-dios .cifras b { color: var(--hueso); font-family: Oswald, sans-serif; }
.poly-dudoso { padding: 11px 13px; border-radius: var(--r-sm); background: var(--negro-3);
               border: 1px solid rgba(227,179,78,.3); margin-bottom: 8px; }
.poly-dudoso .par { font-size: .84rem; margin-bottom: 3px; }
.poly-dudoso .par b { color: var(--oro); }
.poly-dudoso .por { font-size: .72rem; color: var(--humo); margin-bottom: 8px; }
.poly-dudoso .acciones { display: flex; gap: 7px; }

@media (prefers-reduced-motion: reduce) {
  .sonar .barrido path { animation: none; }
  .rad-badge.alerta, .sec-punto { animation: none; }
}

/* ============================================================================
   CEREBRO IA · costo visible, solicitudes y bandeja del dios
   ============================================================================ */

/* ── el iconito de cerebro ───────────────────────────────────────────────── */
.ico-cerebro { width: 1em; height: 1em; vertical-align: -.12em; margin-right: .38em;
               flex: none; opacity: .95; }
.b4-fuente-cab h4 .ico-cerebro { width: .95em; height: .95em; }

/* ── el costo en el botón: se ve ANTES de gastar ─────────────────────────── */
.btn-costo { font-style: normal; font-size: .78em; opacity: .78; margin-left: .3em;
             font-family: Inter, sans-serif; letter-spacing: 0; }
.btn-costo.gratis { color: var(--verde); opacity: 1; }
.btn.fantasma .btn-costo.gratis { color: var(--verde); }

/* ── la tarjeta de "pídeselo al admin" ───────────────────────────────────── */
.pedir-caja { margin-top: 18px; }
.pedir-cerebro { text-align: center; padding: 10px 4px 4px; }
.pedir-ico { display: inline-flex; align-items: center; justify-content: center;
             width: 62px; height: 62px; border-radius: 50%; margin-bottom: 14px;
             color: var(--oro); background: rgba(227,179,78,.1);
             border: 1px solid rgba(227,179,78,.35); }
.pedir-ico .ico-cerebro { width: 30px; height: 30px; margin: 0; }
.pedir-ico.listo { color: var(--verde); background: rgba(61,220,132,.1);
                   border-color: rgba(61,220,132,.4); }
.pedir-cerebro h2 { font-size: 1.15rem; margin-bottom: 10px; line-height: 1.35; }
.pedir-cerebro p { font-size: .88rem; color: var(--humo); line-height: 1.6;
                   max-width: 46ch; margin: 0 auto 14px; }
.pedir-cerebro p b { color: var(--hueso); }
.pedir-cuantos { display: inline-block; font-size: .76rem !important; padding: 5px 12px;
                 border-radius: 999px; background: var(--negro-3);
                 border: 1px solid var(--linea); margin-bottom: 14px !important; }
.pedir-nota { font-size: .78rem !important; opacity: .82; margin-top: 14px !important; }
.pedir-cerebro .btn:disabled { opacity: .55; cursor: default; }

/* ── el pie del veredicto (re-analizar) ──────────────────────────────────── */
.ver-pie { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--linea);
           display: flex; justify-content: flex-end; }

/* ── bandeja de solicitudes en el panel dios ─────────────────────────────── */
#bandejaSolicitudes { display: flex; flex-direction: column; gap: 8px; }
.sol-vacia { font-size: .8rem; color: var(--humo); }
.sol-cab { font-size: .78rem; color: var(--humo); padding-bottom: 8px;
           border-bottom: 1px solid var(--linea); margin-bottom: 4px; }
.sol-cab b { color: var(--oro); font-family: Oswald, sans-serif; }

.sol-item { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center;
            padding: 11px 13px; border-radius: var(--r-sm); background: var(--negro-3);
            border: 1px solid var(--linea); }
@media (min-width: 700px) { .sol-item { grid-template-columns: 44px 1fr auto; } }

.sol-cuantos { display: flex; align-items: center; justify-content: center;
               width: 40px; height: 40px; border-radius: 50%;
               font-family: Oswald, sans-serif; font-size: 1.15rem; color: var(--oro);
               background: rgba(227,179,78,.12); border: 1px solid rgba(227,179,78,.35); }
.sol-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sol-info b { font-size: .92rem; }
.sol-info span { font-size: .72rem; color: var(--humo); }
.sol-info .ya-empezo { color: var(--rojo); font-style: normal; }
.sol-quien { opacity: .78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sol-acciones { display: flex; gap: 7px; grid-column: 1 / -1; }
@media (min-width: 700px) { .sol-acciones { grid-column: auto; } }

/* ============================================================================
   Despliegue en su lugar · el panel crece, la página NO se mueve
   ============================================================================ */

/* El único movimiento permitido es el del propio panel. La transición la pone
   desplegar() en app.js midiendo la altura real; aquí solo se garantiza que
   nada de adentro se salga mientras crece. */
.veredicto, .consejo-caja, .modelo-caja, .social-caja, .pedir-caja {
  will-change: height;
}
.veredicto.desplegado, .consejo-caja.desplegado, .modelo-caja.desplegado,
.social-caja.desplegado, .pedir-caja.desplegado {
  will-change: auto;
}

/* Que el navegador no intente "anclar" el scroll cuando el panel crece: eso
   también produce saltitos, y son de los que no se ven venir. */
#lista { overflow-anchor: none; }

.caja-error { padding: 16px 18px; }

@media (prefers-reduced-motion: reduce) {
  .veredicto, .consejo-caja, .modelo-caja, .social-caja, .pedir-caja {
    will-change: auto;
  }
}

/* ============================================================================
   La señal del billete · sale poco, y por eso se nota
   ============================================================================ */
.billete { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
           border-radius: 999px; cursor: pointer; font: inherit;
           font-family: Oswald, sans-serif; font-size: .64rem; letter-spacing: .1em;
           text-transform: uppercase;
           background: rgba(61,220,132,.13); color: var(--verde);
           border: 1px solid rgba(61,220,132,.42); }
.billete:hover { background: rgba(61,220,132,.22); }
.billete .bi-ico { font-size: .82rem; letter-spacing: -2px; }
.billete .bi-ev { font-family: Inter, sans-serif; letter-spacing: 0; opacity: .85;
                  padding-left: 5px; border-left: 1px solid currentColor; }

/* El dorado es el ÚNICO que se mueve. Si todos brillaran, ninguno diría nada. */
.billete.oro { color: #201603; border-color: var(--oro);
               background: linear-gradient(100deg, var(--oro-hondo), var(--oro) 45%, #f4d489);
               background-size: 200% 100%;
               animation: billete-brilla 2.8s ease-in-out infinite; font-weight: 600; }
.billete.oro:hover { background-position: 100% 0; }
@keyframes billete-brilla {
  0%, 100% { background-position: 0 0;   box-shadow: 0 0 0 0 rgba(227,179,78,.5); }
  50%      { background-position: 100% 0; box-shadow: 0 0 0 6px rgba(227,179,78,0); }
}

.billete-caja { margin-top: 14px; border-color: rgba(61,220,132,.32); }
.billete-caja.oro { border-color: rgba(227,179,78,.5);
  background: linear-gradient(150deg, rgba(227,179,78,.1), transparent 60%), var(--negro-2); }
.bi-cab { display: flex; align-items: center; gap: 9px; margin-bottom: 9px;
          font-family: Oswald, sans-serif; font-size: .78rem; letter-spacing: .14em;
          text-transform: uppercase; color: var(--verde); }
.billete-caja.oro .bi-cab { color: var(--oro); }
.bi-txt { font-size: .92rem; line-height: 1.6; margin-bottom: 12px; }
.bi-aviso { font-size: .76rem; color: var(--humo); line-height: 1.55;
            padding: 10px 12px; border-radius: var(--r-sm); background: var(--negro-3);
            border-left: 3px solid var(--rojo); margin-bottom: 12px; }

@media (max-width: 560px) {
  .billete { font-size: .6rem; padding: 3px 7px; }
  .billete .bi-ico { font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .billete.oro { animation: none; }
}

/* ============================================================================
   "¿Qué es esto?" · la explicación para quien llega nuevo
   Plegada por default: informa al que no sabe sin estorbarle al que ya sabe.
   ============================================================================ */
.que-es { margin-bottom: 14px; border-radius: var(--r-sm); background: var(--negro-3);
          border: 1px solid var(--linea); }
.que-es > summary { cursor: pointer; list-style: none; padding: 9px 13px;
                    font-size: .76rem; color: var(--oro); letter-spacing: .02em;
                    display: flex; align-items: center; gap: 7px; }
.que-es > summary::-webkit-details-marker { display: none; }
.que-es > summary::before { content: "?"; display: inline-flex; align-items: center;
  justify-content: center; width: 16px; height: 16px; border-radius: 50%; flex: none;
  font-size: .68rem; font-weight: 700; background: rgba(227,179,78,.18);
  border: 1px solid rgba(227,179,78,.45); }
.que-es > summary:hover { color: var(--hueso); }
.que-es[open] > summary { border-bottom: 1px solid var(--linea); }
.que-es p { display: flex; gap: 10px; padding: 12px 14px; font-size: .84rem;
            line-height: 1.6; color: var(--humo); }
.que-es .qe-ico { font-size: 1.1rem; line-height: 1.35; flex: none; }

/* En el botón, el icono y el texto sin apretarse */
.btn .ico-cerebro { margin-right: .34em; }
.btn.hecho .btn-costo.gratis { font-weight: 600; }

@media (max-width: 560px) {
  .que-es > summary { font-size: .72rem; padding: 8px 11px; }
  .que-es p { font-size: .8rem; padding: 10px 12px; }
}

/* ============================================================================
   Barra de ligas · arriba de todo, con el estado real de cada una
   Se desliza en horizontal en el celular en vez de apretujarse.
   ============================================================================ */
.ligas-barra { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px;
               margin-bottom: 6px; scrollbar-width: none;
               -webkit-overflow-scrolling: touch; }
.ligas-barra::-webkit-scrollbar { display: none; }

.liga-chip { display: flex; align-items: center; gap: 9px; flex: none; cursor: pointer;
             padding: 8px 13px; border-radius: var(--r-md); font: inherit; text-align: left;
             background: var(--negro-2); border: 1px solid var(--linea); color: var(--hueso);
             transition: border-color .18s ease, background .18s ease; }
.liga-chip:hover:not(:disabled) { border-color: rgba(227,179,78,.45); background: var(--negro-3); }
.liga-chip.on { border-color: var(--oro);
                background: linear-gradient(140deg, rgba(227,179,78,.16), transparent 70%), var(--negro-2); }
.liga-chip.on .lg-txt b { color: var(--oro); }

.lg-bandera { font-size: 1.15rem; line-height: 1; flex: none; }
.lg-txt { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.lg-txt b { font-family: Oswald, sans-serif; font-size: .82rem; font-weight: 500;
            letter-spacing: .02em; white-space: nowrap; }
.lg-txt em { font-style: normal; font-size: .65rem; color: var(--humo); white-space: nowrap; }

/* Las dormidas se ven, pero no se pueden elegir: filtrar por una liga vacía
   solo daría una pantalla en blanco sin explicar por qué. */
.liga-chip.dormida { opacity: .42; cursor: default; }
.liga-chip.dormida .lg-txt em { color: var(--humo); font-style: italic; }

@media (max-width: 560px) {
  .liga-chip { padding: 7px 11px; gap: 7px; }
  .lg-bandera { font-size: 1rem; }
  .lg-txt b { font-size: .76rem; }
  .lg-txt em { font-size: .6rem; }
}

/* ============================================================================
   Récord del motor
   ============================================================================ */
.rec-cab { padding: 20px; border-radius: var(--r-lg); margin-bottom: 14px; }
.rec-cab h2 { font-size: 1.4rem; }
.rec-rango { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 12px; }
.rec-cifras { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .8rem;
              color: var(--humo); margin-bottom: 12px; }
.rec-cifras b { color: var(--oro); font-family: Oswald, sans-serif; font-size: 1rem; }

.rec-bloque { padding: 18px; border-radius: var(--r-md); background: var(--negro-2);
              border: 1px solid var(--linea); margin-bottom: 12px; }
.rec-bloque h3 { font-family: Oswald, sans-serif; font-size: .84rem; letter-spacing: .13em;
                 text-transform: uppercase; color: var(--oro); margin-bottom: 14px; }
.rec-nota { font-size: .75rem; color: var(--humo); line-height: 1.55; margin-top: 12px; }
.rec-nota b { color: var(--hueso); }

.rec-lista { display: flex; flex-direction: column; gap: 9px; }
.rec-fila { display: grid; grid-template-columns: 24px 1fr 44px; gap: 10px; align-items: center; }
@media (min-width: 640px) { .rec-fila { grid-template-columns: 24px 190px 1fr 52px; } }
.rec-pos { font-family: Oswald, sans-serif; font-size: .9rem; color: var(--humo); text-align: center; }
.rec-fila.lider .rec-pos { color: var(--oro); }
.rec-info { display: flex; flex-direction: column; min-width: 0; }
.rec-info b { font-size: .88rem; }
.rec-info span { font-size: .7rem; color: var(--humo); }
.rec-barra { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: var(--negro-3);
             overflow: hidden; }
@media (min-width: 640px) { .rec-barra { grid-column: auto; } }
.rec-barra i { display: block; height: 100%; border-radius: 999px; }
.rec-pct { font-family: Oswald, sans-serif; font-size: 1rem; text-align: right; }
.rec-fila.lider .rec-pct { color: var(--oro); }

.rec-billetes { display: flex; flex-wrap: wrap; gap: 10px; }
.rec-billete { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px;
               border-radius: var(--r-sm); background: var(--negro-3);
               border: 1px solid rgba(61,220,132,.32); }
.rec-billete.oro { border-color: rgba(227,179,78,.5);
  background: linear-gradient(140deg, rgba(227,179,78,.1), transparent 65%), var(--negro-3); }
.rb-ico { font-size: .9rem; letter-spacing: -2px; }
.rec-billete b { font-family: Oswald, sans-serif; font-size: 1.5rem; color: var(--verde); }
.rec-billete.oro b { color: var(--oro); }
.rec-billete span:last-child { font-size: .7rem; color: var(--humo); }

.rec-liga { margin-bottom: 14px; }
.rec-liga h4 { font-size: .8rem; color: var(--hueso); margin-bottom: 6px; }
.rec-liga-fila { display: grid; grid-template-columns: 9px 1fr 48px 34px; gap: 9px;
                 align-items: center; font-size: .8rem; padding: 4px 0;
                 border-bottom: 1px solid var(--linea); }
.rec-liga-fila i { width: 8px; height: 8px; border-radius: 50%; }
.rec-liga-fila b { font-family: Oswald, sans-serif; text-align: right; }
.rec-liga-fila em { font-style: normal; font-size: .68rem; color: var(--humo); text-align: right; }

.rec-grafica { display: flex; gap: 6px; align-items: flex-end; overflow-x: auto;
               padding-bottom: 6px; }
.rg-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 0 44px; }
.rg-val { font-size: .62rem; color: var(--humo); }
.rg-barra { width: 100%; height: 90px; display: flex; align-items: flex-end;
            background: var(--negro-3); border-radius: 4px; overflow: hidden; }
.rg-barra i { display: block; width: 100%; border-radius: 4px;
              background: linear-gradient(180deg, var(--oro), var(--oro-hondo)); }
.rg-fecha { font-size: .6rem; color: var(--humo); }
.rec-racha { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px;
             font-size: .78rem; color: var(--humo); }
.rec-racha b { color: var(--hueso); }

.rec-vacio { text-align: center; padding: 34px 20px; border-radius: var(--r-md);
             background: var(--negro-2); border: 1px solid var(--linea); }
.rec-vacio-ico { font-size: 2.4rem; margin-bottom: 12px; }
.rec-vacio h3 { font-size: 1.05rem; margin-bottom: 10px; }
.rec-vacio p { font-size: .86rem; color: var(--humo); line-height: 1.6;
               max-width: 52ch; margin: 0 auto 10px; }
.rec-vacio b { color: var(--oro); }

/* La nota de "el registro está cerrado", en la pantalla de acceso */
.acceso-cerrado { margin-top: 18px; padding: 12px 14px; border-radius: var(--r-sm);
                  background: var(--negro-3); border: 1px solid var(--linea);
                  font-size: .8rem; color: var(--humo); line-height: 1.55; text-align: center; }

/* ============================================================================
   Tabla de fuerza (Elo) · y el modelo por dentro, ya sin plegar
   ============================================================================ */
.fz-cab { padding: 20px; border-radius: var(--r-lg); margin-bottom: 14px; }
.fz-cab h2 { font-size: 1.4rem; }
.fz-ligas { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 12px; }
.fz-ligas .filtro em { font-style: normal; opacity: .6; font-size: .85em; }
.fz-aviso { font-size: .8rem; line-height: 1.55; }

.fz-lista { display: flex; flex-direction: column; gap: 6px; }
.fz-fila { display: grid; grid-template-columns: 28px 26px 1fr 52px; gap: 10px;
           align-items: center; padding: 9px 12px; border-radius: var(--r-sm);
           background: var(--negro-2); border: 1px solid var(--linea); }
@media (min-width: 700px) { .fz-fila { grid-template-columns: 28px 26px 210px 1fr 56px; } }
.fz-fila.podio { border-color: rgba(227,179,78,.35); }
.fz-fila.podio .fz-pos { color: var(--oro); }
.fz-pos { font-family: Oswald, sans-serif; font-size: .92rem; color: var(--humo);
          text-align: center; }
.fz-escudo { width: 24px; height: 24px; object-fit: contain; }
.fz-nom { display: flex; flex-direction: column; min-width: 0; }
.fz-nom b { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fz-nom span { font-size: .68rem; color: var(--humo); }
.fz-barra { grid-column: 1 / -1; height: 6px; border-radius: 999px;
            background: var(--negro-3); overflow: hidden; }
@media (min-width: 700px) { .fz-barra { grid-column: auto; } }
.fz-barra i { display: block; height: 100%; border-radius: 999px;
              background: linear-gradient(90deg, var(--oro-hondo), var(--oro)); }
.fz-elo { font-family: Oswald, sans-serif; font-size: 1.05rem; text-align: right; }
.fz-fila.podio .fz-elo { color: var(--oro); }
.fz-pie { font-size: .78rem; color: var(--humo); line-height: 1.6; margin-top: 16px;
          padding: 13px 15px; border-radius: var(--r-sm); background: var(--negro-2);
          border: 1px solid var(--linea); }
.fz-pie b { color: var(--hueso); }

/* El detalle del modelo, ya visible sin tener que abrirlo */
.b4-abierto { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linea); }
.b4-abierto-tit { font-family: Oswald, sans-serif; font-size: .8rem; letter-spacing: .12em;
                  text-transform: uppercase; color: var(--oro); margin-bottom: 4px; }

/* El gasto del mes contra el techo, en el panel dios */
#presupuestoMes { margin-top: 14px; }
.pres-fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
             font-size: .78rem; color: var(--humo); margin-bottom: 6px; }
.pres-fila b { font-family: Oswald, sans-serif; font-size: 1.05rem; color: var(--verde); }
.pres-fila b.ojo { color: var(--oro); }
.pres-fila b.agotado { color: var(--rojo); }
.pres-fila em { font-style: normal; margin-left: auto; font-size: .72rem; }
.pres-barra { height: 7px; border-radius: 999px; background: var(--negro-3); overflow: hidden; }
.pres-barra i { display: block; height: 100%; border-radius: 999px; background: var(--verde); }
.pres-barra.ojo i { background: var(--oro); }
.pres-barra.agotado i { background: var(--rojo); }
.pres-aviso { font-size: .74rem; color: var(--rojo); margin-top: 7px; line-height: 1.5; }

/* ============================================================================
   FASE 12 · Casa de apuestas de práctica + boleta partido por partido
   Fichas virtuales, nada de dinero real. Dark premium, mobile-first.
   ============================================================================ */

/* ── el panel "Apostar" bajo la tarjeta ───────────────────────────────────── */
.apostar-caja { margin: 10px 0 18px; }
.ap-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
          margin-bottom: 8px; }
.ap-cab h2 { font-size: 1.05rem; }
.ap-saldo-mini { font-size: .78rem; color: var(--humo); margin-left: auto; }
.ap-saldo-mini b { color: var(--oro); font-family: Oswald, sans-serif; }
.ap-aviso-mini { font-size: .72rem; color: var(--humo); line-height: 1.5;
                 border-left: 3px solid var(--oro-hondo); padding-left: 10px;
                 margin-bottom: 14px; }
.ap-mercado { margin-bottom: 14px; }
.ap-mercado h4 { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
                 color: var(--humo); margin-bottom: 7px; }
.ap-sels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
           gap: 7px; }
.ap-sel { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
          padding: 9px 11px; border-radius: var(--r-sm); text-align: left;
          background: var(--negro-2); border: 1px solid var(--linea);
          color: var(--hueso); cursor: pointer; min-width: 0; }
.ap-sel:hover { border-color: var(--oro-hondo); }
.ap-sel.on { border-color: var(--oro); background: rgba(227,179,78,.09); }
.ap-sel-txt { font-size: .78rem; line-height: 1.3; }
.ap-cuota { font-family: Oswald, sans-serif; font-size: 1.15rem; color: var(--oro); }
.ap-origen { font-style: normal; font-size: .62rem; color: var(--humo); }
.ap-origen.campu { color: #2dd4bf; }
.ap-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); }
.ap-eleccion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
               font-size: .85rem; margin-bottom: 10px; }
.ap-cuota-grande { font-family: Oswald, sans-serif; font-size: 1.4rem; color: var(--oro); }
.ap-monto-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
                 margin-bottom: 8px; }
.ap-monto-fila input { width: 170px; }
.ap-rapidos { display: flex; gap: 6px; flex-wrap: wrap; }
.ap-pago { font-size: .8rem; color: var(--verde); min-height: 1.2em; margin-bottom: 10px; }
.ap-error { font-size: .78rem; color: var(--rojo); margin-top: 8px; min-height: 1em; }
.ap-listo { display: flex; flex-direction: column; gap: 8px; font-size: .85rem;
            align-items: flex-start; }
.ap-listo b { color: var(--verde); line-height: 1.5; }
.ap-listo span { color: var(--humo); font-size: .78rem; }

/* ── la sección Apuestas ──────────────────────────────────────────────────── */
.ap-cab-seccion { padding: 20px; border-radius: var(--r-lg); margin-bottom: 14px; }
.ap-cab-seccion h2 { font-size: 1.4rem; }
.ap-practica { font-size: .8rem; color: var(--oro); letter-spacing: .08em;
               text-transform: uppercase; vertical-align: middle; }
.ap-mi-saldo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
               margin: 14px 0; }
.ap-fichas { display: flex; flex-direction: column; line-height: 1.1; }
.ap-fichas b { font-family: Oswald, sans-serif; font-size: 2rem; color: var(--oro); }
.ap-fichas span { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
                  color: var(--humo); }
.ap-mi-numeros { display: flex; flex-direction: column; gap: 3px; font-size: .78rem;
                 color: var(--humo); }
.ap-pedido { font-size: .74rem; color: var(--humo); border: 1px dashed var(--linea);
             padding: 6px 10px; border-radius: var(--r-sm); }
.ap-aviso { font-size: .76rem; color: var(--hueso); line-height: 1.6;
            border: 1px solid rgba(227,179,78,.35); border-radius: var(--r-sm);
            background: rgba(227,179,78,.06); padding: 10px 13px; margin-bottom: 8px; }
.ap-proposito { font-size: .74rem; color: var(--humo); line-height: 1.55; }
.ap-pos { color: var(--verde); }
.ap-neg { color: var(--rojo); }
.ap-sub { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
          color: var(--humo); margin: 14px 0 8px; }

/* ranking */
.ap-ranking { display: flex; flex-direction: column; gap: 7px; }
.ap-rk-fila { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px;
              align-items: center; padding: 10px 13px; border-radius: var(--r-sm);
              background: var(--negro-2); border: 1px solid var(--linea); }
.ap-rk-fila.oro { border-color: rgba(227,179,78,.55);
                  background: linear-gradient(135deg, rgba(227,179,78,.12), var(--negro-2)); }
.ap-rk-pos { font-family: Oswald, sans-serif; font-size: 1.05rem; color: var(--humo);
             text-align: center; }
.ap-rk-fila.oro .ap-rk-pos { font-size: 1.3rem; }
.ap-rk-quien { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ap-rk-quien b { font-size: .92rem; }
.ap-rk-fila.oro .ap-rk-quien b { color: var(--oro); }
.ap-rk-quien span { font-size: .7rem; color: var(--humo); line-height: 1.45; }
.ap-rk-nums { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ap-rk-nums b { font-family: Oswald, sans-serif; font-size: 1.1rem; }
.ap-rk-nums span { font-size: .68rem; color: var(--humo); }

/* boleto */
.ap-lista { display: flex; flex-direction: column; gap: 6px; }
.ap-apuesta { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
              padding: 9px 12px; border-radius: var(--r-sm); background: var(--negro-2);
              border: 1px solid var(--linea); }
.ap-apuesta.ganada { border-left: 3px solid var(--verde); grid-template-columns: 24px 1fr auto; }
.ap-apuesta.perdida { border-left: 3px solid var(--rojo); opacity: .85;
                      grid-template-columns: 24px 1fr auto; }
.ap-apuesta.anulada { border-left: 3px solid var(--humo); opacity: .8;
                      grid-template-columns: 24px 1fr auto; }
.ap-apuesta.abierta { border-left: 3px solid var(--oro); }
.ap-ap-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ap-ap-info b { font-size: .84rem; }
.ap-ap-info span { font-size: .74rem; color: var(--humo); }
.ap-ap-info em { font-style: normal; font-size: .66rem; color: var(--humo); }
.ap-marcador { font-style: normal; color: var(--oro); font-family: Oswald, sans-serif; }
.ap-ap-nums { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ap-ap-nums b { font-family: Oswald, sans-serif; font-size: .98rem; }
.ap-ap-nums span { font-size: .66rem; color: var(--humo); }
.ap-resumen-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ap-resumen-chips span { font-size: .72rem; color: var(--humo); background: var(--negro-3);
                         border: 1px solid var(--linea); border-radius: 999px;
                         padding: 4px 10px; }
.ap-resumen-chips span.ap-pos { color: var(--verde); }
.ap-resumen-chips span.ap-neg { color: var(--rojo); }

/* bandeja del dios: abonar fichas */
.ap-bandeja .sol-item { grid-template-columns: 1fr; }
@media (min-width: 700px) { .ap-bandeja .sol-item { grid-template-columns: 1fr auto; } }
.ap-abono { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.ap-abono input { width: 110px; }

/* banner de entrada */
.ap-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
             width: 100%; padding: 10px 14px; margin-bottom: 14px; cursor: pointer;
             color: var(--hueso); font-size: .78rem; text-align: left;
             border-radius: var(--r-md); }
.ap-banner:hover { border-color: var(--oro-hondo); }
.ap-banner-tit { font-family: Oswald, sans-serif; font-size: .72rem; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--humo); }
.ap-banner-item b { font-family: Oswald, sans-serif; }
.ap-banner-item.oro { color: var(--oro); }
.ap-banner-ver { margin-left: auto; font-size: .7rem; color: var(--oro); }

/* ── la boleta partido por partido (Récord) ──────────────────────────────── */
.bol-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.bol-filtros select { flex: 1 1 180px; max-width: 260px; padding: 8px 10px;
                      border-radius: var(--r-sm); background: var(--negro-3);
                      border: 1px solid var(--linea); color: var(--hueso);
                      font-size: .8rem; }
.bol-lista { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.bol-partido { padding: 12px 14px; border-radius: var(--r-md); background: var(--negro-2);
               border: 1px solid var(--linea); }
.bol-cab { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
           gap: 8px; }
.bol-equipo { display: flex; align-items: center; gap: 7px; font-size: .84rem;
              min-width: 0; overflow: hidden; }
.bol-equipo.visita { justify-content: flex-end; text-align: right; }
.bol-equipo img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.bol-marcador { font-family: Oswald, sans-serif; font-size: 1.25rem; color: var(--oro);
                white-space: nowrap; }
.bol-meta { text-align: center; font-size: .68rem; color: var(--humo); margin: 4px 0 10px; }
.bol-fuentes { display: flex; flex-direction: column; gap: 4px; }
.bol-fila { display: grid; grid-template-columns: 10px minmax(0,1fr) auto 24px; gap: 8px;
            align-items: center; font-size: .76rem; padding: 5px 8px;
            border-radius: var(--r-sm); background: var(--negro-3); }
.bol-fila.bien { box-shadow: inset 3px 0 0 rgba(61,220,132,.5); }
.bol-fila.mal { box-shadow: inset 3px 0 0 rgba(240,99,99,.45); opacity: .9; }
.bol-fila i { width: 8px; height: 8px; border-radius: 50%; }
.bol-fuente { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bol-dijo { color: var(--humo); white-space: nowrap; font-size: .72rem; }
.bol-vere { text-align: center; }
@media (max-width: 420px) {
  .bol-dijo { font-size: .66rem; }
  .ap-sels { grid-template-columns: 1fr 1fr; }
}