:root {
  --accent: #1976D2;
  --accent-ink: #FFFFFF;
  --dark: #0D1B2A;
  --tint: color-mix(in srgb, var(--accent) 12%, #fff);
  --bg: #F3F5F7;
  --card: #FFFFFF;
  --ink: #1F2933;
  --muted: #5B6670;
  --line: #D5DCE1;
  --line-soft: #E3E8EC;
  --side: #FBFCFC;
  --group: #E9EEF0;
  --link: #1565C0;
  --ok: #1E8A43;
  --ok-btn: #1E9E4A;
  --bad: #C53030;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 15px; }
a { color: var(--link); }
a:hover { color: color-mix(in srgb, var(--link) 75%, #000); }
button, input, select { font-family: inherit; font-size: 15px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Barra superior */
.top { background: var(--dark); color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 10px clamp(14px, 2vw, 24px); }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.brand-name { font-size: 20px; font-weight: 800; line-height: 1.1; }
.brand-tag { font-size: 11px; color: #B8C7D9; font-style: italic; }
.top-right { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; color: #D5E0EC; gap: 2px; }

/* Estructura */
.shell { display: flex; flex-wrap: wrap; min-height: calc(100vh - 58px); }
.side { flex: 1 1 260px; max-width: 100%; background: var(--side); border-right: 1px solid #DDE3E7; }
.side-search { padding: 10px; border-bottom: 1px solid #DDE3E7; display: flex; gap: 6px; }
.side-search input { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 10px; border: 1px solid #CBD3D9; border-radius: 6px; }
.group-btn { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border: 0; border-bottom: 1px solid #DDE3E7; background: var(--group); color: var(--dark); font-weight: 800; font-size: 14px; text-align: left; cursor: pointer; }
.group-items { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid #DDE3E7; }
.item { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 16px; color: var(--ink); font-size: 14px; text-decoration: none; background: none; border: 0; text-align: left; cursor: pointer; width: 100%; }
.item::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.item.active { background: var(--tint); font-weight: 800; }
.item.soon { color: #8A949C; cursor: default; }
.item.soon::before { background: #C4CCD2; }
.item .tag { margin-left: auto; font-size: 11px; color: #8A949C; border: 1px solid #D5DCE1; border-radius: 999px; padding: 1px 7px; }
.main { flex: 999 1 640px; min-width: 0; padding: 16px clamp(12px, 2vw, 24px) 32px; display: flex; flex-direction: column; gap: 16px; }
.crumbs { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid #DDE3E7; }
.crumbs strong { font-size: 16px; color: var(--link); }
.linkbtn { background: none; border: 0; color: var(--muted); font-weight: 700; cursor: pointer; padding: 8px 0; min-height: 40px; }
.linkbtn:hover { color: var(--ink); }

/* Paneles */
.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); border: 1px solid var(--line); background: var(--card); }
@media (max-width: 520px) { .grid4 { grid-template-columns: 1fr; } }
.panel { display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.panel h2 { margin: 0; background: var(--dark); color: #fff; font-size: 16px; font-weight: 800; padding: 14px 18px; border-bottom: 4px solid var(--accent); }
.panel h2 small { color: #9FB6CF; font-weight: 700; font-size: 15px; }
.panel-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.card { background: var(--card); border: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.card h2 { margin: 0; font-size: 18px; }

.tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tab { min-height: 44px; padding: 0 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; margin-bottom: -1px; background: transparent; color: var(--link); font-weight: 700; cursor: pointer; }
.tab[aria-selected="true"] { background: #fff; border-color: var(--line); }
.fields { border: 1px solid #C7CFD5; border-radius: 6px; box-shadow: 0 2px 6px rgba(15, 30, 40, .12); padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
@media (max-width: 520px) { .fields { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-v { min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 4px 10px; background: #EEF1F3; border: 1px solid var(--line); border-radius: 4px; overflow-wrap: anywhere; }
.field-v.strong { font-weight: 800; }
.mini { margin-left: auto; min-height: 30px; padding: 0 10px; border: 1px solid #B9C3CA; border-radius: 4px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; flex: none; }

.bar { background: #EEF1F3; border: 1px solid var(--line); border-radius: 4px; padding: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.btn { min-height: 44px; padding: 0 16px; border: 0; border-radius: 4px; color: #fff; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.btn:disabled { opacity: .6; cursor: wait; }
.btn-go { background: var(--ok-btn); }
.btn-stop { background: #5B6670; }
.btn-bad { background: var(--bad); }
.btn-main { background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.btn-line { background: #fff; color: var(--ink); border: 1px solid #B9C3CA; }
.ok { color: var(--ok); }
.bad { color: var(--bad); }

.player { display: flex; border: 1px solid #9FB4C2; }
.player-art { color: #9CC6F2; width: 100px; min-height: 100px; background: var(--dark); display: flex; align-items: center; justify-content: center; flex: none; }
.player-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #EEF3F6; }
.player-row { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.pbtn { width: 44px; height: 44px; border: 1px solid #9FB4C2; border-radius: 6px; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.ptrack { flex: 1 1 auto; height: 10px; background: #D5DCE1; border-radius: 2px; overflow: hidden; }
.ptrack span { display: block; height: 100%; background: var(--accent); }
.player input[type=range] { width: 80px; accent-color: var(--accent); }
.player-now { background: #D9E2E8; padding: 6px 12px; font-size: 13px; font-weight: 700; color: #33414C; overflow-wrap: anywhere; }

.stats-head { padding: 12px 18px; background: #F7F9FA; border-bottom: 1px solid var(--line-soft); }
.chart { padding: 16px 18px 12px; display: flex; gap: 8px; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; height: 240px; font-size: 11px; color: var(--muted); text-align: right; width: 34px; flex: none; }
.chart-area { height: 240px; display: flex; align-items: flex-end; border-left: 1px solid #C7CFD5; border-bottom: 1px solid #C7CFD5; background-image: linear-gradient(#E9EDF0 1px, transparent 1px); background-size: 100% 60px; }
.chart-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; border-right: 1px solid #EEF1F3; }
.chart-col div { width: 72%; background: var(--accent); min-height: 2px; }
.chart-col div.peak { background: var(--dark); }
.chart-x { display: flex; }
.chart-x span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 13px; color: #33414C; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { color: var(--muted); font-size: 14px; padding: 8px 0; }

.gauges { padding: 24px 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; }
@media (max-width: 520px) { .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gauge { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.gauge-pct { align-self: flex-end; margin-right: 12%; font-size: 18px; color: var(--muted); border-bottom: 1px solid #C7CFD5; padding: 0 2px; }
.gauge-ring { position: relative; width: 112px; height: 112px; }
.gauge-ring span { color: var(--link); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.gauge-label { font-size: 12px; color: var(--muted); }

.list { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.row span:first-child { color: var(--muted); }

/* Tablas */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 8px; border-bottom: 2px solid var(--line); }
td { padding: 10px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Formularios */
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; }
.form input, .form select, .login input { min-height: 44px; padding: 0 12px; border: 1px solid #B9C3CA; border-radius: 6px; background: #fff; color: var(--ink); font-weight: 400; }
.msg { font-size: 14px; font-weight: 700; }

/* Inicio admin */
.notice { display: flex; border: 1px solid color-mix(in srgb, var(--accent) 35%, #fff); background: var(--tint); }
.notice-icon { color: var(--accent-ink); width: 46px; background: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
.notice-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.sec-title { margin: 0; font-size: 17px; font-weight: 800; color: #33414C; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px 24px; }
.tile { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 6px; text-decoration: none; color: var(--ink); background: none; border: 1px solid transparent; text-align: left; cursor: pointer; }
.tile:hover { border-color: var(--line); box-shadow: 0 2px 8px rgba(15, 30, 40, .08); color: var(--ink); }
.tile-head { display: flex; align-items: center; gap: 10px; }
.tile-icon { color: var(--link); width: 40px; height: 40px; border-radius: 8px; background: var(--tint); display: flex; align-items: center; justify-content: center; flex: none; }
.tile-name { font-size: 21px; color: var(--link); }
.tile.soon .tile-name { color: #8A949C; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kpi { background: #fff; border: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.kpi b { font-size: 26px; }
.kpi span { font-size: 13px; color: var(--muted); }
.meter { height: 10px; background: #E3E8EC; border-radius: 999px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--accent); }

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--dark); }
.login { width: 100%; max-width: 400px; background: #fff; border-top: 5px solid var(--accent); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.login .brand { color: var(--dark); }
.login .brand-tag { color: var(--muted); }
.login label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; }
.login .btn { width: 100%; justify-content: center; }

footer { background: var(--group); padding: 16px; text-align: center; font-size: 13px; color: var(--muted); }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--dark); color: #fff; padding: 12px 18px; border-radius: 8px; font-weight: 700; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); max-width: calc(100% - 32px); z-index: 10; }
#toast.err { background: var(--bad); }
.loading { padding: 40px; text-align: center; color: var(--muted); }

/* Música */
.drop { border: 2px dashed #9FB4C2; border-radius: 8px; padding: 28px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; background: #F7F9FA; cursor: pointer; }
.drop.over { border-color: var(--accent); background: var(--tint); }
.drop input { font-size: 14px; }
.upl { display: flex; flex-direction: column; gap: 6px; }
.upl-row { display: grid; grid-template-columns: 1fr 160px; gap: 10px; align-items: center; font-size: 13px; }
.upl-row .meter { height: 8px; }
textarea { font-family: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid #B9C3CA; border-radius: 6px; min-height: 80px; resize: vertical; }

/* ===== Estilo clásico de panel de radio (tema claro, cabeceras azul marino) ===== */
:root { --top: #2E3134; --accent: #1E88E5; --dark: #0B1A2B; --link: #1565C0; --bg: #F1F1F1; --side: #F8F8F8; --group: #E6E6E6; }
html, body { background: var(--bg); }
.top { background: var(--top); padding: 0; min-height: 62px; }
.top .brand { background: #222426; align-self: stretch; padding: 10px 18px; min-width: 260px; }
.top-right { padding: 10px 18px; color: #E4E4E4; }
.side { background: var(--side); border-right: 1px solid #DCDCDC; }
.side-search { background: #fff; }
.group-btn { background: var(--group); color: #1A1A1A; font-size: 15px; border-bottom: 1px solid #D4D4D4; }
.group-btn i { color: var(--link); margin-right: 4px; }
.item { font-size: 14.5px; color: #1A1A1A; min-height: 40px; }
.item::before { display: none; }
.item i { font-size: 13px; color: #1A1A1A; }
.item.active { background: #E9F2FC; color: var(--link); }
.item.active i { color: var(--link); }
.item.soon i { color: #A9A9A9; }
.crumbs strong { color: var(--link); font-size: 16px; }
.crumbs strong i { color: #1A1A1A; margin-right: 2px; }
.linkbtn { font-size: 16px; color: #8A8A8A; }
.grid4 { border: 0; background: transparent; gap: 0; }
.panel { background: #fff; border: 1px solid #DCDCDC; margin: 0 -1px -1px 0; }
.panel h2 { background: var(--dark); border-bottom: 4px solid #1C8ADB; font-size: 17px; padding: 15px 20px; box-shadow: inset 0 -1px 0 #0E5A99; }
.panel h2 i { margin-right: 4px; }
.panel h2 small { color: #8D9BA8; font-weight: 700; }
.tab { font-size: 16px; color: var(--link); font-weight: 600; }
.tab i { margin-right: 2px; }
.fields { border: 1px solid #222; border-radius: 4px; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
.field > span:first-child { font-size: 15px; }
.field-v { background: #E9ECEF; border: 1px solid #CED4DA; border-radius: 3px; font-size: 15px; }
.bar { background: #E9E9E9; border: 1px solid #DCDCDC; border-radius: 3px; }
.btn { border-radius: 3px; font-size: 16px; font-weight: 600; }
.btn i { font-size: 17px; }
.btn-go { background: #28A745; }
.btn-stop { background: #6C757D; }
.btn-main { background: var(--accent); color: #fff; }
.player { border: 1px solid #7FB0DE; }
.player-art { background: #1B2733; }
.player-body { background: #ECEFF2; }
.player-now { background: #D3D9DF; color: #3B4650; }
.stats-head { background: #F7F7F7; font-size: 16px; }
.chart-col div { background: #3D8FD1; }
.chart-col div.peak { background: #263544; }
.gauges { gap: 28px 12px; }
.gauge-pct { color: #9A9A9A; font-size: 19px; border-bottom: 1px solid #BDBDBD; min-width: 60px; text-align: right; }
.gauge-ring span { color: #1A6FC4; font-size: 30px; }
.gauge-label { font-size: 11.5px; color: #555; }
.card { border: 1px solid #DCDCDC; }
.tile-icon { background: transparent; width: auto; height: auto; color: #1A6FC4; font-size: 34px; }
.tile-name { color: #1A8AD8; font-size: 23px; }
.tile.soon .tile-icon { color: #A9A9A9; }
.notice { border: 1px solid #A3D9A5; background: #F4FBF4; }
.notice-icon { background: #3FA34D; color: #fff; }
.sec-title { color: #2B3A47; }
footer { background: #E6E6E6; }

.grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid4 { grid-template-columns: 1fr; } }
.adminbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; background: #FFF4D6; border: 1px solid #E8C96A; padding: 10px 14px; font-size: 14px; }
.adminbar a { font-weight: 700; }

/* Barra superior del administrador */
.top { flex-wrap: wrap; }
.top-links { display: flex; gap: 22px; align-items: center; margin-right: auto; padding: 0 18px; }
.top-links a, .top-links button { color: #DADADA; font-size: 16px; text-decoration: none; background: none; border: 0; cursor: pointer; font-family: inherit; min-height: 40px; }
.top-links a:hover, .top-links button:hover { color: #fff; }

/* Carátula */
.player-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini.pen { margin-left: 0; color: var(--link); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.field-v .mini + .mini, .field-v .pen + .mini { margin-left: 4px; }
.field-v .pen { margin-left: auto; }

/* Lista de radios (administrador) */
.rl { padding: 0; gap: 0; }
.rl-title { margin: 0; padding: 16px 20px; font-size: 17px; font-weight: 600; color: #333; border-bottom: 1px solid #E3E3E3; background: #FAFAFA; }
.rl-title i { color: #555; }
.rl-info { margin: 20px; border-left: 4px solid #17A2B8; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px #EEE; padding: 14px 20px; display: flex; flex-direction: column; gap: 10px; }
.rl-info p { margin: 0; font-size: 16px; color: #444; }
.rl-search { display: flex; align-items: center; border: 1px solid #CED4DA; border-radius: 4px; overflow: hidden; }
.rl-search i { padding: 0 14px; color: #444; background: #E9ECEF; align-self: stretch; display: flex; align-items: center; }
.rl-search input { flex: 1 1 auto; border: 0; min-height: 40px; padding: 0 12px; font-family: inherit; font-size: 15px; min-width: 0; }
.rl-multi { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 0 20px 16px; font-size: 16px; }
.rl-multi select { min-height: 38px; border: 1px solid #CED4DA; border-radius: 4px; padding: 0 8px; background: #F1F1F1; }
.rl .table-wrap { padding: 0 20px 20px; }
.rl-table { min-width: 1150px; font-size: 15px; }
.rl-table th { background: #17A2B8; color: #fff; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 700; border-bottom: 0; padding: 12px 10px; vertical-align: bottom; }
.rl-table td { background: #2B2F33; color: #F1F1F1; border-bottom: 1px solid #3A3F44; padding: 14px 10px; vertical-align: top; }
.rl-table tbody tr:nth-child(odd) td { background: #3A3F45; }
.rl-table input[type=checkbox] { width: 18px; height: 18px; }
.rl-user { color: #fff; font-weight: 800; text-decoration: none; font-size: 16px; }
.rl-user:hover { color: #9FD3FF; }
.rl-sub { color: #AEB6BD; font-size: 12px; }
.rl-on { color: #3DDC61; font-weight: 800; }
.rl-off { color: #FF7B7B; font-weight: 800; }
.rl-ver { color: #5BB8FF; font-weight: 800; }
.rl-ctrl { display: flex; flex-direction: column; gap: 4px; width: 60px; }
.rl-btn { height: 30px; border: 0; border-radius: 3px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; cursor: pointer; text-decoration: none; }
.rl-btn.go { background: #28A745; }
.rl-btn.stop { background: #6C757D; }
.rl-btn.gear { background: #FFC107; color: #1A1A1A; }
.rl-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Crear radio */
.cr-h { margin: 18px 20px 12px; font-size: 16px; color: #3A4652; font-weight: 700; padding-bottom: 10px; border-bottom: 1px solid #E3E3E3; }
.cr-box { margin: 0 20px 8px; border: 1px solid #1F2A36; border-radius: 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, .22); padding: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 16px; max-width: 800px; }
.cr-box label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: #444; }
.cr-check { flex-direction: row !important; align-items: center; gap: 8px !important; }
.cr-check input { width: 18px; height: 18px; }
.ig { display: flex; border: 1px solid #CED4DA; border-radius: 4px; overflow: hidden; }
.ig-ico { width: 40px; background: #E9ECEF; display: flex; align-items: center; justify-content: center; border-right: 1px solid #CED4DA; flex: none; }
.ig input, .ig select, .cr-sel, .cr-manual input, .cr-manual select { flex: 1 1 auto; min-width: 0; min-height: 40px; border: 0; padding: 0 12px; font-family: inherit; font-size: 15px; background: #fff; color: #333; }
.ig input[readonly] { background: #E9ECEF; }
.cr-sel, .cr-manual input, .cr-manual select { border: 1px solid #CED4DA; border-radius: 4px; }
.cr-manual { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.cr-btn { font-size: 18px; padding: 0 22px; margin-top: 12px; }

/* Pestañas de la radio */
.rtabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); background: #fff; padding: 10px 12px 0; border: 1px solid #DCDCDC; border-bottom-color: var(--line); }
.rtabs a { padding: 10px 14px; color: #17A2B8; text-decoration: none; font-weight: 600; border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0; margin-bottom: -1px; }
.rtabs a.on { background: #fff; border-color: var(--line); color: #2B3A47; }
.hint { margin: 0; color: #444; font-size: 14px; }
.pl-tools { display: flex; flex-wrap: wrap; gap: 6px; background: #EEF1F3; border: 1px solid var(--line); padding: 8px; border-radius: 4px; }
.pl-tools .btn { min-height: 38px; font-size: 14px; background: #5A6268; }
.pl-tools .btn-go { background: var(--ok-btn); }
.pl-tools .btn-bad { background: var(--bad); }
.tag-on { align-self: center; background: #E6F6EA; color: var(--ok); font-weight: 800; padding: 6px 10px; border-radius: 4px; }
.trks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 640px; overflow: auto; }
.trk { display: flex; align-items: center; gap: 10px; background: #F1F3F5; border: 1px solid #E3E6E8; border-radius: 3px; padding: 6px 10px; cursor: grab; }
.trk.drag { opacity: .5; }
.trk-h { color: #9AA3AA; }
.trk-n { flex: 1 1 auto; min-width: 0; color: #1A8AD8; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.trk-s { color: var(--muted); font-size: 12px; }
.trk .mini { margin-left: 0; }
.sch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; align-items: start; }
.sw { min-width: 52px; min-height: 30px; border-radius: 4px; border: 1px solid #B9C3CA; background: #fff; font-weight: 800; cursor: pointer; }
.sw.on { background: #28A745; color: #fff; border-color: #28A745; }
button.item { font-family: inherit; }
.cr-box select, .cr-box input[type=date], .cr-box input[type=number], .cr-box input[type=text], .cr-box input:not([type]), .cr-box input[type=email] { min-height: 40px; padding: 0 10px; border: 1px solid #CED4DA; border-radius: 4px; background: #fff; font-family: inherit; font-size: 15px; color: #333; }
.cr-box .ig input, .cr-box .ig select { border: 0; }
.cr-box input[readonly] { background: #E9ECEF; }

/* ===== Tamaños como SonicPanel (más compacto) ===== */
html, body { font-size: 14px; }
button, input, select { font-size: 14px; }
.top { min-height: 54px; }
.top .brand { min-width: 305px; padding: 6px 18px; }
.brand-mark { width: 34px; height: 34px; }
.brand-name { font-size: 19px; }
.top-right { font-size: 12px; padding: 8px 14px; }
.top-links a, .top-links button { font-size: 15px; }
.side { flex: 0 0 305px; }
.side-search { padding: 0; border-bottom: 1px solid #D4D4D4; }
.side-search input { min-height: 38px; border: 0; border-radius: 0; font-size: 14px; padding: 0 12px; }
.side-search .sbtn { width: 28px; height: 26px; margin: 6px 6px 6px 0; border: 0; border-radius: 4px; background: #F26B2B; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.group-btn { min-height: 42px; font-size: 14px; padding: 0 10px; }
.group-btn > span[aria-hidden] { display: none; }
.group-items { padding: 4px 0; }
.item { font-size: 13px; min-height: 39.5px; padding: 0 15px; gap: 6px; }
.item i { font-size: 12px; }
.item.active { background: #E6E6E6; color: #1A1A1A; font-weight: 600; }
.item.active i { color: #E53935; }
.item.active span.lbl, .item.active { color: var(--link); }
.main { padding: 10px 16px 0; gap: 14px; }
.crumbs { padding: 4px 0 10px; }
.crumbs strong { font-size: 15px; }
.linkbtn { font-size: 15px; min-height: 30px; padding: 0; }
.panel h2 { font-size: 15px; padding: 12px 20px; border-bottom-width: 3px; }
.panel h2 small { font-size: 15px; }
.panel-body { padding: 20px 20px 18px; gap: 14px; }
.tabs { border-bottom-color: #DEE2E6; }
.tab { font-size: 15px; min-height: 42px; padding: 0 15px; font-weight: 400; }
.fields { padding: 18px 16px 10px; gap: 6px 12px; }
.field { gap: 6px; margin-bottom: 8px; }
.field > span:first-child { font-size: 14px; }
.field-v { min-height: 31px; font-size: 13.5px; padding: 3px 8px; }
.mini { min-height: 24px; font-size: 11px; padding: 0 8px; }
.bar { padding: 10px; }
.btn { min-height: 36px; font-size: 15px; font-weight: 400; padding: 0 12px; }
.btn i { font-size: 15px; }
.player-art { width: 100px; min-height: 100px; }
.player-row { padding: 8px 12px; gap: 8px; }
.pbtn { width: 32px; height: 32px; border-radius: 6px; background: linear-gradient(#fff, #DCE3E9); border: 1px solid #8DA7BC; color: #6B7C8A; }
.pbtn svg { width: 13px; height: 13px; }
.ptrack { height: 8px; }
.player-time { font-size: 10.5px; font-style: italic; color: #555; }
.player-now { font-size: 13px; text-align: center; padding: 4px 8px; }
.vol i { color: #6B7C8A; font-size: 12px; }
.stats-head { font-size: 15px; padding: 14px 20px; }
.chart-y { height: 260px; font-size: 11px; }
.chart-area { height: 260px; }
.chart-x span { font-size: 12px; }
.gauges { padding: 18px 12px; gap: 16px 8px; }
.gauge-ring { width: 108px; height: 108px; }
.gauge-ring svg { width: 108px; height: 108px; }
.gauge-ring span { font-size: 22px; }
.gauge-pct { font-size: 17px; }
.gauge-label { font-size: 10px; }
.card { padding: 18px; gap: 12px; }
.card h2 { font-size: 16px; }
.form label, .cr-box label { font-size: 14px; font-weight: 400; }
.form input, .form select, .login input { min-height: 36px; font-size: 14px; border-radius: 3px; }
.cr-box select, .cr-box input[type=date], .cr-box input[type=number], .cr-box input[type=text], .cr-box input:not([type]), .cr-box input[type=email], .cr-box input[type=password], .cr-box textarea { min-height: 36px; font-size: 14px; }
.rtabs a { font-size: 15px; font-weight: 400; padding: 10px 14px; }
table { font-size: 13px; }
.rl-table, .rl-table th { font-size: 14px; }
footer { font-size: 14px; margin: 14px -16px 0; }
/* Página tipo SonicPanel: pestañas + aviso + caja con sombra + botón centrado */
.sp { background: #fff; border: 1px solid #DCDCDC; padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.sp-alert { background: #CCE5FF; border: 1px solid #B8DAFF; color: #1A1A1A; padding: 12px 18px; border-radius: 3px; font-size: 14px; }
.sp-alert i { color: #E53935; }
.sp-alert.ok { background: #D4EDDA; border-color: #C3E6CB; }
.sp-alert.warn { background: #FFF3CD; border-color: #FFEEBA; }
.sp-box { border: 1px solid #222; border-radius: 4px; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); padding: 22px 16px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
@media (max-width: 700px) { .sp-box { grid-template-columns: 1fr; } }
.sp-box label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; margin-bottom: 10px; min-width: 0; }
.sp-box label.full { grid-column: 1 / -1; }
.sp-box input, .sp-box select, .sp-box textarea { min-height: 36px; padding: 0 12px; border: 1px solid #CED4DA; border-radius: 3px; background: #fff; font-family: inherit; font-size: 14.5px; color: #495057; width: 100%; }
.sp-box textarea { padding: 8px 12px; min-height: 90px; }
.sp-box input[readonly] { background: #E9ECEF; }
.sp-box .strong { font-weight: 700; }
.sp-box .help { color: #1565C0; }
.sp-save { align-self: center; background: #007BFF; color: #fff; border: 0; border-radius: 3px; font-size: 18px; padding: 10px 18px; cursor: pointer; font-family: inherit; }
.sp-save:disabled { opacity: .6; }
.sp-code { width: 100%; min-height: 110px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; padding: 10px; border: 1px solid #CED4DA; border-radius: 3px; background: #F8F9FA; color: #333; resize: vertical; }
.sp-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sp-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sp-links a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border: 1px solid #DEE2E6; border-radius: 4px; text-decoration: none; color: #333; font-size: 13px; text-align: center; }
.sp-links a i { font-size: 30px; color: #1A6FC4; }
.sp-links a:hover { background: #F4F8FC; }
.sp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border: 1px solid #DCDCDC; }
.sp-kpis > div { padding: 14px; border-right: 1px solid #EEE; display: flex; flex-direction: column; gap: 4px; }
.sp-kpis b { font-size: 22px; color: #1A6FC4; }
.sp-kpis span { font-size: 12px; color: #555; }
.sp-table th { background: #17A2B8; color: #fff; text-transform: none; letter-spacing: 0; font-size: 13px; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 180px; border-left: 1px solid #CCC; border-bottom: 1px solid #CCC; padding: 0 4px; }
.bars div { flex: 1 1 0; background: #3D8FD1; min-height: 1px; position: relative; }
.bars-x { display: flex; gap: 3px; padding: 4px 4px 0; font-size: 10px; color: #555; }
.bars-x span { flex: 1 1 0; text-align: center; overflow: hidden; white-space: nowrap; }
.map { height: 460px; border: 1px solid #DCDCDC; }
.top-links { align-self: stretch; }
.top-links a, .top-links button { display: inline-flex; align-items: center; gap: 6px; min-height: 0; height: 100%; padding: 0; line-height: 1; }
.item i.yt { color: #E53935 !important; }
.item i.fb { color: #1877F2 !important; }
/* Reproductor como SonicPanel */
.spplayer { display: flex; align-items: stretch; gap: 4px; }
.spp-art { width: 100px; min-height: 100px; background: #1B2733; color: #9CC6F2; display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.spp-art img { width: 100px; height: 100%; object-fit: cover; display: block; }
.spp-box { flex: 1 1 auto; min-width: 0; border: 1px solid #3EA6E8; background: #EAEAEA; display: flex; flex-direction: column; }
.spp-row { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; padding: 10px 14px 4px 20px; }
.spp-btn { width: 34px; height: 34px; border-radius: 6px; border: 1px solid #8DB9DD; background: linear-gradient(#E9EDF0, #C9D1D8); box-shadow: 0 0 0 2px #CFE6F8, inset 0 1px 0 #fff; color: #6E7A84; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.spp-btn.sm { width: 26px; height: 26px; }
.spp-btn svg { width: 13px; height: 13px; }
.spp-btn.sm svg { width: 10px; height: 10px; }
.spp-mid { flex: 1 1 auto; min-width: 60px; display: flex; flex-direction: column; gap: 3px; padding-top: 14px; }
.spp-track { height: 9px; background: #D2D2D2; border-radius: 1px; overflow: hidden; }
.spp-track span { display: block; height: 100%; background: #3EA6E8; }
.spp-time { font-size: 11px; font-style: italic; color: #333; }
.spp-v { color: #8A949C; font-size: 14px; }
.spp-row input[type=range] { width: 46px; accent-color: #1E88E5; }
.spp-now { background: #CFCFCF; color: #555; font-weight: 700; font-size: 13px; text-align: center; padding: 2px 8px; overflow-wrap: anywhere; }
.top-links a.back { font-size: 13px; color: #BFC7CE; }
.tab { padding: 0 12px; }
.bars div { max-width: 60px; margin: 0 auto; }
.card.rl { padding: 0; }
.rtabs a { font-size: 14.5px; padding: 9px 11px; }
/* Menú lateral más compacto */
.item { min-height: 31px; padding-top: 3px; padding-bottom: 3px; line-height: 1.25; }
.group-items { padding: 3px 0; }
.group-btn { min-height: 40px; }
/* Menú lateral con su propio desplazamiento (como SonicPanel); el contenido no se mueve con él */
@media (min-width: 800px) {
  .shell { flex-wrap: nowrap; align-items: flex-start; }
  .side { position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
/* Cajas con columna de icono (info azul, ajustes naranja, código verde) */
.co { display: flex; border: 1px solid; border-radius: 3px; overflow: hidden; }
.co-i { width: 46px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; flex: none; position: relative; }
.co-i::after { content: ''; position: absolute; right: -7px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-right: 0; border-left-color: inherit; }
.co-b { flex: 1; min-width: 0; padding: 16px; font-size: 14px; line-height: 1.6; background: #fff; }
.co.blue { border-color: #5A9BEB; } .co.blue .co-i { background: #4A8DF0; border-left-color: #4A8DF0; color: #fff; }
.co.orange { border-color: #F8C27A; } .co.orange .co-i { background: #FF9800; }
.co.green { border-color: #A5D6A7; } .co.green .co-i { background: #5CB85C; }
.co.blue .co-i::after { border-left-color: #4A8DF0; } .co.orange .co-i::after { border-left-color: #FF9800; } .co.green .co-i::after { border-left-color: #5CB85C; }
.co .sp-box { border: 0; box-shadow: none; padding: 4px 0 0; }
.co .sp-code { min-height: 60px; color: #1565C0; background: #fff; }
.pl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 330px)); gap: 26px; }
.pl-card { border: 1px solid #DDD; border-radius: 4px; background: #fff; display: flex; flex-direction: column; }
.pl-card h3 { margin: 0; padding: 14px 20px; font-size: 21px; font-weight: 400; background: #F5F5F5; border-bottom: 1px solid #DDD; }
.pl-card .pv { margin: 20px 20px 12px; height: 160px; overflow: hidden; position: relative; background: #000; }
.pl-card .pv iframe { width: 1280px; height: 800px; border: 0; transform: scale(.234); transform-origin: 0 0; pointer-events: none; }
.pl-card ul { list-style: none; margin: 0; padding: 0 20px; font-size: 14px; line-height: 1.65; }
.pl-card ul li:first-child { font-weight: 700; }
.pl-card .btn { margin: 18px 20px 20px; justify-content: center; font-size: 18px; min-height: 46px; background: #007BFF; }
/* Panel principal: medidas como SonicPanel */
.panel h2 { padding: 11px 20px; font-size: 15px; border-bottom: 3px solid #1C8ADB; }
.field .fa-pen { color: #1A6FC4; font-size: 13px; }
.chart { padding: 14px 10px 10px 4px; }
.chart-y { height: 265px; width: 26px; font-size: 11px; color: #333; }
.chart-area { height: 265px; background-image: linear-gradient(#E3E3E3 1px, transparent 1px); background-position: 0 0; border-left-color: #999; border-bottom-color: #999; }
.chart-col { border-right: 1px solid #ECECEC; }
.chart-col div { width: 75%; min-height: 0; }
.chart-x span { font-size: 12px; color: #333; }
.gauges { grid-template-columns: repeat(3, 190px); justify-content: start; padding: 22px 24px; gap: 16px 4px; }
@media (max-width: 700px) { .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gauge-ring svg circle:first-child { stroke: #CCCCCC; }
.gauge-ring span { font-size: 24px; color: #1E7BC8; }
.gauge-pct { font-size: 17px; color: #A8A8A8; border-bottom-color: #C8C8C8; margin-right: 14%; }
.gauge-label { font-size: 9.5px; color: #444; }
/* Menú lateral más angosto */
.side { flex: 0 0 255px; width: 255px; }
.top .brand { min-width: 255px; }
.item { font-size: 12.5px; padding-left: 12px; padding-right: 10px; }
.group-btn { font-size: 13.5px; }
/* Lista de radios: colores vivos y filas bajas como SonicPanel */
.rl-table th { background: #17A2B8; font-size: 14px; padding: 10px; }
.rl-table td, .rl-table tbody tr:nth-child(odd) td { background: #212529; color: #FFFFFF; border-bottom: 1px solid #32383E; padding: 10px; font-size: 14.5px; vertical-align: top; }
.rl-table tbody tr:hover td { background: #2A2F35; }
.rl-on { color: #28A745; }
.rl-off { color: #FF5B5B; }
.rl-ver { color: #1E90FF; }
.rl-ver.v26 { color: #20C997; }
.rl-sub { color: #9AA5AE; }
.rl-ctrl { flex-direction: row; width: auto; gap: 4px; }
.rl-btn { width: 34px; height: 28px; font-size: 15px; }
.rl-c { white-space: nowrap; }
/* Celular y tabletas */
.menu-btn { display: none; background: none; border: 0; color: #fff; font-size: 22px; padding: 0 14px; cursor: pointer; min-height: 54px; }
@media (max-width: 799px) {
  .menu-btn { display: block; }
  .top { flex-wrap: nowrap; }
  .top .brand { min-width: 0; background: transparent; padding: 6px 0; }
  .top-links { display: none; }
  .top-right { display: none; }
  .shell { display: block; }
  .side { position: fixed; z-index: 20; top: 54px; left: 0; bottom: 0; width: 280px; max-width: 85vw; overflow-y: auto; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 4px 0 16px rgba(0, 0, 0, .25); }
  body.menu-open .side { transform: none; }
  body.menu-open::after { content: ''; position: fixed; inset: 54px 0 0 0; background: rgba(0, 0, 0, .35); z-index: 15; }
  .main { padding: 10px 10px 0; }
  .grid4 { grid-template-columns: 1fr; }
  .tabs, .rtabs { flex-wrap: nowrap; overflow-x: auto; }
  .tab, .rtabs a { white-space: nowrap; }
  .fields, .sp-box, .cr-box, .form { grid-template-columns: 1fr !important; }
  .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 6px; }
  .spplayer { flex-direction: column; }
  .spp-art { width: 100%; min-height: 160px; }
  .spp-art img { width: 100%; height: 160px; }
  .sp { padding: 14px 12px 18px; }
  .rl-info, .rl-multi, .rl .table-wrap { margin-left: 0; margin-right: 0; padding-left: 10px; padding-right: 10px; }
  .crumbs strong { font-size: 14px; }
  .chart-y, .chart-area { height: 200px; }
  .pl-cards { grid-template-columns: 1fr; }
  footer { margin: 14px -10px 0; }
}
/* Estado del servidor */
.sv { padding: 0; gap: 0; }
.sv-h { margin: 0; padding: 14px 20px; font-size: 16px; font-weight: 400; color: #333; background: #F5F5F5; border-top: 1px solid #E3E3E3; border-bottom: 1px solid #E3E3E3; }
.sv-h:first-child { border-top: 0; }
.sv-h i { color: #4A5560; }
.sv-b { padding: 16px 20px 20px; }
.sv-b p { margin: 0 0 14px; font-size: 15px; color: #333; }
.sv-b hr { border: 0; border-top: 1px solid #E3E3E3; margin: 6px 0 16px; }
.sv-blue { color: #0D6EFD; font-weight: 700; }
.sv-b .ok { font-weight: 700; }
.sv-gs { display: flex; flex-wrap: wrap; gap: 30px 60px; padding: 4px 10px; }
.sv-g { display: flex; flex-direction: column; align-items: center; width: 220px; }
.sv-g .gauge-pct { align-self: flex-end; font-size: 26px; margin-right: 0; border-bottom: 2px solid #BDBDBD; min-width: 110px; }
.sv-ring { width: 170px; height: 170px; margin-top: -10px; }
.sv-ring span { color: #BDBDBD !important; font-size: 34px !important; }
.sv-l { font-size: 19px; color: #444; margin-top: 4px; }
.sv-pre { margin: 0; font-size: 13px; line-height: 1.6; max-height: 520px; overflow: auto; white-space: pre; }
.sv-ring svg { width: 170px !important; height: 170px !important; }
.sv-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.pk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 330px)); gap: 20px; }
.pk { border: 1px solid #DDD; border-radius: 4px; background: #fff; }
.pk h3 { margin: 0; padding: 14px 20px; font-size: 24px; font-weight: 400; background: #F5F5F5; border-bottom: 1px solid #DDD; }
.pk .pkb { padding: 16px 20px 20px; font-size: 15px; line-height: 1.6; color: #444; }
.pk .pkb b { color: #333; }
.pk .acts { display: flex; gap: 10px; margin-top: 14px; }
.side .item i.fa-solid:not(.fa-circle-chevron-right) { width: 16px; text-align: center; }
/* Top 50 y tablas claras */
.t50.rl-table th, .t50.rl-table td, .t50.rl-table tbody tr:nth-child(odd) td { background: #fff; color: #222; border: 1px solid #DEE2E6; font-size: 15px; padding: 8px 10px; }
.t50.rl-table th { background: #E9ECEF; color: #333; }
.t50.rl-table tbody tr:nth-child(odd) td { background: #F2F2F2; }
.t50 a { color: #222; text-decoration: none; }
.t50-bar { position: relative; height: 16px; background: #CED4DA; border-radius: 3px; overflow: hidden; margin-top: 2px; }
.t50-bar span { display: block; height: 100%; background: #28A745; }
.t50-bar b { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 16px; color: #222; }
.brand-img { max-height: 40px; max-width: 220px; display: block; }
.brand-img.login { max-height: 80px; max-width: 260px; }
.cr-h { font-size: 16px; color: #3A4652; }
.sv-sub { margin: 4px 0 0; font-size: 17px; color: #3A4652; padding-bottom: 10px; border-bottom: 1px solid #E3E3E3; }
.sv-ul { margin: 0; padding-left: 26px; line-height: 1.8; font-size: 15px; color: #444; }
.svc th, .svc td { font-size: 15px !important; background: #fff !important; border: 0 !important; border-bottom: 1px solid #E3E3E3 !important; padding: 12px !important; }
.tgl { display: inline-flex; }
.tgl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tgl span { width: 62px; height: 28px; border-radius: 14px; background: #B5B5B5; position: relative; cursor: pointer; transition: background .15s; }
.tgl span::after { content: 'OFF'; position: absolute; left: 32px; top: 6px; font-size: 11px; color: #fff; font-weight: 700; }
.tgl span::before { content: ''; position: absolute; left: 2px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .15s; }
.tgl input:checked + span { background: #28A745; }
.tgl input:checked + span::before { left: 36px; }
.tgl input:checked + span::after { content: 'ON'; left: 10px; }
.tgl input:focus-visible + span { outline: 2px solid #1565C0; outline-offset: 2px; }
.tglb { min-width: 62px; min-height: 28px; border-radius: 14px; border: 0; background: #B5B5B5; color: #fff; font-weight: 700; cursor: pointer; }
.tglb.on { background: #28A745; }
.svc-box { background: #E2E3E5; border: 1px solid #D6D8DB; border-radius: 3px; text-align: center; padding: 20px; }
.svc-box h2 { font-size: 40px; margin: 10px 0 20px; color: #333; }
.ed-bar { display: flex; flex-wrap: wrap; gap: 4px; border: 1px solid #CCC; border-bottom: 0; padding: 6px; background: #F7F7F7; }
.ed-b { min-width: 30px; height: 28px; border: 1px solid #CCC; background: #fff; border-radius: 3px; cursor: pointer; }
.ed { border: 1px solid #CCC; min-height: 360px; max-height: 520px; overflow: auto; padding: 12px; background: #fff; font-family: Helvetica, Arial, sans-serif; font-size: 14px; }
.rp h3 { background: #ADD8E6 !important; }
.dom td { background: #fff !important; color: #222 !important; border-bottom: 1px solid #E3E3E3 !important; }
.dom th { background: #fff !important; color: #222 !important; border-bottom: 2px solid #DEE2E6; }
.dom-n { font-size: 20px; font-weight: 700; color: #1A3550; }
.br-cur { border: 1px solid #DDD; display: inline-flex; padding: 6px; min-width: 120px; min-height: 40px; align-items: center; margin-top: 6px; background: #fff; }
.br-cur img { max-height: 60px; max-width: 200px; }

/* Intervalos de Lista de Reproducción */
.sp.iv { padding: 0; background: transparent; border: 0; box-shadow: none; }
.iv-title { margin: 0 0 6px; padding: 16px 22px; font-size: 15px; font-weight: 400; color: #333; background: #F7F7F7; border: 1px solid #E3E3E3; border-radius: 3px; }
.iv-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; align-items: start; }
.iv-p { background: #fff; border: 1px solid #E3E3E3; border-radius: 3px; display: flex; flex-direction: column; min-height: 100%; }
.iv-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; font-size: 14px; color: #333; background: #F7F7F7; border-bottom: 1px solid #E3E3E3; }
.iv-link { font-size: 12px; color: #6c757d; text-decoration: none; }
.iv-link:hover { text-decoration: underline; }
.iv-b { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.iv-b .ig select { flex: 1; min-height: 38px; border: 1px solid #CED4DA; border-left: 0; border-radius: 0 3px 3px 0; padding: 0 12px; font-size: 14px; color: #495057; background: #fff; }
.iv-modes { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.iv-modes legend { font-size: 14px; color: #333; margin-bottom: 10px; padding: 0; }
.iv-modes label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #444; cursor: pointer; }
.iv-modes input { width: 16px; height: 16px; accent-color: #007BFF; margin: 0; }
.iv-sub { border: 1px solid #E3E3E3; border-radius: 3px; padding: 16px 10px; }
.iv-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 14px; border: 1px solid #333; border-radius: 4px; box-shadow: 0 3px 6px rgba(0,0,0,.25); }
.iv-f { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #333; }
.iv-f[hidden] { display: none !important; }
.iv-f input[type=number], .iv-f input[type=time] { min-height: 38px; border: 1px solid #CED4DA; border-radius: 3px; padding: 0 12px; font-size: 14px; }
.iv-days { grid-column: 1 / -1; }
.iv-days > div { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.iv-days label { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.iv-ck { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.iv-ck input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: #007BFF; flex: none; }
.iv-ck b { display: block; font-size: 14px; color: #222; }
.iv-ck small { display: block; font-size: 13px; color: #6c757d; line-height: 1.6; margin-top: 2px; }
.iv-ft { margin-top: auto; padding: 12px 20px; background: #F7F7F7; border-top: 1px solid #E3E3E3; }
.iv-add { background: #007BFF; color: #fff; min-height: 38px; padding: 0 14px; font-size: 15px; }
.iv-empty { margin: 0; padding: 10px 0; font-size: 14px; color: #6c757d; }
.iv-t { width: 100%; font-size: 13px; }
.iv-t th, .iv-t td { padding: 9px 10px; border-bottom: 1px solid #EEE; text-align: left; vertical-align: middle; }
.iv-tag { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 7px; border-radius: 3px; font-size: 11px; background: #E9ECEF; color: #333; }
.iv-tag.mix { background: #17A2B8; color: #fff; } .iv-tag.int { background: #FFC107; color: #222; }
.iv-del { min-height: 30px; padding: 0 9px; }
@media (max-width: 999px) { .iv-grid { grid-template-columns: 1fr; } }

/* Imagen de portada */
.cv-del { background: #6C757D; color: #fff; min-height: 38px; padding: 0 12px; font-size: 15px; }
.cv-del:hover { background: #5A6268; }
.cv-row { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; }
.cv-img { width: 360px; max-width: 100%; height: 320px; object-fit: cover; display: block; }
.cv-drop { flex: 1; min-width: 260px; max-width: 750px; height: 300px; border: 2px dashed #1E88E5; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; color: #8A8A8A; font-family: Georgia, 'Times New Roman', serif; font-size: 22px; text-align: center; padding: 20px; background: #fff; }
.cv-drop i { font-size: 54px; color: #777; margin-bottom: 18px; }
.cv-drop.on, .cv-drop:hover { background: #F3F8FE; }
.cv-drop:focus-within { outline: 2px solid #1E88E5; outline-offset: 2px; }
@media (max-width: 799px) { .cv-drop { font-size: 17px; height: 220px; } }
.iv-t th { text-transform: none; letter-spacing: 0; font-size: 13px; color: #333; }
.iv .table-wrap { overflow-x: auto; } .iv-t { min-width: 0 !important; table-layout: auto; } .iv-t td:nth-child(2) { min-width: 140px; } .iv-opts { min-width: 110px; }

/* Intervalos configurados (tabla como SonicPanel) */
.iv-title { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.iv-tz { font-size: 13px; color: #333; }
.iv-tz a { color: #1E88E5; text-decoration: none; }
.iv-t thead th { background: #E9ECEF; font-size: 15px; font-weight: 700; color: #333; padding: 8px 6px; vertical-align: bottom; border-bottom: 2px solid #DEE2E6; }
.iv-t tbody tr:nth-child(odd) { background: #F2F2F2; }
.iv-t td { padding: 10px 6px; font-size: 15px; color: #222; vertical-align: top; border-bottom: 0; }
.iv-bd { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 3px; font-size: 11.5px; font-weight: 700; color: #fff; white-space: nowrap; }
.iv-bd.gray { background: #6C757D; } .iv-bd.green { background: #28A745; } .iv-bd.blue { background: #17A2B8; }
td > .iv-bd.green:only-child, td > .iv-bd.gray:only-child { padding: 6px 10px; font-size: 13px; }
.iv-sw { position: relative; display: inline-flex; align-items: center; width: 52px; height: 30px; padding: 0 0 0 10px; border: 1px solid #ADB5BD; border-radius: 3px; background: #E9ECEF; color: #333; font-size: 14px; cursor: pointer; }
.iv-sw::after { content: ''; position: absolute; right: 2px; top: 2px; bottom: 2px; width: 10px; background: #fff; border-radius: 2px; }
.iv-sw.on { background: #28A745; border-color: #28A745; color: #fff; justify-content: flex-start; }
.iv-sw:not(.on) { justify-content: flex-end; padding: 0 8px 0 0; }
.iv-sw:not(.on)::after { left: 2px; right: auto; }
.iv-acts { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.iv-ab { width: 38px; height: 30px; border: 0; border-radius: 3px; color: #fff; font-size: 15px; cursor: pointer; }
.iv-ab.ed { background: #007BFF; } .iv-ab.del { background: #DC3545; }
.iv-ab:hover { filter: brightness(.9); }
.iv-cancel { background: #6C757D; color: #fff; min-height: 38px; padding: 0 14px; }
.iv-cancel[hidden] { display: none; }
.iv-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.iv-acts .iv-ab { flex: none; height: 30px !important; min-height: 0 !important; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.iv-t thead th { font-size: 14px; } .iv-t td { font-size: 14px; }

/* Biblioteca de Música */
.ml { min-height: 100vh; background: #F3F4F8; display: flex; flex-direction: column; }
.ml-top { height: 56px; background: #000; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; position: sticky; top: 0; z-index: 5; }
.ml-logo { display: flex; align-items: baseline; gap: 6px; color: #fff; text-decoration: none; }
.ml-logo i { color: #F28C28; font-size: 24px; align-self: center; }
.ml-logo span { font-size: 24px; letter-spacing: 2px; font-weight: 300; }
.ml-logo small { font-size: 13px; vertical-align: super; }
.ml-top nav { display: flex; gap: 20px; }
.ml-top nav a { color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.ml-body { display: flex; flex: 1; min-height: 0; }
.ml-side { width: 305px; flex: none; background: #fff; border-right: 1px solid #E3E3E3; position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; }
.ml-side h3 { margin: 0; padding: 12px 10px; font-size: 14px; color: #1C3F5E; background: #E2E5EA; border-top: 3px solid #D0D6DE; }
.ml-host { list-style: none; margin: 0; padding: 6px 14px; }
.ml-host li { padding: 10px 0; font-size: 13.5px; color: #222; }
.ml-host i { width: 18px; }
.ml-f { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px 16px; border-bottom: 1px solid #E5E5E5; text-decoration: none; color: #222; font-size: 15px; }
.ml-f:hover, .ml-f.on { background: #FFF4E0; }
.ml-ico { position: relative; width: 56px; height: 46px; display: inline-flex; align-items: center; justify-content: center; }
.ml-ico .fa-folder { font-size: 52px; color: #E31B1B; position: absolute; }
.ml-ico .fa-music { position: relative; color: #fff; font-size: 16px; margin-top: 6px; }
.ml-main { flex: 1; min-width: 0; padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-content: start; }
.ml-p { background: #fff; border: 1px solid #E3E3E3; min-height: 160px; }
.ml-p h2 { margin: 0; padding: 14px 20px; font-size: 15px; font-weight: 700; color: #FFC107; background: #000; border-bottom: 3px solid #E08E0B; }
.ml-p h2 .help { color: #FFC107; }
.ml-p > :not(h2) { margin: 20px; }
.ml-new { display: flex; flex-wrap: wrap; gap: 10px; }
.ml-new input { width: 200px; min-height: 38px; border: 1px solid #CED4DA; border-radius: 3px; padding: 0 12px; font-size: 15px; }
.ml-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 3px; background: #FFC107; color: #222; font-size: 15px; cursor: pointer; }
.ml-btn:hover { background: #E0A800; }
.ml-cur { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.ml-del { border: 0; border-radius: 3px; background: #DC3545; color: #fff; padding: 6px 10px; cursor: pointer; font-size: 13px; }
.ml-list { border: 1px solid #EEE; max-height: 60vh; overflow-y: auto; }
.ml-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #F0F0F0; font-size: 14px; }
.ml-row:nth-child(odd) { background: #FAFAFA; }
.ml-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-row small { color: #777; white-space: nowrap; }
.ml-row i { color: #E08E0B; }
.ml-row button { border: 0; background: none; color: #DC3545; cursor: pointer; font-size: 15px; }
.ml-empty { margin: 0; padding: 14px; color: #777; font-size: 14px; }
.ml-drop { max-width: none; height: 220px; font-size: 19px; }
.ml .co-b { padding: 12px 14px; }
@media (max-width: 899px) {
  .ml-body { flex-direction: column; }
  .ml-side { width: auto; position: static; height: auto; }
  .ml-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .ml-main { grid-template-columns: 1fr; padding: 10px; }
  .ml-top nav a:first-child { display: none; }
}

/* Ventana Editar/Actualizar Radios */
body.md-open { overflow: hidden; }
.md-bg { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.55); overflow-y: auto; padding: 20px 12px; display: flex; justify-content: center; align-items: flex-start; }
.md { width: 1020px; max-width: 100%; background: #fff; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.md-h { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid #E5E5E5; }
.md-h h2 { margin: 0; font-size: 20px; font-weight: 500; color: #222; }
.md-x { border: 0; background: none; font-size: 28px; line-height: 1; color: #777; cursor: pointer; padding: 0 4px; }
.md-x:hover { color: #222; }
.md-c { padding: 16px 16px 22px; }
.md-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid #DEE2E6; margin-bottom: 22px; }
.md-tabs button { border: 1px solid transparent; border-radius: 4px 4px 0 0; background: none; padding: 10px 16px; margin-bottom: -1px; font-size: 16px; color: #17A2B8; cursor: pointer; }
.md-tabs button.on { color: #495057; background: #fff; border-color: #DEE2E6 #DEE2E6 #fff; }
.md-tabs button:hover:not(.on) { color: #0F7A8A; }
.md-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px; background: #E9E9E9; border: 1px solid #DDD; border-radius: 3px; }
.md-bar > div { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.md-b { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 9px; border: 0; border-radius: 3px; font-size: 14px; color: #fff; text-decoration: none; cursor: pointer; white-space: nowrap; }
.md-b:hover { filter: brightness(.92); } .md-b:disabled { opacity: .6; cursor: default; }
.md-b.gray { background: #6C757D; } .md-b.green { background: #28A745; } .md-b.teal { background: #17A2B8; } .md-b.red { background: #DC3545; } .md-b.blue { background: #007BFF; } .md-b.yellow { background: #FFC107; color: #222; }
.md-b.lg { min-height: 38px; padding: 0 12px; font-size: 16px; }
.md-b.big { min-height: 48px; padding: 0 18px; font-size: 20px; }
.md-st { margin-left: 6px; font-size: 16px; } .md-st .on { color: #28A745; } .md-st .off { color: #DC3545; }
.md-q { margin: 22px 0 8px; font-size: 16px; padding-bottom: 6px; border-bottom: 1px solid #E5E5E5; }
.md-prog { height: 16px; background: #E9ECEF; border-radius: 3px; overflow: hidden; margin-bottom: 22px; }
.md-prog span { display: block; height: 100%; background: #28A745; color: #fff; font-size: 11px; line-height: 16px; padding-left: 10px; white-space: nowrap; }
.md-susp { margin: 12px 0 0; color: #B02A37; font-size: 14px; }
.md-box { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; padding: 16px 16px 20px; border: 1px solid #222; border-radius: 4px; box-shadow: 0 4px 8px rgba(0,0,0,.3); }
.md-f { display: flex; flex-direction: column; gap: 7px; font-size: 15px; color: #222; min-width: 0; }
.md-f input, .md-f select { min-height: 38px; border: 1px solid #CED4DA; border-radius: 3px; padding: 0 12px; font-size: 15px; color: #495057; background: #fff; width: 100%; }
.md-f input.ro { background: #E9ECEF; color: #495057; }
.md-f input:focus, .md-f select:focus { outline: 0; border-color: #80BDFF; box-shadow: 0 0 0 3px rgba(0,123,255,.25); }
.md-save { text-align: center; margin-top: 24px; }
.md-note { margin: 12px 2px 0; font-size: 13px; color: #555; }
.md-info { margin: 14px 0; padding: 14px 16px; background: #CCE5FF; border: 1px solid #B8DAFF; border-radius: 3px; color: #004085; font-size: 16px; }
.md-mail { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.md-mail .ig { width: 440px; max-width: 100%; }
.md-mail input { flex: 1; min-height: 38px; border: 1px solid #CED4DA; border-left: 0; border-radius: 0 3px 3px 0; padding: 0 12px; font-size: 15px; }
.md-mail .md-b { min-height: 38px; padding: 0 14px; font-size: 15px; }
.rl-btn.gear { border: 0; cursor: pointer; }
@media (max-width: 700px) {
  .md-box { grid-template-columns: 1fr; }
  .md-h h2 { font-size: 16px; }
  .md-tabs button { font-size: 14px; padding: 8px 10px; }
  .md-b.big { font-size: 17px; }
}

.md-ft { border-top: 1px solid #E5E5E5; height: 32px; }
.md-h h2 i { font-size: 18px; }
.djm-prev { display: flex; justify-content: center; padding: 10px 0 20px; }
.djm-prev iframe { width: 460px; max-width: 100%; height: 160px; border: 0; }
.djm-code code { font-family: Consolas, Menlo, monospace; font-size: 13px; color: #333; white-space: pre-wrap; word-break: break-all; }
.djm-code .co-b { background: #FAFAFA; padding: 26px 16px; }
/* Barra superior fija y menú lateral con su propio scroll que llega hasta la última opción */
@media (min-width: 800px) {
  .top { position: sticky; top: 0; z-index: 30; }
  .side { top: 54px; height: calc(100vh - 54px); padding-bottom: 24px; }
}
/* La ventana de editar radio mantiene el mismo tamaño en todas las pestañas (como SonicPanel) */
#red .md { min-height: calc(100vh - 40px); display: flex; flex-direction: column; }
#red .md-c { flex: 1; }
/* Tamaño de la ventana igual a SonicPanel: más baja, con margen arriba y abajo */
#red.md-bg { padding-top: 50px; padding-bottom: 50px; }
#red .md { width: 1016px; min-height: calc(100vh - 140px); }
#red .md-h { padding: 14px 16px; }
#red .md-h h2 { font-size: 19px; }
#red .md-tabs button { font-size: 15.5px; padding: 9px 16px; }
#red .md-c { padding: 14px 16px 18px; }
#red .md-q { margin-top: 18px; }
.md-prog { height: 14px; } .md-prog span { line-height: 14px; text-align: center; padding: 0; }
#red .md-box { gap: 10px 12px; padding: 14px 16px 16px; }
#red .md-f { gap: 5px; }
#red .md-f input.ro[readonly] { font-weight: 600; }
#red .md-b.big { min-height: 46px; font-size: 19px; }
@media (max-height: 760px) { #red.md-bg { padding-top: 20px; padding-bottom: 20px; } #red .md { min-height: calc(100vh - 40px); } }

/* Subir MP3 (como SonicPanel) */
.pu-drop { position: relative; margin-top: 16px; min-height: 500px; border: 2px dashed #1E88E5; border-radius: 6px; padding: 60px 20px 24px; background: #fff; }
.pu-drop.on { background: #F3F8FE; }
.pu-close { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 3px; background: #6C757D; color: #fff; font-size: 15px; cursor: pointer; z-index: 2; }
.pu-close:hover { background: #5A6268; }
.pu-pick { display: flex; flex-direction: column; align-items: center; gap: 18px; cursor: pointer; color: #8A8A8A; font-family: Georgia, 'Times New Roman', serif; font-size: 22px; text-align: center; padding: 10px 0 20px; }
.pu-pick i { font-size: 54px; color: #888; }
.pu-pick:focus-within { outline: 2px solid #1E88E5; outline-offset: 4px; }
.pu-list { max-width: 1320px; margin: 0 auto; }
.pu-row { display: grid; grid-template-columns: 1fr 160px 120px; align-items: center; gap: 12px; padding: 9px 6px; font-family: Georgia, 'Times New Roman', serif; font-size: 17px; color: #111; }
.pu-row:nth-child(odd) { background: #F4F4F4; }
.pu-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pu-m { height: 5px; background: #E9ECEF; border-radius: 3px; overflow: hidden; }
.pu-m span { display: block; height: 100%; width: 0; background: #1E88E5; transition: width .2s; }
.pu-row.done .pu-m span { background: #28A745; }
.pu-st { text-align: right; font-family: inherit; font-size: 18px; color: #5B9BE6; }
.pu-st .ok { color: #28A745; } .pu-st .bad { color: #DC3545; font-size: 13px; font-family: system-ui, sans-serif; }
@media (max-width: 700px) { .pu-row { grid-template-columns: 1fr 70px 40px; font-size: 14px; } .pu-pick { font-size: 17px; } .pu-drop { min-height: 300px; } }

/* Pistas de la lista (acordeón como SonicPanel) */
.trks { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.trks .trk { display: block; border: 1px solid #DDD; border-radius: 3px; background: #fff; padding: 0; }
.trk-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; background: linear-gradient(#fff, #F7F7F7); }
.trk-row:hover { background: #F2F8FC; }
.trk.open { border-color: #F0C36D; }
.trk.open .trk-row { background: #fff; border-bottom: 1px solid #F0C36D; }
.trk.open .trk-n { color: #E67E22; }
.trk-car { color: #E67E22; font-size: 12px; width: 10px; transition: transform .15s; }
.trk.open .trk-car { transform: rotate(90deg); }
.trk-row .trk-n { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; color: #1E88C7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-row .trk-s { font-size: 12px; color: #888; white-space: nowrap; }
.trk-i { border: 0; background: none; color: #1E88C7; cursor: pointer; font-size: 15px; padding: 2px 4px; }
.trk-i:hover { color: #0D5C8C; }
.trk.open .trk-i { color: #E67E22; }
.trk-d { padding: 16px 20px; background: linear-gradient(#F7F7F7, #EDEDED); }
.trk-in { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding-left: 150px; }
.trk-art { width: 200px; height: 200px; flex: none; background: #222; display: flex; align-items: center; justify-content: center; border: 3px solid #111; }
.trk-art img { width: 100%; height: 100%; object-fit: cover; }
.trk-art i { color: #666; font-size: 54px; }
.trk-meta ul { list-style: none; margin: 0 0 12px; padding: 0; font-size: 15px; line-height: 1.4; color: #333; }
.trk-meta a { color: #1E9BE0; font-weight: 700; text-decoration: none; }
.trk-btns { display: flex; flex-wrap: wrap; gap: 5px; }
.tb { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 3px; font-size: 15px; color: #fff; cursor: pointer; }
.tb:hover { filter: brightness(.92); } .tb:disabled { opacity: .6; }
.tb.teal { background: #17A2B8; } .tb.green { background: #28A745; } .tb.yellow { background: #FFC107; color: #222; } .tb.red { background: #DC3545; } .tb.blue { background: #007BFF; } .tb.gray { background: #6C757D; }
.trk-ed { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.trk-ed[hidden] { display: none; }
.trk-ed label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.trk-ed input { min-height: 34px; border: 1px solid #CED4DA; border-radius: 3px; padding: 0 8px; font-size: 14px; }
.trk-ed > div { grid-column: 1 / -1; }
.trk-hint { line-height: 1.7; }
@media (max-width: 900px) { .trk-in { padding-left: 0; } .trk-art { width: 140px; height: 140px; } .trk-ed { grid-template-columns: 1fr; } }

/* Cuentas DJ (como SonicPanel) */
.djtop { line-height: 1.7; }
.djf { max-width: 800px; border: 1px solid #222; border-radius: 4px; box-shadow: 0 4px 8px rgba(0,0,0,.3); padding: 14px 16px 18px; background: #fff; }
.djf-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.djf-h h3, .djf-h2 { margin: 0 0 8px; padding-bottom: 8px; font-size: 15px; font-weight: 700; color: #222; border-bottom: 1px solid #E5E5E5; min-width: 60%; }
.djf-h2 { margin-top: 26px; width: 82%; }
.djf-hb { display: flex; gap: 5px; flex-wrap: wrap; }
.djf-g { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 8px; }
.djf-f { display: flex; flex-direction: column; gap: 5px; font-size: 15px; color: #333; min-width: 0; }
.djf-f.full { grid-column: 1 / -1; margin-top: 10px; }
.djf-f input, .djf-f select { min-height: 38px; border: 1px solid #CED4DA; border-radius: 3px; padding: 0 12px; font-size: 15px; color: #495057; background: #fff; width: 100%; }
.djf-f select { font-weight: 700; color: #333; }
.djf-f input.ro { background: #E9ECEF; }
.djf-f .ig input { border-left: 0; border-radius: 0 3px 3px 0; }
.ig-ico.red i { color: #DC3545; }
.djf-ft { text-align: center; margin-top: 22px; } .djf-ft.left { text-align: left; }
.tb.lg { min-height: 38px; font-size: 16px; } .tb.xl { min-height: 46px; padding: 0 18px; font-size: 20px; }
.djpick { display: flex; gap: 18px; flex-wrap: wrap; padding: 10px; background: #CCE5FF; border: 1px solid #B8DAFF; border-radius: 3px; }
.djpick select, .djpick input { min-height: 38px; width: 300px; max-width: 100%; border: 1px solid #CED4DA; border-radius: 3px; padding: 0 12px; font-size: 14px; background: #fff; }
.djpic-m { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.djpic-m img { width: 220px; height: 220px; object-fit: cover; border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.djpic-none { text-align: center; color: #888; } .djpic-none i { font-size: 90px; color: #CCC; }
@media (max-width: 700px) { .djf-g { grid-template-columns: 1fr; } .djf-h h3, .djf-h2 { min-width: 0; width: 100%; } }
.adj-form { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } @media (max-width: 1000px) { .adj-form { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 700px) { .adj-form { grid-template-columns: 1fr !important; } }

/* Inicio de sesión (como SonicPanel) */
.lg-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px 12px; background: #2E3238; }
.lg-card { width: 500px; max-width: 100%; background: #fff; border-radius: 10px; box-shadow: 0 0 9px rgba(0,0,0,.3); padding-bottom: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.lg-logo { display: flex; justify-content: flex-end; padding: 21px 20px 0; min-height: 86px; }
.lg-img { max-width: 220px; max-height: 70px; object-fit: contain; }
.lg-txt { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.lg-tag { font-family: 'Courier New', monospace; font-weight: 700; font-size: 13px; letter-spacing: 1px; color: #1D3D6E; margin-bottom: 2px; }
.lg-name { font-size: 30px; font-weight: 900; font-style: italic; letter-spacing: -.5px; color: #F07A1A; text-transform: uppercase; }
.lg-sub { margin-top: 4px; font-size: 14px; font-weight: 700; color: #555; letter-spacing: .3px; }
.lg-form { padding: 20px 15px 0; display: flex; flex-direction: column; gap: 20px; }
.lg-row { display: flex; height: 50px; }
.lg-ico { width: 50px; flex: none; background: #042445; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.lg-row input { flex: 1; min-width: 0; height: 50px; border: 1px solid #DEE0E4; border-left: 0; border-radius: 0; padding: 0 15px; font-size: 16px; color: #000; background: #fff; outline: none; }
.lg-row input:focus { border-color: #9DB3CC; }
.lg-row input::placeholder { color: #8A8F98; }
.lg-btn { margin-top: 10px; height: 51px; border: 0; border-radius: 0; background: #042445; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.lg-btn:hover { background: #0A3460; } .lg-btn:disabled { opacity: .7; }
.lg-err { margin: -6px 0 0; padding: 10px 12px; background: #F8D7DA; color: #842029; font-size: 14px; border-radius: 3px; }
.lg-err[hidden] { display: none; }

.sch-now { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 3px; background: #28A745; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sch-now i { font-size: 8px; animation: schp 1.2s ease-in-out infinite; }
@keyframes schp { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .sch-now i { animation: none; } }

/* Resumen de Cuenta: anillos más grandes y gráfico con líneas más juntas (como SonicPanel) */
.gauge-ring:not(.sv-ring) { width: 128px; height: 128px; }
.gauge-ring:not(.sv-ring) span { font-size: 32px; }
.gauges { grid-template-columns: repeat(3, 200px); justify-content: space-evenly; }
.chart-y span { font-size: 11px; line-height: 1; }
.chart-area { background-image: linear-gradient(#E6E6E6 1px, transparent 1px); }
@media (max-width: 799px) { .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gauge-ring:not(.sv-ring) { width: 110px; height: 110px; } .gauge-ring:not(.sv-ring) svg { width: 110px; height: 110px; } }

/* Estadísticas de canciones y reportes */
.tk-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tk-seg { display: inline-flex; border: 1px solid #17A2B8; border-radius: 4px; overflow: hidden; }
.tk-seg button, .tk-seg label { border: 0; background: #fff; color: #17A2B8; padding: 8px 14px; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tk-seg button.on { background: #17A2B8; color: #fff; }
.tk-seg label + label, .tk-seg button + button { border-left: 1px solid #17A2B8; }
.tk-bar input, .rp-dl input[type=date], .rp-dl input[type=month] { min-height: 38px; border: 1px solid #CED4DA; border-radius: 3px; padding: 0 10px; font-size: 14px; }
.tk-link { border: 0; background: none; padding: 0; color: #1E88C7; font-weight: 700; font-size: 14px; cursor: pointer; text-align: left; }
.tk-link:hover { text-decoration: underline; }
.tk-t td:first-child { width: 40px; color: #888; }
.tk-m { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.tk-art { width: 200px; height: 200px; background: #222; display: flex; align-items: center; justify-content: center; flex: none; }
.tk-art img { width: 100%; height: 100%; object-fit: cover; } .tk-art i { font-size: 54px; color: #666; }
.tk-ul { list-style: none; margin: 0; padding: 0; line-height: 1.7; font-size: 15px; }
.rp-form { max-width: 900px; }
.rp-dl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px; background: #F2F2F2; border: 1px solid #DDD; border-radius: 4px; }

/* Mapa de oyentes en vivo */
.lv-map { height: 420px; border: 1px solid #DDD; border-radius: 4px; z-index: 0; }
.lv-map[hidden] { display: none; }
.lv-mk span { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(30, 136, 229, .85); color: #fff; font-weight: 700; font-size: 13px; border: 3px solid rgba(255,255,255,.9); box-shadow: 0 1px 6px rgba(0,0,0,.35); }

.top .brand .brand-svg { width: 190px; height: 41px; display: block; }
.top .brand .brand-img { max-height: 44px; max-width: 220px; object-fit: contain; display: block; }
.lg-svg .brand-svg { width: 224px; height: 48px; display: block; }

/* Resumen de Cuenta: todo centrado en su columna (porcentaje, anillo y texto) */
.gauge { align-items: center; }
.gauge-ring:not(.sv-ring) { margin: 0 auto; flex: none; }
.gauge-ring:not(.sv-ring) svg { display: block; width: 128px; height: 128px; }
.gauge-ring:not(.sv-ring) span { inset: 0; }
.gauge-pct { align-self: flex-end; margin-right: calc(50% - 76px); }
.gauge-label { max-width: 200px; }
/* Anillos que se adaptan al ancho (no se salen de la caja) */
.gauges { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; justify-content: stretch; padding-left: 10px; padding-right: 10px; }
.gauge-ring:not(.sv-ring) { width: min(128px, 100%); height: auto; aspect-ratio: 1; }
.gauge-ring:not(.sv-ring) svg { width: 100%; height: 100%; }
.gauge-pct { margin-right: max(4px, calc(50% - 76px)); }
@media (max-width: 520px) { .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .gauge-ring:not(.sv-ring) span { font-size: 26px; } }
/* v2.2.14: resumen de cuenta como SonicPanel (anillos ~108px, columnas fijas a la izquierda) */
.gauges { grid-template-columns: repeat(3, 190px) !important; justify-content: start; padding: 26px 20px 18px; gap: 6px 4px; }
.gauge { gap: 4px; }
.gauge-ring:not(.sv-ring) { width: 108px; height: 108px; aspect-ratio: auto; }
.gauge-ring:not(.sv-ring) svg { width: 108px; height: 108px; }
.gauge-ring:not(.sv-ring) span { font-size: 24px; color: #1E7BC8; }
.gauge-pct { font-size: 17px; color: #A8A8A8; margin-right: 18px; min-width: 64px; text-align: right; }
.gauge-label { font-size: 10px; color: #444; }
@media (max-width: 640px) { .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* v2.2.15: círculos idénticos a SonicPanel (porcentaje y línea dibujados en el SVG) */
.gauges { grid-template-columns: repeat(3, 190px) !important; justify-content: start; padding: 14px 16px 14px; gap: 2px 6px; }
.gauge { gap: 0; }
.gauge-ring.gz { width: 190px !important; height: 140px !important; aspect-ratio: auto !important; margin: 0; }
.gauge-ring.gz svg { width: 190px !important; height: 140px !important; overflow: visible; }
.gauge-ring.gz span { inset: auto; left: 95px; top: 82px; transform: translate(-50%, -50%); font-size: 22px; color: #1C7CC0; }
.gauge-label { font-size: 10px; color: #333; margin-top: 4px; }
@media (max-width: 640px) { .gauges { grid-template-columns: repeat(2, 190px) !important; justify-content: center; } }
/* v2.2.16: reproductor del panel como SonicPanel */
.spp-box { border: 1px solid #29A3E0; background: #ECECEC; }
.spp-row { gap: 10px; padding: 18px 16px 8px 14px; align-items: center; }
.spp-btn { width: 36px; height: 36px; border-radius: 8px; border: 2px solid #6CC3EE; background: #D9D9D9; box-shadow: none; color: #1E9BE0; }
.spp-btn svg { width: 17px; height: 17px; }
.spp-btn.sm { width: 26px; height: 26px; border-radius: 6px; border: 1px solid #8CCDEF; background: #CFCFCF; color: #8A8A8A; }
.spp-btn.sm svg { width: 11px; height: 11px; }
.spp-btn:hover { background: #E2E2E2; }
.spp-mid { gap: 4px; padding-top: 18px; }
.spp-track { height: 14px; background: #C6C6C6; border-radius: 0; }
.spp-track span { background: #2FA4E7; }
.spp-time { font-size: 11px; font-style: italic; color: #444; }
.spp-v { color: #9A9A9A; font-size: 15px; }
.spp-row input[type=range] { -webkit-appearance: none; appearance: none; width: 46px; height: 4px; background: #2FA4E7; border-radius: 0; margin: 0 2px; cursor: pointer; }
.spp-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 3px; height: 10px; background: #2FA4E7; border: 0; border-radius: 0; }
.spp-row input[type=range]::-moz-range-thumb { width: 3px; height: 10px; background: #2FA4E7; border: 0; border-radius: 0; }
.spp-row input[type=range]::-moz-range-track { height: 4px; background: #2FA4E7; border: 0; }
.spp-now { background: #C8C8C8; color: #555; font-size: 12.5px; padding: 1px 8px 2px; }
/* v2.2.17: botón copiar solo con ícono; se vuelve un check al copiar */
.mini.cpy { width: 34px; min-width: 34px; height: 30px; min-height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: #555; }
.mini.cpy.ok { color: #fff; background: #28A745; border-color: #28A745; }
/* v2.2.17: campos de Info de Radio más bajos, en una sola línea (como SonicPanel) */
.fields { padding: 12px 14px 6px; gap: 2px 12px; }
.field { gap: 3px; margin-bottom: 6px; }
.field > span:first-child { font-size: 13.5px; }
.field-v { min-height: 30px; padding: 2px 4px 2px 8px; font-size: 13px; overflow-wrap: normal; }
.field-v .fv-t { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field-v .mini.cpy { width: 28px; min-width: 28px; height: 24px; min-height: 24px; font-size: 12px; flex: none; }
.field-v .pen { flex: none; }
/* v2.2.18: login DJ como SonicPanel y fondos personalizables */
.lg-wrap.lg-dj { background-color: #061F33; }
.lg-dj .lg-logo { padding-top: 16px; min-height: 80px; }
.lg-dj .lg-form { padding-top: 14px; }
.br-bg { width: 240px; height: 135px; border: 1px solid #CED4DA; border-radius: 4px; background: #0B1F33; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #AAB; font-size: 12px; }
.br-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* v2.2.18: Panel DJ con el diseño de SonicPanel */
.djp { display: grid; grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: 58px auto; min-height: 100vh; background: #F4F4F6; }
.djp-top { grid-column: 1 / -1; display: flex; align-items: stretch; background: #232323; color: #fff; }
.djp-brand { width: 320px; flex: none; background: #1B1B1B; display: flex; align-items: center; padding: 0 18px; border-bottom: 2px solid #3A3A3A; }
.djp-logo { display: flex; align-items: flex-end; gap: 4px; color: #fff; }
.djp-logo b { font-size: 28px; font-style: italic; font-weight: 900; letter-spacing: -1px; text-shadow: 2px 0 #C62828; }
.djp-logo small { font-size: 9px; font-style: italic; letter-spacing: 1px; margin-bottom: 6px; }
.djp-user { margin-left: auto; display: flex; align-items: flex-start; gap: 4px; }
.djp-user img { width: 90px; height: 82px; object-fit: cover; display: block; background: #444; }
.djp-user > div { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: 10px 14px 0 2px; height: 82px; }
.djp-v { font-size: 12px; color: #EEE; line-height: 1.5; text-align: right; } .djp-dim { color: #CCC; }
.djp-out { background: none; border: 0; color: #9A9A9A; font-size: 15px; font-weight: 700; cursor: pointer; padding: 0 0 4px; min-height: 0; }
.djp-out:hover { color: #fff; }
.djp-side { background: #F7F7F9; border-right: 1px solid #DDD; }
.djp-sh { background: #E3E3E5; padding: 12px 10px; font-weight: 800; color: #1B3550; font-size: 14px; }
.djp-sh i { color: #D9232D; }
.djp-it { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; text-align: left; padding: 11px 15px; font-size: 13px; font-weight: 600; color: #222; cursor: pointer; text-decoration: none; min-height: 0; border-radius: 0; }
.djp-it i { color: #222; font-size: 12px; } .djp-it:hover, .djp-it.on { background: #E7E7E9; color: #C62828; } .djp-it:hover i, .djp-it.on i { color: #D9232D; }
.djp-main { padding: 0 16px 20px; min-width: 0; }
.djp-bc { border-bottom: 1px solid #E2E2E2; padding: 12px 0; margin-bottom: 16px; }
.djp-bc button { background: none; border: 0; color: #1A73C8; font-weight: 700; font-size: 15px; cursor: pointer; padding: 0; min-height: 0; }
.djp-bc i { color: #222; }
.djp-grid { gap: 0 !important; background: #fff; border: 1px solid #E2E2E2; }
.djp-panel { border-radius: 0; box-shadow: none; border: 0; }
.djp-panel > h2 { background: #000 !important; border-bottom: 3px solid #A50E0E !important; }
.djp-grid > .djp-panel + .djp-panel { border-left: 1px solid #E2E2E2; }
.djp-note { margin-top: 16px; }
.djp-foot { margin-top: 24px; background: #E9E9EB; text-align: center; padding: 28px 10px; font-size: 14px; color: #333; }
.djp-plain { border: 1px solid #E2E2E2; border-radius: 0; box-shadow: none; }
.djp-ph { background: #F7F7F7; border-bottom: 1px solid #E2E2E2; padding: 12px 20px; font-size: 15px; }
.djp-picrow { display: flex; gap: 30px; align-items: stretch; flex-wrap: wrap; margin-top: 16px; }
.djp-pic { width: 360px; max-width: 100%; height: 300px; object-fit: cover; display: block; background: #EEE; }
.djp-drop { flex: 0 1 750px; min-height: 300px; border: 2px dashed #1E88E5; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; color: #888; font-family: Georgia, 'Times New Roman', serif; font-size: 22px; line-height: 1.6; cursor: pointer; padding: 20px; }
.djp-drop i { font-size: 50px; color: #777; } .djp-drop.over { background: #EEF6FD; }
.djp-mf { border: 1px solid #222; border-radius: 4px; box-shadow: 0 3px 8px rgba(0,0,0,.25); padding: 6px 16px 18px; margin-top: 16px; }
.djp-mf h3 { font-size: 15px; font-weight: 800; margin: 12px 0 14px; padding-bottom: 8px; border-bottom: 1px solid #E2E2E2; }
.djp-m2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; } .djp-m2 label { display: flex; flex-direction: column; gap: 6px; } .djp-m2 .full { grid-column: 1 / -1; }
@media (max-width: 860px) { .djp { grid-template-columns: 1fr; grid-template-rows: auto; } .djp-side { border-right: 0; } .djp-brand { width: auto; } .djp-m2 { grid-template-columns: 1fr; } .djp-user img { width: 60px; height: 58px; } .djp-user > div { height: 58px; } }
.djp .field .pen { border: 0; background: none; padding: 0 2px; min-height: 0; width: auto; color: #1A73C8; }
.djp .sp-alert > i, .md .sp-alert > i { color: #0D5AA7; }
.djp .djp-main .sp-alert { font-size: 14.5px; line-height: 1.6; }
.djp .djp-full { grid-column: 1 / -1; }
.djp-ig { display: flex; min-height: 38px; }
.djp-ig .ig-ico { width: 40px; display: flex; align-items: center; justify-content: center; background: #E9ECEF; border: 1px solid #CED4DA; border-right: 0; border-radius: 4px 0 0 4px; }
.djp-ig input { flex: 1; min-width: 0; background: #E9ECEF; border: 1px solid #CED4DA; border-radius: 0 4px 4px 0; padding: 0 10px; font-size: 14px; color: #333; }
/* v2.2.22: ventanas del Panel DJ centradas en la pantalla, como SonicPanel */
.md-bg.md-center { align-items: center; padding-top: 30px; padding-bottom: 30px; }
.md-center .md-h h2 i { display: none; }
.md-center .djp-mf { padding: 8px 16px 24px; }
.md-center .djp-mf h3 + .djp-m2 { margin-bottom: 26px; }
.md-center .djp-m2 { gap: 18px 12px; }
/* v2.2.23: menú lateral como SonicPanel. Cliente: más ancho, letra seminegrita y filas más altas. Admin: compacto. */
.cli .side { flex: 0 0 320px; width: 320px; }
.cli .side-search { padding: 6px 8px; border-bottom: 0; background: #fff; }
.cli .side-search input { border: 1px solid #A9CBEA; border-right: 0; border-radius: 4px 0 0 4px; min-height: 34px; font-size: 15px; }
.cli .side-search .sbtn { margin: 0; height: 34px; width: 34px; border-radius: 0 4px 4px 0; border: 1px solid #A9CBEA; border-left: 0; background: #fff; position: relative; }
.cli .side-search .sbtn i { background: #F26B2B; color: #fff; border-radius: 4px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.cli .group { border-top: 1px solid #9CC4E8; }
.cli .group-btn { min-height: 41px; background: #E2E2E4; font-size: 14.5px; font-weight: 800; color: #12263A; padding: 0 8px; border-bottom: 1px solid #D4D4D4; }
.cli .group-btn i { color: #1A73C8; font-size: 15px; }
.cli .group-items { padding: 4px 0; }
.cli .item { font-size: 13.5px; font-weight: 600; color: #1A1A1A; min-height: 39px; padding: 0 15px; gap: 5px; line-height: 1.5; }
.cli .item i { font-size: 12px; color: #1A1A1A; }
.cli .item.active { background: #E6E6E6; color: #1A1A1A; }
.cli .item.active i { color: #D9232D; }
@media (max-width: 900px) { .cli .side { width: 280px; flex-basis: 280px; } }
.adm .side { flex: 0 0 245px; width: 245px; }
.adm .group-btn { min-height: 38px; background: #E7E7E7; font-size: 14px; font-weight: 800; color: #1A1A1A; padding: 0 10px; }
.adm .group-items { padding: 2px 0; }
.adm .item { font-size: 13px; font-weight: 400; color: #1A1A1A; min-height: 30px; padding: 2px 10px; gap: 6px; line-height: 1.3; }
.adm .item i { color: #1A1A1A !important; font-size: 12px; }
.adm .item.active { background: #D3D3D3; color: #1A1A1A; font-weight: 400; }
.adm .group[data-g=radios] .group-btn i, .adm .group[data-g=rev] .group-btn i, .adm .group[data-g=multi] .group-btn i { color: #3B6EA8; }
.adm .group[data-g=ssl] .group-btn i, .adm .group[data-g=mail] .group-btn i { color: #28A745; }
.adm .group[data-g=brand] .group-btn i { color: #E5533D; }
/* v2.2.25: botón de play muestra que está conectando */
.spp-btn.spp-cn svg { display: none; }
.spp-btn.spp-cn::after { flex: none; box-sizing: border-box; content: ''; width: 14px; height: 14px; border: 2px solid #9CCFF0; border-top-color: #1E9BE0; border-radius: 50%; animation: zrspin .7s linear infinite; }
@keyframes zrspin { to { transform: rotate(360deg); } }
/* v2.2.27: animaciones de carga como SonicPanel */
.loading { display: flex; justify-content: center; padding: 34px 10px; }
.zr-load { position: relative; display: inline-block; width: 60px; height: 60px; animation: zrspin 1.6s cubic-bezier(.55,.15,.45,.85) infinite; }
.zr-load i { position: absolute; left: 50%; top: 50%; border-radius: 50%; filter: blur(.3px); }
.spp-art { position: relative; } .spp-art:has(img) { background: #EEEEF0; }
.spp-art img { opacity: 0; transition: opacity .25s; position: relative; z-index: 1; }
.spp-art img.ok { opacity: 1; }
.dots2 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.dots2 i { width: 20px; height: 20px; border-radius: 50%; background: #F05A5A; animation: zrdot 1s ease-in-out infinite alternate; }
.dots2 i + i { background: #5E5865; animation-delay: -.5s; }
@keyframes zrdot { 0% { transform: translateX(0) scale(1); } 100% { transform: translateX(6px) scale(.75); } }
.spp-art img.ok ~ .dots2, .spp-art:has(img.ok) .dots2 { display: none; }
/* v2.2.29: Programar Listas de Reproducción como SonicPanel */
.sch { background: #fff; border: 1px solid #E3E3E3; border-radius: 3px; padding-bottom: 20px; }
.sch > .iv-title { border: 0; border-bottom: 1px solid #E3E3E3; border-radius: 0; margin: 0; }
.sch > .iv-title i { font-size: 15px; }
.sch-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 20px 20px 0; align-items: start; }
.sch-grid2 .iv-p { min-height: 0; }
.sch-b { padding: 20px 16px 26px; display: flex; flex-direction: column; gap: 18px; }
.sch-top { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 1px solid #222; border-radius: 4px; box-shadow: 0 3px 8px rgba(0,0,0,.25); padding: 14px 14px 18px; }
.sch-b label { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: #222; min-width: 0; }
.sch-b label > b { font-weight: 700; }
.sch-ig { display: flex; min-height: 38px; }
.sch-ig .ig-ico { width: 40px; flex: none; display: flex; align-items: center; justify-content: center; background: #E9ECEF; border: 1px solid #CED4DA; border-right: 0; border-radius: 4px 0 0 4px; color: #444; }
.sch-ig select, .sch-ig input { flex: 1; min-width: 0; min-height: 38px; border: 1px solid #CED4DA; border-radius: 0 4px 4px 0; padding: 0 10px; font-size: 15px; background: #fff; color: #333; }
.sch-top .sch-ig select { font-weight: 700; }
.sch-std { display: flex; flex-direction: column; gap: 18px; }
.sch-std[hidden], .sch-ivb[hidden], .sch-end[hidden], .sch-days[hidden] { display: none; }
.sch-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sch-box { margin: 0; border: 1px solid #DFE3E7; border-radius: 4px; background: #F7F8F9; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 16px; }
.sch-box legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; font-size: 16px; color: #1E88E5; }
.sch-box legend + * { clear: left; }
.sch-ck { flex-direction: row !important; align-items: center; gap: 8px !important; font-size: 15px; }
.sch-ck input { width: 16px; height: 16px; accent-color: #1E88E5; }
.sch-days { display: flex; gap: 14px; flex-wrap: wrap; }
.sch-submit { align-self: flex-start; background: #007BFF; color: #fff; font-size: 20px; padding: 0 48px; min-height: 48px; border-radius: 4px; box-shadow: 0 3px 8px rgba(0,0,0,.25); text-decoration: none; display: inline-flex; align-items: center; }
.sch-ivb { display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
.sch-ivb p { margin: 0; }
.sch-jh { justify-content: flex-start; gap: 16px; }
.sch-up { background: #28A745; color: #fff; min-height: 30px; padding: 0 10px; font-size: 13px; border-radius: 3px; cursor: pointer; gap: 4px; }
.sch-jt, .sch-t { width: 100%; border-collapse: collapse; min-width: 0; }
.sch-jt th { text-align: left; background: #EDEDED; padding: 8px 6px; font-size: 15px; border-bottom: 2px solid #DDD; }
.sch-jt td { padding: 7px 6px; border-bottom: 1px solid #E6E6E6; font-size: 14px; }
.sch-jt tbody tr:nth-child(odd), .sch-t tbody tr:nth-child(odd) { background: #F2F2F2; }
.sch-none { text-align: center; color: #555; font-size: 15px; padding: 8px; }
.sch-list { margin: 34px 20px 0; border-top: 1px solid #E3E3E3; padding-top: 18px; }
.sch-list h3 { margin: 0 0 12px; font-size: 19px; font-weight: 500; color: #222; }
.sch-list h3 small { font-size: 11px; color: #666; }
.sch-t { border: 1px solid #DDD; }
.sch-t th { text-align: left; vertical-align: bottom; background: #EDEDED; padding: 8px 6px; font-size: 15px; border-bottom: 2px solid #DDD; }
.sch-t td { padding: 8px 6px; border-top: 1px solid #DDD; border-left: 1px solid #E8E8E8; vertical-align: top; font-size: 15px; }
.sch-t tr[draggable] { cursor: move; } .sch-t tr.drag { opacity: .45; }
.sch-hd { color: #555; line-height: 1.1; width: 40px; } .sch-hd i { font-size: 16px; }
.sch-acts { display: flex; gap: 8px; }
.sch-ab { width: 30px; height: 26px; min-height: 0; padding: 0; border: 0; border-radius: 3px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; }
.sch-ab.ed { background: #17A2B8; } .sch-ab.del { background: #DC3545; }
@media (max-width: 1100px) { .sch-grid2 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sch-top, .sch-2 { grid-template-columns: 1fr; } }
.sch-t th, .sch-jt th { text-transform: none; letter-spacing: 0; font-weight: 700; color: #222; }
.sch-jt th:nth-child(2), .sch-jt th:nth-child(3), .sch-jt th:nth-child(4) { text-align: center; }
/* v2.2.33: pestañas de los paneles como SonicPanel (turquesa, seminegrita) */
.panel .tab, .djp .tab { color: #1A9BB5; font-weight: 600; font-size: 14.5px; min-height: 44px; padding: 0 16px; }
.panel .tab i, .djp .tab i { font-size: 13px; margin-right: 3px; }
.panel .tab[aria-selected="true"], .djp .tab[aria-selected="true"] { color: #1A9BB5; border-color: #DEE2E6; }
.panel .tab:hover, .djp .tab:hover { color: #11788C; }
/* v2.2.35: Administrar AutoDJ y pestañas de la radio como SonicPanel */
.rtabs a { color: #1A9BB5; font-weight: 600; font-size: 15px; padding: 11px 15px; }
.rtabs a.on { color: #1A9BB5; border-color: #DEE2E6; background: #fff; }
.rtabs a:hover:not(.on) { background: #E9ECEF; color: #11788C; }
.adj { background: #fff; border: 1px solid #E3E3E3; border-radius: 3px; padding: 20px 20px 24px; }
.adj > .rtabs { border: 0; border-bottom: 1px solid #DEE2E6; padding: 0; background: none; }
.adj-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; background: #E3E3E3; border: 1px solid #D6D6D6; border-radius: 3px; padding: 10px; margin: 24px 0 16px; font-size: 15px; }
.adj-bar .btn { min-height: 38px; font-size: 16px; border-radius: 3px; }
.adj-bar > span { margin-left: 4px; }
.adj-re { background: #17A2B8; color: #fff; }
.adj-del { margin-left: auto; background: #DC3545; color: #fff; }
.adj-box { border: 1px solid #222; border-radius: 4px; box-shadow: 0 3px 8px rgba(0,0,0,.25); padding: 18px 16px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; }
.adj-f { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #222; min-width: 0; }
.adj-f b { font-weight: 700; }
.adj-f select, .adj-f input { min-height: 38px; border: 1px solid #CED4DA; border-radius: 4px; padding: 0 12px; font-size: 15px; color: #333; background-color: #fff; }
.adj-f select { font-size: 14px; }
.adj-f .ro { background: #E9ECEF; }
.adj-save { margin-top: 24px; background: #17A2B8; color: #fff; font-size: 20px; padding: 0 16px; min-height: 48px; border-radius: 4px; }
@media (max-width: 700px) { .adj-box { grid-template-columns: 1fr; } .adj-del { margin-left: 0; } }
.adj .help { color: #1A73E8; }
/* v2.2.39: buscador del menú con un solo borde continuo */
.cli .side-search { position: relative; }
.cli .side-search input { border: 1px solid #A9CBEA; border-radius: 4px; padding-right: 40px; width: 100%; box-sizing: border-box; }
.cli .side-search .sbtn { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); border: 0; background: none; width: auto; height: auto; margin: 0; }
/* v2.2.40: "Cerrar Sesión" del Panel DJ quedaba tapado por la barra de "Inicio" */
.djp-top { position: relative; z-index: 5; }
.djp-user > div { height: 58px; padding-top: 6px; padding-bottom: 4px; }
.djp-user img { height: 58px; width: 64px; }

/* Códigos HTML (Widgets) igual a SonicPanel */
.wc-head{border:1px solid #333;border-radius:6px;padding:12px 12px 14px;margin:16px 0 8px;box-shadow:0 2px 6px rgba(0,0,0,.25);background:#fff}
.wc-head p{margin:0 0 10px;font-size:14px}
.wc-code{display:flex;align-items:center;gap:6px;background:#E9ECEF;border:1px solid #DDE1E5;border-radius:4px;padding:6px 6px 6px 12px;min-height:38px;max-width:300px}
.wc-code.wide{max-width:none}.wc-code code{flex:1 1 auto;min-width:0;font-family:inherit;font-size:14px;color:#495057;background:none;padding:0;word-break:break-all}
.wc-wrap{overflow-x:auto;max-width:1000px}.wc{width:100%;border-collapse:collapse;font-size:15px}
.wc th{text-align:left;font-weight:700;padding:12px;border-bottom:2px solid #DEE2E6}.wc td{padding:12px;border-top:1px solid #DEE2E6;vertical-align:top}
.wc td:first-child{width:28%}.wc td:nth-child(2){width:32%}.wc td:last-child{word-break:break-word}
.wc-art{width:100px;height:100px;object-fit:cover;display:block}.wc-dj{width:150px;height:150px;object-fit:cover;display:block}.wc-pl{width:100%;max-width:300px}
.wc-sub{margin:22px 0 4px;font-size:16px}
@media(max-width:700px){.wc,.wc thead,.wc tbody,.wc tr,.wc td{display:block;width:100%!important}.wc thead{display:none}.wc tr{border-top:1px solid #DEE2E6;padding:6px 0}.wc td{border:0;padding:6px 4px}.wc-code{max-width:none}}
.wc th{text-transform:none;letter-spacing:0;font-size:15px;color:#212529}
.wc td:nth-child(2){width:330px}.wc-code{max-width:310px}.wc-code code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal}
.wc-code.wide code{white-space:normal;word-break:break-all}

/* API JSON igual a SonicPanel */
.api-url{display:flex;align-items:center;gap:10px;padding:10px 12px;flex-wrap:wrap}
.api-url label{font-size:15px;color:#333}
.api-url input{flex:0 1 700px;min-width:0;border:1px solid #CED4DA;background:#E9ECEF;border-radius:4px;padding:8px 12px;font-size:15px;color:#495057}
.api-php{margin:0;padding:14px 0;font-family:Consolas,'Courier New',monospace;font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word;color:#222;tab-size:4}

/* Player & Listen Links igual a SonicPanel */
.pll{border-top:1px solid #DEE2E6;margin-top:16px}
.pll-r{display:flex;align-items:center;gap:22px;padding:12px;border-bottom:1px solid #DEE2E6}
.pll-r img{width:32px;height:32px;flex:none}.pll-r b{width:150px;flex:none;font-size:16px}
.pll-r textarea{flex:1;min-width:0;height:54px;resize:vertical;background:#F5F5F5;border:1px solid #CCC;border-radius:4px;padding:6px 12px;font-size:13px;color:#1E5A96;font-family:inherit}
@media(max-width:700px){.pll-r{flex-wrap:wrap;gap:10px}.pll-r textarea{flex-basis:100%}}

/* Transmisión en vivo Youtube/Facebook igual a SonicPanel */
.lv-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px}
.lv-bar input{flex:0 1 400px;min-width:0;border:1px solid #CED4DA;border-radius:4px;padding:8px 12px;font-size:15px}
.lv-bar .btn-main{margin-left:10px}.lv-stop{background:#6C757D;color:#fff;border-color:#6C757D}.lv-stop:hover{background:#5A6268}
.lv-st{margin-left:14px;font-size:15px;color:#333}.lv-st b{color:#6C757D}.lv-st .lv-on{color:#28A745}.lv-st .lv-wait{color:#E68A00}
.lv-row{align-items:flex-start;gap:30px;margin-top:6px}
.lv-ph{width:255px;height:320px;background:#DDD;display:flex;align-items:center;justify-content:center;font-size:34px;color:#111;font-family:'Arial Narrow',Arial,sans-serif;flex:none;letter-spacing:-.5px}
.lv-img{width:255px;height:auto;max-height:320px;object-fit:contain;background:#DDD;flex:none}
.lv-ul{margin:0;padding-left:20px;line-height:1.7}
@media(max-width:700px){.lv-ph,.lv-img{width:100%;height:auto;aspect-ratio:16/9}}
.rl-title .fa-youtube{color:#E52D27}.rl-title .fa-square-facebook{color:#1877F2}.lv-row .cv-drop{max-width:540px;flex:1 1 auto}

/* Estadísticas de Radio Avanzadas (como SonicPanel; claro por defecto, con modo oscuro) */
.adv{--ab:#FFFFFF;--af:#212529;--al:#DEE2E6;--ath:#F1F3F5;--atr:#FFFFFF;--atb:#DEE2E6;background:var(--ab);color:var(--af);padding:22px 26px 30px;border-radius:6px;border:1px solid #E3E3E3;max-width:1180px}
.adv.dark{--ab:#1E1E1E;--af:#E6E6E6;--al:#DDD;--ath:#2A2A2A;--atr:#2A2A2A;--atb:#555}
.adv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.adv-top h2{margin:6px 0 0;font-size:24px;font-weight:600;color:var(--af)}.adv .beta{background:#E00;color:#fff;font-size:9px;font-weight:700;padding:1px 4px;border-radius:2px;vertical-align:super}
.adv-tz{font-size:12px;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:10px}.adv-tz a{color:#2F80ED}
.adv-sw{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:12px}.adv-sw input{position:absolute;opacity:0;width:1px;height:1px}
.adv-sw span{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:22px;border-radius:4px;background:#ADB5BD;color:#fff;font-size:13px;position:relative;padding-right:10px}
.adv-sw span::after{content:'';position:absolute;right:3px;top:3px;width:8px;height:16px;background:#fff;border-radius:2px}
.adv-sw input:checked+span{background:#007BFF}.adv-sw input:focus-visible+span{outline:2px solid #007BFF;outline-offset:2px}
.adv-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--al);margin-top:18px}
.adv-tabs button{background:none;border:1px solid transparent;border-bottom:0;padding:10px 17px;font-weight:700;font-size:15px;color:var(--af);cursor:pointer;border-radius:4px 4px 0 0;margin-bottom:-1px}
.adv-tabs button.on{border-color:var(--al);background:var(--ath)}.adv-tabs button:hover:not(.on){color:#007BFF}
.adv-date{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:24px 0 36px;flex-wrap:wrap}.adv-date label{font-weight:700;font-size:15px}
.adv-date input{border:1px solid #CED4DA;border-radius:4px;padding:7px 12px;font-size:15px;background:var(--atr);color:var(--af)}
.adv-b{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:4px;padding:8px 14px;font-size:14px;cursor:pointer;color:#fff;text-decoration:none}
.adv-b.blue{background:#007BFF;font-size:16px;padding:8px 14px}.adv-b.green{background:#28A745}.adv-b.yellow{background:#FFC107;color:#212529}.adv-b.teal{background:#17A2B8}.adv-b.lg{font-size:16px;padding:9px 16px}
.adv-btn{background:#007BFF;color:#fff;border:0;border-radius:4px;padding:6px 10px;font-size:13px;margin-left:16px;cursor:pointer}
.adv-info{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#D1ECF1;color:#212529;border-radius:4px;padding:14px 20px;margin-bottom:22px;font-size:15px;line-height:1.6;flex-wrap:wrap}.adv-info .r{text-align:right;margin-left:auto}
.adv-ch{position:relative;height:500px;margin-bottom:26px}.adv-ch.pie{height:340px;margin-top:26px}
.adv-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-bottom:26px}.adv-kpi div{border-radius:4px;padding:22px 20px;color:#fff;display:flex;flex-direction:column;gap:10px}
.adv-kpi span{font-weight:700;font-size:15px}.adv-kpi b{font-size:24px}.adv-kpi .k1{background:#007BFF}.adv-kpi .k2{background:#17A2B8}.adv-kpi .k3{background:#28A745}.adv-kpi .k4{background:#343A40}
.adv-2{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:30px}.adv h3{font-size:19px;font-weight:600;margin:0 0 8px;color:var(--af)}
.adv-t{width:100%;border-collapse:collapse;font-size:15px;background:var(--atr);margin-bottom:22px}.adv-t th,.adv-t td{border:1px solid var(--atb);padding:5px 6px;text-align:left}
.adv-t th{background:var(--ath);font-weight:700}.adv-all thead th{background:#E9ECEF;color:#495057}
.adv-flag{display:inline-block;width:20px;height:15px;vertical-align:-2px;margin-right:6px;object-fit:cover}
.adv-ag{width:20px;text-align:center;margin-right:4px}.adv-ag[data-ag="Google Chrome"]{color:#4285F4}.adv-ag[data-ag="Mozilla Firefox"]{color:#FF7139}.adv-ag[data-ag="Safari"]{color:#1E90FF}.adv-ag[data-ag="Android Device"]{color:#3DDC84}
.adv-ag[data-ag="Microsoft Edge"]{color:#0C9ADA}.adv-ag[data-ag="Winamp"]{color:#F5B400}.adv-ag[data-ag="VLC Player"]{color:#FF8800}
.adv-pg{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;margin:6px 0 16px}.adv-pg button{min-width:30px;height:30px;border:1px solid #DEE2E6;background:#fff;color:#007BFF;border-radius:4px;cursor:pointer}.adv-pg button.on{background:#007BFF;color:#fff;border-color:#007BFF}
.adv-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-bottom:30px}.adv-cards div{background:#F8F9FA;color:#212529;border:1px solid #DEE2E6;border-radius:4px;padding:20px;text-align:center;display:flex;flex-direction:column;gap:8px}
.adv-cards span{font-weight:600;font-size:16px}.adv-cards b{font-size:21px;font-weight:600}
.adv-filter{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.adv-filter input,.adv-filter select{border:1px solid #CED4DA;border-radius:4px;padding:8px 12px;font-size:15px;background:var(--atr);color:var(--af)}.adv-filter select{min-width:210px}
.adv-songs thead th{background:#212529;color:#fff}.adv-link{background:none;border:0;padding:0;color:#007BFF;cursor:pointer;font:inherit;text-align:left}.adv-link:hover{text-decoration:underline}
.adv-rep{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}.adv-dl{display:flex;gap:14px;flex-wrap:wrap}.adv-set{line-height:1.8;font-size:15px}.adv-set a{color:#2F80ED}
.adv-map{height:560px;border-radius:8px}.adv-pin{position:relative;color:#2A81CB;font-size:34px;line-height:40px;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.adv-pin b{position:absolute;top:-4px;right:-10px;background:#1E73E8;color:#fff;border:2px solid #fff;border-radius:10px;font-size:11px;line-height:14px;padding:1px 4px;font-family:Arial,sans-serif}
@media(max-width:800px){.adv{padding:14px}.adv-kpi,.adv-cards,.adv-2{grid-template-columns:1fr 1fr;gap:12px}.adv-ch{height:300px}.adv-info .r{text-align:left;margin-left:0}.adv-date{justify-content:flex-start}}
.adv-2>div{min-width:0}.adv-t{table-layout:auto;min-width:0!important}.adv-t th{text-transform:none;letter-spacing:0;font-size:15px;color:var(--af)}
.adv-all thead th{color:#495057}.adv-songs thead th{color:#fff}.adv-tz>div{white-space:nowrap}.adv-t td,.adv-t th{word-break:break-word}

/* Páginas iguales a SonicPanel (lote 2) */
.h5-ul{margin:0;padding-left:20px;color:#2C6FB0}.h5-code .co-i{padding:0}.h5-cp{background:none;border:0;color:#fff;font-size:22px;cursor:pointer;width:100%;height:100%}
.h5-code pre{margin:0;padding:18px 0;font-family:Consolas,'Courier New',monospace;font-size:13px;white-space:pre-wrap;word-break:break-all}
.cv-del{background:#6C757D;color:#fff;border-color:#6C757D}.cv-del:disabled{opacity:.65}.cv-ph{font-style:italic;font-weight:800;font-size:30px;height:320px}
.lb-alert{background:#CCE5FF;border:1px solid #B8DAFF;color:#004085;border-radius:4px;padding:12px 20px;font-size:15px;line-height:1.55}.lb-alert p{margin:0}
.mic-bar{display:flex;align-items:center;gap:6px;background:#E2E3E5;border:1px solid #D6D8DB;border-radius:4px;padding:12px 20px;margin-top:16px;flex-wrap:wrap}
.mic-b{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:4px;padding:10px 16px;font-size:20px;color:#fff;cursor:pointer}.mic-b.go{background:#28A745}.mic-b.stop{background:#6C757D}.mic-b:disabled{opacity:.65;cursor:default}
.mic-st{margin-left:10px;font-size:15px;color:#333}
.vp-lang{margin:16px 0 8px;font-size:15px}.vp-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.vp-in{display:flex;align-items:stretch;flex:0 1 640px;min-width:0;border:1px solid #CED4DA;border-radius:4px;overflow:hidden;background:#fff}
.vp-in i{display:flex;align-items:center;padding:0 12px;background:#E9ECEF;color:#E53935;border-right:1px solid #CED4DA}.vp-in input{flex:1;min-width:0;border:0;padding:8px 12px;font-size:15px}
.vp-in.ro input{background:#E9ECEF;color:#495057}.vp-row select{border:1px solid #CED4DA;border-radius:4px;padding:8px 10px;font-size:15px;min-width:190px;max-width:100%}.vp-row select:disabled{background:#E9ECEF}
.vp-go{background:#007BFF;font-size:16px}.vp-test{flex-wrap:wrap}.vp-tl{flex-basis:100%;font-size:15px;margin-top:8px}
.tt-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.tt-row .vp-in i{color:#555}
.dm-t{color:#2C6FB0}.dm-h{font-weight:700;margin:22px 0 0;font-size:15px}.dm-prev{min-height:22px}
.dm-form{display:flex;flex-direction:column;gap:12px;padding:16px 18px;margin-top:24px}.dm-form label{font-size:15px}
.dm-in{display:flex;border:1px solid #CED4DA;border-radius:4px;overflow:hidden}.dm-ico{display:flex;align-items:center;padding:0 14px;background:#E9ECEF;border-right:1px solid #CED4DA;color:#444}
.dm-in textarea{flex:1;min-height:130px;border:0;padding:10px;font:inherit;resize:vertical}
.rec-t{width:100%;border-collapse:collapse;font-size:15px}.rec-t thead th{background:#212529;color:#fff;padding:14px 12px;text-align:left;font-weight:700;text-transform:none;letter-spacing:0}
.rec-t td{padding:12px;border-bottom:1px solid #DEE2E6;vertical-align:top}.rec-b{min-height:38px;font-size:15px}
.dk-tot{font-size:16px;margin:16px 0 6px}.dk-g{width:180px;align-items:center}.dk-h{margin:24px -20px 0 !important;border-top:1px solid #E3E3E3 !important;border-bottom:1px solid #E3E3E3 !important}
.dk-list{padding:18px 0;line-height:1.55;font-size:15px}.dk-foot{display:flex;align-items:center;gap:8px;background:#F7F7F7;margin:0 -20px -20px;padding:12px 20px;flex-wrap:wrap}
.dk-open{background:#6C757D;color:#fff;border-color:#6C757D;min-height:32px;font-size:14px}
.bs-l p{margin:0;font-size:15px;line-height:1.55}.bs-l .bs-i{margin-top:18px}.bs-h{background:#F7F7F7;border:1px solid #E3E3E3;border-width:1px 0;margin:22px 0 10px;padding:14px 20px;font-size:15px;font-weight:400}
.bs-ch{position:relative;height:260px}.bw-t{text-align:center;font-weight:700;color:#666;font-size:12px;margin:16px 0 0}
.lvs{display:flex;flex-direction:column;gap:22px}
.lvs-np{background:linear-gradient(90deg,#4F55D0,#8B8FF2);border-radius:12px;color:#fff;text-align:center;padding:26px 16px;display:flex;flex-direction:column;align-items:center;gap:8px}
.lvs-np>i{font-size:30px;opacity:.85}.lvs-np .lvs-k{font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.9}.lvs-np b{font-size:23px;line-height:1.3}
.lvs-badge{background:#fff;color:#333;border-radius:4px;padding:3px 14px;font-size:13px;font-weight:700}
.lvs-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.lvs-cards>div{background:#fff;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.08);padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.lvs-ic{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.lvs-ic.g{background:#E3F4E8;color:#28A745}.lvs-ic.y{background:#FFF4DC;color:#F0AD00}.lvs-ic.c{background:#DFF3F6;color:#17A2B8}.lvs-ic.r{background:#FBE3E5;color:#DC3545}
.lvs-cards .lvs-k{font-size:13px;color:#555;text-transform:uppercase;letter-spacing:.02em}.lvs-cards b{font-size:30px;font-weight:800;line-height:1}.lvs-cards b.g,.lvs-bt .g{color:#28A745}.lvs-cards b.y{color:#F0AD00}.lvs-cards b.c{color:#17A2B8}.lvs-cards b.r{color:#DC3545}
.lvs-bar{background:#fff;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.06);padding:12px 16px}.lvs-bt{display:flex;justify-content:space-between;font-size:12px;color:#555;margin-bottom:6px}
.lvs-pr{height:8px;background:#E9ECEF;border-radius:4px;overflow:hidden}.lvs-pr span{display:block;height:100%;width:0;background:#28A745;transition:width .4s}
.lvs-info{display:grid;grid-template-columns:1fr 1fr;gap:28px}.lvs-info>div{background:#fff;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.08);padding:18px 24px}
.lvs-info h3{margin:0 0 14px;font-size:16px}.lvs-info h3 i{color:#2F80ED}.lvs-info dl{display:grid;grid-template-columns:200px 1fr;gap:10px 12px;margin:0;font-size:15px}.lvs-info dt{color:#555}.lvs-info dd{margin:0;font-weight:700}
.lvs-live{background:#FFF8E5;border:1px solid #F5DFA5;border-radius:4px;padding:12px 18px;font-size:15px}.lvs-live b{color:#E53935;margin-right:4px}
.lvs-live .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#E53935;margin-right:6px;animation:lvdot 1.2s infinite}@keyframes lvdot{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.lvs-live .dot{animation:none}}
.lvs-map{height:520px;border-radius:10px;border-top:5px solid #D9534F;overflow:hidden}.lvs-h{margin:0;font-size:17px}
@media(max-width:800px){.lvs-cards{grid-template-columns:1fr 1fr;gap:12px}.lvs-info{grid-template-columns:1fr}.lvs-info dl{grid-template-columns:140px 1fr}.lvs-map{height:340px}}
.vp-in{flex:1 1 300px;max-width:640px}

/* Estadísticas en vivo — diseño "Limpia" */
.lv2{display:flex;flex-direction:column;gap:22px;margin-top:4px}
.lv2-top{display:flex;gap:26px;align-items:stretch;flex-wrap:wrap}.lv2-np{flex:1 1 380px;display:flex;gap:16px;align-items:center;min-width:0}
.lv2-cv{width:110px;height:110px;border-radius:14px;object-fit:cover;background:linear-gradient(135deg,#43C6AC,#191654);flex:none}
.lv2-tx{min-width:0;display:flex;flex-direction:column;gap:6px}.lv2-tx b{font-size:24px;line-height:1.25;color:#1C2730;overflow-wrap:anywhere}.lv2-tx>span:last-child{color:#6B7782;font-size:14px}
.lv2-live{color:#E53935;font-weight:800;font-size:12px;letter-spacing:.08em;display:flex;align-items:center;gap:4px}.lv2-live i{width:8px;height:8px;border-radius:50%;background:currentColor;animation:lvdot 1.2s infinite}
.lv2-live.off{color:#8A949C}.lv2-live.off i{animation:none}
.lv2-count{flex:0 0 220px;border-left:1px solid #E6EAEE;padding-left:26px;display:flex;flex-direction:column;justify-content:center}.lv2-count b{font-size:58px;line-height:1;color:#1C2730}.lv2-count span{color:#6B7782;font-size:14px;margin-top:4px}
.lv2-bar{height:6px;background:#EEF1F4;border-radius:3px;margin-top:10px;overflow:hidden}.lv2-bar i{display:block;height:100%;width:0;background:#2F80ED;transition:width .4s}
.lv2-kp{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #E6EAEE;border-radius:10px}.lv2-kp div{padding:14px 18px;border-right:1px solid #E6EAEE}.lv2-kp div:last-child{border:0}
.lv2-kp b{display:block;font-size:22px;color:#1C2730}.lv2-kp span{font-size:12px;color:#6B7782}
.lv2-bot{display:grid;grid-template-columns:1.6fr 1fr;gap:18px}.lv2-map{min-height:420px;border-radius:10px;overflow:hidden}
.lv2-list h4{margin:0 0 6px;font-size:14px}.lv2-list #lvtbl{max-height:400px;overflow:auto}.lv2-li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #EEF1F4;font-size:14px}
.lv2-li em{font-style:normal;color:#6B7782;white-space:nowrap}.lv2-empty{color:#6B7782;font-size:14px}.lv2-at{color:#8A949C;font-size:12px;margin:8px 0 0}
.lv2-mk span{display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(47,128,237,.85);color:#fff;font-weight:700;font-size:13px;box-shadow:0 0 0 4px rgba(47,128,237,.2)}
@media(max-width:800px){.lv2-count{border-left:0;padding-left:0;flex-basis:100%}.lv2-kp{grid-template-columns:1fr 1fr}.lv2-kp div:nth-child(2){border-right:0}.lv2-kp div:nth-child(-n+2){border-bottom:1px solid #E6EAEE}.lv2-bot{grid-template-columns:1fr}.lv2-map{min-height:300px}}
/* Estado del servidor: porcentaje y su raya centrados sobre el círculo */
.sv-g .gauge-pct{align-self:center !important;text-align:center !important;min-width:120px;margin:0 !important}