/* ==========================================================================
   SISTEMA VISUAL BINARK v2 — panel de bnkPanel (admin y cliente)       2026-10-07
   --------------------------------------------------------------------------
   Pedido de Albert: la línea gráfica del manual de marca en TODA la interfaz
   (colores, fuentes, botones, secciones y combinaciones), sofisticada y profesional.

   Capa final sobre `index-brand5.css`: NO toca el bundle (`index-U2NkRcOT.js`) ni
   `panel-ux.js`. Los scripts propios inyectan <style> en tiempo de ejecución, por eso
   los selectores llevan `html body` (más específicos) y `!important` donde compiten.

   Reglas del manual que se aplican:
   - Grafito neutro: fondo #151515, superficies #1b1b1b / #202020, líneas #2a2a2a / #333,
     texto #f5f5f5 / #9a9a9a / #6e6e6e. Sin grises con tinte ni resplandores de color.
   - Verde #5FB901 SOLO como acento: íconos, línea superior de los KPI, estado activo
     (contorno + tinte), nunca rellenos sólidos.
   - Titulares en Spartan MB; texto, rótulos y botones en Bai Jamjuree.
   - Rótulos de sección = «eyebrow» de la marca: verde, versalitas, espaciado .14em, con filete.
   - Estados con significado (manual / por horario / base, alertas) en la rueda oficial:
     rojo #E5484D, ámbar #D38F00 (zona de avisos), verde #5FB901.
   ========================================================================== */

:root {
  --bnk-bg: #151515;
  --bnk-panel: #1b1b1b;
  --bnk-elev: #202020;
  --bnk-elev-2: #262626;
  --bnk-line: #2a2a2a;
  --bnk-line-2: #333333;
  --bnk-text: #f5f5f5;
  --bnk-dim: #9a9a9a;
  --bnk-mute: #6e6e6e;
  --bnk-green: #5fb901;
  --bnk-green-300: #addf93;
  --bnk-tint: rgba(95, 185, 1, .12);
  --bnk-amber: #d38f00;
  --bnk-amber-300: #eec285;
  --bnk-red: #e5484d;
  --bnk-red-300: #ff8a8d;
  --bnk-titulo: "Spartan MB", "Bai Jamjuree", system-ui, sans-serif;
  --bnk-sombra: inset 0 1px 0 rgba(255, 255, 255, .035), 0 18px 40px -34px #000;
}

/* ---------- lienzo ---------------------------------------------------------- */
html body { background: var(--bnk-bg) !important; color: var(--bnk-text); }
html body .content { background: transparent; }
html body ::selection { background: rgba(95, 185, 1, .4); color: #fff; }

/* barra superior: vidrio grafito, sin bloque sólido */
html body .topbar {
  background: rgba(21, 21, 21, .82) !important;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border-bottom: 1px solid var(--bnk-line) !important;
}
html body .topbar .clock,
html body .user-chip,
html body .topbar .icon-btn {
  background: rgba(255, 255, 255, .025) !important;
  border: 1px solid var(--bnk-line-2) !important;
  color: var(--bnk-text) !important;
}
html body .topbar .clock svg { color: var(--bnk-green); }
html body .badge { background: var(--bnk-red) !important; color: #fff !important; box-shadow: 0 0 0 2px var(--bnk-bg) !important; }

/* ---------- riel lateral ------------------------------------------------------- */
html body .sidebar {
  background: var(--bnk-panel) !important;
  border: 1px solid var(--bnk-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 24px 48px -30px #000 !important;
}
html body .sidebar .nav-item { color: var(--bnk-dim) !important; }
html body .sidebar .nav-item:hover { background: rgba(255, 255, 255, .04) !important; color: var(--bnk-text) !important; }
/* activo: píldora gris + ícono verde (sin relleno sólido ni brillo) */
html body .sidebar .nav-item.active {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--bnk-green) !important;
  box-shadow: inset 0 0 0 1px rgba(95, 185, 1, .28) !important;
}
html body .sidebar .nav-item.active svg { color: var(--bnk-green) !important; }
html body .sidebar .nav-group-title { color: var(--bnk-mute) !important; letter-spacing: .14em !important; }

/* ---------- encabezado de página -------------------------------------------- */
html body .page-head h1 {
  font-family: var(--bnk-titulo) !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  color: var(--bnk-text) !important;
  gap: 12px !important;
}
/* el ícono del título va en su propia placa: contorno grafito, ícono verde */
html body .page-head h1 > svg {
  width: 36px !important; height: 36px !important; padding: 8px; box-sizing: border-box;
  border: 1px solid var(--bnk-line-2); border-radius: 11px; background: rgba(255, 255, 255, .025);
  color: var(--bnk-green) !important; flex-shrink: 0;
}
html body .back-link { color: var(--bnk-dim) !important; }
html body .back-link:hover { color: var(--bnk-green) !important; }

/* ---------- tarjetas ---------------------------------------------------------- */
html body .card,
html body .welcome,
html body .onair-card,
html body .bnk-air-card,
html body .bnk-clients-card,
html body .bnk-gauge-card,
html body .bnk-plan-uso,
html body .usage-box,
html body .playlist-bar,
html body .upload-row,
html body .bnk-tracks-bar,
html body .media-row {
  background: var(--bnk-panel) !important;
  border: 1px solid var(--bnk-line) !important;
  box-shadow: var(--bnk-sombra) !important;
}
html body .card-head { border-bottom: 1px solid var(--bnk-line) !important; }
html body .card-head h2,
html body .section-head h2,
html body .section-head h3 {
  font-family: var(--bnk-titulo) !important;
  font-size: 14px !important;
  letter-spacing: .05em !important;
  color: var(--bnk-text) !important;
}
html body .card-head h2 svg { color: var(--bnk-green) !important; }

/* ---------- KPI (stat-card): grafito con la línea verde superior de 3 px ---------- */
html body .stat-card {
  background: var(--bnk-panel) !important;
  border: 1px solid var(--bnk-line) !important;
  box-shadow: var(--bnk-sombra) !important;
  transition: border-color .25s, transform .25s;
}
html body .stat-card::before {
  content: ""; position: absolute; top: 0; left: 22px; width: 38px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--bnk-green);
}
html body .stat-card:hover { border-color: var(--bnk-line-2) !important; }
html body .stat-card.muted { background: var(--bnk-panel) !important; }
html body .stat-card.muted::before { background: var(--bnk-line-2); }
html body .stat-card .stat-bg-icon { color: #ffffff !important; opacity: .045 !important; }
html body .stat-card .stat-value { font-family: var(--bnk-titulo) !important; letter-spacing: -.01em; color: var(--bnk-text) !important; }
html body .stat-card .stat-label { color: var(--bnk-text) !important; letter-spacing: .1em !important; }
html body .stat-card .stat-sub { color: var(--bnk-dim) !important; }

/* KPI internos de los scripts (almacenamiento, uso del plan) */
html body .bnk-kpi,
html body .bnk-pu-dato {
  background: var(--bnk-elev) !important;
  border: 1px solid var(--bnk-line) !important;
  box-shadow: none !important;
}
html body .bnk-kpi-value,
html body .bnk-pu-valor,
html body .bnk-gauge-pct { font-family: var(--bnk-titulo) !important; color: var(--bnk-text) !important; }
html body .bnk-kpi-label,
html body .bnk-pu-rotulo { color: var(--bnk-dim) !important; letter-spacing: .12em !important; }
html body .bnk-pu-rotulo svg { color: var(--bnk-green) !important; }

/* ---------- rótulos de sección = eyebrow de la marca ---------------------------- */
html body .bnk-storage-head h3,
html body .bnk-storage-head h2,
html body .bnk-pu-eyebrow,
html body .bnk-pcs-eyebrow {
  display: inline-flex !important; align-items: center; gap: 10px;
  font-family: "Bai Jamjuree", system-ui, sans-serif !important;
  font-size: 11.5px !important; font-weight: 600 !important;
  letter-spacing: .14em !important; text-transform: uppercase;
  color: var(--bnk-green) !important;
}
html body .bnk-storage-head h3::before,
html body .bnk-storage-head h2::before {
  content: ""; width: 22px; height: 1px; background: var(--bnk-green); flex-shrink: 0;
}

/* ---------- tablas -------------------------------------------------------------- */
html body table th {
  color: var(--bnk-mute) !important;
  font-size: 10.5px !important; font-weight: 600 !important;
  letter-spacing: .12em !important; text-transform: uppercase;
  border-bottom: 1px solid var(--bnk-line) !important;
  background: transparent !important;
}
html body table td { border-bottom-color: var(--bnk-line) !important; }
html body table tbody tr { transition: background-color .16s, box-shadow .16s; }
html body table tbody tr:hover { background: rgba(255, 255, 255, .022) !important; box-shadow: inset 2px 0 0 var(--bnk-green); }
html body .radio-name { color: var(--bnk-text) !important; }
html body .slogan { color: var(--bnk-green-300) !important; opacity: .85; }

/* avatares de radio: una sola familia (grafito con inicial verde) en lugar del arcoíris */
html body .avatar {
  background: var(--bnk-elev) !important;
  border: 1px solid var(--bnk-line-2) !important;
  color: var(--bnk-green) !important;
  font-family: var(--bnk-titulo) !important;
  box-shadow: none !important;
}

/* insignias */
html body .badge-estado { background: var(--bnk-tint) !important; border-color: rgba(95, 185, 1, .4) !important; color: var(--bnk-green) !important; }
html body .badge-estado.off { background: rgba(255, 255, 255, .03) !important; border-color: var(--bnk-line-2) !important; color: var(--bnk-mute) !important; }

/* ---------- pestañas: contorno como el botón oficial, activa con contorno + tinte ---------- */
html body .tabs .tab {
  background: transparent !important;
  border: 1px solid var(--bnk-line-2) !important;
  color: var(--bnk-dim) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .08em !important; text-transform: uppercase;
  box-shadow: none !important;
  transition: border-color .25s, background-color .25s, color .25s;
}
html body .tabs .tab svg { color: var(--bnk-green) !important; }
html body .tabs .tab:hover { border-color: rgba(95, 185, 1, .55) !important; color: var(--bnk-text) !important; }
html body .tabs .tab.active,
html body .tabs .tab.bnk-tab-extra.active {
  background: var(--bnk-tint) !important;
  border-color: var(--bnk-green) !important;
  color: #ffffff !important;
}
/* con una pestaña propia activa (Jingles, Sweepers, Drops) la de React se ve apagada */
html body.bnk-vista-jingles .tabs .tab.active:not(.bnk-tab-extra),
html body.bnk-vista-avisos .tabs .tab.active:not(.bnk-tab-extra) {
  background: transparent !important;
  border-color: var(--bnk-line-2) !important;
  color: var(--bnk-dim) !important;
}

/* ---------- campos ---------------------------------------------------------------- */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html body select,
html body textarea {
  background: var(--bnk-bg) !important;
  border: 1px solid var(--bnk-line-2) !important;
  color: var(--bnk-text) !important;
}
html body input:focus,
html body select:focus,
html body textarea:focus {
  border-color: var(--bnk-green) !important;
  box-shadow: 0 0 0 3px rgba(95, 185, 1, .14) !important;
  outline: none !important;
}
html body input::placeholder,
html body textarea::placeholder { color: var(--bnk-mute) !important; }
html body input[type="checkbox"],
html body input[type="radio"] { accent-color: var(--bnk-green); }
/* reproductor nativo en tema oscuro */
html body audio { color-scheme: dark; }

/* ---------- tarjeta «Al aire» ---------------------------------------------------- */
html body .bnk-air-card { border-left: 3px solid var(--bnk-green) !important; }
/* «Poner al aire»: botón oficial, nunca sólido */
html body .bnk-ac-air {
  background: rgba(255, 255, 255, .02) !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-family: "Bai Jamjuree", system-ui, sans-serif !important;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .08em !important; text-transform: uppercase;
  padding: 7px 18px !important; box-shadow: none !important;
}
html body .bnk-ac-air:hover { border-color: var(--bnk-green) !important; background: var(--bnk-tint) !important; color: var(--bnk-green) !important; }
/* escalera de prioridad y fuente: mismos significados, tonos oficiales */
html body .bnk-ac-rung { background: var(--bnk-elev) !important; border-color: var(--bnk-line-2) !important; color: var(--bnk-dim) !important; }
html body .bnk-ac-rung.on.horario,
html body .bnk-ac-rung.on.schedule { background: rgba(211, 143, 0, .12) !important; border-color: rgba(211, 143, 0, .55) !important; color: var(--bnk-amber-300) !important; }
html body .bnk-ac-rung.on.base { background: var(--bnk-tint) !important; border-color: rgba(95, 185, 1, .55) !important; color: var(--bnk-green) !important; }
html body .bnk-ac-rung.on.manual,
html body .bnk-ac-rung.on.override { background: rgba(229, 72, 77, .12) !important; border-color: rgba(229, 72, 77, .55) !important; color: var(--bnk-red-300) !important; }
html body .bnk-ac-src.horario,
html body .bnk-ac-src.schedule { background: rgba(211, 143, 0, .12) !important; border-color: rgba(211, 143, 0, .5) !important; color: var(--bnk-amber-300) !important; }
html body .bnk-ac-src.base { background: var(--bnk-tint) !important; border-color: rgba(95, 185, 1, .45) !important; color: var(--bnk-green) !important; }
html body .bnk-ac-src.manual,
html body .bnk-ac-src.override { background: rgba(229, 72, 77, .12) !important; border-color: rgba(229, 72, 77, .5) !important; color: var(--bnk-red-300) !important; }

/* ---------- barras y medidores --------------------------------------------------- */
html body .bnk-bar-track,
html body .usage-bar { background: var(--bnk-elev-2) !important; }
html body .bnk-bar-fill,
html body .usage-fill { background: var(--bnk-green) !important; box-shadow: none !important; }

/* ---------- bienvenida del cliente: grafito con la decoración «emblema + flechas» ---------- */
html body .welcome.bnk-client-welcome {
  position: relative; overflow: hidden;
  background:
    url("/decoracion-emblema-flechas.svg?v=1") right -40px center / auto 150% no-repeat,
    var(--bnk-panel) !important;
  border: 1px solid var(--bnk-line) !important;
  border-left: 3px solid var(--bnk-green) !important;
  color: var(--bnk-dim) !important;
}
html body .welcome.bnk-client-welcome strong { color: var(--bnk-text) !important; }

/* ---------- tarjeta «Al aire»: el filete izquierdo dice de dónde sale lo que suena ---------- */
html body .bnk-air-card.src-horario,
html body .bnk-air-card.src-schedule { border-left-color: var(--bnk-amber) !important; }
html body .bnk-air-card.src-manual,
html body .bnk-air-card.src-override { border-left-color: var(--bnk-red) !important; }
html body .bnk-air-card.src-base { border-left-color: var(--bnk-green) !important; }

/* caja de uso dentro de la fila de portada: sin segunda caja (evita el doble borde) */
html body .media-row .usage-box { background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* tablas: menos verde — los enlaces de texto en blanco y verde solo al pasar el mouse */
html body table td a:not(.act-btn):not(.btn-primary):not(.btn-ghost):not(.edit-btn) { color: var(--bnk-text) !important; }
html body table td a:not(.act-btn):not(.btn-primary):not(.btn-ghost):not(.edit-btn):hover { color: var(--bnk-green) !important; }
html body .slogan { color: var(--bnk-dim) !important; opacity: 1; }

/* ---------- planes (admin y cliente): grafito; el verde queda en el filete y la cifra ---------- */
html body .plan-card {
  background: var(--bnk-panel) !important;
  border: 1px solid var(--bnk-line) !important;
  box-shadow: var(--bnk-sombra) !important;
}
html body .plan-card.bnk-plan-activo { border-color: var(--bnk-line-2) !important; }
html body .bnk-pc {
  background: var(--bnk-panel) !important;
  border: 1px solid var(--bnk-line) !important;
  box-shadow: var(--bnk-sombra) !important;
}
html body .bnk-pc.es-actual { border-color: var(--bnk-green) !important; box-shadow: inset 0 0 0 1px rgba(95, 185, 1, .25), var(--bnk-sombra) !important; }
html body .bnk-pc-nombre,
html body .bnk-pc-cifra,
html body .bnk-pcs-titulo { font-family: var(--bnk-titulo) !important; }
html body .bnk-pc-nombre { color: var(--bnk-text) !important; }
html body .bnk-pc-badge {
  background: var(--bnk-bg) !important;
  border: 1px solid var(--bnk-green) !important;
  color: var(--bnk-green) !important;
  font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase; font-size: 10.5px !important;
}
/* botón de los planes = botón oficial (también el de «mejorar») */
html body .bnk-pc-btn,
html body .bnk-pc-btn.es-mejora {
  background: rgba(255, 255, 255, .02) !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-family: "Bai Jamjuree", system-ui, sans-serif !important;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .08em !important; text-transform: uppercase;
  box-shadow: none !important;
}
html body .bnk-pc-btn svg { color: var(--bnk-green) !important; }
html body .bnk-pc-btn:hover { border-color: var(--bnk-green) !important; background: var(--bnk-tint) !important; color: var(--bnk-green) !important; }
html body .bnk-pc.es-actual .bnk-pc-btn { border-color: rgba(95, 185, 1, .45) !important; color: var(--bnk-green) !important; }

/* uso del plan: placa del ícono como la del título; aviso de cupo en ámbar oficial */
html body .bnk-pu-icono {
  background: rgba(255, 255, 255, .025) !important;
  border: 1px solid var(--bnk-line-2) !important;
  color: var(--bnk-green) !important;
}
html body .bnk-pu-nombre { font-family: var(--bnk-titulo) !important; }
html body .bnk-pu-aviso { color: var(--bnk-amber-300) !important; }

/* ---------- Ayuda: los números de los pasos en contorno verde (el bundle los pinta en línea, sólidos) ---------- */
html body .content .card span[style*="border-radius: 50%"][style*="background: var(--green)"] {
  background: transparent !important;
  border: 1px solid var(--bnk-green) !important;
  color: var(--bnk-green) !important;
  box-sizing: border-box;
}

/* ---------- Horario: bloques con los tonos de la rueda (schedule-ui.js) y un filete claro ---------- */
html body .bnk-sg-block {
  border: 1px solid rgba(255, 255, 255, .16) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  border-radius: 6px !important;
}
html body .bnk-sg-leg-dot { box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }

/* ---------- botones propios de schedule-ui.js (Horario y «Al aire») = botón oficial ---------- */
html body .bnk-btn,
html body .bnk-btn.primary,
html body .bnk-apply-btn,
html body .bnk-ac-return,
html body .bnk-ac-basechg {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255, 255, 255, .02) !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-family: "Bai Jamjuree", system-ui, sans-serif !important;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .08em !important; text-transform: uppercase;
  padding: 7px 18px !important; min-height: 32px; box-shadow: none !important; cursor: pointer;
  transition: background-color .3s, border-color .3s, color .3s;
}
html body .bnk-ac-basechg { padding: 4px 12px !important; min-height: 24px; font-size: 10px !important; }
html body .bnk-btn:hover,
html body .bnk-apply-btn:hover,
html body .bnk-ac-return:hover,
html body .bnk-ac-basechg:hover { border-color: var(--bnk-green) !important; background: var(--bnk-tint) !important; color: var(--bnk-green) !important; }
/* «Guardar» (principal) y «Aplicar cambios» con cambios pendientes: contorno verde + tinte, nunca sólido */
html body .bnk-btn.primary,
html body .bnk-apply-btn.hot { border-color: var(--bnk-green) !important; background: var(--bnk-tint) !important; }
html body .bnk-btn.primary::before,
html body .bnk-apply-btn.hot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bnk-green); flex-shrink: 0;
  animation: bnk-sis-halo 2.2s ease-in-out infinite;
}
@keyframes bnk-sis-halo { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 6px 3px rgba(95, 185, 1, .55); } }
@media (prefers-reduced-motion: reduce) { html body .bnk-btn.primary::before, html body .bnk-apply-btn.hot::before { animation: none; } }
/* íconos de la tabla de franjas: círculos como los botones de solo ícono */
html body .bnk-sched-ic {
  width: 30px; height: 30px; border-radius: 50% !important;
  background: rgba(255, 255, 255, .02) !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  color: var(--bnk-green) !important;
}
html body .bnk-sched-ic:hover { border-color: var(--bnk-green) !important; background: var(--bnk-tint) !important; }
html body .bnk-sched-ic.danger { color: var(--bnk-red-300) !important; }
html body .bnk-sched-ic.danger:hover { border-color: var(--bnk-red) !important; background: rgba(229, 72, 77, .14) !important; }

/* en celular la decoración competía con el texto de bienvenida: solo grafito con el filete verde */
@media (max-width: 620px) {
  html body .welcome.bnk-client-welcome { background: var(--bnk-panel) !important; }
}