:root{
  /* =========================
     BRAND – PRESUBOX (AZUL)
  ========================= */
  --brand:#2563eb;        /* azul principal */
  --brand-2:#3b82f6;      /* azul claro */
  --brand-dark:#1e40af;   /* azul profundo */

  /* UI */
  --line:#eef2f7;
  --muted:#64748b;
}
body{
  background-color: ghostwhite;
}

/* =========================
   NAVBAR
========================= */
.navbar-presubox{
  background: linear-gradient(90deg, var(--brand-dark), var(--brand));
}
.navbar-presubox .navbar-brand{
  font-weight: 800;
  letter-spacing: .2px;
}

/* =========================
   BOTONES
========================= */
.btn-brand{
  background: var(--brand);
  border-color: var(--brand);
  color:#fff;
  font-weight: 700;
}
.btn-brand:hover{
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color:#fff;
}

/* =========================
   BADGES
========================= */
.badge-brand{
  background: rgba(37,99,235,.12);
  color: var(--brand-dark);
  border: 1px solid rgba(37,99,235,.25);
  font-weight: 700;
}

/* =========================
   CARDS Y TABLAS
========================= */
.card{
  border-radius: 12px;
  border: 1px solid rgba(37,99,235,.12);
  box-shadow: 0 6px 14px rgba(15,23,42,.06);
}
.card-body{
  padding: 14px;
}

.table thead th{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  border-bottom: 1px solid #e5e7eb;
}
.table tbody td{
  padding-top: 10px;
  padding-bottom: 10px;
  border-color: var(--line);
}

h3{
  font-weight: 800;
}

/* =========================
   DATATABLES
========================= */
.dataTables_wrapper .page-link{
  color: var(--brand-dark);
}
.dataTables_wrapper .page-item.active .page-link{
  background: var(--brand);
  border-color: var(--brand);
}
.navbar-brand img{
  max-height: 36px;
}

.navbar-brand span{
  font-weight: 800;
  letter-spacing: .2px;
}

/* =========================
   DASHBOARD – COMPACTO
========================= */
.container{
  max-width: 1240px;
  padding-top: 10px;
  padding-bottom: 14px;
}

/* Grid compacto */
.row.g-3{
  --bs-gutter-x: 12px;
  --bs-gutter-y: 12px;
}
.mb-4{
  margin-bottom: 14px !important;
}

/* =========================
   KPI
========================= */
.kpi-card .card-body{
  padding: 12px 14px;
}
.kpi-label{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2px;
}
.kpi-value{
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .2px;
  color: #0f172a;
}
.kpi-sub{
  font-size: 12px;
  color: var(--muted);
}

/* =========================
   PROGRESS
========================= */
.progress{
  height: 7px;
  background: rgba(37,99,235,.15);
}
.progress-bar{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

/* =========================
   SECCIONES
========================= */
.section-title{
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}
.section-sub{
  font-size: 12px;
  color: var(--muted);
}

/* =========================
   CHARTS
========================= */
.chart-card .card-body{
  padding: 12px 14px;
}
.chart-wrap{
  height: 230px;
}
.chart-wrap-sm{
  height: 180px;
}
.chart-wrap canvas,
.chart-wrap-sm canvas{
  width: 100% !important;
  height: 100% !important;
}

/* =========================
   TABLAS COMPACTAS
========================= */
.table.table-sm th{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.table.table-sm td{
  padding: 6px 8px;
}

/* =========================
   UTILIDADES VISUALES
========================= */
.text-brand{
  color: var(--brand-dark) !important;
}
.bg-brand-soft{
  background: rgba(37,99,235,.08);
}

.form-control{
  border-radius: 10px;
}
.btn{
  border-radius: 10px;
}
/* ===== DataTables: paginación compacta y bonita ===== */
.dataTables_wrapper .dataTables_paginate{
  font-size: 13px;
}

.dataTables_wrapper .dataTables_paginate .pagination{
  margin: 0 !important;
  gap: 8px;
}

/* Botones */
.dataTables_wrapper .dataTables_paginate .page-link{
  padding: .35rem .70rem !important;   /* compacto pero visible */
  font-size: 13px !important;
  line-height: 1.1 !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  color: #2563eb !important;           /* azul */
  box-shadow: none !important;
}

/* Hover */
.dataTables_wrapper .dataTables_paginate .page-link:hover{
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
}

/* Activo */
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link{
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

/* Disabled */
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link{
  background: #f8fafc !important;
  border-color: #e5e7eb !important;
  color: #94a3b8 !important;
}