/* =========================================================
   VARIABLES GLOBALES - toca aquí para cambiar el look completo
   ========================================================= */
:root {
  --color-sidebar: #12213a;
  --color-sidebar-active: #1a2f52;
  --color-primary: #2e5aac;
  --color-primary-dark: #1f4e78;
  --color-success: #2f9e44;
  --color-success-bg: #eaf7ec;
  --color-warning: #e8a33d;
  --color-warning-bg: #fdf3e2;
  --color-danger: #e05252;
  --color-danger-bg: #fdecec;
  --color-muted: #6c757d;
  --color-border: #e5e9f0;
  --color-bg: #f4f6fb;
  --radius: 10px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --font: "Segoe UI", Arial, sans-serif;
}

body {
  font-family: var(--font);
  background-color: var(--color-bg);
  color: #2b2f38;
}

/* =========================================================
   LAYOUT: SIDEBAR + CONTENIDO
   ========================================================= */
.app-sidebar {
  background-color: var(--color-sidebar);
  min-height: 100vh;
  width: 240px;
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 16px;
  z-index: 100;
}

.app-sidebar .brand {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0 20px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-sidebar .nav-link {
  color: #b6c2da;
  padding: 12px 20px;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
}

.app-sidebar .nav-link:hover {
  background-color: var(--color-sidebar-active);
  color: #fff;
}

.app-sidebar .nav-link.active {
  background-color: var(--color-sidebar-active);
  color: #fff;
  border-left-color: var(--color-primary);
}

.app-content {
  margin-left: 240px;
  padding: 24px 28px 60px;
}

.app-topbar {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  padding: 14px 28px;
  margin-left: 240px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* =========================================================
   TARJETAS KPI (los "cuadritos" con número + etiqueta)
   ========================================================= */
.card-kpi {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  height: 100%;
}

.card-kpi .kpi-label {
  color: var(--color-muted);
  font-size: 0.82rem;
  margin-bottom: 6px;
}

.card-kpi .kpi-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: #1c2536;
}

.card-kpi .kpi-delta {
  font-size: 0.78rem;
  color: var(--color-success);
}

/* Panel genérico reutilizable (gráficos, tablas, cualquier bloque) */
.panel {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
  padding: 20px;
  height: 100%;
}

.panel .panel-title {
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: 4px;
}

.panel .panel-subtitle {
  color: var(--color-muted);
  font-size: 0.8rem;
  margin-bottom: 16px;
}

/* =========================================================
   BOTONES REUTILIZABLES
   Regla del proyecto: SIEMPRE usar estas clases, nunca estilos
   inline ni clases nuevas por archivo.
   ========================================================= */
.btn-app {
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.btn-app:hover {
  filter: brightness(0.93);
}

.btn-normal {
  background-color: var(--color-primary);
  color: #fff;
}

.btn-aprobacion {
  background-color: var(--color-success);
  color: #fff;
}

.btn-eliminar {
  background-color: var(--color-danger);
  color: #fff;
}

.btn-secundario {
  background-color: #eef1f6;
  color: #444;
}

.btn-app.btn-sm {
  padding: 5px 10px;
  font-size: 0.78rem;
}

/* =========================================================
   BADGES DE ESTADO (para tablas: al día / pendiente / atrasado)
   ========================================================= */
.badge-estado {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-ok {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

.badge-pendiente {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge-atrasado {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

/* =========================================================
   TABLA / LISTADO REUTILIZABLE
   ========================================================= */
.table-app {
  width: 100%;
  border-collapse: collapse;
}

.table-app thead th {
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 12px;
}

.table-app tbody td {
  padding: 12px;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.table-app tbody tr:hover {
  background-color: #fafbfd;
}

.table-app .cell-monto {
  font-weight: 600;
}

@media (max-width: 900px) {
  .app-sidebar { display: none; }
  .app-content, .app-topbar { margin-left: 0; }
}