/* Scroll horizontal más ancho solo para contenedor Bootstrap */
.table-responsive::-webkit-scrollbar {
    height: 16px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 8px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--bs-primary);
    border-radius: 8px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--bs-primary);
}

#datatable {
    overflow-x: scroll !important; 
    scrollbar-width: auto;
    scrollbar-color: var(--bs-primary) #f1f1f1;
}

.loader.simple-loader.dark {
   background-color: var(--bs-gray-dark);
}

.loader.simple-loader.light {
   background-color: #f1f1f1;
}

/* ===== Layout responsive (migración React) =====
   En móvil/tablet (<=1199px) el sidebar se oculta y se abre como overlay
   con backdrop, en vez de tapar permanentemente el contenido. */
@media (max-width: 1199.98px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1045;
  }
  .sidebar.sidebar-open {
    transform: translateX(0);
  }
  .sidebar-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1040;
  }
}
@media (min-width: 1200px) {
  .sidebar-overlay-backdrop {
    display: none !important;
  }
}

/* PDF: no partir un gráfico entre páginas */
.pdf-chart-block {
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Opciones del select con buscador (estilo Select2 del legacy) */
.search-select-option:hover:not(.bg-primary) {
  background-color: #5897fb;
  color: #fff;
}
.search-select-option:hover:not(.bg-primary) i,
.search-select-option:hover:not(.bg-primary) b {
  color: #fff;
}

/* ===== Modo oscuro: huecos que el dark.min.css de Hope UI NO cubre =====
   Paleta de Hope UI dark: fondo #222738, borde #30384f, texto #8a92a6. */

/* Modales: Bootstrap usa .modal-content con --bs-body-bg (blanco) y no hay
   override en dark → el modal quedaba blanco con inputs oscuros. */
.dark .modal-content {
  background-color: #222738;
  border-color: #30384f;
  color: #8a92a6;
}
.dark .modal-header,
.dark .modal-footer {
  border-color: #30384f;
}
.dark .modal-title,
.dark .modal-content label,
.dark .modal-content .form-label {
  color: #eef0f4;
}
/* Botón de cerrar (X): el SVG es oscuro y en dark se pierde. */
.dark .btn-close {
  filter: invert(1) grayscale(100%) brightness(180%);
}

/* Dropdown del SearchSelect (usa .bg-body, que en dark seguía claro). */
.dark .search-select-dropdown {
  background-color: #222738 !important;
  border-color: #30384f !important;
}
.dark .search-select-dropdown .search-select-option {
  color: #c5cbd6;
}
.dark .search-select-dropdown .search-select-option i {
  color: #8a92a6;
}

/* Cajas .bg-light (skeletons de charts, loaders, inputs deshabilitados). */
.dark .bg-light {
  background-color: #2a3048 !important;
  color: #8a92a6;
}

/* Acordeón de teléfonos (Clientes) en dark. */
.dark .accordion-button,
.dark .accordion-body {
  background-color: #222738;
  color: #c5cbd6;
}
.dark .accordion-button:not(.collapsed) {
  background-color: #2a3048;
}

/* ============================================================
   UX/UI 2026 — capa de diseño moderna sobre Hope UI.
   Radios suaves, sombras en capas, foco claro y microinteracciones.
   Carga al final (personal.css) para poder afinar sin tocar el tema.
   ============================================================ */
:root {
  --cuida-radius-lg: 18px;
  --cuida-radius-md: 12px;
  --cuida-radius-sm: 10px;
  --cuida-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05);
  --cuida-shadow-md: 0 6px 16px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.04);
  --cuida-shadow-lg: 0 18px 44px rgba(16, 24, 40, 0.14), 0 6px 12px rgba(16, 24, 40, 0.06);
  --cuida-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.006em;
}

/* --- Tarjetas: radio amplio, borde sutil y elevación en capas --- */
.card {
  border-radius: var(--cuida-radius-lg) !important;
  border: 1px solid rgba(16, 24, 40, 0.06);
  box-shadow: var(--cuida-shadow-sm);
  transition: box-shadow 0.25s var(--cuida-ease), transform 0.25s var(--cuida-ease);
}
.card .card {
  box-shadow: none;
}
.dark .card {
  border-color: rgba(255, 255, 255, 0.06);
}

/* --- Inputs y selects: más aire, radio y foco con glow de marca --- */
.form-control,
.form-select {
  border-radius: var(--cuida-radius-sm) !important;
  padding-top: 0.58rem;
  padding-bottom: 0.58rem;
  transition: border-color 0.18s var(--cuida-ease), box-shadow 0.18s var(--cuida-ease),
    background-color 0.18s var(--cuida-ease);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 4px rgba(58, 87, 232, 0.14);
}
.dark .form-control:focus,
.dark .form-select:focus {
  box-shadow: 0 0 0 4px rgba(88, 151, 251, 0.2);
}
.form-label {
  font-weight: 600;
  font-size: 0.82rem;
  margin-bottom: 0.4rem;
}

/* --- Botones: radio, peso, microinteracción de elevación --- */
.btn {
  border-radius: var(--cuida-radius-sm) !important;
  font-weight: 600;
  transition: transform 0.16s var(--cuida-ease), box-shadow 0.2s var(--cuida-ease),
    filter 0.2s var(--cuida-ease);
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}
.btn-primary {
  box-shadow: 0 6px 16px rgba(58, 87, 232, 0.26);
}
.btn-primary:hover {
  box-shadow: 0 10px 22px rgba(58, 87, 232, 0.34);
}
/* No “levantar” los botones pequeños de las tablas (se ve tembloroso). */
.table .btn-sm:hover {
  transform: none;
}

/* --- Modales: radio grande, sin borde duro, sombra profunda + blur --- */
.modal-content {
  border-radius: var(--cuida-radius-lg) !important;
  border: none;
  box-shadow: var(--cuida-shadow-lg);
}
.modal-header,
.modal-footer {
  border-color: rgba(16, 24, 40, 0.08);
}
.dark .modal-header,
.dark .modal-footer {
  border-color: rgba(255, 255, 255, 0.08);
}
.modal-backdrop.show {
  opacity: 0.45;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* --- Tablas: encabezado tipo “data”, filas con hover suave, más aire --- */
.table > :not(caption) > * > * {
  padding: 0.85rem 1rem;
}
.table thead th {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #8a92a6;
}
tbody tr {
  transition: background-color 0.15s var(--cuida-ease);
}
tbody tr:hover {
  background-color: rgba(58, 87, 232, 0.045);
}
.dark tbody tr:hover {
  background-color: rgba(88, 151, 251, 0.08);
}

/* --- Badges/chips redondeados --- */
.badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* --- SearchSelect al estilo 2026 (caja + dropdown + opciones) --- */
.search-select-dropdown {
  border-radius: var(--cuida-radius-md) !important;
  box-shadow: var(--cuida-shadow-lg);
  border: 1px solid rgba(16, 24, 40, 0.08) !important;
  padding-bottom: 4px;
}
.search-select-option {
  border-radius: 8px;
  margin: 2px 6px;
  padding: 0.5rem 0.7rem !important;
  transition: background-color 0.12s var(--cuida-ease);
}

/* --- Scrollbars finas y modernas --- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(58, 87, 232, 0.35) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: rgba(58, 87, 232, 0.32);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(58, 87, 232, 0.5);
  background-clip: padding-box;
}

/* --- Banner de bienvenida: fondo lavanda estilo ilustración flat --- */
.iq-banner {
  border-radius: var(--cuida-radius-lg);
}
.cuida-banner {
  position: relative; /* clave: contiene la ilustración DENTRO del header (si no,
                         escapa a .iq-banner que incluye la navbar y se corta). */
  background: linear-gradient(120deg, #eef1fe 0%, #e4e8fd 100%) !important;
  border-radius: var(--cuida-radius-lg);
  overflow: hidden;
}
.cuida-banner .iq-container h1 {
  color: #232d42 !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.cuida-banner .iq-container p {
  color: #5b6180 !important;
}
.cuida-banner .iq-container {
  position: relative;
  z-index: 2;
}
/* Burbujas que caen de fondo en el banner. */
.cuida-bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.cuida-bubble-drop {
  position: absolute;
  top: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  animation-name: cuida-bubble-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}
@keyframes cuida-bubble-fall {
  0% {
    transform: translateY(-30px) scale(0.7);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateY(230px) scale(1);
    opacity: 0;
  }
}
.dark .cuida-bubble-drop {
  border-color: rgba(255, 255, 255, 0.22);
}
@media (prefers-reduced-motion: reduce) {
  .cuida-bubble-drop {
    animation: none;
    opacity: 0;
  }
}
/* El contenido (tarjetas/botones) por encima de la ilustración del banner: basta
   con `position: relative` (ambos posicionados → gana el orden del DOM, y
   content-inner va después). OJO: NO poner `z-index` aquí — crearía un stacking
   context que atraparía los modales por DEBAJO de la navbar (z-index 889) y le
   cortaría el encabezado. Sin z-index, el modal (z 1055) sube sobre la navbar. */
.content-inner {
  position: relative;
}
.dark .cuida-illus-env {
  opacity: 0.14;
}
/* Manos del hombre tecleando en el laptop (alternadas). */
.cuida-hand-l,
.cuida-hand-r {
  transform-box: fill-box;
  transform-origin: center;
}
.cuida-hand-l {
  animation: cuida-type-hand 0.55s ease-in-out infinite;
}
.cuida-hand-r {
  animation: cuida-type-hand 0.55s ease-in-out infinite reverse;
}
@keyframes cuida-type-hand {
  0%,
  100% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(0);
  }
}

/* Nubecita "¡Vamos BAU!": aparece, se mantiene, desaparece y vuelve a salir. */
.cuida-speech {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: cuida-speech 4.2s ease-in-out infinite;
}
@keyframes cuida-speech {
  0%,
  100% {
    opacity: 0;
    transform: translateY(6px) scale(0.82);
  }
  9% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  46% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  58% {
    opacity: 0;
    transform: translateY(-4px) scale(0.92);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cuida-speech {
    animation: none;
    opacity: 1;
  }
  .cuida-hand-l,
  .cuida-hand-r {
    animation: none;
  }
}
.dark .cuida-banner {
  background: linear-gradient(120deg, #262c46 0%, #1b2036 100%) !important;
}
.dark .cuida-banner .iq-container h1 {
  color: #eef0f4 !important;
}
.dark .cuida-banner .iq-container p {
  color: #a9b0c8 !important;
}
.dark .cuida-banner-illus {
  opacity: 0.9;
}
/* En móvil la ilustración es decorativa y estorba/desborda: se oculta y el
   banner queda solo con el texto (más compacto). */
@media (max-width: 991.98px) {
  .cuida-banner-illus {
    display: none;
  }
  .cuida-banner {
    height: auto !important;
    min-height: 128px;
  }
}

/* --- Botón flotante de ajustes (tuerca) con sombra de marca --- */
.btn-fixed-end.btn-setting {
  box-shadow: 0 8px 20px rgba(241, 106, 27, 0.35);
}

/* Respeta a quien prefiere menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .card:hover,
  tbody tr {
    transform: none;
    transition: none;
  }
}

/* ============================================================
   UX/UI 2026 — segundo pase: navbar glass, sidebar, paginación,
   botones con gradiente, banner y skeletons con shimmer.
   ============================================================ */

/* --- Navbar: superficie sólida y limpia, en juego con el sidebar (misma
   "chrome" clara/oscura) y una sombra suave para separarlo del contenido.
   (Antes era vidrio translúcido sobre el fondo gris → se veía turbio.) --- */
.iq-navbar {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(16, 24, 40, 0.07);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}
.dark .iq-navbar {
  background: #191d2e !important;
  border-bottom-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}
.navbar-brand .logo-title {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* --- Sidebar: ítems redondeados, hover suave y activo con acento --- */
.sidebar .nav-item .nav-link {
  border-radius: 12px;
  margin: 2px 8px;
  transition: background-color 0.18s var(--cuida-ease), color 0.18s var(--cuida-ease);
}
.sidebar .nav-item .nav-link:not(.active):not(.static-item):hover {
  background-color: rgba(58, 87, 232, 0.07);
}
.sidebar .nav-item .nav-link.active {
  box-shadow: 0 8px 18px rgba(58, 87, 232, 0.28);
}
.dark .sidebar .nav-item .nav-link:not(.active):not(.static-item):hover {
  background-color: rgba(88, 151, 251, 0.12);
}
/* Sidebar colapsado (mini): cada enlace es un cuadro fijo centrado. CLAVE:
   ocultar el texto (.item-name) — si no, sigue ocupando ancho y al centrar
   empuja el ícono fuera del cuadro (íconos cortados / caja azul vacía). */
.sidebar.sidebar-mini .nav-item .nav-link:not(.static-item) {
  width: 46px;
  height: 46px;
  justify-content: center;
  align-items: center;
  margin: 4px auto;
  padding: 0;
  border-radius: 14px;
}
.sidebar.sidebar-mini .nav-item .nav-link:not(.static-item) .item-name {
  display: none;
}
.sidebar.sidebar-mini .nav-item .nav-link .icon {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Botones primarios con gradiente sutil de marca --- */
.btn-primary {
  background-image: linear-gradient(135deg, #4d6bff 0%, #3a57e8 100%);
  border: none;
}
.btn-primary:hover,
.btn-primary:focus {
  background-image: linear-gradient(135deg, #5a76ff 0%, #3f5cf0 100%);
}

/* --- Paginación tipo píldora --- */
.pagination .page-link {
  border-radius: 9px !important;
  margin: 0 3px;
  border: 1px solid rgba(16, 24, 40, 0.1);
  color: var(--bs-primary);
  transition: all 0.16s var(--cuida-ease);
}
.pagination .page-item.active .page-link {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  box-shadow: 0 4px 10px rgba(58, 87, 232, 0.3);
  color: #fff;
}
.pagination .page-item.disabled .page-link {
  color: #b6bcca;
}
.dark .pagination .page-link {
  border-color: rgba(255, 255, 255, 0.12);
  background: transparent;
}

/* --- Banner de bienvenida: jerarquía tipográfica más marcada --- */
.iq-navbar-header .iq-header-title h1,
.iq-navbar-header h1,
.iq-banner h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* --- Chips de acciones en tablas (Editar, etc.) más suaves --- */
.table .btn-sm {
  border-radius: 8px !important;
  font-size: 0.78rem;
}

/* --- Skeletons con barrido (shimmer) en vez de solo parpadear --- */
@keyframes cuida-shimmer {
  100% {
    transform: translateX(100%);
  }
}
.placeholder,
.card-body .bg-light.rounded {
  position: relative;
  overflow: hidden;
}
.placeholder::after,
.card-body .bg-light.rounded::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  animation: cuida-shimmer 1.6s infinite;
}
.dark .placeholder::after,
.dark .card-body .bg-light.rounded::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

/* --- Foco accesible visible en elementos personalizados (SearchSelect) --- */
.form-select[role='button']:focus-visible,
.search-select-option:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* --- Avatar del navbar con anillo sutil --- */
.iq-navbar .avatar {
  box-shadow: 0 0 0 3px rgba(58, 87, 232, 0.12);
}

/* --- Etiqueta de AMBIENTE (para no confundirse de entorno) --- */
.cuida-env-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.cuida-env-dev {
  background: rgba(59, 130, 246, 0.14);
  color: #2563eb;
  border: 1px solid rgba(59, 130, 246, 0.35);
}
.cuida-env-test {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.cuida-env-preprod {
  background: rgba(139, 92, 246, 0.14);
  color: #6d28d9;
  border: 1px solid rgba(139, 92, 246, 0.35);
}
.cuida-env-prod {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.dark .cuida-env-dev {
  color: #93b8ff;
}
.dark .cuida-env-test {
  color: #fbbf24;
}
.dark .cuida-env-preprod {
  color: #c4b5fd;
}
.dark .cuida-env-prod {
  color: #fca5a5;
}

/* --- Estado vacío de tablas: ícono en badge suave --- */
.cuida-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(58, 87, 232, 0.08);
  color: var(--bs-primary);
}
.dark .cuida-empty-icon {
  background: rgba(88, 151, 251, 0.12);
}

/* ============================================================
   Login — diseño propio (dos columnas: formulario + panel de marca).
   ============================================================ */
.cuida-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #17123f;
}
@media (max-width: 991.98px) {
  .cuida-login {
    grid-template-columns: 1fr;
  }
}

/* --- Columna del formulario --- */
.cuida-login-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
}
.cuida-login-card {
  width: 100%;
  max-width: 400px;
}
.cuida-login-logo {
  margin-bottom: 2rem;
}
.cuida-login-logo svg {
  height: 30px;
  width: auto;
}
.cuida-login-title {
  font-size: 1.95rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 0.4rem;
}
.cuida-login-sub {
  color: #8a92a6;
  font-size: 0.97rem;
  margin: 0 0 2rem;
}
.cuida-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.15rem;
}
.cuida-field-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #4b5169;
}
.cuida-input {
  position: relative;
  display: flex;
  align-items: center;
}
.cuida-input-icon {
  position: absolute;
  left: 14px;
  color: #a2a8bd;
  pointer-events: none;
}
.cuida-input input {
  width: 100%;
  height: 50px;
  border: 1.5px solid #e4e7f0;
  border-radius: 12px;
  padding: 0 44px;
  font-size: 0.97rem;
  font-family: inherit;
  color: #17123f;
  background: #fbfbfe;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.cuida-input input::placeholder {
  color: #b7bccb;
}
.cuida-input input:focus {
  outline: none;
  background: #fff;
  border-color: #4b3fd6;
  box-shadow: 0 0 0 4px rgba(75, 63, 214, 0.13);
}
.cuida-input:focus-within .cuida-input-icon {
  color: #4b3fd6;
}
.cuida-input.is-invalid input {
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}
.cuida-pass-toggle {
  position: absolute;
  right: 8px;
  display: flex;
  padding: 7px;
  border: none;
  background: none;
  color: #a2a8bd;
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.15s ease;
}
.cuida-pass-toggle:hover {
  color: #4b3fd6;
}
.cuida-login-btn {
  margin-top: 0.6rem;
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #4d6bff 0%, #3a57e8 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 10px 22px rgba(58, 87, 232, 0.32);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.cuida-login-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(58, 87, 232, 0.4);
}
.cuida-login-btn:active:not(:disabled) {
  transform: translateY(0);
}
.cuida-login-btn:disabled {
  opacity: 0.75;
  cursor: default;
}
.cuida-login-foot {
  margin-top: 2.5rem;
  font-size: 0.78rem;
  color: #b0b5c5;
  text-align: center;
}

/* --- Columna de marca (solo desktop) --- */
.cuida-login-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  background: linear-gradient(150deg, #4d6bff 0%, #573cd6 55%, #24309e 100%);
}
@media (max-width: 991.98px) {
  .cuida-login-brand {
    display: none;
  }
}
.cuida-login-blob {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  filter: blur(2px);
}
.cuida-login-blob-1 {
  width: 320px;
  height: 320px;
  top: -80px;
  right: -60px;
}
.cuida-login-blob-2 {
  width: 220px;
  height: 220px;
  bottom: -40px;
  left: -50px;
  background: rgba(255, 121, 92, 0.16);
}
.cuida-login-blob-3 {
  width: 140px;
  height: 140px;
  top: 40%;
  right: 18%;
  background: rgba(255, 255, 255, 0.06);
}
.cuida-login-brand-inner {
  position: relative;
  z-index: 1;
  max-width: 400px;
  text-align: center;
  color: #fff;
}
.cuida-login-badge {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.6rem;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.cuida-login-brand-inner h2 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
}
.cuida-login-brand-inner p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* ============================================================
   UX/UI 2026 — tercer pase: sidebar dark, toasts, animaciones
   de entrada, densidad y tarjetas KPI del dashboard.
   ============================================================ */

/* --- Sidebar coherente en modo oscuro (aunque esté en 'sidebar-white') --- */
.dark .sidebar.sidebar-default {
  background: #191d2e !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.dark .sidebar-default .navbar-brand .logo-title {
  color: #f4f6fb;
}
.dark .sidebar-default .nav-item .nav-link:not(.active) {
  color: #aeb4d1;
}
.dark .sidebar-default .nav-item .nav-link.static-item {
  color: #676d8f;
}
.dark .sidebar-default .nav-item .nav-link.active {
  color: #fff;
}

/* --- Toasts (toastr) al estilo 2026 --- */
#toast-container > div {
  border-radius: 12px !important;
  box-shadow: var(--cuida-shadow-lg) !important;
  opacity: 1 !important;
  font-weight: 500;
  border: none;
}
#toast-container > .toast-success {
  background-color: #10b981 !important;
}
#toast-container > .toast-error {
  background-color: #ef4444 !important;
}
#toast-container > .toast-info {
  background-color: #3a57e8 !important;
}
#toast-container > .toast-warning {
  background-color: #f59e0b !important;
}
#toast-container > div:hover {
  box-shadow: var(--cuida-shadow-lg), 0 0 0 3px rgba(255, 255, 255, 0.12) !important;
}
.toast-progress {
  height: 3px !important;
  opacity: 0.45 !important;
  border-radius: 0 0 12px 12px;
}

/* --- Animaciones de entrada (modal, backdrop, tarjetas) --- */
@keyframes cuida-modal-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.modal.show .modal-dialog {
  animation: cuida-modal-in 0.28s var(--cuida-ease);
}
@keyframes cuida-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.45;
  }
}
.modal-backdrop.show {
  animation: cuida-backdrop-in 0.25s var(--cuida-ease);
}
@keyframes cuida-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* fill-mode `backwards` (NO `both`): el transform se aplica al inicio pero NO
   persiste al terminar. Si persistiera, el `transform` en reposo crea un
   stacking context que ATRAPA el dropdown del SearchSelect dentro de la tarjeta
   y la tarjeta siguiente lo tapa (componentes "cortados"). */
.content-inner .card,
.content-inner .cuida-kpi {
  animation: cuida-fade-in-up 0.4s var(--cuida-ease) backwards;
}

/* --- Densidad: encabezados de tarjeta con más aire --- */
.card-header {
  padding: 1.15rem 1.5rem;
}
.card-body {
  padding: 1.5rem;
}

/* --- Tarjetas KPI del dashboard --- */
.cuida-kpi {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--cuida-radius-md);
  background: var(--bs-card-bg, #fff);
  border: 1px solid rgba(16, 24, 40, 0.06);
  box-shadow: var(--cuida-shadow-sm);
  transition: transform 0.2s var(--cuida-ease), box-shadow 0.2s var(--cuida-ease);
  height: 100%;
  min-width: 0;
}
.cuida-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--cuida-shadow-md);
}
.dark .cuida-kpi {
  background: #222738;
  border-color: rgba(255, 255, 255, 0.06);
}
.cuida-kpi-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Contenedor del texto: min-width 0 para que el número no desborde la tarjeta. */
.cuida-kpi-text {
  min-width: 0;
  flex: 1 1 auto;
}
.cuida-kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.cuida-kpi-label {
  color: #8a92a6;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}
/* En móvil (2 por fila y poco ancho) se APILA el ícono sobre el texto para que
   la etiqueta use todo el ancho de la tarjeta y no se parta a mitad de palabra. */
@media (max-width: 575.98px) {
  .cuida-kpi {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.8rem;
  }
  .cuida-kpi-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }
  .cuida-kpi-value {
    font-size: 1.35rem;
  }
  .cuida-kpi-label {
    font-size: 0.74rem;
  }
}

/* ============================================================
   Animación de carga "agente de soporte trabajando" (WorkingLoader)
   ============================================================ */
.cuida-working-text {
  color: #8a92a6;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}
/* Balanceo suave del agente */
.cuida-agent {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: cuida-bob 2.6s ease-in-out infinite;
}
@keyframes cuida-bob {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-4px) rotate(-1.2deg);
  }
}
/* Punto "en línea" pulsante */
.cuida-online-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: cuida-online 1.8s ease-out infinite;
}
@keyframes cuida-online {
  0% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  70%,
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}
/* Globos de chat que suben y se desvanecen */
.cuida-bubble {
  transform-box: fill-box;
  transform-origin: center;
  animation: cuida-bubble-rise 3s ease-in-out infinite;
}
.cuida-bubble-b {
  animation-delay: 1.5s;
}
@keyframes cuida-bubble-rise {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-14px) scale(0.96);
  }
}
/* Líneas de código/texto "escribiéndose" en la pantalla */
.cuida-line {
  transform-box: fill-box;
  transform-origin: left center;
  animation: cuida-type 1.4s ease-in-out infinite;
}
.cuida-line-2 {
  animation-delay: 0.25s;
}
.cuida-line-3 {
  animation-delay: 0.5s;
}
@keyframes cuida-type {
  0%,
  100% {
    transform: scaleX(0.3);
    opacity: 0.5;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}
/* Brillo sutil de la pantalla */
.cuida-screen {
  animation: cuida-screen-glow 2.4s ease-in-out infinite;
}
@keyframes cuida-screen-glow {
  0%,
  100% {
    fill: #20263a;
  }
  50% {
    fill: #2a3350;
  }
}
/* Colores del pelo/audífono adaptables al modo (contraste en dark). */
.cuida-hair,
.cuida-ear {
  fill: #17123f;
}
.cuida-headset,
.cuida-mic {
  stroke: #17123f;
}
.dark .cuida-hair,
.dark .cuida-ear {
  fill: #454c6e;
}
.dark .cuida-headset,
.dark .cuida-mic {
  stroke: #454c6e;
}
@media (prefers-reduced-motion: reduce) {
  .cuida-agent,
  .cuida-online-ring,
  .cuida-bubble,
  .cuida-line,
  .cuida-screen {
    animation: none;
  }
}

/* ============================================================
   Tipografía consistente (pesos y colores de encabezados unificados).
   Encabezados de contenido = 700 (no 800), navy #232d42 (claro) / claro en dark.
   ============================================================ */
.card-title,
.header-title h1,
.header-title h2,
.header-title h3,
.header-title h4,
.header-title h5,
.cuida-login-title,
.content-inner h1,
.content-inner h2,
.content-inner h3,
.content-inner h4,
.cuida-banner .iq-container h1 {
  color: #232d42;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.dark .card-title,
.dark .header-title h1,
.dark .header-title h2,
.dark .header-title h3,
.dark .header-title h4,
.dark .content-inner h1,
.dark .content-inner h2,
.dark .content-inner h3,
.dark .content-inner h4,
.dark .cuida-banner .iq-container h1 {
  color: #eef0f4;
}

/* "Bienvenido a Cuida Salud" (panel de marca): blanco sólido, peso medio y una
   sombra sutil para que contraste bien sobre el gradiente. */
.cuida-login-brand-inner h2 {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 2px 14px rgba(20, 16, 60, 0.22);
}
.cuida-login-brand-inner p {
  color: rgba(255, 255, 255, 0.9);
}