/*
 * app.css -- estilos de la PWA del negociador. Móvil primero (base
 * 375px), sin frameworks/CDN, font stack del sistema, tabular-nums en
 * TODO número comparable.
 *
 * Piel sportsbook oscura (D14 v2, docs/decisiones.md 2026-08-20):
 * inspiración Playdoit/bet365/Stake/Draftea -- fondo oscuro, tarjetas
 * de juego con logos, "cajas de momio" (línea/P(cubre)/Δ) como en un
 * ticket de apuestas, verde/rojo para favorable/desfavorable, ámbar
 * para avisos y palancas. La ESTRUCTURA de las vistas (D14 original)
 * no cambia -- solo la piel y la forma del negociador (cajón -> chat).
 * Reglas duras que siguen igual: sin emojis (iconos SVG de iconos.js),
 * font-variant-numeric tabular-nums, números comparables a la derecha,
 * controles >=44px, timestamps visibles, offline honesto.
 */

:root {
  /* -- paleta sportsbook oscura (decisión D14 v2) -------------------- */
  --gcc-bg: #0D1117;
  --gcc-superficie: #161B26;
  --gcc-superficie-elevada: #1D2433;
  --gcc-borde: #2A3245;
  --gcc-fg: #E6EDF3;
  --gcc-muted: #8B96A9;

  --gcc-verde: #22C55E;
  --gcc-verde-bg: rgba(34, 197, 94, .14);
  --gcc-rojo: #EF4444;
  --gcc-rojo-bg: rgba(239, 68, 68, .14);
  --gcc-ambar: #F59E0B;
  --gcc-ambar-bg: rgba(245, 158, 11, .14);
  --gcc-ambar-borde: #F59E0B;
  --gcc-azul: #3B82F6;
  --gcc-azul-bg: rgba(59, 130, 246, .14);

  /* CTA sólido (verde) necesita texto oscuro para contraste real
   * (blanco sobre #22C55E da ~2.3:1, falla AA incluso en texto grande;
   * #06180C sobre el mismo verde da >9:1). */
  --gcc-cta-bg: var(--gcc-verde);
  --gcc-cta-fg: #06180C;

  --gcc-primario: var(--gcc-verde);
  --gcc-primario-fg: var(--gcc-cta-fg);
  --gcc-fila-hover: #1B2130;

  --gcc-radio: 10px;
  --gcc-alto-control: 44px;
  /* Ancho del sidebar (Fase 5). 56px en móvil: es una TIRA de iconos --
   * 15% de una pantalla de 375px, el mínimo que deja un blanco de toque
   * de 44px con aire. A partir de 768px se ensancha (ver el @media del
   * final) y las etiquetas dejan de ser un pie de 10px. */
  --gcc-nav-ancho: 56px;
  --gcc-fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gcc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

/* --- que se sienta app, sin quitarle el zoom a nadie (D34) --------------
 * NO se toca el <meta viewport>: `user-scalable=no` / `maximum-scale=1`
 * rompen WCAG 1.4.4 y le quitan el acercamiento a quien lo necesita para
 * leer. Lo que se quita aquí es el zoom ACCIDENTAL -- el que se dispara
 * solo y deja la pantalla corrida a media captura -- y los tics de
 * navegador que delatan que esto es una página. El pellizco para acercar
 * sigue funcionando igual. */
html {
  /* Sin esto, cada toque pinta un rectángulo gris de sistema. El aviso
   * de que tocaste algo lo dan los estados `:active` de más abajo. */
  -webkit-tap-highlight-color: transparent;
}

/* `manipulation` = toque y arrastre sí, DOBLE TOQUE PARA ACERCAR no. Es
 * lo que quita el retardo de ~300ms con que el navegador espera a ver si
 * viene un segundo toque, y de paso evita que un doble toque nervioso
 * sobre una tarjeta acerque la pantalla. */
button, a, input, textarea, select, summary,
.tarjeta-juego, .nav-item, .nav-toggle, .aviso-tarjeta, .mocion-abrir {
  touch-action: manipulation;
}

/* El desplazamiento no se contagia hacia afuera: llegar al final del
 * chat del negociador o del historial de avisos ya no arrastra la página
 * de atrás, y desde arriba no dispara el "jalar para recargar". */
body, .cajon-cuerpo, .chat-mensajes, .menu-panel, .nav-lateral, .modal-cuerpo {
  overscroll-behavior: contain;
}

/* El armazón no se selecciona: mantener apretada una pestaña o un chip
 * ya no saca la lupa ni el menú de copiar. El CONTENIDO del acta (picks,
 * números, explicaciones) SÍ se puede seleccionar y copiar -- ahí sí
 * hace falta. */
.nav-lateral, .encabezado, .chip, .juego-slot, .menu-tabs, button {
  -webkit-user-select: none;
  user-select: none;
}

/* `hidden` SIEMPRE oculta (Fase 4b): el UA pone `display: none` con
 * especificidad cero, así que cualquier clase con `display` propio
 * (`.boton` es inline-flex) le ganaba -- los botones "Activar/Desactivar
 * avisos" de 4a se veían los dos aunque app.js pusiera `hidden`. Las
 * reglas `.x[hidden]` de abajo quedan como refuerzo local. */
[hidden] { display: none !important; }

html {
  /* controles nativos (checkboxes, scrollbars) en variante oscura por
   * default -- sin esto, un <input type="checkbox"> sin marcar se
   * renderiza como un cuadro blanco puro encima del fondo oscuro. */
  color-scheme: dark;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--gcc-bg);
  color: var(--gcc-fg);
  font-family: var(--gcc-fuente);
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}

body {
  /* `dvh` y no `vh`: en Safari de iOS `100vh` es el viewport GRANDE (el
   * de la barra de herramientas escondida), así que con la barra a la
   * vista la página se extiende por debajo de ella y el último renglón
   * queda tapado. `dvh` sigue al viewport real. El `vh` queda de
   * respaldo para navegadores sin `dvh`. */
  min-height: 100vh;
  min-height: 100dvh;
  /* a la izquierda, el sidebar fijo; abajo, el asa del negociador
   * cerrado MÁS el indicador de inicio del iPhone (sin sumarlo, la
   * última tarjeta queda debajo de la franja del gesto). */
  padding-left: var(--gcc-nav-ancho);
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
}

/* Pantallas que se sirven SOLAS, sin el armazón de la app (hoy el login;
 * `/reparar` no carga esta hoja). No tienen sidebar, así que no pueden
 * heredar el hueco que el sidebar deja: con él, el formulario quedaba
 * 28px corrido a la derecha -- margen izquierdo de 72px contra 16px del
 * derecho en un iPhone de 402px, y a simple vista se veía chueco. */
body.pantalla-sola {
  padding-left: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

button {
  font: inherit;
  color: inherit;
}

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--gcc-azul);
  outline-offset: 2px;
}

.gcc-icono { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* --- login (pantalla previa a la sesión, Fase 4a T1) --------------------
 * Reusa /app.css entero (agregado a _ESTATICOS_SIN_AUTH en
 * gcc/api/app.py) para no duplicar la piel oscura en un <style>
 * inline -- estas son las únicas reglas que el resto de la PWA no
 * necesita. */

.login-pantalla {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.login-tarjeta {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-logo { width: 64px; height: 64px; margin-bottom: 14px; flex-shrink: 0; }

.login-titulo {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-align: center;
}

.login-subtitulo {
  margin: 4px 0 26px;
  font-size: 13px;
  color: var(--gcc-muted);
  text-align: center;
}

.login-form { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.login-form .boton { width: 100%; }

.login-campo { display: flex; flex-direction: column; gap: 6px; }

.login-campo label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gcc-muted);
}

.login-campo input {
  min-height: var(--gcc-alto-control);
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--gcc-borde);
  background: var(--gcc-superficie-elevada);
  color: var(--gcc-fg);
  /* 16px es el umbral: por debajo, Safari de iOS ACERCA la pantalla
   * al enfocar el campo y la deja corrida. */
  font-size: 16px;
  font-family: inherit;
}

.login-error {
  min-height: 18px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--gcc-rojo);
  text-align: center;
}

.login-error:empty { display: none; }

/* --- escudo de equipo + respaldo de iniciales --------------------------
 * Los escudos vienen de /logos/{ABREV}.png (ruta del backend, Fase 3b
 * frente A) -- en local (sin esa ruta desplegada) o si el archivo no
 * existe, la imagen truena su evento "error" y `app.js` (listener en
 * fase de captura, ver `_cablearLogosFallback`) le agrega la clase
 * `gcc-logo--error` al contenedor, que oculta la <img> rota y muestra
 * el círculo con las iniciales -- nunca un ícono roto del navegador. */
.gcc-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gcc-superficie-elevada);
  border: 1px solid var(--gcc-borde);
}

.gcc-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gcc-logo-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: var(--gcc-mono);
  color: var(--gcc-muted);
  letter-spacing: -.02em;
}

.gcc-logo--error .gcc-logo-img { display: none; }
.gcc-logo--error .gcc-logo-fallback { display: flex; }

/* --- banner offline ---------------------------------------------------- */

.banner-offline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--gcc-ambar-bg);
  color: var(--gcc-ambar);
  border-bottom: 1px solid var(--gcc-ambar-borde);
  padding: 8px 12px;
  font-size: 13px;
  position: sticky;
  top: 0;
  z-index: 40;
}

.banner-offline[hidden] { display: none; }

.banner-offline button {
  min-height: var(--gcc-alto-control);
  padding: 4px 12px;
  border: 1px solid var(--gcc-ambar-borde);
  border-radius: 8px;
  background: transparent;
  color: var(--gcc-ambar);
  font-weight: 600;
}

/* --- encabezado ---------------------------------------------------------*/

.encabezado {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--gcc-borde);
  background: var(--gcc-superficie);
}

/* marca pickLAB -- pequeña, arriba del título dinámico ("Acta ·
 * Semana N"), que sigue siendo el encabezado principal legible */
.marca {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gcc-muted);
}

.marca img { display: block; border-radius: 4px; }

.encabezado-fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.encabezado-titulo h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.subtitulo {
  margin: 2px 0 10px;
  font-size: 12px;
  color: var(--gcc-muted);
}

/* acciones a la derecha del encabezado: el botón del menú (Fase 4b) */
.encabezado-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
}

/* solo para lectores de pantalla (texto que da nombre a un control sin
 * ocupar espacio visual) */
.sr-solo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- botón del menú: avatar (inicial en círculo verde) + nombre + chevron
 * (Fase 4b). Visible, con nombre -- reemplaza al iconito "Cuenta" + "?"
 * que el usuario no encontraba en el teléfono. El badge rojo con el
 * número de avisos sin leer cuelga de la esquina. */
.btn-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--gcc-alto-control);
  max-width: 52vw;
  padding: 0 10px 0 5px;
  border-radius: 999px;
  border: 1px solid var(--gcc-borde);
  background: var(--gcc-superficie-elevada);
  color: var(--gcc-fg);
  flex-shrink: 1;
  min-width: 0;
}

.btn-menu-avatar,
.menu-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gcc-verde);
  color: var(--gcc-cta-fg);
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.btn-menu-nombre {
  font-weight: 700;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.btn-menu-chevron { display: inline-flex; color: var(--gcc-muted); flex-shrink: 0; }

.btn-menu-badge,
.menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gcc-rojo);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.btn-menu-badge { position: absolute; top: -4px; right: -4px; }
.btn-menu-badge[hidden], .menu-badge[hidden] { display: none; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--gcc-borde);
  background: var(--gcc-superficie-elevada);
  color: var(--gcc-muted);
  white-space: nowrap;
}

.chip--ambar {
  background: var(--gcc-ambar-bg);
  color: var(--gcc-ambar);
  border-color: var(--gcc-ambar-borde);
}

.chip--verde { background: var(--gcc-verde-bg); color: var(--gcc-verde); border-color: var(--gcc-verde); }
.chip--neutro { color: var(--gcc-fg); }

.chip-quitar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  padding: 0;
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  color: inherit;
  opacity: .8;
}

/* --- estados de carga / error ------------------------------------------*/

.estado-carga, .estado-error {
  padding: 32px 16px;
  text-align: center;
  color: var(--gcc-muted);
}

.estado-carga[hidden], .estado-error[hidden] { display: none; }

.estado-error button {
  margin-top: 10px;
  min-height: var(--gcc-alto-control);
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid var(--gcc-borde);
  background: var(--gcc-superficie-elevada);
  color: var(--gcc-fg);
  font-weight: 600;
}

/* --- contenedor de vistas ------------------------------------------------*/

#contenido { padding: 10px 8px 24px; }

.vista[hidden] { display: none; }

/* --- Vista 1: tarjetas de juego (estética sportsbook) ------------------- */

.lista-juegos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Panel plegable "¿Cómo se calcula esto?" (una sola vez, arriba del
   acta). Cerrado por defecto: quien solo viene a capturar el boleto no
   tiene que saltárselo. */
.como-calculo {
  margin-bottom: 10px;
  background: var(--gcc-superficie);
  border: 1px solid var(--gcc-borde);
  border-radius: var(--gcc-radio);
}

.como-calculo-titulo {
  display: flex;
  align-items: center;
  min-height: var(--gcc-alto-control);   /* 44px táctiles */
  padding: 0 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--gcc-muted);
  list-style: none;
}

.como-calculo-titulo::-webkit-details-marker { display: none; }
.como-calculo-titulo::before {
  content: '▸';
  margin-right: 8px;
  font-size: 11px;
}
.como-calculo[open] .como-calculo-titulo { color: var(--gcc-texto); }
.como-calculo[open] .como-calculo-titulo::before { content: '▾'; }

.como-calculo-cuerpo {
  padding: 0 14px 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gcc-muted);
}

.como-calculo-cuerpo p { margin: 0 0 10px; }
.como-calculo-cuerpo p:last-child { margin-bottom: 0; }
.como-calculo-cuerpo strong { color: var(--gcc-texto); font-weight: 700; }

.tarjeta-juego {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;   /* deja que la explicación ocupe su propio renglón */
  gap: 10px;
  padding: 10px;
  background: var(--gcc-superficie);
  border: 1px solid var(--gcc-borde);
  border-radius: var(--gcc-radio);
  cursor: pointer;
  min-height: var(--gcc-alto-control);
}

.tarjeta-juego:focus-visible { background: var(--gcc-fila-hover); }
.tarjeta-juego:active { background: var(--gcc-fila-hover); }
@media (hover: hover) { .tarjeta-juego:hover { background: var(--gcc-fila-hover); } }
.tarjeta-juego--disputa { box-shadow: inset 3px 0 0 var(--gcc-ambar); }

.icono-disputa { color: var(--gcc-ambar); flex-shrink: 0; }

.juego-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  align-self: center;
  border-radius: 50%;
  background: var(--gcc-superficie-elevada);
  border: 1px solid var(--gcc-borde);
  font-family: var(--gcc-mono);
  font-weight: 800;
  font-size: 14px;
}

.juego-slot--alerta { border-color: var(--gcc-ambar-borde); color: var(--gcc-ambar); }

.juego-cuerpo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.juego-pick-fila {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pick-equipo { font-weight: 800; font-family: var(--gcc-mono); font-size: 16px; white-space: nowrap; }

.pick-rival {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--gcc-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.chip--palanca { margin-left: auto; flex-shrink: 0; }

.juego-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--gcc-muted);
}

.juego-momios {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-self: center;
}

/* Explicación del cálculo, renglón propio a lo ancho de la tarjeta
   (`flex: 1 0 100%` fuerza el salto de línea dentro del flex de
   `.tarjeta-juego`). Jerarquía deliberada: más chica, atenuada y con
   interlineado holgado -- acompaña a los números, no compite con
   ellos. */
.juego-explicacion {
  flex: 1 0 100%;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--gcc-borde);
  font-size: 12px;
  line-height: 1.55;
  color: var(--gcc-muted);
  text-wrap: pretty;
}

.caja-momio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 52px;
  padding: 6px 8px;
  background: var(--gcc-superficie-elevada);
  border: 1px solid var(--gcc-borde);
  border-radius: 8px;
}

.momio-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gcc-muted);
  text-transform: uppercase;
}

.momio-valor {
  font-family: var(--gcc-mono);
  font-weight: 700;
  font-size: 14px;
}

.momio-valor--pos { color: var(--gcc-verde); }
.momio-valor--neg { color: var(--gcc-rojo); }
.momio-valor--neutro { color: var(--gcc-muted); }

/* atajos legados (deltas dentro del memo/desglose de texto plano) */
.delta-pos { color: var(--gcc-verde); font-weight: 700; }
.delta-neg { color: var(--gcc-rojo); font-weight: 700; }
.delta-neutro { color: var(--gcc-muted); }

/* --- Vista 1: cara trasera (memo del consejo) --------------------------- */

.juego-trasera[hidden] { display: none; }

.tarjeta-trasera-contenido {
  margin-top: 6px;
  padding: 12px 14px 14px;
  background: var(--gcc-superficie-elevada);
  border: 1px solid var(--gcc-borde);
  border-radius: var(--gcc-radio);
  font-size: 13px;
  animation: gcc-expandir .18s ease;
}

@keyframes gcc-expandir {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.trasera-convic, .trasera-tesis, .trasera-riesgo, .trasera-desglose, .trasera-colapsada {
  margin: 0 0 8px;
  line-height: 1.4;
}

.trasera-desglose { font-family: var(--gcc-mono); color: var(--gcc-muted); }
.trasera-evidencia ul { margin: 4px 0 8px; padding-left: 18px; }
.trasera-evidencia li { margin-bottom: 2px; }

.tarjeta-disputa {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: var(--gcc-ambar-bg);
  border: 1px solid var(--gcc-ambar-borde);
  border-radius: 8px;
  color: var(--gcc-ambar);
}

/* --- pie Vista 1 -----------------------------------------------------*/

.pie-vista1 { margin-top: 14px; }

.leyenda { font-size: 12px; color: var(--gcc-muted); margin: 0 0 10px; }

.chip-survivor { margin-bottom: 10px; }

.pie-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--gcc-alto-control);
  padding: 0 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid transparent;
  flex: 1 1 auto;
}

/* CTA verde sólido (D14 v2) */
.boton-primario { background: var(--gcc-cta-bg); color: var(--gcc-cta-fg); }
.boton-primario:disabled { opacity: .5; }

/* botón "fantasma" -- transparente, solo borde */
.boton-secundario { background: transparent; color: var(--gcc-fg); border-color: var(--gcc-borde); }
.boton-secundario:disabled { opacity: .45; }

.boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--gcc-alto-control);
  min-height: var(--gcc-alto-control);
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--gcc-muted);
}

/* --- modal boleto ---------------------------------------------------- */

.modal[hidden] { display: none; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
}

.modal-fondo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
}

.modal-contenido {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--gcc-superficie);
  border: 1px solid var(--gcc-borde);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
}

.modal-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.modal-cabecera h2 { font-size: 17px; margin: 0; }

.modal-nota { font-size: 12px; color: var(--gcc-muted); margin: 0 0 10px; }

.boleto-lista { list-style: none; margin: 0; padding: 0; }

.boleto-fila { border-bottom: 1px solid var(--gcc-borde); }

.boleto-fila label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-height: var(--gcc-alto-control);
  padding: 6px 2px;
}

.boleto-fila input[type="checkbox"] { width: 24px; height: 24px; flex-shrink: 0; accent-color: var(--gcc-verde); }

.boleto-slot { font-family: var(--gcc-mono); font-weight: 700; width: 1.6em; text-align: right; color: var(--gcc-muted); }
.boleto-pick { font-family: var(--gcc-mono); font-weight: 700; width: 3em; }
.boleto-juego { color: var(--gcc-muted); font-size: 13px; }

.boleto-kickoff {
  flex-basis: 100%;
  padding-left: 34px;
  color: var(--gcc-muted);
  font-size: 11px;
}

.modal-pie { margin-top: 12px; }
.modal-pie .boton { width: 100%; }

/* --- navegación lateral (sidebar, Fase 5) -------------------------------
 * Sustituye la barra inferior de pestañas. Ocupa TODO el alto y los
 * botones se anclan ABAJO (`justify-content: flex-end`): en un teléfono
 * de 375px el pulgar de una mano alcanza el tercio inferior, que era
 * justo la ventaja de la barra de abajo -- se conserva esa ergonomía sin
 * volver a robarle una franja horizontal al contenido. En pantalla
 * ancha (>= 768px) se anclan arriba, que es donde se buscan. */

.nav-lateral {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 50;
  width: var(--gcc-nav-ancho);
  display: flex;
  flex-direction: column;
  /* Las secciones arriba, como en cualquier barra lateral (D33). Antes
   * iban ancladas ABAJO buscando el alcance del pulgar (D28), pero el
   * precio fue peor que el beneficio: una navegación que empieza donde
   * nadie la busca. El alcance del pulgar se conserva donde de verdad
   * importa -- el botón de plegar, que es el único de esta tira que se
   * usa MIENTRAS lees, sigue pegado abajo con `margin-top: auto`. */
  justify-content: flex-start;
  gap: 2px;
  /* padding lateral mínimo: con 56px de tira, 2px por lado dejan un
   * blanco de toque de 52px -- por encima de los 44px de la regla dura. */
  padding: 8px 2px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--gcc-superficie);
  border-right: 1px solid var(--gcc-borde);
  overflow-y: auto;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--gcc-alto-control);
  padding: 7px 2px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--gcc-muted);
  font-weight: 600;
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
}

/* El toque tiene que avisar: sin el rectángulo gris del sistema, un
 * botón sin `:active` se siente muerto (checklist: 80-150ms). */
.nav-item:active { background: var(--gcc-fila-hover); }

.nav-item[aria-current="page"] {
  color: var(--gcc-verde);
  background: var(--gcc-verde-bg);
  box-shadow: inset 2px 0 0 var(--gcc-verde);
}

/* la etiqueta en móvil es un pie de 10px: se parte sola si hace falta,
 * pero nunca desborda la tira ni empuja el contenido */
.nav-etiqueta { max-width: 100%; overflow-wrap: anywhere; }

/* "Información" no cabe en 51px sin partirse por la mitad ("Informac
 * ión", visto en navegador a 375px): en la tira va "Info" y la palabra
 * completa aparece cuando el sidebar se ensancha. El nombre accesible NO
 * depende de esto -- el botón lleva su propio `aria-label`. */
.nav-etiqueta--larga { display: none; }

/* --- mostrar/ocultar la tira (D31) ---------------------------------------
 * En un teléfono de 375px la tira cuesta 56px: 15% del ancho, TODO el
 * tiempo, aunque el usuario esté leyendo dieciséis tarjetas de juego.
 * Ocultarla se lo devuelve al acta. El botón NO se mueve al plegarla: en
 * las dos posiciones vive en la esquina inferior izquierda, así que el
 * gesto para traerla de vuelta está donde el pulgar acaba de dejarlo. */
.nav-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* `auto` y no un valor fijo: empuja el botón al fondo de la tira sin
   * importar cuántas secciones haya arriba. */
  margin-top: auto;
  min-height: var(--gcc-alto-control);
  padding: 6px 2px;
  border: none;
  border-top: 1px solid var(--gcc-borde);
  border-radius: 0 0 8px 8px;
  background: transparent;
  color: var(--gcc-muted);
  font-weight: 600;
  font-size: 10px;
  line-height: 1.15;
  cursor: pointer;
}
.nav-toggle:focus-visible, .nav-toggle:active { color: var(--gcc-fg); }
@media (hover: hover) { .nav-toggle:hover { color: var(--gcc-fg); } }
.nav-toggle-icono { display: inline-flex; transform: rotate(90deg); }

/* Plegada: la tira sale del flujo (el token de ancho se va a 0, así que
 * `body`, el cajón del negociador y la propia tira se recolocan solos) y
 * el botón se queda como una pestaña flotante en el mismo rincón. */
:root.nav-oculto { --gcc-nav-ancho: 0px; }

.nav-oculto .nav-lateral {
  width: auto;
  background: transparent;
  border-right: 0;
  padding: 0;
  overflow: visible;
  pointer-events: none;
}
.nav-oculto .nav-item { display: none; }

/* Se levanta por encima del asa del negociador (44px pegada al fondo):
 * sin esto los dos controles se apilan en el mismo rincón y la pestaña
 * le tapa la esquina izquierda al asa. Ancho 44px por la regla dura de
 * blancos de toque del proyecto. */
.nav-oculto .nav-toggle {
  pointer-events: auto;
  margin: 0 0 calc(54px + env(safe-area-inset-bottom, 0px)) 0;
  padding: 10px 10px 10px 6px;
  min-width: 44px;
  border: 1px solid var(--gcc-borde);
  border-left: 0;
  border-radius: 0 10px 10px 0;
  background: var(--gcc-superficie);
  color: var(--gcc-verde);
}
.nav-oculto .nav-toggle-icono { transform: rotate(-90deg); }
.nav-oculto .nav-toggle-etiqueta { display: none; }

/* --- cajón negociador (chat) -------------------------------------------- */

.negociador {
  position: fixed;
  /* Fase 5: sin barra inferior baja hasta el piso, pero arranca a la
   * derecha del sidebar para no taparlo (el asa quedaba encima de los
   * iconos de navegación). */
  left: var(--gcc-nav-ancho);
  right: 0;
  bottom: 0;
  z-index: 45;
  background: var(--gcc-superficie);
  border-top: 1px solid var(--gcc-borde);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

.negociador-asa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--gcc-alto-control);
  border: none;
  background: var(--gcc-superficie-elevada);
  color: var(--gcc-fg);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
}

.negociador-cuerpo {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.negociador-cuerpo[hidden] { display: none; }

.negociador-chevron { display: inline-flex; transition: transform .15s ease; }
.negociador[data-abierto="true"] .negociador-chevron { transform: rotate(180deg); }

/* --- chat: historial de burbujas ---------------------------------------- */

.chat-historial {
  flex: 1 1 auto;
  min-height: 160px;
  max-height: 40vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 4px;
}

.chat-fila { display: flex; }
.chat-fila--usuario { justify-content: flex-end; }
.chat-fila--sistema { justify-content: flex-start; }

.chat-burbuja {
  max-width: 88%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
}

.chat-burbuja--usuario {
  background: var(--gcc-superficie-elevada);
  border: 1px solid var(--gcc-borde);
  border-bottom-right-radius: 2px;
  font-family: var(--gcc-mono);
}

.chat-burbuja--sistema {
  background: var(--gcc-superficie-elevada);
  border: 1px solid var(--gcc-verde);
  border-bottom-left-radius: 2px;
}

.chat-burbuja--error {
  border-color: var(--gcc-rojo);
  background: var(--gcc-rojo-bg);
  color: var(--gcc-fg);
}

.chat-burbuja--confirmacion { border-color: var(--gcc-verde); }

.chat-burbuja p { margin: 0 0 4px; }
.chat-burbuja p:last-child { margin-bottom: 0; }

.chat-pensando {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--gcc-muted);
}

.chat-punto {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gcc-muted);
  animation: gcc-punto 1.1s infinite ease-in-out;
}

.chat-punto:nth-child(2) { animation-delay: .15s; }
.chat-punto:nth-child(3) { animation-delay: .3s; }

@keyframes gcc-punto {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

.chat-recotizacion-texto strong { color: var(--gcc-fg); }
.chat-recotizacion-detalle { color: var(--gcc-muted); }

.chat-recotizacion-botones { display: flex; gap: 8px; margin-top: 8px; }
.chat-recotizacion-botones .boton { flex: 1; min-height: 38px; font-size: 13px; padding: 0 10px; }

/* --- chat: MOCIÓN de último minuto (Fase 4a T7-UI) ----------------------
 * Burbuja del sistema en ámbar (urgente pero no error): motivos, tabla
 * corta de cambios y Aceptar/Descartar a 44px (brief: ≥44px, son la
 * decisión crítica de la semana y se tocan con prisa desde el teléfono).
 * Resuelta (aceptada/descartada/ya no pendiente) baja a gris y pierde
 * los botones; enfocada (llegó por `?mocion=` del push) trae un halo. */
.chat-burbuja--mocion {
  max-width: 96%;
  border-color: var(--gcc-ambar-borde);
  background: var(--gcc-ambar-bg);
}
.chat-burbuja--mocion-resuelta {
  opacity: .75;
  border-color: var(--gcc-borde);
  background: var(--gcc-superficie-elevada);
}
.chat-burbuja--enfocada { box-shadow: 0 0 0 2px var(--gcc-ambar); }

.chat-mocion-titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gcc-ambar);
}
.chat-mocion-titulo .chat-mocion-hace {
  margin-left: auto;
  font-family: var(--gcc-mono);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gcc-muted);
}
.chat-mocion-motivos { margin: 6px 0; padding-left: 18px; }
.chat-mocion-motivos li { margin: 2px 0; }

.chat-mocion-tabla {
  width: 100%;
  margin: 6px 0;
  border-collapse: collapse;
  font-family: var(--gcc-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.chat-mocion-tabla th,
.chat-mocion-tabla td { padding: 3px 8px 3px 0; text-align: left; border-bottom: 1px solid var(--gcc-borde); }
.chat-mocion-tabla th { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--gcc-muted); }
.chat-mocion-tabla strong,
.chat-mocion-survivor strong { color: var(--gcc-ambar); }

.chat-mocion-botones { display: flex; gap: 8px; margin-top: 10px; }
.chat-mocion-botones .boton { flex: 1; min-height: var(--gcc-alto-control); font-size: 14px; padding: 0 10px; }
.chat-mocion-estado { margin-top: 6px; font-style: italic; color: var(--gcc-muted); }

.chat-hora {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--gcc-muted);
  font-family: var(--gcc-mono);
}

/* --- chat: chips contextuales + constraints activas --------------------- */

.chat-chips-envoltura {
  padding: 6px 14px;
  border-top: 1px solid var(--gcc-borde);
}

.chat-chips-titulo {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gcc-muted);
}

.chat-chips-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.chat-chip-accion {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--gcc-azul);
  background: var(--gcc-azul-bg);
  color: var(--gcc-azul);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.chat-chip-accion:disabled { opacity: .45; }

/* --- chat: entrada de texto ---------------------------------------------- */

.chat-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--gcc-borde);
}

.chat-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--gcc-alto-control);
  padding: 0 12px;
  border: 1px solid var(--gcc-borde);
  border-radius: 999px;
  background: var(--gcc-superficie-elevada);
  color: var(--gcc-fg);
  font-size: 16px;  /* umbral de iOS: menos acerca la pantalla */
}

.chat-enviar {
  flex-shrink: 0;
  width: var(--gcc-alto-control);
  height: var(--gcc-alto-control);
  border-radius: 50%;
  background: var(--gcc-cta-bg);
  color: var(--gcc-cta-fg);
}

.chat-enviar:disabled { opacity: .45; }

/* ======================================================================
 * Vista 2 -- war room Survivor (piel sportsbook oscura)
 * ====================================================================== */

.tarjeta {
  border: 1px solid var(--gcc-borde);
  border-radius: var(--gcc-radio);
  background: var(--gcc-superficie);
  padding: 14px;
}

.tarjeta-etiqueta {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gcc-muted);
}

.sin-datos { color: var(--gcc-muted); font-size: 13px; }

.memo-survivor { display: flex; flex-direction: column; gap: 12px; }

.memo-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.memo-cabecera h2 { margin: 0; font-size: 17px; }

.tarjeta-recomendacion {
  cursor: pointer;
  background: var(--gcc-superficie-elevada);
  border-width: 2px;
  border-color: var(--gcc-verde); /* fallback -- colores.json puede pisarlo inline (borde del equipo) */
}

.recomendacion-cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.recomendacion-equipo-texto { min-width: 0; }

.recomendacion-equipo {
  margin: 0;
  font-family: var(--gcc-mono);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
}

.recomendacion-rival { margin: 2px 0 0; color: var(--gcc-muted); font-size: 13px; }

.recomendacion-momios {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.recomendacion-prosa { margin: 0; font-size: 13px; line-height: 1.5; color: var(--gcc-fg); }
.recomendacion-prosa strong { color: var(--gcc-verde); }

.alternativas-survivor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tarjeta-alternativa {
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.alternativa-cabecera { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.alternativa-equipo { font-family: var(--gcc-mono); font-weight: 700; font-size: 16px; }
.alternativa-rival { color: var(--gcc-muted); font-size: 12px; margin: 0 0 4px; }
.alternativa-metricas { font-family: var(--gcc-mono); font-size: 12px; color: var(--gcc-muted); margin: 0 0 4px; }
.alternativa-costo { font-family: var(--gcc-mono); font-weight: 700; font-size: 13px; }
.alternativa-costo--neg { color: var(--gcc-rojo); }
.alternativa-costo--pos { color: var(--gcc-verde); }

.ruta-futura {
  border: 1px solid var(--gcc-borde);
  border-radius: var(--gcc-radio);
  background: var(--gcc-superficie);
  padding: 4px 14px;
}

.ruta-futura summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--gcc-alto-control);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  list-style: none;
  color: var(--gcc-fg);
}

.ruta-futura summary::-webkit-details-marker { display: none; }
.ruta-futura-flecha { transition: transform .15s ease; }
.ruta-futura[open] .ruta-futura-flecha { transform: rotate(180deg); }

.ruta-futura-cuerpo { padding-bottom: 12px; font-size: 13px; }
.ruta-nota { color: var(--gcc-muted); margin: 0 0 8px; }
.ruta-lista { margin: 0; padding-left: 18px; }
.ruta-lista li { margin-bottom: 4px; font-family: var(--gcc-mono); }

/* --- constraints activas (chips arriba del input del chat) -------------- */

.negociador-constraints { padding: 8px 14px 0; border-top: 1px solid var(--gcc-borde); }
.negociador-constraints h3 { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gcc-muted); }

.constraints-lista { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.constraint-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--gcc-borde);
  border-radius: 8px;
  background: var(--gcc-superficie-elevada);
}

.constraint-texto { display: flex; flex-direction: column; min-width: 0; }
.constraint-detalle { font-family: var(--gcc-mono); font-size: 12px; font-weight: 700; }
.constraint-meta { font-size: 11px; color: var(--gcc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- modal de ayuda (glosario) ------------------------------------------- */

.ayuda-lista { margin: 0; padding: 0; }
.ayuda-item { border-bottom: 1px solid var(--gcc-borde); padding: 10px 0; }
.ayuda-item:last-child { border-bottom: none; }
.ayuda-termino { margin: 0 0 2px; font-weight: 700; font-family: var(--gcc-mono); color: var(--gcc-verde); }
.ayuda-explicacion { margin: 0; font-size: 13px; color: var(--gcc-fg); line-height: 1.4; }

/* --- menú de la app (Fase 4b): drawer lateral desde la derecha -----------
 * Perfil / Avisos / Usuarios (tabs arriba) + Ayuda / Salir al pie. Reusa
 * `.login-campo`/`.boton`/`.chip` (una sola definición de campo/botón/
 * chip para toda la app). Toda fila tocable mide >= 44px (`.menu-item`).
 * Móvil primero: < 480px el panel va a ancho completo. */

.menu[hidden] { display: none; }

.menu {
  position: fixed;
  inset: 0;
  z-index: 70;
}

.menu-fondo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
}

.menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(100%, 420px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--gcc-superficie);
  border-left: 1px solid var(--gcc-borde);
  padding: calc(12px + env(safe-area-inset-top, 0px)) 14px calc(14px + env(safe-area-inset-bottom, 0px));
  animation: menu-entrar .18s ease-out;
}

@keyframes menu-entrar {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-panel { animation: none; }
}

@media (max-width: 479px) {
  .menu-panel { width: 100%; border-left: none; }
  .btn-menu { max-width: 46vw; }
}

.menu-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.menu-identidad { display: flex; align-items: center; gap: 10px; min-width: 0; }
.menu-identidad .menu-avatar { width: 40px; height: 40px; font-size: 18px; }
.menu-identidad-texto { display: flex; flex-direction: column; min-width: 0; }

.menu-nombre {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--gcc-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-rol { font-size: 12px; color: var(--gcc-muted); }

.menu-tabs {
  display: flex;
  /* Con la pestaña Configuración ya son CUATRO (Perfil/Avisos/
     Configuración/Usuarios) y en el drawer angosto no caben en una
     línea: envuelven a una segunda fila en vez de desbordar y dejar la
     última cortada. Para el usuario no-admin (Usuarios va `hidden`) las
     tres siguen en una sola fila. */
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--gcc-borde);
  margin-bottom: 12px;
}

.menu-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--gcc-alto-control);
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--gcc-fg);
  font-weight: 600;
  font-size: 14px;
  text-align: left;
}

.menu-item:active { background: var(--gcc-fila-hover); }
@media (hover: hover) { .menu-item:hover { background: var(--gcc-fila-hover); } }

.menu-tab {
  /* base `auto` (no 0): así el ancho de partida es el del texto y el
     wrap de arriba decide de verdad cuándo bajar de fila */
  flex: 1 1 auto;
  justify-content: center;
  border-radius: 10px 10px 0 0;
  color: var(--gcc-muted);
}

.menu-tab[aria-pressed="true"] {
  color: var(--gcc-verde);
  box-shadow: inset 0 -2px 0 var(--gcc-verde);
}

.menu-tab[hidden] { display: none; }

.menu-cuerpo { flex: 1 1 auto; }
.menu-seccion[hidden] { display: none; }

.menu-pie {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--gcc-borde);
}

.menu-pie .menu-item { width: 100%; }
.menu-item--salir { color: var(--gcc-rojo); }

.menu-subtitulo {
  margin: 14px 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gcc-muted);
}

.menu-nota { margin: 0 0 10px; font-size: 13px; color: var(--gcc-muted); line-height: 1.4; }

/* Perfil */
.perfil-datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  margin: 0 0 12px;
  font-size: 14px;
}

.perfil-dato { display: contents; }
.perfil-datos dt { color: var(--gcc-muted); }
.perfil-datos dd { margin: 0; font-family: var(--gcc-mono); overflow-wrap: anywhere; }

.perfil-aviso {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--gcc-ambar-bg);
  border: 1px solid var(--gcc-ambar-borde);
  color: var(--gcc-ambar);
  font-size: 13px;
  font-weight: 600;
}

#perfil-btn-cambiar, #usuarios-btn-alta { width: 100%; margin-bottom: 10px; }

.cuenta-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.cuenta-form .boton { width: 100%; }
.cuenta-form .pie-botones .boton { width: auto; }
.cuenta-form[hidden] { display: none; }

.login-campo select {
  min-height: var(--gcc-alto-control);
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--gcc-borde);
  background: var(--gcc-superficie-elevada);
  color: var(--gcc-fg);
  font-size: 16px;  /* umbral de iOS: menos acerca la pantalla */
  font-family: inherit;
}

.campo-con-boton { display: flex; gap: 8px; }
.campo-con-boton input { flex: 1 1 auto; min-width: 0; }
.campo-con-boton .boton { flex: 0 0 auto; width: auto; }

.cuenta-mensaje {
  min-height: 18px;
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.cuenta-mensaje:empty { display: none; }
.cuenta-mensaje--error { color: var(--gcc-rojo); }
.cuenta-mensaje--exito { color: var(--gcc-verde); }

/* Avisos push (Fase 4a T3) -- bloque "En este dispositivo". */
.cuenta-avisos { display: flex; flex-direction: column; gap: 10px; }
.cuenta-avisos .boton { width: 100%; }
.cuenta-avisos-estado { margin: 0; font-size: 13px; color: var(--gcc-muted); line-height: 1.4; }
.cuenta-avisos-estado--exito { color: var(--gcc-verde); }
.cuenta-avisos-estado--error { color: var(--gcc-rojo); }
.cuenta-avisos-estado--aviso { color: var(--gcc-ambar, var(--gcc-fg)); }

/* --- Historial de avisos (D30) -------------------------------------------
 * Cada aviso es una TARJETA con la misma piel que la Pick'em, no una fila
 * con un filete de color: el cuerpo de una moción trae hasta 16 juegos y
 * antes se pintaba como Markdown crudo (pipes y asteriscos) en un párrafo
 * gris. Ahora el desglose usa el mismo badge de slot y los mismos escudos
 * que el acta, para que el número y el equipo se lean en el mismo lugar en
 * las dos pantallas. Las filas del desglose NO son tarjetas anidadas: son
 * renglones planos separados por un filete de 1px. */
.avisos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.aviso-tarjeta {
  padding: 12px;
  background: var(--gcc-superficie);
  border: 1px solid var(--gcc-borde);
  border-radius: var(--gcc-radio);
}

/* Urgente: el borde se tiñe de ámbar. NO se usa el filete interior de
 * 3px de `.tarjeta-juego--disputa`: allá la tarjeta mide un renglón, y
 * aquí una moción desplegada mide dieciséis -- una barra de ese alto
 * deja de ser un marcador y se vuelve decoración. El chip "urgente" de
 * la cabecera es quien lo dice con palabras. */
.aviso-tarjeta--urgente { border-color: var(--gcc-ambar); }
/* Sin leer: el borde se tiñe del verde de la paleta (mismo #22C55E que
 * el punto), no un color nuevo. */
.aviso-tarjeta--noleido { border-color: rgba(34, 197, 94, .38); }
.aviso-tarjeta--noleido .aviso-titulo { color: var(--gcc-fg); }

.aviso-cabecera { display: flex; align-items: center; gap: 8px; }
.aviso-punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gcc-verde); flex-shrink: 0;
}
.aviso-hace { margin-left: auto; font-size: 12px; color: var(--gcc-muted); white-space: nowrap; }

.aviso-titulo { display: block; margin-top: 8px; font-size: 15px; line-height: 1.3; }
.aviso-lead {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--gcc-muted);
}

.aviso-cuerpo {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--gcc-muted);
  line-height: 1.4;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.aviso-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--gcc-borde);
  font-size: 11px;
  color: var(--gcc-muted);
}

.aviso-canal { display: inline-flex; align-items: center; gap: 3px; }

/* -- cuerpo estructurado de una moción -- */
.mocion-resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--gcc-fg);
}
.mocion-resumen b { font-family: var(--gcc-mono); font-variant-numeric: tabular-nums; }
.mocion-resumen-igual { color: var(--gcc-muted); }

/* La hora de cierre es ABSOLUTA a propósito: el cuerpo del aviso trae
 * también una cuenta regresiva ("en 2959 min") calculada cuando se
 * envió, que releída en el historial días después miente. `mocion.js`
 * la separa y aquí no se pinta. */
.mocion-cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 6px;
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--gcc-ambar);
}
.mocion-cierre .gcc-icono { align-self: center; }
.mocion-cierre-nota { font-size: 11px; color: var(--gcc-muted); }

.mocion-abrir {
  width: 100%;
  min-height: var(--gcc-alto-control);
  margin-top: 10px;
  padding: 0 12px;
  background: var(--gcc-superficie-elevada);
  color: var(--gcc-fg);
  border: 1px solid var(--gcc-borde);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.mocion-abrir:focus-visible, .mocion-abrir:active { background: var(--gcc-fila-hover); }
@media (hover: hover) { .mocion-abrir:hover { background: var(--gcc-fila-hover); } }

.mocion-detalles[hidden] { display: none; }
.mocion-lista { list-style: none; margin: 10px 0 0; padding: 0; }

.mocion-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gcc-borde);
}
.mocion-fila:last-child { border-bottom: 0; }

/* Un juego que la moción deja igual sigue en la lista (el desglose es
 * el boleto propuesto COMPLETO, que es lo que se captura en Yahoo),
 * pero baja de jerarquía para que los que sí se mueven salten a la
 * vista. Se baja el PESO y el color del nombre, no la opacidad de la
 * fila: `opacity` sobre texto ya atenuado lo hunde a ~3:1 y deja de
 * cumplir AA -- un renglón menos importante sigue teniendo que leerse. */
.mocion-fila--igual .pick-equipo { color: var(--gcc-muted); font-weight: 600; }
.mocion-fila--igual .gcc-logo { opacity: .7; }

/* El badge hereda `.juego-slot` (mismo círculo mono de la Pick'em); aquí
 * solo se encoge para que quepan 16 renglones en un teléfono. */
.mocion-slot { width: 30px; height: 30px; font-size: 13px; }

.mocion-cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.mocion-pick { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mocion-pick .pick-equipo { font-size: 15px; }
.mocion-fila--pick .pick-equipo { color: var(--gcc-verde); }
.mocion-rival {
  font-size: 11px;
  color: var(--gcc-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mocion-detalle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 11px;
  color: var(--gcc-muted);
}
.mocion-era { display: inline-flex; align-items: center; gap: 3px; }
.mocion-era-equipo { font-family: var(--gcc-mono); }
.gcc-logo--mini { opacity: .55; }
.mocion-mov { font-variant-numeric: tabular-nums; }
.mocion-mov--sube { color: var(--gcc-verde); }

.mocion-motivos-titulo {
  margin: 12px 0 4px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gcc-muted);
}
.mocion-motivos {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gcc-muted);
}
.mocion-corrida {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--gcc-muted);
}
.mocion-corrida code { font-family: var(--gcc-mono); color: var(--gcc-fg); }

.chip--rojo { background: var(--gcc-rojo-bg); color: var(--gcc-rojo); border-color: var(--gcc-rojo); }

/* --- credenciales recién fijadas, con botón de compartir (D35) ---------
 * Verde porque es el resultado de una acción que salió bien, y con el
 * dato en monoespaciada y seleccionable: aunque el botón de compartir
 * falle, la contraseña se tiene que poder leer y copiar a mano de esta
 * pantalla -- es la única vez que existe en texto. */
.credencial {
  margin: 12px 0 0;
  padding: 12px;
  background: var(--gcc-verde-bg);
  border: 1px solid var(--gcc-verde);
  border-radius: var(--gcc-radio);
}
.credencial[hidden] { display: none; }

.credencial-titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gcc-verde);
}

.credencial-datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: 14px;
}
.credencial-datos dt { color: var(--gcc-muted); font-size: 12px; align-self: center; }
.credencial-datos dd {
  margin: 0;
  font-family: var(--gcc-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
  /* el armazón no se selecciona (D34); esto SÍ, es lo único que importa
   * poder copiar a mano si compartir falla. */
  -webkit-user-select: text;
  user-select: text;
}

.credencial-nota {
  margin: 10px 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--gcc-muted);
}
.credencial .boton { width: 100%; }

/* Usuarios (solo admin) */
.usuarios-lista { list-style: none; margin: 0; padding: 0; }
.usuario-fila { padding: 12px 0; border-bottom: 1px solid var(--gcc-borde); }
.usuario-fila--inactivo .usuario-nombre { color: var(--gcc-muted); text-decoration: line-through; }
.usuario-fila-cabecera { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.usuario-nombre { font-family: var(--gcc-mono); font-size: 15px; }
.usuario-meta { margin: 4px 0 8px; font-size: 12px; color: var(--gcc-muted); }
.usuario-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.usuario-acciones .boton { flex: 1 1 auto; font-size: 13px; padding: 0 10px; }
.menu-avatar--chico { width: 26px; height: 26px; font-size: 12px; }

@media (min-width: 480px) {
  .recomendacion-equipo { font-size: 36px; }
}

/* --- Fase 5 Módulo A (D23): pestaña Fantasy (Sleeper) -------------------- */
/* Móvil primero, misma piel sportsbook: tarjetas #161B26, verde al que
 * va ganando, ámbar para OUT/BYE, gris para "por jugar". */

#fantasy { display: grid; gap: 12px; }

.fantasy-encabezado h2 { margin: 0; font-size: 18px; }
.fantasy-sub { margin: 2px 0 0; font-size: 12px; color: var(--gcc-muted); }

/* tarjeta de conexión ("Conecta tu Sleeper") */
.fantasy-conectar { text-align: center; padding: 24px 16px; }
.fantasy-conectar h2 { margin: 8px 0 4px; font-size: 20px; }
.fantasy-conectar-icono { color: var(--gcc-ambar); }
.fantasy-conectar-texto { margin: 0 auto 14px; max-width: 420px; font-size: 14px; color: var(--gcc-muted); }
.fantasy-conectar-form { display: grid; gap: 10px; max-width: 320px; margin: 0 auto; text-align: left; }
.fantasy-conectar-form .boton {
  min-height: var(--gcc-alto-control);
  width: 100%;
}
.fantasy-conectar-nota { margin: 14px auto 0; max-width: 420px; font-size: 12px; color: var(--gcc-muted); }

/* Tarjeta de conexiones montada en menú > Configuración: mismo HTML que
   en la pestaña, pero el drawer es angosto -- todo a la izquierda y sin
   el marco de tarjeta (el panel del menú ya es el marco). */
.fantasy-conexiones {
  text-align: left;
  padding: 0;
  border: 0;
  background: none;
}
.fantasy-conexiones .fantasy-conectar-form,
.fantasy-conexiones .fantasy-conectar-texto,
.fantasy-conexiones .fantasy-conectar-nota,
.fantasy-conexiones .fantasy-espn-bloque { margin-left: 0; margin-right: 0; }

/* resumen de tres líneas: qué está conectado AHORA (Sleeper/ESPN/Yahoo) */
.fantasy-conex-resumen {
  list-style: none;
  margin: 0 0 14px;
  padding: 0 0 12px;
  display: grid;
  gap: 6px;
  border-bottom: 1px solid var(--gcc-borde);
}
.fantasy-conex-linea {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
}
.fantasy-conex-detalle { color: var(--gcc-muted); }

/* pestaña Fantasy sin ninguna fuente: bienvenida con el atajo al menú */
.fantasy-bienvenida .boton { max-width: 320px; margin: 0 auto; }

/* bloque "ESPN Fantasy" dentro de la tarjeta de conexión (D24) */
.fantasy-espn-bloque {
  margin: 18px auto 0;
  max-width: 420px;
  padding-top: 14px;
  border-top: 1px solid var(--gcc-borde);
  text-align: left;
}
.fantasy-fuente-titulo { margin: 0 0 6px; font-size: 14px; }
.fantasy-espn-conectado { margin: 0 0 8px; font-size: 13px; }
.fantasy-espn-instrucciones {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--gcc-borde);
  border-radius: 8px;
  font-size: 12px;
  color: var(--gcc-muted);
}
.fantasy-espn-pasos { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 6px; }
.fantasy-espn-nota { margin: 0; }

/* Entrega 5 (D26): Yahoo Pick'em. El header Cookie es larguisimo y de
   una sola linea, asi que va en <textarea> (un <input type=password> lo
   volveria imposible de revisar al pegarlo). Se oculta con
   -webkit-text-security -- disponible en Chrome/Safari, que es donde se
   saca la cookie; donde no lo esta, el texto se ve, pero NUNCA se
   rellena con lo guardado (el servidor no lo devuelve). */
.fantasy-secreto {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: 16px;  /* umbral de iOS: menos acerca la pantalla */
  -webkit-text-security: disc;
}
.fantasy-yahoo-advertencia { margin-top: 10px; font-size: 12px; color: var(--gcc-ambar); }
.fantasy-yahoo-lineas td:first-child { white-space: nowrap; }

/* chip chico con la plataforma de origen en cada tarjeta de liga */
.fantasy-fuente { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }

/* aviso por fuente caída (cookies caducadas / plataforma sin responder)
   arriba de las tarjetas que sí llegaron */
.fantasy-aviso-fuente { margin-bottom: 10px; }

/* tarjeta por liga */
.fantasy-liga { display: grid; gap: 10px; }
.fantasy-liga-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fantasy-liga-nombre { margin: 0; font-size: 16px; }
.fantasy-subtitulo { margin: 4px 0 0; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--gcc-muted); }

/* marcador grande de mi matchup (en vivo) */
.fantasy-marcador {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: var(--gcc-radio);
  background: var(--gcc-superficie-elevada);
  border: 1px solid var(--gcc-borde);
}
.fantasy-lado { display: grid; gap: 2px; text-align: center; min-width: 0; }
.fantasy-lado-nombre { font-size: 12px; color: var(--gcc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-lado-pts { font-size: 28px; font-weight: 700; }
.fantasy-lado--gana .fantasy-lado-pts { color: var(--gcc-verde); }
.fantasy-vs { font-size: 12px; color: var(--gcc-muted); }
.fantasy-sin-marcador { margin: 0; font-size: 13px; color: var(--gcc-muted); }

/* titulares */
.fantasy-titulares { list-style: none; margin: 0; padding: 0; }
.fantasy-titular {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--gcc-borde);
  font-size: 14px;
}
.fantasy-titular:last-child { border-bottom: none; }
.fantasy-titular-pos {
  flex: 0 0 34px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gcc-muted);
}
.fantasy-titular-nombre { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fantasy-titular-equipo { flex: 0 0 auto; font-size: 11px; color: var(--gcc-muted); }
.fantasy-titular-pts { flex: 0 0 52px; text-align: right; font-weight: 600; }
.fantasy-titular--sin-pts .fantasy-titular-pts { color: var(--gcc-muted); font-weight: 400; }
.fantasy-estado { flex: 0 0 auto; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; }
.fantasy-estado--gris { color: var(--gcc-muted); background: var(--gcc-fila-hover); }
.fantasy-estado--ambar { color: var(--gcc-ambar); background: var(--gcc-ambar-bg); }
.fantasy-banca { margin: 0; font-size: 12px; color: var(--gcc-muted); }

/* mini-tabla de standings: top 3 + mi fila resaltada */
.fantasy-standings { width: 100%; border-collapse: collapse; font-size: 13px; }
.fantasy-standings th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gcc-muted);
  padding: 4px 6px;
  border-bottom: 1px solid var(--gcc-borde);
}
.fantasy-standings td { padding: 5px 6px; border-bottom: 1px solid var(--gcc-borde); }
.fantasy-standings tbody tr:last-child td { border-bottom: none; }
.fantasy-standings-pts { text-align: right; }
.fantasy-standings th:last-child { text-align: right; }
.fantasy-standings-fila--mia td { background: var(--gcc-verde-bg); font-weight: 600; }

/* pie: actualizado hace X + acciones */
.fantasy-pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fantasy-actualizado { font-size: 12px; color: var(--gcc-muted); }
.fantasy-pie .boton { min-height: var(--gcc-alto-control); }
.fantasy-cambiar-enlace {
  border: none;
  background: transparent;
  color: var(--gcc-muted);
  font-size: 12px;
  text-decoration: underline;
  min-height: var(--gcc-alto-control);
  cursor: pointer;
}
.fantasy-error { position: static; }

/* --- sala de draft (Fase 5 Módulo A entrega 3, D24) -------------------- */
/* Solo lo estructural: hereda .tarjeta/.chip/.boton del resto de la PWA. */

.fantasy-draft-cabecera {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fantasy-draft-cabecera .boton { margin-left: auto; }
.fantasy-draft-contador { font-size: 0.85rem; color: var(--gcc-texto-suave, #8a8f98); }
.fantasy-draft-nota { font-size: 0.8rem; color: var(--gcc-texto-suave, #8a8f98); }

.fantasy-draft-recos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.fantasy-draft-reco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: 1px solid var(--gcc-borde, #2a2f3a);
  border-radius: 10px;
  text-align: center;
}
.fantasy-draft-reco-nombre { font-size: 0.8rem; font-weight: 600; }
.fantasy-draft-reco-meta,
.fantasy-draft-reco-rank,
.fantasy-draft-fila-meta,
.fantasy-draft-fila-adp { font-size: 0.75rem; color: var(--gcc-texto-suave, #8a8f98); }
.fantasy-draft-ganga { background: #b45309; color: #fff; } /* ámbar */

.fantasy-draft-foto {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gcc-borde, #2a2f3a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.fantasy-draft-foto img { width: 100%; height: 100%; object-fit: cover; }
.fantasy-draft-foto--chica { width: 28px; height: 28px; }
.fantasy-draft-iniciales { font-size: 0.7rem; font-weight: 700; }

.fantasy-draft-buscar {
  width: 100%;
  min-height: var(--gcc-alto-control, 44px);
  box-sizing: border-box;
  margin-bottom: 6px;
}
.fantasy-draft-lista,
.fantasy-draft-mios { list-style: none; margin: 0; padding: 0; }
.fantasy-draft-fila,
.fantasy-draft-mio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--gcc-borde, #2a2f3a);
}
.fantasy-draft-fila-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fantasy-draft-fila--vacia { color: var(--gcc-texto-suave, #8a8f98); font-size: 0.8rem; }

/* --- sidebar en pantalla ancha (Fase 5) ---------------------------------
 * Deja de ser una tira de iconos: ancho real, etiquetas legibles y
 * anclado arriba. La variable se redefine aquí, así que `body`,
 * `.negociador` y cualquier otro que la use se recolocan solos. */

@media (min-width: 768px) {
  :root { --gcc-nav-ancho: 184px; }

  .nav-lateral {
    gap: 4px;
    padding: 16px 10px;
  }

  .nav-toggle {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13px;
  }

  .nav-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 12px;
    font-size: 14px;
    text-align: left;
  }

  .nav-etiqueta--corta { display: none; }
  .nav-etiqueta--larga { display: inline; }
}

/* --- Fase 5: sección "Información" --------------------------------------
 * Prosa larga en un teléfono de 375px: columna con `max-width` en
 * ch (una línea de más de ~70 caracteres se vuelve incómoda de leer en
 * pantalla ancha) y tablas que JAMÁS desbordan -- van dentro de una
 * envoltura con scroll horizontal propio, así el que se desplaza es el
 * bloque de la tabla y nunca la página entera. */

#informacion { display: grid; gap: 14px; max-width: 70ch; }

/* Bug MEDIDO en navegador a 375px: la página entera se desplazaba en
 * horizontal (376px de contenido en 375 de pantalla) y el texto quedaba
 * cortado a la derecha. Causa: el tamaño mínimo automático de un item de
 * grid es su ancho MÍNIMO DE CONTENIDO, y la tabla de diferencias -- con
 * sus celdas numéricas `white-space: nowrap` -- lo empujaba a 312px,
 * estirando la columna y con ella TODAS las secciones. `min-width: 0`
 * devuelve el control al ancho disponible; la tabla se desplaza dentro de
 * su propia envoltura, que es justo lo que se buscaba. */
#informacion > * { min-width: 0; }

.info-encabezado h2 { margin: 0; font-size: 20px; }

.info-sub {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--gcc-muted);
}

.info-bloque {
  background: var(--gcc-superficie);
  border: 1px solid var(--gcc-borde);
  border-radius: var(--gcc-radio);
  padding: 14px;
}

.info-bloque h3 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gcc-muted);
}

.info-bloque p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.info-bloque p:last-child { margin-bottom: 0; }

/* el titular de cada bloque: la conclusión, antes que la evidencia */
.info-titular {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gcc-fg);
}

.info-nota {
  border-left: 2px solid var(--gcc-borde);
  padding-left: 10px;
  color: var(--gcc-muted);
}

/* el hallazgo didáctico (más puntos y cero pools) merece marco propio */
.info-destacado {
  background: var(--gcc-ambar-bg);
  border: 1px solid var(--gcc-ambar-borde);
  border-radius: 8px;
  padding: 12px;
  margin: 0 0 10px;
}

.info-destacado p { margin: 0; }

.info-lista { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.info-lista li { margin-bottom: 8px; }
.info-lista li:last-child { margin-bottom: 0; }

/* la envoltura es la que hace scroll, no la página */
.info-tabla-envoltura {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 10px;
}

.info-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.info-tabla caption {
  text-align: left;
  font-size: 12px;
  color: var(--gcc-muted);
  padding-bottom: 6px;
}

.info-tabla th,
.info-tabla td {
  border-bottom: 1px solid var(--gcc-borde);
  padding: 8px 4px;
  vertical-align: top;
}

.info-tabla thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--gcc-muted);
}

.info-tabla tbody th {
  text-align: left;
  font-weight: 600;
}

.info-tabla tbody tr:last-child th,
.info-tabla tbody tr:last-child td { border-bottom: none; }

/* números comparables: a la derecha y tabulares (regla dura del brief) */
.info-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

/* El rango SÍ puede partirse en dos líneas (hereda `nowrap` de
 * .info-num y hay que desactivarlo): medido a 375px, la tabla de
 * diferencias pedía 282px dentro de una envoltura de 258 y obligaba a
 * desplazarla a mano para leer la columna más importante. Partido en dos
 * renglones cabe entero y no hay nada que desplazar. */
.info-rango { font-weight: 400; color: var(--gcc-muted); white-space: normal; }

.info-fila-actual th,
.info-fila-actual td { color: var(--gcc-verde); }

.info-badge,
.info-lectura {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--gcc-muted);
  text-transform: none;
  letter-spacing: 0;
}