/* ── Variables ─────────────────────────────────────────────────── */
:root {
  --clop-fondo:          #1a1d20;
  --clop-fondo-card:     #212529;
  --clop-fondo-sidebar:  #16191c;
  --clop-borde:          #2d3035;
  --clop-texto-tenue:    #8c939a;
  --clop-debe:           #dc3545;
  --clop-haber:          #198754;
  --clop-alerta:         #fd7e14;
  --clop-sidebar-ancho:  220px;
  --clop-sidebar-col:    52px;
  --clop-nav-alto:       56px;
  --clop-trans:          0.2s ease;
}

/* ── Base ──────────────────────────────────────────────────────── */
body {
  background-color: var(--clop-fondo);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9375rem;
}

/* ── Navbar ────────────────────────────────────────────────────── */
.clop-navbar {
  background-color: var(--clop-fondo-sidebar);
  border-bottom: 1px solid var(--clop-borde);
  height: var(--clop-nav-alto);
}

/* ── Sidebar ───────────────────────────────────────────────────── */
.clop-sidebar {
  width: var(--clop-sidebar-ancho);
  min-height: 100%;
  background-color: var(--clop-fondo-sidebar);
  border-right: 1px solid var(--clop-borde);
  transition: width var(--clop-trans);
  overflow: hidden;
  flex-shrink: 0;
}

.clop-sidebar.colapsado {
  width: var(--clop-sidebar-col);
}

/* ── Navegación del sidebar ────────────────────────────────────── */
.clop-nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  color: #adb5bd;
  white-space: nowrap;
  border-radius: 0;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
  cursor: pointer;
}

.clop-nav-link:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.clop-nav-link.active {
  background-color: rgba(13, 110, 253, 0.15);
  color: #6ea8fe;
}

.clop-nav-icono {
  font-size: 1.1rem;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.clop-nav-texto {
  font-size: 0.875rem;
  overflow: hidden;
  transition: opacity var(--clop-trans);
}

.clop-nav-sub {
  font-size: 0.82rem;
  padding: 0.35rem 0.75rem;
}

/* Ocultar texto e ítems de submenú cuando el sidebar está colapsado */
.clop-sidebar.colapsado .clop-nav-texto,
.clop-sidebar.colapsado .collapse {
  display: none !important;
}

.clop-chevron {
  transition: transform var(--clop-trans);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spin {
  animation: spin .7s linear infinite;
  display: inline-block;
}

[aria-expanded="true"] .clop-chevron {
  transform: rotate(180deg);
}

/* ── Área principal ────────────────────────────────────────────── */
.clop-main {
  background-color: var(--clop-fondo);
  padding: 1.5rem;
}

/* ── Cards ─────────────────────────────────────────────────────── */
.card {
  background-color: var(--clop-fondo-card);
  border-color: var(--clop-borde);
}

.card-header {
  border-bottom-color: var(--clop-borde);
}

/* ── KPI Cards (dashboard) ─────────────────────────────────────── */
.clop-kpi-card {
  text-align: center;
  padding: 1.25rem 1rem;
}

.clop-kpi-card .clop-kpi-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clop-texto-tenue);
  margin-bottom: 0.3rem;
}

.clop-kpi-card .clop-kpi-valor {
  font-family: 'Roboto Mono', monospace;
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.2;
}

.clop-kpi-card .clop-kpi-sub {
  font-size: 0.75rem;
  color: var(--clop-texto-tenue);
  margin-top: 0.2rem;
}

/* ── Tablas ─────────────────────────────────────────────────────── */
.table {
  font-size: 13px;
}

/* Elimina el override de fondo que Bootstrap dark añade en celdas */
.table > :not(caption) > * > * {
  background-color: transparent;
}

.table > tbody > tr:hover > * {
  background-color: rgba(255, 255, 255, 0.04);
}

/* Bootstrap no incluye overrides dark para variantes de tabla.
   Las celdas quedan con texto #000 sobre fondo transparente → ilegible en dark.
   Restauramos fondo y ajustamos colores para el tema oscuro. */
.table > :not(caption) > .table-primary > *,
.table > :not(caption) > .table-warning > *,
.table > :not(caption) > .table-danger > * {
  background-color: var(--bs-table-bg);
}

[data-bs-theme=dark] .table-primary {
  --bs-table-color:         #cfe2ff;
  --bs-table-bg:            rgba(13, 110, 253, 0.18);
  --bs-table-border-color:  rgba(99, 153, 248, 0.2);
  --bs-table-striped-color: #cfe2ff;
  --bs-table-active-color:  #cfe2ff;
  --bs-table-hover-color:   #fff;
  --bs-table-hover-bg:      rgba(13, 110, 253, 0.35);
}

[data-bs-theme=dark] .table > tbody > tr.table-primary:hover > * {
  background-color: rgba(13, 110, 253, 0.35) !important;
  color: #fff;
}

[data-bs-theme=dark] .table-warning {
  --bs-table-color:         #ffe69c;
  --bs-table-bg:            rgba(255, 193, 7, 0.15);
  --bs-table-border-color:  rgba(255, 193, 7, 0.2);
  --bs-table-striped-color: #ffe69c;
  --bs-table-active-color:  #ffe69c;
  --bs-table-hover-color:   #fff8d6;
  --bs-table-hover-bg:      rgba(255, 193, 7, 0.3);
}

[data-bs-theme=dark] .table > tbody > tr.table-warning:hover > * {
  background-color: rgba(255, 193, 7, 0.3) !important;
  color: #fff8d6;
}

[data-bs-theme=dark] .table-danger {
  --bs-table-color:         #f1aeb5;
  --bs-table-bg:            rgba(220, 53, 69, 0.18);
  --bs-table-border-color:  rgba(220, 53, 69, 0.25);
  --bs-table-striped-color: #f1aeb5;
  --bs-table-active-color:  #f1aeb5;
  --bs-table-hover-color:   #ffd7da;
  --bs-table-hover-bg:      rgba(220, 53, 69, 0.35);
}

[data-bs-theme=dark] .table > tbody > tr.table-danger:hover > * {
  background-color: rgba(220, 53, 69, 0.35) !important;
  color: #ffd7da;
}

/* bg-warning fija color:#000 !important — en dark mode usamos tono oscuro */
[data-bs-theme=dark] .badge.bg-warning {
  color: #1a1d20 !important;
}

/* ── Importes y códigos de cuenta ───────────────────────────────── */
.importe {
  text-align: right;
  font-family: 'Roboto Mono', monospace;
  white-space: nowrap;
}

.codigo-cuenta {
  font-family: 'Roboto Mono', monospace;
  white-space: nowrap;
}

.importe-debe,
.importe-saldo-deudor  { color: var(--clop-debe); }

.importe-haber,
.importe-saldo-acreedor { color: var(--clop-haber); }

.importe-alerta { color: var(--clop-alerta); }

/* ── Alertas flash ──────────────────────────────────────────────── */
.clop-flash {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  margin-bottom: 0;
}

/* ── Focus visible (accesibilidad teclado) ──────────────────────── */
:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

/* ── Utilidades ──────────────────────────────────────────────────── */
.text-tenue  { color: var(--clop-texto-tenue); }
.font-mono   { font-family: 'Roboto Mono', monospace; }
.text-alerta { color: var(--clop-alerta); }

/* ── Impresión ─────────────────────────────────────────────────── */
@media print {
  /* Ocultar navegación y controles */
  #clop-sidebar,
  .clop-sidebar,
  .clop-navbar,
  .btn-print,
  .card-filtros,
  .btn-outline-secondary,
  .btn-outline-primary,
  .btn-link,
  nav { display: none !important; }

  /* Layout a ancho completo */
  .clop-main {
    margin-left: 0 !important;
    padding: 0.5cm !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Colores imprimibles */
  body {
    color: #000 !important;
    background: #fff !important;
    font-size: 10pt !important;
    font-family: Arial, sans-serif !important;
  }

  .card {
    border: 1px solid #bbb !important;
    box-shadow: none !important;
    background: #fff !important;
    color: #000 !important;
    page-break-inside: avoid;
  }

  .card-header {
    background: #f0f0f0 !important;
    color: #000 !important;
    border-bottom: 1px solid #bbb !important;
  }

  /* Texto */
  a { color: inherit !important; text-decoration: none !important; }
  .text-tenue, .text-secondary { color: #555 !important; }
  .text-danger { color: #b00 !important; }
  .text-success { color: #070 !important; }
  .badge { border: 1px solid #aaa !important; background: transparent !important; color: #000 !important; }

  /* Tablas */
  .table { font-size: 9pt !important; }
  .table > :not(caption) > * > * {
    background: transparent !important;
    color: #000 !important;
  }
  .table > tbody > tr:hover > * { background: transparent !important; }

  /* Importes */
  .importe-saldo-deudor,
  .importe-debe,
  .text-danger  { color: #b00 !important; }
  .importe-saldo-acreedor,
  .importe-haber { color: #070 !important; }

  /* Balance: salto de página entre los dos bloques en modo columna */
  .col-md-6 { width: 100% !important; page-break-after: auto; }
  .bs-seccion-header { page-break-before: auto; page-break-inside: avoid; }
  .bs-total, .bs-subtotal { page-break-before: avoid; }

  /* PyG */
  .pyg-subtotal-ejercicio { page-break-before: avoid; }

  /* Comparativo */
  .cmp-total { page-break-before: avoid; }
  .cmp-titulo { page-break-before: always; }
  .cmp-titulo:first-child { page-break-before: auto; }
}