/* ============================================================
   DS THEME — Design System administrativo (azul noche premium)
   Marca DS Technology · #06080d · ref Vercel/Linear/Stripe
   Enlazar DESPUES del <style> propio de cada pantalla admin.
   NO aplicar a: pos, pos-restaurante, pos-mesero, pos-rest2,
   pos-login, kds, ds-distribuidor.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#06080d; --bg2:#0A0E1A;
  --surface:#131A2E; --surface2:#1A2238;
  --border:rgba(255,255,255,.09); --border2:rgba(255,255,255,.16);
  --text:#F8FAFC; --text2:#D5DCE8; --text3:#A0ABC0;
  --grad-brand:linear-gradient(135deg,#0F172A 0%,#1E3A5F 55%,#1D4ED8 100%);
}

*{font-family:'Inter','Segoe UI',system-ui,sans-serif}
body{background:linear-gradient(160deg,var(--bg),var(--bg2))!important;color:var(--text)!important}

/* Cabecera oscura integrada */
.hdr{background:linear-gradient(180deg,#0F172A,#0A0E1A)!important;border-bottom:1px solid var(--border)!important;box-shadow:none!important}

/* Sidebar oscuro */
.sidebar{background:var(--surface)!important;border-right:1px solid var(--border)!important}

/* Nav items con borde + hover verde glow (estilo accesos rapidos) */
.nav-item{border:1px solid var(--border)!important;margin-bottom:5px!important;transition:all .18s cubic-bezier(.4,0,.2,1)!important}
.nav-item:hover{background:var(--surface2)!important;color:var(--text)!important;border-color:var(--p)!important;box-shadow:0 0 0 3px rgba(0,196,140,.12)!important}
.nav-item.active{border-color:rgba(0,196,140,.45)!important}
.nav-item:active{transform:scale(.97)}

/* Superficies de contenido */
.stat,.card,.fe-stat{background:var(--surface)!important;border:1px solid var(--border)!important;box-shadow:none!important}
.stat{transition:transform .2s,box-shadow .2s,border-color .2s!important}
.stat:hover{transform:translateY(-3px);border-color:var(--p)!important;box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 0 3px rgba(0,196,140,.12)!important}
.quick-btn{background:var(--surface2)!important;border:1.5px solid var(--border)!important}
.quick-btn:hover{border-color:var(--p)!important;background:var(--surface)!important;transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.35)!important}

/* Tablas */
tbody tr{border-bottom:1px solid var(--border)!important}
tbody tr:hover{background:var(--surface2)!important;box-shadow:inset 3px 0 0 var(--p),inset 0 0 0 9999px rgba(0,196,140,.04)!important}

/* Alertas / items de lista */
.alert-item:hover{background:var(--surface2)!important;box-shadow:inset 0 0 0 1px var(--p),inset 0 0 0 3px rgba(0,196,140,.10)!important}

/* Botones */
.btn,.wbtn,.hdr-pill,.emp-sel,.toggle-sb,.quick-btn,.card-link{transition:all .22s cubic-bezier(.4,0,.2,1)!important}
.btn:active,.wbtn:active,.quick-btn:active{transform:translateY(0) scale(.97)}
.btn-outline{background:transparent!important;color:var(--text2)!important;border:1.5px solid var(--border2)!important}
.btn-outline:hover{border-color:var(--p)!important;color:var(--p)!important;background:rgba(255,255,255,.04)!important}

/* Inputs / selects */
input,select,textarea{background:var(--surface2);color:var(--text);border-color:var(--border)}
.search-box input:focus,select.filt:focus{border-color:var(--p)!important;background:var(--surface2)!important}
select.filt{background:var(--surface2)!important;color:var(--text)!important}

/* ============================================================
   CONTROLES DE FORMULARIO (selects, inputs, fechas, busqueda)
   Cubre cajas blancas y date-pickers en tema oscuro.
   ============================================================ */
/* color-scheme dark: hace que date-pickers, scrollbars y spinners nativos usen estilo oscuro */
:root{color-scheme:dark}

input,select,textarea{
  background:var(--surface2)!important;
  color:var(--text)!important;
  border:1.5px solid var(--border)!important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--p)!important;
  box-shadow:0 0 0 3px rgba(0,196,140,.12)!important;
}
/* Selects con clase .filt que tenian #fff hardcodeado */
select.filt{background:var(--surface2)!important;color:var(--text)!important}
/* Las <option> en menus desplegables: fondo oscuro y texto claro */
select option{background:#0F172A!important;color:var(--text)!important}
/* Placeholders legibles */
::placeholder{color:var(--text3)!important;opacity:1}
/* Inputs de precio/cantidad que tenian #fff hardcodeado */
.precio-card input[type="text"],.price-card input,.adj-input{
  background:var(--surface2)!important;color:var(--text)!important;
}
/* Icono del calendario en input date: forzar a claro/visible */
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.4);cursor:pointer}
/* Caja de busqueda (.srch) */
.srch input{background:var(--surface2)!important;color:var(--text)!important}

/* ============================================================
   MODALES (creacion/edicion) — tarjeta oscura premium
   ============================================================ */
.overlay{background:rgba(3,5,10,.66)!important;backdrop-filter:blur(6px)!important}
.modal{background:var(--surface)!important;border:1px solid var(--border)!important;box-shadow:0 24px 70px rgba(0,0,0,.55)!important}
/* Cabecera del modal */
.modal-hdr,.mhdr,.card-hdr{border-bottom:1px solid var(--border)!important}
.mhdr-title,.modal-title{color:var(--text)!important}
.mhdr-sub,.modal-sub{color:var(--text3)!important}
/* Boton cerrar */
.mclose{background:var(--surface2)!important;color:var(--text2)!important;border:1px solid var(--border)!important;border-radius:8px}
.mclose:hover{color:var(--text)!important;border-color:var(--p)!important}
/* Campos dentro de modales (.fgrp) */
.fgrp label{color:var(--text2)!important}
.fgrp input,.fgrp select,.fgrp textarea{background:var(--surface2)!important;color:var(--text)!important;border:1.5px solid var(--border)!important}
.fgrp input:focus,.fgrp select:focus,.fgrp textarea:focus{border-color:var(--p)!important;box-shadow:0 0 0 3px rgba(0,196,140,.12)!important}
/* Secciones internas del modal que suelen venir claras */
.modal .card,.modal .stat,.modal .precio-card,.modal .price-card{background:var(--surface2)!important;border-color:var(--border)!important}

/* ============================================================
   REFUERZO: controles dentro de modales con estilos inline
   (vence background:#fff inline en inputs/selects sueltos)
   ============================================================ */
.modal input,.modal select,.modal textarea,
.overlay input,.overlay select,.overlay textarea{
  background:var(--surface2)!important;
  color:var(--text)!important;
  border:1.5px solid var(--border)!important;
}
.modal input:focus,.modal select:focus,.modal textarea:focus,
.overlay input:focus,.overlay select:focus,.overlay textarea:focus{
  border-color:var(--p)!important;
  box-shadow:0 0 0 3px rgba(0,196,140,.12)!important;
}
.modal select option,.overlay select option{background:#0F172A!important;color:var(--text)!important}
/* Labels y textos sueltos dentro del modal */
.modal label,.overlay label{color:var(--text2)!important}
.mbody{background:transparent!important;color:var(--text)!important}
/* Checkboxes con label que traen background:#fff inline */
.modal label[style*="background:#fff"],.overlay label[style*="background:#fff"]{background:var(--surface2)!important}
/* Cajas internas con borde claro (bloques de codigo, hints) */
.modal .hint,.overlay .hint{color:var(--text3)!important}
.modal[type] ,.tab-panel{color:var(--text)!important}
/* Date pickers dentro de modal */
.modal input[type="date"]::-webkit-calendar-picker-indicator,
.overlay input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.4)}

/* ============================================================
   BOTONES DE ACCION e iconos que quedaban blancos
   ============================================================ */
.ibtn{background:var(--surface2)!important;border:1.5px solid var(--border)!important;color:var(--text2)!important}
.ibtn:hover{border-color:var(--p)!important;background:var(--surface)!important;color:var(--text)!important}
.ibtn.del:hover{border-color:var(--danger)!important}
.btn-outline{background:transparent!important;color:var(--text2)!important;border:1.5px solid var(--border2)!important}
.btn-outline:hover{border-color:var(--p)!important;color:var(--p)!important;background:rgba(255,255,255,.04)!important}
.mclose{background:var(--surface2)!important;color:var(--text2)!important;border:1.5px solid var(--border)!important}
.mclose:hover{border-color:var(--p)!important;color:var(--text)!important}
/* Pie de modal y tarjetas internas que tenian #fff */
.mfooter{background:var(--surface)!important;border-top:1px solid var(--border)!important}
.precio-card{background:var(--surface2)!important;box-shadow:0 0 0 1.5px var(--border)!important}
.precio-card input[type="text"],.price-card input{background:var(--surface2)!important;color:var(--text)!important}

/* ============================================================
   TARJETAS/CONTENEDORES adicionales por pantalla
   (.tcard en clientes, y otros wrappers de contenido)
   ============================================================ */
.tcard,.panel,.tbl-card,.list-card,.data-card,.content-card{
  background:var(--surface)!important;
  border:1px solid var(--border)!important;
  box-shadow:none!important;
}
.box{background:var(--surface2)!important;border:1.5px solid var(--border)!important}

/* ============================================================
   TABLAS con hover/zebra aplicado a TD (no a TR)
   (caja-menor y otras: tbody tr:hover td, nth-child even td)
   ============================================================ */
tbody tr:nth-child(even) td{background:transparent!important}
tbody tr:hover td{background:var(--surface2)!important;color:var(--text)!important}
tbody tr:hover{box-shadow:inset 3px 0 0 var(--p)!important}

/* ============================================================
   Variable --card (usada por .btn-o y otros) + botones outline propios
   ============================================================ */
:root{--card:#131A2E!important}
.btn-o{background:var(--surface2)!important;border:1.5px solid var(--border)!important;color:var(--text2)!important}
.btn-o:hover{border-color:var(--p)!important;color:var(--p)!important;background:rgba(255,255,255,.04)!important}

/* ============================================================
   TABS / pestañas (tabs-wrap, .tab) — fondo oscuro, activa verde
   ============================================================ */
.tabs-wrap,.tabs,.tab-bar{background:var(--surface)!important;border-bottom:1px solid var(--border)!important;box-shadow:none!important}
.tab{color:var(--text3)!important}
.tab:hover{color:var(--text)!important}
.tab.active{color:var(--p)!important;border-bottom-color:var(--p)!important}

/* ============================================================
   COTIZACIONES — clases propias (topbar, metric, editor, items)
   ============================================================ */
.topbar,.editor-topbar{background:var(--surface)!important;border-bottom:1px solid var(--border)!important;box-shadow:none!important}
.tb-back{background:var(--surface2)!important;border:1.5px solid var(--border)!important;color:var(--text2)!important}
.tb-back:hover{border-color:var(--p)!important;color:var(--p)!important}
.metric-card,.list-toolbar,.tbl-card,.sec,.editor-actions{background:var(--surface)!important;border:1px solid var(--border)!important;box-shadow:none!important}
.sel-f,.finp,.ii{background:var(--surface2)!important;color:var(--text)!important;border:1.5px solid var(--border)!important}
.sel-f:focus,.finp:focus,.ii:focus{border-color:var(--p)!important}
.item-row{background:var(--surface2)!important;border:1px solid var(--border)!important}
.modal-footer{background:var(--surface2)!important;border-top:1px solid var(--border)!important}
.cli-item,.prod-card,.formato-card{background:var(--surface2)!important;border:1.5px solid var(--border)!important}
.cli-item:hover,.prod-card:hover,.formato-card:hover{border-color:var(--p)!important;background:var(--surface)!important}
.cli-empty:hover,.btn-add-row:hover{border-color:var(--p)!important;color:var(--p)!important;background:rgba(0,196,140,.08)!important}
.prod-search-bar input:focus{background:var(--surface2)!important}
/* badges de estado de cotizacion: version dark legible */
.b-borrador{background:rgba(148,163,184,.15)!important;color:#CBD5E1!important}
.b-en_proceso{background:rgba(245,158,11,.15)!important;color:#FBBF24!important}
.b-totalizada{background:rgba(16,185,129,.15)!important;color:#34D399!important}
.b-anulada{background:rgba(239,68,68,.15)!important;color:#F87171!important}
.b-vencida{background:rgba(234,88,12,.15)!important;color:#FB923C!important}

/* ============================================================
   Encabezados de tabla (thead) — fondo oscuro, texto legible
   (cubre degradados claros como en cotizaciones)
   ============================================================ */
thead tr{background:var(--surface2)!important}
thead th,thead tr th{background:var(--surface2)!important;color:var(--text3)!important;border-bottom:1px solid var(--border)!important}

/* ============================================================
   COTIZACIONES editor — resumen totales + franja editor (refuerzo)
   ============================================================ */
.totales{background:linear-gradient(135deg,var(--surface2),var(--surface))!important;border:1px solid var(--border)!important;color:var(--text)!important}
.editor-topbar{background:var(--surface)!important;border-bottom:1px solid var(--border)!important;box-shadow:none!important}
.items-toolbar{background:transparent!important}
/* Encabezados de seccion dentro del editor */
.sec-head,.sec-hdr,.sec-title{background:var(--surface2)!important;color:var(--text)!important;border-bottom:1px solid var(--border)!important}

/* ============================================================
   COTIZACIONES — contenedor de vista editor (franja clara)
   ============================================================ */
.view,#view-editor,#view-lista,.view-editor,.view-lista{background:transparent!important}

/* ============================================================
   Filas de tabla base transparentes (libro de compras y otras)
   ============================================================ */
tbody tr{background:transparent!important}
tbody td{background:transparent!important;color:var(--text)!important}
tbody tr:nth-child(even) td{background:transparent!important}
tbody tr:hover td{background:var(--surface2)!important}

/* ============================================================
   REPORTES — clases propias (filtros, KPI, tablas, graficas)
   (NO afecta plantillas de impresion: esas son ventana aparte sin tema)
   ============================================================ */
.fb{background:var(--surface)!important;border-bottom:1px solid var(--border)!important;box-shadow:none!important}
.fg input,.fg select{background:var(--surface2)!important;color:var(--text)!important;border:1.5px solid var(--border)!important}
.kc,.tc,.cc{background:var(--surface)!important;border:1px solid var(--border)!important;box-shadow:none!important}
.th2{background:var(--surface2)!important;border-bottom:1px solid var(--border)!important;color:var(--text)!important}
.cp,.sb2{background:var(--surface2)!important;border:1px solid var(--border)!important;color:var(--text)!important}

/* ============================================================
   REPORTES — ampliar recuadros con scroll interno (Sin Rotacion, etc.)
   y reforzar cabeceras de tabla
   ============================================================ */
.tw,.mv-scroll{max-height:75vh!important}
.th2{background:var(--surface2)!important;color:var(--text)!important;border-bottom:1px solid var(--border)!important}
.bt{background:var(--surface2)!important}

/* ============================================================
   REPORTES — header .tb a azul noche integrado (era verde viejo)
   + cintillo TOTAL NETO legible en dark
   ============================================================ */
.tb{background:linear-gradient(180deg,#0F172A,#0A0E1A)!important;border-bottom:1px solid var(--border)!important;box-shadow:none!important}
.tot{background:linear-gradient(135deg,var(--surface2),var(--surface))!important;border-top:1px solid var(--border)!important}

/* ============================================================
   REPORTES — textos oscuros sobre fondo oscuro (KPI, titulos)
   ============================================================ */
.kv{color:var(--text)!important}
.kc .kl,.kc-lbl,.kl{color:var(--text3)!important}
.ss{color:var(--text3)!important}
.th2 h3{color:var(--text)!important}
.cc h4{color:var(--text)!important}
tbody td{color:var(--text2)!important}

/* ============================================================
   Texto de celdas de tabla mas legible (datos deben destacar)
   ============================================================ */
tbody td{color:var(--text)!important}
.num-cell,.nr,.fw7{color:var(--text)!important}
.kl{color:var(--text3)!important}
.ks,.tv2,.tl2{color:var(--text2)!important}
.kb.nt{background:rgba(148,163,184,.15)!important;color:#CBD5E1!important}

/* ============================================================
   USUARIOS — content-hdr, permisos, modulos, modal-foot
   ============================================================ */
.content-hdr{background:linear-gradient(135deg,var(--surface2),var(--surface))!important;border-bottom:1px solid var(--border)!important;color:var(--text)!important}
.modal-foot{background:var(--surface2)!important;border-top:1px solid var(--border)!important}
.modulo-hdr{background:var(--surface2)!important;color:var(--text)!important}
.modulo-body{background:var(--surface)!important;border-top:1px solid var(--border)!important}
.opcion-row{background:var(--surface2)!important;border:1.5px solid var(--border)!important;color:var(--text)!important}
.opcion-row.activa{border-color:var(--p)!important;background:rgba(0,196,140,.1)!important}
.sel-all-row{background:var(--surface2)!important;color:var(--text)!important}
.perm-btn{background:var(--surface)!important;border:1.5px solid var(--border)!important;color:var(--text3)!important}
.perm-btn.on.ver{background:rgba(37,99,235,.2)!important;border-color:rgba(37,99,235,.5)!important;color:#93C5FD!important}
.perm-btn.on.crear{background:rgba(16,185,129,.2)!important;border-color:rgba(16,185,129,.5)!important;color:#86EFAC!important}
.perm-btn.on.editar{background:rgba(234,179,8,.2)!important;border-color:rgba(234,179,8,.5)!important;color:#FDE047!important}
.perm-btn.on.eliminar{background:rgba(239,68,68,.2)!important;border-color:rgba(239,68,68,.5)!important;color:#FCA5A5!important}
.btn-gray{background:var(--surface2)!important;color:var(--text2)!important;border:1.5px solid var(--border)!important}

/* ============================================================
   USUARIOS — pestañas .tabs/.tab (inactiva no contrastaba)
   ============================================================ */
.tabs .tab{background:var(--surface2)!important;color:var(--text2)!important;border-bottom:3px solid transparent!important}
.tabs .tab:hover{color:var(--text)!important;background:var(--surface)!important}
.tabs .tab.active{background:var(--surface)!important;color:#60A5FA!important;border-bottom:3px solid var(--a,#2563EB)!important}

/* ============================================================
   VENDEDORES — filt, pin-wrap, badges
   ============================================================ */
.filt{background:var(--surface2)!important;color:var(--text)!important;border:1.5px solid var(--border)!important}
.pin-wrap{background:rgba(245,158,11,.1)!important;border:1.5px solid rgba(245,158,11,.4)!important}
.pin-input{background:var(--surface2)!important;color:var(--text)!important;border:1.5px solid rgba(245,158,11,.4)!important}
.badge-restaurante{background:rgba(245,158,11,.18)!important;color:#FBBF24!important}
.badge-ambos{background:rgba(13,148,136,.18)!important;color:#2DD4BF!important}

/* ============================================================
   Variables alternativas (configuracion usa --wh/--tx/--bd/--ac)
   Mapeo al tema oscuro para cobertura completa
   ============================================================ */
:root{
  --wh:#131A2E!important; --bg:#06080d!important;
  --tx:#F8FAFC!important; --tx2:#C2CBDA!important; --tx3:#A0ABC0!important;
  --bd:rgba(255,255,255,.09)!important;
  --sb:#131A2E!important; --sbh:#1A2238!important;
}
/* Tabla y KPI de configuracion/licencia */
.tbl thead th{background:var(--surface2)!important;color:var(--text2)!important}
.tbl tbody tr:hover{background:var(--surface2)!important}
.kpi{background:var(--surface2)!important;border:1px solid var(--border)!important;color:var(--text)!important}
.kpi-l{color:var(--text3)!important}.kpi-v{color:var(--text)!important}
/* badges de plan en dark */
.plan-BASICO{background:rgba(37,99,235,.2)!important;color:#93C5FD!important}
.plan-PRO{background:rgba(245,158,11,.2)!important;color:#FBBF24!important}
.plan-PREMIUM{background:rgba(16,185,129,.2)!important;color:#86EFAC!important}
.plan-TRIAL{background:rgba(168,85,247,.2)!important;color:#D8B4FE!important}

/* ============================================================
   Variables para banners de color en entidades CORE (modo dark)
   Solo admin (que carga este archivo). POS/distribuidor usan fallback claro.
   ============================================================ */
:root{
  --info-bg:rgba(37,99,235,.12)!important; --info-bd:rgba(37,99,235,.35)!important; --info-tx:#93C5FD!important;
  --ok-bg:rgba(16,185,129,.12)!important; --ok-bd:rgba(16,185,129,.35)!important; --ok-tx:#34D399!important;
}

/* ============================================================
   Modales con .modal-hdr (cotizaciones: Seleccionar cliente/producto)
   ============================================================ */
.modal-hdr{background:var(--surface2)!important;border-bottom:1px solid var(--border)!important}
.modal-title{color:var(--text)!important}
.btn-close{background:var(--surface2)!important;color:var(--text3)!important}
.btn-close:hover{background:rgba(239,68,68,.15)!important;color:#F87171!important}
.cli-list{background:transparent!important}

/* ============================================================
   PROVEEDORES — inputs, responsabilidades fiscales, actividades, tags
   ============================================================ */
.fgrp input,.fgrp select,.fgrp textarea{background:var(--surface2)!important;color:var(--text)!important}
.resp-wrap{background:var(--surface2)!important;border:1.5px solid var(--border)!important}
.resp-item{background:var(--surface)!important;border:1.5px solid transparent!important;color:var(--text)!important;box-shadow:none!important}
.resp-item:hover{border-color:var(--p)!important;background:rgba(0,196,140,.1)!important}
.resp-item.sel{border-color:var(--p)!important;background:rgba(0,196,140,.15)!important;color:#86EFAC!important}
.act-resultados{background:var(--surface)!important;border:1px solid var(--border)!important}
.act-item:hover{background:rgba(0,196,140,.1)!important}
.tags-wrap{background:var(--surface2)!important;border:1.5px dashed var(--border)!important}
.tipo-item{background:var(--surface2)!important;border:1.5px solid var(--border)!important;color:var(--text)!important}

/* Proveedores - buscador CIIU */
.act-buscar{background:var(--surface)!important;color:var(--text)!important;border:1.5px solid var(--border)!important}
.act-empty{color:var(--text3)!important}

/* ============================================================
   BODEGAS — inputs de formulario
   ============================================================ */
.fgrp input,.fgrp select,.fgrp textarea{background:var(--surface2)!important;color:var(--text)!important}

/* ============================================================
   EMPRESAS-ADMIN — variables propias + clases con #fff hardcodeado
   ============================================================ */
:root{--muted:#A0ABC0!important;--dark:#F8FAFC!important}
.empresas-admin thead,thead{background:var(--surface2)!important}
tr:hover td{background:var(--surface2)!important}
.modal-hdr{background:var(--surface2)!important;border-bottom:1px solid var(--border)!important}
.fg input,.fg select,.fg textarea{background:var(--surface2)!important;color:var(--text)!important;border:1.5px solid var(--border)!important}
.actividades-wrap{background:var(--surface2)!important;border:1.5px solid var(--border)!important}
.actividades-wrap input.buscar-act{background:var(--surface)!important;color:var(--text)!important}
.act-resultados{background:var(--surface)!important;border:1px solid var(--border)!important}
.act-item:hover{background:rgba(0,196,140,.1)!important}
.tags-wrap{background:var(--surface2)!important;border:1.5px dashed var(--border)!important}
.resp-wrap{background:var(--surface2)!important;border:1.5px solid var(--border)!important}
.resp-item{background:var(--surface)!important;border:1.5px solid transparent!important;color:var(--text)!important;box-shadow:none!important}
.resp-item:hover{border-color:var(--p)!important;background:rgba(0,196,140,.1)!important}
.creds-box.green{background:rgba(16,185,129,.12)!important;border:1.5px solid rgba(16,185,129,.35)!important}
.creds-box.yellow{background:rgba(245,158,11,.12)!important;border:1.5px solid rgba(245,158,11,.35)!important}
.btn-gray{background:var(--surface2)!important;color:var(--text2)!important;border:1.5px solid var(--border)!important}
.badge-BASICO{background:rgba(148,163,184,.18)!important;color:#CBD5E1!important}

/* ============================================================
   ADMIN-LICENCIAS — thead, hover, inputs, badges de plan
   ============================================================ */
.tbl thead th{background:var(--surface2)!important;color:var(--text2)!important;border-bottom:1px solid var(--border)!important}
.tbl tbody tr:hover{background:var(--surface2)!important}
.fg input,.fg select{background:var(--surface2)!important;color:var(--text)!important;border:1.5px solid var(--border)!important}
.mh,.mf{border-color:var(--border)!important}
.b-gr{background:rgba(148,163,184,.18)!important;color:#CBD5E1!important}

/* ============================================================
   PANEL-CLIENTE — thead, barras de uso, features
   ============================================================ */
.tbl thead th{background:var(--surface2)!important;color:var(--text2)!important;border-bottom:1px solid var(--border)!important}
.uso-track{background:var(--surface2)!important}
.feat-ic.off{background:var(--surface2)!important;opacity:.5}
.b-gr{background:rgba(148,163,184,.18)!important;color:#CBD5E1!important}