/* =======================================================================
   CP-Portal-FlujoCaja-CN - css/tablas-financiero.css
   Fase W.9 - PROPUESTA 2: tablas con estilo de estado financiero.

   Toma las reglas de diseño del Estado de Pago v3 (06 Skills/Generador de
   Estados de Pago, "Diseño (v3)"):
     - Sin líneas horizontales entre filas: las filas se distinguen por un
       fondo alterno muy suave y los bloques por franjas.
     - Encabezado sin relleno: rótulos pequeños en navy sobre blanco, con una
       regla navy debajo.
     - Totales en franja navy con texto blanco (como TOTAL CON IVA).
     - Paleta neutra: tinta #111827, gris #6B7280, franja #F3F4F6, suave
       #F9FAFB, regla #D1D5DB.

   Se carga después de main.css y solo afecta a las pantallas (.screen-content):
   las tablas de los modales conservan su estilo. La paleta corporativa
   (navy, dorado, acento) y la tipografía no cambian.
   ======================================================================= */

.screen-content {
  --fin-ink: #111827;
  --fin-gray: #6b7280;
  --fin-light: #9ca3af;
  --fin-band: #f3f4f6;
  --fin-soft: #f9fafb;
  --fin-rule: #d1d5db;
  --fin-line: #e5e7eb;
}

/* ── Tarjetas y filtros: más planos ── */
.screen-content .card {
  border-color: var(--fin-line);
  box-shadow: none;
  border-radius: 8px;
}
.screen-content .admin-filters {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--fin-line);
  border-radius: 0;
  padding: 0 0 14px;
  margin-bottom: 14px;
}
.screen-content .filter-group select,
.screen-content .filter-group input {
  border-color: var(--fin-rule);
  border-radius: 4px;
  height: 34px;
}
.screen-content .btn-filter-clear {
  border-radius: 4px;
  height: 34px;
}

/* ── Contenedor de tabla sin marco: la regla del encabezado y la franja de
      totales delimitan la tabla ── */
.screen-content .table-wrap {
  border: none;
  border-radius: 0;
  background: transparent;
}
.screen-content .table-scroll table {
  font-size: 12.5px;
  color: var(--fin-ink);
  font-feature-settings: 'tnum';
}

/* ── Encabezado: rótulos navy sobre blanco y regla navy (fija al bajar) ── */
.screen-content .table-scroll thead th {
  background: var(--white, #fff);
  color: var(--navy);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 10px 12px 8px;
  box-shadow: inset 0 -2px 0 var(--navy);
}
.screen-content th.th-sortable .sort-indicator { color: #c4c9d2; }
.screen-content th.th-sortable:hover .sort-indicator { color: var(--fin-gray); }
.screen-content th.th-sortable.th-sorted .sort-indicator { color: var(--navy); }

/* ── Cuerpo: sin líneas; fondo alterno suave y franja al pasar el puntero ── */
.screen-content .table-scroll tbody tr {
  border-bottom: none;
}
.screen-content .table-scroll tbody tr:nth-child(odd) {
  background: var(--white, #fff);
}
.screen-content .table-scroll tbody tr:nth-child(even) {
  background: var(--fin-soft);
}
.screen-content .table-scroll tbody tr:hover {
  background: var(--fin-band);
}
.screen-content .table-scroll tbody td {
  padding: 8px 12px;
  color: var(--fin-ink);
}
.screen-content .td-muted,
.screen-content .table-scroll .td-fecha {
  color: var(--fin-gray);
}

/* ── Insignias: rectangulares y discretas (mismos colores de estado), en toda
      la app: pantallas, paneles laterales y ventanas emergentes ── */
.badge-tipo {
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 9.5px;
  letter-spacing: 0.04em;
}

/* ── Totales: franja navy con texto blanco, como el cierre del EP ── */
.screen-content .table-scroll tfoot td {
  background: var(--navy);
  color: #fff;
  border-top: none;
  padding: 9px 12px;
}
.screen-content .table-scroll tfoot td.tabla-total-monto.negativo {
  color: #fecaca;
}

/* ── Secciones plegables (historiales): una regla en vez de caja ── */
.screen-content details > summary {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--fin-line) !important;
  border-radius: 0 !important;
  padding: 12px 2px !important;
}

/* ── Buscador y acciones de tabla con el mismo radio ── */
.screen-content .tabla-buscador-campo input,
.screen-content .tabla-accion {
  border-radius: 4px;
  border-color: var(--fin-rule);
}


/* =======================================================================
   Fase W.12 - El mismo estilo en el resto de la app: ventanas emergentes,
   paneles laterales e importadores. Mismas reglas que arriba: sin líneas
   entre filas, encabezado navy sobre blanco con regla navy, fondo alterno
   suave, grupos en franja gris y totales en franja navy.
   ======================================================================= */

:root {
  --fin-ink: #111827;
  --fin-gray: #6b7280;
  --fin-band: #f3f4f6;
  --fin-soft: #f9fafb;
  --fin-rule: #d1d5db;
  --fin-line: #e5e7eb;
}

/* ── Detalle del mes (Análisis) ── */
.modal-detalle-mes-table-wrap {
  border: none;
  border-radius: 0;
}
.modal-detalle-mes-table {
  color: var(--fin-ink);
  font-feature-settings: 'tnum';
}
.modal-detalle-mes-table thead th {
  background: var(--white, #fff);
  color: var(--navy);
  box-shadow: inset 0 -2px 0 var(--navy);
}
.modal-detalle-mes-table tbody td {
  border-top: none;
}
.modal-detalle-mes-table tbody tr:nth-child(even) {
  background: var(--fin-soft);
}
.modal-detalle-mes-table tbody tr:hover {
  background: var(--fin-band);
}
.modal-detalle-mes-table tfoot td,
.modal-detalle-mes-table tfoot td * {
  background: var(--navy);
  /* el monto del total trae su color en línea (verde o rojo): sobre la
     franja navy va en blanco, como el resto del total */
  color: #fff !important;
  border-top: none;
}
.modal-detalle-mes-table tr.modal-detalle-mes-group-header td,
.modal-detalle-mes-table tr.modal-detalle-mes-group-header:hover td {
  background: var(--fin-band);
  color: var(--navy);
  border-top: none;
  border-bottom: none;
}

/* ── Conciliación en lote (grilla de documentos, nóminas y facturas) ── */
.lote-table {
  border: none;
  border-radius: 0;
}
.lote-table-head {
  background: var(--white, #fff);
  color: var(--navy);
  box-shadow: inset 0 -2px 0 var(--navy);
}
.lote-row {
  border-bottom: none;
}
.lote-table-body > .lote-row:nth-child(even) {
  background: var(--fin-soft);
}
.lote-row:hover {
  background: var(--fin-band);
}

/* ── Importadores (cartola, planilla, documentos) ── */
.modal-cartola .cartola-table-wrap {
  border: none;
  border-radius: 0;
}
.modal-cartola .cartola-table thead {
  background: var(--white, #fff);
}
.modal-cartola .cartola-table th {
  color: var(--navy);
  border-bottom: 2px solid var(--navy);
}
.modal-cartola .cartola-table td {
  border-bottom: none;
  color: var(--fin-ink);
}
.modal-cartola .cartola-table tbody tr:nth-child(even) {
  background: var(--fin-soft);
}

/* ── Paneles laterales (drawer): filas separadas por una regla fina ── */
.drawer-field {
  border-bottom: 1px solid var(--fin-line);
}
.drawer-field-label {
  color: var(--fin-gray);
}
.drawer-field-value {
  color: var(--fin-ink);
}
.drawer-footer {
  background: var(--white, #fff);
}

/* Cabeceras de grilla que antes iban sobre navy (conciliación en lote,
   importadores de planilla y de documentos): con el encabezado blanco, sus
   rótulos pasan a navy y los separadores verticales desaparecen. */
.lote-table-head,
.lote-table-head *,
.planilla-fac-grid-head,
.planilla-fac-grid-head *,
.planilla-cargo-grid-head,
.planilla-cargo-grid-head * {
  color: var(--navy) !important;
}
.lote-table-head [class*="lote-col"] {
  border-left-color: transparent !important;
}