:root{
  --azul:#262626; --azul-osc:#171717; --cyan:#737373;
  --gris:#525252; --gris-cl:#F5F5F5; --linea:#E5E5E5;
  --texto:#0F172A; --ok:#16A34A; --ok-bg:#DCFCE7;
  --rojo:#DC2626; --amber:#F59E0B;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:#F8FAFC; color:var(--texto); font-size:14.5px; line-height:1.5;
}
a{color:var(--azul); text-decoration:none}

/* Topbar */
.topbar{
  display:flex; align-items:center; gap:24px;
  background:#fff; border-bottom:1px solid var(--linea);
  padding:10px 24px; position:sticky; top:0; z-index:20;
  box-shadow:0 1px 3px rgba(15,23,42,.04);
}
.brand-logo{height:34px; display:block}
.nav{display:flex; gap:4px; margin-left:8px; flex:1}
.nav a{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:10px; color:var(--gris); font-weight:500; font-size:14px;
}
.nav a:hover{background:var(--gris-cl); color:var(--texto)}
.nav a.active{background:var(--texto); color:#fff}
/* Grupos desplegables de la barra (Ventas, Inventario y compras): el boton se
   ve igual que un enlace de nav; la lista reusa .menu-mas-lista. */
.nav-grupo{position:relative; display:inline-block}
.nav-grupo-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; border-radius:10px; color:var(--gris); font-weight:500; font-size:14px;
  background:none; border:none; cursor:pointer; font-family:inherit; white-space:nowrap;
}
.nav-grupo-btn:hover{background:var(--gris-cl); color:var(--texto)}
.nav-grupo-btn.active{background:var(--texto); color:#fff}
.nav-grupo-caret{font-size:10px; line-height:1; opacity:.75}
.nav-grupo .menu-mas-lista a{display:flex; align-items:center; gap:8px}
.nav-grupo .menu-mas-lista a.active{background:var(--texto); color:#fff}
.btn-nav{white-space:nowrap}
.nav-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--linea);
  color:var(--gris); flex-shrink:0; background:#fff; cursor:pointer; font-family:inherit;
}
.nav-avatar:hover{background:var(--gris-cl); color:var(--texto)}

.container{max-width:1500px; margin:22px auto; padding:0 24px}

/* Botones */
.btn{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid var(--linea); background:#fff; color:var(--texto);
  padding:8px 15px; border-radius:8px; font-size:13.5px; font-weight:500;
  transition:.15s; text-decoration:none;
}
.btn:hover{border-color:#CBD5E1; background:var(--gris-cl)}
.btn-primary{background:var(--texto); border-color:var(--texto); color:#fff; font-weight:600}
.btn-primary:hover{background:#000; border-color:#000; color:#fff}
.btn-ghost{background:transparent; border-color:transparent; color:var(--gris)}
.btn-danger{color:var(--rojo); border-color:transparent; background:transparent}
.btn-danger:hover{background:#FEE2E2; border-color:#FEE2E2}
.btn-danger-solid{background:var(--rojo); border-color:var(--rojo); color:#fff; font-weight:600}
.btn-danger-solid:hover{background:#B91C1C; border-color:#B91C1C}
.btn-sm{padding:6px 12px; font-size:13px; height:34px; box-sizing:border-box}

/* Cards */
.card{
  background:#fff; border:1px solid var(--linea); border-radius:16px;
  padding:24px; margin-bottom:18px; box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px}
.page-head h1{font-size:20px; margin:0; font-weight:600; letter-spacing:-.2px}
h1,h2,h3{color:var(--texto); font-weight:600}
.page-head .actions{padding-top:2px}

/* Stats */
.stats{display:flex; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.stat{
  flex:1; min-width:180px; background:#fff; border:1px solid var(--linea);
  border-radius:14px; padding:18px 20px;
}
.stat .label{color:var(--gris); font-size:13px; margin-bottom:4px}
.stat .value{font-size:26px; font-weight:700; color:var(--azul)}

/* Tablas */
table.data{width:100%; border-collapse:collapse}
table.data th{
  text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--gris); font-weight:600; padding:9px 16px; border-bottom:1px solid var(--linea);
}
table.data th.num{text-align:right}
table.data td{padding:10px 16px; border-bottom:1px solid var(--linea); font-weight:400}
table.data tr:last-child td{border-bottom:none}
table.data tr:hover td{background:#FAFAFA}
table.data strong{font-weight:600}
.num{text-align:right; font-variant-numeric:tabular-nums}
.muted{color:var(--gris)}
.badge{
  display:inline-block; padding:3px 10px; border-radius:8px; font-size:12px;
  font-weight:600; background:var(--gris-cl); color:var(--gris); border:1px solid transparent;
}
.badge-ok{background:var(--ok-bg); color:var(--texto); border-color:var(--ok); --dot:var(--ok)}
.badge-amber{background:#FEF3C7; color:var(--texto); border-color:#B45309; --dot:#B45309}
.badge-info{background:#DBEAFE; color:var(--texto); border-color:#1D4ED8; --dot:#1D4ED8}
.badge-rej{background:#FEE2E2; color:var(--texto); border-color:var(--rojo); --dot:var(--rojo)}
.flecha-tipo svg{stroke-width:3}
.no-eyedropper .eyedrop-btn{display:none}

/* Badge de estado clicable (dropdown) */
.estado-dropdown{position:relative; display:inline-block}
.badge-btn{
  /* border-width/style aca, NO border-color: ese lo pone la variante
     (badge-ok/amber/rej) -- si se pusiera aca con el shorthand "border",
     lo pisaria sin importar el orden en el archivo (misma especificidad). */
  border-width:1px; border-style:solid; cursor:pointer; font-family:inherit; line-height:1.4;
  display:inline-flex; align-items:center; gap:5px;
}
.badge-btn:hover{filter:brightness(.96)}
.badge-btn::after{content:""; width:5px; height:5px; border-radius:50%; background:var(--dot, currentColor)}
.estado-menu{
  display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:30;
  background:#fff; border:1px solid var(--linea); border-radius:10px;
  box-shadow:0 8px 24px rgba(15,23,42,.12); padding:6px; min-width:140px;
}
.estado-menu.open{display:block}
.estado-menu-item{
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:5px 6px; border-radius:6px; font-family:inherit;
}
.estado-menu-item:hover{background:var(--gris-cl)}

/* Chips de filtros activos */
.chips-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.chip{
  display:inline-flex; align-items:center; gap:7px; background:var(--gris-cl); color:var(--texto);
  border:none; cursor:pointer; font-family:inherit; padding:5px 10px 5px 12px; border-radius:20px;
  font-size:12.5px; font-weight:500;
}
.chip:hover{background:#EDEDED}
.chip .chip-x{color:var(--gris); font-size:14px; line-height:1}
.btn-limpiar-filtros{
  background:none; border:none; cursor:pointer; color:var(--gris); font-family:inherit;
  font-size:12.5px; font-weight:600; padding:5px 4px; text-decoration:underline;
}
.btn-limpiar-filtros:hover{color:var(--texto)}

/* Menu de tres puntos (mas acciones) */
.menu-mas{position:relative; display:inline-block}
.menu-mas-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0; border-radius:8px;
  border:1px solid var(--linea); background:#fff; color:var(--gris); cursor:pointer; font-size:16px;
}
.menu-mas-btn:hover{background:var(--gris-cl); color:var(--texto)}
.menu-mas-lista{
  display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:30;
  background:#fff; border:1px solid var(--linea); border-radius:10px;
  box-shadow:0 8px 24px rgba(15,23,42,.12); padding:6px; min-width:170px; text-align:left;
}
.menu-mas-lista.open{display:block}
.menu-mas-lista a, .menu-mas-lista button{
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:8px 10px; border-radius:6px; font-family:inherit; font-size:13.5px; color:var(--texto);
  text-decoration:none;
}
.menu-mas-lista a:hover, .menu-mas-lista button:hover{background:var(--gris-cl)}
.menu-mas-lista button.danger{color:var(--rojo)}

/* Submenu de 2do nivel (cascada, ej. Reportes: categoria -> reportes) --
   fila con flecha a la derecha que abre un panel al costado (flyout). */
.menu-cascada-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:8px 10px; border-radius:6px; font-family:inherit; font-size:13.5px; color:var(--texto);
}
.menu-cascada-item:hover{background:var(--gris-cl)}
.menu-cascada-item.disabled{color:var(--gris); cursor:default; opacity:.6}
.menu-cascada-item.disabled:hover{background:none}
.menu-mas-lista.flyout-lateral{top:-6px; left:calc(100% + 6px); right:auto}
/* El .nav-grupo de una fila-categoria (ej. Ventas dentro de Reportes) hereda
   display:inline-block (pensado para la barra superior) -- adentro de un
   panel desplegable debe ocupar todo el ancho, una fila por categoria. */
.menu-mas-lista .nav-grupo{display:block; width:100%}

/* Buscador con filtro en vivo (Insertar kit / Agregar desde catalogo en el
   formulario de cotizacion) — reemplaza el <select> nativo, que con miles
   de items de catalogo no se puede filtrar escribiendo. */
.combo-buscador{position:relative; display:inline-block}
.combo-lista{
  display:none; position:absolute; top:calc(100% + 6px); right:0; left:auto; z-index:30;
  background:#fff; border:1px solid var(--linea); border-radius:10px;
  box-shadow:0 8px 24px rgba(15,23,42,.12); padding:4px; min-width:360px;
  max-width:calc(100vw - 24px); max-height:320px; overflow-y:auto; text-align:left;
}
.combo-lista.open{display:block}
.combo-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px; border-radius:6px; cursor:pointer; font-size:13.5px; color:var(--texto);
}
.combo-item:hover{background:var(--gris-cl)}
.combo-item-desc{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.combo-item-meta{display:flex; align-items:center; gap:8px; flex-shrink:0; font-size:12px; color:var(--gris); white-space:nowrap}
.combo-item-col{flex-direction:column; align-items:stretch; gap:2px}
.combo-item-sub{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--gris)}
.combo-vacio{padding:10px; text-align:center; color:var(--gris); font-size:13px}

/* Campo en alerta (ej. cantidad que supera el stock disponible) */
input.input-alerta{
  border-color:#dc2626 !important; background:#fff5f5;
  color:#b91c1c; font-weight:600;
  box-shadow:0 0 0 2px rgba(220,38,38,.15);
}

/* Stock critico: mantener el tono rojo — hover y badges (codigo/categoria) */
.stock-critico table.data tr:hover td{background:#fde3e3}
.stock-critico .badge{background:#fde3e3; color:#b91c1c}
.menu-mas-lista button.danger:hover{background:#FEE2E2}

/* Formularios */
.form-row{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:14px}
.field{display:flex; flex-direction:column; gap:5px; flex:1; min-width:180px}
.field label{font-size:12.5px; color:var(--gris); font-weight:600}
input,select,textarea{
  font-family:inherit; font-size:14px; padding:9px 11px; border:1px solid #CBD5E1;
  border-radius:8px; background:#fff; color:var(--texto); width:100%;
}
/* Con el mismo padding, un <select> igual renderiza ~2px mas alto que un
   <input> (diferencia nativa del navegador al dibujar la flecha del
   desplegable, no de este CSS) -- se fuerza el mismo alto explicito para
   que ambos calcen en cualquier fila con input+select uno al lado del
   otro. Los checkbox/radio/color quedan afuera porque son controles chicos
   de tamaño fijo, no campos de texto -- se excluyen con :where() (0
   especificidad) para que esta regla siga siendo tan "debil" como un
   simple "input,select" y no le gane por especificidad a .items-table
   input/select (que necesitan su propio alto, mas chico). */
input:not(:where([type=checkbox],[type=radio],[type=color])),select{height:39px}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(11,79,140,.12);
}
textarea{resize:vertical; min-height:60px}
.hint{font-size:12px; color:var(--gris)}
.input-buscador{width:240px; height:34px; box-sizing:border-box}

/* Items de cotizacion */
.items-table{width:100%; border-collapse:collapse; margin-top:8px}
.items-table th{
  font-size:12px; text-transform:uppercase; color:var(--gris); text-align:left;
  padding:8px; border-bottom:2px solid var(--linea);
}
.items-table td{padding:6px 8px; border-bottom:1px solid var(--gris-cl); vertical-align:top}
.items-table input,.items-table select{padding:7px 9px; height:35px}
.items-table .col-cant input,.items-table .col-precio input{text-align:right}
.line-total{font-weight:600; text-align:right; white-space:nowrap; padding-top:14px}

.totales{
  margin-top:16px; margin-left:auto; width:320px; max-width:100%;
}
.totales .row{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--linea)}
.totales .row.total{
  border:none; margin-top:6px; background:var(--azul); color:var(--sobre-azul);
  padding:12px 14px; border-radius:10px; font-size:18px; font-weight:700;
}

#toastContainer{
  position:fixed; top:20px; right:20px; z-index:200;
  display:flex; flex-direction:column; gap:10px;
  width:360px; max-width:calc(100vw - 40px);
}
.toast{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 16px; border-radius:10px; font-weight:500; font-size:14px;
  background:#fff; color:var(--texto); border:1px solid var(--linea);
  box-shadow:0 10px 30px rgba(0,0,0,.15); opacity:1; transform:translateY(0);
  transition:opacity .3s, transform .3s;
  animation:toast-in .25s ease-out;
  min-width:0; overflow-wrap:anywhere; word-break:break-word;
}
.toast::before{content:""; width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px}
.toast-ok::before{background:var(--ok)}
.toast-warn::before{background:var(--amber)}
@keyframes toast-in{
  from{opacity:0; transform:translateY(-10px)}
  to{opacity:1; transform:translateY(0)}
}

.historial-toasts{max-height:360px; overflow-y:auto}
.historial-toast-item{
  display:flex; align-items:flex-start; gap:8px;
  padding:8px 10px; border-radius:6px; font-size:13px;
  overflow-wrap:anywhere; word-break:break-word;
}
.historial-toast-item:not(:last-child){border-bottom:1px solid var(--linea)}
.historial-toast-item::before{content:""; width:7px; height:7px; margin-top:5px; border-radius:50%; flex-shrink:0}
.historial-toast-item.toast-ok::before{background:var(--ok)}
.historial-toast-item.toast-warn::before{background:var(--amber)}
.historial-toast-item .historial-toast-texto{flex:1; min-width:0}
.historial-toast-item .historial-toast-hora{display:block; color:var(--gris); font-size:11px; margin-top:2px}
.historial-vacio{padding:16px 10px; text-align:center; color:var(--gris); font-size:13px}

.banner{
  display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:10px;
  font-size:13.5px; margin-bottom:20px;
}
.banner-warn{background:#FEF3C7; color:#92400E; border:1px solid #FDE68A}
.banner code{background:rgba(0,0,0,.06); padding:2px 6px; border-radius:5px; font-size:12.5px}

.footer{text-align:center; color:var(--gris); font-size:12.5px; padding:24px}
.inline{display:inline}
.right{text-align:right}
.actions{display:flex; gap:6px; justify-content:flex-end; align-items:center}
/* En una <td>, display:flex saca a la celda del layout de tabla y deja de
   estirarse a la altura de la fila (la linea de fondo queda mas arriba que
   las demas columnas). Como td ya es celda de tabla, basta alinear el texto
   a la derecha en vez de usar flex. */
td.actions{display:table-cell; text-align:right; white-space:nowrap; width:1%}
td.actions > * + *{margin-left:6px}
.section-title{font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:var(--gris); font-weight:700; margin:22px 0 10px}
.empty{text-align:center; color:var(--gris); padding:40px 20px}

.paginacion{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; padding:8px 0 14px;
}
.paginacion-nav{display:flex; align-items:center; justify-content:space-between; gap:4px; width:280px; flex-shrink:0}
.paginacion-numeros{display:flex; align-items:center; justify-content:center; gap:4px; flex:1; min-width:0}
.paginacion-pagina, .paginacion-flecha{
  display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px;
  border:1px solid transparent; border-radius:7px; font-weight:500; font-size:13px; padding:0 6px;
  color:var(--texto);
}
.paginacion-pagina:hover, .paginacion-flecha:hover{background:var(--gris-cl)}
.paginacion-pagina.activa{background:var(--texto); color:#fff; font-weight:600}
.paginacion-flecha.deshabilitada{color:var(--linea); cursor:default}
.paginacion-flecha.deshabilitada:hover{background:none}
.paginacion-elipsis{
  display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:30px;
  color:var(--gris); font-size:13px;
}
.paginacion-tamano{width:auto; padding:6px 9px; font-size:13px}

/* Titulo con icono + subtitulo "Pagina X de Y" */
.titulo-icono{display:flex; align-items:center; gap:12px}
.icono-caja{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:36px; height:36px; border-radius:10px; background:var(--gris-cl); color:var(--gris);
}
.titulo-texto h1{margin:0; line-height:1.25}
.subtitulo-pagina{color:var(--gris); font-size:13px; margin:2px 0 0}

/* Boton icono-solo (usado para eliminar en tablas) */
.btn-borrar{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border-radius:8px;
  border:1px solid var(--linea); background:#fff; color:var(--rojo); cursor:pointer;
}
.btn-borrar:hover{background:#FEE2E2; border-color:#FECACA}

/* Configuracion: grilla de tarjetas colapsables */
.config-header{margin-bottom:18px}

.config-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start}
@media (max-width:720px){ .config-grid{grid-template-columns:1fr} }

.config-tile{
  grid-column:span 1; background:#fff; border:1px solid var(--linea); border-radius:14px;
  overflow:hidden;
}
.config-tile.expanded{grid-column:1 / -1}

.config-tile-header{
  display:flex; align-items:flex-start; gap:14px; padding:18px;
  cursor:pointer; background:none; border:none; width:100%; text-align:left;
  font:inherit; color:inherit;
}
.config-tile-header:hover{background:var(--gris-cl)}
.config-tile-icon{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:38px; height:38px; border-radius:10px; background:var(--gris-cl); color:var(--gris);
}
.config-tile-texto{flex:1; min-width:0}
.config-tile-texto .titulo{display:block; font-weight:600; font-size:14.5px; margin-bottom:3px}
.config-tile-texto .desc{display:block; color:var(--gris); font-size:12.5px; line-height:1.45}
.config-tile-chevron{flex-shrink:0; color:var(--gris); margin-top:3px}

.config-tile-body{padding:0 18px 18px; border-top:1px solid var(--linea); padding-top:16px}

/* Switch on/off (Sí=verde a la derecha, No=gris a la izquierda) -- usado en
   Configuracion para vincular/desvincular Inventario de otros modulos. */
.switch-fila{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.switch-fila + .switch-fila{border-top:1px solid var(--linea)}
.switch-fila .titulo{display:block; font-weight:600; font-size:14px; margin-bottom:2px}
.switch-fila .desc{display:block; color:var(--gris); font-size:12.5px; line-height:1.4}
.switch{position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0}
.switch input{opacity:0; width:0; height:0}
.switch .switch-slider{position:absolute; inset:0; background:var(--gris-cl); border:1px solid var(--linea); cursor:pointer; transition:.15s; border-radius:24px}
.switch .switch-slider:before{content:""; position:absolute; height:16px; width:16px; left:3px; top:3px; background:#fff; transition:.15s; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.25)}
.switch input:checked + .switch-slider{background:var(--ok); border-color:var(--ok)}
.switch input:checked + .switch-slider:before{transform:translateX(18px)}

.modal-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-box{
  background:#fff; border-radius:14px; padding:24px 26px; width:100%; max-width:560px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}