:root {
  --vaslo-black: #0d0d0d;
  --vaslo-black-soft: #161616;
  --vaslo-black-card: #1b1b1b;
  --vaslo-border: #2b2b2b;
  --vaslo-gold: #d4af37;
  --vaslo-gold-light: #f1d789;
  --vaslo-gold-dark: #9c7a1f;

  --bs-primary: var(--vaslo-gold);
  --bs-primary-rgb: 212, 175, 55;
  --bs-link-color: var(--vaslo-gold-light);
  --bs-link-hover-color: var(--vaslo-gold);
  --bs-body-bg: var(--vaslo-black);
  --bs-body-color: #e8e6e1;
}

body {
  background-color: var(--vaslo-black);
  color: #e8e6e1;
}

.vaslo-gold-text { color: var(--vaslo-gold) !important; }

/* ── Navbar ─────────────────────────────────────────────────────────── */
.vaslo-navbar {
  background: linear-gradient(180deg, #141414 0%, var(--vaslo-black) 100%);
  border-bottom: 1px solid var(--vaslo-border);
  height: 60px;
}

/* ── Sidebar ────────────────────────────────────────────────────────── */
.vaslo-sidebar {
  width: 240px;
  min-height: calc(100vh - 60px);
  background-color: var(--vaslo-black-soft);
  border-right: 1px solid var(--vaslo-border);
  flex-shrink: 0;
}

.vaslo-sidebar .nav-link {
  color: #c9c6bd;
  padding: .65rem 1.25rem;
  border-left: 3px solid transparent;
  font-size: .92rem;
}

.vaslo-sidebar .nav-link i { width: 22px; display: inline-block; color: var(--vaslo-gold-dark); }

.vaslo-sidebar .nav-link:hover {
  background-color: rgba(212, 175, 55, .08);
  color: var(--vaslo-gold-light);
}

.vaslo-sidebar .nav-link.active {
  background-color: rgba(212, 175, 55, .12);
  border-left-color: var(--vaslo-gold);
  color: var(--vaslo-gold-light);
  font-weight: 600;
}

.vaslo-sidebar .nav-link.disabled {
  color: #55524a;
  cursor: default;
}

.vaslo-sidebar-divider {
  color: #666;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 1rem 1.25rem .35rem;
}

#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 1030;
}

@media (max-width: 991.98px) {
  .vaslo-sidebar {
    position: fixed;
    top: 60px;
    left: -240px;
    height: calc(100vh - 60px);
    z-index: 1040;
    transition: left .2s ease;
  }
  .vaslo-sidebar.show { left: 0; }
  #sidebar-overlay.show { display: block; }
}

/* ── Main content ───────────────────────────────────────────────────── */
#main-content {
  flex-grow: 1;
  padding: 1.5rem;
  min-width: 0;
}

/* ── Componentes ────────────────────────────────────────────────────── */
.vaslo-card {
  background-color: var(--vaslo-black-card);
  border: 1px solid var(--vaslo-border);
  border-radius: .5rem;
}

.btn-gold {
  background-color: var(--vaslo-gold);
  border-color: var(--vaslo-gold);
  color: #1a1400;
  font-weight: 600;
}
.btn-gold:hover, .btn-gold:focus {
  background-color: var(--vaslo-gold-light);
  border-color: var(--vaslo-gold-light);
  color: #1a1400;
}

.btn-outline-gold {
  border-color: var(--vaslo-gold-dark);
  color: var(--vaslo-gold-light);
}
.btn-outline-gold:hover {
  background-color: var(--vaslo-gold);
  border-color: var(--vaslo-gold);
  color: #1a1400;
}

.badge-gold {
  background-color: rgba(212, 175, 55, .16);
  color: var(--vaslo-gold-light);
  border: 1px solid var(--vaslo-gold-dark);
  font-weight: 500;
}

.table-dark {
  --bs-table-bg: var(--vaslo-black-card);
  --bs-table-border-color: var(--vaslo-border);
}

/* Los paneles Natural/Jurídico usan <fieldset> (en vez de <div>) para poder
   deshabilitarlos como bloque cuando el tipo de cliente no está activo — un
   <div> no puede excluir sus campos del envío del formulario, un <fieldset
   disabled> sí. Se resetea su estilo nativo para que no afecte el layout. */
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.form-control, .form-select {
  background-color: #141414;
  border-color: var(--vaslo-border);
  color: #e8e6e1;
}
.form-control:focus, .form-select:focus {
  background-color: #141414;
  color: #fff;
  border-color: var(--vaslo-gold);
  box-shadow: 0 0 0 .2rem rgba(212, 175, 55, .2);
}
.form-label { color: #c9c6bd; font-size: .88rem; }

.nav-tabs .nav-link { color: #c9c6bd; }
.nav-tabs .nav-link.active {
  background-color: var(--vaslo-black-card);
  border-color: var(--vaslo-border) var(--vaslo-border) var(--vaslo-black-card);
  color: var(--vaslo-gold);
}

/* ── Login ──────────────────────────────────────────────────────────── */
.auth-body {
  background: radial-gradient(circle at top, #1a1a1a 0%, var(--vaslo-black) 70%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-wrapper { width: 100%; max-width: 400px; padding: 1rem; }
.auth-card {
  background-color: var(--vaslo-black-card);
  border: 1px solid var(--vaslo-gold-dark);
  border-radius: .75rem;
  padding: 2rem;
  box-shadow: 0 0 40px rgba(212, 175, 55, .08);
}
.auth-logo { max-width: 220px; }
.auth-alert {
  position: fixed;
  top: 1rem; right: 1rem;
  z-index: 2000;
  max-width: 360px;
}

/* ── Historial de cambios ──────────────────────────────────────────── */
.historial-item {
  border-left: 2px solid var(--vaslo-gold-dark);
  padding-left: .9rem;
  margin-bottom: .9rem;
}

.doc-preview-thumb {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: .35rem;
  background: #141414;
}

/* Bootstrap no trae "orange" como color de tema por defecto; se usa para la
   categoría de mora intermedia (31-60 días) en el cronograma del préstamo. */
.text-bg-orange {
  background-color: #fd7e14 !important;
  color: #1a1400 !important;
}

/* ── DataTables (paginación server-side) ───────────────────────────── */
.dataTables_wrapper {
  padding: 1rem;
  color: #c9c6bd;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info {
  color: #c9c6bd;
  margin-bottom: .75rem;
}
.dataTables_wrapper .dataTables_filter input {
  margin-left: .5rem;
}
.dataTables_wrapper .dataTables_paginate {
  margin-top: .75rem;
}
.dataTables_wrapper .page-link {
  background-color: #141414;
  border-color: var(--vaslo-border);
  color: #c9c6bd;
}
.dataTables_wrapper .page-item.active .page-link {
  background-color: var(--vaslo-gold);
  border-color: var(--vaslo-gold);
  color: #1a1400;
}
.dataTables_wrapper .page-item.disabled .page-link {
  background-color: #141414;
  border-color: var(--vaslo-border);
}
table.dataTable thead th {
  border-bottom-color: var(--vaslo-border) !important;
}
table.dataTable > tbody > tr > td {
  border-bottom-color: var(--vaslo-border) !important;
}

/* Letra actual del cronograma de un préstamo (prestamos/show.ejs). Bootstrap 5.3
   pinta las celdas con --bs-table-bg-state, así que se respeta también al hover. */
.table > tbody > tr.fila-letra-actual > * {
  --bs-table-bg-state: rgba(212, 175, 55, 0.18);
  color: var(--vaslo-gold-light);
  font-weight: 600;
  border-top: 1px solid var(--vaslo-gold-dark);
  border-bottom: 1px solid var(--vaslo-gold-dark);
}
.table > tbody > tr.fila-letra-actual > :first-child {
  box-shadow: inset 3px 0 0 var(--vaslo-gold), inset 0 0 0 9999px var(--bs-table-bg-state);
}
#letra-actual { scroll-margin-top: 90px; }