/* =====================================================================
   AMV — Tema "Reporte Editorial"
   Claro, cálido (papel hueso + tinta), tipografía serif con carácter.
   Escena: el dueño revisa ventas y cobranza de día, en su oficina.
   Estrategia de color: Restrained (neutros tintados + verde de marca puntual).
   ===================================================================== */

:root {
  /* Paleta de marca AMV: navy de fondo + acento azul; verde = positivo */
  --paper:    oklch(18% 0.035 258);     /* navy AMV profundo (fondo) */
  --paper-2:  oklch(22% 0.038 258);
  --surface:  oklch(23.5% 0.04 258);    /* cards, navy elevado */
  --surface-2: oklch(27.5% 0.042 258);  /* chips / superficies internas */
  --line:     oklch(31% 0.035 258);     /* borde sutil */
  --line-2:   oklch(37% 0.036 258);
  --ink:      oklch(96% 0.008 255);      /* texto casi blanco */
  --ink-soft: oklch(71% 0.025 255);      /* muted */
  --accent:   oklch(64% 0.16 250);       /* azul AMV (acción/highlight) */
  --accent-deep: oklch(56% 0.16 250);
  --on-accent: oklch(99% 0.005 250);     /* texto sobre azul (blanco) */
  --good:     oklch(74% 0.17 148);       /* verde AMV = positivo/sube */
  --warn:     oklch(82% 0.14 80);
  --orange:   oklch(75% 0.16 50);
  --bad:      oklch(68% 0.19 22);
  --info:     oklch(72% 0.12 240);
  --fserif: 'Archivo', system-ui, sans-serif;   /* display + cifras (grotesca) */
  --fbody: 'Hanken Grotesk', system-ui, sans-serif;
}

/* ---- Base ---- */
body, #app-layout, .content-page, .content {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--fbody);
  -webkit-font-smoothing: antialiased;
}
.content { font-size: .95rem; }
/* más aire arriba (separa del topbar) y a los lados, y mayor ritmo vertical */
.content-page > .content > .container-fluid { padding: 1.5rem 1.9rem 1.5rem; }
.content-page .row.g-3 { --bs-gutter-x: 1.75rem; --bs-gutter-y: 1.75rem; }
.content-page .row.mb-3 { margin-bottom: 1.75rem !important; }
.content-page .card.mb-3 { margin-bottom: 1.75rem !important; }

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5 {
  font-family: var(--fserif); color: var(--ink); font-weight: 600; letter-spacing: -.01em;
}
.card-title { font-family: var(--fserif); }
.text-muted, small.text-muted { color: var(--ink-soft) !important; }
a { color: var(--accent-deep); text-decoration: none; }
a:hover { color: var(--accent); }
hr { border-color: var(--line); opacity: 1; }

.num, .kpi-value, .hero-num, .hero-delta, td.text-end, .table .text-end {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}

/* ---- Sidebar ---- */
/* navy EXACTO del logo (#001c31) para que la imagen se funda sin recuadro */
.leftside-menu, .app-sidebar-menu, #sidebar-menu, .sidenav-menu {
  background: #001c31 !important;
  border-right: 1px solid oklch(28% 0.045 258);
}
.app-sidebar-menu .logo-box {
  background: #001c31;
  padding: .35rem 1.25rem .8rem;
  margin-bottom: .35rem;
  display: flex;
  align-items: center;
  min-height: auto;
}
.app-sidebar-menu .logo-box .logo { display: inline-flex; align-items: center; }
#side-menu .menu-title { color: oklch(60% 0.03 255) !important; letter-spacing: .12em; font-size: .64rem; text-transform: uppercase; font-weight: 700; }
#side-menu > li > a { color: oklch(82% 0.02 150) !important; font-weight: 500; border-radius: 8px; }
#side-menu > li > a:hover { color: #fff !important; background: oklch(28% 0.04 258); }
#side-menu .nav-second-level a { color: oklch(70% 0.02 150) !important; }
#side-menu .nav-second-level a:hover { color: #fff !important; }
#side-menu li.active > a, #side-menu .menuitem-active > a { color: var(--accent) !important; }

/* ---- Topbar ---- */
.topbar-custom, .navbar-custom { background: var(--surface) !important; border-bottom: 1px solid var(--line); }
.topbar-custom .nav-link, .topnav-menu .nav-link, .noti-icon { color: var(--ink-soft) !important; }
.topbar-custom .pro-user-name { color: var(--ink) !important; }

/* ---- Cards ---- */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  color: var(--ink);
}
.card-header { background: transparent !important; border-bottom: 1px solid var(--line) !important; color: var(--ink); padding: 1.25rem 1.6rem; }
.card-body { color: var(--ink); padding: 1.6rem; }
.card .card-body .card { box-shadow: none; }  /* nada de nested cards pesadas */

/* ---- Tablas ---- */
.table { color: var(--ink); }
.table > :not(caption) > * > * { background: transparent; color: var(--ink); border-color: var(--line); padding: .7rem .9rem; }
.table thead th, .table-light, .table-light th, thead.table-light tr {
  background: transparent !important; color: var(--ink-soft) !important;
  text-transform: uppercase; font-size: .66rem; letter-spacing: .08em; font-weight: 700;
  border-bottom: 1.5px solid var(--line-2) !important;
}
.table-hover > tbody > tr:hover > * { background: var(--paper-2) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: transparent; }
.table tfoot td, .table tfoot th { border-top: 1.5px solid var(--line-2); color: var(--ink); font-weight: 700; }

/* ---- Formularios ---- */
.form-control, .form-select {
  background: var(--surface) !important; color: var(--ink) !important;
  border: 1px solid var(--line-2) !important; border-radius: 8px;
}
.form-control::placeholder { color: oklch(65% 0.02 150); }
.form-control:focus, .form-select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px oklch(64% 0.16 250 / .22) !important; }
.form-label { color: var(--ink-soft); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* ---- Botones (lima, texto oscuro, pill) ---- */
.btn { border-radius: 11px; font-weight: 600; }
.btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; }
.btn-primary:hover { background: var(--accent-deep) !important; }
.btn-outline-secondary, .btn-secondary { color: var(--ink); border-color: var(--line-2); background: var(--surface-2); }
.btn-success { background: var(--good)!important; border-color: var(--good)!important; color: var(--on-accent)!important; }

/* ---- Badges / pills de estado ---- */
.badge { font-weight: 700; letter-spacing: .01em; border-radius: 999px; padding: .42em .8em; }
.badge.bg-success { background: oklch(74% 0.17 148 / .16) !important; color: var(--good) !important; }
.badge.bg-primary { background: oklch(64% 0.16 250 / .18) !important; color: var(--accent) !important; }
.badge.bg-danger  { background: oklch(68% 0.19 22 / .16) !important; color: var(--bad) !important; }
.badge.bg-warning { background: oklch(82% 0.14 80 / .16) !important; color: var(--warn) !important; }
.badge.bg-info    { background: oklch(75% 0.12 235 / .16) !important; color: var(--info) !important; }
.badge.bg-secondary { background: var(--surface-2)!important; color: var(--ink-soft)!important; }

/* ---- Modales (tema oscuro AMV) ---- */
.modal-content { background: var(--surface) !important; border: 1px solid var(--line) !important;
  color: var(--ink); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.modal-header { border-bottom: 1px solid var(--line) !important; }
.modal-footer { border-top: 1px solid var(--line) !important; }
.modal-title { color: var(--ink); font-family: var(--fserif); font-weight: 700; }
.modal-body, .modal-body p, .modal-body label { color: var(--ink); }
.modal .btn-close { filter: invert(0.85) grayscale(1); opacity: .8; }
.modal .btn-close:hover { opacity: 1; }
.modal .text-muted, .modal small.text-muted { color: var(--ink-soft) !important; }
.modal-header { padding: 1.2rem 1.5rem; }
.modal-body { padding: 1.5rem; }
.modal-footer { padding: 1rem 1.5rem; gap: .5rem; }
/* labels más cálidas (sentence-case) dentro de modales */
.modal .form-label { text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .4rem; }
.modal .form-control, .modal .form-select, .modal textarea.form-control { border-radius: 10px; padding: .58rem .8rem; }

/* Input "héroe": el nombre/título principal de un formulario */
.field-hero input { background: transparent !important; border: 0 !important; border-bottom: 2px solid var(--line-2) !important;
  border-radius: 0 !important; padding: .35rem 0 !important; font-family: var(--fserif); font-size: 1.55rem; font-weight: 800;
  color: var(--ink) !important; width: 100%; }
.field-hero input:focus { box-shadow: none !important; border-bottom-color: var(--accent) !important; }
.field-hero input::placeholder { color: var(--ink-soft); font-weight: 600; }

/* Pills segmentadas (prioridad / etapa / estado) */
.seg-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.seg-pill { cursor: pointer; padding: .42rem .9rem; border-radius: 999px; font-weight: 700; font-size: .82rem;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft); transition: all .15s ease; user-select: none; }
.seg-pill:hover { border-color: var(--line-2); color: var(--ink); }
.seg-pill.active { color: #0b1220; border-color: transparent; }

/* Dots de color preset */
.color-dots { display: flex; gap: .55rem; align-items: center; }
.color-dot { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--line); transition: transform .12s ease; }
.color-dot:hover { transform: scale(1.14); }
.color-dot.active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }

/* Subtítulo de sección dentro de un modal */
.form-section-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
  color: var(--ink-soft); margin: .2rem 0 .9rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* chip de acción (botón ícono redondeado) */
.chip { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:50%; background: var(--surface-2); border:1px solid var(--line); color: var(--ink-soft);
  transition: all .15s ease; }
.chip:hover { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

.sem-good { color: var(--good) !important; }
.sem-warn { color: var(--warn) !important; }
.sem-orange { color: var(--orange) !important; }
.sem-bad  { color: var(--bad)  !important; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:7px; vertical-align:middle; }
.dot.good{background:var(--good);} .dot.warn{background:var(--warn);} .dot.bad{background:var(--bad);}

/* ---- Cifras héroe: tipográficas, serif ---- */
.hero-num { font-family: var(--fserif); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: .95; letter-spacing: -.03em; color: var(--ink); }
.hero-num-sec { font-family: var(--fserif); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.kicker { color: var(--ink-soft); text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-weight: 700; }
.hero-label { color: var(--ink-soft); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 700; }
.hero-delta { font-weight: 700; font-size: .95rem; }

/* tarjeta KPI (/kpis) */
.kpi-card { background: var(--surface)!important; border:1px solid var(--line)!important; border-radius:10px; box-shadow:none; }
.kpi-card:hover { border-color: var(--line-2)!important; transform:none; box-shadow: 0 2px 8px oklch(50% 0.03 150/.06)!important; }
.kpi-value { color: var(--ink) !important; font-family: var(--fserif); }
.kpi-label { color: var(--ink-soft)!important; }
.tab-content-kpis { background: var(--surface)!important; border:1px solid var(--line); border-radius:10px; color: var(--ink); }
.nav-pills .nav-link, .nav-pills-kpis .nav-link { color: var(--ink-soft) !important; background: transparent; border-radius:8px; }
.nav-pills .nav-link.active, .nav-pills-kpis .nav-link.active { background: oklch(64% 0.16 250 / .18)!important; color: var(--accent)!important; }

/* línea de acento bajo el título principal */
.content h1.h3 { position: relative; padding-bottom: .4rem; font-weight: 600; }
.content h1.h3::after { content:""; position:absolute; left:0; bottom:0; width:38px; height:2px; background: var(--accent); }

/* ---- Cobranza: antigüedad ---- */
.aging-bar { display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--paper-2); border:1px solid var(--line); }
.aging-seg { height:100%; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.aging-seg + .aging-seg { border-left: 2px solid var(--surface); }
.sem-bg-good{background:var(--good);} .sem-bg-warn{background:var(--warn);}
.sem-bg-orange{background:var(--orange);} .sem-bg-bad{background:var(--bad);}

/* ---- Footer ---- */
.footer, .footer .container-fluid { background: transparent !important; color: var(--ink-soft); border-top:1px solid var(--line); }

/* ---- Motion ---- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity:0; transform: translateY(10px);
    animation: reveal .55s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--d,0)*80ms); }
  @keyframes reveal { to { opacity:1; transform:none; } }
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius:8px; border:3px solid var(--paper); }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Atmósfera (modo oscuro) ---- */
body { background-image: radial-gradient(1100px 620px at 82% -12%, oklch(30% 0.06 250) 0%, var(--paper) 58%) !important; }
body::before {
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-num { text-shadow: 0 0 50px oklch(64% 0.16 250 / .16); }

/* =====================================================================
   Reportes — registro "ledger" (documento sobrio, tabular, autoritario)
   ===================================================================== */
/* Chrome de DataTables al tema oscuro (length / filter / info / paginación) */
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { color: var(--ink-soft) !important; font-size: .82rem; }
.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input {
  background: var(--surface) !important; color: var(--ink) !important;
  border: 1px solid var(--line-2) !important; border-radius: 8px; padding: .34rem .6rem; }
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px oklch(64% 0.16 250 / .22); outline: none; }
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .pagination .page-link {
  background: var(--surface) !important; color: var(--ink-soft) !important;
  border-color: var(--line) !important; border-radius: 8px !important; margin: 0 2px; }
.dataTables_wrapper .pagination .page-item.active .page-link {
  background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; }
.dataTables_wrapper .pagination .page-link:hover { color: var(--ink) !important; background: var(--surface-2) !important; }
.dataTables_wrapper .pagination .page-item.disabled .page-link { color: var(--ink-soft) !important; opacity: .5; }

/* Numerales tabulares en toda columna de datos (evita "baile" de cifras) */
table.dataTable tbody td, table.dataTable thead th, .table td.text-end, .table th.text-end,
.table .num, .report-table td, .report-table th { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* Total/footer de reporte con peso */
.table tfoot td, .table tfoot th, table.dataTable tfoot td { font-weight: 800; color: var(--ink); border-top: 1.5px solid var(--line-2); }

/* Barra de proporción DISCRETA para reportes-ranking (sin glow, registro ledger) */
.led-bar { height: 6px; border-radius: 4px; background: var(--paper-2); overflow: hidden; min-width: 60px; }
.led-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--accent-deep);
  transition: width .8s cubic-bezier(.2,.8,.2,1); }

/* conclusión de insight (frase generada bajo cada gráfico) */
.insight-take { margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--line);
  color:var(--ink-soft); font-size:.9rem; line-height:1.5; }
.insight-take b { color: var(--ink); font-weight:700; }
/* KPIs de cabecera: cifras que no se parten en tarjeta angosta */
#kpisGenerales .stat-num { font-size: clamp(1.35rem, 1.9vw, 1.85rem); white-space: nowrap; }
.insight-take .hi { color: var(--accent); font-weight:700; }
.insight-take .risk { color: var(--bad); font-weight:700; }

/* ============================================================
   Componentes ricos del Home (tarjetas con chrome, listas, viz)
   ============================================================ */

/* chrome de tarjeta: chip de ícono + acción */
.card-chrome { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; }
.chrome-left { display:flex; align-items:center; gap:.7rem; }
.icon-chip { width:38px; height:38px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  background: oklch(64% 0.16 250 / .14); color: var(--accent); flex:0 0 auto; }
.icon-chip.is-good { background: oklch(74% 0.17 148 / .14); color: var(--good); }
.icon-chip.is-warn { background: oklch(82% 0.14 80 / .14); color: var(--warn); }
.icon-chip.is-bad  { background: oklch(68% 0.19 22 / .14); color: var(--bad); }
.icon-chip i { width:19px; height:19px; }
.chrome-title { font-family: var(--fbody); text-transform:uppercase; letter-spacing:.09em; font-size:.68rem; font-weight:700; color: var(--ink-soft); }
.card-action { width:32px; height:32px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  background: var(--surface-2); border:1px solid var(--line); color: var(--ink-soft); transition: all .15s ease; }
.card-action:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.card-action i { width:16px; height:16px; }

/* cifra de tarjeta y delta */
.stat-num { font-family: var(--fserif); font-weight:800; font-variant-numeric:tabular-nums;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height:1; letter-spacing:-.02em; color: var(--ink); }
.stat-sub { color: var(--ink-soft); font-size:.82rem; margin-top:.55rem; }
.delta-pill { display:inline-flex; align-items:center; gap:.25rem; font-weight:700; font-size:.82rem;
  padding:.22em .6em; border-radius:999px; }
.delta-pill.up { background: oklch(74% 0.17 148 / .15); color: var(--good); }
.delta-pill.down { background: oklch(68% 0.19 22 / .15); color: var(--bad); }
.delta-pill i { width:14px; height:14px; }

/* barra de progreso de marca (hero: mes vs promedio) */
.progress-amv { height:9px; border-radius:999px; background: var(--paper-2); overflow:hidden; border:1px solid var(--line); }
.progress-amv > span { display:block; height:100%; border-radius:999px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent)); transition: width 1s cubic-bezier(.2,.8,.2,1); }

/* listas con ranking + barra de proporción (dinámicas) */
.rank-list { display:flex; flex-direction:column; gap:.1rem; }
.rank-row { display:grid; grid-template-columns: 32px 1fr auto; align-items:center; gap:.95rem;
  padding:.7rem .55rem; border-radius:12px; transition: background .18s ease, transform .18s ease; }
.rank-row:hover { background: var(--surface-2); transform: translateX(3px); }
.rank-num { width:30px; height:30px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.82rem; background: var(--surface-2); color: var(--ink-soft);
  font-variant-numeric:tabular-nums; border:1px solid var(--line); transition: all .2s ease; }
.rank-row:nth-child(1) .rank-num { background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--on-accent); border-color: transparent; box-shadow: 0 6px 16px oklch(64% 0.16 250 / .42); }
.rank-name { font-weight:600; font-size:.92rem; color: var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-meta { display:flex; align-items:center; gap:.6rem; margin-top:.45rem; }
.rank-bar { height:8px; border-radius:999px; background: var(--paper-2); overflow:hidden; flex:1; min-width:40px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
.rank-bar > span { display:block; height:100%; width:0; border-radius:999px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  box-shadow: 0 0 10px oklch(64% 0.16 250 / .55); transition: width 1.05s cubic-bezier(.2,.85,.25,1); }
.rank-bar.alt > span { background: linear-gradient(90deg, var(--good), oklch(82% 0.16 150));
  box-shadow: 0 0 10px oklch(74% 0.17 148 / .55); }
.rank-val { text-align:right; }
.rank-val .v { font-family: var(--fserif); font-weight:800; font-size:1rem; color: var(--ink); font-variant-numeric:tabular-nums; }
.rank-val .p { font-size:.72rem; color: var(--ink-soft); font-weight:700; }

/* sparkline / ring contenedores */
.spark { width:140px; height:46px; }
.ring-wrap { position:relative; width:128px; height:128px; flex:0 0 auto; }
.ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-center .rc-num { font-family: var(--fserif); font-weight:800; font-size:1.5rem; line-height:1; color: var(--ink); }
.ring-center .rc-lbl { font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-soft); margin-top:.2rem; }

/* leyenda de la concentración */
.legend-row { display:flex; align-items:center; gap:.55rem; font-size:.82rem; padding:.3rem 0; }
.legend-row .ld { width:9px; height:9px; border-radius:3px; flex:0 0 auto; }
.legend-row .ln { color: var(--ink); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.legend-row .lp { color: var(--ink-soft); font-variant-numeric:tabular-nums; font-weight:700; }