/* =============================================================================
   caq.css — Branding CAQ sobre Metronic v8.2.3 (demo1)
   Tokens de la identidad del Cluster (mismos de templates/base.html):
   navy #131338 · rojo #BA1023 · Inter.
   También define las clases propias de la plataforma (btn-vdc, acento-dorado…)
   para que las páginas existentes rendericen igual dentro del layout Metronic.
   ============================================================================= */

:root {
  --caq-rojo: #BA1023;
  --caq-rojo-oscuro: #8f0c1a;
  --caq-navy: #131338;
  --caq-navy-claro: #1e2060;
}

body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* ── Color primario Metronic → rojo CAQ ────────────────────────────────────────
   Metronic compila sus componentes contra estas variables (tema claro),
   así que redefinirlas re-tematiza botones, menús, forms y badges de una vez. */
:root, [data-bs-theme=light] {
  --bs-primary: #BA1023;
  --bs-primary-active: #8f0c1a;
  --bs-primary-light: #fdeef0;
  --bs-primary-inverse: #ffffff;
  --bs-primary-rgb: 186, 16, 35;
  --bs-primary-clarity: rgba(186, 16, 35, 0.2);
  --bs-primary-bg-subtle: #fdeef0;
  --bs-primary-border-subtle: #f3b9c0;
  --bs-text-primary: #BA1023;
}
.progress-bar { background-color: var(--caq-rojo); }
.nav-tabs .nav-link.active { color: var(--caq-rojo); font-weight: 600; }

/* ── Sidebar navy CAQ (layout dark-sidebar) ────────────────────────────────── */
[data-kt-app-layout="dark-sidebar"] .app-sidebar {
  background-color: var(--caq-navy);
  border-right: 0;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .app-sidebar-logo {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu > .menu-item > .menu-link.active {
  background-color: var(--caq-rojo);
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu > .menu-item > .menu-link.active .menu-title,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu > .menu-item > .menu-link.active .menu-icon i {
  color: #fff;
}

/* ── Enlaces → navy CAQ (Metronic trae azul #1B84FF) ───────────────────────── */
:root, [data-bs-theme=light] {
  --bs-link-color: #1e2060;
  --bs-link-color-rgb: 30, 32, 96;
  --bs-link-hover-color: #BA1023;
  --bs-link-hover-color-rgb: 186, 16, 35;
}

/* ── Portal de empresas: header navy (antes estilos inline de base.html) ───── */
.navbar-caq { background: var(--caq-navy); }
.navbar-caq .navbar-brand, .navbar-caq .nav-link { color: #fff; }
.navbar-caq .nav-link:hover { color: #ffd7dc; }
.navbar-caq .brand-logo { height: 34px; }
/* Metronic no compila btn-outline-light de Bootstrap: definirlo para el navbar */
.navbar-caq .btn-outline-light { color: #fff; border: 1px solid rgba(255, 255, 255, .5); }
.navbar-caq .btn-outline-light:hover { background: #fff; border-color: #fff; color: var(--caq-navy); }

/* Encabezados de card simples (Metronic les da min-height 70px y alinea arriba) */
.card .card-header { align-items: center; min-height: 52px; }

/* Header fijo del panel: fondo sólido (sin él, el contenido se ve "a través"
   al hacer scroll) y línea inferior para separarlo del contenido */
.app-header {
  background-color: #ffffff;
  border-bottom: 1px solid var(--bs-gray-200);
}

/* Footer del panel: separado del contenido (que no se encime con las cards) */
.app-footer {
  margin-top: 2.5rem;
  border-top: 1px solid var(--bs-gray-200);
  background-color: transparent;
}

/* ── Clases propias de la plataforma (compatibilidad con las páginas) ──────── */
.btn-vdc {
  background: var(--caq-rojo);
  border: 1px solid var(--caq-rojo);
  color: #fff;
  font-weight: 500;
}
.btn-vdc:hover { background: var(--caq-rojo-oscuro); border-color: var(--caq-rojo-oscuro); color: #fff; }
.btn-vdc-outline { border: 1px solid var(--caq-navy); color: var(--caq-navy); }
.btn-vdc-outline:hover { background: var(--caq-navy); color: #fff; }
.acento-dorado { border-left: 4px solid var(--caq-rojo); }
.badge-abierta { background: var(--caq-rojo); color: #fff; }