/* ============================================================================
   CONSOLA v2  ·  __CONSOLA_V2_2026-08-27__
   Capa de identidad del panel. SOLO estetica: no toca una sola funcion.

   Por que NO se va a claro: el bundle tiene 269 colores claros escritos a mano
   como estilos inline de React (rgba(255,255,255...), #fff, #e0e0e0). Un tema
   claro dejaria texto blanco sobre blanco en ~270 lugares y no hay variable que
   los alcance. Entonces la diferencia la dan los otros ejes:
   composicion, densidad, geometria, tipografia, iconografia y el USO del color.

   Regla de color: el acento (var(--gold), que es el color del tenant) aparece
   SOLO en el riel del item activo y en el contador sin leer. Todo lo demas es
   neutro. Eso es lo que mas separa de un panel "de casino".
   ========================================================================== */

:root{
  --cv-ground:#0E1116;      /* fondo general, mas frio y mas profundo */
  --cv-surface:#161A21;     /* tarjetas y paneles */
  --cv-raised:#1C222B;      /* hover / seleccionado */
  --cv-rule:#242B35;        /* filete de 1px */
  --cv-rule-soft:#1B2129;
  --cv-ink:#DDE3EA;         /* texto principal */
  --cv-mute:#7C8794;        /* texto secundario */
  --cv-faint:#5A6472;       /* metadatos */
  --cv-ok:#3FBF87;
  --cv-info:#5B9BE8;
  --cv-warn:#D9A441;
  --cv-bad:#E0685F;
  --cv-r:3px;               /* geometria casi recta */
}

/* ---------- 1 · FONDO Y TIPOGRAFIA ---------------------------------------- */
html body{
  background:var(--cv-ground) !important;
  color:var(--cv-ink) !important;
  -webkit-font-smoothing:antialiased;
}
html body .app{ background:var(--cv-ground) !important; }

/* numeros siempre en mono y alineados en columna */
.chat-item-time, .chat-badge, .up-avatar, .sidebar-avatar{
  font-family:"NX Mono", ui-monospace, SFMono-Regular, monospace !important;
  font-variant-numeric:tabular-nums !important;
}

/* ---------- 2 · BARRA LATERAL --------------------------------------------- */
html body .sidebar{
  background:var(--cv-ground) !important;
  border-right:1px solid var(--cv-rule) !important;
  box-shadow:none !important;
}
html body .sidebar-logo{
  padding:14px 12px !important;
  border-bottom:1px solid var(--cv-rule-soft) !important;
}
html body .sidebar-logo img{ border-radius:var(--cv-r) !important; }

html body .nav-item{
  position:relative !important;
  border-radius:0 !important;
  margin:0 !important;
  padding:7px 12px 7px 14px !important;
  gap:10px !important;
  color:var(--cv-mute) !important;
  background:transparent !important;
  border-left:2px solid transparent !important;
  transition:background .12s linear, color .12s linear;
}
html body .nav-item:hover{ background:var(--cv-surface) !important; color:var(--cv-ink) !important; }

/* activo: bloque neutro + UNICO riel de color de toda la pantalla */
html body .nav-item.active{
  background:var(--cv-raised) !important;
  color:var(--cv-ink) !important;
  border-left:2px solid var(--gold) !important;
}
html body .nav-label{
  font-size:12.5px !important;
  letter-spacing:.005em !important;
  font-weight:500 !important;
}
/* el emoji lo reemplaza el script por un icono de trazo */
html body .nav-icon{
  width:16px !important; height:16px !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  flex:0 0 16px !important;
  opacity:.9;
}
html body .nav-icon svg{ width:16px; height:16px; display:block; }

html body .sidebar-bottom{ border-top:1px solid var(--cv-rule-soft) !important; }
html body .sidebar-avatar{
  border-radius:var(--cv-r) !important;
  background:var(--cv-raised) !important;
  color:var(--cv-ink) !important;
  border:1px solid var(--cv-rule) !important;
}

/* ---------- 3 · BARRA SUPERIOR -------------------------------------------- */
html body .top-bar{
  background:var(--cv-ground) !important;
  border-bottom:1px solid var(--cv-rule) !important;
  box-shadow:none !important;
  height:52px !important; min-height:52px !important;
  padding:0 16px !important;
}
html body .top-bar h1{
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:var(--cv-mute) !important;
  border:0 !important; padding:0 !important;
}
/* buscador: campo con filete abajo, no caja redondeada */
html body .top-bar-right input[style]{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--cv-rule) !important;
  border-radius:0 !important;
  padding:5px 2px !important;
  color:var(--cv-ink) !important;
  font-size:12.5px !important;
}
html body .top-bar-right input[style]:focus{
  outline:none !important;
  border-bottom-color:var(--gold) !important;
}
html body .notif-bell{ opacity:.8; }
html body .notif-bell svg{ width:16px; height:16px; display:block; }
html body .user-pill{
  background:transparent !important;
  border:1px solid var(--cv-rule) !important;
  border-radius:var(--cv-r) !important;
  font-size:11px !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  color:var(--cv-mute) !important;
}
html body .up-avatar{
  border-radius:2px !important;
  background:var(--cv-raised) !important;
  color:var(--cv-ink) !important;
}

/* ---------- 4 · SOLAPAS: control segmentado, no pildoras ------------------- */
html body .tab-group{
  gap:0 !important;
  padding:0 12px 10px !important;
}
html body .tab-btn{
  border-radius:0 !important;
  border:1px solid var(--cv-rule) !important;
  border-right-width:0 !important;
  background:transparent !important;
  color:var(--cv-mute) !important;
  font-size:10px !important;
  font-weight:600 !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  padding:5px 11px !important;
}
html body .tab-btn:first-child{ border-radius:var(--cv-r) 0 0 var(--cv-r) !important; }
html body .tab-btn:last-child{ border-right-width:1px !important; border-radius:0 var(--cv-r) var(--cv-r) 0 !important; }
html body .tab-btn.active{
  background:var(--cv-raised) !important;
  color:var(--cv-ink) !important;
  border-color:var(--cv-rule) !important;
}

/* ---------- 5 · LISTA DE CHATS: renglones reglados, densos ---------------- */
html body .chat-sidebar{
  background:var(--cv-ground) !important;
  border-right:1px solid var(--cv-rule) !important;
}
html body .chat-item{
  border-radius:0 !important;
  margin:0 !important;
  padding:9px 12px !important;
  gap:10px !important;
  align-items:center !important;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--cv-rule-soft) !important;
  border-left:2px solid transparent !important;
}
html body .chat-item:hover{ background:var(--cv-surface) !important; }
html body .chat-item.active{
  background:var(--cv-raised) !important;
  border-left:2px solid var(--gold) !important;
}
/* la ficha del nombre: cuadrada, no burbuja */
html body .chat-item-avatar{
  width:30px !important; height:30px !important;
  min-width:30px !important;
  border-radius:2px !important;
  background:var(--cv-surface) !important;
  border:1px solid var(--cv-rule) !important;
  color:var(--cv-mute) !important;
  font-size:12px !important;
  font-weight:600 !important;
  font-family:"NX Mono", ui-monospace, monospace !important;
}
html body .chat-item-name{
  font-size:12.5px !important;
  font-weight:600 !important;
  color:var(--cv-ink) !important;
  letter-spacing:.005em !important;
}
html body .chat-item-preview{
  font-size:11.5px !important;
  color:var(--cv-faint) !important;
  margin-top:1px !important;
}
html body .chat-item-time{
  font-size:10px !important;
  color:var(--cv-faint) !important;
  letter-spacing:.02em !important;
}

/* etiquetas CARGA / FINALIZAR: contorno fino, no pildora rellena.
   Se apunta por el color inline que pone React, que es lo unico que las separa. */
html body .chat-item-name span[style]{
  background:transparent !important;
  border:1px solid currentColor !important;
  border-radius:2px !important;
  padding:0 4px !important;
  margin-left:6px !important;
  font-size:9px !important;
  font-weight:600 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  line-height:15px !important;
  display:inline-block !important;
  vertical-align:1px !important;
}
html body .chat-item-name span[style*="34, 197, 94"]{ color:var(--cv-ok) !important; }
html body .chat-item-name span[style*="59, 130, 246"]{ color:var(--cv-info) !important; }
html body .chat-item-name span[style*="239, 68, 68"]{ color:var(--cv-bad) !important; }
html body .chat-item-name span[style*="234, 179, 8"]{ color:var(--cv-warn) !important; }

/* sin leer: el otro unico lugar con color */
html body .chat-badge{
  border-radius:2px !important;
  background:var(--gold) !important;
  font-size:10px !important;
  font-weight:600 !important;
  min-width:17px !important;
  height:17px !important;
  line-height:17px !important;
  padding:0 4px !important;
}

/* ---------- 6 · PANEL DE CONVERSACION ------------------------------------- */
html body .chat-main{ background:var(--cv-ground) !important; }
html body .chat-info-panel{
  background:var(--cv-ground) !important;
  border-left:1px solid var(--cv-rule) !important;
}
html body .msg-input{
  border-radius:var(--cv-r) !important;
  background:var(--cv-surface) !important;
  border:1px solid var(--cv-rule) !important;
}

/* ---------- 7 · BOTONES: rectos, sin degrade ------------------------------ */
html body .btn, html body button.btn{
  border-radius:var(--cv-r) !important;
  background-image:none !important;
  font-weight:600 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  font-size:11px !important;
  box-shadow:none !important;
}
html body .btn-outline{
  background:transparent !important;
  border:1px solid var(--cv-rule) !important;
  color:var(--cv-mute) !important;
}
html body .btn-outline:hover{ border-color:var(--gold) !important; color:var(--cv-ink) !important; }

/* ---------- 8 · barra de desplazamiento ----------------------------------- */
html body ::-webkit-scrollbar{ width:9px; height:9px; }
html body ::-webkit-scrollbar-track{ background:transparent; }
html body ::-webkit-scrollbar-thumb{ background:var(--cv-rule); border-radius:0; }
html body ::-webkit-scrollbar-thumb:hover{ background:#313A46; }

/* ---------- 9 · sueltos con dorado escrito a mano -------------------------- */
/* interruptor de sonido: NO se le cambia el emoji, porque el emoji ES el
   estado (suena / silenciado). Solo el marco. */
html body #chatsnd-btn{
  background:var(--cv-surface) !important;
  border:1px solid var(--cv-rule) !important;
  border-radius:var(--cv-r) !important;
  width:30px !important; height:30px !important;
  padding:0 !important;
  line-height:28px !important;
  font-size:13px !important;
  filter:grayscale(1) !important;
  opacity:.65 !important;
  box-shadow:none !important;
}
html body #chatsnd-btn:hover{ opacity:1 !important; border-color:var(--gold) !important; }

/* boton de menu en pantalla angosta */
html body #mnav-btn{
  background:transparent !important;
  border:1px solid var(--cv-rule) !important;
  border-radius:var(--cv-r) !important;
  color:var(--cv-mute) !important;
}

/* ---------- 10 · TABLAS: reglado fino, encabezado en versalitas ----------- */
html body table{ border-collapse:collapse !important; }
html body thead th{
  background:transparent !important;
  border-bottom:1px solid var(--cv-rule) !important;
  color:var(--cv-faint) !important;
  font-size:9.5px !important;
  font-weight:600 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  padding:8px 10px !important;
}
html body tbody td{
  border-bottom:1px solid var(--cv-rule-soft) !important;
  padding:8px 10px !important;
  font-size:12px !important;
}
html body tbody tr:hover{ background:var(--cv-surface) !important; }
/* los numeros de las tablas, en mono y alineados */
html body tbody td{ font-variant-numeric:tabular-nums !important; }

/* ---------- 11 · tarjetas y paneles --------------------------------------- */
html body .card, html body .panel, html body .box{
  background:var(--cv-surface) !important;
  border:1px solid var(--cv-rule) !important;
  border-radius:var(--cv-r) !important;
  box-shadow:none !important;
}
/* nada de degradados metalicos en ningun lado */
html body [class*="card"], html body [class*="panel"]{ background-image:none !important; }

/* ---------- 12 · LA CONVERSACION ------------------------------------------ */
html body .msg-area, html body .msg-list{ background:var(--cv-ground) !important; }

/* burbujas: esquina casi recta y filete de 1px en vez de relleno saturado */
html body .msg-bubble{
  border-radius:var(--cv-r) !important;
  box-shadow:none !important;
  background-image:none !important;
  font-size:12.5px !important;
  line-height:1.5 !important;
  padding:9px 11px !important;
}
html body .msg-agent .msg-bubble, html body .msg-bot .msg-bubble{
  background:var(--cv-surface) !important;
  border:1px solid var(--cv-rule) !important;
  color:var(--cv-ink) !important;
}
/* lo que escribe el jugador: se distingue por POSICION y por un filete de
   acento, no por un bloque de color */
html body .msg-visitor .msg-bubble{
  background:var(--cv-raised) !important;
  border:1px solid var(--cv-rule) !important;
  border-left:2px solid var(--gold) !important;
  color:var(--cv-ink) !important;
}
html body .msg-system .msg-bubble{
  background:transparent !important;
  border:1px dashed var(--cv-rule) !important;
  color:var(--cv-faint) !important;
}
html body .msg-sender, html body .msg-tipo{
  font-size:9px !important;
  font-weight:600 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:var(--cv-faint) !important;
}
html body .msg-time{
  font-family:"NX Mono", ui-monospace, monospace !important;
  font-size:9.5px !important;
  color:var(--cv-faint) !important;
  font-variant-numeric:tabular-nums !important;
}
html body .msg-input-bar{
  background:var(--cv-ground) !important;
  border-top:1px solid var(--cv-rule) !important;
}
html body .msg-send-btn{
  border-radius:var(--cv-r) !important;
  background:var(--gold) !important;
  background-image:none !important;
  color:#0E1116 !important;
  box-shadow:none !important;
}

/* ---------- 13 · LA BOTONERA: una sola forma, el color INFORMA ------------ */
/* Antes: violeta relleno, azul relleno, degrade verde, naranja, verde — un
   arcoiris de rellenos. Eso es lo que mas delataba la misma mano.
   Ahora: todos iguales, alineados a la izquierda, y la semantica va en el
   filete lateral + el texto. Se apunta por el color inline que pone React,
   que es lo unico que los distingue. */
html body .chat-info-panel button{
  background:transparent !important;
  background-image:none !important;
  border:1px solid var(--cv-rule) !important;
  border-left:2px solid var(--cv-rule) !important;
  border-radius:var(--cv-r) !important;
  color:var(--cv-mute) !important;
  font-size:10px !important;
  font-weight:600 !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  padding:8px 10px !important;
  text-align:left !important;
  box-shadow:none !important;
}
html body .chat-info-panel button:hover{ background:var(--cv-surface) !important; color:var(--cv-ink) !important; }

html body .chat-info-panel button[style*="59, 130, 246"]{ border-left-color:var(--cv-info) !important; color:var(--cv-info) !important; }
html body .chat-info-panel button[style*="5, 150, 105"]{ border-left-color:var(--cv-bad) !important;  color:var(--cv-bad) !important; }
html body .chat-info-panel button[style*="249, 115, 22"]{ border-left-color:var(--cv-warn) !important; color:var(--cv-warn) !important; }
html body .chat-info-panel button[style*="34, 197, 94"]{ border-left-color:var(--cv-ok) !important;   color:var(--cv-ok) !important; }

/* la accion principal sigue siendo la unica llena — pero plana y recta */
html body .chat-info-panel .btn-gold, html body .btn-gold{
  background:var(--gold) !important;
  background-image:none !important;
  border:1px solid var(--gold) !important;
  border-left-width:1px !important;
  color:#0E1116 !important;
  text-align:center !important;
}
html body .chat-info-panel .btn-gold:hover{ filter:brightness(1.08) !important; }

/* solapas del panel derecho: mismo control segmentado que la lista */
html body .chat-info-panel [class*="tab"]{
  border-radius:0 !important;
  font-size:9.5px !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
}
/* etiquetas de dato (USUARIO, TELEFONO, CUIL...) */
html body .chat-info-panel label,
html body .chat-info-panel textarea{
  border-radius:var(--cv-r) !important;
}
html body .chat-info-panel textarea{
  background:var(--cv-surface) !important;
  border:1px solid var(--cv-rule) !important;
}

/* ---------- 14 · ESTADOS: contorno teñido, no bloque de color ------------- */
/* React marca el estado activo rellenando el boton con el color y texto negro
   (MODO manual/interno/lambda, TRANSFERENCIA automatica/manual, etc).
   Se apunta por el color inline, que SOLO aparece cuando esta activo: el
   inactivo no lleva color. Asi el estado se sigue leyendo, pero como chip. */
html body button[style*="245, 158, 11"]{ background:rgba(217,164,65,.12) !important; color:var(--cv-warn) !important; border:1px solid var(--cv-warn) !important; }
html body button[style*="59, 130, 246"]{  background:rgba(91,155,232,.12) !important; color:var(--cv-info) !important; border:1px solid var(--cv-info) !important; }
html body button[style*="34, 197, 94"]{   background:rgba(63,191,135,.12) !important; color:var(--cv-ok)   !important; border:1px solid var(--cv-ok)   !important; }
html body button[style*="239, 68, 68"]{   background:rgba(224,104,95,.12) !important; color:var(--cv-bad)  !important; border:1px solid var(--cv-bad)  !important; }
html body button[style*="245, 158, 11"],
html body button[style*="59, 130, 246"],
html body button[style*="34, 197, 94"],
html body button[style*="239, 68, 68"]{
  border-radius:var(--cv-r) !important;
  background-image:none !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  box-shadow:none !important;
}

/* dorado viejo escrito a mano (menu de autocompletado y su hover).
   ⚠️ Se apunta SOLO a rgba(...) — el color solido rgb(212,168,67) es el
   PRESET de marca del tenant en Ajustes y eso es funcionalidad, no skin. */
html body [style*="rgba(212, 168, 67"]{
  background-color:var(--cv-raised) !important;
  border-color:var(--cv-rule) !important;
}

/* ---------- 15 · campos de formulario ------------------------------------- */
html body .form-input, html body input[type="text"], html body input[type="number"],
html body input[type="date"], html body select, html body textarea{
  border-radius:var(--cv-r) !important;
  background:var(--cv-surface) !important;
  border:1px solid var(--cv-rule) !important;
  color:var(--cv-ink) !important;
  font-size:12px !important;
}
html body input:focus, html body select:focus, html body textarea:focus{
  outline:none !important;
  border-color:var(--gold) !important;
}
/* etiquetas de seccion en versalitas */
html body .section-padded > div > span{ letter-spacing:.06em !important; }

/* ---------- 16 · NINGUN DEGRADADO EN NINGUN BOTON ------------------------- */
/* El degradado metalico es de lo que mas delata la misma mano. React los pone
   en linea para marcar el estado (MODO manual/interno/lambda, bloquear, etc).
   Se aplanan todos y el color pasa al contorno + el texto. */
html body button[style*="linear-gradient"]{
  background-image:none !important;
  background-color:var(--cv-surface) !important;
  border:1px solid var(--cv-rule) !important;
  border-radius:var(--cv-r) !important;
  color:var(--cv-ink) !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  box-shadow:none !important;
  min-width:0 !important;
}
/* el tono sale del primer color del degradado */
html body button[style*="255, 165, 0"],
html body button[style*="245, 158, 11"]{ background-color:rgba(217,164,65,.12) !important; border-color:var(--cv-warn) !important; color:var(--cv-warn) !important; }
html body button[style*="5, 150, 105"],
html body button[style*="16, 185, 129"]{ background-color:rgba(63,191,135,.12) !important; border-color:var(--cv-ok) !important; color:var(--cv-ok) !important; }
html body button[style*="59, 130, 246"]{ background-color:rgba(91,155,232,.12) !important; border-color:var(--cv-info) !important; color:var(--cv-info) !important; }
html body button[style*="239, 68, 68"]{ background-color:rgba(224,104,95,.12) !important; border-color:var(--cv-bad) !important; color:var(--cv-bad) !important; }

/* pildoras de 20px que quedan sueltas */
html body button[style*="border-radius: 20px"]{ border-radius:var(--cv-r) !important; }

/* ---------- 17 · interruptor de transferencia (.pt-ctl) ------------------- */
html body .pt-ctl{ gap:0 !important; }
html body .pt-ctl button{
  border-radius:0 !important;
  border:1px solid var(--cv-rule) !important;
  border-right-width:0 !important;
  background:transparent !important;
  background-image:none !important;
  color:var(--cv-mute) !important;
  font-size:10px !important;
  font-weight:600 !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  padding:5px 12px !important;
}
html body .pt-ctl button:first-of-type{ border-radius:var(--cv-r) 0 0 var(--cv-r) !important; }
html body .pt-ctl button:last-of-type{ border-right-width:1px !important; border-radius:0 var(--cv-r) var(--cv-r) 0 !important; }
html body .pt-ctl .pt-on{
  background:var(--cv-raised) !important;
  color:var(--cv-ink) !important;
  border-color:var(--cv-rule) !important;
  box-shadow:inset 2px 0 0 var(--gold) !important;
}

/* verde material del panel original (#4CAF50 = 76,175,80): venia relleno con
   texto blanco, con poco contraste, y ademas rompia la consistencia con el
   resto de los botones ya normalizados. Encontrado auditando las 15 pantallas
   (aparecia solo en Bonos, "+ Nueva Regla"). */
html body button[style*="76, 175, 80"]{
  background-color:rgba(63,191,135,.12) !important;
  background-image:none !important;
  border:1px solid var(--cv-ok) !important;
  color:var(--cv-ok) !important;
  border-radius:var(--cv-r) !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}