/* =======================================================================
   CP-Cotizador-CN - main.css
   Estandar visual CN - portado 1:1 desde CP-Portal-FlujoCaja-CN
   Principio de homogeneidad: transicion visual seamless entre apps CN.
   NO modificar variables/login/header/botones sin sincronizar ecosistema.
   Fase 0 - Andamiaje
   ======================================================================= */

:root {
  /* Paleta corporativa CN - V0.1.1 §5.2 */
  --navy:        #1b2347;
  --gold:        #c9a227;
  --accent:      #1a4fa8;

  /* Texto */
  --text:        #1f2937;
  --text-muted:  #64748b;
  --text-light:  #94a3b8;

  /* Fondos */
  --bg:          #f8fafc;
  --bg-card:     #ffffff;
  --bg-hover:    #f1f5f9;

  /* Bordes */
  --border:      #e2e8f0;
  --border-strong: #cbd5e1;

  /* Semanticos */
  --success:     #16a34a;
  --success-bg:  #dcfce7;
  --warning:     #d97706;
  --warning-bg:  #fef3c7;
  --danger:      #dc2626;
  --danger-bg:   #fee2e2;
  --info:        #0284c7;
  --info-bg:     #e0f2fe;

  /* Diferenciacion origen Notion vs App - R-UI.2 */
  --notion-accent: var(--navy);
  --app-accent:    var(--gold);

  /* Aliases de homologacion con ecosistema CN (CP-Portal-Asistencia-CN, etc).
     Estas variables duplican semanticamente a otras del mismo :root, pero
     se mantienen para que el CSS portado de otras apps funcione 1:1 sin
     renombrar. Principio de homogeneidad V0.3 §12. */
  --white:       #ffffff;
  --muted:       #7a8299;
  --navy-mid:    #243060;
  --gold-light:  #f0e4b0;
  --accent-h:    #153d85;
  --warn:        var(--warning);
  --warn-bg:     var(--warning-bg);
  --accent-bg:   #eef2fb;
  --border2:     #d0d4db;

  /* Tipografia */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12);

  /* Layout */
  --header-height: 60px;
  --context-bar-height: 48px;
  --content-max-width: 1280px;

  /* Transiciones */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}

/* =======================================================================
   Reset y base
   ======================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =======================================================================
   SCREENS (SPA pattern ecosistema CN)
   ======================================================================= */

.screen { display: none; }
.screen.active { display: block; }

/* Oculta el header global cuando estamos en Login */
body.show-login header { display: none; }
body.show-login .nav-global { display: none; }

/* =======================================================================
   TABS base (Fase A.4.0)
   Patron canonico POM-Builder-CN lineas 88-93 - reutilizable para
   nav global y sub-tabs internos de secciones.
   ======================================================================= */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
}
.tab-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  padding: 12px 20px;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
  color: var(--navy);
  border-bottom-color: var(--navy);
  font-weight: 600;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* =======================================================================
   NAV GLOBAL (Fase A.4.0)
   Barra de navegacion entre pantallas principales (Caja, Ingresos, ...).
   Reutiliza .tab-btn del ecosistema POM con contenedor propio .nav-global.
   Se oculta durante el Login via body.show-login.
   ======================================================================= */
.nav-global {
  display: flex;
  gap: 0;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  position: sticky;
  top: 60px; /* altura del header */
  z-index: 90;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.nav-global .tab-btn {
  padding: 14px 22px;
  font-size: 13px;
}
@media (max-width: 768px) {
  .nav-global { padding: 0 12px; }
  .nav-global .tab-btn { padding: 12px 14px; font-size: 12px; }
}

/* =======================================================================
   HEADER (visible post-login, patron canonico Asistencia)
   Portado de CP-Portal-Asistencia-CN lineas 41-70 — homologacion 1:1
   ======================================================================= */

header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.logo { display: flex; align-items: center; gap: 12px; }
.logo-isotipo { height: 46px; width: auto; }
.logo-divider { width: 1px; height: 28px; background: var(--border); margin: 0 2px; }
.logo-text { line-height: 1.25; }
.logo-name { font-size: 14px; font-weight: 600; color: var(--navy); letter-spacing: 0.01em; }
.logo-sub { font-size: 11px; color: var(--muted); }

.user-badge {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--muted);
}
.user-badge.visible { display: flex; }
.user-badge strong { color: var(--text); font-weight: 500; }
.btn-header-out {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 500;
  transition: color 0.15s;
}
.btn-header-out:hover { color: var(--danger); }

/* =======================================================================
   LOGIN (portado 1:1 desde CP-Portal-Asistencia-CN lineas 77-156)
   Principio de homogeneidad V0.3 §12 - NO modificar sin sincronizar
   con las otras apps del ecosistema CN.
   ======================================================================= */

/* Aplica tambien a #screen-otp: el OTP es parte del flujo de login y
   debe centrarse igual (fix 2026-05-27, post-Fase 0). */
#screen-login-admin,
#screen-otp {
  display: none;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}
#screen-login-admin.active,
#screen-otp.active { display: flex; }

.login-wrap { width: 100%; max-width: 420px; }

.login-logo-block { text-align: center; margin-bottom: 28px; }
.login-logo-block img {
  display: block;
  margin: 0 auto 10px;
  max-width: 260px;
  height: auto;
}
.login-logo-block p { font-size: 13px; color: var(--muted); margin-top: 6px; }

.login-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Banner navy full-width con candado gold - marca Admin */
.admin-login-banner {
  background: var(--navy);
  padding: 11px 20px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -32px -28px 24px -28px;
  border-radius: 9px 9px 0 0;
}

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 7px;
}
.field input,
.field select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}
.field input:focus,
.field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26, 79, 168, 0.1);
  background: var(--white);
}
.field input::placeholder { color: #b0b8cc; }
.field-hint { font-size: 11px; color: var(--muted); margin-top: 5px; }

.btn-primary {
  width: 100%;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary:hover { background: #0f1630; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.spinner {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.spinner.active { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.error-msg {
  background: var(--danger-bg);
  border: 1px solid #f5c5c5;
  border-radius: 6px;
  color: var(--danger);
  font-size: 12px;
  padding: 10px 14px;
  margin-top: 14px;
  display: none;
}
.error-msg.visible { display: block; }

.success-msg {
  background: var(--success-bg);
  border: 1px solid #a8dbc5;
  border-radius: 6px;
  color: var(--success);
  font-size: 12px;
  padding: 10px 14px;
  margin-top: 14px;
  display: none;
}
.success-msg.visible { display: block; }

/* =======================================================================
   SCREEN-CAJA - Pantalla principal del Panel de Control
   Fase A.3.a - Layout .container (POM) + .admin-top (Asistencia) +
   .resumen-global-card (Asistencia) con extensiones para Cuentas Bancarias.
   ======================================================================= */

/* =======================================================================
   SCREEN CONTENT LAYOUT (aplicable a todas las screens post-login)
   Fase A.4.0.1 - generalizacion del layout (antes era solo #screen-caja).
   Aplicar clase .screen-content a toda screen principal para que herede
   max-width, centrado y padding. Evita duplicar la regla por cada screen
   nueva (A.4.a Ingresos, futura A.6 Dashboard, A.7 Egresos, etc).
   ======================================================================= */
.screen-content {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 28px 20px 60px;
}
.screen-content .container {
  padding: 0;
}

/* Wrapper reutilizable portado de POM-Builder-CN linea 80 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px;
}

/* Section header portado de CP-Portal-Asistencia-CN lineas 464-471 */
.admin-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.admin-title h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
}
.admin-title p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.admin-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Boton outline navy (Actualizar) - portado de Asistencia lineas 473-479 */
.btn-secondary {
  background: #fff;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.btn-secondary:hover {
  background: var(--navy);
  color: #fff;
}
.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Card contenedor de seccion - portado de POM linea 84 */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
  margin-bottom: 20px;
}
.card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Grid de cards globales - portado de Asistencia linea 774
   Modificado a auto-fit para soportar N variable de cuentas
   (CN-H4: patron usado en kpi-row de Tareas-OPS linea 658) */
.resumen-globales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 0;
}

/* Card individual - portado textual de Asistencia lineas 778-788 */
.resumen-global-card {
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 16px;
  text-align: center;
  transition: transform 0.1s;
}
.resumen-global-card.gold {
  border-color: var(--gold);
}
.resumen-global-card.gold .resumen-global-val {
  color: var(--gold);
}
.resumen-global-card.alert {
  border-color: var(--danger);
}
.resumen-global-card.alert .resumen-global-val {
  color: var(--danger);
}
.resumen-global-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.resumen-global-lbl {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Extension propia de FlujoCaja: detalle de cuenta (banco + numero)
   Se suma a .resumen-global-card para mostrar identificacion bancaria */
.cuenta-detalle {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.cuenta-banco {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.cuenta-numero {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Sub-stats de la cuenta (Total Abonos / Total Cargos) */
.cuenta-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  gap: 8px;
}
.cuenta-stat {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cuenta-stat-lbl {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.cuenta-stat-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cuenta-stat-neg {
  color: var(--danger);
}

/* Estados: loading, empty, error */
.cuentas-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 16px;
  color: var(--muted);
  font-size: 13px;
}
.spinner-navy {
  border-color: rgba(27, 35, 71, 0.25);
  border-top-color: var(--navy);
}
.empty-msg {
  text-align: center;
  padding: 32px 16px;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

/* =======================================================================
   MOVIMIENTOS - Filtros y tabla unificada Cargos + Abonos
   Fase A.3.b - portado textual de CP-Portal-Asistencia-CN
   Filtros: lineas 502-534
   Tabla: lineas 537-570
   ======================================================================= */

/* Counter junto al card-title "Movimientos" */
.card-title-counter {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Filtros admin - portado 1:1 de Asistencia 502-534 */
.admin-filters {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px 12px;
  align-items: end;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.filter-group label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.filter-group select,
.filter-group input {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
  height: 36px;
}
.filter-group input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  height: 36px;
  line-height: normal;
}
.filter-group select:focus,
.filter-group input:focus {
  border-color: var(--accent);
}
.btn-filter-clear {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  padding: 7px 12px;
  cursor: pointer;
  transition: all 0.15s;
  align-self: flex-end;
  white-space: nowrap;
  width: 100%;
  height: 36px;
}
.btn-filter-clear:hover {
  border-color: var(--danger);
  color: var(--danger);
}
/* PATCH.25.9.22 - Separación específica para el botón Limpiar filtros
   en la barra Movimientos. El campo de búsqueda lo precede en el grid
   y, en algunos anchos de viewport, se veían visualmente pegados sin
   aire entre ellos. margin-left fuerza separación clara solo en este
   contexto, sin afectar otras barras de filtros del app. */
.admin-filters #btn-filter-clear {
  margin-left: 10px;
}

/* Tabla - portado 1:1 de Asistencia 537-570 */
.table-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 600px;
  overflow-y: auto;
}
.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table-scroll thead th {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 11px 14px;
  text-align: left;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.table-scroll tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.table-scroll tbody tr:last-child {
  border-bottom: none;
}
.table-scroll tbody tr:hover {
  background: #f8f9fb;
}
.table-scroll tbody td {
  padding: 11px 14px;
  color: var(--text);
  vertical-align: middle;
}
.td-muted {
  color: var(--muted);
}
.td-monto {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.td-monto-positivo {
  color: var(--success);
}
.td-monto-negativo {
  color: var(--danger);
}
.td-fecha {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.td-cuenta {
  font-size: 12px;
  color: var(--muted);
}
.td-cuenta strong {
  color: var(--text);
  font-weight: 500;
}

/* Badges de tipo (Abono / Cargo) */
.badge-tipo {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-tipo-abono {
  background: var(--success-bg);
  color: var(--success);
}
.badge-tipo-cargo {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Badges de estado para Facturas (Fase A.4.a)
   Reutilizan la base .badge-tipo con variantes por estado. */
.badge-estado-pagada {
  background: var(--success-bg);
  color: var(--success);
}
.badge-estado-pendiente,
.badge-estado-emitida,
.badge-estado-enviada {
  background: var(--warning-bg);
  color: var(--warning);
}
.badge-estado-vencida,
.badge-estado-rechazada,
.badge-estado-anulada {
  background: var(--danger-bg);
  color: var(--danger);
}
/* A.5.e.1.PATCH.16-B: 2 estados nuevos diferenciados por color.
   Vencido Facturación = naranjo (warning) | Vencido Pago = rojo (danger) */
.badge-estado-vencido-fact {
  background: var(--warning-bg, #fff4e0);
  color: var(--warning, #d68800);
}
.badge-estado-vencido-pago {
  background: var(--danger-bg);
  color: var(--danger);
}
.badge-estado-neutral {
  background: #e7ecf3;
  color: var(--muted);
}
/* PATCH.25.9.24: badge para egresos Proyectados con fecha estimada
   en el pasado. Indica que el cargo bancario probablemente ya ocurrió
   y el egreso debe marcarse como Ejecutado para evitar doble conteo
   en la proyección. Estilo: inline pequeño (no es columna propia),
   tono warning/naranjo consistente con badge-estado-vencida-fact. */
.badge-vencido-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 10px;
  background: var(--warning-bg, #fff4e0);
  color: var(--warning, #d68800);
  border: 1px solid var(--warning, #d68800);
  vertical-align: middle;
  white-space: nowrap;
  cursor: help;
}
/* PATCH.25.9.27 — Caja informativa global reutilizable.
   Replica el estilo del banner usado en el importador de cartola
   (.modal-cartola .cartola-info-box) pero como clase utilitaria
   global para usar en cualquier modal. Variantes:
     .info-box                 — info neutra (azul/navy)
     .info-box.info-box-warn   — advertencia (amarillo, default para modales)
     .info-box.info-box-error  — error (rojo)
     .info-box.info-box-success— éxito (verde) */
.info-box {
  background: #f7f9fc;
  border-left: 3px solid var(--navy);
  padding: 10px 14px;
  border-radius: 0 4px 4px 0;
  margin: 4px 0 12px;
  font-size: 12px;
  color: var(--navy);
  line-height: 1.5;
}
.info-box strong { font-weight: 600; }
.info-box p { margin: 0 0 6px; }
.info-box p:last-child { margin-bottom: 0; }
.info-box.info-box-warn {
  border-left-color: #b07d00;
  background: #fef9ed;
  color: #5a4200;
}
.info-box.info-box-error {
  border-left-color: #c73838;
  background: #fdeded;
  color: #6b1818;
}
.info-box.info-box-success {
  border-left-color: #2d7a3a;
  background: #ecf6ee;
  color: #1c4a23;
}
/* PATCH.25.9.27 — Botón mini "+" inline al lado de un select para
   agregar opciones rápidamente (ej. nuevos tipos de egreso).
   Diseñado para encajar dentro del label del field SIN romper el
   layout vertical del modal. */
.field-inline-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  padding: 0;
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s ease, color 0.15s ease;
}
.field-inline-add-btn:hover {
  background: var(--navy);
  color: var(--white);
}
.field-inline-add-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* PATCH.25.9.47 — Botón inline cuadrado tipo "Editar fecha" del drawer.
   Reemplaza al field-inline-add-btn redondito en el modal de egresos.
   Mismo lenguaje visual que el botón del PATCH.25.9.39 en doctos. */
.field-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.4;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s ease, color 0.15s ease;
}
.field-action-btn:hover {
  background: var(--navy);
  color: var(--white);
}
.field-action-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.field-action-btn svg {
  flex-shrink: 0;
}

/* =======================================================================
   BADGES CON COLORES OFICIALES DE NOTION (Fase A.4.e)
   Coherencia visual multi-sistema: la app muestra el estado con el
   mismo color que Felipe uso en Notion al crear la BD.
   Mapeo de los 10 colores de Notion (select/status) a variantes de
   background + color. Valores tomados de la paleta oficial de Notion
   (background con opacidad baja, texto mas saturado).
   ======================================================================= */
/* A.5.c.2.1.PATCH.2 - Estados sin colores en TODA la app.
   Felipe: el estilo CN debe ser transversal (navy + gold + grises azulados),
   sin "semaforos" de color en los estados. Reemplazamos los fondos
   coloreados por texto plano en mayuscula con peso bold y color navy.
   Los 10 colores de Notion ahora renderizan identico, sin diferenciacion
   visual mas alla del propio nombre del estado. */
.badge-notion-default,
.badge-notion-gray,
.badge-notion-brown,
.badge-notion-orange,
.badge-notion-yellow,
.badge-notion-green,
.badge-notion-blue,
.badge-notion-purple,
.badge-notion-pink,
.badge-notion-red {
  background: transparent;
  color: var(--navy);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 0;
  border-radius: 0;
}

/* Estado loading/empty de la tabla */
.table-state-row td {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
}
.table-state-row .spinner-navy {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

/* =======================================================================
   C-BIS - Barra contexto global (timestamp + refresh)
   Fase A.3.c - portado de CP-Portal-Tareas-OPS-CN .kpi-window-bar
   lineas 665-693. Adaptacion: sin opciones de ventana temporal, con
   boton Actualizar empujado al extremo derecho.
   ======================================================================= */

.kpi-window-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 20px;
}
.kpi-window-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kpi-window-label svg {
  color: var(--muted);
}
.kpi-window-hint {
  font-size: 12px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.kpi-window-hint.fresh {
  color: var(--success);
}
.kpi-window-hint.stale {
  color: var(--warning);
}
.kpi-window-hint.stale::before {
  content: '●';
  margin-right: 4px;
}

/* =======================================================================
   PERIODO-TOTALES - Totales Abonos/Cargos/Balance del rango filtrado
   Fase A.3.c. Extension propia de FlujoCaja; 3 mini-cards que se
   recalculan dinamicamente sobre los movimientos filtrados.
   ======================================================================= */

.periodo-totales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.periodo-total-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.periodo-total-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.periodo-total-val {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--navy);
}

/* Colorado por tipo */
.periodo-total-abonos {
  border-left: 3px solid var(--success);
}
.periodo-total-abonos .periodo-total-val {
  color: var(--success);
}
.periodo-total-cargos {
  border-left: 3px solid var(--danger);
}
.periodo-total-cargos .periodo-total-val {
  color: var(--danger);
}
.periodo-total-balance {
  border-left: 3px solid var(--navy);
}
.periodo-total-balance.positivo .periodo-total-val {
  color: var(--success);
}
.periodo-total-balance.negativo .periodo-total-val {
  color: var(--danger);
}
.periodo-total-balance.neutro .periodo-total-val {
  color: var(--navy);
}

/* =======================================================================
   Responsive - V0.1.1 §5.7 (400 / 600 / 768)
   ======================================================================= */

@media (max-width: 768px) {
  header { padding: 0 16px; }
  .logo-divider { display: none; }
  .logo-sub { display: none; }
  .admin-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .admin-actions { width: 100%; }
}

@media (max-width: 599px) {
  html {
    font-size: 13px;
  }
  .login-card {
    padding: 24px 20px;
  }
  .admin-login-banner {
    margin: -24px -20px 20px -20px;
  }
  .login-logo-block img {
    max-width: 200px;
  }
}

@media (max-width: 399px) {
  .login-wrap {
    max-width: 100%;
  }
}

/* =======================================================================
   DRAWER LATERAL (Fase A.4.d)
   Panel que se desliza desde la derecha con detalle de item
   (factura / cotizacion / servicio / oportunidad). Extension propia
   de FlujoCaja - no existe patron equivalente en ecosistema CN
   (las 3 apps usan modal centrado .modal-overlay). Documentado como
   nuevo componente.
   ======================================================================= */

/* Overlay semi-transparente que cubre el viewport cuando el drawer
   esta abierto. Click para cerrar. */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 33, 55, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  z-index: 300;
}
.drawer-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}

/* Panel lateral. Posicionado fuera de pantalla por default
   (translateX(100%)), entra con animacion al abrir. */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 92vw;
  background: var(--white);
  box-shadow: -4px 0 24px rgba(13, 33, 55, 0.18);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 310;
  display: flex;
  flex-direction: column;
  visibility: hidden;
}
.drawer.open {
  transform: translateX(0);
  visibility: visible;
}

/* A.5.e.2.PATCH.23: drawer secundario apilado sobre el primario.
   Usado para abrir info de un cargo asociado desde un docto sin
   perder el contexto del docto. z-index mayor que el primario,
   levemente desplazado (right offset) para visual de pila. */
.drawer-overlay-secondary {
  z-index: 320;
  background: rgba(13, 33, 55, 0.32);
}
.drawer-secondary {
  z-index: 330;
  width: 460px;
  max-width: 90vw;
}

/* Header fijo del drawer */
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  flex-shrink: 0;
}
.drawer-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
  margin-left: 12px;
}
.drawer-close:hover {
  background: var(--bg);
  color: var(--navy);
}

/* Body scrolleable */
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
}

/* Footer con el boton Ver en Notion */
.drawer-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Filas de detalle dentro del drawer: label + value */
.drawer-field {
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
}
.drawer-field:last-child {
  border-bottom: none;
}
.drawer-field-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.drawer-field-value {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  word-break: break-word;
}
.drawer-field-value.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
}
.drawer-field-value.monto {
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}
.drawer-field-value.monto.negativo {
  color: var(--danger);
}

/* Link Ver en Notion (boton gold del ecosistema CN) */
.drawer-btn-notion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
  padding: 10px 14px;
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, transform 0.05s;
}
.drawer-btn-notion:hover {
  background: #0a1a2b;
  color: var(--white);
}
.drawer-btn-notion:active {
  transform: translateY(1px);
}

/* A.5.c.0.3: Boton de accion primaria en drawer (ej. 'Cambiar estado'
   en docto). Gold solido para distinguir accion de navegacion. */
.drawer-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
  padding: 10px 14px;
  background: var(--gold);
  color: var(--navy);
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, transform 0.05s;
}
.drawer-btn-action:hover {
  background: #b89440;
}
.drawer-btn-action:active {
  transform: translateY(1px);
}

/* Filas clickeables en las tablas (cursor + hover mas notorio) */
.table-scroll tbody tr.clickable {
  cursor: pointer;
}
.table-scroll tbody tr.clickable:hover {
  background: #eef2fb;
}

/* Responsive: en mobile el drawer ocupa casi todo el ancho */
@media (max-width: 599px) {
  .drawer {
    width: 100%;
    max-width: 100vw;
  }
  .drawer-body {
    padding: 16px;
  }
  .drawer-header {
    padding: 14px 16px;
  }
}

/* =======================================================================
   FASE A.5 — Modal CRUD lateral + modal confirmación + toasts
   ======================================================================= */

/* Modal lateral CRUD (crear/editar) — patrón V0.3 §10.1, igual al drawer
   pero con formulario + botones [Cancelar][Guardar] fijos en footer */
.modal-crud-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 33, 55, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  /* PATCH.25.9.28: subido de 200 a 1400 para que aparezca SOBRE el drawer
     lateral (z-index 310) desde el cual normalmente se invoca el modal
     de Editar/Crear. Mantiene jerarquía: ModalCrud 1400/1401 < ModalConfirm
     1500 < toast 2000. */
  z-index: 1400;
}
.modal-crud-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.modal-crud {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 600px;
  max-width: 100vw;
  background: #fff;
  box-shadow: -8px 0 32px rgba(13, 33, 55, 0.18);
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1401;
  display: flex;
  flex-direction: column;
}
.modal-crud.open {
  transform: translateX(0);
}
.modal-crud-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--navy);
  color: #fff;
  flex-shrink: 0;
}
.modal-crud-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.modal-crud-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.modal-crud-close:hover {
  background: rgba(255, 255, 255, 0.15);
}
.modal-crud-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
.modal-crud-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: #f7f9fc;
  flex-shrink: 0;
}

/* Formulario dentro del modal */
.modal-crud-field {
  margin-bottom: 18px;
}
/* A.5.e.1.PATCH: soporte 2 columnas en el modal.
   Cuando un field declara className: 'modal-crud-field-half', el wrap
   ocupa 50% del ancho. Patron canonico reusable para grupos de campos
   cortos (numeros, fechas) que ahorran espacio vertical en el modal. */
.modal-crud-field-half {
  display: inline-block;
  width: calc(50% - 6px);
  vertical-align: top;
  box-sizing: border-box;
  margin-right: 12px;
}
.modal-crud-field-half:nth-of-type(2n) {
  margin-right: 0;
}
/* A.5.e.1.PATCH: contenido inline dentro de .modal-crud-calc (banda info)
   debe heredar la tipografia del modal, no la de los <input> hermanos
   (algunos browsers heredan font-family monospace por default en inputs).
   Forzamos var(--font-sans) en cualquier descendiente del calc. */
.modal-crud-calc, .modal-crud-calc * {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}
.modal-crud-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 6px;
}
.modal-crud-field label .required {
  color: #c0392b;
  margin-left: 2px;
}
.modal-crud-field input[type="text"],
.modal-crud-field input[type="number"],
.modal-crud-field input[type="date"],
.modal-crud-field select,
.modal-crud-field textarea {
  width: 100%;
  padding: 9px 11px;
  font-family: inherit;
  font-size: 13px;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.modal-crud-field input:focus,
.modal-crud-field select:focus,
.modal-crud-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(200, 169, 81, 0.18);
}
.modal-crud-field textarea {
  min-height: 70px;
  resize: vertical;
}
.modal-crud-field .field-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.modal-crud-field .field-error {
  font-size: 12px;
  color: #c0392b;
  margin-top: 4px;
  display: none;
}
.modal-crud-field.has-error input,
.modal-crud-field.has-error select,
.modal-crud-field.has-error textarea {
  border-color: #c0392b;
}
.modal-crud-field.has-error .field-error {
  display: block;
}

/* Grupo de radio buttons (Probabilidad) */
.modal-crud-radiogroup {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.modal-crud-radiogroup label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--navy);
  margin-bottom: 0;
  transition: all 0.15s ease;
}
.modal-crud-radiogroup label:hover {
  background: #f7f9fc;
}
.modal-crud-radiogroup input[type="radio"] {
  margin: 0;
  accent-color: var(--gold);
}
.modal-crud-radiogroup label.selected {
  border-color: var(--gold);
  background: rgba(200, 169, 81, 0.1);
}

/* Valor calculado read-only (Valor Total = neto * 1.19) */
.modal-crud-calc {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  font-family: ui-monospace, Menlo, monospace;
}
.modal-crud-calc strong {
  color: var(--navy);
  font-weight: 600;
}

/* Botones del modal */
.btn-modal {
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.btn-modal:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-modal-primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.btn-modal-primary:hover:not(:disabled) {
  background: #1a3555;
}
.btn-modal-secondary {
  background: #fff;
  color: var(--navy);
  border-color: var(--border);
}
.btn-modal-secondary:hover:not(:disabled) {
  background: #f7f9fc;
}
.btn-modal-danger {
  background: #c0392b;
  color: #fff;
  border-color: #c0392b;
}
.btn-modal-danger:hover:not(:disabled) {
  background: #a5332a;
}

/* Modal de confirmación centrado (soft-delete) */
.modal-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 33, 55, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  /* PATCH.25.9.28: subido de 210 a 1500 para que aparezca SOBRE el drawer
     lateral (z-index 310) desde el cual normalmente se invoca (botón
     Eliminar del drawer del egreso/docto/etc). El valor 1500 también
     queda sobre los modales de lote (1000-1001) por consistencia, y
     debajo del toast-stack (2000) para que los toasts emitidos durante
     el flujo de confirmación sigan visibles. */
  z-index: 1500;
}
.modal-confirm-overlay.open {
  display: flex;
}
.modal-confirm {
  width: 440px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(13, 33, 55, 0.25);
  display: flex;
  flex-direction: column;
}
.modal-confirm-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.modal-confirm-body {
  padding: 18px 20px;
  font-size: 13px;
  color: var(--navy);
  line-height: 1.5;
}
.modal-confirm-body .muted-small {
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
}
.modal-confirm-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: #f7f9fc;
}

/* PATCH.25: Modal Importar Cartola — variante mas ancha del modal-confirm
   para acomodar tabla de preview, lista de fallidos, etc. */
.modal-cartola {
  width: 720px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
}
.modal-cartola .modal-confirm-body {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
.modal-cartola .form-group {
  margin-bottom: 14px;
}
.modal-cartola label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.modal-cartola select,
.modal-cartola input[type="file"] {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--navy);
  font-family: inherit;
}
.modal-cartola input[type="file"] {
  padding: 6px 8px;
}
.modal-cartola .cartola-info-box {
  background: #f7f9fc;
  border-left: 3px solid var(--navy);
  padding: 10px 14px;
  border-radius: 0 4px 4px 0;
  margin: 10px 0;
  font-size: 12px;
  color: var(--navy);
  line-height: 1.5;
}
.modal-cartola .cartola-info-box.cartola-info-warn {
  border-left-color: #b07d00;
  background: #fef9ed;
}
.modal-cartola .cartola-info-box.cartola-info-error {
  border-left-color: #c73838;
  background: #fdeded;
}
.modal-cartola .cartola-info-box.cartola-info-success {
  border-left-color: #2d7a3a;
  background: #ecf6ee;
}
.modal-cartola .cartola-info-box strong {
  font-weight: 600;
}
.modal-cartola .cartola-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0;
}
.modal-cartola .cartola-stat {
  background: #f7f9fc;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  text-align: center;
}
.modal-cartola .cartola-stat-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.modal-cartola .cartola-stat-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}
.modal-cartola .cartola-stat-val.cartola-stat-neg {
  color: #c73838;
}
.modal-cartola .cartola-stat-val.cartola-stat-pos {
  color: #2d7a3a;
}
.modal-cartola .cartola-table-wrap {
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.modal-cartola .cartola-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.modal-cartola .cartola-table thead {
  background: #f7f9fc;
  position: sticky;
  top: 0;
  z-index: 1;
}
.modal-cartola .cartola-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.modal-cartola .cartola-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #eef2f7;
  color: var(--navy);
}
.modal-cartola .cartola-table tr:last-child td {
  border-bottom: none;
}
.modal-cartola .cartola-table .col-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.modal-cartola .cartola-table .col-fecha { white-space: nowrap; }
.modal-cartola .cartola-table .ca-cargo { color: #c73838; font-weight: 600; }
.modal-cartola .cartola-table .ca-abono { color: #2d7a3a; font-weight: 600; }
.modal-cartola .cartola-table .row-fallido { background: #fdeded; }
.modal-cartola .cartola-table .row-ok { background: #ecf6ee; }
.modal-cartola .cartola-progress {
  margin: 14px 0;
  font-size: 12px;
  color: var(--muted);
}
.modal-cartola .cartola-progress-bar {
  width: 100%;
  height: 6px;
  background: #eef2f7;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}
.modal-cartola .cartola-progress-fill {
  height: 100%;
  background: var(--navy);
  transition: width 0.2s ease-out;
}
.modal-cartola .cartola-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 14px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

/* Toasts (R-UI.4) — stack bottom-right, 4s autodismiss, con boton accion opcional */
.toast-stack {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  min-width: 260px;
  max-width: 420px;
  background: #fff;
  border-left: 4px solid var(--navy);
  padding: 12px 16px;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(13, 33, 55, 0.15);
  font-size: 13px;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastIn 0.22s ease-out;
}
.toast.toast-success {
  border-left-color: #2d7a3a;
}
.toast.toast-error {
  border-left-color: #c0392b;
  background: #fef5f4;
}
.toast.toast-warning {
  border-left-color: #b66b28;
  background: #fff8f0;
}
.toast-msg {
  flex: 1;
  line-height: 1.4;
}
.toast-action {
  background: transparent;
  border: 1px solid var(--navy);
  color: var(--navy);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.toast-action:hover {
  background: var(--navy);
  color: #fff;
}
.toast-close {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.toast.removing {
  animation: toastOut 0.18s ease-in forwards;
}
@keyframes toastOut {
  to { opacity: 0; transform: translateX(20px); }
}

/* Botón CTA arriba del sub-tab ([+ Nueva oportunidad]) */
.subtab-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--gold);
  color: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: none;
  letter-spacing: 0;
}
.subtab-cta:hover {
  background: #d7b764;
}
.subtab-cta .plus-icon {
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

/* Acciones en fila de tabla */
.row-actions {
  display: inline-flex;
  gap: 6px;
}
.btn-row-action {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--navy);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.btn-row-action:hover {
  background: #f7f9fc;
  border-color: var(--navy);
}
.btn-row-action.danger {
  color: #c0392b;
}
.btn-row-action.danger:hover {
  background: #fef5f4;
  border-color: #c0392b;
}

/* Responsive modal CRUD */
@media (max-width: 599px) {
  .modal-crud {
    width: 100%;
    max-width: 100vw;
  }
  .modal-crud-body {
    padding: 16px;
  }
  .modal-crud-header,
  .modal-crud-footer {
    padding: 12px 16px;
  }
  .toast-stack {
    bottom: 12px;
    right: 12px;
    left: 12px;
  }
  .toast {
    min-width: 0;
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FASE A.4.g/h/i — Card totales Por facturar + sortable headers
   =================================================================== */

/* A.4.h: Card de totales simplificada a 2 chips (Neto Pendiente + Total
   Pendiente). Grid de 2 columnas fijas en desktop, apiladas en mobile.
   A.4.i: estilo base identico a los chips de Caja (sin destacado).
   A.4.k: Felipe pidio mantener el estilo de Caja con borde lateral +
   color en el valor. Se aplica el mismo patron que .periodo-total-balance
   (navy): ambos chips son "pendientes de facturar" = proyeccion, neutral. */
/* A.4.k + A.5.c.0: Chip "Por facturar" (navy, patron base para chips
   individuales de totales). A.5.c.0.4.1: tamaño reducido a estandar
   para no dominar el layout cuando hay 1 solo chip. */
/* A.5.c.1.PRE: Totales Por Facturar.
   Antes: minmax(180px, 240px) max-width 480px -> cards angostas,
   tendian a apilarse verticalmente en contenedores estrechos.
   Ahora: hereda de .periodo-totales (minmax 180px, 1fr) para que
   queden en fila estirandose, igual que Movimientos.
   Solo conservamos el estilo de borde y color navy. */
.pf-total-pendiente {
  border-left: 3px solid var(--navy);
}
.pf-total-pendiente .periodo-total-val {
  color: var(--navy);
}

/* A.5.c.0: Egresos. Mismo patron que Por facturar (navy = proyectado/
   pendiente, neutral). 1 chip por ahora, grid igual.
   A.5.c.0.4.1: reducido a estandar. */
/* A.5.c.1.PRE: heredan de .periodo-totales (fila estirada). */
.eg-total-pendiente {
  border-left: 3px solid var(--navy);
}
.eg-total-pendiente .periodo-total-val {
  color: var(--navy);
}

/* A.5.c.0.2: Doctos Pendientes de Pago. Mismo patron (navy = pendiente).
   A.5.c.1.PRE: heredan de .periodo-totales (fila estirada). */
.dp-total-pendiente {
  border-left: 3px solid var(--navy);
}
.dp-total-pendiente .periodo-total-val {
  color: var(--navy);
}

/* A.5.c.0.6: Nomina Pendiente de Pago. Mismo patron (navy = pendiente).
   A.5.c.1.PRE: hereda de .periodo-totales (fila estirada). */
.nm-total-pendiente {
  border-left: 3px solid var(--navy);
}
.nm-total-pendiente .periodo-total-val {
  color: var(--navy);
}

/* ───────────────────────────────────────────────────────────────
   Encabezados ordenables (A.4.g + FIX A.4.h + simplificacion A.4.i)

   A.4.i: el usuario pidio "no agregar color innecesario, basta con
   que la flecha se marque en blanco para indicar que esta activa".

   Fondo del <th> (navy) y color del texto (blanco 85%) se preservan
   del estilo base en los 3 estados. Solo cambia el color de .sort-indicator:
     - default: blanco 35% (visible pero sutil)
     - hover:   blanco 60% (feedback discreto)
     - activo:  blanco 100% (confirmacion del sort aplicado)

   Sin backgrounds alternos, sin inversion de colores, sin fondo gold.
   =================================================================== */

/* Cursor + user-select. NO modificamos fondo ni texto - respetamos
   el estilo base del <th> (navy solido + blanco 85%). */
th.th-sortable {
  cursor: pointer;
  user-select: none;
}

/* Indicador PERMANENTE de "ordenable" (doble flecha).
   Visible siempre en blanco 35% para que el usuario sepa que la
   columna es clickable, sin dominar visualmente.
   El JS inyecta '↕' al inicializar y lo reemplaza por '↑' o '↓' al
   ordenar (ver updateSortIndicators). */
.sort-indicator {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  transition: color 140ms ease;
  min-width: 10px;
  vertical-align: baseline;
}

/* Hover: flecha mas visible, sin otros cambios */
th.th-sortable:hover .sort-indicator {
  color: rgba(255, 255, 255, 0.6);
}

/* Estado activo: flecha blanco puro. Unica senal visual del sort.
   Fondo navy + texto del label se mantienen iguales que el resto. */
th.th-sortable.th-sorted .sort-indicator {
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   FASE A.5.c.0.4 — Modal de Conciliacion full-screen + badges score
   Docto <-> Cargo. Modal overlay centered con densidad alta.
   =================================================================== */

/* Drawer secondary button (navy outline, acompanha a .drawer-btn-action
   gold primary). Se usa en el drawer del docto para separar la accion
   primaria (Asociar a cargo = gold) de la secundaria (Cambiar estado). */
.drawer-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
  padding: 10px 14px;
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, transform 0.05s;
}
.drawer-btn-secondary:hover {
  background: #f5f7fa;
}
.drawer-btn-secondary:active {
  transform: translateY(1px);
}

/* Overlay full-screen */
.conc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 33, 55, 0.55);
  backdrop-filter: blur(2px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.conc-overlay.open {
  display: flex;
}

/* Modal centered, max width 1000px, max height 90vh */
.conc-modal {
  background: var(--white);
  border-radius: 12px;
  width: 100%;
  max-width: 1000px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.conc-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--navy);
  color: var(--white);
}
.conc-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.conc-close {
  background: transparent;
  border: none;
  color: var(--white);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.conc-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.conc-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

/* Docto info card */
.conc-docto-info {
  background: rgba(200, 169, 81, 0.05);
  border: 1px solid rgba(200, 169, 81, 0.3);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.conc-docto-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.conc-docto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px 18px;
}
.conc-docto-grid > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.conc-lbl {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.conc-monto-docto {
  color: var(--navy);
  font-weight: 700;
  font-size: 15px;
}

/* Filtros */
.conc-filtros {
  background: var(--bg);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.conc-filtros-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.conc-filtros-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.conc-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}
.conc-filter-grow {
  flex: 1;
  min-width: 200px;
}
.conc-filter label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.conc-filter input[type="text"],
.conc-filter input[type="number"] {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  background: var(--white);
}
.conc-filter input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(200, 169, 81, 0.2);
}
.conc-filter-input-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.conc-filter-input-group input {
  flex: 1;
  min-width: 60px;
}
.conc-prefix, .conc-suffix {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.conc-btn-reset {
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--navy);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}
.conc-btn-reset:hover {
  background: var(--bg);
}

/* Results */
.conc-results {
  min-height: 200px;
}
.conc-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--muted);
  font-size: 13px;
  gap: 10px;
}
.conc-empty {
  padding: 40px 20px;
  text-align: center;
}
.conc-empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.conc-empty-hint {
  font-size: 12px;
  color: var(--muted);
}
.conc-error {
  padding: 20px;
  background: rgba(200, 50, 50, 0.08);
  border: 1px solid rgba(200, 50, 50, 0.3);
  border-radius: 6px;
  color: var(--danger);
  font-size: 13px;
}
.conc-results-header {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
  font-weight: 600;
}
.conc-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.conc-row {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.conc-row:hover {
  border-color: var(--gold);
  background: rgba(200, 169, 81, 0.03);
}
.conc-row.selected {
  border-color: var(--gold);
  background: rgba(200, 169, 81, 0.08);
  box-shadow: 0 0 0 2px rgba(200, 169, 81, 0.2);
}
.conc-row input[type="radio"] {
  flex-shrink: 0;
  margin-top: 3px;
  accent-color: var(--gold);
}
.conc-row-content {
  flex: 1;
  min-width: 0;
}
.conc-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.conc-row-mov {
  font-size: 13px;
  color: var(--navy);
}
.conc-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--text);
}
.conc-row-meta > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.conc-score {
  color: var(--muted);
  font-weight: 600;
  align-self: flex-end !important;
}

/* Badges score - 3 variantes (MATCH EXACTO / PROBABLE / POSIBLE) */
.conc-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.conc-badge-exacto {
  background: rgba(46, 160, 67, 0.12);
  color: #2ea043;
  border: 1px solid rgba(46, 160, 67, 0.35);
}
.conc-badge-probable {
  background: rgba(9, 105, 218, 0.1);
  color: #0969da;
  border: 1px solid rgba(9, 105, 218, 0.35);
}
.conc-badge-posible {
  background: rgba(191, 135, 0, 0.1);
  color: #bf8700;
  border: 1px solid rgba(191, 135, 0, 0.35);
}

/* Footer (botones accion del modal) */
.conc-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.conc-btn-secondary {
  padding: 10px 18px;
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.conc-btn-secondary:hover {
  background: var(--bg);
}
.conc-btn-primary {
  padding: 10px 22px;
  background: var(--gold);
  color: var(--navy);
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, opacity 0.12s;
}
.conc-btn-primary:hover:not(:disabled) {
  background: #b89440;
}
.conc-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Responsive mobile */
@media (max-width: 768px) {
  .conc-overlay { padding: 0; }
  .conc-modal { max-height: 100vh; border-radius: 0; }
  .conc-docto-grid { grid-template-columns: 1fr 1fr; }
  .conc-filtros-row { flex-direction: column; align-items: stretch; }
  .conc-filter { min-width: 100%; }
  .conc-row-meta { gap: 10px; font-size: 11px; }
  .conc-footer { flex-direction: column-reverse; }
  .conc-btn-primary, .conc-btn-secondary { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   FASE A.5.c.0.5 — Conciliacion ASISTIDA en Lote
   Modal full-screen + progress bar + tabla pre-llenada con
   checkboxes, candidatos alternativos expandibles y reporte final.
   =================================================================== */

/* Boton header del sub-tab Doctos: 'Conciliar en lote' (gold, accion) */
.filter-group-action {
  align-self: flex-end;
}
/* A.5.c.1.PATCH: botones de accion en filtros (Conciliar lote,
   Nuevo Egreso) heredan del estilo btn-secondary (blanco + navy,
   hover invertido) que Felipe uso como referencia del boton
   'Actualizar' del Panel Caja.
   Overrides locales: ocupar 100% del filter-group + height 36px
   para alineacion con btn-filter-clear, font-size 12px para
   encajar en el grid de filtros. */
.btn-lote-conciliar,
.btn-nuevo-egreso {
  background: #fff;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 0 14px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  width: 100%;
  height: 36px;
}
/* PATCH.25.9.2: el SVG dentro del boton no debe colapsar bajo flex-shrink.
   Sin esta regla, los SVG con width=14 se comprimen a 0 cuando flexbox
   reparte el espacio entre icono+texto (texto tiene mayor prioridad). */
.btn-lote-conciliar svg,
.btn-nuevo-egreso svg {
  flex-shrink: 0;
}
.btn-lote-conciliar:hover,
.btn-nuevo-egreso:hover {
  background: var(--navy);
  color: #fff;
}
.btn-lote-conciliar:active,
.btn-nuevo-egreso:active {
  transform: translateY(1px);
}

/* Overlay full-screen (mismo patron que conc-overlay) */
.lote-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 33, 55, 0.55);
  backdrop-filter: blur(2px);
  z-index: 1001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lote-overlay.open {
  display: flex;
}

.lote-modal {
  background: var(--white);
  border-radius: 12px;
  width: 100%;
  max-width: 1100px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.lote-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--navy);
  color: var(--white);
}
.lote-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.lote-close {
  background: transparent;
  border: none;
  color: var(--white);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.lote-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.lote-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

/* Progress bar fase 1 */
.lote-progress-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 60px 20px;
  text-align: center;
}
.lote-progress-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}
.lote-progress-sub {
  font-size: 13px;
  color: var(--muted);
}
.lote-progress-bar {
  width: 100%;
  max-width: 480px;
  height: 8px;
  background: var(--bg);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.lote-progress-fill {
  height: 100%;
  background: var(--navy);
  transition: width 0.3s ease;
}
.lote-progress-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  font-style: italic;
}

/* Resumen de arriba (fase 2) */
.lote-summary {
  margin-bottom: 16px;
}
.lote-summary-row {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.lote-summary-stat {
  flex: 1;
  min-width: 120px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lote-summary-stat-hl {
  background: rgba(200, 169, 81, 0.08);
  border-color: rgba(200, 169, 81, 0.4);
}
.lote-summary-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.lote-summary-stat-hl .lote-summary-num {
  color: var(--navy);
}
.lote-summary-lbl {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.lote-summary-hint {
  font-size: 12px;
  color: var(--muted);
  padding: 8px 12px;
  background: rgba(200, 169, 81, 0.05);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
}

/* Tabla de matches */
.lote-table {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
}
.lote-table-head {
  display: grid;
  grid-template-columns: 40px 1.3fr 1.7fr 100px 36px;
  gap: 10px;
  padding: 10px 14px;
  background: var(--navy);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.lote-table-body {
  display: flex;
  flex-direction: column;
}
.lote-row {
  display: grid;
  grid-template-columns: 40px 1.3fr 1.7fr 100px 36px;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: background 0.1s;
}
.lote-row:last-child {
  border-bottom: none;
}
.lote-row:hover {
  background: var(--bg);
}
/* PATCH.25.9.19: ya no se hace toggle clickeando la columna del cargo;
   el cursor pointer ahora solo aplica al indicador "Opciones ⌄" que
   sigue siendo el único elemento clickeable para expandir alternativas. */
.lote-row-expanded {
  background: rgba(200, 169, 81, 0.04);
}
.lote-col-check {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lote-col-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
}
.lote-col-check input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.lote-docto-folio {
  font-size: 13px;
  color: var(--navy);
}
.lote-docto-prov {
  font-size: 12px;
  color: var(--text);
  margin-top: 2px;
}
.lote-docto-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  display: flex;
  gap: 10px;
}
.lote-cargo-main {
  font-size: 13px;
  color: var(--navy);
}
.lote-cargo-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.lote-cargo-diff {
  color: var(--muted);
  font-style: italic;
}
.lote-no-match {
  display: inline-block;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  padding: 2px 8px;
  background: var(--bg);
  border-radius: 4px;
}
.lote-no-match-detail {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.lote-badge-nomatch {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
}
/* PATCH.25.9.19: indicador de candidatos alternativos.
   Diseño minimalista: link-like (sin border, sin hover background fuerte).
   Ubicación: dentro de lote-col-badge, debajo del badge de score, alineado
   al mismo lado (derecha). Solo este elemento es clickeable para expandir
   las alternativas; el resto de la fila no responde al click. */
.lote-badge-altcount {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  padding: 1px 4px;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  vertical-align: middle;
  letter-spacing: 0.02em;
  transition: color 0.15s ease;
}
.lote-badge-altcount:hover {
  color: var(--navy);
  background: transparent;
}
.lote-badge-altcount-icon {
  font-size: 9px;
  line-height: 1;
}
.lote-col-status {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}
/* PATCH.25.9.19: layout de la celda badge para apilar verticalmente
   el badge de score + el indicador "Opciones ⌄" alineados a la derecha. */
.lote-col-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.lote-status-applying {
  color: var(--navy);
}
.lote-status-done {
  color: #2ea043;
}
.lote-status-error {
  color: #d1242f;
  cursor: help;
}
.lote-status-skipped {
  color: var(--muted);
}

/* Fila expandida con alternativos */
.lote-alternativos {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding: 12px;
  background: var(--white);
  border: 1px dashed rgba(200, 169, 81, 0.5);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lote-alt-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.lote-alt-row {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}
.lote-alt-row:hover {
  border-color: var(--gold);
}
.lote-alt-selected {
  border-color: var(--gold);
  background: rgba(200, 169, 81, 0.08);
  box-shadow: 0 0 0 1px rgba(200, 169, 81, 0.3);
}
.lote-alt-row input[type="radio"] {
  flex-shrink: 0;
  margin-top: 3px;
  accent-color: var(--gold);
}
.lote-alt-content {
  flex: 1;
  min-width: 0;
}
.lote-alt-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  font-size: 12px;
}
.lote-alt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: var(--muted);
}
.lote-alt-score {
  color: var(--navy);
  font-weight: 600;
}

/* Footer del modal de lote */
.lote-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.lote-btn-secondary {
  padding: 10px 18px;
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.lote-btn-secondary:hover:not(:disabled) {
  background: var(--bg);
}
.lote-btn-secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.lote-btn-primary {
  padding: 10px 22px;
  background: var(--gold);
  color: var(--navy);
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, opacity 0.12s;
}
.lote-btn-primary:hover:not(:disabled) {
  background: #b89440;
}
.lote-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Resumen final post-aplicacion */
.lote-final-summary {
  display: flex;
  gap: 14px;
  align-items: center;
}
.lote-final-stat {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}
.lote-final-ok {
  background: rgba(46, 160, 67, 0.12);
  color: #2ea043;
  border: 1px solid rgba(46, 160, 67, 0.35);
}
.lote-final-err {
  background: rgba(209, 36, 47, 0.1);
  color: #d1242f;
  border: 1px solid rgba(209, 36, 47, 0.35);
}
.lote-final-pend {
  background: rgba(191, 135, 0, 0.1);
  color: #bf8700;
  border: 1px solid rgba(191, 135, 0, 0.35);
}

/* Responsive mobile */
@media (max-width: 768px) {
  .lote-overlay { padding: 0; }
  .lote-modal { max-height: 100vh; border-radius: 0; }
  .lote-table-head { display: none; }
  .lote-row {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 8px 10px;
  }
  .lote-col-check { grid-column: 1; grid-row: 1; }
  .lote-col-badge { grid-column: 3; grid-row: 1; justify-self: end; }
  .lote-col-docto { grid-column: 2 / 4; grid-row: 2; }
  .lote-col-cargo { grid-column: 1 / 4; grid-row: 3; padding-top: 6px; border-top: 1px dashed var(--border); }
  .lote-col-status { grid-column: 3; grid-row: 1; }
  .lote-alternativos { grid-column: 1 / 4; }
  .lote-summary-row { flex-direction: column; }
  .lote-summary-stat { min-width: 100%; }
  .lote-footer { flex-direction: column-reverse; align-items: stretch; }
  .lote-btn-primary, .lote-btn-secondary { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   FASE A.5.c.1 — CRUD Egresos Proyectados
   Boton 'Nuevo Egreso', boton drawer 'Eliminar', modal confirm
   con detalle de egreso y advertencia de recurrencia.
   =================================================================== */

/* A.5.c.1.PATCH: btn-nuevo-egreso ahora comparte estilos con
   btn-lote-conciliar (definicion conjunta arriba). */

/* Drawer-btn-danger: rojo para acciones destructivas como Eliminar.
   Tono corporativo (no rojo puro) y con contraste suficiente. */
.drawer-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  background: var(--white);
  color: #b03a48;
  border: 1px solid #b03a48;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.drawer-btn-danger:hover {
  background: #b03a48;
  color: var(--white);
}
.drawer-btn-danger:active {
  transform: translateY(1px);
}

/* Modal confirm: bloque de detalle del egreso (confirmacion 1) */
.confirm-egreso-detail {
  font-size: 13px;
  color: var(--text);
}
.confirm-egreso-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}
.confirm-egreso-fields {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.confirm-egreso-fields > div {
  display: flex;
  gap: 8px;
  font-size: 12px;
}
.confirm-lbl {
  color: var(--muted);
  min-width: 100px;
  font-weight: 600;
}
.confirm-warning-box {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(176, 58, 72, 0.08);
  border-left: 3px solid #b03a48;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text);
}
.confirm-warning-box strong {
  color: #b03a48;
}

/* Modal confirm final: bloque informativo del step 2 */
.confirm-final-info {
  background: rgba(176, 58, 72, 0.06);
  border: 1px solid rgba(176, 58, 72, 0.3);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════
   FASE A.5.c.1.PATCH — Conciliacion multi-cargo
   Chip de suma vs monto del docto/nomina con badge segun
   tolerancia. Permite a Felipe ver el estado de la seleccion
   antes de confirmar.
   =================================================================== */

/* Chip de suma: barra horizontal entre la lista de candidatos y el
   footer del modal. aria-live para lectores de pantalla. */
.conc-suma {
  margin: 0 24px;
  padding: 0;
  border-top: 1px solid var(--border);
}
.conc-suma:empty {
  display: none;
}
.conc-suma-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  flex-wrap: wrap;
}
.conc-suma-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}
.conc-suma-detail {
  font-size: 12px;
  color: var(--text);
  flex: 1;
  min-width: 200px;
}
.conc-suma-detail strong {
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.conc-suma-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.conc-suma-exacto {
  background: rgba(46, 160, 67, 0.12);
  color: #2ea043;
  border: 1px solid rgba(46, 160, 67, 0.35);
}
.conc-suma-probable {
  background: rgba(31, 109, 184, 0.10);
  color: #1f6db8;
  border: 1px solid rgba(31, 109, 184, 0.35);
}
.conc-suma-warning {
  background: rgba(191, 135, 0, 0.10);
  color: #bf8700;
  border: 1px solid rgba(191, 135, 0, 0.35);
}
.conc-suma-excede {
  background: rgba(176, 58, 72, 0.10);
  color: #b03a48;
  border: 1px solid rgba(176, 58, 72, 0.35);
}

/* Adaptar input radio -> checkbox visualmente. El selector
   .conc-row[type=radio] cambio a checkbox; los estilos existentes
   sobre input siguen funcionando, pero forzamos el accent-color
   gold de la app. */
.conc-row input[type="checkbox"] {
  accent-color: var(--gold);
  flex-shrink: 0;
  margin-top: 3px;
  cursor: pointer;
  width: 16px;
  height: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   FASE A.5.c.1.PATCH.2 — Omitir filtros + lote filtrado
   1) Checkbox "Omitir filtros monto/fecha" en modal manual.
   2) Badge "filtrado: N de M" en header de modal lote.
   ═══════════════════════════════════════════════════════════════ */

/* Fila secundaria de filtros — separa visualmente el toggle de los
   filtros principales. */
.conc-filtros-row-secondary {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

/* Toggle "Omitir filtros monto/fecha" */
.conc-omit-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  padding: 6px 4px;
}
.conc-omit-toggle input[type="checkbox"] {
  accent-color: var(--gold);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.conc-omit-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}
.conc-omit-hint {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

/* Inputs deshabilitados cuando el toggle esta activo */
#conc-monto-pct:disabled,
#conc-fecha-dias:disabled {
  background: var(--bg);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Badge "filtrado: N de M" en header de modal lote */
.lote-header-badge {
  display: inline-block;
  margin-left: 12px;
  padding: 3px 10px;
  background: rgba(31, 109, 184, 0.10);
  color: #1f6db8;
  border: 1px solid rgba(31, 109, 184, 0.35);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════
   FASE A.5.c.1.PATCH.3 — Modo nómina del modal de conciliación
   1) Ocultar filtro "Ventana fecha" cuando el modal opera en modo
      nómina. La fecha de cargo no es comparable con la nómina (la
      nómina no tiene fecha canónica), igual que ya hicimos con
      la columna Δ Fecha en el render de filas.
   2) El título dinámico, columna Δ Fecha condicional y loading text
      se manejan en JS. CSS solo apoya el filtro y la responsividad.
   ═══════════════════════════════════════════════════════════════ */

/* Ocultar wrapper completo del filtro Ventana fecha en modo nómina */
.conc-mode-nomina .conc-filter-fecha {
  display: none;
}

/* A.5.c.2.1.PATCH.3 - Bloque CSS de A.5.c.2.0 (sidebar vertical)
   eliminado completo. Reemplazado por sub-tabs horizontales
   (.tabs / .tab-content) que ya estan definidos en CSS base. */


/* ═══════════════════════════════════════════════════════════════
   FASE A.5.e.0 — LIMPIEZA: Bloques eliminados

   Eliminados de este archivo:
   - .prio-* (Priorizacion + boost-badge + pin-badge): A.5.c.2.1+2.2
   - .modal-boost-niveles (modal de boost): A.5.c.2.2.PATCH
   - .flujo-tg-* (Catalogo de etapas N4): A.5.d.1
   - .plan-* (UI Planificacion): A.5.d.3.b

   Conservados (usados por modals.js para campos compartidos):
   - .modal-crud-calc (campo type: calc) en linea ~1403
   - .modal-pin-row / .modal-pin-check / .modal-pin-input-inline
     (campo type: pin-toggle) abajo de este bloque
   ═══════════════════════════════════════════════════════════════ */

/* Pin toggle: checkbox inline + input numerico al lado en misma fila.
   Sin caja contenedora alrededor del checkbox - solo el check y label inline. */
.modal-pin-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.modal-pin-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  /* Override del estilo .modal-crud-radiogroup label que aplica padding/border */
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
}
.modal-pin-check input[type="checkbox"] {
  margin: 0;
  width: 14px;
  height: 14px;
  accent-color: var(--gold);
  cursor: pointer;
}

/* Wrapper inline del input (oculto si checkbox sin marcar) */
.modal-pin-input-inline {
  display: none;
  align-items: center;
  gap: 8px;
}
.modal-pin-input-inline.visible {
  display: inline-flex;
}
.modal-pin-input-inline input[type="number"] {
  width: 90px;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--card);
  color: var(--text);
  font-family: inherit;
}
.modal-pin-input-inline input[type="number"]:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(200, 169, 81, 0.18);
}
.modal-pin-input-inline .pin-range {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}


/* =======================================================================
   A.5.e.2.PATCH.24-B - BOOTSTRAP + REFRESH BUTTON + ERROR MODAL
   ======================================================================= */

/* Botón "Actualizar todo" en el header */
.btn-header-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--navy);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  padding: 5px 11px;
  border-radius: 6px;
  letter-spacing: 0.02em;
  transition: all 0.15s ease;
  margin-right: 6px;
}
.btn-header-refresh:hover {
  background: var(--bg);
  border-color: var(--navy);
}
.btn-header-refresh:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-header-refresh.spinning #btn-refresh-all-icon {
  animation: spin-icon 0.9s linear infinite;
}
@keyframes spin-icon {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Pantalla bootstrap (estilo CN Asistencia) */
#screen-bootstrap {
  background: var(--bg);
  min-height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#screen-bootstrap.active {
  display: flex;
}
.bootstrap-wrap {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.bootstrap-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px 28px;
  width: 100%;
  text-align: center;
  box-shadow: 0 1px 3px rgba(13, 33, 55, 0.04);
  position: relative;
}
.bootstrap-logo-block {
  position: absolute;
  top: 18px;
  left: 22px;
}
.bootstrap-logo-block img {
  width: 80px;
  height: auto;
  display: block;
}
.bootstrap-spinner {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.spinner.spinner-large {
  width: 40px;
  height: 40px;
  border-width: 3px;
}
.bootstrap-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.01em;
}
.bootstrap-message {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted);
  min-height: 19px;
}
.bootstrap-progress {
  width: 100%;
  height: 4px;
  background: var(--bg);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 16px;
}
.bootstrap-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--navy);
  transition: width 0.3s ease;
  border-radius: 2px;
}
.bootstrap-hint {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

/* Modal de error de bootstrap */
.bootstrap-error-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 33, 55, 0.55);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bootstrap-error-overlay.open {
  display: flex;
}
.bootstrap-error-modal {
  background: #fff;
  border-radius: 12px;
  padding: 28px 24px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 12px 40px rgba(13, 33, 55, 0.25);
  text-align: center;
}
.bootstrap-error-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fef3c7;
  color: #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.bootstrap-error-modal.critical .bootstrap-error-icon {
  background: #fee2e2;
  color: #dc2626;
}
.bootstrap-error-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
}
.bootstrap-error-text {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}
.bootstrap-error-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  text-align: left;
  background: var(--bg);
  border-radius: 6px;
  padding: 10px 14px;
}
.bootstrap-error-list:empty {
  display: none;
}
.bootstrap-error-list li {
  font-size: 12px;
  color: var(--ink);
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bootstrap-error-list li::before {
  content: '✕';
  color: #dc2626;
  font-weight: 700;
  font-size: 11px;
}
.bootstrap-error-hint {
  margin: 0 0 18px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}
.bootstrap-error-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.bootstrap-error-actions button {
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--border);
  letter-spacing: 0.02em;
  transition: all 0.15s ease;
}
.bootstrap-error-actions .btn-modal-secondary {
  background: transparent;
  color: var(--ink);
}
.bootstrap-error-actions .btn-modal-secondary:hover {
  background: var(--bg);
}
.bootstrap-error-actions .btn-modal-primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.bootstrap-error-actions .btn-modal-primary:hover {
  background: #182a47;
}
/* En modo crítico, esconder "Continuar" */
.bootstrap-error-modal.critical #bootstrap-error-continue {
  display: none;
}

/* =======================================================================
   A.5.e.2.PATCH.24-B.1 - Timestamp última actualización + mini-spinner sección
   ======================================================================= */

/* Timestamp "Actualizado hace X min" junto al botón de refresh.
   Texto sutil, navy claro. Se oculta hasta que haya valor.
   PATCH.25.3: agregadas clases fresh/stale igual que .kpi-window-hint
   de Caja para feedback visual de frescura de datos. */
.last-refresh-label {
  font-size: 11px;
  color: var(--muted);
  margin-right: 8px;
  font-style: italic;
  letter-spacing: 0.01em;
  display: none;
  font-variant-numeric: tabular-nums;
}
.last-refresh-label.visible {
  display: inline;
}
.last-refresh-label.fresh {
  color: var(--success);
  font-style: normal;
  font-weight: 500;
}
.last-refresh-label.stale {
  color: var(--warning);
  font-style: normal;
  font-weight: 500;
}
.last-refresh-label.stale::before {
  content: '●';
  margin-right: 4px;
}

/* Mini-spinner que se muestra arriba de cada tabla durante refresh.
   Aparece sobre el card-title de la sección (pequeño chip discreto). */
.section-refresh-indicator {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--navy);
  font-weight: 600;
  background: rgba(13, 33, 55, 0.06);
  border-radius: 4px;
  padding: 2px 8px;
  margin-left: 8px;
  letter-spacing: 0.02em;
  animation: pulse-bg 1.2s ease-in-out infinite;
}
.section-refresh-indicator.active {
  display: inline-flex;
}
@keyframes pulse-bg {
  0%, 100% { background: rgba(13, 33, 55, 0.06); }
  50%      { background: rgba(13, 33, 55, 0.14); }
}

/* ─────────────────────────────────────────────────────────────────


/* ─────────────────────────────────────────────────────────────────
   PATCH.25.8.3 — Modal Importar planilla: sub-grillas alineadas
   
   Cada celda (factura/cargo) usa sub-grid CSS con anchos de columna
   FIJOS para que folio, razón, monto, fecha queden siempre en la
   misma posición horizontal entre filas. Permite escaneo visual.
   
   Layout:
   ┌─────┬───── FACTURA ──────┬───── CARGO ─────┬─Estado─┬─✓─┐
   │  ✓  │ Tipo Folio Razón $ │ Movimiento   $  │  OK    │ ✓ │
   │     │      RUT   Fecha   │ Folio·Fecha     │        │   │
   └─────┴────────────────────┴─────────────────┴────────┴───┘
   ───────────────────────────────────────────────────────────────── */

/* Modal ancho 1200px (más ancho que cartola para acomodar sub-grillas) */
#modal-planilla-overlay .modal-cartola {
  width: 1200px;
  max-width: calc(100vw - 32px);
}

/* Top-grid del modal: check / factura / cargo / badge / status.
   Factura y cargo tienen pesos distintos: factura es más ancha porque
   contiene más campos (tipo + folio + razón + monto + rut + fecha). */
.planilla-table-grid .lote-table-head,
.planilla-table-grid .lote-row {
  grid-template-columns: 36px minmax(0, 4fr) minmax(0, 3fr) 110px;
  gap: 0;
  padding: 0;
}
.planilla-table-grid .lote-table-head {
  padding: 10px 0;
}
.planilla-table-grid .lote-table-head .lote-col-check { padding-left: 14px; }
.planilla-table-grid .lote-table-head .lote-col-badge {
  padding: 0 12px;
  border-left: 1px solid rgba(255,255,255,0.15);
  text-align: center;
}

/* Cada fila tiene padding vertical homogéneo y separadores verticales:
   uno entre Documento↔Movimiento, otro entre Movimiento↔Estado.
   Esto deja claro que el badge de Estado es una columna independiente
   que comunica el resultado de la conciliación cruzada. */
.planilla-table-grid .lote-row {
  padding: 14px 0;
  align-items: center;
}
.planilla-table-grid .lote-row .lote-col-check {
  padding-left: 14px;
  display: flex;
  justify-content: center;
}
.planilla-table-grid .lote-row .lote-col-docto {
  padding: 0 16px;
}
.planilla-table-grid .lote-row .lote-col-cargo {
  padding: 0 16px;
  border-left: 1px solid var(--border);
}
.planilla-table-grid .lote-table-head .lote-col-docto {
  padding: 0 16px;
}
.planilla-table-grid .lote-table-head .lote-col-cargo {
  padding: 0 16px;
  border-left: 1px solid rgba(255,255,255,0.15);
}
.planilla-table-grid .lote-row .lote-col-badge {
  padding: 0 12px;
  border-left: 1px solid var(--border);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* ── SUB-GRILLA FACTURA ──
   2 filas × 4 columnas con anchos fijos:
     Línea 1: [tipo 40px] [folio 90px] [razón 1fr] [monto 110px right]
     Línea 2: [        ] [rut 90px ] [fecha   ]   [           ]
*/
.planilla-fac-grid {
  display: grid;
  grid-template-columns: 40px 90px minmax(0, 1fr) 110px;
  grid-template-rows: auto auto;
  gap: 4px 10px;
  align-items: baseline;
}
.planilla-fac-grid-head {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 700;
}
.planilla-fac-tipo {
  grid-column: 1; grid-row: 1;
  font-size: 10px;
  color: var(--muted);
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 3px;
  text-align: center;
  font-weight: 500;
  width: fit-content;
}
.planilla-fac-grid-head .planilla-fac-tipo {
  background: transparent;
  color: rgba(255,255,255,0.85);
  padding: 0;
  font-weight: 700;
}
.planilla-fac-folio {
  grid-column: 2; grid-row: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.planilla-fac-grid-head .planilla-fac-folio {
  color: rgba(255,255,255,0.85);
}
.planilla-fac-nombre {
  grid-column: 3; grid-row: 1;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.planilla-fac-grid-head .planilla-fac-nombre {
  color: rgba(255,255,255,0.85);
  font-weight: 700;
}
.planilla-fac-monto {
  grid-column: 4; grid-row: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.planilla-fac-grid-head .planilla-fac-monto {
  color: rgba(255,255,255,0.85);
}
.planilla-fac-rut {
  grid-column: 2; grid-row: 2;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.planilla-fac-grid-head .planilla-fac-rut {
  color: rgba(255,255,255,0.85);
  font-size: 10px;
}
.planilla-fac-fecha {
  grid-column: 3; grid-row: 2;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.planilla-fac-grid-head .planilla-fac-fecha {
  color: rgba(255,255,255,0.85);
  font-size: 10px;
}

/* ── SUB-GRILLA CARGO ──
   2 filas × 2 columnas:
     Línea 1: [movimiento descripción 1fr] [monto 110px right]
     Línea 2: [folio · fecha (gris) ......]
*/
.planilla-cargo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  grid-template-rows: auto auto;
  gap: 4px 10px;
  align-items: baseline;
}
.planilla-cargo-grid-head {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 700;
}
.planilla-cargo-desc {
  grid-column: 1; grid-row: 1;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.planilla-cargo-grid-head .planilla-cargo-desc {
  color: rgba(255,255,255,0.85);
  font-weight: 700;
}
.planilla-cargo-monto {
  grid-column: 2; grid-row: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.planilla-cargo-grid-head .planilla-cargo-monto {
  color: rgba(255,255,255,0.85);
}
.planilla-cargo-meta {
  grid-column: 1 / span 2; grid-row: 2;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.planilla-cargo-grid-head .planilla-cargo-meta {
  color: rgba(255,255,255,0.85);
  font-size: 10px;
}
.planilla-cargo-folio {
  font-variant-numeric: tabular-nums;
}
.planilla-sep {
  color: var(--border);
}

/* Estado error inline */
.planilla-cell-err {
  color: var(--danger, #c0392b) !important;
  font-style: italic;
}

/* Filas con error: borde izquierdo rojo sutil */
.planilla-table-grid .planilla-row-err {
  border-left: 3px solid var(--danger, #c0392b);
  background: rgba(192, 57, 43, 0.02);
}
.planilla-table-grid .planilla-row-err:hover {
  background: rgba(192, 57, 43, 0.05);
}

/* Filas skip (ya vinculadas): borde gris */
.planilla-table-grid .planilla-row-skip {
  border-left: 3px solid var(--muted);
  opacity: 0.7;
}

/* Mobile: collapsar sub-grillas a layout vertical (4 columnas top-grid) */
@media (max-width: 980px) {
  #modal-planilla-overlay .modal-cartola {
    width: calc(100vw - 24px);
  }
  .planilla-table-grid .lote-table-head { display: none; }
  .planilla-table-grid .lote-row {
    grid-template-columns: 36px 1fr 110px;
    grid-template-rows: auto auto auto;
    gap: 8px;
    padding: 12px;
  }
  .planilla-table-grid .lote-row .lote-col-check { grid-column: 1; grid-row: 1; padding-left: 0; }
  .planilla-table-grid .lote-row .lote-col-badge {
    grid-column: 3; grid-row: 1;
    justify-self: end;
    border-left: none;
    padding: 0;
  }
  .planilla-table-grid .lote-row .lote-col-docto { grid-column: 2 / 4; grid-row: 2; padding: 0; }
  .planilla-table-grid .lote-row .lote-col-cargo {
    grid-column: 1 / 4; grid-row: 3;
    padding: 8px 0 0 0;
    border-left: none;
    border-top: 1px dashed var(--border);
  }
  .planilla-fac-grid {
    grid-template-columns: 32px 80px minmax(0, 1fr) auto;
  }
  .planilla-cargo-grid {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ─────────────────────────────────────────────────────────────────
   PATCH.25.9 — Modal "Cargar Documentos de Compra"
   Reusa toda la maquinaria del modal planilla (.modal-cartola,
   .planilla-fac-grid, etc) y agrega solo lo específico de doctos.
   ───────────────────────────────────────────────────────────────── */

#modal-doctos-overlay .modal-cartola {
  width: 1200px;
  max-width: calc(100vw - 32px);
}

/* Top-grid: factura | proveedor | estado (sin status fantasma) */
.doctos-table-grid .lote-table-head,
.doctos-table-grid .lote-row {
  grid-template-columns: 36px minmax(0, 4fr) minmax(0, 2.5fr) 110px;
  gap: 0;
  padding: 0;
}
.doctos-table-grid .lote-table-head {
  padding: 10px 0;
}
.doctos-table-grid .lote-table-head .lote-col-check { padding-left: 14px; }
.doctos-table-grid .lote-table-head .lote-col-badge {
  padding: 0 12px;
  border-left: 1px solid rgba(255,255,255,0.15);
  text-align: center;
}
.doctos-table-grid .lote-table-head .lote-col-docto { padding: 0 16px; }
.doctos-table-grid .lote-table-head .lote-col-cargo {
  padding: 0 16px;
  border-left: 1px solid rgba(255,255,255,0.15);
}

.doctos-table-grid .lote-row {
  padding: 14px 0;
  align-items: center;
}
.doctos-table-grid .lote-row .lote-col-check {
  padding-left: 14px;
  display: flex;
  justify-content: center;
}
.doctos-table-grid .lote-row .lote-col-docto { padding: 0 16px; }
.doctos-table-grid .lote-row .lote-col-cargo {
  padding: 0 16px;
  border-left: 1px solid var(--border);
}
.doctos-table-grid .lote-row .lote-col-badge {
  padding: 0 12px;
  border-left: 1px solid var(--border);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* Header sub-encabezado de la columna proveedor */
.doctos-col-prov-head {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 700;
}

/* Celda proveedor: 2 líneas (status / nombre) */
.doctos-prov-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.doctos-prov-status {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.doctos-prov-status.doctos-prov-ok {
  color: var(--success, #2ecc71);
}
.doctos-prov-status.doctos-prov-falta {
  color: var(--warning, #d68800);
}
.doctos-prov-name {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Heredar filas err/skip del modal planilla */
.doctos-table-grid .planilla-row-err {
  border-left: 3px solid var(--danger, #c0392b);
  background: rgba(192, 57, 43, 0.02);
}
.doctos-table-grid .planilla-row-skip {
  border-left: 3px solid var(--muted);
  opacity: 0.7;
}

/* ── Lista de proveedores faltantes (Fase 3) ── */
.doctos-provs-list {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  max-height: 380px;
  overflow-y: auto;
}
.doctos-prov-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.doctos-prov-row:last-child {
  border-bottom: none;
}
.doctos-prov-row:hover {
  background: var(--bg);
}
.doctos-prov-row-skip {
  opacity: 0.5;
  background: rgba(0,0,0,0.02);
}
.doctos-prov-row-skip:hover {
  opacity: 0.7;
}
.doctos-prov-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.doctos-prov-info-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.doctos-prov-info-main strong {
  font-size: 13px;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.doctos-prov-info-rut {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.doctos-prov-info-meta {
  font-size: 11px;
  color: var(--muted);
}

/* Mobile: stack vertical */
@media (max-width: 980px) {
  #modal-doctos-overlay .modal-cartola {
    width: calc(100vw - 24px);
  }
  .doctos-table-grid .lote-table-head { display: none; }
  .doctos-table-grid .lote-row {
    grid-template-columns: 36px 1fr 110px;
    grid-template-rows: auto auto auto;
    gap: 8px;
    padding: 12px;
  }
  .doctos-table-grid .lote-row .lote-col-check { grid-column: 1; grid-row: 1; padding-left: 0; }
  .doctos-table-grid .lote-row .lote-col-badge {
    grid-column: 3; grid-row: 1; justify-self: end;
    border-left: none; padding: 0;
  }
  .doctos-table-grid .lote-row .lote-col-docto { grid-column: 2 / 4; grid-row: 2; padding: 0; }
  .doctos-table-grid .lote-row .lote-col-cargo {
    grid-column: 1 / 4; grid-row: 3;
    padding: 8px 0 0 0;
    border-left: none;
    border-top: 1px dashed var(--border);
  }
}

/* ─────────────────────────────────────────────────────────────────
   PATCH.25.9.4 — Botones de accion en la linea del titulo
   Felipe pidio mover los botones "Importar conciliacion" y "Cargar
   documentos" a la misma linea del titulo "Documentos de Compra",
   a la izquierda del contador "10 documentos", para aprovechar el
   alto vertical y no crear filas adicionales.
   
   Estructura del .card-title (flex con align-items:center):
     [icon] [Documentos de Compra] [.card-title-actions: btn1 btn2] [counter→]
                                   ↑ margin-left:auto empuja todo
                                     este grupo al extremo derecho,
                                     antes del counter (que tambien
                                     tiene margin-left:auto pero es
                                     hijo posterior, por lo que el
                                     margin-left del primero gana).
   ───────────────────────────────────────────────────────────────── */
.card-title-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
/* Counter sigue al final, separado de los botones por un gap visual */
.card-title-actions + .card-title-counter {
  margin-left: 16px;
}
/* Botones compactos para que quepan en la linea del titulo sin saturar */
.btn-title-action {
  width: auto;
  height: 30px;
  padding: 0 12px;
  font-size: 11px;
}
.btn-title-action svg {
  width: 12px;
  height: 12px;
}
@media (max-width: 760px) {
  /* En mobile el titulo se hace columna y los botones bajan abajo */
  .card-title {
    flex-wrap: wrap;
  }
  .card-title-actions {
    flex-basis: 100%;
    margin-left: 0;
    margin-top: 8px;
    justify-content: flex-end;
  }
  .card-title-actions + .card-title-counter {
    margin-left: auto;
  }
  .btn-title-action {
    flex: 1;
  }
}

/* ─────────────────────────────────────────────────────────────────
   PATCH.25.9.7 — Badges específicos para Cargar Documentos
   Reemplaza inline styles por clases reutilizables.
   PROV ✗   = naranja warning (proveedor no existe, requiere decisión)
   RUT ✗    = azul info       (proveedor existe pero sin RUT en BD,
                                advertencia leve, se completa opcionalmente)
   ───────────────────────────────────────────────────────────────── */
.doctos-badge-prov-falta {
  color: var(--warning, #d68800);
  border-color: #d68800;
}
.doctos-badge-rut-falta {
  color: var(--info, #2c6dc7);
  border-color: #2c6dc7;
}

/* =======================================================================
   PATCH.25.9.49 — Botón de acción CN (estilo unificado para acciones
   secundarias en headers de cards). Usado por "Exportar XLSX" en Brecha.
   Mismo lenguaje visual que .field-action-btn pero ligeramente mayor
   para headers (más cómodo para click).
   ======================================================================= */
.btn-action-cn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn-action-cn:hover {
  background: var(--navy);
  color: var(--white);
}
.btn-action-cn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.btn-action-cn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-action-cn svg {
  flex-shrink: 0;
}

/* =======================================================================
   PATCH.25.9.49 — Modal detalle mes (centrado, pantalla amplia)
   - Overlay opaco encima del drawer (que queda abierto detrás)
   - Modal centrado, max-width 1100px, max-height 90vh
   - Body con scroll vertical
   - Tabla interna puede hacer scroll horizontal si la información lo requiere
   ======================================================================= */
.modal-detalle-mes-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 33, 55, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1600;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.modal-detalle-mes-overlay.open {
  display: flex;
  opacity: 1;
}
.modal-detalle-mes {
  background: var(--white, #ffffff);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(13, 33, 55, 0.4);
  width: 100%;
  /* PATCH.25.9.53: ampliado de 1100px a 1500px. Felipe pidió aprovechar
     más el espacio en pantalla; en MacBook 14" todavía queda holgura
     a los lados, en pantallas más chicas sigue respondiendo con width 100%. */
  max-width: 1500px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-detalle-mes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #e3e8ef);
  background: var(--bg, #f5f7fa);
}
.modal-detalle-mes-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--muted, #738294);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.modal-detalle-mes-close-btn:hover {
  background: var(--white);
  color: var(--navy);
  border-color: var(--border, #e3e8ef);
}
.modal-detalle-mes-close-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.modal-detalle-mes-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Tablas dentro del modal detalle mes: anchos compactos pero permite
   scroll horizontal si la información (ej. razón social larga) lo requiere. */
.modal-detalle-mes-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border, #e3e8ef);
  border-radius: 6px;
  margin-bottom: 18px;
  background: var(--white);
}
.modal-detalle-mes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.modal-detalle-mes-table thead th {
  background: var(--navy, #0d2137);
  color: var(--white);
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.modal-detalle-mes-table thead th.text-right {
  text-align: right;
}
.modal-detalle-mes-table tbody td {
  padding: 8px 12px;
  border-top: 1px solid var(--border, #e3e8ef);
  vertical-align: top;
  white-space: nowrap;
}
.modal-detalle-mes-table tbody td.cell-wrap {
  white-space: normal;
  min-width: 200px;
}
.modal-detalle-mes-table tbody td.cell-monto {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* PATCH.25.9.53: nowrap para evitar que el "$" se rompa en línea separada
     del monto cuando el contenido de la columna apenas excede el ancho. */
  white-space: nowrap;
}
.modal-detalle-mes-table tbody tr:hover {
  background: var(--bg, #f5f7fa);
}
.modal-detalle-mes-table tfoot td {
  padding: 10px 12px;
  border-top: 2px solid var(--navy, #0d2137);
  font-weight: 700;
  background: var(--bg, #f5f7fa);
}
.modal-detalle-mes-table tfoot td.cell-monto {
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* PATCH.25.9.53: mismo nowrap en tfoot. */
  white-space: nowrap;
}

/* PATCH.25.9.53: Filas de encabezado de grupo en la tabla "Distribución
   por tipo" (subtítulos "Ingresos" / "Egresos" como bloque, no columna). */
.modal-detalle-mes-table tr.modal-detalle-mes-group-header td {
  background: var(--navy, #0d2137);
  color: var(--white, #ffffff);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 12px;
  border-top: 1px solid var(--navy, #0d2137);
  border-bottom: 1px solid var(--navy, #0d2137);
}
.modal-detalle-mes-table tr.modal-detalle-mes-group-header:hover td {
  background: var(--navy, #0d2137);
}
/* Tabla específica de distribución: ancho compacto, no necesita ocupar todo
   el ancho del modal porque solo tiene 3 columnas. */
/* PATCH.25.9.54: aplicar max-width al WRAPPER, no a la tabla, para que
   el borde del wrap también se limite al ancho de la tabla y no se
   extienda con espacio vacío hasta el ancho del modal (1500px). */
.modal-detalle-mes-table-wrap.distrib-wrap {
  max-width: 600px;
}
.modal-detalle-mes-distrib {
  /* La tabla dentro del wrap ya ocupa el width: 100% del wrap, que
     ahora está limitado por max-width: 600px arriba. */
}
.modal-detalle-mes-empty {
  padding: 20px;
  text-align: center;
  color: var(--muted, #738294);
  font-style: italic;
  font-size: 12px;
}
.modal-detalle-mes-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--navy, #0d2137);
}
.modal-detalle-mes-section-title h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy, #0d2137);
  letter-spacing: 0.02em;
}
.modal-detalle-mes-section-title .total {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.modal-detalle-mes-section-title .total.positivo { color: #2c7a4d; }
.modal-detalle-mes-section-title .total.negativo { color: #c0392b; }

/* Tag tipo (cierre, factura, docto, nomina, egreso proyectado) en la tabla */
.modal-detalle-mes-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.modal-detalle-mes-tag.tag-cierre   { background: #e8f4ff; color: #1860a8; }
.modal-detalle-mes-tag.tag-factura  { background: #e6f4ec; color: #1d6e3a; }
.modal-detalle-mes-tag.tag-docto    { background: #fdf3e7; color: #9b5a0d; }
.modal-detalle-mes-tag.tag-nomina   { background: #f3edff; color: #5a2e9c; }
.modal-detalle-mes-tag.tag-proyect  { background: #ffeef0; color: #a3263a; }

/* Resumen del mes en la cabecera del modal body */
.modal-detalle-mes-resumen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background: var(--bg, #f5f7fa);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 18px;
}
.modal-detalle-mes-resumen-item {
  text-align: left;
}
.modal-detalle-mes-resumen-item .label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #738294);
  margin-bottom: 2px;
}
.modal-detalle-mes-resumen-item .valor {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy, #0d2137);
  font-variant-numeric: tabular-nums;
}
.modal-detalle-mes-resumen-item .valor.positivo { color: #2c7a4d; }
.modal-detalle-mes-resumen-item .valor.negativo { color: #c0392b; }