/* ============================================================================
 * QUIPU 3.0 · capa visual común (VIS-001)
 *
 * Va al FINAL de layout.php para ganar a las reglas viejas (modern.css, pilots):
 *   1 · tablas compactas que entran en la pantalla, en todas las listas
 *   2 · menú «Más» de las acciones de cada fila (lo arma dist/js/quipu3-acciones.js)
 *   3 · modo oscuro para el sistema de diseño: los tokens de componente se calculaban
 *       en :root con los colores claros y no seguían a body.dark-mode
 *   4 · modo oscuro para los colores escritos a mano en las vistas (style="…")
 * ========================================================================== */

/* ── 1 · Tablas compactas ─────────────────────────────────────────────────────
   modern.css fija 9px 12px de relleno y 12.5px con !important en cada celda de
   DataTables, y cabeceras sin salto de línea: con 10 a 12 columnas la tabla no
   entraba y aparecía la barra horizontal. */
.skin-peru table.dataTable > thead > tr > th,
table.q-table > thead > tr > th,
.content .card-body .table > thead > tr > th {
  padding: 6px 5px !important;
  font-size: 10.5px !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}
.skin-peru table.dataTable > tbody > tr > td,
table.q-table > tbody > tr > td,
.content .card-body .table > tbody > tr > td {
  padding: 6px 5px !important;
  font-size: 12px !important;
  white-space: normal !important;
}
.skin-peru table.dataTable .q-btn--s,
table.q-table .q-btn--s {
  height: 24px;
  min-width: 24px;
  padding: 0 6px;
  font-size: 11.5px;
}
/* Regla del sistema: todas las columnas centradas, cabecera y datos. El sistema de diseño
   ponía las cabeceras de .q-table a la izquierda. */
table.q-table > thead > tr > th,
table.q-table > tbody > tr > td,
table.q-table > tfoot > tr > td { text-align: center !important; }
.skin-peru table.dataTable .q-badge,
table.q-table .q-badge { font-size: 10px; }

/* ── 2 · Menú «Más» de las acciones de cada fila ─────────────────────────────
   Cuando una fila tiene más de 4 botones, los primeros quedan a la vista y el
   resto se abre DENTRO de la fila como botones con su nombre (patrón de Ventas,
   VTA-NOT-UX-002). */
.q3-mas { grid-column: 1 / -1; justify-self: start; }
.q3-mas { width: auto !important; min-width: 0 !important; padding: 0 8px !important; white-space: nowrap !important; display: inline-flex !important; align-items: center; gap: 4px; background: #475569 !important; color: #fff !important; border-color: #475569 !important; }
.q3-mas:hover, .q3-mas.q3-abierto { background: #1E293B !important; border-color: #1E293B !important; }
.q3-mas.q3-abierto { box-shadow: 0 0 0 3px #CBD5E1 !important; }
.q3-mas .q3-flecha { font-size: 10px; transition: transform .15s; }
.q3-mas.q3-abierto .q3-flecha { transform: rotate(180deg); }
.q3-panel { margin-top: 8px; padding: 8px; border: 2px solid #475569; border-radius: 10px; background: #F8FAFC; max-width: 300px; text-align: left; }
.q3-panel__ops { display: grid; gap: 6px; }
table td .q3-panel .q3-op, .q3-panel .q3-op { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 8px; width: 100% !important; height: auto !important; min-height: 30px; padding: 6px 10px !important; margin: 0 !important; border-radius: 7px !important; font-size: 12px !important; font-weight: 600; text-align: left; white-space: normal; }
.q3-panel .q3-op > em, .q3-panel .q3-op > i { flex: 0 0 auto; }
.q3-panel .q3-op .q-btn__rot { writing-mode: horizontal-tb !important; transform: none !important; }
.q3-panel .q3-op__txt { color: inherit; }
tr.q3-fila-abierta > td { background: #F5F7FB !important; }
body.dark-mode .q3-panel { background: #1C2333; border-color: #64748B; }
body.dark-mode tr.q3-fila-abierta > td { background: #1A2230 !important; }

/* ── 3 · Modo oscuro del sistema de diseño ───────────────────────────────────
   Un custom property que usa otro se resuelve donde se declara. Los tokens de
   componente se declaraban en :root y quedaban con los valores claros aunque
   body.dark-mode cambiara --q-surface o --q-border. Se vuelven a declarar aquí,
   sobre body, para que tomen los oscuros. */
body.dark-mode {
  --q-panel-bg: var(--q-surface);
  --q-panel-border: var(--q-border);
  --q-table-header-bg: var(--q-surface-2);
  --q-table-header-fg: var(--q-text-2);
  --q-table-border: var(--q-border);
  --q-table-hover: #1F2A3A;
  --q-table-bandeja-header-bg: #1C2A44;
  --q-table-bandeja-header-fg: #DBE4F0;
  --q-input-border: var(--q-border);
  --q-color-success-light: rgba(34,197,94,.16);
  --q-color-warning-light: rgba(245,158,11,.16);
  --q-color-danger-light:  rgba(239,68,68,.16);
  --q-color-info-light:    rgba(14,165,233,.16);
  --q-overlay: rgba(0,0,0,.6);
}
body.dark-mode .q-panel,
body.dark-mode .rv-resumen,
body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu { background: var(--q-surface) !important; color: var(--q-text-1); border-color: var(--q-border) !important; }
body.dark-mode .rv-resumen__linea { color: var(--q-text-1); }
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .q-input,
body.dark-mode .q-select,
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple,
body.dark-mode .select2-dropdown { background-color: #0F1620 !important; color: var(--q-text-1) !important; border-color: var(--q-border) !important; }
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--q-text-1) !important; }
body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly] { background-color: #1A2230 !important; color: var(--q-text-2) !important; }
body.dark-mode .table,
body.dark-mode table.dataTable { color: var(--q-text-1); --bs-table-bg: transparent; --bs-table-color: var(--q-text-1); }

/* ── 4 · Colores escritos a mano en las vistas ───────────────────────────────
   139 vistas traen colores en style="…": en oscuro quedaban cuadros blancos y
   letras oscuras sobre fondo oscuro. Se corrigen por su valor, sin tocar las
   vistas. Primero los fondos claros genéricos y después los teñidos, para que
   el teñido gane cuando el valor empieza igual (#fff → #fff7ed). */
body.dark-mode [style*="background:#fff" i],
body.dark-mode [style*="background: #fff" i],
body.dark-mode [style*="background-color:#fff" i],
body.dark-mode [style*="background-color: #fff" i],
body.dark-mode [style*="background:white" i],
body.dark-mode [style*="background: white" i],
body.dark-mode [style*="background-color:white" i],
body.dark-mode [style*="background-color: white" i],
body.dark-mode [style*="background:#f8fafc" i],
body.dark-mode [style*="background: #f8fafc" i],
body.dark-mode [style*="background:#f1f5f9" i],
body.dark-mode [style*="background: #f1f5f9" i],
body.dark-mode [style*="background:#fafafa" i],
body.dark-mode [style*="background:#f5f5f5" i],
body.dark-mode [style*="background-color:#f5f5f5" i],
body.dark-mode [style*="background:#f9fafb" i],
body.dark-mode [style*="background:#eef2f7" i] { background: var(--q-surface-2) !important; }

body.dark-mode [style*="background:#fffbeb" i], body.dark-mode [style*="background: #fffbeb" i],
body.dark-mode [style*="background:#fef3c7" i], body.dark-mode [style*="background: #fef3c7" i],
body.dark-mode [style*="background:#fff7ed" i], body.dark-mode [style*="background: #fff7ed" i] { background: rgba(245,158,11,.14) !important; }
body.dark-mode [style*="background:#fef2f2" i], body.dark-mode [style*="background: #fef2f2" i],
body.dark-mode [style*="background:#fee2e2" i], body.dark-mode [style*="background: #fee2e2" i] { background: rgba(239,68,68,.15) !important; }
body.dark-mode [style*="background:#f0faf5" i], body.dark-mode [style*="background: #f0faf5" i],
body.dark-mode [style*="background:#dcfce7" i], body.dark-mode [style*="background: #dcfce7" i],
body.dark-mode [style*="background:#f0fdf4" i], body.dark-mode [style*="background: #f0fdf4" i] { background: rgba(34,197,94,.14) !important; }
body.dark-mode [style*="background:#eff6ff" i], body.dark-mode [style*="background: #eff6ff" i],
body.dark-mode [style*="background:#dbeafe" i], body.dark-mode [style*="background: #dbeafe" i] { background: rgba(59,130,246,.15) !important; }

/* Letra oscura escrita a mano: pasa a la letra del tema */
body.dark-mode [style*="color:#0f172a" i], body.dark-mode [style*="color: #0f172a" i],
body.dark-mode [style*="color:#1e293b" i], body.dark-mode [style*="color: #1e293b" i],
body.dark-mode [style*="color:#334155" i], body.dark-mode [style*="color: #334155" i],
body.dark-mode [style*="color:#111" i], body.dark-mode [style*="color:#222" i],
body.dark-mode [style*="color:#333" i], body.dark-mode [style*="color: #333" i],
body.dark-mode [style*="color:#4a4a4a" i], body.dark-mode [style*="color:#000" i],
body.dark-mode [style*="color: #000" i] { color: var(--q-text-1) !important; }
body.dark-mode [style*="color:#475569" i], body.dark-mode [style*="color: #475569" i],
body.dark-mode [style*="color:#64748b" i], body.dark-mode [style*="color: #64748b" i],
body.dark-mode [style*="color:#666" i], body.dark-mode [style*="color:#777" i],
body.dark-mode [style*="color:#888" i], body.dark-mode [style*="color: #888" i],
body.dark-mode [style*="color:#6c7d89" i] { color: var(--q-text-2) !important; }
/* Bordes claros escritos a mano */
body.dark-mode [style*="border:1px solid #e2e8f0" i], body.dark-mode [style*="border: 1px solid #e2e8f0" i],
body.dark-mode [style*="border:1px solid #e5e7eb" i], body.dark-mode [style*="border: 1px solid #e5e7eb" i],
body.dark-mode [style*="border:1px solid #cbd5e1" i], body.dark-mode [style*="border: 1px solid #cbd5e1" i] { border-color: var(--q-border) !important; }

/* ── 5 · Variables de los estilos de cada pantalla (VIS-004) ──────────────────
   tools/extraer-estilos.py cambia los grises fijos de las vistas por estas
   variables. En claro valen EXACTAMENTE lo mismo que el gris original; en oscuro
   siguen al tema. Se usan con su gris de respaldo: var(--q3-fondo, #fff). */
:root {
  --q3-fondo: #fff;      --q3-fondo-2: #f8fafc;   --q3-fondo-3: #f1f5f9;
  --q3-borde: #e2e8f0;   --q3-borde-2: #e5e7eb;   --q3-borde-3: #cbd5e1;
  --q3-texto: #0f172a;   --q3-texto-1: #1e293b;   --q3-texto-2: #334155;
  --q3-texto-3: #475569; --q3-texto-4: #64748b;   --q3-texto-5: #94a3b8;
}
body.dark-mode {
  --q3-fondo: var(--q-surface);  --q3-fondo-2: var(--q-surface-2); --q3-fondo-3: #1A2230;
  --q3-borde: var(--q-border);   --q3-borde-2: var(--q-border);    --q3-borde-3: #3A4452;
  --q3-texto: var(--q-text-1);   --q3-texto-1: var(--q-text-1);    --q3-texto-2: #CBD5E1;
  --q3-texto-3: #A8B3C4;         --q3-texto-4: var(--q-text-2);    --q3-texto-5: #7D8899;
}

/* ── 6 · Tipografía de las pantallas (VIS-006) ───────────────────────────────
   Una escala de 9 pasos para todas las pantallas migradas (tools/estandarizar-tipografia.py
   cambia cada font-size en px por el paso más cercano). Antes había 25 tamaños distintos. */
:root {
  --q3-fs-2xs: 10.5px;  /* insignias, notas mínimas */
  --q3-fs-xs: 11px;     /* etiquetas en mayúscula, ayudas */
  --q3-fs-sm: 12px;     /* tablas, texto secundario */
  --q3-fs-md: 13px;     /* texto normal */
  --q3-fs-lg: 14px;     /* texto destacado, campos */
  --q3-fs-xl: 16px;     /* subtítulos */
  --q3-fs-2xl: 18px;    /* títulos de tarjeta */
  --q3-fs-3xl: 22px;    /* títulos de pantalla, cifras */
  --q3-fs-4xl: 28px;    /* cifras grandes */
  --q3-fs-5xl: 40px;    /* cifra principal */
  --q3-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* ── 7 · Tarjetas de cifras, centradas (VIS-007) ─────────────────────────────
   Igual que las tablas: el título, la cifra y su detalle van centrados en todas
   las tarjetas de cifras (Stock, Vencimientos, Cuentas por cobrar, Inicio,
   Consignaciones, ficha del cliente, reportes). */
.rv-luz, .axr-resumen > div, .pi-kpi, .csd-kpi, .ro-kpi, .f360-kpi, .kpi-card { text-align: center !important; }
.pi-kpi__t, .csd-kpi__t { justify-content: center !important; text-align: center !important; }

/* ── VIS-011 · una sola cabecera de tabla en todo el sistema ─────────────────────────────────────
   Había tres: oscura del tema (tablas Bootstrap, modern.css), gris claro (q-table) y azul fijo
   #1E3A8A en los reportes (rv-table, que no seguía la paleta). Ahora todas usan la de la mayoría:
   el color oscuro de la paleta elegida, letra clara, mayúsculas y centrada. En oscuro, el más
   oscuro de la paleta, como ya hacía modern.css. */
section.content .q-table > thead > tr > th,
section.content .table.rv-table > thead > tr > th,
section.content #tabla > table > thead > tr > th,
section.content :is(.cj-tbl, .cj-cuenta, .anu-tbl, .ro-table) > thead > tr > th,
body[data-vista="consignaciones"] section.content table > thead > tr > th {
  background: var(--q-theme-dark) !important;
  color: #F1F5F9 !important;
  font-size: var(--q3-fs-2xs) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  padding: 6px 5px !important;
  border: none !important;
  text-align: center !important;
  vertical-align: middle !important;
}
body.dark-mode section.content .q-table > thead > tr > th,
body.dark-mode section.content .table.rv-table > thead > tr > th,
body.dark-mode section.content #tabla > table > thead > tr > th,
body.dark-mode section.content :is(.cj-tbl, .cj-cuenta, .anu-tbl, .ro-table) > thead > tr > th,
body.dark-mode[data-vista="consignaciones"] section.content table > thead > tr > th {
  background: var(--q-theme-darker) !important;
  color: #94A3B8 !important;
  border-bottom: 1px solid var(--q-theme-dark) !important;
}
/* Las tablas con diseño propio (Caja, Anulados, Alquileres, Consignaciones) toman también las
   filas del resto: letra de 12 px, centrada y el mismo relleno. Quedan fuera, a propósito, el mapa
   de calor de Operaciones y la leyenda del mapa de cotizaciones: no son listas. */
section.content :is(.cj-tbl, .cj-cuenta, .anu-tbl, .ro-table) > tbody > tr > td,
body[data-vista="consignaciones"] section.content table > tbody > tr > td {
  font-size: var(--q3-fs-sm) !important;
  padding: 6px 5px !important;
  text-align: center !important;
  vertical-align: middle !important;
}
/* Flechas de orden de DataTables visibles sobre el fondo oscuro. */
section.content .q-table > thead > tr > th.sorting::before, section.content .q-table > thead > tr > th.sorting::after,
section.content .q-table > thead > tr > th.sorting_asc::before, section.content .q-table > thead > tr > th.sorting_asc::after,
section.content .q-table > thead > tr > th.sorting_desc::before, section.content .q-table > thead > tr > th.sorting_desc::after { color: #F1F5F9; }

/* ── VIS-019 · una sola tarjeta de cifras (KPI) en todo el sistema ──────────────────────────────
   Había nueve diseños: blanca con la cifra en color (reportes, rv-kpi), teñida con borde a la
   izquierda (Stock, Vencimientos), con borde arriba (Anulados), con borde abajo e ícono
   (Alquileres, Inicio de apps), teñida con ilustración (Consignaciones, Inicio)… Ahora todas son la
   misma pieza: blanca, borde fino, franja de color a la izquierda, todo centrado; etiqueta en
   mayúsculas gris, cifra grande en el color de la tarjeta, subtítulo gris. Los íconos quedan como
   un recuadro chico arriba; las ilustraciones de fondo se van. El color dice qué es:
   azul información · verde bien · ámbar atención · naranja aviso · rojo problema · gris neutro.
   Cada familia conserva su marcado: aquí sólo se dice qué parte es etiqueta, cifra o subtítulo. */
:root {
  --q3-k-azul: #2563EB; --q3-k-verde: #16A34A; --q3-k-ambar: #D97706; --q3-k-naranja: #EA580C;
  --q3-k-rojo: #DC2626; --q3-k-cian: #0891B2; --q3-k-violeta: #7C3AED; --q3-k-neutro: #64748B;
}
body.dark-mode {
  --q3-k-azul: #60A5FA; --q3-k-verde: #4ADE80; --q3-k-ambar: #FBBF24; --q3-k-naranja: #FB923C;
  --q3-k-rojo: #F87171; --q3-k-cian: #22D3EE; --q3-k-violeta: #A78BFA; --q3-k-neutro: #94A3B8;
}

/* Tarjeta */
.content-wrapper :is(.rv-kpi, .rv-luz, .axr-resumen > div, .csd-kpi, .cj-tarjeta, .f360-kpi, .ro-kpi, .cn-kpi, .anu-kpi, .pi-kpi, .kpi-card, .geo-kpi) {
  --k: var(--q3-k-neutro);
  position: relative !important; overflow: hidden !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important;
  background: var(--q-surface, #FFFFFF) !important; color: var(--q-text-1) !important;
  border: 1px solid var(--q-border, #E2E8F0) !important; border-left: 4px solid var(--k) !important; border-radius: 12px !important;
  box-shadow: none !important; padding: 12px 14px !important; min-height: 0 !important;
  text-align: center !important; text-decoration: none !important; font-family: var(--q-font-family) !important;
  transition: border-color .12s, box-shadow .12s !important;
}
/* Etiqueta */
.content-wrapper :is(.rv-kpi-label, .rv-luz__t, .axr-resumen > div > span, .csd-kpi__t, .cj-tarjeta__lbl, .f360-kpi .lbl, .ro-kpi .l, .cn-kpi-label, .anu-kpi > span, .pi-kpi__t, .kpi-card-label, .geo-kpi__t) {
  order: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important;
  margin: 0 !important; color: var(--q-text-2) !important; background: none !important;
  font-size: var(--q3-fs-2xs) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em !important; line-height: 1.3 !important;
}
/* Cifra */
.content-wrapper :is(.rv-kpi-value, .rv-luz__n, .axr-resumen > div > b, .csd-kpi__v, .cj-tarjeta__amt, .f360-kpi .val, .ro-kpi .v, .cn-kpi-value, .anu-kpi > b, .pi-kpi__v, .kpi-card .kpi-value, .geo-kpi__n) {
  order: 2 !important; margin: 0 !important; color: var(--k) !important; background: none !important;
  font-size: var(--q3-fs-3xl) !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -.01em !important;
  font-variant-numeric: tabular-nums !important; white-space: nowrap !important;
}
/* Subtítulo */
.content-wrapper :is(.rv-kpi-sub, .rv-luz__v, .axr-resumen > div > small, .csd-kpi__s, .cj-tarjeta__sub, .cn-kpi-sub, .anu-kpi > small, .pi-kpi__s, .kpi-card .kpi-trend, .kpi-card .kpi-sub) {
  order: 3 !important; margin: 0 !important; color: var(--q-text-2) !important; background: none !important;
  font-size: var(--q3-fs-xs) !important; font-weight: 400 !important; line-height: 1.35 !important; text-transform: none !important; letter-spacing: 0 !important;
}
.content-wrapper .kpi-card .kpi-trend.up { color: var(--q3-k-verde) !important; }
.content-wrapper .kpi-card .kpi-trend.down { color: var(--q3-k-rojo) !important; }
/* Ícono: recuadro chico arriba, en el color de la tarjeta */
.content-wrapper :is(.ro-kpi .ic, .kpi-card .kpi-icon) {
  order: 0 !important; width: 28px !important; height: 28px !important; min-width: 28px !important; margin: 0 0 2px !important; border-radius: 8px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: color-mix(in srgb, var(--k) 14%, transparent) !important; color: var(--k) !important; font-size: 15px !important; box-shadow: none !important;
}
.content-wrapper :is(.csd-kpi__t, .pi-kpi__t) > em, .content-wrapper :is(.csd-kpi__t, .pi-kpi__t) > i { color: var(--k) !important; font-size: 13px !important; }
.content-wrapper :is(.ro-kpi .ic, .kpi-card .kpi-icon) :is(i, em, svg) { color: var(--k) !important; fill: currentColor; }
.content-wrapper .kpi-card .kpi-card-head { order: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; margin: 0 !important; }
.content-wrapper :is(.csd-kpi__bg, .pi-kpi__bg, .kpi-card .kpi-bg) { display: none !important; }
.content-wrapper :is(.rv-kpi, .ro-kpi, .kpi-card, .pi-kpi, .csd-kpi)::before, .content-wrapper :is(.rv-kpi, .ro-kpi, .kpi-card, .pi-kpi, .csd-kpi, .anu-kpi)::after { display: none !important; }
/* La grilla de la pieza común, en cualquier pantalla (report-view.css sólo se carga en algunos reportes). */
.content-wrapper .rv-kpi-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.content-wrapper .rv-kpi-grid > .rv-kpi { flex: 1 1 180px; min-width: 160px; }
/* Las que se pueden pulsar (filtros, accesos) */
.content-wrapper :is(button.rv-luz, button.cj-tarjeta, .ro-kpi[data-go], .kpi-card[onclick]) { cursor: pointer !important; }
.content-wrapper :is(button.rv-luz, button.cj-tarjeta, .ro-kpi[data-go], .kpi-card[onclick]):hover { border-color: var(--k) !important; }
.content-wrapper :is(.rv-luz.activo, .cj-tarjeta.on) {
  background: color-mix(in srgb, var(--k) 8%, var(--q-surface, #FFFFFF)) !important;
  box-shadow: 0 0 0 2px var(--k) !important; border-color: var(--k) !important;
}

/* Color de cada tarjeta, según la familia */
.content-wrapper :is(.rv-kpi:has(.rv-kpi-blue), .rv-luz--azul, .axr-r-cre, .csd-kpi--azul, .f360-kpi--info, .cn-kpi:has(.cn-blue), .pi-kpi--azul, .cj-tarjeta) { --k: var(--q3-k-azul); }
.content-wrapper :is(.rv-kpi:has(.rv-kpi-green), .rv-luz--verde, .csd-kpi--verde, .f360-kpi--ok, .cn-kpi:has(.cn-green), .pi-kpi--verde) { --k: var(--q3-k-verde); }
.content-wrapper :is(.rv-kpi:has(.rv-kpi-orange), .rv-luz--amarillo, .csd-kpi--ambar, .f360-kpi--warn, .cn-kpi:has(.cn-orange), .pi-kpi--ambar, .anu-kpi--amb, .cj-tarjeta--pend) { --k: var(--q3-k-ambar); }
.content-wrapper :is(.rv-luz--naranja) { --k: var(--q3-k-naranja); }
.content-wrapper :is(.rv-kpi:has(.rv-kpi-red), .rv-luz--rojo, .axr-r-con, .csd-kpi--rojo, .f360-kpi--danger, .cn-kpi:has(.cn-red), .anu-kpi:not(.anu-kpi--amb, .anu-kpi--ind), .cj-tarjeta--anul) { --k: var(--q3-k-rojo); }
.content-wrapper :is(.rv-kpi:has(.rv-kpi-pink), .anu-kpi--ind, .pi-kpi--mes) { --k: var(--q3-k-violeta); }
.content-wrapper :is(.csd-kpi--cel) { --k: var(--q3-k-cian); }
.content-wrapper :is(.axr-r-tot, .geo-kpi) { --k: var(--q3-k-neutro); }
.content-wrapper .axr-r-tot > b, .content-wrapper .geo-kpi__n { color: var(--q-text-1) !important; }
.content-wrapper div.ro-kpi[class] { --k: var(--c, var(--q3-k-neutro)); }
.content-wrapper div.kpi-card[class] { --k: var(--kpi-color, var(--q3-k-azul)); }

/* ── VIS-020 · el color de un botón dice qué hace, en todas las pantallas ──────────────────────
   La forma ya era una (38 px, radio 8, 13 px en 260 de 296 botones); el color no: «Cancelar»
   salía rojo en 8 pantallas, «Regresar» en cinco colores, «Buscar» azul en 4 y verde en 64,
   «Descargar» ámbar, verde o cian… Aquí el color sale del SIGNIFICADO del botón —su ícono y,
   si lo tiene, su id (el id manda)—, no de la clase que eligió cada vista. Queda lo que ya
   usaba la mayoría:
     Buscar verde · Limpiar rojo · Nuevo / Agregar azul · Guardar / Registrar verde oscuro ·
     Excel / Descargar verde oscuro · PDF rojo oscuro · Imprimir cian ·
     Regresar / Volver / Cancelar / Cerrar NARANJA (nunca rojo ni gris).
   No toca los botones chicos de las filas de las tablas ni los de contorno o enlace. */
:root {
  --q3-b-buscar: #22C55E; --q3-b-limpiar: #EF4444; --q3-b-nuevo: #2563EB; --q3-b-guardar: #16A34A;
  --q3-b-excel: #16A34A; --q3-b-pdf: #B91C1C; --q3-b-imprimir: #0891B2; --q3-b-volver: #EA580C;
}
.content-wrapper :is(.btn, .q-btn):not(.btn-sm, .btn-xs, .q-btn--s, .btn-close, .btn-link, [class*="btn-outline"]):not(table *):is(
  :has(> :is(.bi-search, .bi-eraser, .bi-plus, .bi-plus-lg, .bi-plus-circle, .bi-check-lg, .bi-save, .bi-floppy, .bi-file-earmark-excel, .bi-file-excel, .bi-filetype-xlsx, .bi-download, .bi-file-earmark-pdf, .bi-file-pdf, .bi-filetype-pdf, .bi-printer, .bi-reply, .bi-arrow-left, .bi-arrow-return-left, .bi-x-lg, .bi-x-circle)),
  #btnBuscar, #btnLimpiar, #btnNuevo, #btnAgregar, #modalagregar, #btnRegistrar, #btnGuardar, #btnGuardarEditar, #btnExportar, #btnReporteInventario, #btnCancelar, #btnRegresar, #btnVolver, #btnRegresarAlquiler) {
  background: var(--qb) !important; border-color: var(--qb) !important; color: #FFFFFF !important;
}
.content-wrapper :is(.btn, .q-btn):not(table *):has(> .bi-search)                                   { --qb: var(--q3-b-buscar); }
.content-wrapper :is(.btn, .q-btn):not(table *):has(> .bi-eraser)                                   { --qb: var(--q3-b-limpiar); }
.content-wrapper :is(.btn, .q-btn):not(table *):has(> :is(.bi-plus, .bi-plus-lg, .bi-plus-circle))  { --qb: var(--q3-b-nuevo); }
.content-wrapper :is(.btn, .q-btn):not(table *):has(> :is(.bi-check-lg, .bi-save, .bi-floppy))      { --qb: var(--q3-b-guardar); }
.content-wrapper :is(.btn, .q-btn):not(table *):has(> :is(.bi-file-earmark-excel, .bi-file-excel, .bi-filetype-xlsx, .bi-download)) { --qb: var(--q3-b-excel); }
.content-wrapper :is(.btn, .q-btn):not(table *):has(> :is(.bi-file-earmark-pdf, .bi-file-pdf, .bi-filetype-pdf)) { --qb: var(--q3-b-pdf); }
.content-wrapper :is(.btn, .q-btn):not(table *):has(> .bi-printer)                                  { --qb: var(--q3-b-imprimir); }
.content-wrapper :is(.btn, .q-btn):not(table *):has(> :is(.bi-reply, .bi-arrow-left, .bi-arrow-return-left, .bi-x-lg, .bi-x-circle)) { --qb: var(--q3-b-volver); }
/* El id, si existe, manda sobre el ícono. */
.content-wrapper #btnBuscar                                          { --qb: var(--q3-b-buscar); }
.content-wrapper #btnLimpiar                                         { --qb: var(--q3-b-limpiar); }
.content-wrapper :is(#btnNuevo, #btnAgregar, #modalagregar)          { --qb: var(--q3-b-nuevo); }
.content-wrapper :is(#btnRegistrar, #btnGuardar, #btnGuardarEditar)  { --qb: var(--q3-b-guardar); }
.content-wrapper :is(#btnExportar, #btnReporteInventario):not(:has(> :is(.bi-file-earmark-pdf, .bi-file-pdf, .bi-filetype-pdf))) { --qb: var(--q3-b-excel); }
.content-wrapper :is(#btnCancelar, #btnRegresar, #btnVolver, #btnRegresarAlquiler) { --qb: var(--q3-b-volver); }

/* ── VIS-021 · la tarjeta de Bootstrap (.card) se ve igual que el panel común (.q-panel) ───────
   83 pantallas siguen escritas con .card / .card-header / .card-body. Se parecían al panel pero
   no eran iguales: cabecera de 35 px con 9 px 14 px de relleno (el panel: 40 px, 0 20 px), título
   en 700 (900), cuerpo con 10 px 14 px (14 px) y, en 14 reportes, cabecera AZUL FIJA #1e3a8a que
   no seguía la paleta (report-view.css). Aquí la tarjeta toma los mismos tokens del panel. Así se
   igualan sin reescribir el marcado de 83 vistas (y sin riesgo para su lógica). */
.content-wrapper .card:not(.modal .card, .text-center) {
  border-radius: var(--q-panel-radius, 10px) !important; box-shadow: var(--q-shadow-card, 0 1px 3px rgba(0,0,0,.08)) !important;
}
.content-wrapper .card:not(.modal .card, .text-center) > .card-header,
section.content .card:not(.text-center) .card-header {
  align-items: center; justify-content: space-between; gap: 8px;
  /* sin «display»: algunas cabeceras se ocultan con style="display:none" y deben seguir así */
  min-height: var(--q-panel-header-h, 40px) !important; padding: 11px var(--q-panel-header-pad-x, 20px) !important; box-sizing: border-box !important;
  background: var(--q-panel-header-bg, var(--q-theme-dark)) !important; color: var(--q-panel-header-fg, #FFFFFF) !important;
  border-radius: var(--q-panel-radius, 10px) var(--q-panel-radius, 10px) 0 0 !important; border-bottom: 0 !important;
}
.content-wrapper .card:not(.modal .card, .text-center) > .card-header :is(.card-title, h3, h4, strong),
section.content .card:not(.text-center) .card-header :is(h3, .card-title) {
  margin: 0 !important; color: var(--q-panel-header-fg, #FFFFFF) !important;
  font-size: var(--q-font-size-md, 13px) !important; font-weight: 900 !important;
  text-transform: uppercase !important; letter-spacing: .04em !important; line-height: 1.2 !important;
}
.content-wrapper .card:not(.modal .card, .text-center) > :is(.card-body, .card-collapse > .card-body) { padding: var(--q-panel-body-padding, 14px) !important; }

/* Lo demás que report-view.css pintaba con el azul fijo: sigue la paleta. */
.content-wrapper .rv-tab.active { background: var(--q-theme-dark) !important; border-color: var(--q-theme-dark) !important; color: #FFFFFF !important; }
.content-wrapper .rv-section-title { background: var(--q-theme-dark) !important; }
.content-wrapper .rv-eerr-total { background: var(--q-theme-dark) !important; }
body.dark-mode .content-wrapper :is(.rv-tab.active, .rv-section-title, .rv-eerr-total) { background: var(--q-theme-darker) !important; }

/* «Datos Generales», «Detalle»…: el título del grupo de campos (legend) pasa de 24 px fino a
   rótulo de sección, del mismo tamaño que la cabecera del panel pero en el color del texto. */
.content-wrapper legend.scheduler-border, .content-wrapper fieldset > legend {
  float: none !important; width: auto !important; margin: 0 0 8px !important; padding: 0 8px !important;
  font-size: var(--q-font-size-md, 13px) !important; font-weight: 800 !important; line-height: 1.4 !important;
  text-transform: uppercase !important; letter-spacing: .05em !important; color: var(--q-text-1) !important;
}

/* ── VIS-022 · en modo oscuro, ningún campo queda blanco ────────────────────────────────────────
   La regla oscura de los campos alcanzaba sólo a .form-control, .form-select, .q-input… Los
   campos con estilo propio (Nota de alquiler .nr-input, buscador de Alquileres, fechas y caja de
   Anulados, opciones de Etiquetas, Asociaciones) seguían blancos con letra negra. Aquí, cualquier
   campo de texto, lista o área de texto toma el mismo fondo oscuro; los de sólo lectura, el suyo. */
body.dark-mode .content-wrapper :is(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=button], [type=submit], [type=reset], [type=image]), select, textarea) {
  background-color: #0F1620 !important; color: var(--q-text-1) !important; border-color: var(--q-border) !important;
}
body.dark-mode .content-wrapper :is(input, select, textarea):is([readonly], :disabled) { background-color: #1A2230 !important; color: var(--q-text-2) !important; }
body.dark-mode .content-wrapper :is(input, textarea)::placeholder { color: var(--q-text-2) !important; opacity: .75; }
body.dark-mode .content-wrapper select option { background-color: #0F1620; color: var(--q-text-1); }

/* ── VIS-025 · dos títulos y un distintivo en todo el sistema ─────────────────────────────────
   Medido el 20-oct-2026: 5 estilos de título y 14 de distintivo.
   1. Título de panel: la cabecera oscura. La .card-header con el texto suelto (sin <strong> ni
      .card-title, 71 pantallas) quedaba en letra normal; las demás en negrita mayúscula. Ahora
      todas como .q-panel__header: 13 px, negrita, mayúsculas, .04em. */
.content-wrapper .card:not(.modal .card, .text-center) > .card-header,
section.content .card:not(.text-center) .card-header {
  font-size: var(--q-font-size-md, 13px) !important; font-weight: 900 !important;
  text-transform: uppercase !important; letter-spacing: .04em !important; line-height: 1.2 !important;
}
.content-wrapper .card:not(.modal .card, .text-center) > .card-header :is(.card-title, h3, h4, strong),
section.content .card:not(.text-center) .card-header :is(h3, .card-title) { font-weight: 900 !important; }

/* 2. Título de tablero: las pantallas que abren con un encabezado propio (título con ícono, una
      línea de ayuda debajo y sus acciones) iban de 17 a 32 px y en mayúsculas o no. Una sola
      medida. Pantalla nueva: <div class="q3-titulo"><h3><em class="bi …"></em> Título</h3><p>Ayuda</p></div>. */
.content-wrapper :is(.q3-titulo, .etq-top, .nx-hd, .anu-tit, .cj-bar__tit, .csd-cab__tit) :is(h2, h3),
.content-wrapper :is(.ro-title, .nr-h, .ro-panel-h) {
  margin: 0 !important; font-family: var(--q-font-family) !important; font-size: var(--q-font-size-md, 13px) !important;
  font-weight: 900 !important; letter-spacing: .04em !important; text-transform: uppercase !important; line-height: 1.45 !important;
  color: var(--q-text-1, #0F172A) !important;
}
.content-wrapper :is(.q3-titulo, .etq-top, .nx-hd, .anu-tit, .cj-bar__tit, .csd-cab__tit) :is(h2, h3) > .bi { color: var(--q-theme-dark); margin-right: 4px; }
.content-wrapper :is(.q3-titulo, .nx-hd, .anu-tit, .cj-bar__tit, .csd-cab__tit) p {
  margin: 2px 0 0 !important; font-size: var(--q3-fs-md, 13.5px) !important; color: var(--q-text-2, #64748B) !important;
}
.content-wrapper .q3-titulo { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; }

/* 3. Distintivo de estado: la píldora de .q-badge (999 px, 10 px, 800, mayúsculas). Las familias
      de cada pantalla toman su forma y conservan su color (el color dice el significado). No
      entran los chips que son controles: filtros activos (vt-chip), selección de etiquetas
      (etq-chip), filtros SUNAT (sb-chip). */
.content-wrapper :is(.badge:not(.q-badge), .rv-badge, .cj-pill, .vp-chip, .app-status-pill, .daykpi-pill, .chip) {
  display: inline-flex !important; align-items: center; gap: 5px; line-height: 1 !important;
  padding: 4px 10px !important; border-radius: 999px !important;
  font-size: 10px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .02em;
}
/* Etiquetas abre con una franja del color del tema: ahí el título y su ícono van en blanco. */
.content-wrapper .etq-top :is(h2, h3), .content-wrapper .etq-top :is(h2, h3) > .bi { color: #FFFFFF !important; }

/* ── VIS-026 · el primer título de cada pantalla lleva el ícono de su módulo ─────────────────
   Lo pone dist/js/quipu3-titulo.js (el ícono sale del menú). Mismo tamaño que el título de
   la cabecera «VENTAS» (13 px, 900, mayúsculas); el ícono un poco mayor y separado. Las cajas
   de ícono propias de Anulados y Consignaciones se retiran: el ícono es uno solo. */
.content-wrapper .q3-tit-ico { font-size: 15px; margin-right: 8px; vertical-align: -1px; line-height: 1; }
.content-wrapper :is(.q3-titulo, .nx-hd, .anu-tit, .cj-bar__tit, .csd-cab__tit, .ro-title, .nr-h, .ro-panel-h) .q3-tit-ico { color: var(--q-theme-dark); }
body.dark-mode .content-wrapper :is(.q3-titulo, .nx-hd, .anu-tit, .cj-bar__tit, .csd-cab__tit, .ro-title, .nr-h, .ro-panel-h) .q3-tit-ico { color: var(--q-theme-accent, #93C5FD); }
.content-wrapper :is(.anu-tit__ic, .csd-cab__ico) { display: none !important; }
.content-wrapper .q3-tit-con { display: inline-flex !important; align-items: center; gap: .3em; }
.content-wrapper .q3-tit-con > .q3-tit-ico { order: -1; margin-right: 2px; }

/* ── VIS-027 · cierre de la fase de diseño: lo último que se salía de la medida ─────────────────
   Medido el 20-oct-2026 en 129 pantallas: 279 de 296 botones de acción ya medían 38 px / radio 8 /
   letra 13. Los demás (pie de los formularios «nuevo…» con radio 10, Productos y Nueva venta con
   radio 6 y 34 px, Configurar ticket en 32 px / 12 px, Alquileres en 40 px) toman la misma medida.
   No entran los botones chicos de fila (.q-btn--s, .btn-sm), los de grupos y campos compuestos
   (input-group, btn-group: su radio lo pone el grupo) ni los de tablas, modales y menús. */
/* :not(#q3-medida) no excluye nada: suma el peso de un id para ganarles a las reglas viejas que
   fijan el radio con ids (.content #btnAgregar) o con selectores largos (modern.css). */
.content-wrapper:not(#q3-medida) :is(.btn, .q-btn):not(.btn-sm, .btn-xs, .q-btn--s, .btn-close, .btn-link, .vt-imp-main, .vt-imp-flecha):not(.input-group > *, .btn-group > *, table *, .modal *, .dropdown-menu *, .vt-menu *, .vt-split *) {
  min-height: 38px !important; border-radius: 8px !important; font-size: var(--q-font-size-md, 13px) !important;
}
.content-wrapper :is(.rental-ops, .rl-page) .q-btn:not(.q-btn--s) { height: 38px !important; }
/* «Volver a la versión nueva» de la Reposición anterior: navegar de vuelta es naranja, como Regresar. */
.content-wrapper .q3-btn-volver { background: var(--q3-b-volver) !important; border-color: var(--q3-b-volver) !important; color: #FFFFFF !important; }
/* Etiquetas: su tabla toma el relleno y la letra de todas las tablas. */
.content-wrapper .bc-tabla :is(th, td) { padding: 6px 5px !important; }
.content-wrapper .bc-tabla td { font-size: 12px !important; }

/* ── UX-ATA-001 · panel de atajos de teclado (tecla ?) ── */
.q3-atajos { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgba(15,23,42,.45); padding: 16px; }
.q3-atajos__caja { width: min(420px, 100%); background: var(--q-surface, #fff); color: var(--q-text-1, #1E293B); border: 1px solid var(--q-border, #E2E8F0); border-radius: 12px; box-shadow: 0 20px 50px rgba(15,23,42,.3); padding: 14px 18px; display: grid; gap: 6px; }
.q3-atajos__tit { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.q3-atajos__x { margin-left: auto; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--q-text-2, #64748B); cursor: pointer; }
.q3-atajos__fila { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 4px 0; border-top: 1px solid var(--q-border, #F1F5F9); }
.q3-atajos__fila span { margin-left: auto; color: var(--q-text-2, #475569); }
.q3-atajos kbd { font-family: var(--q3-font-mono, monospace); font-size: 11.5px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--q-border, #CBD5E1); border-bottom-width: 2px; background: var(--q-surface-2, #F8FAFC); color: var(--q-text-1, #1E293B); }
.q3-atajos__pie { font-size: 11.5px; color: var(--q-text-2, #64748B); margin-top: 4px; }

/* ── UX-VAC-001 · tabla vacía que explica y ofrece el paso siguiente ── */
.content-wrapper td.dataTables_empty { padding: 18px 12px !important; background: var(--q-surface, #fff) !important; }
.q3-vacia { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; text-align: left; max-width: 640px; }
.q3-vacia > .bi { font-size: 26px; color: var(--q-text-2, #94A3B8); }
.q3-vacia b { display: block; font-size: 13px; color: var(--q-text-1, #1E293B); text-transform: none; }
.q3-vacia span { display: block; font-size: 12px; color: var(--q-text-2, #64748B); text-transform: none; }
.q3-vacia__btn { border: 1px solid var(--q-border, #CBD5E1); background: var(--q-surface, #fff); color: var(--q-text-1, #1E293B); border-radius: 8px; font-size: 12px; font-weight: 700; padding: 6px 12px; cursor: pointer; }
.q3-vacia__btn:hover { background: var(--q-surface-2, #F1F5F9); }
.q3-vacia__btn--nuevo { background: var(--q3-b-nuevo, #2563EB); border-color: var(--q3-b-nuevo, #2563EB); color: #fff; }
.q3-vacia__btn--nuevo:hover { background: #1D4ED8; }

/* ── UX-BUS-001 · resultados del buscador único de producto ── */
.q3-pr { display: grid; gap: 2px; line-height: 1.25; }
.q3-pr__nom { font-size: 12.5px; } .q3-pr__nom b { font-weight: 800; }
.q3-pr__marca { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .7; margin-left: 4px; }
.q3-pr__dat { display: flex; gap: 10px; font-size: 11px; }
.q3-pr__stock { font-weight: 700; color: #15803D; } .q3-pr__stock--cero { color: #B91C1C; }
.select2-results__option--highlighted .q3-pr__stock, .select2-results__option--highlighted .q3-pr__stock--cero { color: inherit; }
.q3-pr__precio { opacity: .85; }

/* ── UX-FIN-001 · el paso siguiente al terminar un documento ── */
.q3-fin { display: grid; gap: 8px; text-align: left; margin-top: 4px; }
.q3-fin__btn { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none !important; color: #fff !important; font-size: 13px; }
.q3-fin__btn:hover, .q3-fin__btn:focus-visible { filter: brightness(1.08); outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.3); }
.q3-fin__btn .bi { font-size: 18px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.2); flex: 0 0 30px; }
.q3-fin__btn b { display: block; font-weight: 800; }
.q3-fin__btn small { display: block; font-size: 11.5px; opacity: .9; }
.q3-fin__btn--cobrar { background: #16A34A; } .q3-fin__btn--imprimir { background: #0E7490; } .q3-fin__btn--guia { background: #4F46E5; }
.q3-fin__btn--nuevo { background: var(--q3-b-nuevo, #2563EB); } .q3-fin__btn--lista { background: var(--q-surface-2, #F1F5F9); color: var(--q-text-1, #1E293B) !important; }
.q3-fin__btn--lista .bi { background: rgba(15,23,42,.08); }
.q3-fin__btn:not(.q3-fin__btn--lista) :is(b, small, span, .bi) { color: #FFFFFF !important; }
.q3-fin__btn--lista :is(b, small, span, .bi) { color: var(--q-text-1, #1E293B) !important; }

/* UX-CAM-002 · campana de documentos por enviar a SUNAT: botón compacto con la campana y el número,
   ámbar dentro del plazo y rojo cuando urge. Los selectores repiten la ruta de modern.css
   (.navbar .nav > li > a) para ganarle al blanco de la barra. */
body .main-header .navbar .nav > li > a.topbar-icon-btn.ns-campana,
body.skin-peru.layout-topnav .main-header .navbar .nav > li > a.topbar-icon-btn.ns-campana {
  width: auto !important; height: 34px !important; padding: 0 12px 0 10px !important; gap: 6px !important;
  border-radius: 999px !important; color: #fff !important; background: var(--q3-cam, #DC2626) !important;
  box-shadow: 0 2px 8px var(--q3-cam-sombra, rgba(220,38,38,.45)) !important;
}
body .main-header .navbar .nav > li > a.topbar-icon-btn.ns-campana:hover,
body.skin-peru.layout-topnav .main-header .navbar .nav > li > a.topbar-icon-btn.ns-campana:hover { background: var(--q3-cam-hover, #B91C1C) !important; color: #fff !important; }
body .main-header .navbar .nav > li > a.topbar-icon-btn.ns-campana > i.bi.bi-bell-fill,
body.skin-peru.layout-topnav .main-header .navbar .nav > li > a.topbar-icon-btn.ns-campana > i.bi.bi-bell-fill,
body.skin-peru.layout-topnav .main-header .navbar .nav > li > a.topbar-icon-btn.ns-campana:hover > i.bi.bi-bell-fill { color: #fff !important; font-size: 16px !important; transform-origin: 50% 10%; animation: q3-campana 2.4s ease-in-out 1; }
.ns-campana--rojo  { --q3-cam: #DC2626; --q3-cam-hover: #B91C1C; --q3-cam-sombra: rgba(220,38,38,.45); }
.ns-campana--ambar { --q3-cam: #D97706; --q3-cam-hover: #B45309; --q3-cam-sombra: rgba(217,119,6,.45); }
.ns-campana__n { font-size: 13px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
@keyframes q3-campana { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(14deg); } 82% { transform: rotate(-12deg); } 89% { transform: rotate(8deg); } 95% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .main-header a.ns-campana > .bi { animation: none !important; } }

/* UX-FIL-002 · Etiquetas de filtro activo (las de Ventas, ahora comunes; las arma dist/js/quipu3-filtros.js). */
.vt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border: 1px solid var(--q3-borde-3, #cbd5e1); border-radius: 16px; background: var(--q3-fondo-2, #f8fafc); font-size: var(--q3-fs-sm); color: var(--q3-texto-2, #334155); white-space: nowrap; max-width: 320px; }
.vt-chip b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.vt-chip--fecha { padding-right: 10px; background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.vt-chip button { border: 0; background: none; padding: 0 2px; line-height: 1; color: var(--q3-texto-4, #64748b); cursor: pointer; }
.vt-chip button:hover { color: #b91c1c; }
.vt-quitar { border: 0; background: none; padding: 0 4px; font-size: var(--q3-fs-sm); font-weight: 700; color: #b91c1c; text-decoration: underline; cursor: pointer; }
.q3-filtros { margin: 10px 0 4px; }
.q3-filtros:empty { display: none; }

/* UX-VAL-001 · Campo con un problema al salir de él (dist/js/quipu3-validar.js). */
.q3-invalido, .q3-invalido.select2 .select2-selection { border-color: #DC2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important; }
.q3-error-campo { margin-top: 4px; font-size: var(--q3-fs-xs, 11.5px); font-weight: 600; color: #B91C1C; line-height: 1.3; }