/* Go Lives Tools — estilo futurista. Propiedad de SHARK MARKETING CORP. */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Inter:wght@400;600;700&display=swap');

:root {
  --bg: #070A12; --panel: rgba(14,20,36,0.92); --panel-solid: #0E1424; --line: #2A3A5E; --line-soft: #1A2340; --field: #0B111F; --chip: #121A2E;
  --red: #FF1E3C; --red-dark: #C8102E; --cyan: #19E6FF; --green: #1DB954; --yellow: #FFD400;
  --text: #F2F5FA; --muted: #AFB9CC; --dim: #7F8BA3; --focus: #19E6FF;
  --fs: 17px; --glow-red: 0 0 24px rgba(255,30,60,0.5); --glow-cyan: 0 0 18px rgba(25,230,255,0.35);
  --title: Orbitron, Inter, system-ui, sans-serif;
}
:root[data-contrast="high"] { --bg: #000000; --panel: #000000; --panel-solid: #000000; --line: #FFFFFF; --line-soft: #FFFFFF; --field: #000000; --chip: #000000; --muted: #FFFFFF; --dim: #FFFFFF; --text: #FFFFFF; --cyan: #66F0FF; --glow-red: none; --glow-cyan: none; }
:root[data-large="1"] { --fs: 22px; }
:root[data-audio-only="1"] .visual-only { display: none !important; }

* { box-sizing: border-box; }
html { font-size: var(--fs); }
body { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--text); background-color: var(--bg); background-image: linear-gradient(rgba(255,30,60,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,30,60,0.05) 1px, transparent 1px); background-size: 40px 40px; min-height: 100vh; }
:root[data-contrast="high"] body { background-image: none; }
a { color: #FF4D6D; font-weight: 700; }
a:hover { color: #FF8FA3; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
h1, h2, h3, .comic { font-family: var(--title); letter-spacing: 1px; margin: 0; color: #fff; }
h1 { font-size: 2rem; font-weight: 900; letter-spacing: 2px; text-shadow: 0 0 18px rgba(255,30,60,0.6); text-transform: uppercase; }
h2 { font-size: 1.05rem; font-weight: 700; text-transform: uppercase; }
p { margin: 0; line-height: 1.5; }

/* layout */
.layout { display: flex; flex-wrap: wrap; min-height: 100vh; }
nav.side { flex: 1 1 240px; max-width: 260px; background: var(--field); border-right: 1px solid var(--line); padding: 20px 14px; display: flex; flex-direction: column; gap: 6px; }
nav.side .logo { display: flex; justify-content: center; padding: 0 4px 14px; }
nav.side .logo img { width: 210px; max-width: 100%; height: auto; border-radius: 12px; box-shadow: var(--glow-red); }
nav.side a.item { display: flex; align-items: center; min-height: 48px; padding: 0 14px; color: var(--muted); font-family: var(--title); font-weight: 500; font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; border-left: 3px solid transparent; border-radius: 10px; }
nav.side a.item:hover { color: #fff; background: var(--chip); }
nav.side a.item[aria-current="page"] { color: #fff; font-weight: 700; background: linear-gradient(90deg, rgba(255,30,60,0.25), rgba(255,30,60,0.05)); border-left-color: var(--red); box-shadow: 0 0 18px rgba(255,30,60,0.25); }
nav.side .spacer { flex: 1; }
nav.side .session { padding: 10px 12px; background: var(--chip); color: var(--muted); font-size: 0.85rem; font-weight: 600; border: 1px solid var(--line); border-radius: 10px; word-break: break-word; }
nav.side .btn { width: 100%; }
main { flex: 999 1 560px; min-width: 0; padding: 28px; display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 760px) { nav.side { max-width: none; border-right: 0; border-bottom: 1px solid var(--line); } main { padding: 16px; } h1 { font-size: 1.5rem; } }

/* componentes */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 0 0 1px rgba(25,230,255,0.08), 0 12px 40px rgba(0,0,0,0.5); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.panel.accent { border-color: var(--red); box-shadow: var(--glow-red); }
.panel.ok { border-color: var(--green); box-shadow: 0 0 24px rgba(29,185,84,0.3); }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--chip); color: #fff; font-family: var(--title); font-weight: 700; font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--cyan); }
.btn:active { transform: translateY(1px); }
.btn.red { background: linear-gradient(90deg, var(--red), var(--red-dark)); border: none; box-shadow: var(--glow-red); }
.btn.yellow { background: rgba(25,230,255,0.08); border-color: var(--cyan); color: var(--cyan); }
.btn.black { background: rgba(255,30,60,0.12); border-color: var(--red); box-shadow: var(--glow-red); }
.btn.big { min-height: 96px; font-size: 1.5rem; font-weight: 900; letter-spacing: 2px; flex: 2 1 280px; border-radius: 16px; }
.btn.plain { font-family: Inter, sans-serif; font-size: 0.9rem; letter-spacing: 0; text-transform: none; min-height: 46px; border-radius: 10px; }
.btn[aria-pressed="true"] { background: var(--cyan); color: #06121A; border-color: var(--cyan); box-shadow: var(--glow-cyan); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
label, .label { font-size: 0.9rem; font-weight: 600; color: #DDE4F0; }
.field { display: flex; flex-direction: column; gap: 8px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea { min-height: 52px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: #fff; font: inherit; padding: 0 12px; }
select option, select optgroup { background: var(--panel-solid); color: #fff; }
textarea { padding: 10px 12px; min-height: 90px; }
input[type="range"] { min-height: 44px; width: 100%; accent-color: var(--red); }
input[type="checkbox"] { width: 28px; height: 28px; accent-color: var(--red); flex: none; }
input[type="file"] { color: var(--muted); }
.check { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 0 16px; background: var(--chip); border: 1px solid var(--line); border-radius: 10px; font-weight: 600; }
.check.left { justify-content: flex-start; }
.badge { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--cyan); border-radius: 999px; background: rgba(25,230,255,0.08); color: var(--cyan); font-size: 0.9rem; font-weight: 700; }
.status-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; background: var(--chip); border: 1px solid var(--line); border-radius: 999px; font-family: var(--title); font-weight: 700; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: #566; }
.dot.on { background: var(--green); box-shadow: 0 0 12px var(--green); }
.dot.err { background: var(--red); box-shadow: 0 0 12px var(--red); }
.bubble { position: relative; padding: 16px 20px; background: var(--chip); border: 1px solid var(--red); border-radius: 18px; font-size: 1.2rem; font-weight: 700; box-shadow: var(--glow-red); }
.bubble::after { content: ''; position: absolute; left: 36px; bottom: -14px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 14px solid var(--red); }
.bubble::before { content: ''; position: absolute; left: 38px; bottom: -11px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 12px solid var(--chip); z-index: 1; }
.feed { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow: auto; }
.feed .ev { padding: 10px 16px; background: var(--chip); border: 1px solid var(--line); border-radius: 10px; color: #DDE4F0; }
.feed .ev.gift { background: rgba(255,30,60,0.1); border-color: var(--red); color: #fff; }
.feed .ev .pow { font-family: var(--title); font-weight: 700; color: var(--red); font-size: 0.85rem; margin-right: 10px; }
.card-platform { display: flex; flex-direction: column; gap: 6px; }
.card-platform .name { font-family: var(--title); font-weight: 700; font-size: 0.9rem; letter-spacing: 2px; color: var(--cyan); }
.card-platform.live { border-color: var(--green); box-shadow: 0 0 24px rgba(29,185,84,0.35); }
.card-platform.live .name { color: var(--red); }
.muted { color: var(--muted); font-size: 0.9rem; }
.shortcuts { font-size: 0.9rem; font-weight: 600; color: var(--dim); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--panel-solid); color: #fff; padding: 14px 20px; border: 1px solid var(--cyan); border-radius: 12px; box-shadow: var(--glow-cyan); font-weight: 700; z-index: 50; max-width: 90vw; }
.hidden { display: none !important; }
table { width: 100%; border-collapse: collapse; background: var(--panel-solid); }
th, td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; font-size: 0.95rem; }
th { background: var(--chip); font-family: var(--title); font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; color: var(--cyan); }
.table-wrap { overflow-x: auto; }

/* login */
.login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 48px 16px; background-color: var(--bg); background-image: linear-gradient(rgba(255,30,60,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,30,60,0.06) 1px, transparent 1px), radial-gradient(ellipse at 50% 0%, rgba(255,30,60,0.35), transparent 60%); background-size: 40px 40px, 40px 40px, 100% 100%; }
.login .logo { width: 380px; max-width: 100%; height: auto; border-radius: 18px; box-shadow: 0 0 40px rgba(255,30,60,0.55), 0 0 0 1px rgba(255,30,60,0.6); }
.login .box { width: 100%; max-width: 460px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 28px; box-shadow: 0 0 0 1px rgba(25,230,255,0.15), 0 20px 60px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 14px; }
.login .box h2 { font-size: 1.2rem; }
.login .bubble { border-radius: 14px; font-weight: 600; font-size: 1.05rem; color: #DDE4F0; border-color: var(--line); box-shadow: none; }
.login .bubble::after, .login .bubble::before { display: none; }
.login .foot { color: var(--dim); font-weight: 600; font-size: 0.85rem; text-align: center; }
.sep { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; font-weight: 600; color: var(--dim); }
.sep::before, .sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.error { background: rgba(255,30,60,0.15); border: 1px solid var(--red); border-radius: 10px; padding: 10px 14px; font-weight: 700; }