:root{--navy:#1F3A5F;--navy-2:#19304e}
/* ===== Tema Gamesphere =====
   Basado en gamesphere.mx: fondo azul noche, magenta #FF00FF, azul #0075FF,
   títulos en Orbitron, texto en Saira (alternativa libre a Eurostile) y botones
   en Share Tech (alternativa libre a ISOCPEUR). Fuentes con licencia OFL, servidas
   desde este mismo servidor. */
@font-face { font-family: "Orbitron"; font-weight: 500; font-display: swap; src: url(/fonts/orbitron-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Orbitron"; font-weight: 700; font-display: swap; src: url(/fonts/orbitron-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Orbitron"; font-weight: 800; font-display: swap; src: url(/fonts/orbitron-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Saira"; font-weight: 400; font-display: swap; src: url(/fonts/saira-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Saira"; font-weight: 500; font-display: swap; src: url(/fonts/saira-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Saira"; font-weight: 600; font-display: swap; src: url(/fonts/saira-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Saira"; font-weight: 700; font-display: swap; src: url(/fonts/saira-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Share Tech"; font-weight: 400; font-display: swap; src: url(/fonts/share-tech-latin-400-normal.woff2) format("woff2"); }

:root {
  --gs-noche: #0D121B; --gs-noche-2: #050714; --gs-panel: #161929; --gs-panel-2: #1D2136;
  --gs-linea: rgba(246, 244, 240, .10); --gs-texto: #F6F4F0; --gs-suave: #BCBCBB;
  --gs-magenta: #FF00FF; --gs-rosa: #F27EF2; --gs-azul: #0075FF; --gs-azul-claro: #4D9DFF;
  --ink: var(--gs-texto); --muted: var(--gs-suave); --line: var(--gs-linea); --bg: var(--gs-noche); --card: var(--gs-panel);
  --navy: var(--gs-azul); --accent: var(--gs-magenta);
  --ok: #4ADE80; --low: #FBBF24; --out: #F87171;
  --font: "Saira", "Segoe UI", system-ui, sans-serif;
  --titulo: "Orbitron", "Saira", sans-serif;
  --boton: "Share Tech", "Saira", sans-serif;
  --radius: 16px;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.35);
  color-scheme: dark;
}

body {
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(255, 0, 255, .16), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(0, 117, 255, .14), transparent 60%),
    var(--gs-noche);
  background-attachment: fixed;
  color: var(--gs-texto);
  font-family: var(--font);
}
a { color: var(--gs-rosa); }
:focus-visible { outline: 3px solid var(--gs-rosa); outline-offset: 2px; }

/* Barra superior */
.topbar { background: rgba(5, 7, 20, .92); backdrop-filter: blur(8px); border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--gs-magenta), var(--gs-azul)) 1; }
.brand { gap: 12px; }
.brand-mark, .brand-text { display: none !important; }
.brand-logo { display: block !important; width: 168px; height: 40px; background: url(/marca-logo.png) left center / contain no-repeat; }
.brand-tag { display: inline-block !important; font-family: var(--titulo); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gs-noche); background: var(--gs-magenta); padding: 4px 10px; border-radius: 999px; }
.search input { background: rgba(255, 255, 255, .92); color: var(--gs-noche); border: 1px solid transparent; font-family: var(--font); font-size: 15.5px; }
.search input:focus { box-shadow: 0 0 0 3px rgba(255, 0, 255, .45); outline: none; }
.usernav .linkbtn, .usernav a.linkbtn { color: var(--gs-rosa); font-weight: 700; text-decoration: none; }
.usernav .linkbtn:hover { color: #fff; }
.username { color: var(--gs-suave); }
.linkbtn { color: var(--gs-rosa); }

/* Portada */
.hero { display: block; max-width: 1400px; margin: 0 auto; padding: 40px 20px 8px; text-align: center; }
.hero h1 { margin: 0; font-family: var(--titulo); font-weight: 700; font-size: clamp(24px, 4vw, 44px); color: var(--gs-texto); letter-spacing: .02em; }
.hero .par { color: var(--gs-magenta); text-shadow: 0 0 18px rgba(255, 0, 255, .7); }
.hero p { margin: 10px auto 0; max-width: 680px; color: var(--gs-azul-claro); font-size: 17px; }

/* Filtros */
.filters { background: rgba(22, 25, 41, .88); border: 1px solid var(--gs-linea); }
.filters h2 { font-family: var(--titulo); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.filters h3 { color: var(--gs-rosa); font-family: var(--titulo); font-size: 11.5px; letter-spacing: .14em; }
.catlist button { color: var(--gs-texto); }
.catlist button span { color: var(--gs-suave); }
.catlist button:hover { background: rgba(255, 255, 255, .05); }
.catlist button.active { background: linear-gradient(90deg, rgba(255, 0, 255, .22), rgba(0, 117, 255, .12)); color: #fff; box-shadow: inset 3px 0 0 var(--gs-magenta); }
.filters select, .sort select, .admin-bar select, .tbl select {
  background: var(--gs-noche); color: var(--gs-texto); border: 1px solid #2B3152; }
.check input { accent-color: var(--gs-magenta); }

/* Resultados */
.count { font-family: var(--titulo); font-weight: 700; letter-spacing: .04em; }
.meta { color: var(--gs-suave); }
.btn-ghost { background: var(--gs-panel); color: var(--gs-texto); border-color: #2B3152; }

/* Tarjetas */
.card { background: var(--gs-panel); border: 1px solid var(--gs-linea); }
.card:hover { box-shadow: 0 0 0 1px rgba(255, 0, 255, .55), 0 12px 34px rgba(255, 0, 255, .22); transform: translateY(-3px); }
.card-btn:focus-visible { outline-color: var(--gs-rosa); }
.card-img { background: #fff; border-bottom: 1px solid var(--gs-linea); }
.badge { background: var(--gs-magenta); color: var(--gs-noche); font-family: var(--titulo); font-weight: 800; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 0 14px rgba(255, 0, 255, .6); }
.card-brand { color: var(--gs-azul-claro); font-family: var(--titulo); font-size: 10.5px; letter-spacing: .14em; }
.card-name { color: var(--gs-texto); font-weight: 500; }
.card-price { color: #fff; font-family: var(--titulo); font-weight: 700; font-size: 17px; letter-spacing: .02em; }
.card-price s, .pd-price s { color: #8A90A6; font-family: var(--font); }
.empty { background: var(--gs-panel); border-color: #2B3152; }

/* Paginación */
.pager button { background: var(--gs-panel); color: var(--gs-texto); border-color: #2B3152; font-family: var(--boton); }
.pager button[aria-current="page"] { background: linear-gradient(26deg, #fff 0%, var(--gs-azul) 100%); border-color: transparent; color: var(--gs-noche); box-shadow: 0 0 16px rgba(0, 117, 255, .5); }

/* Botones (estilo píldora con brillo, como en gamesphere.mx) */
.btn-primary { border-radius: 999px; font-family: var(--boton); font-size: 18px; font-weight: 400; letter-spacing: .02em; color: var(--gs-noche);
  background: linear-gradient(26deg, #fff 0%, var(--gs-azul) 100%); box-shadow: 0 0 18px rgba(255, 0, 255, .55); }
.btn-primary:hover { background: linear-gradient(26deg, #fff 0%, #3A92FF 100%); box-shadow: 0 0 26px rgba(255, 0, 255, .8); }
.btn-primary:disabled { background: #3A4060; color: #A5ABC3; box-shadow: none; }
.btn-wa { border-radius: 999px; border: 0; background: rgba(255, 255, 255, .88); color: var(--gs-noche); font-family: var(--boton); font-size: 17px; font-weight: 400;
  box-shadow: 0 0 14px rgba(255, 0, 255, .35); }
.btn-wa:hover { background: #fff; }
.btn-sec { border-radius: 999px; background: transparent; border-color: var(--gs-rosa); color: var(--gs-rosa); font-family: var(--boton); font-size: 16px; }

/* Ficha del producto */
.dlg { background: var(--gs-panel); color: var(--gs-texto); border: 1px solid rgba(255, 0, 255, .35); box-shadow: 0 0 60px rgba(255, 0, 255, .18), 0 30px 80px rgba(0, 0, 0, .6); }
.dlg::backdrop { background: rgba(5, 7, 20, .78); }
.dlg-close { background: rgba(255, 255, 255, .92); color: var(--gs-noche); }
.pd-img { background: #fff; border-right-color: var(--gs-linea); }
.pd-brand { color: var(--gs-azul-claro); font-family: var(--titulo); letter-spacing: .14em; }
.pd-info h2 { font-family: var(--titulo); font-weight: 700; font-size: 19px; line-height: 1.4; letter-spacing: .01em; }
.pd-ref, .pd-note { color: var(--gs-suave); }
.pd-price { font-family: var(--titulo); color: #fff; }
.req { background: var(--gs-noche); border-color: var(--gs-linea); }
.req h3 { font-family: var(--titulo); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--gs-rosa); }
.req label { color: var(--gs-suave); }
.req input, .req textarea { background: var(--gs-panel-2); color: var(--gs-texto); border-color: #2B3152; }
.req input:focus, .req textarea:focus { border-color: var(--gs-magenta); outline: none; box-shadow: 0 0 0 3px rgba(255, 0, 255, .25); }
.req-msg.success { background: rgba(74, 222, 128, .12); color: #86EFAC; }
.req-msg.error { background: rgba(248, 113, 113, .12); color: #FCA5A5; }
.pd-more { border-top-color: var(--gs-linea); }
.pd-more h3 { font-family: var(--titulo); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gs-rosa); }
.pd-more p { color: #DAD8D4; }
.spec caption { color: var(--gs-azul-claro); }
.spec th, .spec td { border-bottom-color: var(--gs-linea); }
.spec th { color: var(--gs-suave); }
.mis li { border-color: var(--gs-linea); }
.pill { background: rgba(0, 117, 255, .18); color: #9CC8FF; }
.pill-nueva { background: rgba(255, 0, 255, .18); color: var(--gs-rosa); }
.notice { background: rgba(255, 0, 255, .12); color: var(--gs-rosa); border-bottom-color: rgba(255, 0, 255, .3); }

/* Envío */
.envio > label { color: var(--gs-suave); }
.envio-row input { background: var(--gs-panel-2); color: var(--gs-texto); border-color: #2B3152; }
.envio-row input:focus { border-color: var(--gs-magenta); outline: none; box-shadow: 0 0 0 3px rgba(255, 0, 255, .25); }
.btn-cp { border-radius: 999px; background: transparent; border-color: var(--gs-rosa); color: var(--gs-rosa); font-family: var(--boton); font-size: 15px; font-weight: 400; }
.envio-op { background: var(--gs-panel-2); border-color: #2B3152; color: var(--gs-texto) !important; }
.envio-op:has(input:checked) { border-color: var(--gs-magenta); box-shadow: 0 0 0 2px rgba(255, 0, 255, .3), 0 0 16px rgba(255, 0, 255, .2); }
.envio-op input, .req .envio-op input { accent-color: var(--gs-magenta); background: none; box-shadow: none; }
.envio-nom small { color: var(--gs-suave); }
.envio-pre { font-family: var(--titulo); color: #fff; }
.envio-msg { color: var(--gs-azul-claro); }
.envio-msg.error { color: #FCA5A5; }

/* Acceso del equipo */
.login { background: transparent; }
.login-card { background: var(--gs-panel); border: 1px solid rgba(255, 0, 255, .35); box-shadow: 0 0 50px rgba(255, 0, 255, .15); }
.login-logo { display: none; }
.login-brand { display: block !important; width: 240px; height: 58px; margin: 0 auto; background: url(/marca-logo.png) center / contain no-repeat; }
.login-card h1 { font-family: var(--titulo); font-size: 20px; letter-spacing: .04em; }
.clave-form label { color: var(--gs-suave); }
.clave-form input { background: var(--gs-noche); color: var(--gs-texto); border-color: #2B3152; }

/* Panel de asesoras */
.admin h1 { font-family: var(--titulo); letter-spacing: .03em; }
.tbl-wrap { background: var(--gs-panel); border-color: var(--gs-linea); }
.tbl th { background: var(--gs-panel-2); color: var(--gs-rosa); }
.tbl th, .tbl td { border-bottom-color: var(--gs-linea); }
.tbl textarea { background: var(--gs-noche); color: var(--gs-texto); border-color: #2B3152; }
.small { color: var(--gs-suave); }

@media (max-width: 900px) {
  .brand-logo { width: 140px; height: 34px; }
}
@media (max-width: 480px) {
  .brand .brand-logo { display: block !important; width: 120px; height: 30px; }
  .brand .brand-tag { display: none !important; }
}