/* Tema celeste HAPPYLINK: acento azul cielo, look claro y alegre. */

/* Bootstrap usa unidades rem para tipografía y espaciados, así que bajar el
   font-size del html reduce todo el look proporcionalmente en toda la app. */
html {
  font-size: 14px;
}

:root,
[data-bs-theme="light"] {
  --bs-primary: #0284c7;
  --bs-primary-rgb: 2, 132, 199;
  --bs-primary-text-emphasis: #036592;
  --bs-primary-bg-subtle: #e0f2fe;
  --bs-primary-border-subtle: #7dd3fc;
  --bs-link-color: #0284c7;
  --bs-link-color-rgb: 2, 132, 199;
  --bs-link-hover-color: #036592;
  --bs-link-hover-color-rgb: 3, 101, 146;
  --bs-body-bg: #f0f9ff;
  --bs-body-bg-rgb: 240, 249, 255;
}

.btn-primary {
  --bs-btn-bg: #0284c7;
  --bs-btn-border-color: #0284c7;
  --bs-btn-hover-bg: #036592;
  --bs-btn-hover-border-color: #036592;
  --bs-btn-active-bg: #036592;
  --bs-btn-active-border-color: #036592;
}

/* Sidebar: claro, con acento celeste en vez del esquema oscuro por defecto */
.app-sidebar {
  --lte-sidebar-color: #075985;
  /* Hover en gris neutro, bien distinto del azul sólido del item activo,
     para que no se confundan al pasar el mouse. */
  --lte-sidebar-hover-color: #334155;
  --lte-sidebar-hover-bg: rgba(100, 116, 139, .15);
  --lte-sidebar-active-color: #ffffff;
  --lte-sidebar-menu-active-bg: #0284c7;
  --lte-sidebar-menu-active-color: #ffffff;
  --lte-sidebar-submenu-bg: transparent;
  --lte-sidebar-submenu-color: #0369a1;
  --lte-sidebar-submenu-hover-color: #334155;
  --lte-sidebar-submenu-hover-bg: rgba(100, 116, 139, .15);
  --lte-sidebar-submenu-active-color: #ffffff;
  --lte-sidebar-submenu-active-bg: #0284c7;
  background-color: #e0f2fe !important;
  border-right: 1px solid #bae6fd;
}

.sidebar-brand {
  background-color: #0284c7;
  border-bottom: 1px solid #036592;
}

.sidebar-brand .brand-text {
  color: #ffffff !important;
}

.app-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #bae6fd;
}

.app-header .nav-link {
  color: #075985;
}

.user-header.text-bg-primary {
  background-color: #0284c7 !important;
}

/* Cards con acento celeste en vez de azul Bootstrap por defecto */
.card-primary,
.card-info {
  --lte-card-variant-bg: #0284c7;
}

/* Hover más oscuro y notorio en los menús desplegables (ej: Acciones) */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #0284c7;
  color: #ffffff;
}