/* Estilos compartidos del panel (Fuentes y Transmisión) */
:root { --bg:#0e1116; --card:#181c24; --line:#2a3140; --text:#f2f4f8; --muted:#8b93a3; --accent:#e63946; --ok:#2a9d8f; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:system-ui, "Segoe UI", Roboto, sans-serif; }
header { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
         padding:14px 24px; border-bottom:3px solid var(--accent); background:#0b0d12; }
header h1 { margin:0; font-size:1.4rem; } header h1 span { color:var(--accent); }
header nav a { color:var(--text); text-decoration:none; margin-left:14px; }
main { max-width:1000px; margin:0 auto; padding:24px 16px 60px; }
.box { background:var(--card); border-radius:10px; padding:18px; margin-bottom:22px; }
.box h2 { margin:0 0 14px; font-size:1.1rem; }
input[type=text], input[type=url], input[type=number], input[type=password] {
  background:#0e1116; border:1px solid var(--line); color:var(--text); padding:9px 11px; border-radius:6px; font-size:.95rem; width:100%; }
input:focus { outline:2px solid var(--accent); border-color:transparent; }
button, .btn { background:var(--line); color:var(--text); border:0; padding:9px 14px; border-radius:6px; cursor:pointer; font-size:.9rem; white-space:nowrap; }
button:hover { filter:brightness(1.2); }
.primary { background:var(--accent); } .danger { background:#5a1f25; } .success { background:var(--ok); }
.row { display:grid; grid-template-columns:1fr 2fr auto auto; gap:10px; align-items:center; }
table { width:100%; border-collapse:collapse; }
td { padding:10px 6px; border-top:1px solid var(--line); vertical-align:middle; }
td.num { color:var(--muted); width:30px; text-align:center; }
td.actions { white-space:nowrap; text-align:right; }
td.actions form { display:inline; }
.edit-form { display:grid; grid-template-columns:1fr 2fr auto; gap:8px; }
.off input { opacity:.45; }
.badge { font-size:.75rem; padding:3px 8px; border-radius:20px; cursor:pointer; border:0; }
.badge.on { background:var(--ok); } .badge.offb { background:#444a57; }
.msg { padding:12px 16px; border-radius:8px; margin-bottom:18px; }
.msg.ok { background:#1d3f3a; } .msg.err { background:#5a1f25; }
.settings { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; }
.settings label { display:flex; flex-direction:column; gap:6px; font-size:.85rem; color:var(--muted); }
.settings input { width:120px; }
.preview { margin-top:14px; display:none; }
.preview .grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; margin-top:10px; }
.preview .it { background:#0e1116; border-radius:8px; overflow:hidden; font-size:.82rem; }
.preview .it div { aspect-ratio:16/9; background:#252b36 center/cover; }
.preview .it p { margin:0; padding:8px; }
.muted { color:var(--muted); font-size:.9rem; }
.login { max-width:340px; margin:80px auto; }
@media (max-width:700px) {
  .row, .edit-form { grid-template-columns:1fr; }
  td.num { display:none; } tr { display:block; border-top:1px solid var(--line); padding:8px 0; } td { display:block; border:0; padding:6px 0; }
  td.actions { text-align:left; }
}

/* Pestañas del panel */
.tabs { display:flex; gap:4px; max-width:1000px; margin:18px auto 0; padding:0 16px; }
.tabs a { color:var(--muted); text-decoration:none; padding:10px 18px; border-radius:8px 8px 0 0; font-weight:600; }
.tabs a:hover { color:var(--text); }
.tabs a.active { background:var(--card); color:var(--text); }
.tabs + main { padding-top:0; }
.tabs + main > .box:first-child { border-top-left-radius:0; }
.settings input[type=checkbox] { width:auto; accent-color:var(--accent); }
select { background:#0e1116; border:1px solid var(--line); color:var(--text); padding:9px 11px; border-radius:6px; font-size:.95rem; width:100%; }