/* ============================================================
   Tema institucional — Sistema de Atención Psicológica UNAM
   Paleta de marca de Mi Salud También es Mental:
   azul profundo #031b71 · azul acción #274196 · teal #9ddbed
   Se carga al final de head.php. Las vistas definen su propia
   paleta genérica en variables (:root); aquí se re-mapean esas
   variables a la paleta institucional con !important para ganar
   sin importar el orden de carga.
   ============================================================ */

:root {
  --brand-profundo: #031b71;
  --brand-azul: #274196;
  --brand-azul-hover: #1e3373;
  --brand-teal: #9ddbed;
  --brand-titulo: #1f2a5e;
  --brand-fondo: #f6f7fb;

  /* Re-mapeo de la paleta genérica usada en las vistas */
  --accent-blue: var(--brand-azul) !important;
  --nav-accent: var(--brand-azul) !important;
  --accent-purple: #4d5fa5 !important;
  --page-bg: var(--brand-fondo) !important;
  --panel-bg: var(--brand-fondo) !important;
  --text-primary: #263250 !important;
}

/* ---------- Base ---------- */
body {
  background-color: var(--brand-fondo) !important;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: #334155;
  padding-bottom: 48px;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--brand-titulo);
}

a {
  color: var(--brand-azul);
}

a:hover {
  color: var(--brand-azul-hover);
}

/* ---------- Navbar unificado ---------- */
.nav-minimal {
  border-bottom: 3px solid var(--brand-teal) !important;
}

.nav-minimal .nav-link.active {
  background: rgba(39, 65, 150, 0.08) !important;
}

/* ---------- Separación uniforme navbar ↔ contenido ----------
   Las vistas con .page-wrapper/.admin-wrapper ya traen su aire; a las
   demás se les da el mismo en el PRIMER contenedor tras el navbar
   (los contenedores siguientes de la misma página no se separan). */
.nav-minimal ~ .container:not(.nav-minimal ~ .container ~ .container):not(:has(> .page-wrapper, > .admin-wrapper)),
.nav-minimal ~ .container-fluid:not(.nav-minimal ~ .container-fluid ~ .container-fluid):not(:has(> .page-wrapper, > .admin-wrapper)),
.nav-simple ~ .container:not(.nav-simple ~ .container ~ .container) {
  padding-top: 28px;
}

.page-wrapper,
.admin-wrapper {
  padding-top: 28px !important;
  padding-bottom: 48px !important;
}

/* ---------- Botones de acción (hover azul genérico → marca) ---------- */
.btn-action:hover,
.btn-view:hover,
.btn-admin:hover {
  background-color: var(--brand-azul-hover) !important;
}

.btn-action.success:hover {
  background-color: #0b8a63 !important;
}

.btn-admin.warning:hover {
  background-color: #d97706 !important;
}

/* ---------- Controles de formulario ---------- */
.admin-input:focus,
.form-control:focus,
.flatpickr-input:focus {
  border-color: var(--brand-azul) !important;
  box-shadow: 0 0 0 3px rgba(39, 65, 150, 0.12) !important;
  outline: none;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--brand-azul) !important;
}

/* ---------- DataTables sobrio ---------- */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--brand-azul) !important;
  border-color: var(--brand-azul) !important;
  color: #fff !important;
}