/* ============================================================
   NEXO — tema del panel de operaciones
   Sólo estética: no cambia una sola funcionalidad.
   Se carga DESPUÉS del css base, así gana por orden.
   ============================================================ */

@font-face{font-family:'NX Sans';src:url('./nx-sans.woff2') format('woff2');font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'NX Mono';src:url('./nx-mono.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap}

:root{
  /* — superficies: grafito azulado, no negro violáceo — */
  --bg-darkest:#0E1116;
  --bg-card:#161B22;
  --bg-input:#0A0D12;          /* hundido, no elevado: al revés que antes */
  --border:#232B36;

  /* — color propio: jade mate — */
  --gold:#2FB5A4;
  --gold-light:#5FD3C4;
  --gold-dark:#2BAB9B;   /* casi igual al base: aplana los degradados metálicos sin pelear especificidad */
  --gold-rgb:47,181,164;
  --border-active:#2FB5A4;

  /* — texto en gris frío, no blanco puro — */
  --text:#E6EDF3;
  --text-sec:#8B98A5;
  --text-muted:#5C6773;

  /* — semánticos recalibrados al mismo aire frío — */
  --green:#3FB950; --red:#F85149; --blue:#58A6FF;
  --yellow:#D29922; --purple:#BC8CFF; --orange:#DB6D28;

  /* — geometría más filosa — */
  --radius-card:6px;
  --radius-btn:4px;

  --font:'NX Sans',ui-sans-serif,system-ui,sans-serif;
  --nx-mono:'NX Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --nx-sombra:0 1px 2px rgba(0,0,0,.4);
}

body{-webkit-font-smoothing:antialiased;letter-spacing:.005em}

/* ── SUPERFICIES: hairline superior, para que tengan cuerpo ───── */
.card,.stat-card,.api-card,.auto-msg-card{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),var(--nx-sombra);
}
.top-bar{background:#12161D;border-bottom:1px solid var(--border)}

/* ── BARRA LATERAL: bloque activo, no texto de color ──────────── */
.sidebar{background:#0B0E13;border-right:1px solid var(--border)}
.nav-item{border-radius:4px;margin:1px 8px;width:auto}
.nav-item:hover{background:rgba(255,255,255,.04);color:var(--text-sec)}
.nav-item.active{background:rgba(var(--gold-rgb),.12);color:var(--gold-light)}
.nav-item.active::before{
  content:'';position:absolute;left:-8px;top:6px;bottom:6px;width:2px;
  background:var(--gold);border-radius:0 2px 2px 0;
}
.nav-label{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}

/* ── BOTONES: planos, sin degradado metálico ──────────────────── */
.btn{
  font-family:var(--font);letter-spacing:.01em;font-weight:500;
  border:1px solid transparent;box-shadow:none;
}
.btn-gold{
  background:var(--gold);color:#04120F;border-color:var(--gold-light);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-gold:hover{background:var(--gold-light)}
.btn-outline{border-color:var(--border);color:var(--text-sec);background:transparent}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-light);background:rgba(var(--gold-rgb),.07)}
.btn-gray{background:#1C232C;color:var(--text-sec);border-color:var(--border)}

/* ── CHIPS en vez de píldoras ─────────────────────────────────── */
.badge,.tag{
  border-radius:3px;font-weight:500;letter-spacing:.03em;
  text-transform:uppercase;font-size:10px;padding:3px 7px;
  border:1px solid rgba(255,255,255,.07);
}

/* ── NÚMEROS EN MONO: es una consola de plata ─────────────────── */
.stat-value,.stat-number,.chat-item-time,.msg-time,.cf-value,
.notif-badge,.chat-badge,.chat-item-unread{
  font-family:var(--nx-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.stat-value,.stat-number{font-weight:500}
.stat-label{text-transform:uppercase;letter-spacing:.07em;font-size:10px;color:var(--text-muted);font-weight:500}

/* ── TABLAS: cabecera técnica, cifras alineadas ───────────────── */
.table-wrap{border-radius:var(--radius-card)}
.table-wrap th{
  text-transform:uppercase;letter-spacing:.06em;font-size:10px;
  color:var(--text-muted);font-weight:600;background:#12161D;
}
.table-wrap td{font-size:12.5px}

/* ── CAMPOS: hundidos, foco con anillo ────────────────────────── */
.form-input,input,select,textarea{
  border-radius:var(--radius-btn);background:var(--bg-input);
  border:1px solid var(--border);
}
.form-input:focus,input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(var(--gold-rgb),.15);
}

/* ── CHAT: burbujas cuadradas, no globos ──────────────────────── */
.msg-bubble{border-radius:5px;font-size:13px}
.msg-visitor .msg-bubble{background:#1C232C;border:1px solid var(--border)}
.msg-bot .msg-bubble,.msg-system .msg-bubble{background:rgba(var(--gold-rgb),.10);border:1px solid rgba(var(--gold-rgb),.22)}
.chat-item{border-bottom:1px solid rgba(255,255,255,.04)}
.chat-item:hover{background:rgba(255,255,255,.03)}
.chat-item.active{background:rgba(var(--gold-rgb),.10);box-shadow:inset 2px 0 0 var(--gold)}
.chat-item-name{font-weight:500;letter-spacing:.005em}

/* ── SOLAPAS: pastilla llena, no subrayado ────────────────────── */
.tab-btn{
  border-bottom:none;border-radius:4px;padding:7px 14px;font-size:12.5px;
  font-weight:500;letter-spacing:.02em;
}
.tab-btn.active{background:rgba(var(--gold-rgb),.12);color:var(--gold-light)}
.tabs{gap:2px;border-bottom:1px solid var(--border);padding-bottom:6px}

/* ── DETALLES ─────────────────────────────────────────────────── */
.toggle-slider{border-radius:3px}
.toggle-slider:before{border-radius:2px}
.online-dot,.status-dot{box-shadow:0 0 0 2px rgba(0,0,0,.5)}
.sidebar-logo{border-radius:5px;font-family:var(--nx-mono);font-weight:600}
.card-header{
  text-transform:uppercase;letter-spacing:.06em;font-size:11px;
  color:var(--text-sec);font-weight:600;
}
.toast{border-radius:5px;border:1px solid var(--border);box-shadow:0 6px 18px rgba(0,0,0,.5)}
.confirm-box{border-radius:var(--radius-card);border:1px solid var(--border)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2A333F;border-radius:5px;border:2px solid var(--bg-darkest)}
::-webkit-scrollbar-thumb:hover{background:#3A4552}
::selection{background:rgba(var(--gold-rgb),.35);color:#fff}

/* ============================================================
   Pantallas sueltas del panel (transferencias, mensajes, logs,
   admin-v1): cada una nombra sus variables distinto. Se cubren
   todos los vocabularios para que el look sea uno solo.
   ============================================================ */
:root{
  --bg:#0E1116; --card:#161B22; --bor:#232B36;
  --txt:#E6EDF3; --text2:#8B98A5; --text3:#5C6773; --mut:#8B98A5;
  --pri:var(--gold); --ok:#3FB950; --warn:#D29922;
  --gray:#8B98A5; --gray-bg:rgba(139,152,165,.12);
  --green-bg:rgba(63,185,80,.12);
  --yellow-bg:rgba(210,153,34,.12);
  --red-bg:rgba(248,81,73,.12);
  --blue-bg:rgba(88,166,255,.12);
  --purple-bg:rgba(188,140,255,.12);
  --sidebar-exp:210px;
}
/* esas pantallas fijan la fuente a mano: se unifica */
body,.wrap,.container,table,input,select,textarea,button{
  font-family:'NX Sans',ui-sans-serif,system-ui,sans-serif;
}
code,pre,.mono,td.num,.num{font-family:var(--nx-mono)}

/* la fuente y el aplanado tienen que ganarle al <style> propio de cada pantalla */
html body,html body table,html body input,html body select,html body textarea,html body button{
  font-family:'NX Sans',ui-sans-serif,system-ui,sans-serif;
}
html body .mono,html body code,html body pre{font-family:var(--nx-mono)}
/* nada de degradados metálicos: es la firma del diseño viejo */
html body button,html body .btn,html body .btn-primary,html body .btn-gold{background-image:none}
html body .btn-primary,html body button[type=submit]{background-color:var(--gold);color:#04120F}

/* ============================================================
   ESTRUCTURA — que no sea el mismo componente pintado.
   Cambia la COMPOSICIÓN, no sólo el color.
   ============================================================ */

/* — Números: de 4 cajas sueltas a una TIRA continua con separadores — */
.stat-cards{gap:0 !important;border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;background:var(--bg-card)}
.stat-cards>.stat-card{
  border:none !important;border-radius:0 !important;background:transparent !important;
  box-shadow:none !important;border-left:1px solid var(--border) !important;
  padding:16px 18px !important;position:relative;
}
.stat-cards>.stat-card:first-child{border-left:none !important}
.stat-cards>.stat-card::after{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;background:transparent;
}
.stat-cards>.stat-card:hover::after{background:var(--gold)}
.stat-cards>.stat-card:hover{background:rgba(255,255,255,.02) !important}
/* la etiqueta ARRIBA y chica, el número abajo y grande: al revés de la jerarquía vieja */
.stat-card .stat-label{order:-1;display:block;margin-bottom:4px}
.stat-card .stat-value,.stat-card .stat-number{line-height:1.1}

/* — Tablas: de filas con borde a CEBRA con cabecera pegada — */
.table-wrap table{border-collapse:separate;border-spacing:0}
.table-wrap thead th{position:sticky;top:0;z-index:2;border-bottom:1px solid var(--border)}
.table-wrap tbody tr{border:none}
.table-wrap tbody tr:nth-child(odd){background:rgba(255,255,255,.018)}
.table-wrap tbody tr:hover{background:rgba(var(--gold-rgb),.07)}
.table-wrap tbody td{border:none;border-bottom:1px solid rgba(255,255,255,.035)}
.table-wrap tbody tr:last-child td{border-bottom:none}

/* — Tarjetas: cabecera con filete, no un título suelto — */
.card>.card-header:first-child,.api-card>.card-header:first-child{
  margin:-20px -20px 16px;padding:11px 20px;background:#12161D;
  border-bottom:1px solid var(--border);
}

/* — Botones: reacción física al apretar, en vez de sólo cambiar de tono — */
.btn:active{transform:translateY(1px)}
.btn-icon{border-radius:4px;border:1px solid transparent}
.btn-icon:hover{background:rgba(255,255,255,.05);border-color:var(--border)}

/* — Panel del cliente: campos como ficha técnica — */
.customer-field,.cf-label{letter-spacing:.05em}
.cf-label{text-transform:uppercase;font-size:9.5px;color:var(--text-muted);font-weight:600}
.customer-field{border-bottom:1px solid rgba(255,255,255,.04);padding-bottom:7px}

/* — Buscador: hundido y con la lupa integrada — */
.search-bar,.chat-search input{background:var(--bg-input);border:1px solid var(--border);border-radius:4px}

/* ============================================================
   EL CHAT DEL OPERADOR — otra estructura, mismo funcionamiento
   ============================================================ */

/* — Avatar: de círculo con degradado a TILE cuadrado con iniciales en mono — */
.chat-item-avatar,.customer-avatar,.up-avatar,.sidebar-avatar{
  border-radius:4px !important;
  background:rgba(var(--gold-rgb),.14) !important;
  color:var(--gold-light) !important;
  border:1px solid rgba(var(--gold-rgb),.28);
  font-family:var(--nx-mono) !important;font-weight:500 !important;
}

/* — Burbujas: sin globo ni caja; un RIEL de color a la izquierda — */
.msg-visitor,.msg-bot,.msg-system{
  border:none !important;border-radius:0 4px 4px 0 !important;
  padding-left:11px !important;
}
.msg-visitor{background:rgba(255,255,255,.035) !important;border-left:2px solid #3A4552 !important}
.msg-bot{background:rgba(var(--gold-rgb),.09) !important;border-left:2px solid var(--gold) !important}
.msg-system{background:rgba(255,255,255,.02) !important;border-left:2px solid var(--text-muted) !important}
.msg-sender{text-transform:uppercase;letter-spacing:.07em;font-size:9.5px;color:var(--text-muted)}
.msg-time{font-size:10px}

/* — Enviar: de círculo con degradado a cuadrado plano — */
.msg-send-btn,.chat-send{
  border-radius:4px !important;background:var(--gold) !important;
  background-image:none !important;color:#04120F !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.msg-send-btn:hover,.chat-send:hover{background:var(--gold-light) !important}

/* — Cabecera del chat: filete de acento y estado en mono — */
.chat-header{border-bottom:1px solid var(--border);box-shadow:inset 0 -1px 0 rgba(var(--gold-rgb),.18)}
.chat-header-name{font-weight:600;letter-spacing:.005em}
.chat-header-status,.chat-item-casino{font-family:var(--nx-mono);font-size:10.5px;letter-spacing:-.01em;color:var(--text-muted)}

/* — Filtros: de solapas a control segmentado — */
.chat-filters{gap:2px;padding:8px;border-bottom:1px solid var(--border);background:#12161D}
.chat-filter{border-radius:3px;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;font-weight:600;border:none}
.chat-filter.active{background:rgba(var(--gold-rgb),.14);color:var(--gold-light)}

/* — Barra de escritura: campo hundido, separado de la caja — */
.chat-input-area,.msg-input-bar{background:#12161D;border-top:1px solid var(--border)}
.msg-input,.chat-input-area input,.chat-input-area textarea{
  background:var(--bg-input) !important;border:1px solid var(--border) !important;border-radius:4px !important;
}
.msg-input:focus{border-color:var(--gold) !important;box-shadow:0 0 0 3px rgba(var(--gold-rgb),.15)}

/* — Columnas laterales: separadas por filete, no por color — */
.chat-sidebar,.chat-info-panel{background:#12161D}
.no-chat-selected,.chat-empty{color:var(--text-muted);font-family:var(--nx-mono);font-size:12px;letter-spacing:.02em}

/* ============================================================
   IDENTIDAD FIJA DEL PANEL
   La app inyecta el color de marca del tenant como estilo EN LÍNEA
   sobre <html>. Un !important de hoja de autor le gana a un inline
   sin !important, así el panel mantiene SU identidad en todos los
   tenants (el color de marca sigue mandando en el widget del jugador).
   Si se prefiere que el panel tome el color de cada casino,
   basta con borrar este bloque.
   ============================================================ */
:root{
  /* __NEXO_V2_2026-08-26__ el acento lo elige el duenio en AJUSTES: el panel lo pone
     INLINE en :root, asi que alcanza con NO pisarlo. El jade del bloque
     de arriba queda solo como respaldo si el tenant no tiene color.
     Lo unico que si se fuerza es --gold-dark: igualado a --gold aplana
     los degradados metalicos, que son la firma del diseno original. */
  --gold-dark:var(--gold) !important;
}

/* ============================================================
   SILUETA — el cambio que faltaba.
   El riel vertical de íconos a la izquierda es LA marca del
   producto original. Pasa a ser navegación horizontal arriba y
   el contenido ocupa todo el ancho.
   Sólo CSS: el JS no se entera.
   ============================================================ */
/* En el celular NO se aplana el sidebar: son 15 destinos y en 375px la barra
   queda con 158px utiles para 1128px de items, y en una tablet
   vertical (769px) con 552px: sigue sin entrar. Debajo de 1025px
   no aplica nada de esto y vuelve a mandar el CSS original, que arma
   el riel vertical de 80px con scroll. */
@media (min-width:1025px){
.app{flex-direction:column !important}
.app>*:not(.sidebar){flex:1 1 auto;min-height:0;display:flex;flex-direction:column}

.sidebar{
  width:100% !important;min-width:0 !important;height:54px !important;
  flex-direction:row !important;align-items:center !important;
  border-right:none !important;border-bottom:1px solid var(--border) !important;
  background:#0B0E13 !important;padding:0 14px;gap:4px;flex-shrink:0;
}
.sidebar-logo{
  height:auto !important;border-bottom:none !important;padding-right:16px;margin-right:6px;
  border-right:1px solid var(--border);
}
.nav-items{
  flex:0 1 auto !important;flex-direction:row !important;align-items:center !important;
  padding:0 !important;gap:1px !important;overflow:visible !important;
}
.nav-item{
  flex-direction:row !important;width:auto !important;height:54px;
  padding:0 13px !important;gap:7px !important;margin:0 !important;border-radius:0 !important;
}
.nav-item .nav-icon{font-size:14px}
.nav-label{font-size:11px !important;letter-spacing:.04em !important;text-transform:none !important}
/* el marcador del activo pasa de barra lateral a subrayado */
.nav-item.active{background:transparent !important;color:var(--gold-light) !important}
.nav-item.active::before{
  left:0 !important;right:0 !important;top:auto !important;bottom:0 !important;
  width:auto !important;height:2px !important;border-radius:0 !important;
}
.sidebar-bottom{
  margin-left:auto;flex-direction:row !important;border-top:none !important;
  padding:0 !important;gap:10px;align-items:center;
}
} /* fin del acotado a escritorio */


/* ============================================================
   VALOR Y EFECTOS — superficies más claras y separadas, y
   sombra DURA sin desenfoque en vez de halos suaves.
   ============================================================ */
:root{
  --bg-darkest:#12161C !important;
  --bg-card:#1A2029 !important;
  --bg-input:#0D1116 !important;
  --border:#2A323D !important;
}
.card,.stat-cards,.api-card,.auto-msg-card,.table-wrap{
  box-shadow:3px 3px 0 rgba(0,0,0,.35) !important;
}
.toast,.confirm-box,.nx-sel-panel{box-shadow:4px 4px 0 rgba(0,0,0,.45) !important}
.top-bar{background:transparent !important;border-bottom:1px solid var(--border);height:52px}
.section-padded{padding:20px 22px !important}

/* En el celular NO se aplana el sidebar: son 15 destinos y en 375px la barra
   queda con 158px utiles para 1128px de items, y en una tablet
   vertical (769px) con 552px: sigue sin entrar. Debajo de 1025px
   no aplica nada de esto y vuelve a mandar el CSS original, que arma
   el riel vertical de 80px con scroll. */
@media (min-width:1025px){
/* ============================================================
   __NAV_HORIZONTAL_FIX_2026-08-26__
   La barra de arriba tiene 15 destinos: 1.542px de items dentro
   de 1.280. Y cada grupo mete su rotulo ARRIBA del item en
   columna (herencia del sidebar vertical), lo que descuadra la
   altura y desborda. Aca: fila pareja, sin emojis, y el rotulo
   de grupo pasa a ser una linea vertical fina.
   ============================================================ */
.sidebar .nav-items{
  flex:1 1 auto !important;   /* sin esto, overflow-x:auto la deja encogerse a cero */
  min-width:0 !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  height:54px !important;
  overflow-x:auto !important; overflow-y:hidden !important;  /* la regla vieja del skin fuerza overflow:visible */
  scrollbar-width:none; -ms-overflow-style:none;
  gap:0 !important;
}
.sidebar .nav-items::-webkit-scrollbar{display:none}

/* cada item viene envuelto en un div sin clase: lo aplano */
.sidebar .nav-items > div{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  height:54px !important;
  flex:0 0 auto !important;
  width:auto !important;      /* React le pone width:100% INLINE: solo se gana con !important */
  max-width:none !important;
}

/* el rotulo de grupo (FINANZAS/MARKETING/SISTEMA) trae estilos
   inline pensados para la barra vertical -> hay que ganarles uno
   por uno. Queda como separador, no como titulo. */
.sidebar .nav-items > div > div:first-child:not(.nav-item){
  flex:0 0 1px !important;
  width:1px !important;
  height:20px !important;
  padding:0 !important;
  margin:0 8px 0 4px !important;
  border-top:none !important;
  border-left:1px solid var(--border) !important;
  font-size:0 !important;
  letter-spacing:0 !important;
  overflow:hidden !important;
  text-align:left !important;
}

/* sin emojis: es lo que mas delata el origen, y libera ~330px */
.sidebar .nav-item .nav-icon{display:none !important}

.sidebar .nav-item{
  padding:0 9px !important;
  height:54px !important;
  font-size:.78rem !important;
  letter-spacing:.02em !important;
  white-space:nowrap !important;
  border-radius:0 !important;
}
.sidebar .nav-item .nav-label{white-space:nowrap !important}
} /* fin del acotado a escritorio */


/* ============================================================
   __LOGIN_TAGS_NEXO_2026-08-26__
   1) El LOGIN era orbes borrosos + particulas que suben + tarjeta
      glass de 24px de radio: es LA firma del desarrollo original.
      Pasa a fondo grafito con reticula tecnica y tarjeta dura.
      Los estilos vienen inyectados desde el bundle JS (un <style>
      que se agrega al head DESPUES del link) -> !important si o si.
   2) Las etiquetas de la lista de chats (Carga/Finalizar) no usan
      .badge: React les pone TODO inline. Tambien !important.
   ============================================================ */
.login-page{
  background:var(--bg-darkest) !important;
  font-family:inherit !important;   /* traia su propio stack de sistema */
}
/* reticula tecnica en vez del brillo */
.login-page::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:44px 44px;
}
.login-bg-orb,.login-particle{display:none !important}
.login-card{
  background:var(--bg-card) !important;
  border:1px solid var(--border) !important;
  border-radius:2px !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  box-shadow:6px 6px 0 rgba(0,0,0,.5) !important;
  animation:none !important;
}
.login-card::before{display:none !important}
.login-submit{border-radius:2px !important}
.login-submit::before{display:none !important}

/* etiquetas Carga/Finalizar: cuadradas, micro-tipografia, sin neon */
.chat-item-name span[style]{
  border-radius:2px !important;
  padding:2px 6px !important;
  font-size:9px !important;
  font-weight:700 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
  filter:saturate(.6) brightness(.85) !important;
}

/* ============================================================
   __AJUSTES_ACENTO_2026-08-26__
   1) AJUSTES quedaba en UNA columna angosta pegada a la izquierda
      con media pantalla muerta, y con anchos disparejos porque
      algunas tarjetas piden 'grid-column: 1 / -1' (ancho completo)
      y otras no. Se pasa a columnas que se acomodan solas.
   2) Hay botones con el dorado ESCRITO A MANO en el style inline,
      que no siguen el color elegido en Ajustes. Se mapean al acento.
   ============================================================ */

.settings-grid{
  display:block !important;        /* el grid dejaba huecos por el span 1/-1 */
  column-gap:38px !important;
  column-count:1;
}
@media (min-width:1100px){ .settings-grid{column-count:2} }
@media (min-width:1600px){ .settings-grid{column-count:3} }

.settings-grid > .card{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  display:block !important;
  width:auto !important;
  margin:0 0 30px !important;
}
/* los campos ya no se estiran a lo ancho de la pantalla */
.settings-grid .card input,
.settings-grid .card select,
.settings-grid .card textarea{max-width:100% !important}

/* — el dorado a mano pasa a ser el color del tenant — */
[style*="background:#d4a853"],[style*="background: #d4a853"],
[style*="background:#D4A853"],[style*="background: rgb(212, 168, 67)"],
[style*="background:#d4a843"],[style*="background: #d4a843"]{
  background-color:var(--gold) !important;
  background-image:none !important;
  color:#0E1116 !important;
}

/* ============================================================
   __PANELES_INLINE_2026-08-26__
   Metricas y Auditoria seguian siendo grillas de CAJAS con borde:
   sus paneles no usan .card, traen el borde escrito INLINE, asi que
   la regla de superficies no los alcanzaba. Se les aplica el mismo
   lenguaje: sin caja, separados por una regla arriba.
   Se excluyen botones y enlaces: ahi el borde SI es el control.
   ============================================================ */
[style*="border: 1px solid rgb(34, 34, 34)"]:not(button):not(a):not(label),
[style*="border: 1px solid rgba(255, 255, 255"]:not(button):not(a):not(label),
[style*="rgb(26, 26, 46)"]:not(button):not(a):not(label):not(input):not(select){
  background-color:transparent !important;
  border:none !important;
  border-top:1px solid var(--border) !important;
}

/* ============================================================
   __NEXO_V2_2026-08-26__ — SEGUNDA PASADA
   El color y la tipografia no alcanzaban: en una captura seguia
   leyendose el mismo producto. Lo que delata no es el tono, es la
   GEOMETRIA: todo son cajas redondeadas flotando sobre un fondo.
   Aca se cambia el sistema: nada flota, nada es redondo. Las
   secciones se separan con reglas al ancho completo y los datos
   viven sobre el fondo, como una ficha tecnica.
   Cero cambios de funcionalidad.
   ============================================================ */

/* — GEOMETRIA GLOBAL: se termina el redondeo — */
.card,.stat-card,.stat-cards,.api-card,.auto-msg-card,.table-wrap,
button,input,select,textarea,.badge,.tag,.label-pill,.btn,.chip{
  border-radius:0 !important;
}
/* los radios que React escribe INLINE (8/10/12/20/24px) */
[style*="border-radius: 6px"],[style*="border-radius: 8px"],
[style*="border-radius: 10px"],[style*="border-radius: 12px"],
[style*="border-radius: 16px"],[style*="border-radius: 20px"],
[style*="border-radius: 24px"]{border-radius:0 !important}

/* — SUPERFICIES: la caja se reemplaza por una regla — */
.card,.api-card,.auto-msg-card{
  background:transparent !important;
  border:none !important;
  border-top:1px solid var(--border) !important;
  box-shadow:none !important;
  padding-top:20px !important;
}
.table-wrap{background:transparent !important;border:none !important;box-shadow:none !important}
[style*="rgb(26, 26, 46)"]{background-color:var(--bg-card) !important}

/* — TIRA DE CIFRAS: sin cajas, separadas por pelo vertical — */
.stat-cards{background:transparent !important;border:none !important;box-shadow:none !important;gap:0 !important}
.stat-card{
  background:transparent !important;
  border:none !important;
  border-left:1px solid var(--border) !important;
  box-shadow:none !important;
  padding:14px 22px !important;
}
.stat-card:first-child{border-left:none !important;padding-left:0 !important}
.stat-card .stat-value,.stat-value{
  font-family:var(--nx-mono) !important;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em !important;
}
.stat-card .stat-label,.stat-label{
  text-transform:uppercase !important;letter-spacing:.14em !important;
  font-size:9px !important;color:var(--text-muted) !important;
}

/* — TABLAS: al ancho, encabezado en versalitas, filas por pelo — */
table th{
  text-transform:uppercase !important;letter-spacing:.12em !important;
  font-size:9px !important;font-weight:700 !important;
  color:var(--text-muted) !important;
  background:transparent !important;
  border-bottom:2px solid var(--gold) !important;
}
table td{border-bottom:1px solid var(--border) !important;background:transparent !important}
table tbody tr:hover td{background:rgba(var(--gold-rgb),.06) !important}

/* — CAMPOS: subrayado, no cajita — */
input,select,textarea{
  background:transparent !important;
  border:none !important;
  border-bottom:1px solid var(--border) !important;
  /* OJO: no tocar el padding. Varios campos llevan un icono en
     position:absolute adentro (el login, el buscador de arriba) y
     el relleno es lo que le reserva el lugar: sin el, el icono
     se monta encima del texto. */
}
input:focus,select:focus,textarea:focus{
  border-bottom:2px solid var(--gold) !important;outline:none !important;
}

/* — BOTONES: cuadrados, versalitas, sombra dura — */
button{
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
  font-size:10px !important;
  font-weight:700 !important;
}
button[style*="linear-gradient"]{
  background-image:none !important;              /* el brillo metalico es del diseno viejo */
  box-shadow:2px 2px 0 rgba(0,0,0,.4) !important;
  filter:saturate(.72) !important;
}
/* el shorthand inline deja el color en transparente al matar la imagen */
button[style*="linear-gradient(135deg, rgb(33, 150, 243)"]{background-color:var(--gold) !important;color:#0E1116 !important}
button[style*="linear-gradient(135deg, rgb(255, 165, 0)"]{background-color:#B9791C !important}

/* — ENCABEZADO DE PAGINA: banda con marca de acento — */
.top-bar{border-bottom:2px solid var(--border) !important}
.top-bar h1,.top-bar .page-title{
  text-transform:uppercase !important;letter-spacing:.1em !important;
  font-size:13px !important;font-weight:700 !important;
  border-left:3px solid var(--gold) !important;padding-left:10px !important;
}

/* ============================================================
   __UNIFICAR_LENGUAJE_2026-08-26__
   El panel y el widget quedaron hablando idiomas OPUESTOS:
   esquinas 0 vs 10-14px, sombra dura vs difusa, y DOS tipografias
   que ni siquiera comparten archivo. Que uno sea oscuro y el otro
   claro esta bien (son publicos distintos), pero eso otro se lee
   como "dos desarrollos", no como un estudio con dos productos.
   Aca se unifican las tres senales. El panel sigue lejos del
   original: lo que lo distingue es la barra horizontal, la falta
   de cajas y los rotulos en versalitas, no el radio de la esquina.
   ============================================================ */

/* ---------- 1. LA MISMA TIPOGRAFIA que el widget ----------
   el widget la sirve desde /fonts/, que es estatico del mismo origen */
@font-face{
  font-family:'NX Unif';
  src:url('/fonts/gx-sans.woff2') format('woff2');
  font-weight:100 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'NX Unif';
  src:url('/fonts/gx-sans-ext.woff2') format('woff2');
  font-weight:100 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{ --font:'NX Unif',ui-sans-serif,system-ui,sans-serif !important; }
body, body *{ font-family:var(--font) !important; }
/* los numeros siguen en mono: es de la identidad del panel */
.stat-value, .nx-mono, code, pre, td.num, .mono{
  font-family:var(--nx-mono) !important;
}

/* ---------- 2. SOMBRA DIFUSA, como el widget ---------- */
.card, .stat-cards, .api-card, .auto-msg-card, .table-wrap,
.toast, .confirm-box, .nx-sel-panel, .modal, .popup{
  box-shadow:0 8px 26px rgba(8,11,15,.34) !important;
}

/* ---------- 3. ESQUINA CHICA, no cero ---------- */
button, .btn, input, select, textarea,
.badge, .tag, .label-pill, .chip,
.toast, .confirm-box, .nx-sel-panel, .modal, .popup{
  border-radius:8px !important;
}
.badge, .tag, .label-pill{ border-radius:6px !important; }
/* los inline que React escribe tambien */
[style*="border-radius: 0px"]:not(table):not(thead):not(tbody):not(tr):not(td):not(th){
  border-radius:8px !important;
}