/*
  Sistema de diseño MEGAPOSVT ERP — extraído del informe visual aprobado
  ("Informe de avance técnico y propuesta funcional", MEGATEC, 13/08/2026,
  presentado a Corporación HJ, S.A.). Un solo archivo de estilos para que
  toda pantalla nueva (venta, y luego productos/clientes/dashboard) se vea
  como parte del mismo producto, no como piezas sueltas.

  Paleta:
    --navy-900 : barra superior / encabezados de ventana (fondo oscuro)
    --navy-700 : encabezados de sección dentro de una ventana
    --blue-600 : acciones primarias, enlaces, foco
    --blue-100 : fondo de tarjetas/paneles claros
    --gray-50  : fondo general de la página
    --green/red/orange-600 : estados (confirmado / anulado / alerta)
*/

:root {
  --navy-900: #0f2f56;
  --navy-800: #143b6b;
  --navy-700: #1a4a82;
  --blue-600: #2f7fc1;
  --blue-500: #3f92d6;
  --blue-100: #eaf2fa;
  --gray-50: #f4f6f9;
  --gray-100: #eceff3;
  --gray-200: #dde3ea;
  --gray-400: #97a3b0;
  --text-900: #1c2b3a;
  --text-500: #5c6b7a;
  --green-600: #2f9e5c;
  --green-100: #e5f6ec;
  --red-600: #d9534f;
  --red-100: #fbe9e8;
  --orange-600: #d98a2b;
  --orange-100: #fbf0e1;
  --white: #ffffff;
  --radius: 8px;
  --sombra: 0 1px 3px rgba(15, 47, 86, 0.08), 0 1px 2px rgba(15, 47, 86, 0.06);
}

* { box-sizing: border-box; }

body.megaposvt {
  margin: 0;
  background: var(--gray-50);
  color: var(--text-900);
  font-family: "Segoe UI", -apple-system, Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

/* ---------- Barra superior de marca ---------- */
.topbar {
  background: var(--navy-900);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 22px;
  box-shadow: var(--sombra);
}
.topbar .marca { display: flex; align-items: center; gap: 10px; }
.topbar .marca .icono {
  width: 30px; height: 30px; border-radius: 6px; background: var(--blue-600);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}
.topbar .marca .nombres { line-height: 1.15; }
.topbar .marca .nombre { font-weight: 700; font-size: 15px; }
.topbar .marca .lema { font-size: 10.5px; letter-spacing: .04em; color: #a9c2de; text-transform: uppercase; }
.topbar .der { display: flex; align-items: center; gap: 18px; font-size: 13px; color: #cfe0f2; }
.topbar .der a { color: #cfe0f2; text-decoration: none; }
.topbar .der a:hover { color: #fff; text-decoration: underline; }

.franja {
  max-width: 1180px; margin: 22px auto; padding: 0 20px 40px;
}

/* ---------- "Ventana" (bloque principal de una pantalla) ---------- */
.ventana {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.ventana-header {
  background: var(--navy-800); color: var(--white);
  padding: 12px 18px; font-weight: 700; font-size: 14.5px;
  letter-spacing: .02em; display: flex; align-items: center; gap: 9px;
}
.ventana-header .subt { font-weight: 400; font-size: 12.5px; color: #b9cfe6; margin-left: 6px; }
.ventana-body { padding: 18px; }

/* ---------- Paneles de sección dentro de una ventana ---------- */
.panel { border: 1px solid var(--gray-200); border-radius: var(--radius); margin-bottom: 16px; overflow: hidden; }
.panel-header {
  background: var(--navy-700); color: var(--white); font-weight: 700; font-size: 12.5px;
  letter-spacing: .03em; text-transform: uppercase; padding: 8px 14px;
}
.panel-body { padding: 14px; background: var(--white); }

/* ---------- Formularios ---------- */
.fila { display: flex; flex-wrap: wrap; gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 170px; flex: 1; }
.campo label { font-size: 11.5px; color: var(--text-500); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
select, input[type=text], input[type=number], input[type=password] {
  background: var(--white); color: var(--text-900); border: 1px solid var(--gray-200); border-radius: 5px;
  padding: 8px 9px; font-size: 14px; font-family: inherit;
}
select:focus, input:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(63,146,214,.18); }

/* ---------- Tablas ---------- */
.tabla-scroll { overflow-x: auto; }
table.datos { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.datos td select, table.datos td input { width: 100%; max-width: 100%; }
table.datos thead th {
  background: var(--navy-800); color: #fff; text-align: left; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .02em; padding: 8px 10px; font-weight: 600;
}
table.datos tbody td { padding: 7px 10px; border-bottom: 1px solid var(--gray-100); font-size: 13.5px; }
table.datos tbody tr:nth-child(even) { background: var(--gray-50); }
table.datos tbody tr:hover { background: var(--blue-100); }

/* ---------- Tarjetas de totales (estilo del mockup de Movimientos/Kardex) ---------- */
.tarjetas-total { display: flex; flex-direction: column; gap: 10px; min-width: 200px; }
.tarjeta-total {
  background: var(--blue-100); border: 1px solid #cfe1f2; border-radius: var(--radius);
  padding: 10px 14px;
}
.tarjeta-total .etiqueta { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--navy-700); font-weight: 700; }
.tarjeta-total .valor { font-size: 20px; font-weight: 700; color: var(--navy-900); margin-top: 2px; }
.tarjeta-total.total { background: var(--navy-900); border-color: var(--navy-900); }
.tarjeta-total.total .etiqueta { color: #a9c2de; }
.tarjeta-total.total .valor { color: #fff; font-size: 24px; }

/* Variante horizontal y compacta: franja de totales bajo una tabla (captura
   de venta), en vez de tarjetas grandes apiladas — mismo criterio que la
   pantalla de WinDev que ya conoce Edmundo (GRABADAS/SUB-TOTAL/TOTAL COMPRA
   en una sola franja debajo del detalle de la factura). */
.tarjetas-total-fila { display: flex; gap: 8px; margin-top: 10px; }
.tarjetas-total-fila .tarjeta-total { flex: 1; padding: 6px 10px; }
.tarjetas-total-fila .tarjeta-total .etiqueta { font-size: 10px; }
.tarjetas-total-fila .tarjeta-total .valor { font-size: 15px; margin-top: 0; }
.tarjetas-total-fila .tarjeta-total.total .valor { font-size: 17px; }

/* ---------- Etiquetas de estado (badges) ---------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.badge.verde { background: var(--green-100); color: var(--green-600); }
.badge.rojo { background: var(--red-100); color: var(--red-600); }
.badge.naranja { background: var(--orange-100); color: var(--orange-600); }
.badge.gris { background: var(--gray-100); color: var(--text-500); }
.badge.azul { background: var(--blue-100); color: var(--blue-600); }

/* ---------- Barra de acciones (botones con icono, como en el mockup) ---------- */
.barra-acciones {
  display: flex; align-items: center; justify-content: center; gap: 26px;
  border-top: 1px solid var(--gray-200); padding: 14px 18px; background: var(--gray-50);
}
.btn-accion {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; color: var(--text-500); font-size: 11.5px; font-weight: 600;
  cursor: pointer; padding: 4px 8px; text-decoration: none;
}
.btn-accion svg { width: 20px; height: 20px; stroke: var(--text-500); }
.btn-accion:hover { color: var(--blue-600); }
.btn-accion:hover svg { stroke: var(--blue-600); }
.btn-accion.primario { color: var(--blue-600); }
.btn-accion.primario svg { stroke: var(--blue-600); }

.btn { background: var(--blue-600); color: #fff; border: none; border-radius: 6px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.btn:hover { background: var(--blue-500); }
.btn.secundario { background: var(--white); color: var(--text-900); border: 1px solid var(--gray-200); }
.btn.secundario:hover { background: var(--gray-50); }
.btn.chico { padding: 5px 10px; font-size: 12px; }
.btn.peligro { background: var(--red-600); }
.btn.peligro:hover { background: #c24743; }

.errores { background: var(--red-100); border: 1px solid #f0c4c2; color: #9c2b27; border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; font-size: 13.5px; }
.errores ul { margin: 6px 0 0; padding-left: 18px; }

.acciones-panel { display: flex; justify-content: flex-end; padding: 10px 14px; }

.enlace-volver { color: var(--blue-600); text-decoration: none; font-size: 13px; font-weight: 600; }
.enlace-volver:hover { text-decoration: underline; }

/* ---------- Fase B (02/09/2026): búsqueda rápida de producto ---------- */
.resultados-busqueda {
  margin-top: 8px; max-height: 220px; overflow-y: auto;
  border: 1px solid var(--gray-200); border-radius: 6px;
}
.resultados-busqueda:empty { display: none; }
.resultado-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 12px; font-size: 13.5px; cursor: pointer; border-bottom: 1px solid var(--gray-100);
}
.resultado-item:last-child { border-bottom: none; }
.resultado-item:hover { background: var(--blue-100); }
.resultado-item .desc { font-weight: 600; color: var(--text-900); }
.resultado-item .meta { font-size: 11.5px; color: var(--text-500); white-space: nowrap; }

/* ---------- Fase B: par de mini-controles apilados dentro de una celda ---------- */
.celda-doble { display: flex; flex-direction: column; gap: 4px; }
.celda-doble select { padding: 5px 6px; font-size: 12px; }

.out-existencia { font-weight: 600; }
.out-existencia.baja { color: var(--red-600); }
.link-kardex { display: block; margin-top: 3px; font-size: 11px; color: var(--blue-600); text-decoration: none; }
.link-kardex:hover { text-decoration: underline; }

.nota-panel { font-size: 12px; color: var(--text-500); margin: 8px 0 0; }
.aviso { background: var(--orange-100); color: #8a5a17; border: 1px solid #eedabd; border-radius: 6px; padding: 8px 12px; font-size: 12.5px; margin-bottom: 10px; }
.in-precio-abierto { max-width: 110px; }

/* ---------- Fase B v2 (02/09/2026 PM): panel de productos estilo WinDev
   (lista siempre visible + panel de detalle/configuración fijo, en vez de
   un combo por fila) ---------- */

/* Fila clicable de la lista permanente "Productos disponibles" */
tr.fila-producto-disponible { cursor: pointer; }
tr.fila-producto-disponible:hover { background: var(--blue-100); }
tr.fila-producto-disponible.seleccionada { background: var(--blue-100); box-shadow: inset 3px 0 0 var(--blue-600); }

/* Encabezado del panel de detalle: nombre del producto elegido */
.detalle-titulo { font-size: 15px; font-weight: 700; color: var(--navy-900); margin-bottom: 6px; line-height: 1.25; }

/* Línea de existencia + enlace a Kardex, justo bajo el título */
.detalle-existencia { font-size: 12.5px; color: var(--text-500); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detalle-existencia strong { color: var(--text-900); }

/* Chips de radio para elegir Unidad / Empaque */
.opciones-radio { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-chip {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--gray-200); border-radius: 100px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-900);
  cursor: pointer; background: var(--white);
}
.radio-chip:has(input:checked) { border-color: var(--blue-600); background: var(--blue-100); color: var(--navy-900); }
.radio-chip input { margin: 0; accent-color: var(--blue-600); }

/* Tarjetas de nivel de precio (Lista / A / B / C / Abierto) visibles a la
   vez, con el valor ya calculado — no escondidas detrás de un selector */
.opciones-precio { display: flex; flex-direction: column; gap: 6px; }
.opcion-precio {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--gray-200); border-radius: 6px;
  padding: 7px 11px; font-size: 13px; font-weight: 600; color: var(--text-900);
  cursor: pointer; background: var(--white);
}
.opcion-precio:hover { border-color: var(--blue-500); }
.opcion-precio .valor { font-weight: 700; color: var(--navy-700); }
.opcion-precio.activa { border-color: var(--blue-600); background: var(--blue-100); }
.opcion-precio.activa .valor { color: var(--navy-900); }

/* Resumen en vivo (precio unitario / descuento / subtotal) antes de agregar */
.detalle-resumen {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 6px;
  padding: 10px 12px; margin-top: 14px; font-size: 13px;
}
.detalle-resumen div { display: flex; justify-content: space-between; gap: 10px; }
.detalle-resumen strong { color: var(--navy-900); font-weight: 700; }

/* ---------- Fase 1 (02/09/2026): login y menú principal ---------- */

.login-envoltorio { display: flex; justify-content: center; padding-top: 40px; }
.login-ventana { width: 100%; max-width: 380px; }

.grid-menu {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;
}
.tile-menu {
  display: block; border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 16px 18px; background: var(--white); text-decoration: none; color: inherit;
  transition: border-color .1s, box-shadow .1s;
}
.tile-menu:hover { border-color: var(--blue-500); box-shadow: var(--sombra); }
.tile-menu-nombre {
  font-weight: 700; font-size: 15px; color: var(--navy-900);
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.tile-menu-desc { font-size: 12.5px; color: var(--text-500); }
.tile-menu.deshabilitado { cursor: default; background: var(--gray-50); }
.tile-menu.deshabilitado:hover { border-color: var(--gray-200); box-shadow: none; }
.tile-menu.deshabilitado .tile-menu-nombre { color: var(--text-500); }

/* ---------- Fase 1 v2 (02/09/2026): panel principal completo, sobre el
   mockup "4.1 Propuesta visual - Panel principal del ERP" — barra
   lateral + barra superior + panel general/accesos/resumen/alertas.
   Los módulos sin pantalla propia se ven (no se ocultan) pero quedan
   deshabilitados, a propósito (decisión de Edmundo, 02/09/2026). ---------- */

.panel-shell { display: flex; min-height: 100vh; align-items: stretch; }

/* Corregido 04/09/2026 tras verificar contra el mockup a nivel de píxel
   (color exacto muestreado de la imagen real): la barra lateral NO es
   azul marino sólido — es clara/blanca, con íconos y texto azul marino,
   y el módulo activo se marca con una "píldora" celeste, no un borde. */
.panel-sidebar {
  width: 216px; flex-shrink: 0; background: var(--white); color: var(--navy-900);
  display: flex; flex-direction: column; padding: 16px 10px; border-right: 1px solid var(--gray-200);
}
.sidebar-marca { display: flex; align-items: center; gap: 10px; padding: 0 6px 18px; }
.sidebar-marca .icono {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sidebar-marca .icono svg { width: 30px; height: 30px; }
.sidebar-marca .nombres { line-height: 1.15; }
.sidebar-marca .nombre { font-weight: 700; font-size: 13.5px; color: var(--navy-900); }
.sidebar-marca .lema { font-size: 9.5px; letter-spacing: .03em; color: var(--text-500); text-transform: uppercase; }

.sidebar-nav { display: flex; flex-direction: column; gap: 3px; }
.sidebar-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-size: 14.5px; font-weight: 600;
  color: var(--navy-900); text-decoration: none; border-radius: 8px; cursor: pointer;
}
.sidebar-item svg { width: 21px; height: 21px; flex-shrink: 0; }
.sidebar-item:hover { background: var(--gray-50); }
.sidebar-item.activo { background: var(--blue-100); color: var(--navy-700); }
.sidebar-item.deshabilitado { cursor: default; color: var(--gray-400); }
.sidebar-item.deshabilitado:hover { background: none; }
.sidebar-item .chico-badge { margin-left: auto; font-size: 8.5px; padding: 1px 6px; background: var(--gray-100); color: var(--text-500); }

/* Categorías desplegables (04/09/2026): Inventario/Configuración muestran
   sus pantallas ahí mismo en la barra lateral, en vez de mandar a una
   pantalla intermedia — mismo criterio se aplicará a las demás categorías
   cuando tengan su primer catálogo real. */
.sidebar-categoria summary { list-style: none; }
.sidebar-categoria summary::-webkit-details-marker { display: none; }
.sidebar-categoria summary::marker { content: ""; }
.categoria-resumen { justify-content: flex-start; }
.chevron-categoria { display: flex; margin-left: auto; transition: transform .15s; color: var(--gray-400); }
.chevron-categoria svg { width: 14px; height: 14px; }
.sidebar-categoria[open] .chevron-categoria { transform: rotate(180deg); }

.sidebar-subnav { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 6px; }
.sidebar-subitem {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px 8px 46px; font-size: 13px; font-weight: 500;
  color: var(--text-500); text-decoration: none; border-radius: 8px;
}
.sidebar-subitem:hover { background: var(--gray-50); color: var(--navy-900); }
.sidebar-subitem.activo { background: var(--blue-100); color: var(--navy-700); font-weight: 700; }
.sidebar-subitem.deshabilitado { cursor: default; color: var(--gray-400); }
.sidebar-subitem.deshabilitado:hover { background: none; color: var(--gray-400); }
.sidebar-subitem .chico-badge { margin-left: auto; }

.panel-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--gray-50); }

.panel-topbar {
  background: var(--white); border-bottom: 1px solid var(--gray-200);
  display: flex; align-items: center; justify-content: space-between; padding: 10px 22px; gap: 14px; flex-wrap: wrap;
}
.topbar-selectores { display: flex; gap: 14px; }
.selector-etiquetado { display: flex; align-items: center; gap: 6px; }
.selector-etiquetado label { font-size: 12px; font-weight: 600; color: var(--text-500); white-space: nowrap; }
.sel-topbar { padding: 6px 8px; font-size: 12.5px; max-width: 200px; }
.sel-topbar:disabled { background: var(--gray-50); color: var(--text-500); cursor: default; }
.topbar-der { display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: var(--text-500); }
.topbar-usuario { display: flex; align-items: center; gap: 4px; font-weight: 600; color: var(--text-900); }
.topbar-usuario svg { width: 14px; height: 14px; }
.topbar-fecha-hora { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.topbar-fecha-hora .con-icono { display: inline-flex; align-items: center; gap: 5px; }
.topbar-fecha-hora svg { width: 14px; height: 14px; }
.topbar-icono { display: flex; color: var(--text-500); text-decoration: none; cursor: pointer; }
.topbar-icono svg { width: 18px; height: 18px; }
.topbar-icono:hover { color: var(--blue-600); }

.panel-contenido { padding: 20px 22px; flex: 1; }

.panel-footer {
  display: flex; gap: 22px; padding: 8px 22px; border-top: 1px solid var(--gray-200);
  background: var(--white); font-size: 11.5px; color: var(--text-500);
}
.footer-item { display: flex; align-items: center; gap: 6px; }
.punto-verde { width: 8px; height: 8px; border-radius: 50%; background: var(--green-600); display: inline-block; }

/* Panel general: tarjetas de cifras */
.fila-tarjetas-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.tarjeta-stat { display: flex; align-items: center; gap: 12px; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 14px; }
.tarjeta-stat-icono { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tarjeta-stat-icono svg { width: 20px; height: 20px; }
.tarjeta-stat-icono.icono-ventas { background: var(--orange-100); color: var(--orange-600); }
.tarjeta-stat-icono.icono-cxc { background: var(--green-100); color: var(--green-600); }
.tarjeta-stat-icono.icono-inventario { background: var(--blue-100); color: var(--blue-600); }
.tarjeta-stat-icono.icono-pedidos { background: var(--red-100); color: var(--red-600); }
.tarjeta-stat-etiqueta { font-size: 11.5px; color: var(--text-500); font-weight: 600; }
.tarjeta-stat-valor { font-size: 17px; font-weight: 700; color: var(--navy-900); }

/* Accesos rápidos */
.grid-accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.acceso-rapido {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 14px 8px; background: var(--white);
}
.acceso-rapido-icono {
  width: 46px; height: 46px; border-radius: 14px; background: var(--blue-100); color: var(--blue-600);
  display: flex; align-items: center; justify-content: center;
}
.acceso-rapido-icono svg { width: 19px; height: 19px; }
.acceso-rapido-nombre { font-size: 11.5px; font-weight: 600; color: var(--text-900); }
.acceso-rapido.deshabilitado { cursor: default; background: var(--gray-50); }
.acceso-rapido.deshabilitado .acceso-rapido-icono { background: var(--gray-100); color: var(--text-500); }
.acceso-rapido.deshabilitado .acceso-rapido-nombre { color: var(--text-500); }

/* Resumen operativo + Alertas */
.fila-dos-paneles { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
.fila-dos-paneles .panel { margin-bottom: 0; }
.grafica-vacia { border: 1px dashed var(--gray-200); border-radius: 6px; padding: 22px 14px; text-align: center; margin-bottom: 10px; }
.grafica-vacia:last-child { margin-bottom: 0; }
.grafica-vacia-titulo { font-size: 12px; font-weight: 700; color: var(--text-900); margin-bottom: 4px; }
.grafica-vacia-nota { font-size: 11.5px; color: var(--text-500); }

.grid-alertas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 10px; }
.alerta-tile { border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 12px; text-align: center; }
.alerta-tile-icono {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.alerta-tile-icono svg { width: 20px; height: 20px; }
.alerta-tile-icono.icono-stock_bajo, .alerta-tile-icono.icono-cuentas_vencidas { background: var(--red-100); color: var(--red-600); }
.alerta-tile-icono.icono-facturas_enviar { background: var(--orange-100); color: var(--orange-600); }
.alerta-tile-icono.icono-pedidos_procesar { background: var(--blue-100); color: var(--blue-600); }
.alerta-tile-valor { font-size: 18px; font-weight: 700; color: var(--navy-900); }
.alerta-tile-etiqueta { font-size: 11px; color: var(--text-500); }
.nota-panel-link { font-size: 12px; color: var(--blue-600); text-decoration: none; }
.nota-panel-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .fila-dos-paneles { grid-template-columns: 1fr; }
}

/* ---------- Lista + formulario lado a lado (pantallas con catálogos largos: Productos, etc.) ---------- */
.lista-con-formulario { display: grid; grid-template-columns: minmax(300px, 1fr) 1.5fr; gap: 16px; align-items: start; margin-bottom: 16px; }
.lista-con-formulario > .panel { margin-bottom: 0; }
.panel-lista-fija .panel-body { padding: 10px 10px 4px; }
.panel-lista-fija .tabla-scroll { max-height: 68vh; overflow-y: auto; }
.panel-lista-fija table.datos thead th { position: sticky; top: 0; z-index: 2; }
.panel-formulario-lateral { max-height: 82vh; overflow-y: auto; }
@media (max-width: 1100px) {
  .lista-con-formulario { grid-template-columns: 1fr; }
  .panel-lista-fija .tabla-scroll { max-height: 40vh; }
  .panel-formulario-lateral { max-height: none; overflow-y: visible; }
}

/* ---------- Captura de venta v2 (11/09/2026 PM) ----------
   El primer intento (columna angosta fija a la izquierda, con
   max-height + overflow-y:auto) tenía un bug real que Edmundo detectó
   probándolo: el <select> de Cliente y las tarjetas de Impuesto/Total
   desaparecían sin más. Causa: por la especificación de Flexbox, un
   ítem flex cuyo overflow NO es "visible" (nuestro .panel usa
   overflow:hidden, para las esquinas redondeadas) tiene un tamaño
   mínimo automático de CERO en el eje del contenedor — así que un
   contenedor flex en columna con alto máximo definido (esa
   .venta-lateral) podía encoger cada .panel por debajo de su contenido
   real para "caber" en vez de mostrar scroll, y el propio overflow:hidden
   del panel recortaba en silencio lo que ya no cabía (el final de cada
   panel, que es justo lo que desapareció). Lección para el resto del
   sistema: nunca combinar max-height + overflow-y:auto en un contenedor
   flex cuyos hijos directos sean .panel — el scroll acotado va siempre
   un nivel más adentro (una tabla, un .tabla-scroll), nunca en el panel
   completo.

   Layout más compacto pedido por Edmundo en la misma vuelta:
   - Franja superior: Datos de la venta + Datos fiscales uno al lado del
     otro, con los campos angostos (Empresa/Bodega/Ruta/Tipo/Condición
     ya no se estiran) para que quepa también el de Cliente.
   - Buscar producto, campos igual de angostos (antes Código/descripción
     se estiraba demasiado).
   - Área de trabajo en 3 columnas: Factura — líneas agregadas a la
     izquierda (para verla crecer sin tener que ir a buscarla abajo),
     Productos disponibles al centro (más chica que antes), y Configurar
     línea + Totales + Pagos apilados a la derecha, compactos, al final
     — sin necesitar casi scroll de página. ---------- */

.venta-cabecera { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.venta-cabecera > .panel { margin-bottom: 0; flex: 1 1 380px; }
.venta-cabecera .campo { flex: 0 1 140px; min-width: 0; }
.venta-cabecera .campo-ancho { flex: 1 1 200px; }
.venta-cabecera .campo-chico { flex: 0 1 90px; }

.venta-buscar .campo { flex: 0 1 160px; min-width: 0; }
.venta-buscar .campo-texto { flex: 0 1 340px; }
.venta-buscar .campo-barras { flex: 0 1 170px; }

/* Disposición de la pantalla de referencia (07/10/2026): factura a la izquierda con sus totales;
   a la derecha buscador, listado de productos, detalle de la línea y pago. Bloques normales (no flex)
   para no caer en la trampa de los .panel con overflow:hidden. */
.venta-pantalla { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.venta-izq > .panel, .venta-der > .panel, .venta-der > div > .panel { margin-bottom: 16px; }
.venta-izq .venta-cabecera { margin-bottom: 0; }
.venta-lineas-factura .tabla-scroll { max-height: 56vh; overflow-y: auto; }
.venta-productos-chica .tabla-scroll { max-height: 46vh; overflow-y: auto; }
.venta-lineas-factura table.datos thead th, .venta-productos-chica table.datos thead th { position: sticky; top: 0; z-index: 2; }
.venta-productos-chica table.datos tbody tr { cursor: pointer; }
.venta-productos-chica table.datos tbody tr:hover { background: var(--blue-100); }
.venta-productos-chica table.datos td small { color: var(--text-500); }
/* Caja de totales como en la pantalla de referencia (azul marino, cifras amarillas) */
.totales-ref { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; background: var(--navy-900); color: #fff; border-radius: 8px; padding: 12px 16px; margin-top: 12px; }
.totales-ref-col div { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 2px 0; }
.totales-ref-col span { text-transform: uppercase; letter-spacing: .03em; font-size: 11px; opacity: .9; }
.totales-ref-col strong { color: #ffd84d; font-variant-numeric: tabular-nums; }
.totales-ref-total { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 8px; margin-top: 4px; }
.totales-ref-total span { text-transform: uppercase; font-weight: 700; letter-spacing: .03em; }
.totales-ref-total strong { color: #ffd84d; font-size: 26px; font-variant-numeric: tabular-nums; }
/* Botones de cierre (Pago efectivo / Facturas al crédito) */
.cierre-botones { display: grid; gap: 10px; }
.btn-cierre { border: 2px solid var(--navy-900); border-radius: 8px; padding: 14px 10px; font-size: 15px; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: .03em; }
.btn-cierre.efectivo { background: var(--green-600); color: #fff; border-color: var(--green-600); }
.btn-cierre.credito { background: var(--blue-100); color: var(--navy-900); }
.btn-cierre:hover { filter: brightness(1.08); }
/* La columna de producto/descripción no tiene ancho fijo (se reparte el
   espacio que dejan las demás, que sí son angostas y fijas) — sin esto,
   un nombre de producto largo se partía en varias líneas y estiraba toda
   la fila apenas se redujo el ancho de estas dos tablas. Solo se aplica
   a esa primera columna: max-width:0 + overflow:hidden es el truco para
   truncar con "..." dentro de una tabla table-layout:fixed sin pisar el
   ancho ya fijado (con style="width:...") de las demás columnas. */
.venta-lineas-factura table.datos td:first-child,
.venta-productos-chica table.datos td:first-child { white-space: normal; overflow-wrap: anywhere; }
/* Nivel/Unidad ya tiene ancho fijo (style="width:..."), pero su texto
   ("Precio de lista / Unidad", etc.) es casi siempre más largo que esos
   72px — trunca igual, sin el truco de max-width:0 (no hace falta cuando
   el ancho ya viene fijado en el propio <th>). */
.venta-lineas-factura table.datos td:nth-child(2) { white-space: normal; font-size: 12px; }
.venta-der #detalle-cantidad { max-width: 110px; }
.venta-der .opciones-precio { gap: 5px; }
.venta-der .opcion-precio { padding: 6px 10px; font-size: 12.5px; }

/* Botón de eliminar compacto para filas de tabla densas (Pagos, líneas de
   factura) — el botón genérico .btn.chico trae 5px/10px de padding + borde,
   que con el ícono de 16px suma ~38px: más ancho que la columna de 24-30px
   que se le había dado, así que quedaba cortado/fuera de vista salvo
   scroll horizontal (bug real que reportó Edmundo: "el botón no se ve"). */
.btn-icono-quitar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; flex-shrink: 0;
  color: #d9534f; background: none; border: 1px solid #f0c4c2; border-radius: 4px;
  cursor: pointer;
}
.btn-icono-quitar:hover { background: var(--red-100); }
.btn-icono-quitar svg { width: 14px; height: 14px; }
/* La celda que lo contiene también necesita menos relleno que el resto de
   la tabla (7px/10px) para que el botón de 22px quepa sin desbordar. */
#tabla-pagos td:last-child, #tabla-lineas td:last-child { padding: 4px; text-align: center; }

@media (max-width: 1200px) {
  .venta-pantalla { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  }

/* ---------- Panel superpuesto "Cliente de la factura" (06/10/2026) ---------- */
.cliente-boton { width: 100%; text-align: left; background: var(--white); border: 1px solid var(--gray-200); border-radius: 6px; padding: 9px 12px; font-size: 13.5px; color: var(--text-900); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cliente-boton:hover, .cliente-boton:focus { border-color: var(--blue-600); outline: none; }
.modal-fondo { position: fixed; inset: 0; background: rgba(15, 47, 86, .45); z-index: 1000; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; overflow-y: auto; }
.modal-caja { background: var(--white); border-radius: 10px; width: 100%; max-width: 820px; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); overflow: hidden; }
.modal-chica { max-width: 380px; padding: 20px; }
.modal-confirmar { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 1010; align-items: center; justify-content: center; }
.modal-titulo { display: flex; justify-content: space-between; align-items: center; background: var(--navy-900); color: #fff; padding: 10px 16px; font-weight: 700; }
.modal-x { background: none; border: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.pestanas { display: flex; border-bottom: 1px solid var(--gray-200); background: var(--gray-50); }
.pestana { flex: 1; background: none; border: none; border-bottom: 3px solid transparent; padding: 11px 8px; font-size: 13.5px; font-weight: 600; color: var(--text-500); cursor: pointer; }
.pestana.activa { color: var(--blue-600); border-bottom-color: var(--blue-600); background: var(--white); }
.pc-tab { padding: 16px; }
.pc-columnas { display: flex; gap: 14px; margin-top: 10px; align-items: flex-start; }
.pc-lista { flex: 1 1 50%; max-height: 340px; overflow-y: auto; border: 1px solid var(--gray-200); border-radius: 6px; }
.pc-detalle { flex: 1 1 50%; min-height: 200px; border: 1px solid var(--gray-200); border-radius: 6px; padding: 12px 14px; background: var(--gray-50); }
.pc-detalle h4 { margin: 0 0 8px; color: var(--navy-800); }
.pc-item { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--gray-100); cursor: pointer; font-size: 13px; }
.pc-item:hover { background: var(--blue-100); }
.pc-item.sel { background: var(--blue-100); box-shadow: inset 3px 0 0 var(--blue-600); }
.pc-ruc { font-weight: 700; color: var(--navy-800); white-space: nowrap; }
.pc-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-datos { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; margin: 0 0 10px; font-size: 13px; }
.pc-datos dt { color: var(--text-500); } .pc-datos dd { margin: 0; word-break: break-word; }
.pc-acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.aviso-azul { background: var(--blue-100); border: 1px solid #c9dff2; border-radius: 6px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 12px; }
.btn.peligro { background: var(--red-600); }
.btn.secundario.peligro-borde { color: var(--red-600); border-color: var(--red-600); }
@media (max-width: 640px) { .pc-columnas { flex-direction: column; } .pc-lista, .pc-detalle { flex-basis: auto; width: 100%; } }
.pn-dv { display: flex; align-items: center; gap: 4px; }
.pn-dv input { width: 52px; text-align: center; }
.pn-lapiz { color: var(--blue-600); font-size: 18px; }
.pn-dv input:not([readonly]) { border-color: var(--orange-600); background: var(--orange-100); }

/* Ventanas del flujo de venta (07/10/2026): configurar línea, pago al contado, crédito */
.modal-media { max-width: 520px; }
.modal-cuerpo { padding: 16px; }
.modal-cuerpo .campo { margin-bottom: 12px; }
.pago-total { display: flex; justify-content: space-between; align-items: baseline; background: var(--navy-900); color: #fff; border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; }
.pago-total span { text-transform: uppercase; font-size: 12px; letter-spacing: .03em; }
.pago-total strong { color: #ffd84d; font-size: 28px; font-variant-numeric: tabular-nums; }
.pago-pregunta { font-weight: 700; color: var(--navy-800); margin: 14px 0 0; }
.enlace-limpiar { color: #fff; font-size: 11px; font-weight: 600; text-decoration: none; opacity: .85; }
.enlace-limpiar:hover { opacity: 1; text-decoration: underline; }
.btn-cierre.cancelar { background: #fff; color: var(--red-600); border: 2px solid var(--red-600); padding: 9px 10px; font-size: 13px; }
#modal-autorizar { z-index: 1020; }   /* puede abrirse encima del panel de cliente */
.pc-credito { margin: 10px 0 4px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Ficha de cliente unificada (ficha_cliente.js) */
.ficha-seccion { background: var(--blue-100); color: var(--navy-800); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; padding: 6px 10px; border-radius: 6px; margin: 14px 0 10px; }
.ficha-seccion:first-child { margin-top: 0; }
.ficha-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; margin-bottom: 10px; }
.ficha-grid .campo { min-width: 0; margin: 0; }
.ficha-grid .campo.ancho2 { grid-column: span 2; }
.ficha-grid .campo.ancho3 { grid-column: 1 / -1; }
.ficha-nota { font-size: 12.5px; color: var(--text-500); margin: 0 0 6px; }
.ficha-dv { display: flex; align-items: center; gap: 4px; }
.ficha-dv input { width: 56px; text-align: center; }
.ficha-lapiz { color: var(--blue-600); font-size: 18px; }
.ficha-dv input:not([readonly]) { border-color: var(--orange-600); background: var(--orange-100); }

/* Pantalla Clientes: la lista lleva más columnas (códigos, pago), así que se le da más ancho */
.lista-clientes { grid-template-columns: minmax(480px, 1.15fr) 1.1fr; }
.lista-clientes table.datos td, .lista-clientes table.datos th { padding: 7px 8px; font-size: 12.5px; }
.lista-clientes table.datos td:nth-child(1), .lista-clientes table.datos td:nth-child(2), .lista-clientes table.datos td:nth-child(4) { white-space: nowrap; }
@media (max-width: 1250px) { .lista-clientes { grid-template-columns: 1fr; } }

/* Proporciones parejas (07/10/2026): los campos de una misma fila se alinean por abajo aunque una etiqueta sea más larga */
.ficha-grid { align-items: end; }
.venta-buscar .fila { align-items: flex-end; }
.venta-buscar .campo-texto { flex: 0 1 380px; }
.venta-buscar .campo-barras { flex: 0 1 240px; }
.venta-buscar .fila { flex-wrap: nowrap; gap: 12px; }
.venta-buscar .campo-texto { flex: 3 1 0; }
.venta-buscar .campo-barras { flex: 2 1 0; }
.venta-buscar .campo { min-width: 0; }

/* ===== Ficha de cliente COMPACTA (07/10/2026): entra en pantalla sin desplazarse =====
   Cuadrícula plana: 4 columnas en espacios angostos y 6 cuando el contenedor mide 820 px o más. */
.ficha { container-type: inline-size; }
.ficha-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 8px 12px; align-items: end; margin: 0; }
.ficha-grid > .fc { grid-column: span var(--s4, 1); min-width: 0; margin: 0; }
.ficha-grid > .fc-completo { grid-column: 1 / -1; margin: 0; }
@container (min-width: 820px) {
  .ficha-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ficha-grid > .fc { grid-column: span var(--s6, 1); }
}
.ficha.sin-verificar .fc-resto { display: none; }
.ficha .campo label { font-size: 10.5px; margin-bottom: 2px; line-height: 1.2; }
.ficha input[type=text], .ficha input[type=date], .ficha select { padding: 6px 8px; font-size: 13px; }
.ficha-fila { display: flex; gap: 6px; }
.ficha-fila input { flex: 1; min-width: 0; }
.ficha-fila .btn { white-space: nowrap; padding: 6px 12px; }
.ficha-pago { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; min-height: 32px; font-size: 12.5px; }
.ficha-pago small { color: var(--text-500); }
.ficha-check { align-self: end; padding-bottom: 6px; }
.ficha-check-l { display: flex; align-items: center; gap: 6px; text-transform: none; font-weight: 400; font-size: 12.5px; letter-spacing: 0; }
.ficha-check-l input { width: auto; }
.ficha .aviso { margin: 0; padding: 6px 10px; }

/* Ventana del panel de cliente: ancha cuando se edita o crea un cliente, para aprovechar el ancho de la pantalla */
.modal-caja.ancha { max-width: min(96vw, 1180px); }
.modal-fondo { padding-top: 3vh; }
.modal-caja .pc-tab { padding: 12px 16px; }

/* Pantalla Clientes (compacta): la ficha recibe más ancho; la lista, menos columnas */
.lista-clientes { grid-template-columns: minmax(340px, .8fr) 1.4fr; }
.lista-clientes .panel-formulario-lateral { max-height: calc(100vh - 150px); padding: 12px 14px; }
.lista-clientes table.datos td, .lista-clientes table.datos th { padding: 6px 7px; }
.lista-clientes table.datos td:nth-child(2) { white-space: normal; }
@media (max-width: 1100px) { .lista-clientes { grid-template-columns: 1fr; } }

/* ===== Formularios laterales compactos (07/10/2026): que la ficha entre en pantalla sin desplazarse ===== */
.panel-formulario-lateral .campo label { font-size: 10.5px; margin-bottom: 2px; line-height: 1.2; }
.panel-formulario-lateral input[type=text], .panel-formulario-lateral input[type=number], .panel-formulario-lateral input[type=date],
.panel-formulario-lateral input[type=password], .panel-formulario-lateral input[type=email], .panel-formulario-lateral select { padding: 6px 8px; font-size: 13px; }
.panel-formulario-lateral form > div[style*="flex-wrap:wrap"] { gap: 8px 12px !important; margin-bottom: 8px !important; }
.panel-formulario-lateral form > .campo[style*="margin-bottom"] { margin-bottom: 4px !important; }
.panel-formulario-lateral p.nota-panel { font-size: 11.5px; line-height: 1.35; margin: -2px 0 8px !important; }
.nota-plegable { margin: 0 0 8px; font-size: 12px; }
.nota-plegable summary { cursor: pointer; color: var(--blue-600); font-weight: 600; padding: 2px 0; }
.nota-plegable p.nota-panel { margin: 4px 0 0 !important; }

/* Productos: la ficha recibe más ancho para que sus filas de campos numéricos no se partan */
.lista-productos { grid-template-columns: minmax(320px, .8fr) 1.6fr; }
.lista-productos .panel-formulario-lateral { max-height: calc(100vh - 118px); }
@media (max-width: 1100px) { .lista-productos { grid-template-columns: 1fr; } }

/* ===== Producto: existencias y receta lado a lado, compactos (07/10/2026) ===== */
.fila-inferior-producto { display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: 16px; align-items: start; margin-bottom: 16px; }
.fila-inferior-producto > .panel { margin-bottom: 0; }
@media (max-width: 1100px) { .fila-inferior-producto { grid-template-columns: 1fr; } }
.tabla-chica th, .tabla-chica td { padding: 5px 7px; font-size: 12.5px; }
.receta-fila { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; }
.receta-buscador { position: relative; flex: 1 1 260px; min-width: 220px; margin: 0; }
.receta-chico { flex: 0 1 92px; min-width: 70px; margin: 0; }
.receta-solo { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11.5px; text-transform: none; font-weight: 400; letter-spacing: 0; }
.receta-solo input { width: auto; }
.receta-resultados { position: absolute; z-index: 30; left: 0; right: 0; top: 56px; background: #fff; border: 1px solid var(--border, #cbd5e1); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.15); max-height: 260px; overflow-y: auto; }
.receta-op { padding: 6px 10px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #eef2f7; }
.receta-op:hover { background: #e8f0fb; }
.receta-op small { color: #64748b; margin-left: 6px; }
.receta-vacio { padding: 8px 10px; font-size: 12.5px; color: #64748b; }

/* ===== Pestañas dentro de la ficha de Producto (07/10/2026): Datos | Existencias | Receta, sin desplazarse hacia abajo ===== */
.pestanas-prod { display: flex; gap: 2px; padding: 8px 14px 0; border-bottom: 1px solid #dbe3ee; background: #f7f9fc; }
.pestana-prod { border: 1px solid transparent; border-bottom: none; background: transparent; padding: 7px 14px; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; border-radius: 6px 6px 0 0; }
.pestana-prod:hover { background: #e8f0fb; }
.pestana-prod.activa { background: #fff; color: #1b4a85; border-color: #dbe3ee; margin-bottom: -1px; }

/* Producto: la ficha cabe en pantalla (la lista y la ficha no pasan del alto de la ventana) y Guardar queda siempre a la vista */
.lista-productos .panel-formulario-lateral { max-height: calc(100vh - 160px); }
.lista-productos .panel-lista-fija { max-height: calc(100vh - 120px); }
.acciones-pegadas { position: sticky; bottom: -12px; background: #fff; padding: 8px 0 4px; margin-top: 6px; border-top: 1px solid #eef2f7; z-index: 5; }
.pane-prod[data-pane="receta"] { min-height: 340px; }

/* ===== Documentos con buscador de productos (Orden de compra, Entrada/Salida interna) — 07/10/2026 =====
   Cabecera en una fila; izquierda: buscador (como la factura); derecha: grilla de lo que se va agregando. */
.doc-cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 10px 12px; background: var(--gray-50, #f7f9fc); border: 1px solid var(--gray-200, #e2e8f0); border-radius: 6px; margin-bottom: 6px; }
.doc-cabecera .campo { margin: 0; }
.doc-cabecera .campo label { font-size: 10.5px; margin-bottom: 2px; }
.doc-cabecera input, .doc-cabecera select { padding: 6px 8px; font-size: 13px; }
.doc-layout { display: grid; grid-template-columns: minmax(300px, .85fr) 1.6fr; gap: 14px; align-items: start; margin-top: 8px; }
@media (max-width: 1000px) { .doc-layout { grid-template-columns: 1fr; } }
.doc-subtitulo { font-size: 12px; font-weight: 700; color: #1b4a85; text-transform: uppercase; letter-spacing: .03em; margin: 2px 0 6px; }
.doc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.doc-chips .btn { padding: 4px 9px; font-size: 12px; }
.doc-busqueda { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; margin-bottom: 6px; }
.doc-busqueda .campo { margin: 0; }
.doc-busqueda .campo label { font-size: 10.5px; margin-bottom: 2px; }
.doc-busqueda input { padding: 6px 8px; font-size: 13px; }
.doc-resultados, .doc-lineas { border: 1px solid var(--gray-200, #e2e8f0); border-radius: 6px; overflow: auto; height: calc(100vh - 430px); min-height: 190px; background: #fff; }
.doc-resultados table, .doc-lineas table { margin: 0; }
.doc-resultados thead th, .doc-lineas thead th { position: sticky; top: 0; z-index: 2; }
.tabla-clic tbody tr.fila-producto-disponible { cursor: pointer; }
.tabla-clic tbody tr.fila-producto-disponible:hover { background: #e8f0fb; }
.doc-pendientes { margin-top: 10px; }
.doc-pie { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 8px; }
.doc-pie .tarjetas-total-fila { margin: 0; flex: 1; }
.doc-botones { display: flex; gap: 8px; margin-left: auto; }
.doc-cabecera .campo { flex: 0 0 auto; min-width: 0; }

.doc-lineas.auto { height: auto; min-height: 120px; max-height: calc(100vh - 480px); }
.doc-resultados.corto, .doc-lineas.corto { height: 190px; min-height: 120px; }

/* ===== Receta de producto (08/10/2026): rejilla siempre visible con los componentes de UNA unidad ===== */
.receta-titulo { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; background: #f7f9fc; border: 1px solid #dbe3ee; border-radius: 6px; margin-bottom: 10px; }
.receta-titulo span { font-size: 12px; color: #64748b; }
.receta-aviso { margin: 0 0 8px; padding: 7px 10px; background: #fff7e0; border: 1px solid #f0d58a; border-radius: 6px; font-size: 12.5px; }
.receta-grilla { margin-top: 10px; border: 1px solid #dbe3ee; border-radius: 6px; max-height: 300px; overflow-y: auto; }
.receta-cant { width: 92px; }
.receta-und { max-width: 120px; }
.receta-vacio-grilla { padding: 22px 10px; text-align: center; color: #64748b; font-size: 13px; }

/* ===== Producción (09/10/2026): lista de productos con receta a la izquierda, requerimientos a la derecha ===== */
.produccion-grid { display: grid; grid-template-columns: minmax(260px, 4fr) 8fr; gap: 16px; align-items: start; }
.produccion-grid > .panel { margin-bottom: 0; }
@media (max-width: 1100px) { .produccion-grid { grid-template-columns: 1fr; } }
.produccion-scroll { max-height: 420px; overflow-y: auto; margin-top: 8px; }
.fila-prod { cursor: pointer; }
.fila-prod:hover { background: #e8f0fb; }
.fila-prod.seleccionada { background: #d6e6fa; font-weight: 600; }
.produccion-requeridos { margin-top: 8px; border: 1px solid #dbe3ee; border-radius: 6px; max-height: 340px; overflow-y: auto; }
.produccion-totales { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 10px; padding: 8px 12px; background: #f7f9fc; border: 1px solid #dbe3ee; border-radius: 6px; }
.produccion-totales div { display: flex; flex-direction: column; font-size: 12px; color: #64748b; }
.produccion-totales strong { font-size: 18px; color: #12315a; }
.produccion-remanentes { margin-top: 10px; padding: 8px 12px; border: 1px solid #f0d58a; background: #fffbea; border-radius: 6px; }
.rem-fila { display: flex; flex-direction: column; gap: 3px; padding: 6px 0; border-top: 1px solid #f0e3b4; font-size: 13px; }
.rem-fila:first-child { border-top: none; }
.rem-fila label { display: flex; align-items: center; gap: 6px; text-transform: none; font-weight: 400; letter-spacing: 0; }
.rem-fila input[type=radio] { width: auto; }
.rem-auth { margin-top: 8px; padding: 8px 10px; border: 1px solid #e3b4b4; background: #fff1f1; border-radius: 6px; font-size: 13px; }
.rem-auth-campos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.rem-auth-campos .campo { width: 220px; margin: 0; }

/* Botones bloqueados (09/10/2026): que se vean apagados, no como si se pudieran pulsar */
.btn:disabled, .btn[disabled] { background: #cbd5e1; color: #64748b; cursor: not-allowed; box-shadow: none; opacity: 1; }
.btn:disabled:hover, .btn[disabled]:hover { background: #cbd5e1; }

/* Panel general con datos reales (13/10/2026): tarjetas/alertas clicables, barras de 7 días y actividad reciente */
.tarjeta-stat-icono.icono-cxp { background: var(--orange-100); color: var(--orange-600); }
a.tarjeta-stat.enlace, a.alerta-tile.enlace { text-decoration: none; color: inherit; transition: border-color .15s, background .15s; }
a.tarjeta-stat.enlace:hover, a.alerta-tile.enlace:hover { border-color: var(--blue-600); background: var(--gray-50); }
.grid-alertas { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .grid-alertas { grid-template-columns: repeat(2, 1fr); } }
a.acceso-rapido { text-decoration: none; color: inherit; transition: border-color .15s, background .15s; }
a.acceso-rapido:hover { border-color: var(--blue-600); background: var(--gray-50); }
.grafica-barras { margin-bottom: 16px; }
.grafica-barras:last-child { margin-bottom: 0; }
.grafica-barras-titulo { font-size: 12px; font-weight: 700; color: var(--text-900); margin-bottom: 8px; display: flex; justify-content: space-between; gap: 8px; }
.grafica-barras-total { color: var(--text-500); font-weight: 600; }
.barra-fila { display: grid; grid-template-columns: 52px 1fr 92px; align-items: center; gap: 8px; font-size: 11.5px; margin-bottom: 4px; }
.barra-dia { color: var(--text-500); }
.barra-pista { background: var(--gray-100); border-radius: 4px; height: 10px; overflow: hidden; }
.barra-relleno { display: block; height: 100%; background: var(--blue-600); border-radius: 4px; min-width: 0; }
.barra-relleno.alterna { background: var(--green-600); }
.barra-valor { text-align: right; color: var(--text-900); font-weight: 600; }
.actividad-lista { list-style: none; margin: 0; padding: 0; }
.actividad-lista li { padding: 7px 0; border-bottom: 1px solid var(--gray-100); font-size: 12.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.actividad-lista li:last-child { border-bottom: 0; }
.actividad-cuando { color: var(--text-500); font-size: 11.5px; min-width: 78px; }

/* Estados de cuenta (13/10/2026): encabezado, resumen y hoja imprimible */
.rangos-rapidos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.estado-encabezado { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 2px solid var(--navy-900); padding-bottom: 10px; margin-bottom: 12px; }
.estado-empresa .nombre { font-size: 15px; font-weight: 700; color: var(--navy-900); }
.estado-empresa div, .estado-titulo div { font-size: 12px; }
.estado-titulo { text-align: right; }
.estado-titulo .titulo { font-size: 15px; font-weight: 700; color: var(--navy-900); letter-spacing: .03em; }
.estado-parte { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 12.5px; margin-bottom: 4px; }
.estado-parte .etq { color: var(--text-500); font-weight: 600; margin-right: 4px; }
.estado-resumen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
.estado-resumen .caja { border: 1px solid var(--gray-200); border-radius: 6px; padding: 10px; text-align: center; }
.estado-resumen .caja .etq { font-size: 11px; color: var(--text-500); font-weight: 600; margin-bottom: 4px; }
.estado-resumen .caja .val { font-size: 16px; font-weight: 700; color: var(--navy-900); }
.estado-resumen .caja.final { background: var(--blue-100); border-color: var(--blue-600); }
.estado-resumen .caja.final .val { color: var(--blue-600); }
@media (max-width: 800px) { .estado-resumen { grid-template-columns: repeat(2, 1fr); } }
.fila-saldo-anterior td { background: var(--gray-50); font-weight: 600; }
@media print {
  .panel-sidebar, .panel-topbar, .panel-footer, .no-imprimir { display: none !important; }
  .panel-shell { display: block !important; }
  .panel-main { margin: 0 !important; width: 100% !important; }
  body.megaposvt { background: #fff !important; }
  .panel-contenido { padding: 0 !important; }
  .panel { border: 0 !important; box-shadow: none !important; }
  .tabla-scroll { overflow: visible !important; max-height: none !important; }
  @page { margin: 12mm; }
}

/* Buscador por escritura de clientes/proveedores (13/10/2026) */
.bt-envoltura { position: relative; width: 100%; }
.bt-envoltura input[type=text] { width: 100%; box-sizing: border-box; }
.bt-lista { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--white); border: 1px solid var(--gray-200); border-radius: 6px; box-shadow: 0 6px 16px rgba(15, 30, 60, .15); max-height: 280px; overflow-y: auto; margin-top: 2px; }
.bt-item { padding: 7px 10px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; border-bottom: 1px solid var(--gray-100); }
.bt-item:last-child { border-bottom: 0; }
.bt-item.activo, .bt-item:hover { background: var(--blue-100); }
.bt-doc { color: var(--text-500); font-size: 11.5px; white-space: nowrap; }
.bt-vacio { padding: 10px; color: var(--text-500); font-size: 12px; }
.historial-detalle td { background: var(--gray-50); font-size: 11.5px; padding-top: 3px; padding-bottom: 3px; }
.historial-detalle td.num { text-align: right; }
@media print { .bt-lista { display: none !important; } }

/* Botones dentro del encabezado azul de un panel (13/10/2026): fondo claro para que se lean */
.panel-header .btn-accion { display: inline-flex; align-items: center; margin-left: 6px; padding: 5px 12px; border-radius: 6px; background: var(--white); color: var(--navy-900); border: 1px solid var(--white); text-decoration: none; font-size: 12px; }
.panel-header .btn-accion:hover { background: var(--blue-100); }