/* ==========================================================================
   ApuestaPro — sistema de diseño
   --------------------------------------------------------------------------
   Tema oscuro con acento verde/turquesa, siguiendo el concepto visual del
   proyecto. Todo son variables CSS, así que cambiar el acento de toda la
   aplicación es cambiar UNA línea.

   Sin frameworks: son unas 600 líneas de CSS legible en vez de una
   dependencia que hay que actualizar. Para un proyecto personal, eso es
   menos cosas que se pueden romper.
   ========================================================================== */

:root {
  /* --- Superficies --- */
  --fondo:        #080D16;
  --fondo-2:      #0D1421;
  --tarjeta:      #111A2B;
  --tarjeta-alza: #162034;
  --tarjeta-hover:#1A2740;
  --borde:        #1E2C45;
  --borde-suave:  #17233A;

  /* --- Texto --- */
  --texto:        #E9EFFA;
  --texto-2:      #93A4C2;
  --texto-3:      #5E6E8E;

  /* --- Acentos --- */
  --acento:       #00E0B8;
  --acento-oscuro:#00A88B;
  --verde:        #22C55E;
  --amarillo:     #FBBF24;
  --rojo:         #F87171;
  --azul:         #60A5FA;
  --morado:       #A78BFA;

  /* --- Semántica de calidad del dato --- */
  --cal-verde:    #22C55E;
  --cal-amarillo:#FBBF24;
  --cal-rojo:     #F87171;

  /* --- Medidas --- */
  --lado-barra:   248px;
  --radio:        14px;
  --radio-sm:     9px;
  --sombra:       0 8px 28px rgba(0, 0, 0, .45);
  --transicion:   .16s cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--fondo-2); }
::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--tarjeta-hover); }

/* ==========================================================================
   Estructura: barra lateral + contenido
   ========================================================================== */
.app { display: flex; min-height: 100vh; }

.barra {
  width: var(--lado-barra);
  flex: 0 0 var(--lado-barra);
  background: var(--fondo-2);
  border-right: 1px solid var(--borde-suave);
  padding: 18px 12px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* --------------------------------------------------------------------------
   LA ZONA DEL MENÚ TIENE SU PROPIO SCROLL, Y EL PIE QUEDA FIJO
   --------------------------------------------------------------------------
   Antes la barra entera tenía scroll y el pie del final («Plataforma de
   información y análisis…») empujaba el menú hacia abajo. En una pantalla de
   720 px de alto, el menú necesitaba 900 px: «Herramientas», «Noticias» y
   «Mi perfil» quedaban por debajo y no había forma de verlos sin saber que
   había que desplazar la barra con la rueda. Ahora el menú se desplaza solo
   (con la barra de scroll visible) y el pie nunca se mueve del sitio.
   -------------------------------------------------------------------------- */
.barra-menu {
  flex: 1 1 auto;
  min-height: 0;              /* sin esto, un flex item no encoge y no scrollea */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Un poco de aire a la derecha para que la barra de scroll no tape el texto */
  padding-right: 4px;
  margin-right: -4px;
  scrollbar-width: thin;
  scrollbar-color: var(--borde) transparent;
}
.barra-menu::-webkit-scrollbar { width: 8px; }
.barra-menu::-webkit-scrollbar-track { background: transparent; }
.barra-menu::-webkit-scrollbar-thumb {
  background: var(--borde); border-radius: 8px;
}
.barra-menu::-webkit-scrollbar-thumb:hover { background: var(--texto-3); }

.marca {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 18px;
}
.marca-logo {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--acento), var(--verde));
  display: grid; place-items: center;
  font-weight: 800; font-size: 16px; color: #06231C;
}
.marca-nombre { font-weight: 750; font-size: 16.5px; letter-spacing: -.3px; }
.marca-lema { font-size: 10.5px; color: var(--texto-3); margin-top: 1px; }

.nav-titulo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--texto-3); padding: 14px 12px 6px; font-weight: 650;
}

/* El título de una sección que se puede plegar (grupo «Pendiente»). Es un
   botón, así que se comporta como tal: se pulsa y se despliega. */
.nav-titulo-boton {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  border-radius: var(--radio-sm);
}
.nav-titulo-boton:hover { color: var(--texto-2); background: var(--tarjeta); }
.nav-titulo-boton .nav-badge { margin-left: auto; }
.nav-flecha { font-size: 10px; color: var(--texto-3); }
/* Elemento que solo existe para no romper el bucle del menú cuando el grupo
   está plegado. No ocupa sitio ni se ve. */
.nav-item.oculto { display: none; }

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: var(--radio-sm);
  color: var(--texto-2); font-size: 13.5px; font-weight: 500;
  transition: var(--transicion); cursor: pointer; width: 100%; text-align: left;
}
.nav-item:hover { background: var(--tarjeta); color: var(--texto); }
.nav-item.activo {
  background: linear-gradient(90deg, rgba(0,224,184,.16), rgba(0,224,184,.03));
  color: var(--acento); font-weight: 620;
  box-shadow: inset 2px 0 0 var(--acento);
}
.nav-icono { width: 18px; text-align: center; font-size: 15px; opacity: .95; }
.nav-badge {
  margin-left: auto; font-size: 10px; padding: 1px 7px; border-radius: 20px;
  background: var(--tarjeta-alza); color: var(--texto-3); font-weight: 600;
}
/* Número de avisos sin leer: destaca de verdad, porque es una llamada a la
   acción y no una etiqueta informativa. */
.nav-badge-numero {
  background: var(--verde); color: #04120b; font-weight: 800;
  min-width: 19px; text-align: center; font-size: 11px;
}

/* ==========================================================================
   Nivel de mercado en la tarjeta de partido
   ==========================================================================
   Dice de un vistazo si el partido tiene dónde apostar o solo se puede jugar
   al ganador. Va con color de fondo, no solo con texto: en una lista de 24
   tarjetas el color se lee antes que las palabras. */
.mercado-nivel {
  font-size: 11px; padding: 5px 9px; border-radius: 7px; text-align: center;
  margin-top: 8px; line-height: 1.35;
}
.mercado-bueno {
  background: rgba(34, 197, 94, .13); color: var(--verde);
  border: 1px solid rgba(34, 197, 94, .3);
}
.mercado-justo {
  background: rgba(250, 204, 21, .11); color: var(--amarillo);
  border: 1px solid rgba(250, 204, 21, .26);
}
.mercado-malo {
  background: rgba(239, 68, 68, .11); color: var(--rojo);
  border: 1px solid rgba(239, 68, 68, .26);
}
.mercado-sin-datos {
  background: var(--tarjeta-alza); color: var(--texto-3);
  border: 1px solid var(--borde-suave);
}

/* El pie va PEGADO abajo y no se desplaza con el menú (`flex: 0 0 auto`). */
.barra-pie { flex: 0 0 auto; margin-top: 10px; padding-top: 10px;
             border-top: 1px solid var(--borde-suave); }

/* ==========================================================================
   Cabecera del contenido
   ========================================================================== */
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cabecera {
  position: sticky; top: 0; z-index: 30;
  background: rgba(8, 13, 22, .86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde-suave);
  padding: 11px 26px;
  display: flex; align-items: center; gap: 16px;
}

.buscador {
  flex: 1; max-width: 520px; position: relative;
}
.buscador input {
  width: 100%; padding: 9px 13px 9px 38px;
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: 10px; color: var(--texto); font-size: 13.5px;
  transition: var(--transicion);
}
.buscador input:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(0, 224, 184, .12);
}
.buscador input::placeholder { color: var(--texto-3); }
.buscador-icono {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--texto-3); font-size: 14px; pointer-events: none;
}

.sugerencias {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--tarjeta-alza); border: 1px solid var(--borde);
  border-radius: 10px; box-shadow: var(--sombra); overflow: hidden; z-index: 40;
}
.sugerencia {
  padding: 9px 13px; cursor: pointer; display: flex; gap: 10px;
  align-items: center; font-size: 13px; border-bottom: 1px solid var(--borde-suave);
}
.sugerencia:last-child { border-bottom: none; }
.sugerencia:hover { background: var(--tarjeta-hover); }
.sugerencia-icono {
  width: 22px; text-align: center; font-size: 14px; flex: none;
}

.cabecera-acciones { margin-left: auto; display: flex; gap: 9px; align-items: center; }

.contenido { padding: 24px 26px 60px; max-width: 1500px; width: 100%; }

/* ==========================================================================
   Tipografía
   ========================================================================== */
h1 { font-size: 25px; font-weight: 750; letter-spacing: -.5px; }
h2 { font-size: 17px; font-weight: 680; letter-spacing: -.2px; }
h3 { font-size: 14.5px; font-weight: 650; }
h4 { font-size: 12.5px; font-weight: 650; }

.titulo-seccion {
  display: flex; align-items: center; gap: 12px;
  margin: 28px 0 14px;
}
.titulo-seccion:first-child { margin-top: 0; }
.titulo-seccion .linea { flex: 1; height: 1px; background: var(--borde-suave); }

.apagado { color: var(--texto-2); }
.muy-apagado { color: var(--texto-3); }
.mini { font-size: 11.5px; }
.mono { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Tarjetas
   ========================================================================== */
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 17px;
}
.tarjeta-sin-relleno { padding: 0; overflow: hidden; }

.rejilla { display: grid; gap: 14px; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
.rejilla-partidos { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ==========================================================================
   Héroe
   ========================================================================== */
.heroe {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1000px 380px at 12% -30%, rgba(0,224,184,.16), transparent 62%),
    linear-gradient(160deg, var(--tarjeta-alza), var(--tarjeta));
  border: 1px solid var(--borde);
  border-radius: 18px;
  padding: 38px 34px;
}
.heroe h1 { font-size: 31px; line-height: 1.18; max-width: 620px; }
.heroe p { color: var(--texto-2); margin-top: 12px; max-width: 560px; font-size: 15px; }
.heroe-acciones { display: flex; gap: 11px; margin-top: 22px; flex-wrap: wrap; }

.propuestas {
  display: grid; gap: 12px; margin-top: 24px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.propuesta {
  background: rgba(255,255,255,.026);
  border: 1px solid var(--borde);
  border-radius: 12px; padding: 13px 15px;
  display: flex; gap: 11px; align-items: flex-start;
}
.propuesta-icono {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px;
  display: grid; place-items: center; font-size: 15px;
  background: rgba(0,224,184,.13); color: var(--acento);
}
.propuesta b { font-size: 13px; display: block; font-weight: 640; }
.propuesta span { font-size: 11.5px; color: var(--texto-3); }

/* ==========================================================================
   Botones
   ========================================================================== */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  background: var(--tarjeta-alza); color: var(--texto);
  border: 1px solid var(--borde); transition: var(--transicion);
  white-space: nowrap;
}
.boton:hover { background: var(--tarjeta-hover); border-color: var(--texto-3); }
.boton-primario {
  background: linear-gradient(135deg, var(--acento), var(--acento-oscuro));
  color: #04241D; border-color: transparent; font-weight: 700;
}
.boton-primario:hover { filter: brightness(1.09); border-color: transparent; }
.boton-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }
.boton-fantasma { background: transparent; border-color: transparent; color: var(--texto-2); }
.boton-fantasma:hover { background: var(--tarjeta-alza); color: var(--texto); }

/* ==========================================================================
   Insignias y chips
   ========================================================================== */
.insignia {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 640;
  background: var(--tarjeta-alza); color: var(--texto-2);
  border: 1px solid var(--borde); white-space: nowrap;
}
.insignia-verde    { background: rgba(34,197,94,.14);  color: var(--verde);    border-color: rgba(34,197,94,.3); }
.insignia-amarillo { background: rgba(251,191,36,.14); color: var(--amarillo); border-color: rgba(251,191,36,.3); }
.insignia-rojo     { background: rgba(248,113,113,.14);color: var(--rojo);     border-color: rgba(248,113,113,.3); }
.insignia-acento   { background: rgba(0,224,184,.14);  color: var(--acento);   border-color: rgba(0,224,184,.3); }
.insignia-azul     { background: rgba(96,165,250,.14); color: var(--azul);     border-color: rgba(96,165,250,.3); }
.insignia-morado   { background: rgba(167,139,250,.14);color: var(--morado);   border-color: rgba(167,139,250,.3); }
/* Insignia apagada: estados que no son ni buenos ni malos, como «este deporte
   no tiene partidos programados» en el generador de apuestas. */
.insignia-apagada  { background: rgba(147,164,194,.10); color: var(--texto-3); border-color: rgba(147,164,194,.22); }

/* --------------------------------------------------------------------------
   HIPERVÍNCULOS EN TÍTULOS
   --------------------------------------------------------------------------
   El nombre de un equipo y el de una liga se pueden pulsar: llevan a su ficha
   y a su tabla. Se hace con `button` (no con `a`) porque la navegación es por
   hash dentro de la misma app, y así funciona igual con teclado.
   -------------------------------------------------------------------------- */
.enlace-titulo {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; font: inherit; text-align: left;
  border-bottom: 1px dotted transparent;
  transition: var(--transicion);
}
.enlace-titulo:hover:not(:disabled) {
  color: var(--acento);
  border-bottom-color: var(--acento);
}
.enlace-titulo:disabled { cursor: inherit; }

/* Tarjeta pequeña DENTRO de otra tarjeta (las de «Dónde juega»). No lleva
   sombra ni fondo propio: solo un borde suave, para que se lea como un bloque
   y no como otra tarjeta flotante. */
.tarjeta-suelta {
  border: 1px solid var(--borde-suave); border-radius: var(--radio-sm);
  padding: 11px 12px; background: rgba(255, 255, 255, .015);
}
/* El puesto en la liga, en grande: es el dato que se viene a buscar. */
.posicion-grande {
  font-size: 21px; font-weight: 800; color: var(--acento);
  font-variant-numeric: tabular-nums; line-height: 1;
}

/* ==========================================================================
   PRÓXIMOS EVENTOS (la sección tipo casa de apuestas)
   ==========================================================================
   Cada partido lleva sus apuestas en tarjetas con el color de la confianza:

       1-5 rojo · 6-7 amarillo · 8-9 verde · 9-9.5 azul · 10 dorado

   El color va en el BORDE IZQUIERDO (una franja) y en la pastilla del número;
   el fondo se queda oscuro para que el texto se lea siempre, incluso con el
   dorado, que sobre fondo claro no se leería.
   -------------------------------------------------------------------------- */
/* `.tarjeta.evento` y no `.evento` a secas: `.tarjeta` define su propio
   `display` y, al ser la misma especificidad, ganaba la regla que aparece más
   abajo en el archivo. Resultado: la tarjeta se quedaba en `grid` y el bloque
   del gráfico se encogía a 26 px (el texto, palabra por palabra). */
.tarjeta.evento { display: flex; flex-direction: column; gap: 8px; }
.tarjeta.evento > * { min-width: 0; }

/* Los eventos van en tarjetas ANCHAS, no en dos columnas fijas: cada tarjeta
   lleva las apuestas y el gráfico, y en una columna estrecha el texto del
   gráfico se parte palabra por palabra. Con `auto-fit` y un mínimo de 420 px,
   en una pantalla grande caben dos y en una pequeña, una. */
.rejilla-eventos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 900px) {
  .rejilla-eventos { grid-template-columns: 1fr; }
}
.evento-equipos {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 15px; font-weight: 650;
}
.apuestas-evento { display: flex; flex-direction: column; gap: 6px; }
.apuesta-evento {
  border: 1px solid var(--borde-suave);
  border-left: 4px solid var(--borde);      /* el color lo pone el estilo en línea */
  border-radius: var(--radio-sm);
  padding: 8px 10px;
  background: rgba(255, 255, 255, .02);
}
.apuesta-evento-etiqueta { font-size: 13.5px; font-weight: 600; }
.confianza-pastilla {
  color: #06131F; font-weight: 800; font-size: 12px;
  padding: 2px 8px; border-radius: 20px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.escala-colores { display: flex; gap: 6px; flex-wrap: wrap; }
.tramo-color {
  font-size: 11.5px; font-weight: 650; padding: 3px 9px;
  border: 1px solid; border-radius: 20px;
}

/* --- El gráfico de barras (sin librerías: divs y alturas en %) --- */
.grafico {
  border-top: 1px solid var(--borde-suave); padding-top: 10px;
}
.grafico-barras {
  display: flex; align-items: flex-end; gap: 6px;
  height: 130px; margin-top: 10px;
}
.grafico-barra {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 100%;
}
.grafico-columna {
  width: 100%; border-radius: 6px 6px 0 0; min-height: 3px;
  background: linear-gradient(180deg, var(--acento), rgba(0, 224, 184, .35));
  transition: height .25s ease;
}
/* El tramo con más goles se destaca: es la respuesta a la pregunta. */
.grafico-columna.pico {
  background: linear-gradient(180deg, var(--verde), rgba(34, 197, 94, .45));
  box-shadow: 0 0 0 1px var(--verde);
}
.grafico-valor { font-size: 11.5px; font-weight: 700; margin-bottom: 3px; }
.grafico-tramo {
  font-size: 10.5px; color: var(--texto-3); margin-top: 5px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   LAS TRES FORMAS DE VER EL GRÁFICO
   --------------------------------------------------------------------------
   Enfrentamientos directos · últimos 5 de cada equipo · todo junto.
   -------------------------------------------------------------------------- */
.pestanas-grafico {
  display: flex; gap: 4px; flex-wrap: wrap; margin: 10px 0 2px;
  border-bottom: 1px solid var(--borde-suave); padding-bottom: 6px;
}
.pestana-grafico {
  background: transparent; border: 1px solid var(--borde-suave);
  color: var(--texto-2); border-radius: 20px;
  font-size: 11.5px; font-weight: 600; padding: 3px 10px; cursor: pointer;
}
.pestana-grafico:hover { color: var(--texto); border-color: var(--borde); }
.pestana-grafico.activa {
  background: var(--acento-suave); color: var(--acento);
  border-color: var(--acento);
}

/* Barras dobles: el local y el visitante, lado a lado en cada tramo.
   Cada columna lleva su número ENCIMA, por eso necesita posición relativa. */
.grafico-grupo {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 3px; width: 100%; height: 100%;
}
.grafico-columna-serie {
  position: relative;
  flex: 1; min-width: 3px; min-height: 3px; border-radius: 4px 4px 0 0;
  transition: height .25s ease;
}
.grafico-columna-serie .grafico-valor {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  margin: 0;
}
.grafico-columna-serie.serie-0 {
  background: linear-gradient(180deg, var(--acento), rgba(0, 224, 184, .35));
}
.grafico-columna-serie.serie-1 {
  background: linear-gradient(180deg, #A78BFA, rgba(167, 139, 250, .35));
}
.grafico-columna-serie.pico { box-shadow: 0 0 0 1px var(--verde); }
.leyenda-series { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.punto-serie {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 5px;
}
.punto-serie.serie-0 { background: var(--acento); }
.punto-serie.serie-1 { background: #A78BFA; }

/* --------------------------------------------------------------------------
   OPCIONES APILADAS (panel de ajustes)
   --------------------------------------------------------------------------
   En la columna de ajustes hay unos 190 px de ancho. Dos botones en fila no
   caben: «En Caliente Y Playdoit» se salía de su tarjeta y se montaba encima
   del panel de resultados. Apilados y a lo ancho no se sale nada, y de paso se
   lee mejor cuál está elegido (el punto ● de la izquierda).
   -------------------------------------------------------------------------- */
.opciones-apiladas { display: flex; flex-direction: column; gap: 6px; }
.opcion-ancha {
  width: 100%; justify-content: flex-start; text-align: left;
  display: flex; align-items: center; gap: 8px;
}
.opcion-marca { font-size: 11px; opacity: .9; }

.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  padding: 6px 13px; border-radius: 20px; font-size: 12.5px; font-weight: 560;
  background: var(--tarjeta); border: 1px solid var(--borde);
  color: var(--texto-2); transition: var(--transicion);
}
.chip:hover { border-color: var(--texto-3); color: var(--texto); }
.chip.activo {
  background: rgba(0,224,184,.13); border-color: var(--acento);
  color: var(--acento); font-weight: 640;
}

/* ==========================================================================
   Tarjeta de partido
   ========================================================================== */
.partido {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px;
  transition: var(--transicion); cursor: pointer;
  display: flex; flex-direction: column; gap: 12px;
}
.partido:hover {
  border-color: rgba(0,224,184,.45); transform: translateY(-2px);
  box-shadow: var(--sombra);
}
.partido-cabecera {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; font-size: 11.5px; color: var(--texto-3);
}
.partido-equipos { display: flex; flex-direction: column; gap: 8px; }
.partido-equipo { display: flex; align-items: center; gap: 10px; }
.partido-escudo {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 750;
  background: var(--tarjeta-alza); color: var(--texto);
  border: 1px solid var(--borde);
  overflow: hidden;
}
/* El escudo de verdad, cuando lo hay. `contain` para que no se deforme: los
   escudos son cuadrados pero no todos, y estirarlos se nota muchísimo. */
.partido-escudo img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.partido-nombre { font-size: 13.5px; font-weight: 580; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.partido-marcador {
  font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums;
  min-width: 22px; text-align: center;
}

.cuotas-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.cuota-mini {
  background: var(--tarjeta-alza); border: 1px solid var(--borde);
  border-radius: 9px; padding: 7px 4px; text-align: center;
  transition: var(--transicion);
}
.cuota-mini:hover { border-color: var(--acento); background: var(--tarjeta-hover); }
.cuota-mini-etiqueta { font-size: 10px; color: var(--texto-3); display: block; }
.cuota-mini-valor { font-size: 13.5px; font-weight: 700; color: var(--acento); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Tablas
   ========================================================================== */
.tabla-envoltura { overflow-x: auto; border-radius: var(--radio); border: 1px solid var(--borde); }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tabla thead th {
  background: var(--fondo-2); color: var(--texto-3);
  font-size: 10.5px; font-weight: 680; text-transform: uppercase;
  letter-spacing: .07em; padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--borde); white-space: nowrap;
  position: sticky; top: 0;
}
table.tabla tbody td { padding: 9px 12px; border-bottom: 1px solid var(--borde-suave); }
table.tabla tbody tr:last-child td { border-bottom: none; }
table.tabla tbody tr:hover { background: var(--tarjeta-alza); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.centro { text-align: center; }

.fila-mejor { background: rgba(0,224,184,.07) !important; }
.fila-mejor td { font-weight: 620; }

/* ==========================================================================
   Barras y medidores
   ========================================================================== */
.medidor {
  height: 6px; background: var(--tarjeta-alza); border-radius: 20px;
  overflow: hidden; border: 1px solid var(--borde-suave);
}
.medidor-relleno {
  height: 100%; border-radius: 20px;
  background: linear-gradient(90deg, var(--acento), var(--verde));
  transition: width .5s ease;
}
.medidor-relleno.amarillo { background: linear-gradient(90deg, var(--amarillo), #F59E0B); }
.medidor-relleno.rojo     { background: linear-gradient(90deg, var(--rojo), #DC2626); }

/* --- Barra comparativa (local vs visitante) --- */
.comparativa { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.comparativa-valor {
  width: 52px; font-size: 13px; font-weight: 680;
  font-variant-numeric: tabular-nums; flex: 0 0 52px;
}
.comparativa-valor.izq { text-align: right; }
.comparativa-centro { flex: 1; min-width: 0; }
.comparativa-etiqueta {
  font-size: 11px; color: var(--texto-3); text-align: center;
  margin-bottom: 4px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.comparativa-barras { display: flex; height: 7px; border-radius: 20px; overflow: hidden; gap: 2px; }
.comparativa-barra { height: 100%; border-radius: 20px; transition: width .5s ease; }
.comparativa-barra.izq { background: linear-gradient(90deg, var(--acento-oscuro), var(--acento)); }
.comparativa-barra.der { background: linear-gradient(90deg, var(--azul), #3B82F6); }

/* ==========================================================================
   Formas (W/D/L)
   ========================================================================== */
.forma { display: flex; gap: 3px; }
.forma-item {
  width: 19px; height: 19px; border-radius: 5px;
  display: grid; place-items: center; font-size: 10px; font-weight: 750;
}
.forma-W { background: rgba(34,197,94,.2);  color: var(--verde); }
.forma-D { background: rgba(251,191,36,.2); color: var(--amarillo); }
.forma-L { background: rgba(248,113,113,.2);color: var(--rojo); }

/* ==========================================================================
   Panel de valor / decisión
   ========================================================================== */
.decision {
  border-radius: var(--radio); border: 1px solid var(--borde);
  padding: 13px 15px; background: var(--tarjeta);
  border-left-width: 3px;
}
.decision-APOSTAR               { border-left-color: var(--verde); }
.decision-APOSTAR_CON_PRECAUCION{ border-left-color: var(--amarillo); }
.decision-ESPERAR               { border-left-color: var(--azul); }
.decision-NO_APOSTAR            { border-left-color: var(--texto-3); }

.aviso {
  display: flex; gap: 11px; padding: 13px 15px; border-radius: var(--radio-sm);
  background: rgba(96,165,250,.08); border: 1px solid rgba(96,165,250,.25);
  font-size: 12.5px; color: var(--texto-2);
}
.aviso-aviso   { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.28); }
.aviso-peligro { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.28); }
.aviso-ok      { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.28); }

.lista-puntos { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lista-puntos li {
  font-size: 12.5px; color: var(--texto-2);
  padding-left: 17px; position: relative;
}
.lista-puntos li::before {
  content: '·'; position: absolute; left: 6px; color: var(--acento);
  font-weight: 900; font-size: 16px; line-height: 1.35;
}

/* ==========================================================================
   Métricas
   ========================================================================== */
.metrica { display: flex; flex-direction: column; gap: 2px; }
.metrica-valor {
  font-size: 22px; font-weight: 750; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.metrica-etiqueta { font-size: 11px; color: var(--texto-3); }
.metrica-sub { font-size: 11px; color: var(--texto-2); }

/* ==========================================================================
   Cronología de eventos
   ========================================================================== */
.cronologia { display: flex; flex-direction: column; }
.evento {
  display: grid; grid-template-columns: 46px 26px 1fr auto;
  gap: 11px; align-items: center; padding: 8px 0;
  border-bottom: 1px solid var(--borde-suave);
}
.evento:last-child { border-bottom: none; }
.evento-minuto {
  font-size: 12px; font-weight: 700; color: var(--texto-3);
  font-variant-numeric: tabular-nums; text-align: right;
}
.evento-icono {
  width: 24px; height: 24px; border-radius: 7px; display: grid;
  place-items: center; font-size: 12px; background: var(--tarjeta-alza);
}
.evento-jugador { font-size: 13px; font-weight: 570; }
.evento-detalle { font-size: 11px; color: var(--texto-3); }

/* ==========================================================================
   Pestañas
   ========================================================================== */
.pestanas {
  display: flex; gap: 4px; border-bottom: 1px solid var(--borde);
  margin-bottom: 18px; overflow-x: auto;
}
.pestana {
  padding: 10px 15px; font-size: 13.5px; font-weight: 570;
  color: var(--texto-2); border-bottom: 2px solid transparent;
  transition: var(--transicion); white-space: nowrap;
}
.pestana:hover { color: var(--texto); }
.pestana.activo { color: var(--acento); border-bottom-color: var(--acento); font-weight: 650; }

/* ==========================================================================
   Estados de carga
   ========================================================================== */
.cargando { display: flex; flex-direction: column; gap: 11px; padding: 22px 0; }
.esqueleto {
  height: 15px; border-radius: 7px;
  background: linear-gradient(90deg, var(--tarjeta) 25%, var(--tarjeta-alza) 50%, var(--tarjeta) 75%);
  background-size: 200% 100%; animation: brillo 1.35s infinite;
}
@keyframes brillo { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.vacio {
  text-align: center; padding: 44px 20px; color: var(--texto-3);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.vacio-icono { font-size: 30px; opacity: .45; }

.error-caja {
  padding: 14px 16px; border-radius: var(--radio-sm);
  background: rgba(248,113,113,.09); border: 1px solid rgba(248,113,113,.3);
  color: var(--rojo); font-size: 13px;
}

/* ==========================================================================
   Pie
   ========================================================================== */
.pie {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--borde-suave);
  font-size: 11.5px; color: var(--texto-3);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ==========================================================================
   Utilidades
   ========================================================================== */
.fila { display: flex; align-items: center; gap: 10px; }
.fila-entre { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.columna { display: flex; flex-direction: column; }
.envolver { flex-wrap: wrap; }
.crecer { flex: 1; min-width: 0; }
.espacio-arriba { margin-top: 14px; }
.espacio-arriba-lg { margin-top: 24px; }
.oculto { display: none; }

/* ==========================================================================
   Adaptación a pantallas pequeñas
   ========================================================================== */
/* ==========================================================================
   MENU EN EL MOVIL
   ==========================================================================
   En pantallas pequenas la barra lateral no cabe, pero esconderla sin mas
   dejaba la aplicacion SIN FORMA DE NAVEGAR: se veia el contenido y no se
   podia ir a ninguna otra pantalla.

   Ahora la barra se convierte en un cajon que entra desde la izquierda al
   pulsar el boton de menu. */
.boton-menu {
  display: none;
  background: var(--tarjeta); border: 1px solid var(--borde);
  color: var(--texto); border-radius: 9px;
  width: 38px; height: 38px; font-size: 17px; cursor: pointer;
  align-items: center; justify-content: center; flex: none;
}
.boton-menu:hover { border-color: var(--acento); }
.velo-menu {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 40; backdrop-filter: blur(2px);
}

@media (max-width: 1080px) {
  .boton-menu { display: flex; }

  /* La barra sale de la pantalla y entra deslizandose */
  .barra {
    position: fixed; top: 0; left: 0; z-index: 50;
    height: 100vh; overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.5);
  }
  .barra.abierta { transform: translateX(0); }
  .contenido { padding: 18px 15px 50px; }
  .cabecera { padding: 10px 15px; }
  .heroe { padding: 26px 20px; }
  .heroe h1 { font-size: 24px; }
}

/* --------------------------------------------------------------------------
   MÓVIL ESTRECHO (hasta 700 px)

   Aquí la cabecera NO CABE en una sola fila: van el botón de menú, el
   buscador, el enlace a la API, la chapa con el nombre y «Cerrar sesión».
   Sin esto, la fila se salía por la derecha y pasaban dos cosas feas:

     1. «Cerrar sesión» quedaba cortado por el borde. Es el botón que más
        hace falta en un móvil prestado, justo el que no se podía pulsar.
     2. La página entera se podía arrastrar en horizontal (el documento medía
        399 px en una pantalla de 390), que es el tic más molesto que puede
        tener una web en el teléfono.

   Se deja envolver en vez de recortar: nada desaparece, solo baja de línea.
   La única excepción es la chapa con el nombre, que es informativa y ya se ve
   en «Mi perfil»; su sitio lo necesita el botón.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .cabecera { flex-wrap: wrap; row-gap: 8px; }
  .cabecera-acciones { flex-wrap: wrap; row-gap: 6px; margin-left: auto; }
  .cabecera-acciones .sesion-quien { display: none; }
  .cabecera-acciones .boton-sm { padding: 6px 9px; font-size: 12px; }

  /* Las filas «título a la izquierda, botón a la derecha» (Partidos
     destacados, Competencias…) se solapaban. Envolverlas las apila. */
  .fila-entre { flex-wrap: wrap; row-gap: 8px; }

  /* Ninguna imagen ni tabla debe poder empujar el ancho del documento. */
  img, table { max-width: 100%; }

  /* Red de seguridad: aunque algo se cuele, la página no se arrastra. */
  body { overflow-x: hidden; }
}

/* ==========================================================================
   Generador de apuestas
   ========================================================================== */
/* Panel de ajustes a la izquierda y resultados a la derecha. En pantallas
   estrechas se apila, porque un panel de 300 px fijos dejaría los resultados
   en un hilo. */
.disposicion-generador {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) {
  .disposicion-generador { grid-template-columns: 1fr; }
}
/* El panel de ajustes se queda pegado arriba mientras se miran los resultados
   (es cómodo: cambias un ajuste y ves el efecto), PERO con dos condiciones:

     1. `max-height`: sin esto, un panel de 2.500 px pegado arriba deja fuera de
        alcance todo lo que pasa de la pantalla. Medido el 2026-10-02: de las 8
        tarjetas, 6 eran inalcanzables («Peso de cada criterio» entre ellas) por
        mucho que se desplazara la página.
     2. `overflow-y: auto`: así el panel se desplaza POR DENTRO y se llega a
        todo. Con la barra de scroll visible, para que se note que hay más. */
.panel-ajustes {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--borde) transparent;
}
.panel-ajustes::-webkit-scrollbar { width: 8px; }
.panel-ajustes::-webkit-scrollbar-track { background: transparent; }
.panel-ajustes::-webkit-scrollbar-thumb {
  background: var(--borde); border-radius: 8px;
}
.panel-ajustes::-webkit-scrollbar-thumb:hover { background: var(--texto-3); }
@media (max-width: 1100px) {
  .panel-ajustes { position: static; max-height: none; overflow: visible; }
}

/* Fichas de casa de apuestas: se envuelven solas, así 12 casas ocupan cuatro
   líneas en vez de 800 px de tarjeta. */
.ficha-casa {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--borde); background: var(--tarjeta);
  color: var(--texto-2); font-size: 12.5px; font-weight: 550;
  transition: var(--transicion);
}
.ficha-casa:hover { border-color: var(--texto-3); color: var(--texto); }
.ficha-casa.elegida {
  border-color: var(--acento); color: var(--acento);
  background: rgba(0, 224, 184, .10);
}
.ficha-casa .marca { font-size: 10px; }
/* Enlace de texto para acciones secundarias dentro de una tarjeta. */
.enlace-mini {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--acento); font-size: 12px; font-weight: 600;
}
.enlace-mini:hover { text-decoration: underline; }

/* Nota de confianza: un circulo con el numero 0-10. El color comunica el
   nivel antes de que se lea la cifra. */
.confianza-circulo {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums;
}
.conf-verde {
  background: rgba(34, 197, 94, .16); color: var(--verde);
  border: 2px solid rgba(34, 197, 94, .45);
}
.conf-amarillo {
  background: rgba(250, 204, 21, .14); color: var(--amarillo);
  border: 2px solid rgba(250, 204, 21, .4);
}
.conf-rojo {
  background: rgba(239, 68, 68, .13); color: var(--rojo);
  border: 2px solid rgba(239, 68, 68, .38);
}

/* Deslizadores de los pesos: el nativo se ve distinto en cada navegador. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 4px; background: var(--tarjeta-alza);
  outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--acento); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; border: none;
  background: var(--acento); cursor: pointer;
}

/* Campo de numero de los ajustes */
.entrada {
  width: 100%; padding: 6px 9px; border-radius: 7px; margin-top: 3px;
  background: var(--tarjeta-alza); color: var(--texto);
  border: 1px solid var(--borde); font-family: inherit; font-size: 13px;
}
.entrada:focus { outline: none; border-color: var(--acento); }
/* ==========================================================================
   ACCESO (pantalla de inicio de sesión)
   ==========================================================================
   Ocupa la pantalla entera porque sin sesión no hay nada detrás: es la
   puerta, no un aviso encima de la aplicación. Fondo con un degradado muy
   suave del color de acento, para que se entienda que es la marca y no una
   página de error.
   ========================================================================== */
.acceso-fondo {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(0, 224, 184, .12), transparent 60%),
    var(--fondo);
}

.acceso-caja {
  width: 100%;
  max-width: 380px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 26px 24px 20px;
}

.acceso-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.acceso-form { display: flex; flex-direction: column; gap: 14px; }

.acceso-campo { display: flex; flex-direction: column; gap: 6px; }
.acceso-campo > span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--apagado, #8A9AB5);
}
.acceso-campo input {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  color: var(--texto);
  padding: 11px 12px;
  font-size: 15px;
  font-family: inherit;
  transition: border-color var(--transicion);
}
.acceso-campo input:focus {
  outline: none;
  border-color: var(--acento);
}
.acceso-campo input:disabled { opacity: .6; }

/* La contraseña con su botón de «ver» dentro del mismo campo: así el ojo no
   se va a la derecha del formulario y el campo sigue pareciendo un campo. */
.acceso-clave { position: relative; display: flex; }
.acceso-clave input { flex: 1; padding-right: 44px; }
.acceso-ojo {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  padding: 6px 10px;
  opacity: .7;
  border-radius: var(--radio-sm);
}
.acceso-ojo:hover { opacity: 1; background: var(--tarjeta-hover); }

.acceso-error {
  background: rgba(248, 113, 113, .12);
  border: 1px solid rgba(248, 113, 113, .4);
  color: var(--rojo);
  border-radius: var(--radio-sm);
  padding: 9px 11px;
  font-size: 13px;
}

.acceso-boton { width: 100%; justify-content: center; padding: 11px; font-size: 15px; }

.acceso-pie {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--borde-suave);
  font-size: 12px;
  color: var(--apagado, #8A9AB5);
  text-align: center;
  line-height: 1.5;
}

/* Quién está dentro, en la cabecera. El punto verde es lo que hace que se
   entienda de un vistazo que la sesión está viva. */
.sesion-quien {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--texto);
  padding: 5px 10px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--tarjeta);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sesion-punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
  flex: 0 0 auto;
}