:root {
  --navy: #0e084c;
  --navy-light: #221a6b;
  --sage: #9f9b88;
  --sage-light: #b9b6a7;
  --platinum: #e3e3da;
  --white: #ffffff;
  --text: #1c1a2e;
  --text-muted: #6b6a7a;
  --danger: #b3382c;
  --success: #1f7a4d;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(14, 8, 76, 0.08), 0 8px 24px rgba(14, 8, 76, 0.06);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--platinum);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  /* Red de seguridad: nada debería poder forzar scroll horizontal de la
     página entera — las tablas anchas ya tienen su propio scroll interno
     vía .table-scroll. Si algo se desborda, se recorta en vez de empujar
     la página hacia la derecha. */
  overflow-x: hidden;
}

a {
  color: inherit;
}

/* ---- Top bar ---- */
.topbar {
  background: var(--white);
  border-bottom: 1px solid #d8d8cf;
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10px;
}

.logo {
  height: 40px;
}

.topbar nav {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 18px;
}

.topbar nav a {
  text-decoration: none;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.topbar nav a.active,
.topbar nav a:hover {
  color: var(--navy);
}

/* ---- Layout ---- */
main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.hero-section {
  padding: 28px 0 20px;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 700;
  margin: 0 0 8px;
}

.hero-section h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.subtitle {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}

/* ---- Subnav (selector interno para páginas fusionadas: Catálogos/Proyectos, Archivos) ---- */
.subnav {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.subnav-btn {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid #d8d8cf;
  background: var(--white);
  color: var(--text-muted);
  cursor: pointer;
}

.subnav-btn:hover {
  color: var(--navy);
}

.subnav-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* ---- KPI cards ---- */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.kpi-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Grupos de tarjetas separados por moneda (Quetzales / Dólares): cada
   moneda es su propia fila de tarjetas del mismo tamaño — nunca una
   dentro de otra — para que no parezca un valor convertido. */
.kpi-currency-group {
  margin-bottom: 18px;
}

.kpi-currency-group .eyebrow {
  margin-bottom: 8px;
}

.kpis-compact {
  margin-bottom: 0;
  gap: 12px;
}

.kpi-card-compact {
  padding: 13px 16px;
  gap: 3px;
}

.kpi-card-compact .kpi-label {
  font-size: 10px;
}

.kpi-card-compact .kpi-value {
  font-size: 19px;
}

.kpi-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.kpi-value {
  /* clamp() en vez de un tamaño fijo: en pantallas angostas el número
     se achica un poco solo, antes de tener que elegir entre cortarse en
     dos líneas o desbordar la tarjeta — así aguanta montos grandes
     (millones, con signo negativo) sin quebrarse, sin importar el ancho
     de pantalla. */
  font-size: clamp(15px, 2.1vw, 22px);
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

.kpi-delta {
  font-size: 12px;
  font-weight: 600;
}

.kpi-delta.up {
  color: var(--danger);
}

.kpi-delta.down {
  color: var(--success);
}

/* ---- Panels ---- */
.grid-2 {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  margin-bottom: 16px;
  /* Los items de un grid no se achican por debajo del ancho de su
     contenido a menos que se les diga explícitamente — sin esto, un
     <canvas> de Chart.js (que trae su propio ancho en píxeles) puede
     forzar la columna, el grid, y toda la página a desbordar hacia la
     derecha en vez de encoger junto con la ventana. */
  min-width: 0;
}

.panel {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  margin-bottom: 16px;
  min-width: 0;
}

.panel.full {
  width: 100%;
}

.panel canvas {
  max-height: 280px;
  max-width: 100%;
}

/* ---- Link list (gasto por proyecto) ---- */
.link-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.link-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--platinum);
  font-size: 13px;
}

.link-list li:last-child {
  border-bottom: none;
}

.link-list a {
  text-decoration: none;
  color: var(--navy);
  font-weight: 600;
}

.link-list a:hover {
  text-decoration: underline;
}

.link-list .amount {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- Tables ---- */
.table-scroll {
  overflow-x: auto;
  margin-top: 12px;
  -webkit-overflow-scrolling: touch;
}

.table-scroll .data-table {
  margin-top: 0;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 12px;
}

.data-table th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 2px solid var(--platinum);
  white-space: nowrap;
}

.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--platinum);
  white-space: nowrap;
}

.data-table tbody tr:hover {
  background: #faf9f5;
}

.data-table a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}

.data-table a:hover {
  text-decoration: underline;
}

.pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pill.pendiente {
  background: #fbeee9;
  color: var(--danger);
}

.pill.ejecucion {
  background: #e8f3ec;
  color: var(--success);
}

.pill.evaluacion {
  background: #eeecf7;
  color: var(--navy);
}

.pill.operativo {
  background: #f0efe9;
  color: var(--sage);
}

.pill.default {
  background: var(--platinum);
  color: var(--text-muted);
}

/* ---- Formularios (módulo Crear Proyecto) ---- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 4px;
}

.form-field-wide {
  grid-column: 1 / -1;
}

.form-field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}

.form-field input,
.form-field select {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  padding: 9px 11px;
  border: 1px solid #d8d8cf;
  border-radius: 6px;
  background: var(--white);
  color: var(--text);
}

/* Checkboxes tipo "El pago ya se hizo" / "Marcar como pagado ahora" viven
   dentro de un <label> junto con su texto — sin esto heredan width:100%
   de la regla de arriba y quedan lejos del texto de la pregunta. */
.form-field label input[type="checkbox"] {
  width: auto;
  margin-right: 6px;
  vertical-align: middle;
}

.form-field label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  text-transform: none;
  font-size: 13.5px;
  letter-spacing: normal;
  color: var(--text);
  cursor: pointer;
}

.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--navy);
}

/* Prefijo Q/$ en campos de monto de los popups Agregar/Editar movimiento —
   la moneda ya se eligió antes de que estos campos se rendericen, así que
   el símbolo se decide una sola vez al armar el HTML (no hace falta
   escuchar cambios). */
.am-money-field {
  position: relative;
}

.am-money-field .am-money-symbol {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 13.5px;
  pointer-events: none;
}

.am-money-field input {
  padding-left: 24px;
}

/* Marca en rojo un input de monto que no cuadra en una validación cruzada
   en vivo (ej. desglose Capital + Interés de un Pago Hipoteca) — se
   alterna con classList.toggle, no queda fijo. */
.am-monto-input.am-input-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}

/* Campo de fecha estándar (fechaInputHtml/wireFechaInputs en data.js) —
   texto con máscara DD/MM/AAAA + botón que abre el calendario nativo del
   navegador. El <input type="date"> real queda invisible: solo se usa
   programáticamente (showPicker()) para dar el popup de calendario sin
   que el navegador decida el formato del texto mostrado. */
.fecha-field {
  position: relative;
}

.fecha-field .fecha-input {
  padding-right: 34px;
}

.fecha-field .fecha-calendario-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
}

.fecha-field .fecha-calendario-btn:hover {
  background: var(--platinum);
  color: var(--text);
}

.fecha-field .fecha-nativo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: none;
  opacity: 0;
  pointer-events: none;
}

.rubro-row {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 10px;
  margin-bottom: 8px;
  align-items: center;
}

.rubro-row input {
  font-family: inherit;
  font-size: 13.5px;
  padding: 9px 11px;
  border: 1px solid #d8d8cf;
  border-radius: 6px;
  background: var(--white);
  color: var(--text);
}

.rubro-row input:focus {
  outline: none;
  border-color: var(--navy);
}

.btn-quitar-rubro {
  background: none;
  border: 1px solid #d8d8cf;
  border-radius: 6px;
  color: var(--danger);
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-size: 13px;
}

.btn-quitar-rubro:hover {
  background: #fbeee9;
}

@media (max-width: 700px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .rubro-row {
    grid-template-columns: 1fr 1fr auto;
  }
}

/* ---- Login (Netlify Identity) ---- */
#evo-auth-lock {
  display: none;
  position: fixed;
  inset: 0;
  /* El iframe del modal de Netlify Identity usa z-index: 99. Este overlay
     tiene que quedar DEBAJO de eso, si no el modal de login se abre
     invisible detrás de esta pantalla y el botón "Iniciar sesión" parece
     no hacer nada. */
  z-index: 50;
  background: var(--navy);
  align-items: center;
  justify-content: center;
}

.evo-auth-lock-box {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 36px;
  text-align: center;
  max-width: 360px;
}

.evo-auth-lock-box h2 {
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
}

.evo-auth-lock-box .subtitle {
  margin-bottom: 20px;
}

.evo-auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.evo-auth-form input {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid #d8d8cf;
  border-radius: 6px;
  background: var(--white);
  color: var(--text);
}

.evo-auth-form input:focus {
  outline: none;
  border-color: var(--navy);
}

.evo-auth-form .btn {
  width: 100%;
  margin-top: 4px;
}

.evo-link-btn {
  background: none;
  border: none;
  color: var(--sage);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.evo-link-btn:hover {
  color: var(--navy);
}

.evo-topbar-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin-left: auto;
  padding-left: 20px;
}

.evo-user-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 1px solid #d8d8cf;
  padding-left: 20px;
  order: 1;
}

.evo-sync-badge {
  order: 2;
}

.evo-user-email {
  font-size: 12px;
  color: var(--text-muted);
}

.evo-user-rol {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--navy);
  background: var(--platinum);
  padding: 3px 8px;
  border-radius: 999px;
}

.evo-logout-btn {
  background: none;
  border: none;
  color: var(--sage);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.evo-logout-btn:hover {
  color: var(--danger);
}

/* ---- Indicador de sincronización (reemplaza el texto "actualizado...") ---- */
.evo-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--platinum);
  color: var(--text-muted);
  border: none;
  cursor: default;
  white-space: nowrap;
}

.evo-sync-badge .evo-sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.evo-sync-badge.ok {
  background: #e8f3ec;
  color: var(--success);
}

.evo-sync-badge.ok .evo-sync-dot {
  background: var(--success);
}

.evo-sync-badge.error {
  background: #fbeee9;
  color: var(--danger);
}

.evo-sync-badge.error .evo-sync-dot {
  background: var(--danger);
}

.evo-sync-badge.loading .evo-sync-dot {
  background: var(--sage);
}

/* ---- Filters ---- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.filters select,
.filters input {
  font-family: inherit;
  font-size: 12.5px;
  padding: 8px 10px;
  border: 1px solid #d8d8cf;
  border-radius: 6px;
  background: var(--white);
  color: var(--text);
}

.filters select:focus,
.filters input:focus {
  outline: none;
  border-color: var(--navy);
}

.btn {
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--navy-light);
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sage);
  text-decoration: none;
  margin-bottom: 18px;
}

.btn-back:hover {
  color: var(--navy);
}

/* ---- Agregar movimiento (popup) ---- */
.am-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 8, 76, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  z-index: 500;
}

.am-modal {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 640px;
  padding: 28px;
}

.am-modal h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.am-modal .am-paso {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 18px;
}

.am-choices {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.am-choice-btn {
  flex: 1 1 160px;
  padding: 22px 16px;
  border-radius: var(--radius);
  border: 2px solid var(--platinum);
  background: var(--white);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  text-align: center;
}

.am-choice-btn:hover {
  border-color: var(--sage);
}

.am-choice-btn.am-selected {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

.am-toggle {
  display: flex;
  gap: 8px;
}

.am-toggle button {
  flex: 1;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--platinum);
  background: var(--white);
  cursor: pointer;
  font-size: 13px;
}

.am-toggle button.am-selected {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

.am-field-add {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.am-field-add input {
  flex: 1;
}

.am-link-add {
  font-size: 12px;
  color: var(--sage);
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 4px 0;
}

.am-link-add:hover {
  color: var(--navy);
}

.am-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
}

.am-close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
}

.am-modal {
  position: relative;
}

.am-saldo {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: -6px;
}

input.am-no-spin::-webkit-outer-spin-button,
input.am-no-spin::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input.am-no-spin {
  -moz-appearance: textfield;
}

.am-abrir-btn {
  margin-bottom: 18px;
}

/* "Saldo pendiente" en los KPIs de Egresos trae un tooltip nativo (title)
   con los correlativos pendientes — este subrayado punteado es la única
   pista visual de que hay algo al pasar el mouse. */
.kpi-label-hint {
  cursor: help;
  border-bottom: 1px dotted var(--text-muted);
}

/* Fila "+ Agregar Movimiento Individual" / "+ Agregar Movimiento Masivo"
   debajo de Tendencia mensual en Egresos — el botón Masivo abre/cierra el
   panel de carga de CSV, que queda debajo de esta fila a todo el ancho. */
.agregar-movimiento-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin: 18px 0;
}
.agregar-movimiento-row .am-abrir-btn {
  margin-bottom: 0;
}

.dt-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eef1e9;
  border: 1px solid var(--border-color, #d8d5c8);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-main, #0e084c);
}

.dt-chip a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 700;
}

.dt-chip a:hover {
  color: #b3382c;
}

.dt-drill-link {
  cursor: pointer;
}

/* ---- Detail page ---- */
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.detail-header .meta {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 6px;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

footer {
  text-align: center;
  padding: 30px 24px 50px;
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-2 {
    grid-template-columns: 1fr;
  }
  main {
    padding: 24px 16px 60px;
  }
}

/* ---- Móvil (celular) ---- */
@media (max-width: 600px) {
  .topbar-inner {
    padding: 12px 16px;
  }
  .topbar nav {
    gap: 5px 14px;
  }
  .topbar nav a {
    font-size: 11px;
  }
  .evo-user-badge {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    width: 100%;
    justify-content: space-between;
  }
  .evo-user-email {
    display: none;
  }
  main {
    padding: 18px 12px 50px;
  }
  .hero-section {
    padding: 16px 0 14px;
  }
  .hero-section h1 {
    font-size: 24px;
  }
  .kpis {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .kpi-card {
    padding: 14px;
  }
  .kpi-value {
    font-size: 19px;
  }
  .panel {
    padding: 16px;
  }
  .subnav {
    flex-wrap: wrap;
  }
  .subnav-btn {
    font-size: 11px;
    padding: 8px 14px;
  }
  .filters {
    flex-direction: column;
    align-items: stretch;
  }
  .filters select,
  .filters input {
    width: 100%;
  }
  .data-table {
    font-size: 12px;
  }
  .data-table th,
  .data-table td {
    padding: 8px 9px;
  }
}

/* ---- Botón de correlativo — todavía lo usa la tabla vieja de Egresos
   (egresos.js, lee del Excel) para abrir su detalle. ---- */
.dt-correlativo-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--sage);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

.dt-correlativo-btn:hover {
  color: var(--navy);
  text-decoration-color: currentColor;
}

/* ---- Tabla "Todos los movimientos" (Débitos, motor nuevo) — toda la fila
   abre edición, no solo el correlativo. ---- */
.data-table tr.dt-fila-clickeable {
  cursor: pointer;
}

.data-table tr.dt-fila-clickeable:hover td {
  background: #eef1e9;
}

/* Fila entera coloreada en vez de columna de Estatus aparte — rojo
   mientras falte algo (Pendiente, o Pagado con saldo de un anticipo).
   Vuelve a verse igual que las demás filas en cuanto queda Pagado y
   saldado del todo. Anulado ya no se pinta en gris — se identifica con
   el texto "Anulado" en la columna Contraparte (ver dtRenderTabla). */
.data-table tr.dt-fila-pendiente td {
  background: #fbeee9;
}

/* ---- Reporte financiero: controles + membrete EVO (P&L / Balance General) ---- */

.rf-controles {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.rf-controles .form-field select,
.rf-controles .form-field input {
  min-width: 200px;
}

.rf-btn-generar {
  height: 40px;
}

.rf-acciones {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.rf-hoja {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-top: 24px;
  padding: 0;
  overflow: hidden;
}

.rf-membrete {
  background: var(--navy);
  color: var(--white);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.rf-membrete img {
  height: 44px;
  width: auto;
  /* El logo trae su propio wordmark oscuro (pensado para fondo blanco,
     como en el topbar) — sobre el navy del membrete se pierde casi
     por completo. Se le pone una placa blanca detrás para que se vea
     igual que en el resto del sitio, sin tocar el archivo del logo. */
  background: var(--white);
  padding: 6px 10px;
  border-radius: 6px;
}

.rf-membrete-textos p {
  margin: 0;
}

.rf-membrete-empresa {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
}

.rf-membrete-sub {
  font-size: 12px;
  color: var(--sage-light);
  margin-top: 2px !important;
}

/* El logo ya dice "EVO Group" — cuando es la única línea junto al logo
   (ya no hay nombre de empresa repetido arriba), se muestra más grande
   y en blanco para que funcione como título, no como subtítulo. */
.rf-membrete-sub-sola {
  font-size: 15px !important;
  font-weight: 600;
  color: var(--white) !important;
  margin-top: 0 !important;
}

.rf-cuerpo {
  padding: 28px 32px 32px;
  /* Red de seguridad: si alguna tabla igual termina más ancha que la
     tarjeta (columna con contenido largo, etc.), que aparezca un scroll
     horizontal acá en vez de que .rf-hoja la recorte en silencio. */
  overflow-x: auto;
}

.rf-titulo-estado {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 4px;
}

.rf-subtitulo-estado {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 24px;
}

.rf-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.rf-tabla td {
  padding: 6px 4px;
  border-bottom: 1px solid #ececE4;
}

.rf-tabla td:last-child {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rf-tabla tr.rf-seccion td {
  font-weight: 700;
  color: var(--navy);
  padding-top: 18px;
  border-bottom: 2px solid var(--navy);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
}

.rf-tabla tr.rf-subtotal td {
  font-weight: 700;
  border-top: 1px solid var(--text-muted);
  border-bottom: none;
}

.rf-tabla tr.rf-total td {
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  border-top: 2px solid var(--navy);
  border-bottom: 2px double var(--navy);
  padding-top: 10px;
  padding-bottom: 10px;
}

.rf-tabla tr.rf-vacio td {
  color: var(--text-muted);
  font-style: italic;
  padding: 4px;
  /* Estas filas son texto explicativo/estado vacío, casi siempre en un
     único <td colspan>. Al ser el último (y único) <td> de la fila,
     heredaban white-space:nowrap + text-align:right de la regla
     ".rf-tabla td:last-child" (pensada para columnas numéricas), lo que
     forzaba una sola línea sin salto — más ancha que la tarjeta — y esa
     tabla entera terminaba recortada por el overflow:hidden de .rf-hoja.
     Se anula acá para que el texto haga salto de línea normal. */
  white-space: normal !important;
  text-align: left !important;
}

.rf-pie {
  margin-top: 24px;
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #ececE4;
  padding-top: 12px;
}

.rf-descuadre {
  margin-top: 14px;
  font-size: 12px;
  color: var(--danger);
  font-weight: 600;
}

.rf-fila-cuenta:hover td {
  background: #f4f3ee;
}

.rf-mayor-detalle td {
  padding: 6px 0 14px 18px;
  border-bottom: 1px solid #ececE4;
}

.rf-tabla-mayor {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.rf-tabla-mayor th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  padding: 4px 8px;
  border-bottom: 1px solid #ececE4;
}

.rf-tabla-mayor td {
  padding: 4px 8px;
  border-bottom: none;
}

@page {
  /* Márgenes explícitos — sin esto, cada navegador/impresora pone lo
     que quiere, y en tablas anchas (Comprobación, Formato gerencial)
     eso es lo que hacía que se viera "cortado" a la derecha. */
  margin: 1.2cm;
}

@media print {
  header.topbar, .rf-controles-panel, .rf-acciones, .btn-back, footer, .hero-section {
    display: none !important;
  }
  body {
    background: var(--white);
    /* La página normal recorta cualquier desborde horizontal como red
       de seguridad (overflow-x: hidden) — al imprimir eso es exactamente
       lo que corta contenido real en vez de dejarlo fluir a la
       siguiente página, así que se desactiva solo acá. */
    overflow-x: visible;
  }
  main {
    max-width: none !important;
    padding: 0 !important;
  }
  .rf-hoja {
    box-shadow: none;
    margin-top: 0;
    /* .rf-hoja tiene overflow:hidden (para las esquinas redondeadas en
       pantalla) — eso es lo que de verdad recortaba las tablas anchas,
       no el overflow-x del body. Se libera acá para impresión. */
    overflow: visible;
  }
  .rf-cuerpo {
    overflow-x: visible;
  }
  .rf-membrete {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Ninguna fila de tabla, ni el membrete/pie, se debe partir a la mitad
     entre una página impresa y la siguiente. */
  .rf-tabla tr,
  .rf-tabla-mayor tr,
  .rf-membrete,
  .rf-pie {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .rf-tabla,
  .rf-tabla-mayor {
    font-size: 12px;
  }
  .rf-tabla td {
    padding: 5px 3px;
  }
  .rf-cuerpo {
    padding: 20px 12px 24px;
  }
  .rf-membrete {
    padding: 20px 12px;
  }
}