:root {
  --brand-teal: #00A498;
  --brand-green: #41AF77;
  --brand-lime: #80BA57;
  --brand-gray: #58595B;
  --sidebar-bg: #14213a;
  --sidebar-hover: rgba(255,255,255,0.08);
  --danger: #d9534f;
  --warning: #e0a800;
  --bg-body: #f4f6f8;
}

body {
  background: var(--bg-body);
  font-family: 'Segoe UI', Roboto, -apple-system, sans-serif;
  color: #26292c;
}

.app-wrapper {
  display: flex;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: 240px;
  background: var(--sidebar-bg);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
}

.sidebar-brand {
  padding: 1.2rem 1.2rem;
  font-weight: 700;
  font-size: 1.05rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.sidebar .nav {
  flex: 1;
  padding: .75rem 0;
}

.sidebar .nav-link {
  color: rgba(255,255,255,0.85);
  padding: .65rem 1.2rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .92rem;
  border-left: 3px solid transparent;
}

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

.sidebar .nav-link.active {
  border-left-color: var(--brand-teal);
  background: var(--sidebar-hover);
  color: #fff;
}

.sidebar-footer {
  padding: 1rem 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* ---------- Content ---------- */
.content {
  margin-left: 240px;
  padding: 1.75rem 2rem;
  width: 100%;
}

/* ---------- Cards de resumen (dashboard) ---------- */
.stat-card {
  border: none;
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.stat-card .stat-label {
  font-size: .78rem;
  opacity: .85;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.stat-card .stat-value {
  font-size: 1.6rem;
  font-weight: 700;
}

.stat-card.teal   { background: linear-gradient(135deg, var(--brand-teal), #027d73); }
.stat-card.green  { background: linear-gradient(135deg, var(--brand-green), #2e8a58); }
.stat-card.lime   { background: linear-gradient(135deg, var(--brand-lime), #5f9137); }
.stat-card.gray   { background: linear-gradient(135deg, var(--brand-gray), #3d3e40); }
.stat-card.danger { background: linear-gradient(135deg, #e0645f, var(--danger)); }

/* ---------- Barra de cupo usado ---------- */
.cupo-bar {
  height: 8px;
  border-radius: 4px;
  background: #e6e6e6;
  overflow: hidden;
}
.cupo-bar-fill {
  height: 100%;
  border-radius: 4px;
}
.cupo-bar-fill.ok     { background: var(--brand-green); }
.cupo-bar-fill.medio  { background: var(--warning); }
.cupo-bar-fill.alto   { background: var(--danger); }

/* ---------- Tablas ---------- */
.table-card {
  background: #fff;
  border-radius: 10px;
  padding: 1.1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.badge-estado-pendiente  { background: var(--warning); }
.badge-estado-verificado { background: var(--brand-green); }
.badge-estado-rechazado  { background: var(--danger); }
.badge-estado-pagada     { background: var(--brand-teal); }
.badge-estado-vencida    { background: var(--danger); }

@media (max-width: 768px) {
  .sidebar { width: 200px; }
  .content { margin-left: 200px; padding: 1.2rem; }
}