/* DVSystem · Finanzas — tema */
:root {
  --dv-primary: #2563eb;
  --dv-primary-soft: #e8efff;
  --dv-ink: #0f172a;
  --dv-muted: #64748b;
  --dv-bg: #f3f5f9;
  --dv-surface: #ffffff;
  --dv-border: #e5e9f0;
  --dv-green: #16a34a;
  --dv-green-soft: #e7f7ee;
  --dv-red: #dc2626;
  --dv-red-soft: #fdecec;
  --dv-amber: #d97706;
  --dv-sidebar: #0b1220;
  --dv-sidebar-ink: #a8b3c7;
  --dv-radius: 14px;
  --dv-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .05);
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-primary: var(--dv-primary);
  --bs-primary-rgb: 37, 99, 235;
  --bs-link-color: var(--dv-primary);
  --bs-link-color-rgb: 37, 99, 235;
}

body { background: var(--dv-bg); color: var(--dv-ink); font-size: .93rem; }
h1, h2, h3, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; letter-spacing: -.02em; }
.pos { color: var(--dv-green) !important; }
.neg { color: var(--dv-red) !important; }
code { color: #475569; background: #f1f5f9; padding: .1rem .4rem; border-radius: 6px; font-size: .82em; }

/* ---------- Layout con sidebar ---------- */
.dv-shell { display: flex; min-height: 100vh; }
.dv-sidebar {
  width: 248px; flex-shrink: 0; background: var(--dv-sidebar); color: var(--dv-sidebar-ink);
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1.25rem .9rem;
}
.dv-brand { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; padding: 0 .5rem 1.4rem; }
.dv-brand .logo {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, #3b82f6, #22d3ee); color: #fff; font-size: .85rem; font-weight: 800;
}
.dv-brand small { display: block; color: var(--dv-sidebar-ink); font-weight: 500; font-size: .72rem; }
.dv-nav-label { text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; color: #5b6880; padding: .9rem .75rem .35rem; }
.dv-nav a {
  display: flex; align-items: center; gap: .7rem; color: var(--dv-sidebar-ink); text-decoration: none;
  padding: .6rem .75rem; border-radius: 10px; margin-bottom: 2px; font-weight: 500; transition: background .15s, color .15s;
}
.dv-nav a i { font-size: 1.05rem; }
.dv-nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.dv-nav a.active { background: var(--dv-primary); color: #fff; box-shadow: 0 6px 16px rgba(37, 99, 235, .35); }
.dv-user { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .08); padding: 1rem .5rem 0; display: flex; align-items: center; gap: .6rem; }
.dv-user .avatar { width: 34px; height: 34px; border-radius: 50%; background: #1e293b; color: #fff; display: grid; place-items: center; font-weight: 700; text-transform: uppercase; }
.dv-user .name { color: #fff; font-weight: 600; font-size: .85rem; }
.dv-user button { background: none; border: 0; color: var(--dv-sidebar-ink); padding: 0; font-size: .78rem; }
.dv-user button:hover { color: #fff; }

.dv-main { flex: 1; min-width: 0; }
.dv-topbar { display: none; }
.dv-content { padding: 2rem 2.25rem; max-width: 1320px; }

@media (max-width: 991.98px) {
  .dv-sidebar { position: fixed; left: 0; z-index: 1040; transform: translateX(-100%); transition: transform .25s ease; }
  .dv-sidebar.open { transform: none; box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .45); }
  .dv-topbar {
    display: flex; align-items: center; gap: .75rem; background: var(--dv-sidebar); color: #fff;
    padding: .7rem 1rem; position: sticky; top: 0; z-index: 1030;
  }
  .dv-topbar button { background: none; border: 0; color: #fff; font-size: 1.5rem; line-height: 1; }
  .dv-content { padding: 1.25rem 1rem; }
}

/* ---------- Encabezados de página ---------- */
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.page-head h1 { margin: 0; font-size: 1.6rem; }
.page-head p { margin: .2rem 0 0; color: var(--dv-muted); }

/* ---------- Tarjetas ---------- */
.card { border: 1px solid var(--dv-border); border-radius: var(--dv-radius); box-shadow: var(--dv-shadow); background: var(--dv-surface); }
.card h2.h6 { font-size: .95rem; margin-bottom: .9rem; }

.kpi { position: relative; overflow: hidden; padding: 1.1rem 1.2rem !important; }
.kpi > :first-child { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kpi .valor { font-size: 1.65rem; font-weight: 800; letter-spacing: -.03em; margin-top: .15rem; }
.kpi::after {
  content: ""; position: absolute; right: -18px; top: -18px; width: 80px; height: 80px; border-radius: 50%;
  background: var(--dv-primary-soft); opacity: .7;
}
.kpi:has(.valor.neg)::after { background: var(--dv-red-soft); }
.kpi:has(.valor.pos)::after { background: var(--dv-green-soft); }
.kpi > * { position: relative; z-index: 1; }

/* ---------- Tablas ---------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--dv-muted);
  font-weight: 600; border-bottom: 1px solid var(--dv-border); padding-top: .6rem; padding-bottom: .6rem; white-space: nowrap;
}
.table > tbody td { border-color: #f0f2f6; padding-top: .65rem; padding-bottom: .65rem; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #f8fafc; }
.table a { text-decoration: none; font-weight: 500; }

/* ---------- Botones ---------- */
.btn { border-radius: 10px; font-weight: 600; }
.btn-sm { border-radius: 8px; }
.btn-primary { background: var(--dv-primary); border-color: var(--dv-primary); }
.btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.btn-success { background: var(--dv-green); border-color: var(--dv-green); }
.btn-icon { width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; }

/* ---------- Formularios ---------- */
.form-control, .form-select { border-radius: 10px; border-color: #d8dee8; padding: .55rem .8rem; }
.form-control:focus, .form-select:focus { border-color: var(--dv-primary); box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15); }
.form-label { font-weight: 600; font-size: .82rem; color: #334155; margin-bottom: .3rem; }
.form-check-input:checked { background-color: var(--dv-primary); border-color: var(--dv-primary); }

.filtros { background: var(--dv-surface); border: 1px solid var(--dv-border); border-radius: var(--dv-radius); padding: .8rem 1rem; box-shadow: var(--dv-shadow); }

.resumen-venta { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1.25rem; }
.resumen-venta > div { background: #f8fafc; border: 1px solid var(--dv-border); border-radius: 12px; padding: .7rem .9rem; }
.resumen-venta span { display: block; font-size: .72rem; text-transform: uppercase; color: var(--dv-muted); font-weight: 600; }
.resumen-venta b { font-size: 1.2rem; }

/* ---------- Badges / alerts ---------- */
.badge { font-weight: 600; border-radius: 6px; padding: .35em .6em; }
.alert { border-radius: 12px; border: 0; }

/* ---------- Login ---------- */
.dv-login { min-height: 100vh; display: grid; place-items: center; padding: 1rem;
  background: radial-gradient(1200px 600px at 10% -10%, #1e3a8a 0%, transparent 60%), radial-gradient(900px 500px at 110% 110%, #0e7490 0%, transparent 55%), var(--dv-sidebar); }
.dv-login .card { width: 100%; max-width: 400px; padding: 2rem; border: 0; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.dv-login .dv-brand { color: var(--dv-ink); padding: 0 0 1.25rem; }
.dv-login .dv-brand small { color: var(--dv-muted); }

/* ---------- Gráficos: alto fijo para que no se aplasten en celulares ---------- */
.grafico { position: relative; height: 320px; }
@media (max-width: 575.98px) { .grafico { height: 280px; } }