/* === Fuentes self-hosted (Geist) ===
   Se sirven desde /static/fonts/ (mismo origen: respeta CSP y funciona offline
   en cada instalación on-premise, igual que Chart.js). font-display:swap evita
   texto invisible mientras cargan. */
@font-face{font-family:"Geist";src:url("/static/fonts/geist-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("/static/fonts/geist-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("/static/fonts/geist-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("/static/fonts/geist-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/static/fonts/geist-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/static/fonts/geist-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/static/fonts/geist-mono-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* === Variables y reset ===
   Paleta "financial-grade": navy + azul de marca + dorado (VÁSQUEZ), neutros en
   familia slate y sombras tintadas en navy. Se conservan TODOS los nombres de
   variable existentes — solo se refinan los valores — para no romper módulos. */
:root {
  --azul: #0073cf;
  --azul-oscuro: #00468a;
  --azul-claro: #e9f2fb;
  --verde: #0f9d6b;
  --rojo: #dc3350;
  --amarillo: #c77d18;
  --violeta: #8b5cf6;
  --dorado: #c19a3e;
  --dorado-claro: #e7d29a;
  --navy: #0b2540;
  --texto: #0e1a2b;
  --texto-suave: #5b6b82;
  --gris: #f0f3f8;
  --gris-claro: #f7f9fc;
  --gris-borde: #e4e9f0;
  --shadow: 0 1px 2px rgba(14,26,43,.06), 0 1px 3px rgba(14,26,43,.05);
  --shadow-lg: 0 6px 20px -6px rgba(14,26,43,.14), 0 2px 6px -2px rgba(14,26,43,.08);
  --font-ui: "Geist", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Los controles de formulario no heredan la tipografía por defecto: forzamos
   Geist en inputs, botones, selects y textareas para consistencia total. */
input, button, select, textarea { font-family: inherit; }
body { font-family: var(--font-ui);
       color: var(--texto); background: var(--gris-claro); line-height: 1.5;
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
       text-rendering: optimizeLegibility; letter-spacing: -0.006em; }

/* === Inputs numéricos: eliminar flechas spinner (regla global) === */
/* Los spinners nativos del navegador en <input type="number"> son una fuente
   común de clicks accidentales — el usuario ingresa 100 y al hacer click en
   la flecha pasa a 101 sin querer. Política del sistema: solo se ingresa
   por teclado. Aplica a Chrome/Edge/Safari (WebKit) y Firefox. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* === Header === */
header.top {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(180deg, #0d2a48 0%, var(--navy) 100%);
  color: #eaf1f8; padding: 12px 20px;
  border-bottom: 1.5px solid var(--dorado);
  box-shadow: 0 4px 16px -8px rgba(11,37,64,.5);
  position: sticky; top: 0; z-index: 100;
}
header.top .marca { display: flex; align-items: center; gap: 10px; }
header.top .logo {
  width: 36px; height: 36px; border-radius: 9px;
  background: linear-gradient(160deg, #f1d98a, var(--dorado));
  color: var(--navy); box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
header.top h1 { font-size: 18px; font-weight: 600; }
header.top .v { font-size: 11px; opacity: .8; }

.widget-header {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.15); padding: 6px 10px; border-radius: 8px;
}
.widget-header select, .widget-header input {
  background: transparent; border: none; color: #fff; font-size: 14px; font-weight: 500;
  cursor: pointer; padding: 4px;
}
.widget-header select option { color: var(--texto); }
.widget-header button {
  background: rgba(255,255,255,.2); color: #fff; border: none; border-radius: 4px;
  padding: 4px 8px; cursor: pointer; font-size: 13px;
}
.widget-header button:hover { background: rgba(255,255,255,.3); }
.spacer { flex: 1; }

/* === Layout === */
.layout { display: flex; min-height: calc(100vh - 60px); align-items: stretch; }
aside.sidebar {
  width: 240px; background: linear-gradient(180deg, #fafbfd 0%, #f0f3f8 100%);
  border-right: 1px solid var(--gris-borde);
  padding: 10px 0 30px;
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.02);
  /* Scroll independiente del contenido principal:
     queda pegado bajo el header (60px) con altura del viewport
     y su propio overflow vertical. */
  position: sticky;
  top: 60px;
  align-self: flex-start;
  height: calc(100vh - 60px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Scrollbar más fino y discreto para el sidebar */
aside.sidebar::-webkit-scrollbar { width: 8px; }
aside.sidebar::-webkit-scrollbar-track { background: transparent; }
aside.sidebar::-webkit-scrollbar-thumb {
  background: rgba(107, 114, 128, 0.25); border-radius: 4px;
}
aside.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.45);
}
aside.sidebar { scrollbar-width: thin; scrollbar-color: rgba(107,114,128,0.25) transparent; }
/* Buscador en sidebar */
aside.sidebar .sb-search {
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(180deg, #fafbfd 0%, rgba(250,251,253,0.95) 100%);
  padding: 8px 12px 10px; border-bottom: 1px solid var(--gris-borde);
  margin-bottom: 6px;
}
aside.sidebar .sb-search input {
  width: 100%; padding: 7px 10px 7px 30px; font-size: 13px;
  border: 1px solid var(--gris-borde); border-radius: 6px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 9px center;
}
aside.sidebar .sb-search input:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(0,115,207,0.1);
}

/* Grupo colapsable */
aside.sidebar .grupo { margin: 0 8px 4px; }
aside.sidebar .grupo-titulo {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .5px;
  padding: 8px 10px; cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
aside.sidebar .grupo-titulo:hover {
  background: rgba(0,115,207,0.06); color: var(--azul-oscuro);
}
aside.sidebar .grupo-titulo .chevron {
  font-size: 10px; transition: transform 0.2s ease;
  color: var(--texto-suave);
}
aside.sidebar .grupo.colapsado .grupo-titulo .chevron {
  transform: rotate(-90deg);
}
/* Contenedor de items con animación de altura */
aside.sidebar .grupo-items {
  overflow: hidden;
  max-height: 1000px;
  transition: max-height 0.3s ease, opacity 0.2s ease;
  opacity: 1;
}
aside.sidebar .grupo.colapsado .grupo-items {
  max-height: 0; opacity: 0;
}

/* Items del menú */
aside.sidebar .item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 18px; cursor: pointer;
  font-size: 13.5px; color: var(--texto);
  border-radius: 6px; margin: 1px 0;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  position: relative;
}
aside.sidebar .item:hover {
  background: rgba(0,115,207,0.08); color: var(--azul-oscuro);
}
aside.sidebar .item.activo {
  background: var(--azul-claro);
  color: var(--azul-oscuro); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--azul);
}
aside.sidebar .item.activo:hover { color: var(--azul-oscuro); background: var(--azul-claro); }
aside.sidebar .item.activo .icono { filter: none; }
aside.sidebar .item .icono {
  font-size: 16px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px;
}
aside.sidebar .item.oculto { display: none; }
aside.sidebar .item.bloqueado-licencia {
  color: #8492a6;
  opacity: 0.78;
}
aside.sidebar .item.bloqueado-licencia:hover {
  background: #f9fafb;
  color: #5b6b82;
}
aside.sidebar .item.bloqueado-licencia .icono {
  color: #8492a6;
}

/* Botón "Abrir en nueva pestaña" del sidebar (↗).
   Aparece en hover sobre el item para no saturar visualmente. */
aside.sidebar .item .sb-nueva-pestana {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--texto-suave);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 13px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  flex-shrink: 0;
}
aside.sidebar .item:hover .sb-nueva-pestana {
  opacity: 0.7;
}
aside.sidebar .item .sb-nueva-pestana:hover {
  opacity: 1;
  background: rgba(0,0,0,0.06);
  color: var(--azul-oscuro);
}
aside.sidebar .item.activo .sb-nueva-pestana {
  color: var(--azul-oscuro);
  opacity: 0.7;
}
aside.sidebar .item.activo .sb-nueva-pestana:hover {
  background: rgba(0,115,207,0.12);
  color: var(--azul-oscuro);
  opacity: 1;
}

/* === Footer del sistema === */
#app-footer {
  margin-top: auto;
  background: var(--gris);
  border-top: 1px solid var(--gris-borde);
  padding: 8px 20px;
  text-align: center;
  font-size: 11px;
  color: var(--texto-suave);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#app-footer .copyright { font-weight: 600; color: #4b5563; }
#app-footer .sep { color: #d1d5db; }
#app-footer a { color: var(--azul); text-decoration: none; }
#app-footer a:hover { text-decoration: underline; }
@media print { #app-footer { display: none !important; } }

/* Item directo (grupo de un solo elemento, renderizado como acceso directo) */
aside.sidebar .item.item-directo {
  margin: 0 8px 4px;
  padding: 9px 12px;
  font-weight: 600;
}
aside.sidebar .item.item-directo .icono { font-size: 17px; }

/* Botones de acción global del sidebar */
aside.sidebar .sb-acciones {
  display: flex; gap: 4px; padding: 6px 10px;
  border-bottom: 1px solid var(--gris-borde); margin-bottom: 6px;
}
aside.sidebar .sb-acciones button {
  flex: 1; padding: 4px 6px; font-size: 10px;
  background: transparent; border: 1px solid var(--gris-borde);
  border-radius: 4px; color: var(--texto-suave); cursor: pointer;
  transition: all 0.12s;
}
aside.sidebar .sb-acciones button:hover {
  background: var(--azul-claro); border-color: var(--azul);
  color: var(--azul-oscuro);
}

main.contenido { flex: 1; padding: 20px; overflow-y: auto; max-width: 100%; }

/* === Breadcrumb de navegación con botón Volver === */
.nav-breadcrumb {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, #fafbfd 0%, #f1f5fa 100%);
  border: 1px solid var(--gris-borde);
  border-radius: 8px; padding: 8px 14px;
  margin: 0 0 14px;
  font-size: 13px;
}
.nav-breadcrumb-ruta {
  color: var(--texto-suave);
  font-size: 12px;
}
.nav-breadcrumb-ruta strong {
  color: var(--azul-oscuro);
  font-weight: 600;
}

/* === Tarjetas y KPIs === */
.tarjeta {
  background: #fff; border: 1px solid var(--gris-borde); border-radius: 10px;
  padding: 16px; box-shadow: var(--shadow); margin-bottom: 16px;
}
.tarjeta h2 { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--azul-oscuro); }
.tarjeta .subtitulo { font-size: 13px; color: var(--texto-suave); margin-bottom: 12px; }

.bienvenida {
  background: linear-gradient(135deg, var(--navy) 0%, #123a63 100%);
  color: #eaf1f8; padding: 18px 22px; border-radius: 12px; margin-bottom: 18px;
  border: 1px solid rgba(193,154,62,.25);
  box-shadow: var(--shadow-lg);
}
.bienvenida h2 { font-size: 22px; margin-bottom: 4px; }
.bienvenida .badge {
  display: inline-block; background: rgba(255,255,255,.2); padding: 4px 10px;
  border-radius: 6px; font-size: 13px; margin-top: 6px;
}

.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.kpi {
  background: #fff; border: 1px solid var(--gris-borde); border-radius: 10px;
  padding: 15px 16px; box-shadow: var(--shadow); border-left: 3px solid var(--azul);
}
.kpi.verde { border-left-color: var(--verde); }
.kpi.rojo { border-left-color: var(--rojo); }
.kpi.amarillo { border-left-color: var(--amarillo); }
.kpi.violeta { border-left-color: var(--violeta); }
.kpi .etiqueta { font-size: 11px; font-weight: 600; color: var(--texto-suave);
                 text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.kpi .valor { font-size: 23px; font-weight: 700; color: var(--texto);
              letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .detalle { font-size: 12px; color: var(--texto-suave); margin-top: 2px; }

.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }

/* === Tablas === */
.scroll-tabla { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tabla th {
  background: var(--gris-claro); padding: 11px 10px; text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto-suave); border-bottom: 1px solid var(--gris-borde);
}
table.tabla th.num { text-align: right; }
table.tabla td { padding: 10px; border-bottom: 1px solid var(--gris-borde); }
table.tabla td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Refuerzo global: ninguna celda numérica rompe línea entre símbolo y número */
td.num, th.num, .num.nowrap { white-space: nowrap; }

/* === Drill-down universal ===
   Convención visual: cualquier elemento clickeable que lleva al "origen" de un
   número o registro lleva la clase .drill. Subrayado punteado azul, cursor
   pointer, hover destacado. Reusable en BG, ER, Libro Mayor, Aging, etc. */
.drill {
  cursor: pointer;
  text-decoration: underline dotted;
  text-decoration-color: var(--azul);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: background 0.12s;
}
.drill:hover {
  background: var(--azul-claro);
  text-decoration-color: var(--azul-oscuro);
  border-radius: 3px;
}
td.drill { padding-left: 6px; padding-right: 6px; }

/* Breadcrumb de origen — muestra de dónde vino el drill-down */
.drill-breadcrumb {
  background: var(--azul-claro);
  border-left: 4px solid var(--azul);
  padding: 8px 14px;
  margin: 0 0 12px;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  color: var(--azul-oscuro);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.drill-breadcrumb .breadcrumb-vinieron { color: var(--texto-suave); font-size: 12px; }
.drill-breadcrumb .breadcrumb-volver {
  background: #fff; color: var(--azul); border: 1px solid var(--azul);
  padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.drill-breadcrumb .breadcrumb-volver:hover {
  background: var(--azul); color: #fff;
}

/* === Menú "Opciones" desplegable para reportes ===
   Reusable: un <details> con <summary> que parece botón y un panel flotante
   con los checkboxes/inputs adentro. Reduce ruido visual en la cabecera de
   reportes (BG, ER) donde antes había varios checkboxes apilados. */
.menu-opciones { position: relative; display: inline-block; }
.menu-opciones > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 13px;
  background: var(--gris-claro); color: var(--azul-oscuro);
  border: 1px solid var(--gris-borde); border-radius: 6px;
}
.menu-opciones > summary::-webkit-details-marker,
.menu-opciones > summary::marker { display: none; content: ""; }
.menu-opciones[open] > summary {
  background: var(--azul-claro); border-color: var(--azul);
}
.menu-opciones-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 100;
  background: #fff; border: 1px solid var(--gris-borde);
  border-radius: 8px; padding: 8px 12px; min-width: 240px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.menu-opciones-panel label {
  display: flex; align-items: center; gap: 8px; padding: 8px 4px;
  font-size: 13px; white-space: nowrap; cursor: pointer;
  border-bottom: 1px solid var(--gris-claro);
}
.menu-opciones-panel label:last-child { border-bottom: none; }
.menu-opciones-panel label:hover { background: var(--gris-claro); border-radius: 4px; }
.menu-opciones-panel .menu-hint {
  font-size: 11px; color: var(--texto-suave); padding: 4px 0 8px;
}

/* === Flujo de efectivo: secciones colapsables y grupos por contra-cuenta === */
.fc-seccion {
  border: 1px solid var(--gris-borde); border-radius: 8px;
  margin: 10px 0; overflow: hidden;
}
.fc-seccion > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 12px 14px; display: flex; justify-content: space-between;
  align-items: center; gap: 12px;
  background: var(--azul-claro); border-bottom: 1px solid var(--gris-borde);
  font-weight: 600; color: var(--azul-oscuro);
}
.fc-seccion > summary::-webkit-details-marker,
.fc-seccion > summary::marker { display: none; content: ""; }
.fc-seccion > summary::before {
  content: "▶"; font-size: 10px; color: var(--azul);
  transition: transform 0.15s; display: inline-block;
}
.fc-seccion[open] > summary::before { transform: rotate(90deg); }
.fc-seccion-titulo-txt { flex: 1; }
.fc-seccion-cuerpo { padding: 8px 14px; }

.fc-grupo {
  border-left: 3px solid var(--gris-borde); margin: 6px 0 6px 4px;
  padding-left: 0;
}
.fc-grupo > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 8px 12px; display: flex; justify-content: space-between;
  align-items: center; gap: 10px;
  background: var(--gris-claro); border-radius: 4px;
  font-size: 13px;
}
.fc-grupo > summary::-webkit-details-marker,
.fc-grupo > summary::marker { display: none; content: ""; }
.fc-grupo > summary::before {
  content: "▸"; font-size: 10px; color: var(--texto-suave);
  transition: transform 0.15s; display: inline-block;
}
.fc-grupo[open] > summary::before { transform: rotate(90deg); color: var(--azul); }
.fc-grupo[open] { border-left-color: var(--azul); }
.fc-grupo-cuerpo {
  padding: 6px 8px 8px 24px; font-size: 12px;
}
.fc-grupo-cuenta { color: var(--texto-suave); font-family: "Courier New", monospace; }
table.tabla tr:hover { background: var(--gris-claro); }
table.tabla .codigo { font-family: var(--font-mono); font-size: 12px; }

.linea-resumen {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px; border-bottom: 1px solid var(--gris-borde); font-size: 14px;
}
.linea-resumen.subtotal { font-weight: 600; background: var(--gris-claro); }
.linea-resumen.total { font-weight: 700; background: var(--azul-claro);
                        color: var(--azul-oscuro); font-size: 15px; padding: 10px 12px; }
.linea-resumen .num { font-variant-numeric: tabular-nums; }

/* === Grids de líneas (facturas, compras, cheques, asientos) ===
   Estilo profesional uniforme tipo "tabla con header" para entradas multi-fila. */
.lineas-grid {
  border: 1px solid var(--gris-borde); border-radius: 8px;
  overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.lineas-grid .lineas-header {
  display: grid; gap: 6px; align-items: center;
  padding: 10px 12px;
  background: linear-gradient(180deg, #f9fafb, #f1f5f9);
  border-bottom: 2px solid var(--azul);
  font-size: 11px; font-weight: 700; color: var(--azul-oscuro);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.lineas-grid .lineas-header .col-num { text-align: right; }
.lineas-grid .lineas-body { padding: 0; }
.lineas-grid .linea-row {
  display: grid; gap: 6px; align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--gris-borde);
  background: #fff;
  transition: background 0.12s;
}
.lineas-grid .linea-row:last-child { border-bottom: none; }
.lineas-grid .linea-row:hover { background: var(--gris-claro); }
.lineas-grid .linea-row.sub-fila {
  background: var(--gris-claro);
  padding: 6px 12px 6px 30px;
  font-size: 11px;
  border-bottom: 1px dashed var(--gris-borde);
}
.lineas-grid .linea-row.sub-fila label {
  color: var(--texto-suave); font-size: 11px; padding-top: 4px;
}
.lineas-grid input,
.lineas-grid select {
  padding: 6px 8px; border: 1px solid var(--gris-borde); border-radius: 6px;
  font-size: 13px; background: #fff;
  transition: border-color 0.12s, box-shadow 0.12s;
  min-width: 0;  /* permite que el grid controle el ancho aunque el contenido sea largo */
  width: 100%;   /* ocupa toda la columna del grid */
}
.lineas-grid input:focus,
.lineas-grid select:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(0,115,207,0.1);
}
.lineas-grid input.num { text-align: right; font-variant-numeric: tabular-nums; }
.lineas-grid .btn-eliminar-fila {
  background: #fee2e2; color: var(--rojo); border: none;
  width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s;
}
.lineas-grid .btn-eliminar-fila:hover { background: var(--rojo); color: #fff; }
.lineas-grid .lineas-footer {
  display: flex; justify-content: flex-start; align-items: center;
  padding: 10px 12px;
  background: #eef2f7;
  border-top: 2px solid var(--gris-borde);
  gap: 8px;
  min-height: 44px;
}
.lineas-grid .lineas-body:empty::before {
  content: "Sin líneas agregadas — usa el botón \"+ Agregar línea\" abajo";
  display: block; padding: 16px 12px; color: var(--texto-suave);
  font-size: 12px; text-align: center; font-style: italic;
}

/* === Recuadro de totales ===
   Reemplaza el "fondo plano" por algo con jerarquía visual. */
.totales-card {
  margin-top: 14px; padding: 14px 18px;
  background: linear-gradient(180deg, #fff, var(--gris-claro));
  border: 1px solid var(--gris-borde); border-radius: 10px;
  box-shadow: var(--shadow);
}
.totales-card .linea-resumen {
  border-bottom: 1px dashed var(--gris-borde);
  padding: 5px 0;
}
.totales-card .linea-resumen.total {
  background: linear-gradient(135deg, var(--azul) 0%, var(--azul-oscuro) 100%);
  color: #fff; font-size: 16px;
  border-radius: 8px; padding: 12px 16px; margin-top: 8px;
  border-bottom: none;
}
.totales-card .linea-resumen.total .num { color: #fff; font-weight: 800; }
.totales-card .linea-resumen.subtotal {
  background: transparent; font-weight: 700;
  border-top: 2px solid var(--azul-oscuro); padding-top: 8px; margin-top: 6px;
}

/* === Botones === */
.btn {
  background: var(--azul); color: #fff; border: none; border-radius: 8px;
  padding: 8px 16px; font-size: 14px; font-weight: 500; cursor: pointer;
  /* Propiedades exactas — nunca `transition: all` (causa flicker en cambios laterales). */
  transition: background 160ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 100ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  position: relative;  /* requerido por .loading::after */
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--azul-oscuro); box-shadow: 0 2px 6px rgba(0,115,207,0.25); }
}
.btn:active { transform: scale(0.97); transition-duration: 80ms; }
.btn:disabled, .btn[disabled] {
  opacity: 0.55; cursor: not-allowed;
  /* Si está disabled NO queremos efecto de press */
  transform: none !important;
}
.btn.secundario { background: #fff; color: var(--texto); border: 1px solid var(--gris-borde); }
@media (hover: hover) and (pointer: fine) {
  .btn.secundario:hover {
    background: var(--gris); border-color: #cbd5e1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
}
.btn.exito { background: var(--verde); }
@media (hover: hover) and (pointer: fine) {
  .btn.exito:hover { background: #0ea571; box-shadow: 0 2px 6px rgba(16,185,129,0.25); }
}
.btn.peligro { background: var(--rojo); }
@media (hover: hover) and (pointer: fine) {
  .btn.peligro:hover { background: #dc2626; box-shadow: 0 2px 6px rgba(239,68,68,0.25); }
}
.btn.pequeno { padding: 4px 10px; font-size: 12px; }

/* Estado .loading: texto invisible, spinner inline centrado, no clickeable.
   Funciona en todas las variantes (primario, secundario, éxito, peligro). */
.btn.loading {
  color: transparent !important;
  pointer-events: none;
  cursor: wait;
}
.btn.loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 700ms linear infinite;
}
/* En botones secundarios (fondo blanco), el spinner es azul */
.btn.secundario.loading::after {
  border-color: rgba(0,115,207,0.18);
  border-top-color: var(--azul);
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* === Tarjetas con hover sutil ===
   Cambio de sombra solo — sin transform — para mantener tono ejecutivo.
   Las tarjetas son contenedores; no deben "saltar" con cada hover. */
.tarjeta {
  transition: box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  }
}

/* === Estados visuales === */
.estado-vacio {
  text-align: center; padding: 56px 24px; color: var(--texto-suave);
}
.estado-vacio .icono {
  font-size: 30px; line-height: 1; margin: 0 auto 14px;
  width: 66px; height: 66px; display: flex; align-items: center; justify-content: center;
  background: var(--gris); border: 1px solid var(--gris-borde); border-radius: 18px;
  opacity: .92;
}
.estado-vacio h3 { font-size: 16px; font-weight: 620; letter-spacing: -.01em;
  margin-bottom: 4px; color: var(--texto); }

.loading-box {
  display: flex; align-items: center; gap: 12px; padding: 20px;
  color: var(--texto-suave); justify-content: center;
}
.spinner {
  width: 24px; height: 24px; border: 3px solid var(--gris-borde);
  border-top-color: var(--azul); border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.error-box {
  background: #fdeaed; color: #a01830; padding: 12px 16px; border-radius: 8px;
  border-left: 3px solid var(--rojo);
}

/* === Toast === */
.toast {
  position: fixed; bottom: 20px; right: 20px; background: #0e1a2b; color: #fff;
  padding: 12px 20px; border-radius: 8px; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(20px); transition: all .3s; z-index: 1000;
  max-width: 360px; font-size: 14px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.toast-exito { background: var(--verde); }
.toast.toast-error { background: var(--rojo); }
.toast.toast-info { background: var(--azul); }

/* === Tags === */
.tag {
  display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px;
  font-weight: 500; text-transform: uppercase; letter-spacing: .3px;
}
.tag.activo { background: #d1fae5; color: #065f46; }
.tag.emitida { background: #dbeafe; color: #1e40af; }
.tag.parcial { background: #fef3c7; color: #92400e; }
.tag.cobrada, .tag.pagada { background: #d1fae5; color: #065f46; }
.tag.anulada { background: #fee2e2; color: #991b1b; }
.tag.vencida { background: #fee2e2; color: #991b1b; }
.tag.saldo-inicial {
  background: #ede9fe; color: #5b21b6;
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
  padding: 1px 6px; margin-left: 4px;
}
/* Vista 360 — link clickeable en nombres de cliente/proveedor */
.v360-link {
  color: inherit; text-decoration: none;
  border-bottom: 1px dashed rgba(0, 115, 207, 0.4);
  transition: color .15s, border-color .15s;
  cursor: pointer;
}
.v360-link:hover {
  color: #0073cf;
  border-bottom-color: #0073cf;
}
/* Estados de cierre de período */
.tag.tag-pc-abierto { background: #d1fae5; color: #065f46; }
.tag.tag-pc-cerrado { background: #fee2e2; color: #991b1b; }
.tag.tag-pc-reabierto { background: #fef3c7; color: #92400e; }

/* === Form === */
.fila { display: grid; gap: 12px; margin-bottom: 12px; }
.fila.col-2 { grid-template-columns: 1fr 1fr; }
.fila.col-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) {
  .fila.col-2, .fila.col-3 { grid-template-columns: 1fr; }
}
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: 12px; font-weight: 600; color: var(--texto); }
.campo input, .campo select, .campo textarea {
  padding: 9px 11px; border: 1px solid var(--gris-borde); border-radius: 8px;
  font-size: 14px; font-family: inherit; color: var(--texto); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0,115,207,.15);
}

/* === Modales con transición de escala (Motion UI ejecutivo) ===
   El overlay siempre está display:flex pero invisible+inaccesible hasta .activo.
   Esto permite que la transición de opacity+scale se vea suave en lugar de
   un "salto brusco". transform-origin: center porque modales son la excepción
   de Emil — no están anclados a un trigger, viven centrados. */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Fade del overlay + delay la visibility para fade-out completo */
  transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1),
              visibility 0s linear 200ms;
}
.modal-overlay.activo {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1),
              visibility 0s linear 0s;
}
.modal {
  background: #fff; border-radius: 14px; border: 1px solid var(--gris-borde);
  max-width: 800px; width: 100%;
  max-height: 90vh; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 30px 70px -24px rgba(11,37,64,.5), var(--shadow-lg);
  transform: scale(0.96);
  opacity: 0;
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1),
              opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.modal-overlay.activo .modal {
  transform: scale(1);
  opacity: 1;
}
/* Estado de cierre: scale apenas más chico que el reposo (exit más sutil que enter, regla Emil) */
.modal-overlay.cerrando .modal {
  transform: scale(0.98);
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .modal-overlay, .modal-overlay.activo,
  .modal, .modal-overlay.activo .modal,
  .modal-overlay.cerrando .modal {
    transition: opacity 100ms linear !important;
    transform: none !important;
  }
}
.modal header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--gris-borde);
}
.modal header h3 { font-size: 16px; font-weight: 640; letter-spacing: -.01em; color: var(--texto); }
.modal .cerrar {
  background: transparent; border: none; font-size: 22px; cursor: pointer;
  color: var(--texto-suave); padding: 0 6px;
}
.modal .cuerpo { padding: 18px; overflow-y: auto; flex: 1; }
.modal .pie {
  padding: 14px 18px; border-top: 1px solid var(--gris-borde);
  display: flex; justify-content: flex-end; gap: 8px;
}

/* === Recuperación de energía y agua por contrato === */
.rsvc-shell {
  --rsvc-ink: oklch(26% 0.035 244);
  --rsvc-muted: oklch(50% 0.025 244);
  --rsvc-line: oklch(91% 0.012 244);
  --rsvc-soft: oklch(97.5% 0.009 244);
  --rsvc-blue: oklch(53% 0.16 248);
  --rsvc-green: oklch(56% 0.12 156);
  color: var(--rsvc-ink);
}
.rsvc-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 18px;
}
.rsvc-header h2 {
  display: flex; align-items: center; gap: 9px;
  margin: 2px 0 5px; font-size: 22px; letter-spacing: -.025em;
}
.rsvc-header h2 .lc-icon { width: 21px; height: 21px; color: var(--azul); }
.rsvc-header p { margin: 0; color: var(--rsvc-muted); max-width: 68ch; font-size: 13px; }
.rsvc-eyebrow {
  color: var(--azul-oscuro); font-size: 10px; font-weight: 700;
  letter-spacing: .12em;
}
.rsvc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rsvc-actions .lc-icon, .rsvc-detail-actions .lc-icon,
.rsvc-import-actions .lc-icon { width: 14px; height: 14px; }

.rsvc-ledger {
  display: grid; grid-template-columns: repeat(3, minmax(155px, .75fr)) minmax(260px, 1.35fr);
  border: 1px solid var(--rsvc-line); border-radius: 11px;
  background: oklch(99% 0.004 244); overflow: hidden; margin-bottom: 16px;
}
.rsvc-ledger-cell {
  display: flex; gap: 10px; align-items: center; padding: 13px 15px;
  border-right: 1px solid var(--rsvc-line);
}
.rsvc-ledger-icon {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: oklch(95% 0.02 248); color: var(--rsvc-blue);
}
.rsvc-ledger-cell.emitido .rsvc-ledger-icon {
  background: oklch(95% 0.025 156); color: var(--rsvc-green);
}
.rsvc-ledger-cell.anulado .rsvc-ledger-icon {
  background: oklch(96% 0.018 22); color: oklch(52% .15 22);
}
.rsvc-ledger-icon .lc-icon { width: 16px; height: 16px; }
.rsvc-ledger-copy { display: flex; flex-direction: column; min-width: 0; }
.rsvc-ledger-copy small { color: var(--rsvc-muted); font-size: 10.5px; }
.rsvc-ledger-copy strong {
  margin: 1px 0; font-family: var(--font-mono); font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.rsvc-ledger-copy em { color: var(--rsvc-muted); font-size: 10px; font-style: normal; }
.rsvc-ledger-note {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  background: var(--rsvc-soft); color: var(--rsvc-muted); font-size: 11px;
}
.rsvc-ledger-note > .lc-icon { width: 18px; height: 18px; color: var(--azul); }
.rsvc-ledger-note span { display: flex; flex-direction: column; line-height: 1.35; }
.rsvc-ledger-note strong { color: var(--rsvc-ink); }

.rsvc-workspace {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(340px, .85fr);
  min-height: 520px; border: 1px solid var(--rsvc-line);
  border-radius: 11px; overflow: hidden; background: oklch(99% .004 244);
}
.rsvc-list-pane { min-width: 0; border-right: 1px solid var(--rsvc-line); }
.rsvc-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 13px 15px; border-bottom: 1px solid var(--rsvc-line);
  background: var(--rsvc-soft);
}
.rsvc-toolbar > div:first-child { display: flex; flex-direction: column; }
.rsvc-toolbar strong { font-size: 13px; }
.rsvc-toolbar span { color: var(--rsvc-muted); font-size: 10.5px; }
.rsvc-filter { display: flex; align-items: center; gap: 8px; }
.rsvc-filter label { font-size: 11px; color: var(--rsvc-muted); }
.rsvc-filter select {
  border: 1px solid var(--rsvc-line); border-radius: 7px;
  padding: 6px 26px 6px 9px; background: oklch(99% .004 244); font-size: 12px;
}
.rsvc-table { font-size: 11.5px; }
.rsvc-table tbody tr { cursor: pointer; outline: none; }
.rsvc-table tbody tr.seleccionada { background: oklch(96% .025 248); }
.rsvc-table tbody tr:focus-visible { box-shadow: inset 0 0 0 2px var(--azul); }
.rsvc-table td { vertical-align: middle; }
.rsvc-table td:first-child strong, .rsvc-preview-table td:first-child strong { display: block; }
.rsvc-table small, .rsvc-preview-table small, .rsvc-lines small {
  display: block; margin-top: 2px; color: var(--rsvc-muted); font-size: 10px;
}
.rsvc-service {
  display: inline-flex; align-items: center; gap: 3px; margin: 1px 3px 1px 0;
  padding: 2px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .03em;
  background: oklch(95% .025 248); color: oklch(42% .12 248);
}
.rsvc-service.agua { background: oklch(95% .035 220); color: oklch(42% .11 220); }
.rsvc-service .lc-icon { width: 10px; height: 10px; }
.rsvc-status {
  display: inline-flex; padding: 3px 7px; border-radius: 999px;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .035em;
}
.rsvc-status.borrador { background: oklch(95% .035 80); color: oklch(45% .1 72); }
.rsvc-status.emitida { background: oklch(94% .04 155); color: oklch(40% .11 155); }
.rsvc-status.anulada { background: oklch(95% .025 22); color: oklch(45% .14 22); }

.rsvc-detail-pane { min-width: 0; background: oklch(99% .004 244); }
.rsvc-detail-empty, .rsvc-empty {
  min-height: 300px; padding: 38px 24px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; color: var(--rsvc-muted);
}
.rsvc-detail-empty .lc-icon, .rsvc-empty .lc-icon {
  width: 30px; height: 30px; margin-bottom: 12px; color: oklch(67% .045 244);
}
.rsvc-detail-empty strong, .rsvc-empty strong { color: var(--rsvc-ink); font-size: 13px; }
.rsvc-detail-empty span, .rsvc-empty span { max-width: 38ch; margin-top: 4px; font-size: 11px; }
.rsvc-detail-loading {
  min-height: 170px; display: flex; align-items: center; justify-content: center;
  gap: 10px; color: var(--rsvc-muted); font-size: 12px;
}
.rsvc-detail-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding: 17px 18px 15px; border-bottom: 1px solid var(--rsvc-line);
}
.rsvc-detail-head h3 { margin: 7px 0 1px; font-size: 17px; letter-spacing: -.02em; }
.rsvc-detail-head p { margin: 0; color: var(--rsvc-muted); font-size: 11px; }
.rsvc-detail-head > strong {
  font-family: var(--font-mono); font-size: 16px; white-space: nowrap;
}
.rsvc-facts {
  display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 12px 18px;
  border-bottom: 1px solid var(--rsvc-line);
}
.rsvc-facts div { padding: 5px 8px 5px 0; }
.rsvc-facts .wide { grid-column: span 2; }
.rsvc-facts dt {
  margin-bottom: 2px; color: var(--rsvc-muted); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .055em;
}
.rsvc-facts dd { margin: 0; font-size: 11.5px; }
.rsvc-detail-section { padding: 13px 18px 0; }
.rsvc-detail-section h4 {
  display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 11.5px;
}
.rsvc-detail-section h4 .lc-icon { width: 14px; height: 14px; color: var(--azul); }
.rsvc-lines { font-size: 10.5px; }
.rsvc-lines td:first-child > span:last-child { display: block; margin-top: 3px; }
.rsvc-source-list { display: grid; gap: 6px; }
.rsvc-source-list > div {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px;
  padding: 8px 9px; border: 1px solid var(--rsvc-line); border-radius: 7px;
  background: var(--rsvc-soft); font-size: 10.5px;
}
.rsvc-source-list span { font-weight: 650; }
.rsvc-source-list small { color: var(--rsvc-muted); }
.rsvc-source-list code { grid-row: span 2; align-self: center; font-size: 9.5px; }
.rsvc-source-list em {
  grid-row: span 2; align-self: center; color: oklch(50% .12 65);
  font-size: 9.5px; font-style: normal;
}
.rsvc-entry {
  margin: 14px 18px; border: 1px solid oklch(87% .025 248);
  border-radius: 8px; overflow: hidden;
}
.rsvc-entry-title {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 10px; background: oklch(96% .02 248);
  font-size: 10.5px;
}
.rsvc-entry-title span { display: flex; align-items: center; gap: 5px; font-weight: 700; }
.rsvc-entry-title .lc-icon { width: 13px; height: 13px; color: var(--azul); }
.rsvc-entry-title small { color: var(--rsvc-muted); }
.rsvc-entry-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 10px; border-top: 1px solid var(--rsvc-line); font-size: 10.5px;
}
.rsvc-entry-row span { display: flex; flex-direction: column; }
.rsvc-entry-row strong { color: var(--rsvc-muted); font-size: 9px; text-transform: uppercase; }
.rsvc-entry-row b { font-family: var(--font-mono); white-space: nowrap; }
.rsvc-detail-actions {
  display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap;
  padding: 0 18px 18px;
}

.rsvc-import {
  margin-bottom: 16px; border: 1px solid oklch(84% .035 248);
  border-radius: 11px; background: oklch(99% .004 244); overflow: hidden;
  animation: rsvc-reveal 180ms cubic-bezier(.23,1,.32,1);
}
@keyframes rsvc-reveal {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
.rsvc-import-head, .rsvc-preview-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; padding: 16px 18px; border-bottom: 1px solid var(--rsvc-line);
}
.rsvc-import-head span, .rsvc-preview-head span {
  color: var(--azul-oscuro); font-size: 9.5px; font-weight: 750; letter-spacing: .1em;
}
.rsvc-import-head h3, .rsvc-preview-head h3 {
  margin: 3px 0; font-size: 15px; letter-spacing: -.015em;
}
.rsvc-import-head p, .rsvc-preview-head p { margin: 0; color: var(--rsvc-muted); font-size: 11px; }
.rsvc-icon-btn {
  width: 30px; height: 30px; border: 1px solid var(--rsvc-line); border-radius: 7px;
  background: oklch(99% .004 244); color: var(--rsvc-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.rsvc-icon-btn:hover { color: var(--rsvc-ink); background: var(--rsvc-soft); }
.rsvc-icon-btn .lc-icon { width: 15px; height: 15px; }
.rsvc-import-grid {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(230px, .75fr);
  gap: 16px; padding: 16px 18px;
}
.rsvc-date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rsvc-drop {
  min-height: 118px; border: 1px dashed oklch(72% .05 248); border-radius: 9px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px; text-align: center; cursor: pointer; background: var(--rsvc-soft);
  transition: border-color 160ms cubic-bezier(.23,1,.32,1), background 160ms cubic-bezier(.23,1,.32,1);
}
.rsvc-drop:hover { border-color: var(--azul); background: oklch(96% .02 248); }
.rsvc-drop input { position: absolute; opacity: 0; pointer-events: none; }
.rsvc-drop .lc-icon { width: 23px; height: 23px; color: var(--azul); margin-bottom: 7px; }
.rsvc-drop strong { font-size: 11.5px; }
.rsvc-drop span { margin-top: 3px; color: var(--rsvc-muted); font-size: 10px; }
.rsvc-import-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--rsvc-line); background: var(--rsvc-soft);
}
.rsvc-preview-head { border-top: 1px solid var(--rsvc-line); }
.rsvc-preview-total { text-align: right; }
.rsvc-preview-total small { display: block; color: var(--rsvc-muted); font-size: 10px; }
.rsvc-preview-total strong { font-family: var(--font-mono); font-size: 17px; }
.rsvc-preview-table { font-size: 11px; margin: 0; }
.rsvc-messages { margin: 12px 18px; border: 1px solid; border-radius: 8px; overflow: hidden; }
.rsvc-messages.warning { border-color: oklch(84% .07 78); background: oklch(97% .025 78); }
.rsvc-messages.error { border-color: oklch(84% .06 22); background: oklch(97% .02 22); }
.rsvc-messages h4 {
  display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 10px;
  border-bottom: 1px solid currentColor; font-size: 11px;
}
.rsvc-messages h4 .lc-icon { width: 13px; height: 13px; }
.rsvc-messages > div {
  display: grid; grid-template-columns: 58px 1fr; gap: 8px;
  padding: 6px 10px; font-size: 10.5px;
}
.rsvc-messages > div + div { border-top: 1px solid rgba(90, 70, 30, .12); }

.rsvc-skeleton {
  border-radius: 10px; background: oklch(94% .01 244);
  animation: dash-skel-pulse 1.4s ease-in-out infinite;
}
.rsvc-skeleton-head { width: 52%; height: 52px; margin-bottom: 18px; }
.rsvc-skeleton-strip { height: 72px; margin-bottom: 16px; }
.rsvc-skeleton-body { height: 500px; }

@media (max-width: 1120px) {
  .rsvc-ledger { grid-template-columns: repeat(3, 1fr); }
  .rsvc-ledger-note { grid-column: span 3; }
  .rsvc-workspace { grid-template-columns: minmax(0, 1.3fr) minmax(310px, .8fr); }
}
@media (max-width: 860px) {
  .rsvc-header { flex-direction: column; }
  .rsvc-ledger { grid-template-columns: 1fr; }
  .rsvc-ledger-cell { border-right: 0; border-bottom: 1px solid var(--rsvc-line); }
  .rsvc-ledger-note { grid-column: auto; }
  .rsvc-workspace { grid-template-columns: 1fr; }
  .rsvc-list-pane { border-right: 0; }
  .rsvc-detail-pane { border-top: 1px solid var(--rsvc-line); }
  .rsvc-import-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rsvc-date-grid, .rsvc-facts { grid-template-columns: 1fr; }
  .rsvc-facts .wide { grid-column: auto; }
  .rsvc-toolbar { align-items: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .rsvc-import { animation: none; }
  .rsvc-drop { transition: none; }
}

/* ============================================================
   REDISEÑO DASHBOARDS — tokens y componentes nuevos
   Solo añade, no sobreescribe nada existente.
   ============================================================ */

/* --- Curvas de animación (Emil Kowalski's design eng) --- */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 160ms;
  --dur-hover: 160ms;
  --dur-card: 320ms;
  --azul-suave-bg: rgba(0,115,207,0.06);
  --azul-suave-ring: rgba(0,115,207,0.15);
}

/* --- Foco accesible global (no rompe nada: solo afecta a focus-visible) --- */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Variantes faltantes de .kpi --- */
.kpi.neutro { border-left-color: var(--texto-suave); }
.kpi.azul   { border-left-color: var(--azul); }
.kpi.cyan   { border-left-color: #06b6d4; }
.kpi.naranja{ border-left-color: #fb923c; }
.kpi .icono-top {
  float: right; font-size: 18px; line-height: 1; opacity: 0.7;
}
.kpi .detalle.alerta { color: var(--rojo); }
.kpi .detalle.exito  { color: var(--verde); }

/* --- Stagger animation para KPIs y cards del dashboard --- */
@keyframes kpi-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.dash-stagger > * {
  animation: kpi-in var(--dur-card) var(--ease-out) backwards;
}
.dash-stagger > *:nth-child(1) { animation-delay: 0ms;   }
.dash-stagger > *:nth-child(2) { animation-delay: 40ms;  }
.dash-stagger > *:nth-child(3) { animation-delay: 80ms;  }
.dash-stagger > *:nth-child(4) { animation-delay: 120ms; }
.dash-stagger > *:nth-child(5) { animation-delay: 160ms; }
.dash-stagger > *:nth-child(6) { animation-delay: 200ms; }
.dash-stagger > *:nth-child(7) { animation-delay: 240ms; }
.dash-stagger > *:nth-child(8) { animation-delay: 280ms; }
.dash-stagger > *:nth-child(9) { animation-delay: 320ms; }

/* --- Skeleton de carga --- */
@keyframes dash-skel-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.dash-skeleton {
  background: linear-gradient(180deg, #eef1f6, #e0e6ef);
  border-radius: 12px;
  animation: dash-skel-pulse 1.4s ease-in-out infinite;
}
.dash-skeleton.kpi-skel { height: 96px; }
.dash-skeleton.card-skel { height: 260px; }

/* --- Hero ejecutivo del dashboard: la cara del sistema ---
   Navy corporativo + hairline dorado (paleta de marca ContaHN).
   Saludo personalizado + identidad de la empresa + período activo. */
.dash-band {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 20px 24px; margin-bottom: 18px;
  background:
    radial-gradient(900px 260px at 88% -60%, rgba(0,115,207,0.45), transparent 65%),
    radial-gradient(600px 200px at 8% 130%, rgba(212,175,55,0.10), transparent 60%),
    linear-gradient(135deg, var(--navy) 0%, #0e3a63 58%, var(--azul-oscuro) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  color: #fff;
  box-shadow: 0 12px 32px -14px rgba(11,37,64,0.55);
}
.dash-band::after {
  /* Hairline dorado superior — sello de marca */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.5px;
  background: linear-gradient(90deg, transparent, var(--dorado) 25%, var(--dorado-claro) 50%, var(--dorado) 75%, transparent);
  opacity: 0.95;
}
.dash-band .ctx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash-band .saludo {
  font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.72);
  letter-spacing: 0.2px;
}
.dash-band .empresa {
  font-weight: 700; color: #fff; font-size: 19px;
  letter-spacing: -0.3px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-band .meta-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; color: rgba(255,255,255,0.6);
}
.dash-band .meta-row strong {
  color: rgba(255,255,255,0.92); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dash-band .meta-row .sep { opacity: 0.45; }
.dash-band .periodo-chip {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, var(--dorado-claro), var(--dorado));
  color: var(--navy);
  padding: 7px 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px;
  box-shadow: 0 3px 10px -2px rgba(212,175,55,0.5);
}
.dash-band .emp-logo {
  width: 58px; height: 58px; border-radius: 12px;
  object-fit: contain; background: #fff; padding: 5px;
  border: none; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 4px 12px rgba(0,0,0,0.25);
}
.dash-band .emp-logo-iniciales {
  width: 58px; height: 58px; border-radius: 12px;
  background: #fff; color: var(--azul-oscuro);
  font-weight: 800; font-size: 20px; letter-spacing: -0.5px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 4px 12px rgba(0,0,0,0.25);
}
@media (max-width: 700px) {
  .dash-band { padding: 16px; gap: 12px; }
  .dash-band .empresa { font-size: 16px; white-space: normal; }
  .dash-band .periodo-chip { margin-left: 0; }
}

/* === KPIs del dashboard: alineación de "L." con el número ===
   Override scoped a #dash-kpis para no afectar otros módulos que usan .kpi
   (flujo_caja, etc. — se ajustarán en su propia pasada). */
#dash-kpis .kpi-grid {
  /* Más ancho mínimo para que entre "L. X,XXX,XXX.XX" en una línea */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
#dash-kpis .kpi {
  position: relative;
}
#dash-kpis .kpi .valor {
  /* No partir el número en dos líneas; alinearlo monospace */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
#dash-kpis .kpi .etiqueta {
  /* Más aire entre etiqueta y valor */
  margin-bottom: 8px;
}

/* --- Accesos rápidos: panel + botones --- */
.accesos-panel {
  background: #fff; border: 1px solid var(--gris-borde); border-radius: 12px;
  padding: 13px 15px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.accesos-panel .titulo-acc {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.accesos-panel .titulo-acc h4 {
  font-size: 13px; font-weight: 600; color: var(--azul-oscuro); margin: 0;
}
.accesos-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
/* Tiles silenciosos y corporativos: fondo blanco, ícono en chip tintado
   con el color de la acción. El color aparece con intención (ícono + ring
   al hover), no gritando desde el fondo. */
.acceso-rapido {
  --acc-color: var(--azul);
  background: #fff; color: var(--texto);
  border: 1px solid var(--gris-borde); border-radius: 12px;
  padding: 14px 10px 12px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-weight: 600; font-size: 12px;
  transition: transform var(--dur-hover) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}
.acceso-rapido .icono {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--acc-color) 12%, #fff);
  color: var(--acc-color);
  transition: transform var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .acceso-rapido:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--acc-color) 45%, var(--gris-borde));
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--acc-color) 40%, transparent);
  }
  .acceso-rapido:hover .icono { transform: scale(1.08); }
}
.acceso-rapido:active { transform: scale(0.97); transition-duration: 100ms; }
/* Fallback si color-mix no se soporta (browsers viejos) */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .acceso-rapido .icono { background: var(--azul-claro); }
  .acceso-rapido:hover { border-color: var(--acc-color); }
}

/* --- Filas clickeables (buckets, top 5 clientes/proveedores) --- */
.bucket-row, .top5-row {
  appearance: none; border: none; background: transparent;
  width: 100%; text-align: left;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
  display: block; margin-bottom: 4px;
  color: inherit; font: inherit;
  transition: background var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .bucket-row:hover, .top5-row:hover { background: var(--gris-claro); }
}
.bucket-row:active, .top5-row:active { transform: scale(0.99); transition-duration: 100ms; }
.bucket-row .bucket-head, .top5-row .top5-head {
  display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 2px;
}
.bucket-row .swatch, .top5-row .swatch {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  vertical-align: middle; margin-right: 4px;
}
.bucket-row .barra, .top5-row .barra {
  height: 6px; background: var(--gris); border-radius: 3px; overflow: hidden;
}
.bucket-row .barra > span, .top5-row .barra > span {
  display: block; height: 100%; border-radius: 3px;
  transition: width var(--dur-card) var(--ease-out);
}

/* --- Cards de gráficos del dashboard (Balance, ER, CxC, CxP) --- */
.dash-card {
  background: #fff; border-radius: 10px; padding: 16px;
  box-shadow: var(--shadow); border: 1px solid var(--gris-borde);
}
.dash-card .dash-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 14px; gap: 8px;
}
.dash-card .dash-card-head h3 {
  margin: 0; color: var(--texto); font-size: 15px; font-weight: 600;
}
.dash-card .dash-card-head .sub {
  font-size: 11px; color: var(--texto-suave); margin-top: 2px;
}
.dash-card .seccion-label {
  font-size: 11px; color: var(--texto-suave); text-transform: uppercase;
  letter-spacing: 0.5px; font-weight: 600; margin-bottom: 6px;
}
.dash-card .barra-prop {
  height: 28px; display: flex; border-radius: 6px; overflow: hidden;
  background: var(--gris); margin-bottom: 10px;
}
.dash-card .barra-prop > span {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 600;
  transition: width var(--dur-card) var(--ease-out);
}
.dash-card .leyenda { display: flex; gap: 14px; font-size: 11px; flex-wrap: wrap; margin-bottom: 14px; }
.dash-card .leyenda strong { color: var(--texto); }
.dash-card .estado-cuadra {
  padding: 10px; border-radius: 6px; text-align: center;
  font-size: 12px; font-weight: 600;
}
.dash-card .estado-cuadra.ok  { background: #dcfce7; color: #14532d; }
.dash-card .estado-cuadra.err { background: #fee2e2; color: #991b1b; }

.dash-card .er-resumen {
  background: var(--gris-claro); padding: 12px; border-radius: 6px;
  font-size: 12px;
}
.dash-card .er-resumen .linea {
  display: flex; justify-content: space-between; padding: 4px 0;
}
.dash-card .er-resumen .linea.sub  { border-top: 1px dashed var(--gris-borde); }
.dash-card .er-resumen .linea.total {
  border-top: 1px solid var(--gris-borde);
  margin-top: 4px; padding-top: 6px;
  font-size: 14px; font-weight: 700;
}
.dash-card .er-resumen .linea.total.pos span:last-child { color: var(--verde); }
.dash-card .er-resumen .linea.total.neg span:last-child { color: var(--rojo); }

.dash-card .margen-chips {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  margin-top: 10px;
}
.dash-card .chip-margen {
  padding: 8px; border-radius: 6px; text-align: center;
  background: var(--azul-claro);
}
.dash-card .chip-margen.pos { background: #dcfce7; }
.dash-card .chip-margen.neg { background: #fee2e2; }
.dash-card .chip-margen .et { font-size: 10px; text-transform: uppercase; color: var(--azul-oscuro); }
.dash-card .chip-margen.pos .et { color: #14532d; }
.dash-card .chip-margen.neg .et { color: #991b1b; }
.dash-card .chip-margen .vl { font-size: 16px; font-weight: 700; color: var(--azul-oscuro); }
.dash-card .chip-margen.pos .vl { color: #14532d; }
.dash-card .chip-margen.neg .vl { color: #991b1b; }

/* --- Tira de alertas --- */
.alertas-strip h3 {
  color: var(--navy); font-size: 14px; font-weight: 700;
  letter-spacing: -0.1px; margin: 20px 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.alertas-strip h3 .h-ico {
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fef3c7; color: #b45309;
}
.alertas-strip .grid-alertas {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.alertas-strip .card-alerta {
  background: #fff; border: 1px solid var(--gris-borde);
  border-left-width: 3px;
  border-radius: 10px; padding: 14px; box-shadow: var(--shadow);
}
.alertas-strip .card-alerta h4 {
  margin: 0 0 10px; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; gap: 7px;
}
.alertas-strip .card-alerta h4 .lc-mini {
  width: 15px; height: 15px; flex-shrink: 0;
}
.alertas-strip .card-alerta.tono-rojo { border-left-color: var(--rojo); }
.alertas-strip .card-alerta.tono-amarillo { border-left-color: var(--amarillo); }
.alertas-strip .card-alerta.tono-verde { border-left-color: var(--verde); }
.alertas-strip .card-alerta.tono-rojo h4 { color: var(--rojo); }
.alertas-strip .card-alerta.tono-amarillo h4 { color: #b45309; }
.alertas-strip .card-alerta.tono-verde h4 { color: #15803d; }
.alertas-strip .item-alerta {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--gris-claro);
  appearance: none; background: transparent; border-left: none; border-right: none;
  border-top: none; width: 100%; text-align: left; cursor: pointer;
  color: inherit; font-family: inherit;
  transition: background var(--dur-hover) var(--ease-out);
}
.alertas-strip .item-alerta:last-child { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
  .alertas-strip .item-alerta:hover { background: var(--gris-claro); }
}
.alertas-strip .item-alerta .nombre { flex: 1; min-width: 0; }
.alertas-strip .item-alerta .nombre .ref { font-weight: 600; }
.alertas-strip .item-alerta .nombre .meta {
  font-size: 11px; color: var(--texto-suave); margin-top: 2px;
}
.alertas-strip .item-alerta .nombre .meta.urg { color: var(--rojo); }
.alertas-strip .item-alerta .nombre .meta.prox { color: var(--amarillo); }
.alertas-strip .item-alerta .monto { font-weight: 600; }
.alertas-strip .sin-alertas {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 1px solid #bbf7d0;
  color: #14532d; font-weight: 600;
  padding: 14px; border-radius: 12px; text-align: center; font-size: 13px;
}

/* ============================================================
   SELECTOR DE EMPRESA POST-LOGIN
   Pantalla intermedia entre login y dashboard.
   ============================================================ */

/* Modo selector: oculta sidebar para una pantalla limpia tipo wizard.
   El header global queda visible pero solo con marca + usuario;
   empresa y período se ocultan porque el usuario aún no ha confirmado
   con qué compañía va a trabajar. */
body.modo-selector aside.sidebar { display: none; }
body.modo-selector .sidebar-overlay { display: none !important; }
body.modo-selector #header-empresa,
body.modo-selector #header-periodo {
  display: none !important;
}
body.modo-selector main.contenido {
  max-width: 980px; margin: 0 auto;
  padding: 32px 20px;
}

.selector-wrap {
  display: flex; flex-direction: column; gap: 24px;
}

.selector-hero {
  text-align: center; margin-bottom: 8px;
}
.selector-hero h1 {
  font-size: 28px; color: var(--texto); margin: 0 0 6px;
  font-weight: 700; letter-spacing: -0.5px;
}
.selector-hero .sub {
  color: var(--texto-suave); font-size: 14px; margin: 0;
}

.selector-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
}
.selector-grid.selector-grid-solo {
  grid-template-columns: 1fr;
  max-width: 480px; margin: 0 auto;
}
@media (max-width: 700px) {
  .selector-grid { grid-template-columns: 1fr; }
}

.card-empresa {
  appearance: none; border: 1px solid var(--gris-borde);
  background: #fff; border-radius: 14px;
  padding: 28px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  cursor: pointer; text-align: center;
  color: inherit; font: inherit;
  box-shadow: var(--shadow);
  transition: transform var(--dur-hover) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.card-empresa::before {
  content: "";
  position: absolute; left: 0; top: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--azul), var(--azul-oscuro));
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-out);
}
.card-empresa.destacada::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .card-empresa:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.10);
    border-color: var(--azul);
  }
  .card-empresa:hover::before { opacity: 1; }
}
.card-empresa:active { transform: scale(0.985); transition-duration: 100ms; }

.card-empresa .card-label {
  font-size: 10px; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}
.card-empresa.destacada .card-label { color: var(--azul); }

.card-empresa .card-titulo {
  font-size: 18px; font-weight: 700; color: var(--texto);
  margin: 4px 0 0; max-width: 100%; word-break: break-word;
}
.card-empresa .card-rtn {
  font-size: 12px; color: var(--texto-suave);
}
.card-empresa .card-cta {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--gris-borde);
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--azul-oscuro);
}
.card-empresa.crear .card-cta { color: var(--azul); }
.card-empresa .kbd {
  background: var(--gris); border: 1px solid var(--gris-borde);
  border-radius: 4px; padding: 1px 6px;
  font-size: 11px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  color: var(--texto-suave);
}

.sel-logo {
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
}
.sel-logo-lg { width: 72px; height: 72px; border: 1px solid var(--gris-borde); padding: 4px; }
.sel-logo-sm { width: 36px; height: 36px; border: 1px solid var(--gris-borde); padding: 2px; }
.sel-logo-iniciales {
  background: linear-gradient(135deg, var(--azul), var(--azul-oscuro));
  color: #fff; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; padding: 0;
}
.sel-logo-iniciales.sel-logo-lg { font-size: 26px; }
.sel-logo-iniciales.sel-logo-sm { font-size: 13px; }

.card-empresa.crear .card-icono-grande {
  width: 72px; height: 72px; border-radius: 10px;
  background: var(--azul-claro); color: var(--azul);
  font-size: 42px; font-weight: 300; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}

/* "Otras empresas" — dropdown searchable (escalable a 50+ empresas) */
.otras-empresas {
  margin-top: 8px;
}
.otras-dropdown {
  background: #fff; border: 1px solid var(--gris-borde);
  border-radius: 10px; box-shadow: var(--shadow);
  overflow: hidden;
}
.otras-dropdown > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: var(--texto);
  user-select: none;
  transition: background var(--dur-hover) var(--ease-out);
}
.otras-dropdown > summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .otras-dropdown > summary:hover { background: var(--gris-claro); }
}
.otras-dropdown[open] > summary {
  border-bottom: 1px solid var(--gris-borde);
  background: var(--gris-claro);
}
.otras-summary-text { display: inline-flex; align-items: center; gap: 8px; }
.otras-count {
  color: var(--texto-suave); font-weight: 500; font-size: 12px;
}
.otras-chevron {
  font-size: 14px; color: var(--texto-suave);
  transition: transform var(--dur-hover) var(--ease-out);
}
.otras-dropdown[open] .otras-chevron { transform: rotate(180deg); }

.otras-panel {
  padding: 12px 14px 14px;
  max-height: 380px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
}
.otras-buscar {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--gris-borde); border-radius: 8px;
  font-size: 13px; font-family: inherit;
  background: #fff;
  transition: border-color var(--dur-hover) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out);
}
.otras-buscar:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--azul-suave-ring);
}
.otras-lista {
  display: grid; gap: 6px;
}
.otras-sin-resultados {
  padding: 18px 12px; text-align: center;
  color: var(--texto-suave); font-size: 12px;
  font-style: italic;
}
/* Scrollbar fino para la lista */
.otras-panel::-webkit-scrollbar { width: 8px; }
.otras-panel::-webkit-scrollbar-track { background: transparent; }
.otras-panel::-webkit-scrollbar-thumb {
  background: rgba(107,114,128,0.25); border-radius: 4px;
}
.otras-panel::-webkit-scrollbar-thumb:hover { background: rgba(107,114,128,0.45); }
.card-empresa-chip {
  appearance: none; border: 1px solid transparent;
  background: transparent; border-radius: 8px;
  padding: 8px 10px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; text-align: left;
  color: inherit; font: inherit;
  transition: background var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .card-empresa-chip:hover {
    background: var(--azul-claro);
    border-color: var(--azul);
  }
}
.card-empresa-chip:active { transform: scale(0.99); transition-duration: 100ms; }
.card-empresa-chip[hidden] { display: none; }
.card-empresa-chip .chip-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.card-empresa-chip .chip-nombre {
  font-size: 13px; font-weight: 600; color: var(--texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-empresa-chip .chip-rtn {
  font-size: 11px; color: var(--texto-suave);
}

/* === Variantes adicionales agregadas durante la pasada de reportes ===
   Necesarias para que indicadores.js y flujo_caja.js usen clases en vez
   de styles inline. */

/* Chip para etiquetar el origen de un movimiento de flujo de caja (ej. "factura", "cheque", "pago"). */
.tag.origen { background: var(--azul-claro); color: var(--azul-oscuro); }

/* === Indicadores Financieros (vista-razones) === */
.ind-encabezado {
  text-align: center; margin-bottom: 18px;
}
.ind-encabezado strong { font-size: 16px; color: var(--texto); }
.ind-encabezado-sub { font-size: 13px; color: var(--texto-suave); }

.ind-resumen-grid {
  display: flex; gap: 10px; justify-content: center;
  margin-bottom: 20px; flex-wrap: wrap;
}
.ind-resumen-chip {
  border-radius: 8px; padding: 10px 18px; text-align: center; min-width: 90px;
  border: 1px solid transparent;
}
.ind-resumen-chip .chip-valor { font-size: 24px; font-weight: 700; }
.ind-resumen-chip .chip-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
}
.ind-resumen-chip.chip-verde    { background: #d1fae5; border-color: var(--verde); color: #065f46; }
.ind-resumen-chip.chip-amarillo { background: #fef3c7; border-color: var(--amarillo); color: #92400e; }
.ind-resumen-chip.chip-rojo     { background: #fee2e2; border-color: var(--rojo); color: #991b1b; }
.ind-resumen-chip.chip-neutro   { background: var(--gris); border-color: var(--texto-suave); color: #374151; }

.ind-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 800px) {
  .ind-grid { grid-template-columns: 1fr; }
}
.ind-seccion { margin-bottom: 18px; }
.ind-seccion h3 {
  margin: 0 0 10px; color: var(--azul-oscuro);
  border-bottom: 2px solid var(--azul-claro); padding-bottom: 4px;
  font-size: 15px;
}

/* Tarjeta de indicador individual — extiende .kpi con info colapsable */
.kpi .ind-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
}
.kpi .ind-card-titulo { flex: 1; min-width: 0; }
.kpi .ind-valor-grande {
  font-size: 26px; font-weight: 700; margin-top: 4px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}
.kpi.verde    .ind-valor-grande { color: #065f46; }
.kpi.amarillo .ind-valor-grande { color: #92400e; }
.kpi.rojo     .ind-valor-grande { color: #991b1b; }
.kpi.neutro   .ind-valor-grande { color: #374151; }

.kpi .ind-card-detalle {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--gris-borde);
  font-size: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.kpi .ind-card-detalle code.ind-formula {
  background: rgba(0,0,0,0.04);
  padding: 2px 6px; border-radius: 3px; font-size: 11px;
}
.kpi .ind-valores-bloque {
  background: rgba(0,0,0,0.03);
  padding: 6px 10px; border-radius: 4px;
}
.kpi .ind-valor-row {
  display: flex; justify-content: space-between;
  font-size: 11px; padding: 2px 0;
}
.kpi .ind-valor-row .num {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.ind-disclaimer {
  margin-top: 18px; padding: 10px;
  background: var(--gris-claro); border-radius: 6px;
  font-size: 12px; color: var(--texto-suave);
}

/* === Flujo de Efectivo (vista-flujo-caja) === */
.fc-encabezado { text-align: center; margin-bottom: 18px; }
.fc-encabezado strong { font-size: 18px; color: var(--texto); }
.fc-encabezado-titulo { font-size: 14px; color: var(--texto); }
.fc-encabezado-sub { font-size: 13px; color: var(--texto-suave); }

.fc-cuerpo { max-width: 880px; margin: 0 auto; }

.fc-seccion-titulo {
  color: var(--azul-oscuro);
  margin-top: 14px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--fc-color, var(--azul));
  font-size: 14px;
}

/* Actividad (Operación/Inversión/Financiamiento/No clasificado) — un <details> por concepto */
.fc-actividad {
  margin: 4px 0;
  border-radius: 6px;
  transition: background var(--dur-hover) var(--ease-out);
}
.fc-actividad > summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 8px 6px 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 13px;
  border-radius: 6px;
  transition: background var(--dur-hover) var(--ease-out);
}
.fc-actividad > summary::-webkit-details-marker { display: none; }
.fc-actividad > summary::before {
  content: "▸";
  display: inline-block;
  color: var(--texto-suave);
  font-size: 11px;
  margin-right: 4px;
  transition: transform var(--dur-hover) var(--ease-out);
}
.fc-actividad[open] > summary::before { transform: rotate(90deg); }
@media (hover: hover) and (pointer: fine) {
  .fc-actividad > summary:hover { background: var(--gris-claro); }
}
.fc-actividad .fc-summary-info {
  display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
}
.fc-actividad .fc-summary-info > span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Asientos dentro del detalle de una actividad */
.fc-asientos {
  margin-left: 30px;
  font-size: 11px; color: var(--texto-suave);
  padding: 4px 0;
  display: flex; flex-direction: column; gap: 2px;
}
.fc-asiento-row {
  display: flex; justify-content: space-between;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .fc-asiento-row:hover { background: var(--azul-claro); }
}
.fc-asiento-row:active { transform: scale(0.99); transition-duration: 80ms; }
.fc-asiento-row .fc-asiento-num {
  color: var(--azul); font-weight: 600;
}

/* Colores semánticos para números pos/neg en .num */
.num.pos { color: var(--verde); }
.num.neg { color: var(--rojo); }

/* Variantes especiales del .linea-resumen.total para flujo de caja */
.linea-resumen.total.fc-variacion {
  margin-top: 14px;
}
.linea-resumen.total.fc-variacion.pos {
  background: var(--verde); color: #fff;
}
.linea-resumen.total.fc-variacion.neg {
  background: var(--rojo); color: #fff;
}
.linea-resumen.total.fc-variacion .num { color: #fff; }
.linea-resumen.total.fc-saldo-final {
  background: var(--azul); color: #fff;
}
.linea-resumen.total.fc-saldo-final .num { color: #fff; }

.fc-hint {
  font-size: 11px; color: var(--texto-suave);
  margin-top: 6px; text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .fc-actividad, .fc-actividad > summary,
  .fc-actividad > summary::before,
  .fc-asiento-row {
    animation: none !important;
    transition: none !important;
  }
}

/* Variante "neutro" del total de línea-resumen: para encabezados de sección
   que no son ni el total final azul ni un subtotal gris. Ej: "Saldo inicial"
   del flujo de caja. */
.linea-resumen.total.neutro {
  background: var(--gris);
  color: var(--texto);
}

/* Fila clickeable en tablas (indica que la fila lleva a otro lado).
   Visual: borde izquierdo azul que aparece en hover.
   Usado por flujo_caja.js en la tabla de composición de efectivo. */
table.tabla tr.clickeable {
  cursor: pointer;
  position: relative;
  transition: background var(--dur-hover) var(--ease-out);
}
table.tabla tr.clickeable td:first-child {
  border-left: 3px solid transparent;
  transition: border-left-color var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  table.tabla tr.clickeable:hover td:first-child {
    border-left-color: var(--azul);
  }
}

/* ============================================================
 * POS FULLSCREEN — Modo pantalla completa para Punto de Venta.
 * Rediseño inspirado en Square / Shopify POS:
 *   - Tema claro (light) en vez de oscuro — moderno SaaS feel
 *   - Tiles de producto con avatar por inicial color-hash
 *   - Mucho whitespace, tipografía bold
 *   - Carrito con touch targets grandes (apto pantalla táctil)
 *   - Botón "Cobrar" prominent verde Square-style
 *   - Categorías como pills horizontales scrollables
 * ============================================================ */
body.pos-fullscreen header.top,
body.pos-fullscreen aside.sidebar,
body.pos-fullscreen #app-footer {
  display: none !important;
}
body.pos-fullscreen .layout {
  height: 100vh;
}
body.pos-fullscreen main.contenido {
  padding: 0;
  height: 100vh;
  overflow: hidden;
  background: #f4f6f8;
}

/* Layout interno: catálogo a la izquierda, carrito a la derecha */
.pos-pro {
  display: grid;
  grid-template-columns: 1fr 440px;
  grid-template-rows: 60px 1fr;
  height: 100vh;
  background: #f4f6f8;
  color: #0e1a2b;
  gap: 0;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ============ Header ============ */
.pos-pro-header {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: #ffffff;
  border-bottom: 1px solid #e4e9f0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.pos-pro-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0e1a2b;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pos-pro-header .badge-sesion {
  background: #ecfdf5;
  color: #047857;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #a7f3d0;
}
.pos-pro-header button {
  background: #f9fafb;
  color: #374151;
  border: 1px solid #e4e9f0;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 120ms;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pos-pro-header button:hover {
  background: #f0f3f8;
  border-color: #d1d5db;
}
.pos-pro-header button.peligro {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}
.pos-pro-header button.peligro:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}
.pos-pro-header .salir {
  background: #0e1a2b;
  color: #ffffff;
  border-color: #0e1a2b;
}
.pos-pro-header .salir:hover {
  background: #0e1a2b;
}

/* ============ Panel izquierdo: catálogo ============ */
.pos-catalogo {
  padding: 18px 20px;
  overflow-y: auto;
  background: #f4f6f8;
}
.pos-buscar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.pos-buscar input {
  flex: 1;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 500;
  border: 1px solid #e4e9f0;
  border-radius: 12px;
  background: #ffffff;
  color: #0e1a2b;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: all 140ms;
}
.pos-buscar input::placeholder {
  color: #8492a6;
  font-weight: 400;
}
.pos-buscar input:focus {
  outline: none;
  border-color: #0073cf;
  box-shadow: 0 0 0 3px rgba(0,115,207,0.12);
}

/* Categorías: pills horizontales con scroll */
.pos-categorias {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 16px;
  padding: 2px 0 6px;
  scrollbar-width: thin;
}
.pos-categorias::-webkit-scrollbar { height: 4px; }
.pos-categorias::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }
.pos-cat-btn {
  background: #ffffff;
  color: #4b5563;
  border: 1px solid #e4e9f0;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 120ms;
  white-space: nowrap;
  flex-shrink: 0;
}
.pos-cat-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
.pos-cat-btn.activa {
  background: #0e1a2b;
  color: #ffffff;
  border-color: #0e1a2b;
}

/* Grid de productos — tiles tipo Square */
.pos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.pos-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  transition: transform 100ms cubic-bezier(0.23,1,0.32,1),
              box-shadow 100ms cubic-bezier(0.23,1,0.32,1),
              border-color 100ms;
  text-align: left;
  border: 1px solid #e4e9f0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 140px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.pos-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  border-color: #d1d5db;
}
.pos-card:active {
  transform: scale(0.98) translateY(0);
  transition-duration: 60ms;
}
/* Avatar: cuadrado de color con la inicial centrada */
.pos-card .avatar {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #0073cf;     /* override inline por color-hash */
  position: relative;
}
.pos-card .avatar .servicio-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.pos-card .cuerpo {
  padding: 8px 12px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pos-card .codigo {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 10px;
  color: #8492a6;
  font-weight: 500;
}
.pos-card .nombre {
  font-size: 13px;
  font-weight: 600;
  color: #0e1a2b;
  margin: 2px 0 6px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.pos-card .precio {
  font-size: 16px;
  font-weight: 700;
  color: #0e1a2b;
}
.pos-card .stock {
  font-size: 10px;
  color: #5b6b82;
  margin-top: 2px;
  font-weight: 500;
}
.pos-card.sin-stock {
  opacity: 0.5;
  cursor: not-allowed;
}
.pos-card.sin-stock .avatar { filter: grayscale(0.6); }

/* ============ Panel derecho: carrito ============ */
.pos-carrito {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid #e4e9f0;
  box-shadow: -2px 0 6px rgba(0,0,0,0.03);
}
.pos-carrito-header {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f3f8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pos-carrito-header strong {
  font-size: 15px;
  color: #0e1a2b;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pos-carrito-header .vaciar {
  background: transparent;
  color: #5b6b82;
  border: 1px solid #e4e9f0;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 120ms;
}
.pos-carrito-header .vaciar:hover {
  color: #dc3350;
  border-color: #fecaca;
  background: #fef2f2;
}
.pos-carrito-items {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.pos-carrito-vacio {
  text-align: center;
  color: #8492a6;
  padding: 60px 24px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pos-carrito-vacio::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  background: #f0f3f8;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.pos-carrito-item {
  padding: 12px 20px;
  border-bottom: 1px solid #f0f3f8;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  transition: background 100ms;
}
.pos-carrito-item:hover { background: #fafbfc; }
.pos-carrito-item .descripcion {
  font-size: 14px;
  font-weight: 600;
  color: #0e1a2b;
  grid-column: 1 / -1;
  line-height: 1.3;
}
.pos-carrito-item .detalles {
  font-size: 12px;
  color: #5b6b82;
  display: flex;
  gap: 10px;
  align-items: center;
}
.pos-carrito-item .subtotal {
  font-size: 15px;
  font-weight: 700;
  color: #0e1a2b;
  text-align: right;
}
.pos-carrito-item .cant-control {
  display: inline-flex;
  align-items: center;
  background: #f0f3f8;
  border-radius: 8px;
  overflow: hidden;
}
.pos-carrito-item .cant-control button {
  background: transparent;
  color: #0e1a2b;
  border: none;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  transition: background 100ms;
}
.pos-carrito-item .cant-control button:hover { background: #e4e9f0; }
.pos-carrito-item .cant-control input {
  width: 38px;
  background: transparent;
  border: none;
  color: #0e1a2b;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
}
.pos-carrito-item .eliminar {
  background: transparent;
  color: #8492a6;
  border: none;
  cursor: pointer;
  font-size: 18px;
  margin-left: 6px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  transition: all 100ms;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pos-carrito-item .eliminar:hover {
  color: #dc3350;
  background: #fef2f2;
}

/* ============ Totales y botón cobrar ============ */
.pos-totales {
  padding: 16px 20px;
  background: #ffffff;
  border-top: 1px solid #e4e9f0;
}
.pos-totales .row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #4b5563;
  margin-bottom: 6px;
  font-weight: 500;
}

/* ============================================================
   DASHBOARD POWER BI STYLE (v=198)
   ============================================================
   Componentes profesionales para el dashboard ejecutivo:
   - KPI cards elevados con sparkline + comparación %
   - Chart containers responsive
   - Filtros globales sticky
   - Animaciones suaves de entrada
============================================================ */

/* Encabezado de sección del dashboard — sin chrome de card, solo jerarquía */
.dash-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 6px 2px; margin-bottom: 14px;
}
.dash-toolbar .titulo {
  font-size: 16px; font-weight: 700; color: var(--navy);
  letter-spacing: -0.2px;
  display: flex; align-items: center; gap: 9px;
}
.dash-toolbar .titulo .t-ico {
  width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--azul-claro); color: var(--azul);
}
.dash-toolbar .subtitulo {
  font-size: 11.5px; color: #5b6b82; margin-top: 1px;
}
.dash-toolbar .spacer { flex: 1; }
.dash-toolbar select, .dash-toolbar input[type="date"] {
  font-size: 12px; padding: 6px 10px; border: 1px solid #d1d5db;
  border-radius: 6px; background: #f9fafb;
}

/* Control segmentado para el rango de tendencia (3M / 6M / 12M) */
.bi-seg {
  display: inline-flex; align-items: center; gap: 2px;
  background: #fff; border: 1px solid var(--gris-borde);
  border-radius: 9px; padding: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.bi-seg button {
  appearance: none; border: none; background: transparent;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--texto-suave); padding: 5px 13px;
  border-radius: 7px; cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .bi-seg button:not(.activo):hover { background: var(--gris-claro); color: var(--texto); }
}
.bi-seg button.activo {
  background: var(--azul); color: #fff;
  box-shadow: 0 1px 4px rgba(0,82,155,0.35);
}
.bi-btn-refrescar {
  appearance: none; border: 1px solid var(--gris-borde); background: #fff;
  width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--texto-suave);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .bi-btn-refrescar:hover { color: var(--azul); border-color: var(--azul); }
}
.bi-btn-refrescar:active { transform: scale(0.94); }

/* Layout grid del dashboard */
.dash-bi-grid {
  display: grid; gap: 16px; margin-bottom: 16px;
}
.dash-bi-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.dash-bi-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.dash-bi-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1200px) {
  .dash-bi-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .dash-bi-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .dash-bi-grid.cols-4, .dash-bi-grid.cols-3, .dash-bi-grid.cols-2 {
    grid-template-columns: 1fr;
  }
}

/* KPI Card moderno con sparkline */
.bi-kpi {
  background: #fff; border-radius: 14px; padding: 16px 18px;
  box-shadow: var(--shadow);
  border: 1px solid var(--gris-borde);
  position: relative; overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}
.bi-kpi:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent, var(--azul)) 40%, var(--gris-borde));
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--accent, var(--azul)) 30%, rgba(0,0,0,0.12));
}
@supports not (border-color: color-mix(in srgb, red 50%, blue)) {
  .bi-kpi:hover { border-color: var(--accent, var(--azul)); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
}
.bi-kpi.azul { --accent: #0073cf; }
.bi-kpi.verde { --accent: #0f9d6b; }
.bi-kpi.rojo { --accent: #dc3350; }
.bi-kpi.amarillo { --accent: #c77d18; }
.bi-kpi.violeta { --accent: #8b5cf6; }
.bi-kpi.cyan { --accent: #06b6d4; }
.bi-kpi.rosa { --accent: #ec4899; }
.bi-kpi .header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.bi-kpi .etiqueta {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--texto-suave); font-weight: 600;
}
.bi-kpi .icono {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.bi-kpi .valor {
  font-size: 27px; font-weight: 700; color: var(--texto);
  line-height: 1.2; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bi-kpi .footer {
  margin-top: 10px; display: flex; justify-content: space-between;
  align-items: end; gap: 8px;
}
.bi-kpi .delta {
  font-size: 11px; font-weight: 700; padding: 2.5px 8px;
  border-radius: 999px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bi-kpi .delta.up { background: #e6f6ef; color: #0f7a52; }
.bi-kpi .delta.down { background: #fdeaed; color: #a01830; }
.bi-kpi .delta.flat { background: var(--gris); color: var(--texto-suave); }
.bi-kpi .spark {
  height: 36px; flex: 1; min-width: 80px; max-width: 130px;
}

/* Card de gráfica */
.bi-chart-card {
  background: #fff; border-radius: 12px; padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  border: 1px solid #f0f3f8;
}
.bi-chart-card .head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.bi-chart-card .head h3 {
  font-size: 14px; font-weight: 700; color: #0e1a2b; margin: 0;
  letter-spacing: -0.1px;
  display: flex; align-items: center; gap: 8px;
}
.bi-chart-card .head .h-ico {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hico-bg, var(--azul-claro)); color: var(--hico-fg, var(--azul));
}
.bi-chart-card .head .sub {
  font-size: 11px; color: #5b6b82; margin-top: 2px;
}
.bi-chart-card .head .btn-link {
  font-size: 11.5px; font-weight: 600; color: var(--azul);
  text-decoration: none; white-space: nowrap;
  background: none; border: none; cursor: pointer; padding: 5px 10px;
  border-radius: 6px;
  transition: background var(--dur-hover) var(--ease-out);
}
.bi-chart-card .head .btn-link:hover { background: var(--azul-claro); }
.bi-chart-card .chart-wrap {
  position: relative; height: 240px;
}
.bi-chart-card.tall .chart-wrap { height: 320px; }
.bi-chart-card.small .chart-wrap { height: 180px; }

/* Animación de entrada stagger */
@keyframes bi-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.dash-bi-grid > * {
  animation: bi-fade-up 0.4s ease-out backwards;
}
.dash-bi-grid > *:nth-child(1) { animation-delay: 0.05s; }
.dash-bi-grid > *:nth-child(2) { animation-delay: 0.1s; }
.dash-bi-grid > *:nth-child(3) { animation-delay: 0.15s; }
.dash-bi-grid > *:nth-child(4) { animation-delay: 0.2s; }
.dash-bi-grid > *:nth-child(5) { animation-delay: 0.25s; }
.dash-bi-grid > *:nth-child(6) { animation-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .dash-bi-grid > * { animation: none; }
  .bi-kpi:hover { transform: none; }
}

/* Balance Resumido (reemplazo del donut) */
.bi-balance-resumen {
  display: flex; flex-direction: column; gap: 12px;
  padding: 4px 0;
}
.bi-bal-bloque {
  background: #f9fafb; border-radius: 8px; padding: 12px 14px;
  border-left: 4px solid #d1d5db;
}
.bi-bal-bloque.activo { border-left-color: #0073cf; background: #eff6ff; }
.bi-bal-bloque.pasivo { border-left-color: #c77d18; background: #fffbeb; }
.bi-bal-bloque.patrimonio { border-left-color: #8b5cf6; background: #f5f3ff; }
.bi-bal-titulo {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: #4b5563; font-weight: 700;
}
.bi-bal-titulo strong {
  margin-left: auto; color: #0e1a2b; font-size: 15px; letter-spacing: 0;
}
.bi-bal-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.bi-bal-fila {
  display: flex; justify-content: space-between;
  font-size: 11px; color: #5b6b82; margin-top: 4px;
}
.bi-bal-fila strong { color: #0e1a2b; font-weight: 600; }
.bi-bal-ecuacion {
  text-align: center; padding: 8px 12px; border-radius: 6px;
  font-size: 11px; font-weight: 600; margin-top: 4px;
}
.bi-bal-ecuacion.ok { background: #dcfce7; color: #14532d; }
.bi-bal-ecuacion.err { background: #fee2e2; color: #991b1b; }

/* Footer del Estado de Resultados — 3 mini-KPIs del período acumulado */
.bi-er-card { display: flex; flex-direction: column; }
.bi-er-card .chart-wrap { flex: 1; min-height: 280px; }
.bi-er-footer {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid #f0f3f8;
}
.bi-er-mini {
  padding: 10px 12px; border-radius: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.bi-er-mini .lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 600; opacity: 0.7;
}
.bi-er-mini strong {
  font-size: 16px; font-weight: 700;
  font-feature-settings: "tnum";
}
.bi-er-mini .pill {
  display: inline-block; align-self: flex-start;
  background: rgba(255,255,255,0.6); padding: 1px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 600; margin-top: 2px;
}
.bi-er-mini.ing { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.bi-er-mini.gas { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.bi-er-mini.util.pos { background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; }
.bi-er-mini.util.neg { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* Skeleton loader */
.bi-skel {
  background: linear-gradient(90deg, #eef1f6 0%, #e0e6ef 50%, #eef1f6 100%);
  background-size: 200% 100%;
  border-radius: 14px;
  animation: bi-shimmer 1.4s infinite;
}
.bi-skel.kpi { height: 130px; }
.bi-skel.chart { height: 260px; }
@keyframes bi-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.pos-totales .row .num { color: #0e1a2b; font-weight: 600; }
.pos-totales .row.total {
  font-size: 26px;
  font-weight: 800;
  color: #0e1a2b;
  border-top: 1px solid #f0f3f8;
  padding-top: 12px;
  margin-top: 12px;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}
.pos-totales .row.total .num { color: #0e1a2b; font-weight: 800; }
.pos-totales .row.propina input {
  width: 110px;
  background: #ffffff;
  color: #0e1a2b;
  border: 1px solid #e4e9f0;
  padding: 5px 10px;
  text-align: right;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}
.pos-totales .row.propina input:focus {
  outline: none;
  border-color: #0073cf;
  box-shadow: 0 0 0 2px rgba(0,115,207,0.1);
}
.pos-totales .btn-cobrar {
  width: 100%;
  background: linear-gradient(180deg, #0f9d6b 0%, #059669 100%);
  color: white;
  border: none;
  padding: 18px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  margin-top: 14px;
  box-shadow: 0 4px 12px rgba(5,150,105,0.25);
  transition: transform 100ms cubic-bezier(0.23,1,0.32,1),
              box-shadow 140ms;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.pos-totales .btn-cobrar:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(5,150,105,0.35);
}
.pos-totales .btn-cobrar:active {
  transform: scale(0.98);
  transition-duration: 60ms;
}
.pos-totales .btn-cobrar:disabled {
  background: #e4e9f0;
  color: #8492a6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ============ Atajos de teclado ============ */
.pos-atajos {
  padding: 10px 20px;
  background: #fafbfc;
  border-top: 1px solid #f0f3f8;
  display: flex;
  justify-content: space-around;
  font-size: 11px;
  color: #5b6b82;
  font-weight: 500;
}
.pos-atajos kbd {
  background: #ffffff;
  color: #374151;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  margin-right: 4px;
  border: 1px solid #e4e9f0;
  box-shadow: 0 1px 0 #e4e9f0;
}

/* ============ Modal de cobro POS ============ */
.pos-cobro-total {
  background: linear-gradient(135deg, #0e1a2b 0%, #0e1a2b 100%);
  color: white;
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 18px;
  box-shadow: 0 4px 12px rgba(17,24,39,0.15);
}
.pos-cobro-total .label {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.pos-cobro-total .valor {
  font-size: 42px;
  font-weight: 800;
  margin-top: 6px;
  letter-spacing: -1px;
}
.pos-pendiente-display {
  background: #f9fafb;
  border: 1px solid #e4e9f0;
  padding: 14px 16px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  margin-top: 14px;
  transition: all 160ms;
}
.pos-pendiente-display.ok {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
.pos-pendiente-display.exceso {
  /* Sobrepago = CAMBIO a entregar. Es positivo, va en verde (no rojo). */
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
.pos-pendiente-display .num { font-size: 20px; }
.pos-pendiente-display.exceso .num { font-size: 26px; font-weight: 800; }

/* ============================================================
   POS Square-grade (v=295): efectivo rápido, vuelto, edición de
   línea, ventas aparcadas, feedback táctil.
============================================================ */

/* Toggle segmentado L. / %  (descuentos) */
.seg-toggle { display: inline-flex; border: 1px solid #d1d5db; border-radius: 8px; overflow: hidden; }
.seg-toggle .seg {
  background: #fff; color: #5b6b82; border: none; padding: 8px 14px;
  font-size: 14px; font-weight: 700; cursor: pointer; transition: all 120ms;
}
.seg-toggle .seg.activo { background: #0073cf; color: #fff; }

/* Chips de efectivo rápido en el cobro */
.pos-cash-chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.pos-cash-chip {
  flex: 1; min-width: 84px; background: #f0f3f8; border: 1px solid #e4e9f0;
  color: #0e1a2b; padding: 14px 10px; border-radius: 10px; font-size: 15px;
  font-weight: 700; cursor: pointer; transition: all 120ms;
}
.pos-cash-chip:hover { background: #e4e9f0; }
.pos-cash-chip.activo { background: #0073cf; color: #fff; border-color: #0073cf; }
.pos-cash-chip:active { transform: scale(0.96); }

/* Cambio grande en el post-venta */
.pos-cambio-grande {
  background: linear-gradient(135deg, #059669 0%, #0f9d6b 100%);
  color: #fff; border-radius: 12px; padding: 18px; text-align: center;
  margin-top: 8px; box-shadow: 0 4px 14px rgba(5,150,105,0.3);
}
.pos-cambio-grande .lbl { font-size: 12px; font-weight: 700; opacity: 0.85; letter-spacing: 0.6px; }
.pos-cambio-grande .val { font-size: 38px; font-weight: 800; margin-top: 4px; letter-spacing: -1px; }

/* Línea de carrito: top con descripción + eliminar, edición al tocar */
.pos-carrito-item .linea-top {
  grid-column: 1 / -1; display: flex; justify-content: space-between;
  align-items: flex-start; gap: 8px;
}
.pos-carrito-item .descripcion { cursor: pointer; }
.pos-carrito-item .descripcion:hover { color: #0073cf; }
.pos-carrito-item .nota-linea {
  display: block; font-size: 11px; font-weight: 500; color: #5b6b82;
  margin-top: 2px; font-style: italic;
}
.pos-carrito-item .precio-unit { cursor: pointer; }
.pos-carrito-item .precio-unit:hover { color: #0073cf; }
.pos-carrito-item .precio-tachado {
  text-decoration: line-through; color: #8492a6; font-size: 11px; margin-right: 3px;
}
/* Áreas táctiles más grandes (estilo Square) */
.pos-carrito-item .cant-control button { width: 36px; height: 36px; font-size: 18px; }
.pos-carrito-item .cant-control input { width: 44px; height: 36px; font-size: 15px; }

/* Badge contador en botones del header (ventas aparcadas) */
.pos-pro-header button .contador {
  background: #dc3350; color: #fff; font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 999px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center; margin-left: 2px;
}

/* Lista de ventas aparcadas */
.pos-aparcadas-lista { display: flex; flex-direction: column; gap: 8px; }
.pos-aparcada-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border: 1px solid #e4e9f0; border-radius: 10px; background: #fafbfc;
}

/* Pulso de feedback al agregar un producto */
@keyframes pos-tile-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,115,207,0.45); }
  50% { transform: scale(0.96); box-shadow: 0 0 0 6px rgba(0,115,207,0.18); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,115,207,0); }
}
.pos-card.pulse { animation: pos-tile-pulse 280ms ease-out; }
.pos-card { transition: transform 90ms, box-shadow 140ms; }
.pos-card:active { transform: scale(0.97); }

/* ============================================================
   POS acceso v=296: header uniforme, tarjetas de caja, keypad PIN
============================================================ */

/* ---- Header del modo venta, reformado ---- */
.pos-pro-header { gap: 14px; }
.pos-hdr-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pos-hdr-icon {
  width: 38px; height: 38px; border-radius: 10px; background: #eef2ff; color: #4338ca;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pos-hdr-textos { min-width: 0; }
.pos-hdr-caja { font-size: 15px; font-weight: 700; color: #0e1a2b; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.pos-hdr-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.pos-hdr-cajero { font-size: 11px; color: #5b6b82; display: inline-flex; align-items: center; gap: 3px; }

/* Chip de cliente, prominente y uniforme */
.pos-hdr-cliente {
  display: inline-flex !important; align-items: center; gap: 8px;
  background: #f9fafb !important; border: 1px solid #e4e9f0 !important; color: #0e1a2b !important;
  padding: 6px 14px !important; border-radius: 10px; min-width: 180px; max-width: 280px;
}
.pos-hdr-cliente .lbl { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.pos-hdr-cliente .cap { font-size: 10px; color: #8492a6; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.pos-hdr-cliente #pos-fs-cliente-label { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.pos-hdr-cliente.con-datos { background: #ecfdf5 !important; border-color: #a7f3d0 !important; }
.pos-hdr-cliente.con-datos .cap { color: #059669; }

/* Acciones del header: botones uniformes, icono + texto apilado */
.pos-hdr-acciones { display: flex; gap: 6px; align-items: stretch; }
.pos-hdr-acciones button {
  display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px !important; min-width: 64px; padding: 8px 8px !important; border-radius: 10px;
  font-size: 11px !important; font-weight: 600 !important; position: relative; line-height: 1;
}
.pos-hdr-acciones button span:not(.contador) { font-size: 11px; }
.pos-hdr-acciones .contador {
  position: absolute; top: 4px; right: 6px; background: #dc3350; color: #fff;
  font-size: 10px; min-width: 16px; height: 16px; border-radius: 999px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---- Pantalla de cajas (tarjetas) ---- */
.pos-cajas-wrap { padding: 4px; }
.pos-cajas-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.pos-cajas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.pos-caja-card {
  position: relative; text-align: left; background: #fff; border: 1px solid #e4e9f0;
  border-radius: 16px; padding: 20px; cursor: pointer; transition: all 140ms;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); display: flex; flex-direction: column; gap: 4px;
}
.pos-caja-card:hover { border-color: #0073cf; box-shadow: 0 8px 22px rgba(0,115,207,0.14); transform: translateY(-2px); }
.pos-caja-card:active { transform: scale(0.98); }
.pos-caja-card.abierta { border-color: #a7f3d0; background: linear-gradient(180deg, #f0fdf9 0%, #ffffff 60%); }
.pos-caja-card .estado-pill { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.pos-caja-card .estado-pill.on { background: #dcfce7; color: #15803d; }
.pos-caja-card .estado-pill.off { background: #f1f5f9; color: #64748b; }
.pos-caja-card .caja-avatar {
  width: 48px; height: 48px; border-radius: 12px; background: #0073cf; color: #fff;
  font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.pos-caja-card.abierta .caja-avatar { background: #059669; }
.pos-caja-card .caja-nombre { font-size: 16px; font-weight: 700; color: #0e1a2b; }
.pos-caja-card .caja-codigo { font-size: 12px; color: #5b6b82; }
.pos-caja-card .caja-cai { font-size: 11px; color: #2563eb; margin-top: 6px; font-weight: 600; }
.pos-caja-card .caja-cai.warn { color: #b45309; }

/* ---- Keypad PIN ---- */
.pos-pin-pad { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pin-dots { display: flex; gap: 12px; height: 22px; align-items: center; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #cbd5e1; transition: all 120ms; }
.pin-dot.lleno { background: #0073cf; border-color: #0073cf; transform: scale(1.1); }
.pin-error { color: #dc2626; font-size: 13px; font-weight: 600; min-height: 18px; }
.pin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 280px; }
.pin-key {
  height: 64px; font-size: 24px; font-weight: 700; border: 1px solid #e4e9f0; background: #f9fafb;
  color: #0e1a2b; border-radius: 14px; cursor: pointer; transition: all 100ms;
}
.pin-key:hover { background: #f0f3f8; }
.pin-key:active { transform: scale(0.94); background: #e4e9f0; }
.pin-key.util { color: #5b6b82; font-size: 20px; }
.pin-key.ok { background: linear-gradient(180deg, #0f9d6b, #059669); color: #fff; border-color: #059669; }
.pin-key.ok:hover { filter: brightness(1.05); }

/* ---- Cobro: crédito + pulido (v=299/303) ---- */
.pos-pago-row { max-width: 100%; }
.pos-pago-row > * { min-width: 0; }   /* permite encoger inputs en el grid (sin scroll horizontal) */
.pos-pago-row select.pp-metodo, .pos-pago-row input {
  height: 40px; border: 1px solid #e4e9f0; border-radius: 9px; padding: 0 10px;
  font-size: 14px; background: #fff; width: 100%; box-sizing: border-box;
}
.pos-pago-row input.pp-monto { font-weight: 700; text-align: right; }
.pos-pago-row .btn-eliminar-fila { height: 40px; border-radius: 9px; }
/* El modal de cobro nunca debe tener scroll horizontal */
.pos-cobro-total, .pos-cash-chips, #pos-pagos-lista { max-width: 100%; }
.pos-cobro-total { padding: 18px; }
.pos-cobro-total .valor { font-size: 36px; }
.pos-credito-info {
  margin-top: 8px; padding: 8px 12px; border-radius: 8px; font-size: 12px;
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
}
.pos-credito-grande {
  background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
  color: #fff; border-radius: 12px; padding: 16px; text-align: center; margin-top: 8px;
  box-shadow: 0 4px 14px rgba(180,83,9,0.25);
}
.pos-credito-grande .lbl { font-size: 12px; font-weight: 700; opacity: 0.9; letter-spacing: 0.5px; }
.pos-credito-grande .val { font-size: 34px; font-weight: 800; margin-top: 4px; letter-spacing: -0.5px; }
/* Chips de efectivo: que la fila respire mejor */
.pos-cash-chips { margin-top: 4px; }

/* ============================================================
   POS extras v=305: cantidad rápida, foto, lock, arqueo, top
============================================================ */

/* Cantidad rápida junto al buscador */
.pos-cant-rapida {
  display: flex; align-items: center; gap: 4px; background: #fff;
  border: 1px solid #e4e9f0; border-radius: 12px; padding: 0 12px; min-width: 92px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.pos-cant-rapida span { font-size: 18px; font-weight: 800; color: #0073cf; }
.pos-cant-rapida input { width: 52px; border: none; outline: none; font-size: 18px;
  font-weight: 700; text-align: center; padding: 12px 0; background: transparent; }

/* Foto de producto en el tile */
.pos-card .avatar.con-img { position: relative; overflow: hidden; padding: 0; }
.pos-card .avatar.con-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.pos-card .avatar.con-img .ini-fallback { display: none; }
.pos-card .avatar.con-img.sin-img .ini-fallback { display: block; }  /* si la img falla, vuelve la inicial */

/* Overlay de bloqueo de terminal */
.pos-lock-overlay {
  position: fixed; inset: 0; z-index: 100000; background: rgba(15,23,42,0.72);
  backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center;
}
.pos-lock-card {
  background: #fff; border-radius: 18px; padding: 26px 28px; width: 340px; max-width: 92vw;
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.pos-lock-icon { font-size: 40px; }
.pos-lock-titulo { font-size: 18px; font-weight: 800; color: #0e1a2b; margin-top: 4px; }
.pos-lock-sub { font-size: 12px; color: #5b6b82; margin-bottom: 14px; }
.pos-lock-card .pin-dots { justify-content: center; margin: 6px 0 4px; }
.pos-lock-card .pin-grid { margin: 6px auto 0; }
.pos-lock-pie { font-size: 11px; color: #8492a6; margin-top: 12px; }

/* Arqueo de cierre por denominación */
.pos-denom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.pos-denom-row { display: grid; grid-template-columns: 64px 14px 1fr 90px; gap: 6px; align-items: center; }
.pos-denom-lbl { font-weight: 700; font-size: 13px; }
.pos-denom-x { color: #8492a6; }
.pos-denom-cant { height: 34px; border: 1px solid #e4e9f0; border-radius: 8px; text-align: center; font-weight: 600; }
.pos-denom-sub { font-size: 12px; color: #5b6b82; text-align: right; }
.pos-denom-total {
  display: flex; justify-content: space-between; align-items: center; margin-top: 12px;
  padding: 12px 14px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 10px;
  font-weight: 700; color: #047857;
}
.pos-denom-total strong { font-size: 20px; }
@media (max-width: 560px) { .pos-denom-grid { grid-template-columns: 1fr; } }

/* Devolución (NC) desde el POS */
.pos-dev-lista { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.pos-dev-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid #e4e9f0; border-radius: 8px;
}
.pos-dev-cant { height: 36px; border: 1px solid #e4e9f0; border-radius: 8px; font-weight: 700; }
.pos-dev-total {
  display: flex; justify-content: space-between; align-items: center; margin-top: 12px;
  padding: 12px 14px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; font-weight: 700; color: #9a3412;
}
.pos-dev-total strong { font-size: 18px; }
/* Selector de método de reembolso (efectivo/tarjeta/saldo) */
.pos-reembolso-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.pos-reembolso-opts .seg {
  flex: 1; min-width: 110px; text-align: center; cursor: pointer;
  border: 1px solid #e4e9f0; border-radius: 10px; padding: 12px 8px;
  font-weight: 600; font-size: 14px; background: #f9fafb; transition: all 120ms; user-select: none;
}
.pos-reembolso-opts .seg:hover { background: #f0f3f8; }
.pos-reembolso-opts .seg.activo { background: #0073cf; color: #fff; border-color: #0073cf; }

/* ============================================================
 * TICKET TÉRMICO — CSS para impresión 58mm / 80mm.
 * Cargado en la ventana de impresión del ticket.
 * ============================================================ */
.ticket-print {
  font-family: ui-monospace, "Consolas", "Courier New", monospace;
  font-size: 11px;
  line-height: 1.35;
  color: #000;
  width: 76mm;
  margin: 0 auto;
  padding: 4mm 2mm;
  background: white;
}
.ticket-print.ancho-58 { width: 54mm; font-size: 10px; }
.ticket-print h1 {
  font-size: 14px;
  text-align: center;
  margin: 0 0 4px;
  font-weight: 700;
  text-transform: uppercase;
}
.ticket-print .center { text-align: center; }
.ticket-print .right { text-align: right; }
.ticket-print .neg { font-weight: 700; }
.ticket-print .big { font-size: 14px; font-weight: 700; }
.ticket-print hr { border: none; border-top: 1px dashed #000; margin: 4px 0; }
.ticket-print .fila { display: flex; justify-content: space-between; gap: 4px; }
.ticket-print .fila .izq { flex: 1; }
.ticket-print .fila .der { text-align: right; white-space: nowrap; }
.ticket-print table.lineas {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0;
}
.ticket-print table.lineas td {
  padding: 0;
  vertical-align: top;
}
.ticket-print table.lineas .cant { width: 8mm; }
.ticket-print table.lineas .sub { text-align: right; white-space: nowrap; width: 18mm; }
.ticket-print .leyenda-sar {
  text-align: center;
  font-size: 9px;
  margin-top: 6px;
  font-weight: 700;
  text-transform: uppercase;
}

@media print {
  @page {
    size: 80mm auto;
    margin: 0;
  }
  body { margin: 0; }
  .ticket-print { width: 80mm; padding: 3mm 2mm; }
  .ticket-print.ancho-58 { width: 58mm; }
  .no-print { display: none !important; }
}

/* --- prefers-reduced-motion: respetar accesibilidad del SO --- */
@media (prefers-reduced-motion: reduce) {
  .dash-stagger > *,
  .dash-skeleton,
  .acceso-rapido,
  .bucket-row, .top5-row,
  .dash-card .barra-prop > span,
  .bucket-row .barra > span, .top5-row .barra > span,
  .item-alerta,
  .card-empresa, .card-empresa-chip,
  table.tabla tr.clickeable,
  table.tabla tr.clickeable td:first-child {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
 * CALENDARIOS / INPUTS DE FECHA — Estilo consistente con el sistema.
 * El input nativo <input type="date"> trae un look del navegador
 * que se ve "viejo" comparado con el resto de la UI. No podemos
 * cambiar el calendario popup en sí (lo dibuja el navegador), pero
 * sí el input y su ícono del calendario.
 *
 * Aplica a TODOS los <input type="date"> y "datetime-local" sin
 * necesidad de tocar cada plantilla. Si un módulo necesita un look
 * diferente, puede sobreescribirlo con una clase específica.
 * ============================================================ */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"] {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #0e1a2b;
  background: #ffffff;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 12px;
  min-height: 38px;
  transition: border-color 140ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 140ms cubic-bezier(0.23, 1, 0.32, 1),
              background 100ms;
  cursor: pointer;
  /* Evita que aparezca el "spinner" feo en algunos navegadores */
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
}

input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="time"]:hover,
input[type="month"]:hover {
  border-color: #8492a6;
  background: #fafbfc;
}

input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="month"]:focus {
  outline: none;
  border-color: var(--azul, #0073cf);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 115, 207, 0.12);
}

input[type="date"]:disabled,
input[type="datetime-local"]:disabled,
input[type="time"]:disabled,
input[type="month"]:disabled {
  background: #f0f3f8;
  color: #8492a6;
  cursor: not-allowed;
  border-color: #e4e9f0;
}

/* Ícono del calendario (Chrome/Edge/Safari): reemplazamos el ícono
 * gris desvaído por nuestra versión SVG en azul ContaHN.
 * `filter: invert(...)` permite recolorear el icono nativo manteniendo
 * la accesibilidad (sigue siendo clickeable para abrir el picker). */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
  padding: 4px;
  margin-left: 6px;
  border-radius: 4px;
  transition: opacity 120ms, background 120ms;
  /* Recolorea el ícono negro del navegador → azul ContaHN
   * El filter convierte el negro (#000) → azul aprox (#0073cf) */
  filter: invert(28%) sepia(98%) saturate(1640%) hue-rotate(196deg) brightness(96%) contrast(101%);
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: rgba(0, 115, 207, 0.08);
}

/* Firefox no soporta ::-webkit-calendar-picker-indicator pero ya
 * estiliza el input completo bien con las reglas de arriba. */

/* ============================================================
 * SELECTS — estilo base uniforme (igual que los date-inputs).
 * Aplica a TODO <select> sin clase propia — así los desplegables
 * "pelones" de las barras de reportes (Mes, Año, Comparar…) dejan
 * de verse como el control default del navegador y entonan con el
 * resto. Los casos con estilo propio (.campo select,
 * .widget-header select, .lineas-grid select, .dash-toolbar select)
 * tienen mayor especificidad y siguen mandando. Los <select> con
 * `style="border:none"` inline (ej. selector de mes del BvA) también
 * ganan por ser estilo inline.
 * ============================================================ */
select {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #0e1a2b;
  background-color: #ffffff;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 34px 8px 12px;
  min-height: 38px;
  cursor: pointer;
  transition: border-color 140ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 140ms cubic-bezier(0.23, 1, 0.32, 1),
              background-color 100ms;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Flecha ▾ en slate (SVG inline, respeta CSP) a la derecha. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6b82' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
select:hover {
  border-color: #8492a6;
  background-color: #fafbfc;
}
select:focus {
  outline: none;
  border-color: var(--azul, #0073cf);
  box-shadow: 0 0 0 3px rgba(0, 115, 207, 0.12);
}
select:disabled {
  background-color: #f0f3f8;
  color: #8492a6;
  cursor: not-allowed;
  border-color: #e4e9f0;
}

/* ============================================================
 * TABS segmentados (.bva-tabs / .bva-tab) — GLOBAL.
 * Antes vivían solo en un <style> inyectado por presupuestos.js, así
 * que en otras vistas que reusan estas clases (ej. Conciliación de
 * ISV) las pestañas salían como botones default del navegador. Al
 * definirlas aquí, se ven igual en TODAS las ventanas.
 * ============================================================ */
.bva-tabs {
  display: flex; gap: 4px; margin-bottom: 16px; padding: 4px;
  background: var(--gris-claro); border-radius: 10px; width: fit-content;
}
.bva-tab {
  padding: 8px 16px; border: none; background: transparent; cursor: pointer;
  border-radius: 8px; font-size: 13px; color: var(--texto-suave);
  font-weight: 600; transition: all .15s;
}
.bva-tab:hover { color: var(--azul-oscuro); }
.bva-tab.activa {
  background: #fff; color: var(--azul-oscuro);
  box-shadow: 0 1px 3px rgba(14, 26, 43, .08);
}

/* Cuando el input está dentro de un .campo (form layout estándar),
 * el line-height se hereda — asegurar que el texto centrado funcione. */
.campo input[type="date"],
.campo input[type="datetime-local"],
.campo input[type="time"],
.campo input[type="month"] {
  width: 100%;
  line-height: 1.4;
}
/* ===== Centro de Agentes ===== */
.agentes-shell { max-width: 1280px; }
.agentes-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.agentes-modo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--gris-borde);
  border-radius: 999px;
  color: var(--texto-suave);
  font-size: 12px;
  white-space: nowrap;
}
.agentes-tabs {
  display: flex;
  gap: 8px;
  margin: 10px 0 14px;
  flex-wrap: wrap;
}
.agentes-tabs button {
  border: 1px solid var(--gris-borde);
  background: #fff;
  color: var(--texto);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
.agentes-tabs button.activo {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}
.agentes-panel {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.agentes-form,
.agentes-resultado {
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}
.agentes-objetivo {
  background: var(--gris);
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  display: grid;
  gap: 4px;
}
.agentes-objetivo span {
  color: var(--texto-suave);
  font-size: 12px;
  line-height: 1.45;
}
.agentes-fechas,
.agentes-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.agentes-fechas { margin-bottom: 12px; }
.agentes-fechas label {
  font-size: 12px;
  color: var(--texto-suave);
  display: grid;
  gap: 4px;
}
.ag-res-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ag-res-title {
  font-weight: 700;
  color: var(--azul-oscuro);
}
.ag-res-mode {
  font-size: 11px;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ag-respuesta {
  color: var(--texto);
  line-height: 1.5;
  margin: 8px 0 14px;
}
.ag-section {
  border-top: 1px solid var(--gris-borde);
  padding-top: 12px;
  margin-top: 12px;
}
.ag-section h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--azul-oscuro);
}
.ag-section ul { margin: 0 0 0 18px; padding: 0; line-height: 1.55; }
.ag-hallazgo {
  border: 1px solid var(--gris-borde);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.ag-hallazgo.alto { border-left-color: #dc2626; background: #fef2f2; }
.ag-hallazgo.medio { border-left-color: #b45309; background: #fffbeb; }
.ag-hallazgo.ok { border-left-color: #16a34a; background: #ecfdf5; }
.ag-h-title { font-weight: 700; font-size: 13px; }
.ag-h-detail { color: var(--texto-suave); font-size: 12px; margin-top: 3px; line-height: 1.45; }
.ag-detalles summary {
  cursor: pointer;
  color: var(--azul);
  font-weight: 600;
  font-size: 13px;
}
.ag-detalles pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--gris);
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  padding: 10px;
  font-size: 11px;
  max-height: 260px;
  overflow: auto;
}
.muted { color: var(--texto-suave); }
.ag-crm-tareas { margin-top: 16px; }
.ag-crm-card { margin-top: 0; }
.ag-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.ag-mini-grid div {
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  padding: 10px;
  background: var(--gris);
}
.ag-mini-grid span {
  display: block;
  color: var(--texto-suave);
  font-size: 11px;
  margin-bottom: 3px;
}
.ag-mini-grid strong { font-size: 15px; color: var(--azul-oscuro); }
.ag-prio {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.ag-prio.alta { background: #fee2e2; color: #991b1b; }
.ag-prio.media { background: #fef3c7; color: #92400e; }
.ag-prio.baja { background: #dcfce7; color: #166534; }
.ag-prioridad-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.ag-prioridad-table {
  table-layout: fixed;
  min-width: 760px;
}
.ag-prioridad-table th:nth-child(1),
.ag-prioridad-table td:nth-child(1) { width: 20%; }
.ag-prioridad-table th:nth-child(2),
.ag-prioridad-table td:nth-child(2) { width: 18%; }
.ag-prioridad-table th:nth-child(3),
.ag-prioridad-table td:nth-child(3) { width: 18%; }
.ag-prioridad-table th:nth-child(4),
.ag-prioridad-table td:nth-child(4) { width: 8%; }
.ag-prioridad-table th:nth-child(5),
.ag-prioridad-table td:nth-child(5) { width: 23%; }
.ag-prioridad-table th:nth-child(6),
.ag-prioridad-table td:nth-child(6) { width: 13%; }
.ag-prioridad-table td {
  vertical-align: middle;
}
.ag-prioridad-table td:nth-child(1),
.ag-prioridad-table td:nth-child(2) {
  overflow-wrap: anywhere;
}
.ag-accion-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}
.ag-accion-btn {
  text-align: right;
  white-space: nowrap;
}
.ag-accion-btn .btn {
  max-width: 100%;
  white-space: nowrap;
}
.ag-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.ag-action-btn {
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  background: var(--gris);
  color: var(--texto);
  cursor: pointer;
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 9px 10px;
  text-align: left;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.ag-action-btn:hover {
  background: var(--azul-claro);
  border-color: var(--azul);
  transform: translateY(-1px);
}
.ag-action-btn span {
  color: var(--azul-oscuro);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}
.ag-action-btn small {
  color: var(--texto-suave);
  font-size: 11px;
  line-height: 1.35;
}
.ag-module-list {
  display: grid;
  gap: 8px;
}
.ag-module-row {
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--gris-claro);
}
.ag-module-row > div:first-child {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.ag-module-row strong {
  color: var(--texto);
  font-size: 13px;
}
.ag-module-row span {
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 7px;
  text-transform: uppercase;
  white-space: nowrap;
}
.ag-module-row span.ok { background: #dcfce7; color: #166534; }
.ag-module-row span.bloqueado { background: #fee2e2; color: #991b1b; }
.ag-module-row p {
  color: var(--texto-suave);
  font-size: 12px;
  line-height: 1.35;
  margin: 7px 0 0;
}
.ag-module-row ol {
  color: var(--texto-suave);
  font-size: 12px;
  line-height: 1.45;
  margin: 8px 0 0 18px;
  padding: 0;
}
@media (max-width: 900px) {
  .agentes-panel { grid-template-columns: 1fr; }
  .agentes-head { flex-direction: column; }
  .ag-mini-grid { grid-template-columns: 1fr; }
  .ag-prioridad-table { min-width: 700px; }
}