/* ==========================================================================
   Prime Gestión — Estilos Módulo 04: Finanzas
   ========================================================================== */

/* ── KPI Cards de Finanzas ─────────────────────────────────────────────── */
.fin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.fin-kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.fin-kpi-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}
.fin-kpi-card .lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
}
.fin-kpi-card .val {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}
.fin-kpi-card .sub {
  font-size: 12px;
  color: var(--muted);
}

/* ── Tabla Contable y Desglose PYG ─────────────────────────────────────── */
.fin-acc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.fin-acc-table th {
  background: var(--panel);
  color: var(--muted);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.fin-acc-table th.num, .fin-acc-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fin-acc-table tr.section-hdr th {
  background: #181818;
  color: var(--accent);
  font-size: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.fin-acc-table tr.section-hdr.gasto th {
  color: var(--red);
}
.fin-acc-table td {
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  vertical-align: middle;
}
.fin-acc-table tr:hover td {
  background: rgba(255,255,255,.02);
}
.fin-acc-row.clickable {
  cursor: pointer;
}
.fin-acc-row.clickable:hover td {
  background: rgba(59,191,173,.04);
}
.fin-acc-table tr.total-row td {
  background: var(--panel);
  font-weight: 800;
  font-size: 14px;
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
}
.fin-acc-table tr.ebitda-row td {
  background: #161a19;
  font-weight: 900;
  font-size: 15px;
  color: var(--accent);
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
}

.fin-drilldown-box {
  background: #111;
  padding: 10px 16px 12px 36px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.fin-drilldown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255,255,255,.05);
}
.fin-drilldown-item:last-child {
  border-bottom: none;
}

/* ── Modelo 303 Fiscal ─────────────────────────────────────────────────── */
.fin-m303-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.fin-m303-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.fin-casilla-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.fin-casilla {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fin-casilla .num-tag {
  background: rgba(255,255,255,.08);
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 4px;
  margin-right: 8px;
}
.fin-casilla .label {
  font-size: 12px;
  color: var(--muted);
  flex: 1;
}
.fin-casilla .val {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: 10px;
}

/* ── Conciliación Bancaria ─────────────────────────────────────────────── */
.fin-diff-banner {
  border-radius: var(--radius);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
}
.fin-diff-banner.ok {
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.3);
  color: var(--green);
}
.fin-diff-banner.warn {
  background: rgba(255,159,67,.1);
  border: 1px solid rgba(255,159,67,.3);
  color: var(--warn);
}
.fin-diff-banner.bad {
  background: rgba(238,82,83,.1);
  border: 1px solid rgba(238,82,83,.3);
  color: var(--red);
}

.fin-real-balance-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.fin-bank-mov-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.fin-bank-mov-table th {
  background: var(--panel);
  color: var(--muted);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.fin-bank-mov-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.fin-bank-mov-table tr:hover td {
  background: rgba(255,255,255,.02);
}

/* ── Badges y Estados ──────────────────────────────────────────────────── */
.fin-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.fin-status-badge.paid {
  background: rgba(16,185,129,.15);
  color: var(--green);
  border: 1px solid rgba(16,185,129,.3);
}
.fin-status-badge.pending {
  background: rgba(255,159,67,.15);
  color: var(--warn);
  border: 1px solid rgba(255,159,67,.3);
}
.fin-status-badge:hover {
  transform: scale(1.05);
}