/**
 * Migración — marca (sobrescribe WowDash tras style.css).
 * Basado en la paleta del logo: azul marino, cielo y pastel.
 */
:root {
  --primary-50: #eaf5fc;
  --primary-100: #d4ecfa;
  --primary-200: #aee2ff;
  --primary-300: #8fd3f0;
  --primary-400: #75c9f0;
  --primary-500: #2b6bae;
  --primary-600: #00337c;
  --primary-700: #002b68;
  --primary-800: #002252;
  --primary-900: #001a40;
  --brand: var(--primary-600);
  --primary-light: rgba(0, 51, 124, 0.15);
  --primary-light-white: rgba(0, 51, 124, 0.25);
  --info-50: #eaf5fc;
  --info-100: #d4ecfa;
  --info-200: #aee2ff;
  --info-300: #75c9f0;
  --info-400: #3d7eba;
  --info-500: #00337c;
  --info-600: #002b68;
  --info-700: #002252;
  --info-800: #001a40;
  --info-900: #001433;
  --info-main: #00337c;
  --info-surface: #eaf5fc;
  --info-border: #8fd3f0;
  --info-hover: #002b68;
  --info-pressed: #001a40;
  --info-focus: rgba(0, 51, 124, 0.15);
  --shadow-5: 4px 12px 32px 0 rgba(0, 51, 124, 0.08);
  --shadow-6: 4px 16px 32px 0 rgba(0, 51, 124, 0.08);
}

/**
 * Bootstrap 5 — el tema base define --bs-primary en azul (#0d6efd).
 * Aquí lo alineamos con la marca (azul marino #00337C y escala del logo).
 */
:root,
[data-bs-theme="light"] {
  --bs-primary: #00337c;
  --bs-primary-rgb: 0, 51, 124;
  --bs-primary-text-emphasis: #001a40;
  --bs-primary-bg-subtle: #eaf5fc;
  --bs-primary-border-subtle: #8fd3f0;
  --bs-link-color: #00337c;
  --bs-link-color-rgb: 0, 51, 124;
  --bs-link-hover-color: #002252;
  --bs-link-hover-color-rgb: 0, 34, 82;
  --bs-focus-ring-color: rgba(0, 51, 124, 0.28);
}

/* Botones sólidos (.btn-primary): variables por componente (BS 5.2+) */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--primary-600);
  --bs-btn-border-color: var(--primary-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-700);
  --bs-btn-hover-border-color: var(--primary-700);
  --bs-btn-focus-shadow-rgb: 0, 51, 124;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary-800);
  --bs-btn-active-border-color: var(--primary-800);
  --bs-btn-disabled-color: #f0f6fc;
  --bs-btn-disabled-bg: #5c7a9e;
  --bs-btn-disabled-border-color: #5c7a9e;
}

/* Contorno: acciones secundarias con acento de marca */
.btn-outline-primary {
  --bs-btn-color: var(--primary-600);
  --bs-btn-border-color: var(--primary-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-600);
  --bs-btn-hover-border-color: var(--primary-600);
  --bs-btn-focus-shadow-rgb: 0, 51, 124;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary-700);
  --bs-btn-active-border-color: var(--primary-700);
  --bs-btn-disabled-color: var(--primary-300);
  --bs-btn-disabled-border-color: var(--primary-300);
}

/* Paginación, badges y barras de progreso que usan --bs-primary */
.pagination .page-item.active .page-link {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
}

.badge.text-bg-primary {
  background-color: var(--primary-600) !important;
  color: #fff !important;
}

.progress-bar.bg-primary,
.progress .progress-bar.bg-primary {
  background-color: var(--primary-600) !important;
}

/* Enlaces tipo “primary” en formularios y checks */
.form-check-input:checked {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
}

.form-switch .form-check-input:checked {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 0.2rem rgba(0, 51, 124, 0.18);
}

.list-group-item.active {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
}

.bg-gradient-start-1 {
  background: linear-gradient(to right, #eaf5fc, #feffff);
}

.bg-gradient-primary {
  background: linear-gradient(299deg, #d4ecfa 1.03%, #aee2ff 97.72%);
}

.bg-gradient-end-1 {
  background: linear-gradient(to right, #ffffff, #eaf5fc);
}

.bg-gradient-end-6 {
  background: linear-gradient(to right, #ffffff, #eaf5fc);
}

.bg-gradient-bottom-6 {
  background: linear-gradient(to bottom, #ffffff, #eaf5fc);
}

.sidebar-logo img.brand-logo-wide {
  max-width: calc(100% - 0.25rem);
  max-height: 2.625rem;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

.brand-auth-logo {
  max-height: 3rem;
  width: auto;
  max-width: min(100%, 20rem);
  object-fit: contain;
  object-position: left center;
}

/* Email submenu: address under label (sidebar) */
.instant-search-loading {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.sidebar-menu li.dropdown > a .sidebar-mail-address {
  font-size: 0.6875rem;
  line-height: 1.25;
  margin-top: 0.125rem;
  padding-inline-start: 1.75rem;
  max-width: 11.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/**
 * Modo oscuro: gris carbón (no negro puro) para fondo, tarjetas y sidebar.
 * El azul de marca se reserva para acentos, botones y enlaces.
 */
[data-theme="dark"] {
  --dark-1: #151518;
  --dark-2: #1f1f24;
  --dark-3: #2a2a31;
  --bg-color: #151518;
  --neutral-50: #1c1c22;
  --neutral-100: #24242b;
  --neutral-200: #303038;
  --neutral-300: #3f3f48;
  --primary-50: rgba(255, 255, 255, 0.06);
  --info-50: rgba(255, 255, 255, 0.05);
  --light-50: #222228;
  --light-600: #2c2c34;
  --light-800: #383840;
}

/* --- Ajustes de Hover y Tamaño Corporativos --- */

/* Unificar tipografía en toda la aplicación */
body, html, .dashboard-main, .dashboard-main-body {
  font-family: 'Inter', sans-serif !important;
}

/* Unificación de tamaño para todos los botones de la app */
.btn, .btn-sm, .btn-lg {
  padding: 0.4rem 1rem !important;
  font-size: 0.8125rem !important; /* 13px para consistencia */
  font-weight: 600 !important;
  line-height: 1.5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  border-radius: 8px !important;
  gap: 8px !important;
}

/* Botones Primary (Fondo Azul #003975) */
.btn-primary {
  background-color: #003975 !important;
  border-color: #003975 !important;
  color: #ffffff !important;
  transition: all 0.25s ease !important;
}

.btn-primary:hover {
  background-color: #99cff3 !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(153, 207, 243, 0.3) !important;
}

/* Botones Outline / Secundarios (Fondo Transparente) */
.btn-outline-primary, 
.btn-outline-secondary,
.btn-neutral-200,
.btn-light {
  background-color: transparent !important;
  border-color: #003975 !important;
  color: #003975 !important;
  transition: all 0.25s ease !important;
}

.btn-outline-primary:hover, 
.btn-outline-secondary:hover,
.btn-neutral-200:hover,
.btn-light:hover {
  background-color: #99cff3 !important;
  border-color: #003975 !important;
  color: #003975 !important;
}

/* Enlaces en el área central con el color de acento del logo (celeste) al pasar el ratón */
.dashboard-main-body a:not(.btn):hover {
  color: #003975 !important;
  text-decoration: underline !important;
}

/* --- Estilos para Iconos de Ayuda (Tooltips) --- */
.help-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background-color: var(--primary-600);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: bold;
  cursor: help;
  margin-left: 8px;
  vertical-align: middle;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.help-tooltip:hover {
  background-color: var(--primary-700);
  transform: scale(1.1);
  color: #fff;
}

/* Ajuste para que el título y el tooltip estén en la misma línea */
.with-help {
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .border-end-md {
    border-right: 1px solid var(--neutral-200) !important;
  }
}

.uppercase {
  text-transform: uppercase;
}

/* Ajuste de la dirección de email en el sidebar */
.sidebar-mail-address {
  font-size: 11px !important;
  margin-top: 2px;
  opacity: 0.8;
}

/* --- Arreglo Sidebar: Evitar doble selección --- */

/* Quitar el fondo azul de los dropdowns abiertos que NO son la página activa */
.sidebar-menu li.dropdown.dropdown-open > div > a:not(.active-page),
.sidebar-menu li.dropdown.open > div > a:not(.active-page) {
  background-color: transparent !important;
  color: var(--text-secondary-light) !important;
}

/* Mantener el color del icono y texto al pasar el ratón en dropdowns abiertos */
.sidebar-menu li.dropdown.dropdown-open > div > a:not(.active-page):hover,
.sidebar-menu li.dropdown.open > div > a:not(.active-page):hover {
  color: var(--primary-600) !important;
}

/* Asegurar que la flecha del dropdown no sea blanca si no es la página activa */
.sidebar-menu li.dropdown.dropdown-open > div > a:not(.active-page)::after,
.sidebar-menu li.dropdown.open > div > a:not(.active-page)::after {
  color: var(--text-secondary-light) !important;
}

/* Estilo para el elemento realmente activo (fondo azul) */
.sidebar-menu li > a.active-page,
.sidebar-menu li > div > a.active-page {
  background-color: var(--primary-600) !important;
  color: #fff !important;
}

/* Estilo original para los elementos del submenú activos (texto azul, sin fondo) */
.sidebar-submenu li.active-page > a {
  background-color: var(--primary-600) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  display: block !important;
}

/* Botón de sincronización en el sidebar */
.btn-sync-sidebar {
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.btn-sync-sidebar:hover {
  background-color: var(--primary-50) !important;
  color: var(--primary-600) !important;
  transform: rotate(180deg);
}

.dropdown-open .btn-sync-sidebar {
  color: var(--text-secondary-light);
}

/* --- Modo Oscuro: Complementos y Gradiantes --- */
  --text-secondary-dark: #a3a3a3;
  --border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .bg-gradient-start-1 {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
}

html[data-theme="dark"] .bg-gradient-primary {
  background: linear-gradient(
    299deg,
    rgba(255, 255, 255, 0.07) 1.03%,
    rgba(255, 255, 255, 0.03) 97.72%
  ) !important;
}

html[data-theme="dark"] .bg-gradient-end-1,
html[data-theme="dark"] .bg-gradient-end-6 {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)) !important;
}

html[data-theme="dark"] .bg-gradient-bottom-6 {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04)) !important;
}

html[data-theme="dark"] .bg-gradient-dark-start-3 {
  background: linear-gradient(262deg, rgba(255, 255, 255, 0.05) 4.01%, rgba(255, 255, 255, 0.02) 99.29%) !important;
}

html[data-theme="dark"] .bg-gradient-start-3 {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)) !important;
}

html[data-theme="dark"] .bg-gradient-bottom-3,
html[data-theme="dark"] .bg-gradient-bottom-4 {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04)) !important;
}

html[data-theme="dark"] .card {
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .sidebar-menu-area::-webkit-scrollbar-thumb {
  background-color: #45454e;
}

html[data-theme="dark"] .sidebar-menu-area:hover::-webkit-scrollbar-thumb {
  background-color: #55555f;
}

/* —— Modo oscuro: contraste (logo sidebar, botones contorno) —— */

/**
 * El ancho del logo es el mismo PNG para .light-logo y .dark-logo; en oscuro el azul #00337c
 * casi desaparece. Silueta clara = buen contraste sin sustituir el archivo.
 */
html[data-theme="dark"] .sidebar-logo .brand-logo-wide {
  filter: brightness(0) invert(1);
  opacity: 0.94;
}

/* Barra colapsada: solo icono */
html[data-theme="dark"] .sidebar-logo img.logo-icon {
  filter: brightness(0) invert(1);
  opacity: 0.94;
}

/* Contorno primario: el azul marino no se lee sobre gris oscuro */
html[data-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #b8d4f5;
  --bs-btn-border-color: #6ea0d8;
  --bs-btn-hover-color: #0a1628;
  --bs-btn-hover-bg: #b8d4f5;
  --bs-btn-hover-border-color: #9ec5ef;
  --bs-btn-focus-shadow-rgb: 142, 180, 230;
  --bs-btn-active-color: #0a1628;
  --bs-btn-active-bg: #9ec5ef;
  --bs-btn-active-border-color: #b8d4f5;
  --bs-btn-disabled-color: rgba(184, 212, 245, 0.45);
  --bs-btn-disabled-border-color: rgba(110, 160, 216, 0.35);
}

/* Secundario / Restablecer: borde y texto más visibles */
html[data-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #e4e6eb;
  --bs-btn-border-color: rgba(255, 255, 255, 0.42);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.12);
  --bs-btn-hover-border-color: rgba(255, 255, 255, 0.55);
  --bs-btn-focus-shadow-rgb: 200, 200, 210;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, 0.18);
  --bs-btn-active-border-color: rgba(255, 255, 255, 0.6);
  --bs-btn-disabled-color: rgba(228, 230, 235, 0.45);
  --bs-btn-disabled-border-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .btn-outline-danger {
  --bs-btn-color: #fca5a5;
  --bs-btn-border-color: #e87070;
  --bs-btn-hover-color: #1a0a0a;
  --bs-btn-hover-bg: #fca5a5;
  --bs-btn-hover-border-color: #f87171;
  --bs-btn-active-color: #1a0a0a;
  --bs-btn-active-bg: #f87171;
  --bs-btn-active-border-color: #fca5a5;
}

html[data-theme="dark"] .btn-outline-warning {
  --bs-btn-color: #fcd34d;
  --bs-btn-border-color: #d4a017;
  --bs-btn-hover-color: #1a1404;
  --bs-btn-hover-bg: #fcd34d;
  --bs-btn-hover-border-color: #fbbf24;
}

html[data-theme="dark"] .btn-outline-success {
  --bs-btn-color: #86efac;
  --bs-btn-border-color: #4ade80;
  --bs-btn-hover-color: #052e14;
  --bs-btn-hover-bg: #86efac;
  --bs-btn-hover-border-color: #4ade80;
}

html[data-theme="dark"] .btn-outline-info {
  --bs-btn-color: #a5e8f5;
  --bs-btn-border-color: #5ec8dc;
  --bs-btn-hover-color: #041a1f;
  --bs-btn-hover-bg: #a5e8f5;
  --bs-btn-hover-border-color: #7dd3e8;
}

/* —— FullCalendar 6 (staff): colores de marca + toolbar alineado —— */
.staff-calendar-fc {
  min-height: 640px;
  /* Sustituye el gris azulado por defecto (#2C3E50) */
  --fc-button-text-color: #fff;
  --fc-button-bg-color: #00337c;
  --fc-button-border-color: #00337c;
  --fc-button-hover-bg-color: #002b68;
  --fc-button-hover-border-color: #002b68;
  --fc-button-active-bg-color: #002252;
  --fc-button-active-border-color: #002252;
  --fc-today-bg-color: rgba(0, 51, 124, 0.12);
  --fc-event-bg-color: #2b6bae;
  --fc-event-border-color: #2b6bae;
  --fc-event-text-color: #fff;
  --fc-highlight-color: rgba(174, 226, 255, 0.35);
  --fc-page-bg-color: transparent;
  --fc-list-event-hover-bg-color: #f0f6fc;
}

html[data-theme="dark"] .staff-calendar-fc {
  --fc-border-color: rgba(255, 255, 255, 0.14);
  --fc-neutral-bg-color: rgba(255, 255, 255, 0.07);
  --fc-neutral-text-color: #b4b6c0;
  --fc-page-bg-color: transparent;
  --fc-button-text-color: #fff;
  --fc-button-bg-color: #00337c;
  --fc-button-border-color: #2b6bae;
  --fc-button-hover-bg-color: #2b6bae;
  --fc-button-hover-border-color: #75c9f0;
  --fc-button-active-bg-color: #002252;
  --fc-button-active-border-color: #00337c;
  --fc-today-bg-color: rgba(117, 201, 240, 0.18);
  --fc-list-event-hover-bg-color: rgba(255, 255, 255, 0.07);
  --fc-highlight-color: rgba(117, 201, 240, 0.22);
  --fc-now-indicator-color: #f87171;
}

.staff-calendar-fc .fc-toolbar.fc-header-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-bottom: 1.5rem !important;
}

.staff-calendar-fc .fc-toolbar-title {
  font-size: var(--font-xl) !important;
  font-weight: 700 !important;
  color: #00337c !important;
  text-transform: capitalize !important;
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
}

/* Forzar la tipografía global en todo el calendario, evitando romper los iconos de FullCalendar */
.staff-calendar-fc,
.staff-calendar-fc .fc,
.staff-calendar-fc .fc-toolbar-title,
.staff-calendar-fc .fc-button {
  font-family: 'Inter', sans-serif !important;
}

/* Los iconos deben mantener su propia fuente (FullCalendar usa una fuente interna o SVGs) */
.staff-calendar-fc .fc-icon {
  font-family: 'fcicons' !important;
}

.staff-calendar-fc .fc-toolbar-chunk {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.staff-calendar-fc .fc-button-group {
  display: inline-flex !important;
  vertical-align: middle !important;
}

/* Centrado horizontal de iconos y texto dentro de los botones */
.staff-calendar-fc .fc-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0.4rem 1rem !important;
  min-height: 32px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  border-radius: 8px !important;
}

.staff-calendar-fc .fc-button .fc-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1em !important;
  height: 1em !important;
  font-size: 1.1em !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.staff-calendar-fc .fc-prev-button,
.staff-calendar-fc .fc-next-button {
  width: 32px !important;
  padding: 0 !important;
}

.staff-calendar-fc .fc-button-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 51, 124, 0.35);
}

html[data-theme="dark"] .staff-calendar-fc .fc-button-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(117, 201, 240, 0.32);
}