/* NexoBets · sistema de diseño común (portada, entrada, app, administrador, términos) */

:root {
  --bg: #07090d;
  --bg2: #0c0f15;
  --card: #12161e;
  --card2: #181d27;
  --vidrio: rgba(18, 22, 30, .72);
  --line: #232a37;
  --line2: #2e3646;
  --text: #eef1f6;
  --muted: #98a2b3;
  --tenue: #6b7486;
  --green: #22c55e;
  --green2: #4ade80;
  --green-bg: rgba(34, 197, 94, .12);
  --accent: #4f8cff;
  --accent-bg: rgba(79, 140, 255, .12);
  --amber: #fbbf24;
  --amber-bg: rgba(251, 191, 36, .10);
  --red: #f87171;
  --red-bg: rgba(248, 113, 113, .10);
  --live: #fb7185;
  --radio: 16px;
  --sombra: 0 24px 60px rgba(0, 0, 0, .45);
  --brillo: linear-gradient(135deg, #22c55e 0%, #4ade80 45%, #4f8cff 100%);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 15px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
::selection { background: rgba(34, 197, 94, .35); }

/* ── Fondo fotográfico difuminado (portada, entrada, cabeceras) */
.fondo { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.fondo img { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(14px) saturate(1.15) brightness(.55); transform: scale(1.05); }
.fondo::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(1200px 500px at 80% -10%, rgba(79, 140, 255, .22), transparent 60%),
  radial-gradient(900px 500px at 0% 0%, rgba(34, 197, 94, .18), transparent 60%),
  linear-gradient(180deg, rgba(7, 9, 13, .35) 0%, rgba(7, 9, 13, .82) 70%, var(--bg) 100%); }
.fondo.nitido img { filter: blur(4px) saturate(1.1) brightness(.5); }

/* ── Marca */
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -.3px; color: var(--text); text-decoration: none; }
.marca img { width: 32px; height: 32px; border-radius: 9px; }
.marca b { background: var(--brillo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.degradado { background: var(--brillo); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Botones */
.btn, button { font: inherit; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 15px; border-radius: 11px; border: 1px solid var(--line2); background: var(--card2); color: var(--text); cursor: pointer;
  text-decoration: none; transition: transform .12s, background .15s, border-color .15s, box-shadow .15s; }
.btn:hover, button:hover { border-color: #3b4558; }
.btn:active, button:active { transform: translateY(1px); }
.btn.primario, button.primario { background: var(--green); border-color: var(--green); color: #04210f; box-shadow: 0 8px 24px rgba(34, 197, 94, .28); }
.btn.primario:hover, button.primario:hover { background: var(--green2); }
.btn.azul, button.azul { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.grande { padding: 14px 24px; font-size: 16px; border-radius: 13px; }
.btn.fantasma, button.fantasma { background: transparent; }
.btn.peligro, button.peligro { color: var(--red); }
button:disabled { opacity: .55; cursor: default; }

/* ── Tarjetas y vidrio */
.tarjeta { background: var(--card); border: 1px solid var(--line); border-radius: var(--radio); padding: 18px; }
.vidrio { background: var(--vidrio); border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--radio);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); }

/* ── Indicadores (KPIs) */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.kpi { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); border-radius: var(--radio); padding: 18px 18px 16px; }
.kpi .etq { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.kpi .val { font-size: 30px; font-weight: 800; letter-spacing: -.8px; margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi .sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.kpi.verde .val { color: var(--green2); } .kpi.rojo .val { color: var(--red); } .kpi.azul .val { color: var(--accent); }
.kpi::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 197, 94, .14), transparent 70%); }
.kpi.azul::after { background: radial-gradient(circle, rgba(79, 140, 255, .16), transparent 70%); }

/* ── Chips, etiquetas y formularios */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; }
.chip.ok { background: var(--green-bg); color: var(--green2); } .chip.no { background: var(--red-bg); color: var(--red); }
.chip.casi { background: var(--amber-bg); color: var(--amber); } .chip.info { background: var(--accent-bg); color: var(--accent); }
input, select, textarea { font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 11px; background: var(--bg2); color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 140, 255, .18); }
label.campo { display: grid; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600; min-width: 0; }
label.campo input, label.campo select { width: 100%; min-width: 0; }

/* ── Tablas */
table.tabla { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
table.tabla th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--tenue); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line); }
table.tabla td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.tabla tr:last-child td { border-bottom: 0; }
table.tabla tr:hover td { background: rgba(255, 255, 255, .015); }
.num { text-align: right; }

/* ── Utilidades */
.muted { color: var(--muted); } .tenue { color: var(--tenue); }
.ganas { color: var(--green2); } .pierdes { color: var(--red); }
.vivo { color: var(--live); font-weight: 700; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--tenue); display: inline-block; flex: none; }
.punto.ok { background: var(--green); box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); animation: latido 2s infinite; }
.punto.mal { background: var(--red); }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } 60% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } }
.vacio { text-align: center; color: var(--muted); padding: 56px 16px; }
.vacio .icono { font-size: 36px; display: block; margin-bottom: 8px; }
.oculto { display: none !important; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Lo oculto siempre se oculta (aunque un estilo le dé display) */
[hidden] { display: none !important; }