/* TVWARS - sistema de diseno. Generado por gc_base.py.
   No editar a mano: los cambios se pierden al regenerar. */

:root {
  --fondo: #0B0D12; --fondo-2: #0E1116; --panel: #14171F; --panel-alto: #1B1F29;
  --linea: #262B36; --texto: #EDEEF2; --texto-2: #9CA1AD; --texto-3: #71767F;
  --marca: #FCC001; --marca-claro: #FED03C; --marca-2: #FA8707; --marca-tenue: rgba(252,192,1,.14); --marca-borde: rgba(252,192,1,.4);
  --bien: #4FB584; --bien-tenue: rgba(79,181,132,.14);
  --mal: #E5564C; --mal-tenue: rgba(229,86,76,.14);
}
* { box-sizing: border-box; }
/* auth.js aplica y quita esta clase para conmutar los estados con/sin
   sesión. Sin esta regla, todos los estados se ven a la vez. */
.oculto, .hidden { display: none !important; }
body { margin:0; background:var(--fondo); color:var(--texto); font-family:'Inter',sans-serif; position:relative; min-height:100vh; display:flex; flex-direction:column; }
body > main, body > .contenedor, body > div:not(.auth-modal) { flex:1 0 auto; }
body::before {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(ellipse 900px 500px at 12% -5%, rgba(252,192,1,.11), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 20%, rgba(250,135,7,.07), transparent 55%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
}
h1,h2,h3 { font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:800; letter-spacing:.01em; margin:0; }
a:not(.btn):not(.tab) { color:var(--marca); text-decoration:none; transition:color .12s ease; }
a:not(.btn):not(.tab):hover { color:var(--marca-claro); text-decoration:underline; }
a:not(.btn):not(.tab):visited { color:var(--marca); }
.topbar { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:40px; height:72px; padding-left:36px; padding-right:44px; background:var(--fondo-2); border-bottom:1px solid var(--linea); flex-shrink:0; }
.marca { display:flex; align-items:center; gap:14px; flex-shrink:0; padding-right:8px; }
.marca img { width:40px; height:40px; }
.marca span { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.25rem; letter-spacing:.02em; color:var(--marca); text-transform:uppercase; }
.tabs { display:flex; height:100%; gap:2px; flex:1; }
.tab { display:flex; align-items:center; padding-inline:20px; font-weight:700; font-size:.88rem; text-transform:uppercase; letter-spacing:.02em; color:var(--texto-2); text-decoration:none; cursor:pointer; }
.tab:hover { color:var(--texto); background:var(--panel-alto); }
.tab.activo { color:var(--fondo); background:var(--marca); }
.acciones { display:flex; align-items:center; gap:20px; flex-shrink:0; padding-left:8px; margin-left:auto; }
#accionesSinSesion { gap:16px; }
/* El nombre de usuario necesita su propio aire: pegado al boton de salir
   se lee como si fuera parte del boton. */
/* Bloque de usuario con sesion: separado del resto por una linea, con
   aire propio a ambos lados para que el nombre no se lea como parte del
   boton de salir. */
/* Bloque de usuario con sesión. TODO su espaciado se define aquí: si se
   pone un style en línea en el HTML, pisa estas reglas y deja de poder
   ajustarse desde el sistema de diseño. */
#topbarUsername {
  white-space:nowrap;
  font-size:.95rem;
  font-weight:700;
  color:var(--texto);
  margin-right:12px;
}
#accionesConSesion { gap:16px; margin-left:16px; padding-left:24px; border-left:1px solid var(--linea); }
#accionesSinSesion { gap:16px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:.88rem; padding:10px 22px; border-radius:6px; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:transform .12s ease, filter .12s ease; }
.btn:hover { transform:translateY(-1px); filter:brightness(1.08); }
.btn-1 { background:var(--marca); color:#14100A; }
.btn-2 { background:transparent; color:var(--marca); border-color:var(--marca-borde); }
.btn-2:hover { background:var(--marca-tenue); }
.btn-borde { background:transparent; color:var(--texto); border:1px solid var(--linea); }
.btn-borde:hover { border-color:var(--marca); color:var(--marca-claro); }
.contenedor { max-width:1280px; margin-inline:auto; padding-inline:32px; }
.seccion { padding-block:48px; }
.rotulo { font-family:'IBM Plex Mono',monospace; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--marca); margin-bottom:8px; }
h2.titulo2 { font-size:2rem; margin-bottom:8px; }
.tarjeta { background:var(--panel); border:1px solid var(--linea); border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,.35); padding:28px; }
.bento { display:grid; grid-template-columns:repeat(12,1fr); gap:24px; }
.col-3{grid-column:span 3;} .col-4{grid-column:span 4;} .col-6{grid-column:span 6;} .col-8{grid-column:span 8;} .col-9{grid-column:span 9;} .col-12{grid-column:span 12;}
.insignia { display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; padding:5px 12px; border-radius:4px; }
.insignia-bien { border:1px solid rgba(79,181,132,.4); background:var(--bien-tenue); color:var(--bien); }
.insignia-mal { border:1px solid rgba(229,86,76,.4); background:var(--mal-tenue); color:var(--mal); }
.insignia-marca { border:1px solid var(--marca-borde); background:var(--marca-tenue); color:var(--marca); }
.tabla { width:100%; border-collapse:collapse; }
.tabla th { font-family:'IBM Plex Mono',monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; text-align:left; color:var(--texto-3); padding:10px 12px; border-bottom:1px solid var(--linea); }
.tabla td { padding:14px 12px; border-bottom:1px solid var(--linea); font-size:.92rem; vertical-align:middle; }
.tabla tr:hover td { background:var(--panel-alto); }
.num { font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; text-align:right; }
.anillo-nivel { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; border:2px solid var(--marca); background:var(--panel-alto); font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:.78rem; color:var(--marca); flex-shrink:0; }
.avatar-mini { width:32px; height:32px; border-radius:50%; background:var(--panel-alto); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--texto-3); flex-shrink:0; }
.rejilla-form { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.campo label { display:block; font-family:'IBM Plex Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--texto-3); margin-bottom:8px; }
.entrada { width:100%; background:var(--panel-alto); border:1px solid var(--linea); border-radius:6px; padding:11px 14px; color:var(--texto); font-family:'Inter',sans-serif; font-size:.95rem; }

/* --- TVWARS PRO: precio y ventajas --- */
.precio-bloque { display:flex; align-items:baseline; gap:8px; margin:20px 0 36px; }
.precio-cifra {
  font-family:'Barlow Condensed',sans-serif; font-size:3.2rem; font-weight:800;
  color:var(--marca); line-height:1;
}
.precio-periodo { color:var(--texto-3); font-size:1.05rem; }
.tarjeta-pro { border-color:var(--marca-borde); }
.tarjeta-pro h3 { font-size:1rem; color:var(--marca); margin-bottom:14px; }
.lista-pro { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.lista-pro li {
  color:var(--texto-2); font-size:.92rem; line-height:1.5;
  padding-left:22px; position:relative;
}
.lista-pro li::before {
  content:''; position:absolute; left:0; top:.5em;
  width:8px; height:8px; border-radius:50%;
  background:var(--marca);
}

/* --- Demostración visual del anti-cheat (portada) --- */
.demo-comparativa { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.demo-lado { display:flex; flex-direction:column; gap:12px; }
.demo-etiqueta {
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.08em; padding:6px 12px; border-radius:4px; align-self:flex-start;
}
.demo-mal { border:1px solid rgba(229,86,76,.4); background:var(--mal-tenue); color:var(--mal); }
.demo-bien { border:1px solid rgba(79,181,132,.4); background:var(--bien-tenue); color:var(--bien); }
.demo-radar {
  position:relative; aspect-ratio:4/3; background:var(--fondo-2);
  border:1px solid var(--linea); border-radius:10px; overflow:hidden;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:28px 28px;
}
.demo-punto { position:absolute; width:12px; height:12px; border-radius:50%; transform:translate(-50%,-50%); }
.demo-yo {
  top:50%; left:50%; background:var(--marca);
  box-shadow:0 0 0 4px rgba(252,192,1,.2);
}
.demo-rival { background:var(--mal); box-shadow:0 0 0 3px rgba(229,86,76,.18); }
/* Se apoya abajo, no centrado: en el centro está el punto del jugador y el
   texto se le montaba encima. */
.demo-vacio {
  position:absolute; left:0; right:0; bottom:16px; text-align:center;
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--texto-3); pointer-events:none;
}
.demo-pie { color:var(--texto-2); font-size:.88rem; line-height:1.5; margin:0; }
@media (max-width:720px) { .demo-comparativa { grid-template-columns:1fr; } }

/* --- Ficha de jugador (perfil) --- */
.ficha-jugador { display:flex; flex-direction:column; gap:24px; }
.ficha-identidad { display:flex; align-items:center; gap:18px; }
.ficha-nivel { width:52px; height:52px; font-size:1.15rem; border-width:3px; }
.ficha-nombre { font-family:'Barlow Condensed',sans-serif; font-size:1.6rem; font-weight:800; text-transform:uppercase; line-height:1; }
.ficha-rol { font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.1em; color:var(--texto-3); margin-top:4px; }
.ficha-datos { display:flex; gap:40px; flex-wrap:wrap; }
.ficha-datos > div { display:flex; flex-direction:column; gap:2px; }
.ficha-cifra { font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; font-size:1.5rem; font-weight:700; color:var(--texto); line-height:1; }
.ficha-pie { color:var(--texto-3); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:560px) { .ficha-datos { gap:24px; } .ficha-cifra { font-size:1.25rem; } }

/* --- Barra de actividad de la portada --- */
.barra-actividad {
  display:flex; align-items:center; justify-content:center; gap:48px; flex-wrap:wrap;
  padding:20px 32px; background:var(--fondo-2);
  border-bottom:1px solid var(--linea);
}
.actividad-item { display:flex; align-items:baseline; gap:8px; }
.actividad-cifra {
  font-family:'Barlow Condensed',sans-serif; font-size:1.6rem; font-weight:800;
  color:var(--marca); line-height:1;
}
.actividad-pie { color:var(--texto-3); font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:700px) { .barra-actividad { gap:24px; padding:16px; } .actividad-cifra { font-size:1.3rem; } }

/* --- Jugar: selector de modo y veto de mapas --- */
.modo-btn { text-align:left; cursor:pointer; font-family:inherit; color:inherit; transition:border-color .12s ease, box-shadow .12s ease; }
.modo-btn:hover { border-color:var(--marca-borde); }
.modo-btn.modo-activo { border-color:var(--marca); box-shadow:0 0 0 1px var(--marca); }
.mapa-veto {
  background:var(--panel-alto); border:1px solid var(--linea); border-radius:8px;
  padding:22px 12px; text-align:center; font-weight:700; text-transform:uppercase;
  font-size:.85rem; color:var(--texto); cursor:pointer; font-family:inherit;
  transition:border-color .12s ease, transform .12s ease;
}
.mapa-veto:not(:disabled):hover { border-color:var(--marca); transform:translateY(-2px); }
.mapa-veto:disabled { cursor:default; }
.mapa-veto.baneado { opacity:.35; text-decoration:line-through; border-color:var(--mal); }

/* --- FAQ desplegable (soporte) --- */
details.tarjeta summary { list-style:none; position:relative; padding-right:28px; color:var(--texto); }
details.tarjeta summary::-webkit-details-marker { display:none; }
details.tarjeta summary::after {
  content:'+'; position:absolute; right:0; top:50%; transform:translateY(-50%);
  color:var(--marca); font-size:1.3rem; line-height:1; font-weight:400;
}
details.tarjeta[open] summary::after { content:'−'; }
details.tarjeta summary:hover { color:var(--marca); }
details.tarjeta p { margin:0; }

/* --- Footer del sitio --- */
.pie-sitio { border-top:1px solid var(--linea); background:var(--fondo-2); margin-top:auto; flex-shrink:0; }
.pie-contenedor { max-width:1280px; margin-inline:auto; padding:48px 32px 32px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
.pie-col { display:flex; flex-direction:column; gap:10px; }
.pie-marca { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.3rem; color:var(--marca); text-transform:uppercase; }
.pie-col p { color:var(--texto-3); font-size:.88rem; line-height:1.6; max-width:32ch; }
.pie-titulo { font-family:'IBM Plex Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--texto-3); margin-bottom:4px; }
.pie-col a { color:var(--texto-2); font-size:.9rem; text-decoration:none; }
.pie-col a:hover { color:var(--marca); }
.pie-legal { max-width:1280px; margin-inline:auto; padding:20px 32px; border-top:1px solid var(--linea); color:var(--texto-3); font-size:.8rem; }

/* --- Responsive: los grids fijos colapsan en pantallas estrechas --- */
@media (max-width:900px) {
  .topbar { gap:20px; padding-inline:18px; height:64px; }
  .marca span { font-size:1.1rem; }
  .acciones { gap:10px; }
  .tabs { overflow-x:auto; }
  .tab { padding-inline:14px; font-size:.82rem; }
  .contenedor { padding-inline:16px; }
  .bento { grid-template-columns:repeat(6,1fr); gap:16px; }
  .col-3,.col-4,.col-6,.col-8,.col-9 { grid-column:span 6; }
  .pie-contenedor { grid-template-columns:1fr 1fr; padding-inline:16px; }
  .rejilla-form { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .bento { grid-template-columns:1fr; }
  .col-3,.col-4,.col-6,.col-8,.col-9 { grid-column:span 1; }
  .pie-contenedor { grid-template-columns:1fr; }
  .acciones .btn { padding:8px 14px; font-size:.8rem; }
}