/* meteor.css — Capa de diseño PREMIUM compartida (deriva del mockup v3 aprobado).
 *
 * Suaviza la estética "terminal" (mayúsculas + monoespaciado + pesos 800) hacia
 * algo elegante y editorial: pesos ligeros, tarjetas suaves con aire, navegación
 * refinada, sombras sutiles. Se carga al FINAL de cada página para sobrescribir
 * el CSS local sin tener que tocar cada plantilla a mano. Una sola fuente → todas
 * las páginas suben de nivel a la vez.
 */

:root {
  --m-radius: 16px;
  --m-line: rgba(255, 255, 255, .07);
  --m-line2: rgba(255, 255, 255, .12);
  --m-cyan: #4fd8ff;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
}

/* ── Encabezados: editoriales, no "grito" ─────────────────────────────────── */
header h1, body > h1 {
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  font-size: clamp(20px, 3vw, 26px) !important;
  text-transform: none !important;
}
header small { letter-spacing: .01em !important; opacity: .92; font-size: 12px !important; }

/* ── Navegación: pills finas y consistentes (incluye el HUD del analista) ──── */
nav a, .hud-nav a {
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: .03em !important;
  text-transform: none !important;
  border-radius: 999px !important;
  padding: 8px 15px !important;
  border: 1px solid var(--m-line) !important;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
nav a:hover, .hud-nav a:hover {
  border-color: rgba(79, 216, 255, .5) !important;
  color: #d3ecf6 !important;
}
nav a.on, .hud-nav a.on {
  color: var(--m-cyan) !important;
  border-color: rgba(79, 216, 255, .55) !important;
  background: rgba(79, 216, 255, .08) !important;
}

/* ── Superficies / tarjetas: bordes suaves, aire, sombra sutil, radios grandes ─ */
.card, .game, .art, .gauge-card, .box, .summary, .h-stat,
.tvb-card, .game, #board, #pres, .pr-slide {
  border-radius: var(--m-radius) !important;
  border-color: var(--m-line) !important;
}
.card, .game, .art, .box { padding: 16px 18px !important; }
.card, .game, .art {
  background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0)) , #0b0f16 !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}
.card:hover, .game:hover, .art:hover {
  border-color: var(--m-line2) !important;
  transform: translateY(-1px);
}

/* ── Chips de filtro / etiquetas: más suaves, menos "monoespaciado duro" ───── */
.filters button, .paper {
  border-radius: 999px !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
.filters button.on, .paper:hover { border-color: rgba(79, 216, 255, .5) !important; }

/* Textos introductorios / subtítulos: legibles, no monoespaciado apretado */
.sub, .intro, .disc, header small {
  font-family: "Inter", sans-serif !important;
}
.sub { letter-spacing: .01em !important; }

/* Botones principales (enviar, CTA): redondeados premium */
button[type="submit"], .btn, .pm-open, .out .cta {
  border-radius: 999px !important;
}

/* Scrollbar fino y elegante (WebKit) */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── Polish v2: profundidad + refinamientos ───────────────────────────────── */

/* Fondo con luz ambiental sutil (en vez de negro plano) — da sensación premium */
body {
  background:
    radial-gradient(1150px 620px at 80% -10%, rgba(79, 216, 255, .07), transparent 60%),
    radial-gradient(950px 540px at 8% 110%, rgba(68, 224, 164, .05), transparent 58%),
    #05070b !important;
  background-attachment: fixed !important;
}

/* Tarjetas: realce interior sutil + transición suave al pasar el cursor */
.card, .game, .art, .box, .gauge-card, .summary {
  box-shadow: 0 12px 34px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

/* Micro-etiquetas a Inter (menos "terminal"); los NÚMEROS se quedan en mono */
.g-lab, .panel-tag, .papers-lbl, .sec-h span, .stat span, .h-stat span,
.pr-title, .tvs-title, .summary span {
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
}

/* Cinta de marcadores superior: más discreta y elegante */
#scores-banner { background: rgba(7, 10, 15, .82) !important; backdrop-filter: blur(8px); }
#scores-banner .sc-lbl { background: transparent !important; color: var(--m-cyan) !important; }

/* Inputs (composer del analista, formularios): pill premium */
#text-input, input[type="text"], input[type="email"], input[type="password"], input[type="search"] {
  border-radius: 14px !important;
}

/* Aparición suave del contenido al cargar */
.wrap, #intel { animation: m-fade .42s ease both; }
@keyframes m-fade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* Transición suave al cambiar de sección: la página entra con un fundido en vez
   de "parpadear" en blanco. Solo opacidad (un transform en body rompería los
   elementos fixed/sticky como la cinta y el botón atrás). */
@keyframes m-page-in { from { opacity: 0; } to { opacity: 1; } }
body { animation: m-page-in .28s ease both; }

/* ── Iconos de navegación (línea, estilo Lucide) — una sola fuente para todas ── */
nav a::before, .hud-nav a::before {
  content: ""; display: inline-block; width: 14px; height: 14px;
  vertical-align: -2px; margin-right: 7px; background-color: currentColor;
  opacity: .92; flex: 0 0 auto;
  -webkit-mask: var(--ic) center / contain no-repeat;
          mask: var(--ic) center / contain no-repeat;
}
nav a, .hud-nav a { display: inline-flex !important; align-items: center; }

nav a[href="/analyst"], .hud-nav a[href="/analyst"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
nav a[href="/board"], .hud-nav a[href="/board"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }
nav a[href="/comparador"], .hud-nav a[href="/comparador"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E"); }
nav a[href="/mis-picks"], .hud-nav a[href="/mis-picks"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); }
nav a[href="/polymarket"], .hud-nav a[href="/polymarket"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); }
nav a[href="/tipsters"], .hud-nav a[href="/tipsters"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
nav a[href="/news"], .hud-nav a[href="/news"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/%3E%3Cpath d='M18 14h-8'/%3E%3Cpath d='M15 18h-5'/%3E%3Cpath d='M10 6h8v4h-8z'/%3E%3C/svg%3E"); }
nav a[href="/bankroll"], .hud-nav a[href="/bankroll"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12V7H5a2 2 0 0 1 0-4h14v4'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h16v-5'/%3E%3Cpath d='M18 12a2 2 0 0 0 0 4h4v-4z'/%3E%3C/svg%3E"); }
nav a[href="/transparency"], .hud-nav a[href="/transparency"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='20' x2='12' y2='10'/%3E%3Cline x1='18' y1='20' x2='18' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='16'/%3E%3C/svg%3E"); }
nav a[href="/terms"], .hud-nav a[href="/terms"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E"); }

nav a[href="/account"], .hud-nav a[href="/account"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }

/* Sesión iniciada: tu nombre en verde (eres tú) + botón SALIR con icono de salida. */
nav a.nav-me, .hud-nav a.nav-me { color: #44e0a4 !important; border-color: rgba(68,224,164,.5) !important; }
nav a.nav-out, .hud-nav a.nav-out { color: #9aa7b8 !important;
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E"); }
nav a.nav-out:hover, .hud-nav a.nav-out:hover { color: #ff8a8a !important; border-color: rgba(255,104,104,.45) !important; }

/* ── Icono del título de cada sección (mismo trazo que el menú) ────────────── */
.h1ic {
  width: 1em; height: 1em; flex: 0 0 auto;
  vertical-align: -.14em; margin-right: .42em;
  color: var(--m-cyan); opacity: .95;
}

/* ── Chips de inicio rápido del analista (llenan el vacío + guían al usuario) ─ */
#chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 2px 4px;
  animation: m-fade .4s ease both; }
#chips .chip {
  font: 500 12.5px "Inter", sans-serif; color: #cfe8f2;
  background: linear-gradient(180deg, rgba(79,216,255,.08), rgba(79,216,255,.03));
  border: 1px solid rgba(79,216,255,.22); border-radius: 999px;
  padding: 9px 15px; cursor: pointer; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}
#chips .chip:hover {
  border-color: rgba(79,216,255,.6); color: #eaf7fc; transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(79,216,255,.14), rgba(79,216,255,.05));
}

/* ── Menú superior fijo (sticky): se queda visible al hacer scroll ─────────── */
/* No toca el HUD del analista (#hud), que tiene su propio layout a pantalla. */
header:not(#hud) {
  position: sticky; top: 0; z-index: 40;
  background: rgba(5, 7, 11, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--m-line);
}
/* Si la página tiene la cinta de marcadores (sticky, 34px arriba), el menú
   se pega justo debajo de ella en vez de encimarse. */
#scores-banner ~ header:not(#hud) { top: 34px; }

/* ── MÓVIL: el menú de 14 enlaces NO debe apilarse y comerse la pantalla ──────
   En teléfono pasa a UNA fila que se desliza de lado (swipe), así el contenido
   se ve de inmediato. !important para ganarle al CSS inline de cada página. */
@media (max-width: 640px) {
  header, #hud { padding: 12px 14px 8px !important; gap: 10px !important; }
  nav, .hud-nav {
    flex-wrap: nowrap !important;          /* una sola fila */
    overflow-x: auto !important;           /* deslizable de lado */
    -webkit-overflow-scrolling: touch;
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    padding-bottom: 4px;
    scrollbar-width: none;                 /* Firefox: sin barra */
    -ms-overflow-style: none;
  }
  nav::-webkit-scrollbar, .hud-nav::-webkit-scrollbar { display: none; }  /* WebKit */
  nav a, .hud-nav a, nav button, .hud-nav button {
    white-space: nowrap !important;
    flex: 0 0 auto !important;             /* no se encogen, no envuelven */
  }
  header h1 { font-size: 22px !important; }
}