/* =====================================================================
   GOM BRAND KIT · Herramientas Game Over México
   Identidad compartida con gom_integral (verde ácido + negro + magenta)
   Este archivo se carga DESPUÉS del CSS propio de cada herramienta:
   redefine sus tokens para que sus componentes adopten la paleta GOM.
   No editar por herramienta — es idéntico en las 7.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Outfit:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap');

/* ── Paleta canónica ── */
:root{
  --gom-bg:#050505;
  --gom-panel:#0b0b0e;
  --gom-panel-2:#121218;
  --gom-panel-3:#181820;
  --gom-green:#39ff14;
  --gom-green-2:#80ff50;
  --gom-green-dim:rgba(57,255,20,.12);
  --gom-purple:#7b2ff7;
  --gom-purple-2:#a06bff;
  --gom-pink:#ff0077;
  --gom-red:#ff2020;
  --gom-text:#e8e8e0;
  --gom-muted:#7c7c86;
  --gom-line:rgba(57,255,20,.22);
  --gom-line-soft:rgba(255,255,255,.08);
  --gom-font-body:'Outfit',system-ui,-apple-system,sans-serif;
  --gom-font-display:'Bangers','Impact',sans-serif;
  --gom-font-label:'Space Grotesk',ui-monospace,monospace;
  --gom-topbar-h:64px;
}

/* ── Puente de tokens: los nombres que ya usan las herramientas ──
   Así los componentes existentes se repintan solos sin tocar su CSS. */
:root{
  --bg:var(--gom-bg);
  --bg2:var(--gom-panel);
  --bg3:var(--gom-panel-2);
  --bg-base:var(--gom-bg);
  --bg-deep:#020202;
  --bg-card:var(--gom-panel);
  --bg-card-hover:var(--gom-panel-2);
  --bg-input:#08080a;
  --bg-overlay:rgba(5,5,5,.94);
  --body-bg:var(--gom-bg);
  --card-bg:var(--gom-panel);
  --header-bg:#020202;
  --panel:var(--gom-panel);
  --panel2:var(--gom-panel-2);

  --text:var(--gom-text);
  --text-primary:var(--gom-text);
  --text-muted:var(--gom-muted);
  --muted:var(--gom-muted);

  --line:var(--gom-line);
  --border:var(--gom-line);
  --border-base:var(--gom-line);
  --border-hover:rgba(57,255,20,.45);
  --border-active:var(--gom-green);

  --primary:var(--gom-green);
  --primary-hover:var(--gom-green-2);
  --accent:var(--gom-green);
  --accent2:var(--gom-purple-2);
  --blue:var(--gom-green);
  --blue-dim:var(--gom-green-2);
  --violet:var(--gom-purple);
  --violet-dim:var(--gom-purple);
  --green:var(--gom-green);
  --yellow:var(--gom-green);
  --amber:var(--gom-green-2);
  --orange:var(--gom-pink);
  --pink:var(--gom-pink);
  --purple:var(--gom-purple-2);
  --red:var(--gom-red);
  --danger:var(--gom-red);
  --danger-hover:#ff5555;
  --success:var(--gom-green);

  --grad-primary:linear-gradient(135deg,#7b2ff7 0%,#39ff14 100%);
  --grad-subtle:linear-gradient(135deg,rgba(123,47,247,.16) 0%,rgba(57,255,20,.12) 100%);
  --grad-glow:linear-gradient(135deg,rgba(123,47,247,.4) 0%,rgba(57,255,20,.35) 100%);

  --font-head:var(--gom-font-label);
  --font-body:var(--gom-font-body);

  --radius:2px;
  --radius-sm:2px;
  --shadow:0 8px 30px rgba(0,0,0,.7);
  --shadow-md:0 14px 44px rgba(0,0,0,.8);
  --shadow-lg:0 22px 70px rgba(0,0,0,.9);
}

/* ── Base ── */
html.gom-branded{background:var(--gom-bg);}
body.gom-branded{
  background:
    radial-gradient(ellipse at -10% -5%, rgba(123,47,247,.16), transparent 38%),
    radial-gradient(ellipse at 110% 102%, rgba(57,255,20,.09), transparent 38%),
    var(--gom-bg) !important;
  color:var(--gom-text);
  font-family:var(--gom-font-body);
  padding-top:var(--gom-topbar-h);
}

/* Scanlines + grano: mismo tratamiento que gameovermexico.com */
body.gom-branded::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9997;
  background:repeating-linear-gradient(to bottom,
    transparent 0, transparent 3px,
    rgba(0,0,0,.16) 3px, rgba(0,0,0,.16) 4px);
}
body.gom-branded::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
@media (prefers-reduced-motion:reduce){
  body.gom-branded::before{display:none}
}

.gom-branded ::-webkit-scrollbar{width:8px;height:8px}
.gom-branded ::-webkit-scrollbar-track{background:#030303}
.gom-branded ::-webkit-scrollbar-thumb{background:rgba(57,255,20,.5);border-radius:0}
.gom-branded ::-webkit-scrollbar-thumb:hover{background:var(--gom-green)}
.gom-branded :focus-visible{outline:2px solid var(--gom-green);outline-offset:2px}
/* Controles nativos (range, checkbox, radio, progress) en verde GOM */
.gom-branded{accent-color:var(--gom-green)}
.gom-branded input[type=range]{accent-color:var(--gom-green)}

/* ══════════════════════════════════════
   TOPBAR — inyectada por gom-brand.js
   ══════════════════════════════════════ */
.gom-topbar{
  position:fixed;top:0;left:0;right:0;height:var(--gom-topbar-h);z-index:9999;
  display:flex;align-items:center;gap:18px;
  padding:0 clamp(12px,3vw,26px);
  background:rgba(3,3,3,.93);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--gom-line);
  box-shadow:0 0 34px rgba(57,255,20,.07);
}
.gom-topbar__home{
  display:inline-flex;align-items:center;gap:9px;flex-shrink:0;
  font-family:var(--gom-font-label);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gom-green);text-decoration:none;
  padding:9px 14px;border:1px solid var(--gom-line);
  background:var(--gom-green-dim);
  transition:background .2s,border-color .2s,transform .2s;
}
.gom-topbar__home:hover{background:rgba(57,255,20,.2);border-color:var(--gom-green);transform:translateX(-2px)}
.gom-topbar__home span{display:none}
@media (min-width:760px){.gom-topbar__home span{display:inline}}

.gom-topbar__logo{
  height:40px;width:auto;display:block;flex-shrink:0;
  filter:drop-shadow(0 0 14px rgba(123,47,247,.5));
}
.gom-topbar__id{display:flex;flex-direction:column;gap:2px;min-width:0}
.gom-topbar__name{
  font-family:var(--gom-font-display);font-size:20px;line-height:1;
  letter-spacing:.06em;color:var(--gom-green);
  text-shadow:0 0 16px rgba(57,255,20,.4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gom-topbar__tag{
  font-family:var(--gom-font-label);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gom-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gom-topbar__spacer{flex:1 1 auto}
.gom-topbar__links{display:none;gap:8px;flex-shrink:0}
@media (min-width:900px){.gom-topbar__links{display:flex}}
.gom-topbar a.gom-topbar__link{
  font-family:var(--gom-font-label);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gom-muted);text-decoration:none;
  padding:9px 13px;border:1px solid transparent;transition:.2s;
}
.gom-topbar a.gom-topbar__link:hover{color:var(--gom-green);border-color:var(--gom-line)}
.gom-topbar a.gom-topbar__link--cta{
  color:#050505;background:var(--gom-green);font-weight:700;
  box-shadow:0 0 22px rgba(57,255,20,.35);
}
.gom-topbar a.gom-topbar__link--cta:hover{color:#050505;background:var(--gom-green-2);border-color:transparent}

@media (max-width:620px){
  :root{--gom-topbar-h:56px}
  .gom-topbar__logo{height:32px}
  .gom-topbar__name{font-size:16px}
  .gom-topbar__tag{display:none}
}

/* ══════════════════════════════════════
   PIE — inyectado por gom-brand.js
   ══════════════════════════════════════ */
.gom-foot{
  margin-top:56px;padding:34px clamp(12px,3vw,26px) 40px;
  border-top:1px solid rgba(57,255,20,.1);
  background:rgba(3,3,3,.6);
  display:flex;flex-wrap:wrap;gap:18px 26px;
  align-items:center;justify-content:center;text-align:center;
  position:relative;z-index:2;
}
.gom-foot__brand{
  font-family:var(--gom-font-display);font-size:22px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gom-green);
  text-shadow:0 0 15px rgba(57,255,20,.4);
}
.gom-foot__txt{font-size:13px;color:var(--gom-muted);max-width:46ch}
.gom-foot__links{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.gom-foot .gom-foot__links a{
  font-family:var(--gom-font-label);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gom-muted);text-decoration:none;transition:color .2s;
}
.gom-foot .gom-foot__links a:hover{color:var(--gom-green)}

/* ══════════════════════════════════════
   Repintado de componentes genéricos
   ══════════════════════════════════════ */
.gom-branded h1,.gom-branded h2,.gom-branded h3{letter-spacing:.01em}
.gom-branded a:not([class^="gom-"]):not([class*=" gom-"]){color:var(--gom-green)}

.gom-branded button,
.gom-branded .btn,
.gom-branded input[type=submit],
.gom-branded input[type=button]{
  border-radius:2px;
  font-family:var(--gom-font-label);
  letter-spacing:.06em;
}
.gom-branded input,.gom-branded select,.gom-branded textarea{
  border-radius:2px;
  font-family:var(--gom-font-body);
  background:#08080a;color:var(--gom-text);
  border:1px solid var(--gom-line-soft);
}
.gom-branded input:focus,.gom-branded select:focus,.gom-branded textarea:focus{
  border-color:var(--gom-green);outline:none;
  box-shadow:0 0 0 2px rgba(57,255,20,.15);
}

/* Bootstrap (usado por el convertidor) */
.gom-branded .bg-dark,.gom-branded .card,.gom-branded .modal-content,
.gom-branded .list-group-item,.gom-branded .dropdown-menu{
  background-color:var(--gom-panel) !important;
  color:var(--gom-text) !important;
  border-color:var(--gom-line-soft) !important;
  border-radius:2px !important;
}
.gom-branded .btn-primary{
  background-color:var(--gom-green) !important;border-color:var(--gom-green) !important;
  color:#050505 !important;font-weight:700;
}
.gom-branded .btn-primary:hover{
  background-color:var(--gom-green-2) !important;border-color:var(--gom-green-2) !important;
}
.gom-branded .btn-outline-primary,.gom-branded .btn-outline-secondary{
  color:var(--gom-green) !important;border-color:var(--gom-line) !important;
}
.gom-branded .btn-outline-primary:hover,.gom-branded .btn-outline-secondary:hover{
  background-color:var(--gom-green) !important;color:#050505 !important;
}
.gom-branded .text-primary{color:var(--gom-green) !important}
.gom-branded .form-control,.gom-branded .form-select{
  background-color:#08080a !important;color:var(--gom-text) !important;
  border-color:var(--gom-line-soft) !important;border-radius:2px !important;
}
.gom-branded .form-control:focus,.gom-branded .form-select:focus{
  border-color:var(--gom-green) !important;
  box-shadow:0 0 0 .2rem rgba(57,255,20,.15) !important;
}
.gom-branded .progress{background-color:#111 !important;border-radius:2px !important}
.gom-branded .progress-bar{background-color:var(--gom-green) !important}

/* Aviso de requisitos del servidor */
.gom-notice{
  margin:26px auto;max-width:760px;padding:22px 24px;
  border:1px solid var(--gom-line);background:var(--gom-green-dim);
  font-family:var(--gom-font-body);color:var(--gom-text);
}
.gom-notice strong{
  display:block;font-family:var(--gom-font-display);font-size:22px;
  letter-spacing:.08em;color:var(--gom-green);margin-bottom:8px;
}
.gom-notice p{margin:0;font-size:14px;color:var(--gom-muted);line-height:1.6}