/*
 * Préstamos Pro · Tema profesional v1.0 (2026-11-04)
 * Capa visual sobre style.css. No cambia JS, rutas, cálculos ni formularios.
 * Eliminar este enlace en head.ejs/login.ejs revierte la apariencia.
 */
:root {
  --ink: #172536;
  --muted: #667589;
  --line: #e3e9f0;
  --panel: #fff;
  --bg: #f4f6f9;
  --primary: #2057a5;
  --primary-2: #184787;
  --sidebar-a: #18293e;
  --sidebar-b: #18293e;
  --radius: 12px;
  --shadow: 0 4px 14px rgba(27, 44, 64, .055);
  --shadow-sm: 0 2px 10px rgba(27, 44, 64, .045);
  --sidebar-w: 258px;
}
html { scroll-behavior: auto; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  background: #f4f6f9;
  color: #354356;
}
h1,h2,h3,h4,h5,h6 { font-weight: 700; letter-spacing: -.025em; }
a { transition: color .14s ease, background-color .14s ease, border-color .14s ease; }

/* Menú lateral más pequeño, sin efectos brillantes. */
.sidebar {
  background: #192a3d;
  border-right: 1px solid #132337;
  box-shadow: none;
}
.sidebar-inner { padding: 16px 12px; }
.brand-card {
  border-radius: 9px;
  padding: 10px 9px 14px;
  gap: 11px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: #2e5d9f;
  box-shadow: none;
}
.brand-logo i { font-size: 1.16rem; }
.brand-title { max-width: 170px; font-size: .94rem; font-weight: 750; }
.brand-subtitle { font-size: .61rem; font-weight: 500; letter-spacing: .055em; color: #a9bbcf; }
.side-kpi {
  margin: 3px 3px 8px;
  padding: 9px 12px;
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.085);
}
.side-kpi small { font-size: .68rem; color: #9cb5cb; }
.side-kpi strong { font-size: .78rem; font-weight: 600; }
.side-kpi i { font-size: 1rem; color: #62bc9b; }
.nav-section {
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .095em;
  color: #94a9bf;
  padding: 15px 13px 6px;
}
.sidebar .nav { gap: 1px; }
.sidebar .nav-link {
  border-radius: 8px;
  padding: 7px 11px !important;
  gap: 10px;
  font-size: .85rem;
  font-weight: 550;
  color: #c7d3e1;
  min-height: 39px;
}
.sidebar .nav-link i {
  width: 23px;
  height: 23px;
  border-radius: 5px;
  background: none;
  font-size: .98rem;
  color: #b5c7d8;
}
.sidebar .nav-link:hover {
  background: rgba(255,255,255,.07);
  transform: none;
  color: #fff;
}
.sidebar .nav-link.active {
  background: #294b74;
  border-left: 3px solid #80b3f0;
  padding-left: 8px !important;
  box-shadow: none;
  color: #fff;
}
.sidebar .nav-link.active i { color: #fff; background: transparent; }
.sidebar .nav-link.text-warning { color: #c7d3e1 !important; }
.sidebar .nav-link.text-warning.active { color: #fff !important; }
.side-alert { background: #994248 !important; border: 0; }
.user-box { padding-top: 10px; }
.user-toggle {
  background: transparent;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  padding: 8px 10px;
}
.user-avatar { width: 30px; height: 30px; border-radius: 7px; background: #355e8b; font-weight: 650; }
.user-name { font-size: .82rem; font-weight: 650; }
.user-role { font-size: .7rem; color: #a3b7c9; }

/* Panel y barra de búsqueda. */
.app-shell { background: #f4f6f9; }
.app-shell > .row > main.main-content,
.container-fluid.app-shell > .row.flex-nowrap > main.main-content { padding-top: 18px !important; }
.main-content > .container-fluid { max-width: 1500px; }
.topbar { margin-bottom: 18px; min-height: 54px; padding: 0; backdrop-filter: none; }
.topbar-card {
  background: #fff;
  border: 1px solid #e1e7ee;
  border-radius: 11px;
  box-shadow: var(--shadow-sm);
  padding: 9px 13px;
  min-height: 58px;
}
.search-pill {
  max-width: 380px;
  padding: 7px 12px;
  border-radius: 8px;
  background: #f8fafc;
  border-color: #e5eaf0;
}
.search-pill input { font-size: .83rem; }
.topbar-actions { gap: 7px; }
.soft-chip {
  border-radius: 7px;
  background: #f4f7fb;
  color: #415976;
  font-size: .76rem;
  font-weight: 600;
  padding: 7px 10px;
  border: 1px solid #e8edf3;
}

/* Cabecera informativa, sin grandes degradados ni adornos. */
.dashboard-hero {
  background: #fff;
  color: #344456;
  border: 1px solid #e1e7ee;
  border-left: 4px solid #2b65aa;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 24px 27px;
  grid-template-columns: minmax(0,1.3fr) minmax(300px,.7fr);
  gap: 24px;
}
.dashboard-hero:before { content: none; display: none; }
.eyebrow {
  background: #eef4fc;
  border: 1px solid #dce8f7;
  color: #275893;
  border-radius: 6px;
  padding: 5px 9px;
  margin-bottom: 10px;
  font-size: .71rem;
  font-weight: 700;
}
.eyebrow i { font-size: .8rem; }
.dashboard-hero h1 {
  color: #182e46;
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  font-weight: 750;
  margin-bottom: 6px;
}
.hero-copy { font-size: .87rem; line-height: 1.55; color: #65768a; max-width: 600px; margin-bottom: 16px; }
.hero-actions { gap: 8px; }
.dashboard-hero .hero-actions .btn-light {
  color: #fff;
  background: #2057a5;
  border-color: #2057a5;
}
.dashboard-hero .hero-actions .btn-outline-light {
  color: #335c8b;
  background: #fff;
  border-color: #d0dce9;
}
.dashboard-hero .hero-actions .btn-outline-light:hover { color: #174777; background: #edf4fc; }
.hero-side {
  background: #f8fafc;
  border: 1px solid #e4eaf1;
  border-radius: 9px;
  padding: 12px 16px;
  backdrop-filter: none;
}
.hero-side-row { padding: 8px 0; border-bottom: 1px solid #e4eaf1; }
.hero-side small { color: #62738a; font-size: .77rem; }
.hero-side strong { color: #28394d; font-size: .83rem; font-weight: 700; }
.hero-side .progress { background: #e3e9f1 !important; height: 6px; }
.hero-side .progress-bar { background: #3f81c3 !important; }

/* Indicadores compactos: blancos, borde de estado y pictogramas discretos. */
.metric-card {
  min-height: 116px;
  background: #fff;
  border: 1px solid #e1e7ee;
  border-top: 3px solid var(--accent, #3467a1);
  border-radius: 11px;
  padding: 17px 16px;
  box-shadow: var(--shadow-sm);
  gap: 12px;
  align-items: flex-start;
  color: #223349;
}
.metric-card:before, .metric-card:after { content: none; display: none; }
.metric-blue { --accent: #366cba; --accent-bg: #ebf2fc; }
.metric-green { --accent: #25956d; --accent-bg: #e7f6ef; }
.metric-orange { --accent: #bd822d; --accent-bg: #fbf3e6; }
.metric-red { --accent: #bd5656; --accent-bg: #f9eded; }
.metric-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--accent-bg, #eef3f9);
  color: var(--accent, #366cba);
  font-size: 1.05rem;
}
.metric-card p {
  color: #627187;
  font-size: .66rem;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: .045em;
}
.metric-card h3 { color: #21364d; font-size: clamp(1.27rem, 1.6vw, 1.58rem); font-weight: 750; }
.metric-card small { color: #718196; font-size: .71rem; font-weight: 500; }
.mini-stat {
  padding: 14px 15px;
  background: #fff;
  border: 1px solid #e1e7ee;
  border-radius: 10px;
  box-shadow: none;
}
.mini-stat:after { content: none; display: none; }
.mini-stat .mini-label { font-size: .67rem; font-weight: 700; letter-spacing: .04em; margin-bottom: 6px; }
.mini-stat strong { font-size: 1.08rem; font-weight: 700; }
.mini-stat small { font-size: .75rem; }

/* Componentes compartidos de todas las pantallas. */
.premium-card, .card-box {
  background: #fff !important;
  border: 1px solid #e1e7ee !important;
  border-radius: 11px !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: none;
}
.card-header {
  background: #fff !important;
  padding: 13px 16px;
  font-weight: 700;
  border-bottom: 1px solid #e7ecf1;
}
.card-header h5 { font-size: .91rem; font-weight: 700; }
.card-body { color: #354356; }
.table thead th { background: #f8fafc; color: #63748a; font-size: .69rem; padding: 11px 13px; font-weight: 700; letter-spacing: .035em; }
.table tbody td { padding: 11px 13px; font-size: .81rem; border-color: #edf1f5; }
.table-hover tbody tr:hover { background: #f7f9fc; }
.btn {
  border-radius: 7px;
  padding: 8px 13px;
  font-size: .81rem;
  font-weight: 650;
  box-shadow: none;
}
.btn-sm { padding: 6px 10px; border-radius: 7px; font-size: .77rem; }
.btn-primary { background: #2057a5; border-color: #2057a5; box-shadow: none; }
.btn-primary:hover { background: #184787; border-color: #184787; transform: none; box-shadow: none; }
.btn-success { background: #188666; border-color: #188666; }
.badge { border-radius: 6px; font-weight: 650; padding: 5px 8px; }
.form-control, .form-select {
  border-radius: 8px;
  padding: 9px 12px;
  background-color: #fff;
  font-size: .86rem;
  font-weight: 450;
  border-color: #d7e0e9;
}
.form-control:focus,.form-select:focus { box-shadow: 0 0 0 3px rgba(32,87,165,.12); border-color: #5c83b4; }
.form-label { font-size: .79rem; font-weight: 650; }
.customer-avatar, .route-icon { width: 36px; height: 36px; border-radius: 8px; background: #2d629d; box-shadow: none; font-size: 1rem; }
.quick-action {
  min-height: 100px;
  background: #fff;
  border: 1px solid #e1e7ee;
  border-radius: 9px;
  padding: 14px;
  color: #2057a5;
}
.quick-action i { font-size: 1.18rem; margin-bottom: 5px; }
.quick-action span { font-weight: 700; font-size: .83rem; }
.quick-action small { font-size: .72rem; font-weight: 450; }
.quick-action:hover { transform: none; background: #f7fafd; border-color: #bcd0e7; box-shadow: none; }
.empty-state i { font-size: 2.1rem; }
.risk-item, .week-item, .timeline-item, .route-summary-item { border-radius: 9px; }
.timeline-date { border-radius: 8px; }
.receipt-banner, .payment-summary-card { border-radius: 10px; }

/* Acceso al sistema, coherente con el panel. */
body.login-premium-body {
  background: #e9eef4 !important;
}
.login-shell {
  max-width: 920px;
  background: #fff;
  border: 1px solid #dce5ed;
  border-radius: 14px;
  box-shadow: 0 15px 44px rgba(25, 42, 61, .12);
  backdrop-filter: none;
}
.login-visual { background: #192f4a; padding: 42px; }
.login-visual:after { content: none; display: none; }
.login-visual h1 { font-size: clamp(1.85rem, 3vw, 2.45rem); font-weight: 750; }
.login-visual p,.login-feature { font-size: .87rem; }
.login-visual .eyebrow { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.17); color: #e1eaf3; }
.login-card { background: #fff; padding: 42px; }
.login-card h4 { font-size: 1.3rem; }
.login-icon { width: 40px; height: 40px; border-radius: 9px; font-size: 1.2rem; background: #2d629d; }
.login-card .btn-lg { padding: 11px 15px !important; }

/* La navegación móvil mantiene sus mecanismos actuales. */
@media (max-width: 1199.98px) and (min-width: 992px) {
  :root { --sidebar-w: var(--sidebar-compact-w); }
}
@media (max-width: 991.98px) {
  .app-shell > .row > main.main-content,
  .container-fluid.app-shell > .row.flex-nowrap > main.main-content { padding: 82px 0 28px !important; }
  .dashboard-hero { grid-template-columns: 1fr; padding: 20px; }
  .mobile-menu-btn { border-radius: 9px; background: #245996; box-shadow: 0 5px 15px rgba(20,42,68,.17); font-size: 1.2rem; }
  .metric-card { min-height: 105px; }
  .metric-icon { width: 34px; height: 34px; font-size: 1rem; }
  .topbar-card { border-radius: 10px; }
  .sidebar { background: #192a3d; }
}
@media (max-width: 575.98px) {
  .dashboard-hero { padding: 18px !important; border-radius: 10px !important; }
  .dashboard-hero h1 { font-size: 1.46rem !important; }
  .premium-card, .card-box { border-radius: 10px !important; }
  .metric-card { border-radius: 10px; padding: 15px; }
  .hero-side { padding: 12px; }
  .login-card { padding: 28px 22px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}