/*
Materialize Modern Lab Theme - cascade.css
-------------------------------------------
Paleta principal: tonos azul, teal, blanco, gris claro y acentos verdes.
Tipografía: Roboto, Arial, sans-serif.

OPTIMIZACIÓN CSS:
- Clases utilitarias agregadas para reducir código repetitivo
- Patrones optimizados: flex, text-align, border-radius, padding, gap
- Ver css-optimization-report.md para detalles completos
*/

:root {
  /* TEMA CLARO - Paleta Premium (Slate & Indigo) */

  /* Colores Principales (Indigo) */
  --primary: #4f46e5;
  --primary-light: #818cf8;
  --primary-dark: #3730a3;

  /* Colores Secundarios (Teal Suave) */
  --secondary: #0d9488;
  --secondary-light: #2dd4bf;
  --secondary-dark: #0f766e;

  /* Acentos (Verde Esmeralda) */
  --accent: #10b981;
  --accent-light: #34d399;
  --accent-dark: #047857;

  /* Morados de acento */
  --purple: #8b5cf6;
  --purple-light: #a78bfa;
  --purple-dark: #6d28d9;

  /* Estados */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* Neutros y Fondos (Slate Claro) */
  --background: #f8fafc;
  --surface: #ffffff;
  --surface-variant: #f1f5f9;
  --surface-glass: rgba(255, 255, 255, 0.85);

  /* Textos */
  --text: #0f172a;
  --text-secondary: #475569;
  --text-light: #ffffff;
  --text-disabled: #94a3b8;

  /* Bordes */
  --border: #e2e8f0;
  --border-light: #f1f5f9;

  /* Sombras Modernas (Soft Shadows) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
  --shadow-strong: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  /* Medidas estándar */
  --border-radius-sm: 6px;
  --border-radius: 12px;
  --border-radius-large: 20px;

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;

  /* Transiciones Suaves */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Sidebar Default */
  --sidebar-bg: var(--surface);
  --sidebar-border: var(--border);
}

/* === TEMA OSCURO (Slate Profundo) === */
[data-coreui-theme="dark"] {
  /* Fondos Navales/Slate */
  --background: #0f172a;
  --surface: #1e293b;
  --surface-variant: #334155;
  --surface-glass: rgba(30, 41, 59, 0.85);

  /* Textos Optimizados */
  --text: #f8fafc;
  --text-secondary: #94a3b8;
  --text-light: #ffffff;
  --text-disabled: #64748b;

  /* Bordes Suaves en Oscuro */
  --border: #334155;
  --border-light: #475569;

  /* Sombras para Fondo Oscuro (Más negras y difusas) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-strong: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);

  /* Colores Primarios Adaptados */
  --primary: #818cf8;
  --primary-light: #a5b4fc;
  --primary-dark: #6366f1;

  --secondary: #2dd4bf;
  --secondary-light: #5eead4;
  --secondary-dark: #14b8a6;

  --accent: #34d399;
  --accent-light: #6ee7b7;
  --accent-dark: #10b981;

  /* Sidebar en modo oscuro */
  --sidebar-bg: #0f172a;
  --sidebar-border: #1e293b;
}

/* === UTILITY CLASSES === */
/* Flexbox utilities */
.u-flex {
  display: flex !important;
}

.u-flex-column {
  flex-direction: column !important;
}

.u-flex-wrap {
  flex-wrap: wrap !important;
}

.u-justify-center {
  justify-content: center !important;
}

.u-justify-between {
  justify-content: space-between !important;
}

.u-justify-end {
  justify-content: flex-end !important;
}

.u-align-center {
  align-items: center !important;
}

.u-align-start {
  align-items: flex-start !important;
}

.u-flex-center {
  display: flex !important;
  align-items: center !important;
}

.u-flex-center-full {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Text alignment utilities */
.u-text-center {
  text-align: center !important;
}

.u-text-left {
  text-align: left !important;
}

.u-text-right {
  text-align: right !important;
}

/* Border radius utilities */
.u-radius {
  border-radius: var(--border-radius) !important;
}

.u-radius-lg {
  border-radius: var(--border-radius-large) !important;
}

/* Spacing utilities - Padding */
.u-p-xs {
  padding: var(--spacing-xs) !important;
}

.u-p-sm {
  padding: var(--spacing-sm) !important;
}

.u-p-md {
  padding: var(--spacing-md) !important;
}

.u-p-lg {
  padding: var(--spacing-lg) !important;
}

.u-p-xl {
  padding: var(--spacing-xl) !important;
}

/* Padding horizontal/vertical */
.u-px-xs {
  padding-left: var(--spacing-xs) !important;
  padding-right: var(--spacing-xs) !important;
}

.u-px-sm {
  padding-left: var(--spacing-sm) !important;
  padding-right: var(--spacing-sm) !important;
}

.u-px-md {
  padding-left: var(--spacing-md) !important;
  padding-right: var(--spacing-md) !important;
}

.u-px-lg {
  padding-left: var(--spacing-lg) !important;
  padding-right: var(--spacing-lg) !important;
}

.u-px-xl {
  padding-left: var(--spacing-xl) !important;
  padding-right: var(--spacing-xl) !important;
}

.u-py-xs {
  padding-top: var(--spacing-xs) !important;
  padding-bottom: var(--spacing-xs) !important;
}

.u-py-sm {
  padding-top: var(--spacing-sm) !important;
  padding-bottom: var(--spacing-sm) !important;
}

.u-py-md {
  padding-top: var(--spacing-md) !important;
  padding-bottom: var(--spacing-md) !important;
}

.u-py-lg {
  padding-top: var(--spacing-lg) !important;
  padding-bottom: var(--spacing-lg) !important;
}

/* Common padding combinations */
.u-p-md-lg {
  padding: var(--spacing-md) var(--spacing-lg) !important;
}

.u-p-sm-md {
  padding: var(--spacing-sm) var(--spacing-md) !important;
}

.u-p-xs-sm {
  padding: var(--spacing-xs) var(--spacing-sm) !important;
}

/* Margin utilities */
.u-m-xs {
  margin: var(--spacing-xs) !important;
}

.u-m-sm {
  margin: var(--spacing-sm) !important;
}

.u-m-md {
  margin: var(--spacing-md) !important;
}

.u-m-lg {
  margin: var(--spacing-lg) !important;
}

.u-m-xl {
  margin: var(--spacing-xl) !important;
}

/* Margin bottom utilities - very common pattern */
.u-mb-0 {
  margin-bottom: 0 !important;
}

.u-mb-xs {
  margin-bottom: var(--spacing-xs) !important;
}

.u-mb-sm {
  margin-bottom: var(--spacing-sm) !important;
}

.u-mb-md {
  margin-bottom: var(--spacing-md) !important;
}

.u-mb-lg {
  margin-bottom: var(--spacing-lg) !important;
}

.u-mb-xl {
  margin-bottom: var(--spacing-xl) !important;
}

/* Width utilities - very common pattern */
.u-w-full {
  width: 100% !important;
}

.u-w-auto {
  width: auto !important;
}

/* Additional flex utilities */
.u-flex-nowrap {
  flex-wrap: nowrap !important;
}

.u-flex-1 {
  flex: 1 !important;
}

/* Position utilities */
.u-relative {
  position: relative !important;
}

.u-absolute {
  position: absolute !important;
}

/* Font utilities */
.u-font-bold {
  font-weight: bold !important;
}

.u-font-normal {
  font-weight: normal !important;
}

/* Text color utilities */
.u-text-white {
  color: var(--text-light) !important;
}

.u-text-black {
  color: black !important;
}

/* Background utilities */
.u-bg-transparent {
  background-color: transparent !important;
}

/* Gap utilities */
.u-gap-xs {
  gap: var(--spacing-xs) !important;
}

.u-gap-sm {
  gap: var(--spacing-sm) !important;
}

.u-gap-md {
  gap: var(--spacing-md) !important;
}

.u-gap-lg {
  gap: var(--spacing-lg) !important;
}

/* === END UTILITY CLASSES === */

/* Reset y base */
* {
  box-sizing: border-box;
}

.modal-content,
.modal-body {
  overflow: visible !important;
}

/* Restore proper overflow for scrollable modals */
.modal-dialog-scrollable .modal-content {
  overflow: hidden !important;
}
.modal-dialog-scrollable .modal-body {
  overflow-y: auto !important;
}

.modal-content {
  background: var(--surface-glass) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-strong) !important;
  border-radius: var(--border-radius-large) !important;
}

.modal-header,
.coreui-modal-header {
  background: var(--surface-variant) !important;
  border-bottom: 1px solid var(--border);
  border-top-left-radius: var(--border-radius-large) !important;
  border-top-right-radius: var(--border-radius-large) !important;
  padding: var(--spacing-lg) var(--spacing-xl) !important;
}

/* Forzar la visibilidad del botón de cerrar en Light Mode (Icono Negro) */
html:not([data-coreui-theme="dark"]) .btn-close {
  filter: brightness(0) !important;
  /* Fuerza el icono a ser color negro puro */
  opacity: 0.6;
}

html:not([data-coreui-theme="dark"]) .btn-close:hover {
  opacity: 1;
}

.modal-footer,
.coreui-modal-footer {
  background: var(--background) !important;
  border-top: 1px solid var(--border);
  padding: var(--spacing-lg) var(--spacing-xl) !important;
  border-bottom-left-radius: var(--border-radius-large) !important;
  border-bottom-right-radius: var(--border-radius-large) !important;
}

.z-index-dropdown {
  z-index: 1050 !important;
}



.choices.is-open,
.choices.is-focused {
  z-index: 1060 !important;
  /* Solo elevar el context z-index cuando el select esté activo/abierto */
}

.choices__list--dropdown {
  z-index: 2000 !important;
}

html,
body {
  background: var(--background) !important;
  color: var(--text) !important;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
}

.wrapper,
.c-wrapper,
.body {
  background: var(--background) !important;
  color: var(--text) !important;
}

body {
  display: flex !important;
  flex-direction: column !important;
}


/* Tipografía mejorada */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
  color: var(--text);
  margin-bottom: var(--spacing-md);
  line-height: 1.3;
}

h1 {
  font-size: 2.5rem;
  font-weight: 300;
}

h2 {
  font-size: 2rem;
  font-weight: 400;
}

h3 {
  font-size: 1.75rem;
  font-weight: 400;
}

h4 {
  font-size: 1.5rem;
  font-weight: 500;
}

h5 {
  font-size: 1.25rem;
  font-weight: 500;
}

h6 {
  font-size: 1rem;
  font-weight: 500;
}

p {
  margin-bottom: var(--spacing-md);
  color: var(--text-secondary);
}

/* Tarjetas modernas */
.card {
  background: var(--surface-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--border-radius-large);
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  transition: var(--transition-normal);
}

.card:hover {
  box-shadow: var(--shadow-strong);
  transform: translateY(-4px);
}

.card-header {
  background: var(--surface-variant);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding: var(--spacing-lg);
  font-weight: 600;
  border-top-left-radius: var(--border-radius-large) !important;
  border-top-right-radius: var(--border-radius-large) !important;
}

.card-body {
  padding: var(--spacing-xl);
}

.card-footer {
  background: var(--background);
  border-top: 1px solid var(--border);
  padding: var(--spacing-lg);
  border-bottom-left-radius: var(--border-radius-large) !important;
  border-bottom-right-radius: var(--border-radius-large) !important;
}

/* Botones modernos */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--border-radius);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: var(--transition-normal);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: var(--transition-slow);
}

.btn:hover::before {
  left: 100%;
}

.btn:hover {
  transform: translateY(-2px) scale(1.02);
  text-decoration: none;
  box-shadow: var(--shadow);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

/* Botones específicos - Estilos base comunes */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-warning,
.btn-danger,
.btn-info {
  color: var(--text-light);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-info:hover {
  box-shadow: var(--shadow);
  color: var(--text-light);
  transform: translateY(-2px);
}

/* Botones específicos - Colores únicos */
.btn-primary {
  background: var(--primary);
}

.btn-primary:hover {
  background: var(--primary-light);
  box-shadow: 0 4px 14px 0 rgba(79, 70, 229, 0.39);
}

.btn-secondary {
  background: var(--secondary);
  color: var(--text-light) !important;
}

.btn-secondary:hover {
  background: var(--secondary-light);
  box-shadow: 0 4px 14px 0 rgba(13, 148, 136, 0.39);
}

.btn-success {
  background: var(--success);
  color: var(--text-light) !important;
}

.btn-success:hover {
  background: var(--accent-light);
  box-shadow: 0 4px 14px 0 rgba(16, 185, 129, 0.39);
}

.btn-warning {
  background: var(--warning);
}

.btn-danger {
  background: var(--error);
  color: var(--text-light) !important;
}

.btn-danger:hover {
  background: #f87171;
  box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.39);
}

.btn-info {
  background: var(--info);
}

/* Estados específicos para botones success, danger y secondary */
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  color: var(--text-light) !important;
  background: linear-gradient(135deg, #495057 0%, #343a40 100%);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  color: var(--text-light) !important;
  background: linear-gradient(135deg, var(--accent-dark) 0%, #1b5e20 100%);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  color: var(--text-light) !important;
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
}

.btn-outline-primary {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}

.btn-outline-primary:hover {
  background: var(--primary);
  color: var(--text-light);
}

/* Tamaños de botones */
.btn-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.75rem;
}

.btn-lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 1rem;
}

/* Inputs y formularios modernos */
.form-control,
.form-select {
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 1rem;
  background: var(--surface);
  color: var(--text);
  transition: var(--transition-normal);
  box-shadow: var(--shadow-sm);
  border-radius: var(--border-radius) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary-light);
  outline: none;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: var(--spacing-xs);
}

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

/* ====================================
   TABLAS MODERNAS CON BORDES REDONDEADOS
   ==================================== */

.table {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-radius: var(--border-radius-large) !important;
  padding: 1em !important;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: none;
  border-collapse: separate;
  border-spacing: 0;
}

.table td,
.table th {
  color: var(--text) !important;
}

/* Contenedor de tabla con bordes redondeados */
.table-responsive {
  border-radius: var(--border-radius-large) !important;
  padding: 1em !important;
  overflow-x: auto !important;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.table-responsive .table {
  margin-bottom: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

.table th {
  background: var(--surface-variant) !important;
  font-weight: 600;
  border: none;
  border-bottom: 2px solid var(--border) !important;
  padding: var(--spacing-lg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  position: relative;
  vertical-align: middle;
  text-align: left;
}

/* Primera celda del header - esquina superior izquierda */
.table th:first-child {
  border-top-left-radius: var(--border-radius-large);
}

/* Última celda del header - esquina superior derecha */
.table th:last-child {
  border-top-right-radius: var(--border-radius-large);
}

.table td {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
  border-left: none;
  border-right: none;
}

/* Última fila - esquinas inferiores redondeadas */
.table tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--border-radius-large);
}

.table tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--border-radius-large);
}

.table tbody tr:hover {
  background-color: rgba(33, 150, 243, 0.04);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* Alertas modernas */
.alert {
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.alert-primary {
  background-color: var(--surface);
  border-color: var(--primary-light);
  border-left: 4px solid var(--primary);
  color: var(--text);
}

.alert-success {
  background-color: var(--surface);
  border-color: var(--accent-light);
  border-left: 4px solid var(--accent);
  color: var(--text);
}

.alert-warning {
  background-color: var(--surface);
  border-color: #fcd34d;
  border-left: 4px solid var(--warning);
  color: var(--text);
}

.alert-danger {
  background-color: var(--surface);
  border-color: #fca5a5;
  border-left: 4px solid var(--error);
  color: var(--text);
}

.alert-info {
  background-color: var(--surface);
  border-color: #93c5fd;
  border-left: 4px solid var(--info);
  color: var(--text);
}


/* ====================================
   NAVEGACIÓN MODERNA
   ==================================== */

/* Sidebar moderno - Fondo claro con gradiente gris - FORZADO */
.modern-sidebar,
.sidebar-dark,
.sidebar.sidebar-dark {
  background: var(--sidebar-bg, var(--surface)) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  box-shadow: var(--shadow-strong) !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  min-height: 100vh;
  overflow-x: visible !important;
}

[data-coreui-theme="dark"] .modern-sidebar,
[data-coreui-theme="dark"] .sidebar-dark,
[data-coreui-theme="dark"] .sidebar.sidebar-dark {
  background: #1a1c23 !important;
  border-right: 1px solid #24262d !important;
}

.modern-sidebar .sidebar-header,
.sidebar-dark .sidebar-header,
.sidebar .sidebar-header {
  background: var(--surface-variant) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 1rem 1.25rem !important;
  position: relative;
  min-height: 60px;
  overflow: visible !important;
}

/* Sobrescribir variables CSS de CoreUI específicamente para el brand */
.sidebar .sidebar-brand,
.modern-sidebar .sidebar-brand,
.sidebar-dark .sidebar-brand {
  --cui-sidebar-brand-height: auto !important;
  flex: none !important;
  height: auto !important;
  min-height: 60px !important;
  max-height: none !important;
}

.modern-sidebar .sidebar-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
  pointer-events: none;
}

.modern-sidebar .sidebar-title {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  letter-spacing: 0.3px !important;
  color: var(--text) !important;
  position: relative;
  z-index: 1;
  margin: 0 !important;
  text-align: center;
  width: 100%;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Contenedor del brand para mejor centrado - sobrescribir CoreUI */
.sidebar-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 60px !important;
  max-height: none !important;
  padding: 0.5rem !important;
  overflow: visible !important;
  flex: none !important;
  white-space: normal !important;
  background: transparent !important;
  color: inherit !important;
}

/* Logo del sidebar */
.sidebar-logo {
  max-height: 45px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: brightness(1.1) contrast(1.1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
  transition: all 0.3s ease !important;
  display: block !important;
  max-width: none !important;
  flex-shrink: 0 !important;
}

.sidebar-logo:hover {
  transform: scale(1.05) !important;
  filter: brightness(1.2) contrast(1.2) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)) !important;
}

.modern-sidebar .sidebar-brand h4,
.sidebar-brand {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  letter-spacing: 0.3px !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  position: relative;
  z-index: 1;
  margin: 0 !important;
  text-align: center;
  width: 100%;
  padding: 0.5rem 0 !important;
  background: transparent !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}

.modern-sidebar .brand-logo {
  max-height: 35px;
  max-width: 150px;
  height: auto;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: var(--transition-normal);
}

.modern-sidebar .brand-logo:hover {
  transform: scale(1.05);
}

/* Responsive del sistema de navegación personalizado */
@media (max-width: 768px) {
  .sidebar-title {
    font-size: 1rem !important;
    letter-spacing: 0.3px !important;
  }

  .sidebar-logo {
    max-height: 35px !important;
  }

  .modern-sidebar .sidebar-header {
    padding: var(--spacing-md) !important;
    overflow: visible !important;
  }

  .sidebar-brand {
    min-height: 60px !important;
    padding: 0.25rem !important;
    overflow: visible !important;
  }

  .modern-nav {
    padding: var(--spacing-md) 0;
  }

  .modern-nav-link {
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-size: 0.85rem;
    margin-right: var(--spacing-md);
  }

  .modern-nav-group {
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-size: 0.7rem;
    margin-right: var(--spacing-md);
  }

  .modern-nav-sublink {
    font-size: 0.8rem;
    padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) calc(var(--spacing-md) + 25px) !important;
    margin-right: var(--spacing-md);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar-title {
    font-size: 1.1rem !important;
  }

  .modern-nav-link,
  .modern-nav-group {
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
  }
}

/* Navegación moderna - Enlaces con colores oscuros FORZADOS */
.modern-nav,
.sidebar-nav {
  padding: 0.75rem 0;
  margin: 0;
  background: transparent !important;
}

.modern-nav .nav-item {
  margin-bottom: 2px;
}

.modern-nav-link,
.sidebar-nav .nav-link {
  color: var(--text-secondary) !important;
  padding: 0.75rem 1.25rem !important;
  border-radius: var(--border-radius-sm) !important;
  margin: 2px var(--spacing-sm);
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  position: relative;
  background: transparent !important;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: normal !important;
  word-wrap: break-word !important;
  flex-wrap: wrap !important;
  min-height: 40px !important;
}

.modern-nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.03) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modern-nav-link:hover::before {
  opacity: 1;
}

.modern-nav-link:hover,
.sidebar-nav .nav-link:hover {
  color: var(--text) !important;
  background: var(--surface-variant) !important;
}

.modern-nav-link.active,
.sidebar-nav .nav-link.active,
.sidebar.sidebar-dark .sidebar-nav .nav-link.active {
  background: var(--primary) !important;
  color: white !important;
  /* Always white on primary background */
  font-weight: 600;
  box-shadow: var(--shadow-sm) !important;
}

.modern-nav-link .nav-icon,
.sidebar-nav .nav-link .nav-icon {
  width: 18px;
  height: 18px;
  margin-right: 0.5rem;
  font-size: 1rem;
  opacity: 0.7;
  transition: all 0.3s ease;
  color: #64748b !important;
}

.modern-nav-link:hover .nav-icon,
.sidebar-nav .nav-link:hover .nav-icon {
  opacity: 1;
  color: var(--text) !important;
}

.modern-nav-link.active .nav-icon,
.sidebar-nav .nav-link.active .nav-icon,
.sidebar.sidebar-dark .sidebar-nav .nav-link.active .nav-icon {
  opacity: 1;
  color: white !important;
  /* Always white on primary background */
}

.modern-nav-link .nav-text,
.sidebar-nav .nav-link .nav-text {
  font-weight: inherit;
  transition: all 0.3s ease;
  white-space: normal !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  line-height: 1.3 !important;
  flex: 1 1 auto !important;
}

/* Grupos de navegación modernos - Sin fondo extraño en iconos */
.modern-nav-group,
.sidebar-nav .nav-group-toggle {
  color: var(--text) !important;
  padding: 0.75rem 1.25rem !important;
  border-radius: var(--border-radius-sm) !important;
  margin: 2px var(--spacing-sm) !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: transparent !important;
  border: none !important;
  position: relative;
  box-shadow: none !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  flex-wrap: wrap !important;
  min-height: 40px !important;
}

/* Ocultar flecha por defecto de CoreUI para evitar duplicados con nuestra flecha manual */
.sidebar-nav .nav-group-toggle::after {
  display: none !important;
}

/* Estilo y rotación para nuestra flecha manual */
.nav-group-arrow {
  transition: transform 0.3s ease !important;
  font-size: 0.8rem;
  opacity: 0.7;
  margin-left: auto;
}

.nav-group.show .nav-group-arrow {
  transform: rotate(180deg);
}

.modern-nav-group::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modern-nav-group:hover::before {
  opacity: 1;
}

.modern-nav-group:hover,
.sidebar-nav .nav-group-toggle:hover {
  color: var(--text) !important;
  background: var(--surface-variant) !important;
}

.modern-nav-group .nav-icon,
.sidebar-nav .nav-group-toggle .nav-icon {
  width: 16px;
  height: 16px;
  margin-right: 0.5rem;
  font-size: 0.9rem;
  opacity: 0.8;
  color: var(--text-secondary) !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  transition: all 0.2s ease;
  box-shadow: none !important;
}

.modern-nav-group:hover .nav-icon,
.sidebar-nav .nav-group-toggle:hover .nav-icon {
  opacity: 1;
  color: var(--primary) !important;
  background: none !important;
}

/* Flechas indicadoras para menús con submenús */
.nav-group-arrow {
  font-size: 0.8rem !important;
  transition: transform 0.2s ease !important;
  color: var(--text-secondary) !important;
  opacity: 0.7;
  margin-left: auto !important;
}

/* Rotación de flecha cuando el grupo está expandido */
.nav-group.show .nav-group-arrow,
.nav-group[aria-expanded="true"] .nav-group-arrow {
  transform: rotate(180deg) !important;
  color: var(--primary) !important;
  opacity: 1;
}

/* Hover effect en la flecha */
.modern-nav-group:hover .nav-group-arrow,
.sidebar-nav .nav-group-toggle:hover .nav-group-arrow {
  color: var(--primary) !important;
  opacity: 1;
}

/* Subenlaces modernos - Mejor contraste */
.modern-nav-sublink,
.sidebar-nav .nav-group-items .nav-link {
  color: var(--text-secondary) !important;
  padding: 0.5rem 1rem 0.5rem 2.5rem !important;
  border-radius: var(--border-radius-sm) !important;
  margin: 2px var(--spacing-sm) 2px calc(var(--spacing-sm) + 10px) !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  font-size: 0.85rem;
  font-weight: 500;
  position: relative;
  background: transparent !important;
  border: none !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  flex-wrap: wrap !important;
  min-height: 35px !important;
}

.modern-nav-sublink::before {
  content: '';
  position: absolute;
  left: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background: #6b7280;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.modern-nav-sublink:hover,
.sidebar-nav .nav-group-items .nav-link:hover {
  color: var(--text) !important;
  background: var(--surface-variant) !important;
  font-weight: 600;
}

.modern-nav-sublink.active,
.sidebar-nav .nav-group-items .nav-link.active,
.sidebar.sidebar-dark .sidebar-nav .nav-group-items .nav-link.active {
  color: var(--primary) !important;
  background: var(--surface-variant) !important;
  font-weight: 700;
  border-left: 3px solid var(--primary) !important;
}

.modern-nav-sublink:hover::before {
  background: #3b82f6;
  transform: translateY(-50%) scale(1.4);
}

/* Iconos de sub-navegación con mejor contraste */
.nav-subicon {
  color: var(--text-disabled) !important;
  font-size: 0.6rem;
  margin-right: 0.5rem;
  transition: color 0.2s ease;
  font-weight: bold;
}

.modern-nav-sublink:hover .nav-subicon,
.sidebar-nav .nav-group-items .nav-link:hover .nav-subicon {
  color: var(--primary) !important;
}

/* Forzar estilos sobre CoreUI */
.sidebar.sidebar-dark .sidebar-nav .nav-link,
.sidebar.sidebar-dark .sidebar-nav .nav-group-toggle {
  background: transparent !important;
}

.sidebar.sidebar-dark .sidebar-nav .nav-group-items {
  background: transparent !important;
}

.sidebar.sidebar-dark .sidebar-nav .nav-group-items .nav-link {
  color: var(--text-secondary) !important;
  background: transparent !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .sidebar-title {
    font-size: 1rem !important;
    letter-spacing: 0.2px !important;
  }

  .modern-sidebar .sidebar-header {
    padding: 0.75rem 1rem !important;
    min-height: 50px;
  }

  .modern-nav {
    padding: 0.5rem 0;
  }

  .modern-nav-link {
    padding: 0.625rem 1rem !important;
    font-size: 0.8rem;
  }

  .modern-nav-group {
    padding: 0.625rem 1rem !important;
    font-size: 0.75rem;
  }

  .modern-nav-sublink {
    padding: 0.5rem 1rem 0.5rem 2rem !important;
    font-size: 0.75rem;
  }
}

/* Header moderno - Estilo personalizado */
.modern-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08) !important;
  min-height: 48px !important;
  padding: 0 !important;
}

/* Reducir altura del header sticky */
.header {
  min-height: 48px !important;
  padding: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1040 !important;
  background: var(--surface) !important;
}

.header .container-fluid {
  padding: 0.5rem 1rem !important;
}

.header-sticky {
  height: 48px !important;
  min-height: 48px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1040 !important;
}

/* Elementos del header más compactos */
.header .nav-link {
  padding: 0.25rem 0.5rem !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
}

.header .avatar {
  width: 28px !important;
  height: 28px !important;
}

.header .breadcrumb {
  margin-bottom: 0 !important;
  font-size: 0.8rem !important;
}

.header .breadcrumb-item {
  padding: 0 !important;
}

.modern-header-toggle {
  background: none !important;
  border: none !important;
  color: var(--text-secondary) !important;
  padding: 0.25rem !important;
  border-radius: var(--border-radius) !important;
  transition: var(--transition-fast) !important;
  height: 32px !important;
  width: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.modern-header-toggle:hover {
  background: rgba(33, 150, 243, 0.1) !important;
  color: var(--primary) !important;
}

/* Dropdown de usuario moderno */
.modern-user-dropdown {
  background: var(--surface-variant) !important;
  border-radius: var(--border-radius-large) !important;
  padding: var(--spacing-sm) var(--spacing-md) !important;
  transition: var(--transition-fast) !important;
  text-decoration: none !important;
}

.modern-user-dropdown:hover {
  background: rgba(33, 150, 243, 0.1) !important;
  transform: translateY(-1px);
}

.modern-dropdown-menu {
  border: none !important;
  box-shadow: var(--shadow-strong) !important;
  border-radius: var(--border-radius-large) !important;
  padding: var(--spacing-md) 0 !important;
  margin-top: var(--spacing-sm) !important;
}

.modern-dropdown-menu .dropdown-header {
  background: linear-gradient(135deg, var(--surface-variant) 0%, rgba(33, 150, 243, 0.05) 100%) !important;
  border-bottom: 1px solid var(--border-light) !important;
  margin-bottom: var(--spacing-sm) !important;
}

.modern-dropdown-item {
  padding: var(--spacing-sm) var(--spacing-lg) !important;
  transition: var(--transition-fast) !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  color: var(--text) !important;
}

.modern-dropdown-item:hover {
  background: rgba(33, 150, 243, 0.08) !important;
  color: var(--primary) !important;
  padding-left: calc(var(--spacing-lg) + 4px) !important;
}

.modern-dropdown-item.text-danger:hover {
  background: rgba(244, 67, 54, 0.08) !important;
  color: var(--error) !important;
}

/* Navegación base (compatibilidad) */
.navbar {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  box-shadow: var(--shadow);
  border: none;
}

.navbar-brand {
  font-weight: 600;
  color: var(--text-light) !important;
}

.nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500;
  transition: var(--transition-normal);
}

.nav-link:hover {
  color: var(--text-light) !important;
  transform: translateY(-1px);
}

/* Sidebar básico (compatibilidad) */
.sidebar {
  background: var(--surface);
  box-shadow: var(--shadow);
  border: none;
}

.sidebar-header {
  background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
  color: var(--text-light);
  padding: var(--spacing-lg);
}

.nav-item .nav-link {
  color: var(--text-secondary);
  padding: var(--spacing-sm) var(--spacing-lg);
  margin-bottom: var(--spacing-xs);
  border-radius: var(--border-radius);
  transition: var(--transition-normal);
}

.nav-item .nav-link:hover {
  background-color: rgba(33, 150, 243, 0.08);
  color: var(--primary);
  transform: translateX(4px);
}

.nav-item .nav-link.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--text-light);
}

/* Badges modernos */
.badge {
  border-radius: var(--border-radius);
  font-weight: 500;
  font-size: 0.75rem;
  padding: var(--spacing-xs) var(--spacing-sm);
}

.badge-primary {
  background: var(--primary);
}

.badge-secondary {
  background: var(--secondary);
}

.badge-success {
  background: var(--accent);
}

.badge-warning {
  background: var(--warning);
}

.badge-danger {
  background: var(--error);
}

/* Contenedores y espaciado */
.container-fluid {
  padding: var(--spacing-lg);
}

.fondo_blanco {
  background: var(--surface);
  border-radius: var(--border-radius-large);
  box-shadow: var(--shadow);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
}

/* Utilidades de color */
.text-primary {
  color: var(--primary) !important;
}

.text-secondary {
  color: var(--secondary) !important;
}

.text-success {
  color: var(--accent) !important;
}

.text-warning {
  color: var(--warning) !important;
}

.text-danger {
  color: var(--error) !important;
}

.text-info {
  color: var(--info) !important;
}

.text-muted {
  color: var(--text-secondary) !important;
}

.text-dark {
  color: var(--text) !important;
}

.text-white {
  color: var(--text-light) !important;
}

.bg-primary {
  background-color: var(--primary) !important;
}

.bg-secondary {
  background-color: var(--secondary) !important;
}

.bg-success {
  background-color: var(--accent) !important;
}

.bg-warning {
  background-color: var(--warning) !important;
}

.bg-danger {
  background-color: var(--error) !important;
}

.bg-info {
  background-color: var(--info) !important;
}

.bg-light {
  background-color: var(--background) !important;
}

.bg-white {
  background-color: var(--surface) !important;
}

/* Animaciones globales */
.fade-in {
  animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in {
  animation: slideIn 0.4s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Scrollbar moderno */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--surface-variant);
}

::-webkit-scrollbar-thumb {
  background: var(--purple);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--purple-dark);
}

/* Responsive mejorado */
@media (max-width: 768px) {
  .container-fluid {
    padding: var(--spacing-md);
  }

  .card-body {
    padding: var(--spacing-lg);
  }

  .fondo_blanco {
    padding: var(--spacing-lg);
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.5rem;
  }
}

@media (max-width: 576px) {
  .container-fluid {
    padding: var(--spacing-sm);
  }

  .card-body {
    padding: var(--spacing-md);
  }

  .fondo_blanco {
    padding: var(--spacing-md);
  }
}

/* ====================================
   DASHBOARD Y PÁGINA PRINCIPAL
   ==================================== */

/* Tarjetas de estadísticas/métricas */
.stats-card {
  background: var(--surface);
  border-radius: var(--border-radius-large);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--primary);
  transition: var(--transition-normal);
  height: auto;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: visible;
  position: relative;
  animation: slideInUp 0.6s ease-out;
  animation-fill-mode: both;
}

/* Espaciado interno mejorado para los elementos de la card */
.stats-card .stats-icon {
  margin-bottom: var(--spacing-sm);
  flex-shrink: 0;
}

.stats-card .stats-number {
  margin-bottom: var(--spacing-xs);
  flex-shrink: 0;
  line-height: 1.2;
  /* Mejorar el espaciado de línea */
}

.stats-card .stats-label {
  margin-top: auto;
  /* Empujar el label hacia abajo */
  flex-shrink: 0;
}

/* Asegurar que las columnas no se estiren automáticamente */
.row [class*="col-"] {
  align-self: flex-start;
}

/* Separación adicional para crear espacio entre filas superiores e inferiores */
/* Apuntar a las columnas que contienen las stats-cards */

/* En mobile (col-6 = 2 por fila), separar a partir de la tercera columna */
@media (max-width: 767.98px) {
  .row [class*="col-"]:nth-child(n+3) .stats-card {
    margin-top: var(--spacing-xl) !important;
  }

  /* SOLUCIÓN NUEVA: Contenedor personalizado para móviles */
  body .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 60px !important;
    z-index: 9999 !important;
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Nuestro contenedor personalizado - NO más container-fluid */
  body .header .mobile-header-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 15px !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
    background: var(--surface) !important;
  }

  /* Ajustar wrapper */
  body .wrapper {
    margin-top: 60px !important;
    padding-top: 20px !important;
  }

  /* Botón sidebar en nuestro contenedor - ambos IDs */
  body .header .mobile-header-container #sidebarboton-mobile,
  body .header .container-fluid #sidebarboton-desktop {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 8px !important;
    background: var(--surface-variant) !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
  }

  /* Header nav en nuestro contenedor */
  body .header .mobile-header-container .header-nav {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Asegurar que nav-tabs sean clickeables */
  body .nav-tabs,
  body .nav-tabs .nav-link {
    z-index: 10 !important;
    position: relative !important;
    pointer-events: auto !important;
  }
}

/* En tablet y desktop (col-md-4 = 3 por fila), separar a partir de la cuarta columna */
@media (min-width: 768px) {
  .row [class*="col-"]:nth-child(n+4) .stats-card {
    margin-top: var(--spacing-xxl) !important;
  }
}

.stats-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-strong);
}

.stats-card.stats-primary {
  border-left-color: var(--primary);
}

.stats-card.stats-secondary {
  border-left-color: var(--secondary);
}

.stats-card.stats-success {
  border-left-color: var(--accent);
}

.stats-card.stats-warning {
  border-left-color: var(--warning);
}

.stats-card.stats-danger {
  border-left-color: var(--error);
}

.stats-card .stats-icon {
  font-size: 2.5rem;
  opacity: 0.7;
  margin-bottom: var(--spacing-md);
}

.stats-card .stats-number {
  font-size: 2rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--spacing-xs);
}

.stats-card .stats-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.stats-card .stats-change {
  font-size: 0.75rem;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius);
  margin-top: var(--spacing-sm);
  display: inline-block;
}

.stats-change.positive {
  background-color: rgba(76, 175, 80, 0.1);
  color: var(--accent-dark);
}

.stats-change.negative {
  background-color: rgba(244, 67, 54, 0.1);
  color: #c62828;
}

/* Sección de título con breadcrumb */
.page-header {
  background: var(--surface);
  border-radius: var(--border-radius);
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

.page-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0;
  line-height: 1.3;
}

.page-subtitle {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-bottom: 0;
  line-height: 1.2;
}

.breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 0;
}

.breadcrumb-item {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.breadcrumb-item.active {
  color: var(--primary);
}

.breadcrumb-item+.breadcrumb-item::before {
  color: var(--text-disabled);
}

/* Widgets de contenido */
.content-widget {
  background: var(--surface);
  border-radius: var(--border-radius-large);
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  margin-bottom: var(--spacing-lg);
  overflow: hidden;
}

.content-widget .widget-header {
  background: var(--surface-variant);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border);
}

.content-widget .widget-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

.content-widget .widget-body {
  padding: 0;
}

.content-widget .widget-body>.table-responsive {
  margin: 0;
}

.content-widget .widget-body .table {
  margin-bottom: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

.content-widget .widget-body .table th {
  background: var(--purple);
  color: var(--text-light);
  border: none;
}

.content-widget .widget-body .table-responsive {
  border-radius: 0;
}

.content-widget .widget-body>.table-responsive {
  margin: 0;
}

/* Widget specific table styles */
.content-widget .table-dark th {
  background: var(--purple) !important;
  color: white !important;
  border-color: transparent !important;
}

.content-widget .table tr:last-child td {
  border-bottom: none;
}

.content-widget .alert {
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* Remove extra spacing and shadows in widgets */
.content-widget .widget-body .table-responsive:first-child {
  margin-top: 0;
}

.content-widget .widget-body .table-responsive:last-child {
  margin-bottom: 0;
}

.content-widget .widget-body .alert {
  margin: var(--spacing-lg);
  margin-bottom: 0;
  border-radius: var(--border-radius);
  border-left: 4px solid;
}

.content-widget .widget-body .alert-warning {
  border-left-color: var(--warning);
}

.content-widget .widget-body .alert-success {
  border-left-color: var(--success);
}

.content-widget .widget-body .alert-danger {
  border-left-color: var(--error);
}

.content-widget .widget-body .alert-info {
  border-left-color: var(--info);
}

.content-widget .widget-body>*:not(.table-responsive):not(.alert) {
  padding: var(--spacing-xl);
}

.content-widget .widget-footer {
  background: var(--surface-variant);
  padding: var(--spacing-md) var(--spacing-xl);
  border-top: 1px solid var(--border);
  text-align: right;
}

/* Lista de elementos */
.item-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.item-list .item {
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--border-light);
  transition: var(--transition-normal);
}

.item-list .item:last-child {
  border-bottom: none;
}

.item-list .item:hover {
  background-color: rgba(33, 150, 243, 0.04);
  padding-left: var(--spacing-sm);
}

.item-list .item-title {
  font-weight: 500;
  color: var(--text);
}

.item-list .item-meta {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Toolbar de acciones */
.action-toolbar {
  background: var(--surface);
  border-radius: var(--border-radius);
  padding: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.action-toolbar .toolbar-title {
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

.action-toolbar .toolbar-actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

/* Filtros y búsqueda */
.search-filters {
  background: var(--surface);
  border-radius: var(--border-radius-large);
  padding: var(--spacing-lg);
}

.search-filters.u-mb-lg {
  box-shadow: var(--shadow-light);
}

.search-filters .filter-row {
  margin-bottom: var(--spacing-md);
}

.search-filters .filter-row:last-child {
  margin-bottom: 0;
}

/* Indicadores de estado */
.status-indicator {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-indicator::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: var(--spacing-xs);
}

.status-indicator.status-active {
  background-color: rgba(76, 175, 80, 0.1);
  color: var(--accent-dark);
}

.status-indicator.status-active::before {
  background-color: var(--accent);
}

.status-indicator.status-pending {
  background-color: rgba(255, 152, 0, 0.1);
  color: #e65100;
}

.status-indicator.status-pending::before {
  background-color: var(--warning);
}

.status-indicator.status-inactive {
  background-color: rgba(244, 67, 54, 0.1);
  color: #c62828;
}

.status-indicator.status-inactive::before {
  background-color: var(--error);
}

.status-indicator.status-processing {
  background-color: rgba(33, 150, 243, 0.1);
  color: var(--primary-dark);
}

.status-indicator.status-processing::before {
  background-color: var(--primary);
}

/* Notificaciones y toasts */
.notification {
  background: var(--surface);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border-left: 4px solid var(--primary);
  position: relative;
  max-width: 90vw !important;
  width: auto !important;
  height: auto !important;
  min-height: unset !important;
  display: block !important;
}

/* Corrección específica para toasts en móviles */
@media (max-width: 768px) {
  .notification {
    min-width: unset !important;
    max-width: calc(100vw - 20px) !important;
    width: auto !important;
    height: auto !important;
    min-height: unset !important;
    max-height: 80px !important;
    margin: 10px !important;
    padding: 0.6rem 0.75rem 0.6rem 0.75rem !important;
    font-size: 0.85rem !important;
    line-height: 1.1 !important;
    display: block !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .notification.position-fixed {
    top: 10px !important;
    right: 10px !important;
    min-width: unset !important;
    max-width: calc(100vw - 20px) !important;
    width: auto !important;
    height: auto !important;
    min-height: unset !important;
    max-height: 80px !important;
    position: fixed !important;
    display: block !important;
    padding: 0.6rem 0.75rem 0.6rem 0.75rem !important;
    box-sizing: border-box !important;
  }

  .notification .d-flex {
    flex-wrap: nowrap !important;
    height: auto !important;
    min-height: unset !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.1 !important;
  }

  .notification .d-flex .bi {
    margin-right: 0.5rem !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
  }

  .notification span {
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: unset !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    display: inline !important;
  }

  .notification .notification-close {
    padding: 0.2rem !important;
    margin: 0 0 0 0.5rem !important;
    width: auto !important;
    height: auto !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .notification .notification-close .bi {
    font-size: 0.9rem !important;
    margin: 0 !important;
  }
}

.notification.notification-success {
  border-left-color: var(--accent);
}

.notification.notification-warning {
  border-left-color: var(--warning);
}

.notification.notification-error {
  border-left-color: var(--error);
}

.notification .notification-close {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--border-radius);
  transition: var(--transition-fast);
}

.notification .notification-close:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: var(--text);
}

/* Progress bars */
.progress {
  background-color: var(--surface-variant);
  border-radius: var(--border-radius);
  overflow: hidden;
  height: 8px;
}

.progress-bar {
  background: var(--primary);
  height: 100%;
  transition: width var(--transition-slow);
  border-radius: var(--border-radius);
}

.progress-bar.progress-success {
  background: var(--success);
}

.progress-bar.progress-warning {
  background: var(--warning);
}

.progress-bar.progress-danger {
  background: var(--error);
}

/* Tooltips mejorados */
.tooltip {
  font-size: 0.875rem;
  z-index: 1080;
}

.tooltip-inner {
  background-color: rgba(33, 37, 41, 0.95);
  border-radius: var(--border-radius);
  padding: var(--spacing-sm) var(--spacing-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-weight: 500;
  max-width: 200px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.custom-tooltip .tooltip-inner {
  background: var(--surface-variant);
  color: var(--text);
  font-size: 0.8rem;
  border-radius: 6px;
  padding: 8px 12px;
  box-shadow: var(--shadow-strong);
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: rgba(33, 37, 41, 0.95);
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: rgba(33, 37, 41, 0.95);
}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: rgba(33, 37, 41, 0.95);
}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: rgba(33, 37, 41, 0.95);
}

/* Modales modernos */
.modal-content {
  border: none;
  border-radius: var(--border-radius-large);
  box-shadow: var(--shadow-strong);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
}

.modal-header {
  background: var(--surface-variant);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
}

.modal-header .btn-close {
  filter: invert(1);
}

.modal-body {
  padding: var(--spacing-xl);
}

.modal-footer {
  border-top: 1px solid var(--border-light);
  padding: var(--spacing-lg) var(--spacing-xl);
}

/* ====================================
   COMPONENTES DE DATOS Y LABORATORIO
   ==================================== */

/* Tarjetas de pacientes/resultados */
.patient-card,
.result-card {
  background: var(--surface);
  border-radius: var(--border-radius-large);
  box-shadow: var(--shadow);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  border-left: 4px solid var(--primary);
  transition: var(--transition-normal);
}

.patient-card:hover,
.result-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}

.patient-card .patient-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

.patient-card .patient-name {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

.patient-card .patient-id {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
}

.patient-card .patient-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.patient-card .meta-item {
  font-size: 0.875rem;
}

.patient-card .meta-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.patient-card .meta-value {
  color: var(--text);
  margin-left: var(--spacing-xs);
}

/* Tabla de exámenes/resultados */
.examenes-table {
  background: var(--surface);
  border-radius: var(--border-radius-large);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.examenes-table .table {
  margin-bottom: 0;
}

.examenes-table .table thead th {
  background: var(--surface-variant);
  color: var(--text-secondary);
  font-weight: 600;
  border: none;
  border-bottom: 2px solid var(--border);
  padding: var(--spacing-md) var(--spacing-lg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}

.examenes-table .table tbody tr {
  transition: var(--transition-fast);
}

.examenes-table .table tbody tr:hover {
  background-color: rgba(33, 150, 243, 0.04);
}

.examenes-table .table td {
  padding: var(--spacing-md) var(--spacing-lg);
  border-color: var(--border-light);
  vertical-align: middle;
}

/* Valores de referencia */
.valor-referencia {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-style: italic;
}

.valor-normal {
  color: var(--accent);
  font-weight: 500;
}

.valor-alto {
  color: var(--error);
  font-weight: 500;
}

.valor-bajo {
  color: var(--warning);
  font-weight: 500;
}

/* Gráficos y visualizaciones */
.chart-container {
  background: var(--surface);
  border-radius: var(--border-radius-large);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow);
  margin-bottom: var(--spacing-lg);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
}

.chart-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

.chart-actions {
  display: flex;
  gap: var(--spacing-sm);
}

/* Formularios de laboratorio */
.lab-form {
  background: var(--surface);
  border-radius: var(--border-radius-large);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.lab-form .form-section {
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
}

.lab-form .form-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.lab-form .section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--border);
}

/* Selector de fechas mejorado */
.date-picker-container {
  position: relative;
}

.date-picker-container .form-control {
  padding-right: 40px;
}

.date-picker-container .date-icon {
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
}

/* Campos de búsqueda con autocompletado */
.autocomplete-container {
  position: relative;
}

.autocomplete-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  box-shadow: var(--shadow);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
}

.autocomplete-results .autocomplete-item {
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  transition: var(--transition-fast);
  border-bottom: 1px solid var(--border-light);
}

.autocomplete-results .autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-results .autocomplete-item:hover,
.autocomplete-results .autocomplete-item.highlighted {
  background-color: rgba(33, 150, 243, 0.08);
  color: var(--primary);
}

/* Tags y etiquetas */
.tag,
.badge-custom {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(33, 150, 243, 0.1);
  color: var(--primary);
  border-radius: var(--border-radius);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.tag.tag-success {
  background: rgba(76, 175, 80, 0.1);
  color: var(--accent-dark);
}

.tag.tag-warning {
  background: rgba(255, 152, 0, 0.1);
  color: #e65100;
}

.tag.tag-danger {
  background: rgba(244, 67, 54, 0.1);
  color: #c62828;
}

.tag.tag-removable {
  padding-right: var(--spacing-xs);
}

.tag .tag-remove {
  margin-left: var(--spacing-xs);
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0;
  opacity: 0.7;
  transition: var(--transition-fast);
}

.tag .tag-remove:hover {
  opacity: 1;
}

/* Timeline de actividades */
.activity-timeline {
  position: relative;
  padding-left: var(--spacing-xl);
}

.activity-timeline::before {
  content: '';
  position: absolute;
  left: var(--spacing-md);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-light);
}

.timeline-item {
  position: relative;
  padding-bottom: var(--spacing-lg);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--spacing-xl) + var(--spacing-md) - 6px);
  top: var(--spacing-xs);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px var(--border-light);
}

.timeline-item.timeline-success::before {
  background: var(--accent);
}

.timeline-item.timeline-warning::before {
  background: var(--warning);
}

.timeline-item.timeline-danger::before {
  background: var(--error);
}

.timeline-content {
  background: var(--surface);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-light);
  border: 1px solid var(--border-light);
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-sm);
}

.timeline-title {
  font-weight: 500;
  color: var(--text);
  margin: 0;
  font-size: 0.875rem;
}

.timeline-time {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.timeline-description {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin: 0;
}

/* Paneles desplegables (acordeón) */
.accordion-item {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius) !important;
  margin-bottom: var(--spacing-sm);
  overflow: hidden;
}

.accordion-item:last-child {
  margin-bottom: 0;
}

.accordion-header {
  margin-bottom: 0;
}

.accordion-button {
  background: linear-gradient(135deg, var(--surface-variant) 0%, rgba(33, 150, 243, 0.04) 100%);
  color: var(--text);
  border: none;
  padding: var(--spacing-lg);
  font-weight: 500;
  transition: var(--transition-normal);
}

.accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--text-light);
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.25);
}

.accordion-body {
  padding: var(--spacing-lg);
  background: var(--surface);
}

/* Selectores múltiples personalizados */
.multi-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  min-height: 38px;
  padding: var(--spacing-xs);
  cursor: pointer;
  transition: var(--transition-fast);
}

.multi-select:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.25);
}

.multi-select .selected-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  min-height: 24px;
  align-items: center;
}

.multi-select .placeholder {
  color: var(--text-secondary);
  font-size: 0.875rem;
  padding: var(--spacing-xs);
}

/* Archivo de importación/exportación */
.file-upload-area {
  border: 2px dashed var(--border);
  border-radius: var(--border-radius-large);
  padding: var(--spacing-xl);
  text-align: center;
  transition: var(--transition-normal);
  cursor: pointer;
  background: var(--surface-variant);
}

.file-upload-area:hover,
.file-upload-area.dragover {
  border-color: var(--primary);
  background: rgba(33, 150, 243, 0.04);
}

.file-upload-area .upload-icon {
  font-size: 3rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

.file-upload-area .upload-text {
  color: var(--text);
  font-weight: 500;
  margin-bottom: var(--spacing-sm);
}

.file-upload-area .upload-hint {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.file-list {
  margin-top: var(--spacing-md);
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm);
  background: var(--surface);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-xs);
  border: 1px solid var(--border-light);
}

.file-item .file-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.file-item .file-name {
  font-weight: 500;
  color: var(--text);
}

.file-item .file-size {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.file-item .file-actions {
  display: flex;
  gap: var(--spacing-xs);
}

/* ====================================
   ANIMACIONES Y EFECTOS MODERNOS
   ==================================== */

/* Animación de pulso para botones importantes */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(33, 150, 243, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);
  }
}

.btn-pulse {
  animation: pulse 2s infinite;
}

/* Animación de slide para elementos */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Aplicar animaciones a elementos del dashboard */

.stats-card:nth-child(1) {
  animation-delay: 0.1s;
}

.stats-card:nth-child(2) {
  animation-delay: 0.2s;
}

.stats-card:nth-child(3) {
  animation-delay: 0.3s;
}

.stats-card:nth-child(4) {
  animation-delay: 0.4s;
}

.stats-card:nth-child(5) {
  animation-delay: 0.5s;
}

.stats-card:nth-child(6) {
  animation-delay: 0.6s;
}

.page-header {
  animation: slideInLeft 0.8s ease-out;
}

.content-widget {
  animation: fadeIn 1s ease-out;
  animation-fill-mode: both;
}

.action-toolbar {
  animation: slideInUp 0.7s ease-out;
  animation-delay: 0.3s;
  animation-fill-mode: both;
}

/* Efectos hover mejorados */

.stats-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.8s ease;
}

.stats-card:hover::before {
  left: 100%;
}

/* Loading spinner moderno */
.spinner-border {
  animation: spin 0.75s linear infinite;
  color: var(--primary);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading-shimmer {
  background: linear-gradient(90deg, var(--surface-variant) 25%, var(--border-light) 50%, var(--surface-variant) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* Microinteracciones */
.btn,
.form-control,
.card {
  transition: all var(--transition-normal);
}

.btn:active {
  transform: scale(0.98);
}

.form-control:focus {
  transform: translateY(-1px);
}

/* Scroll suave */
html {
  scroll-behavior: smooth;
}

/* Estados de carga mejorados */
.loading-state {
  position: relative;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-variant);
  border-radius: var(--border-radius-large);
}

.loading-state::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--loading-shimmer);
  border-radius: inherit;
  opacity: 0.5;
}

/* Responsive animations */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Indicadores de estado con animación */
.status-indicator {
  animation: fadeIn 0.5s ease-out;
}

.status-indicator.status-processing {
  animation: pulse 2s infinite;
}

/* Tooltips animados */
.tooltip {
  animation: fadeIn 0.2s ease-out;
}

/* Efectos de foco mejorados */
.btn:focus-visible,
.form-control:focus,
.nav-link:focus-visible {
  outline: 2px solid rgba(33, 150, 243, 0.5);
  outline-offset: 2px;
}

/* Efectos de hover para tarjetas */
.content-widget:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}

/* Animación para notificaciones */
.notification {
  animation: slideInLeft 0.3s ease-out;
}

.notification.removing {
  animation: slideInLeft 0.3s ease-out reverse;
}

/* ====================================
   RESPONSIVE DESIGN
   ==================================== */

/* Tablets */
@media (max-width: 768px) {
  .container-fluid {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  .stats-card .stats-number {
    font-size: 1.5rem;
  }

  .page-title {
    font-size: 1.5rem;
  }

  /* Deshabilitar animación en móvil para evitar problemas visuales */
  .content-widget {
    animation: none !important;
    opacity: 1 !important;
  }

  /* Eliminar bordes extra del table-responsive en móvil */
  .content-widget .table-responsive {
    border: none !important;
    box-shadow: none !important;
  }

  /* Mantener el mismo padding de desktop en table headers */
  .table th {
    padding: var(--spacing-lg) !important;
    font-size: 0.875rem !important;
  }

  .lab-form {
    padding: var(--spacing-lg);
  }

  .action-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar-actions {
    justify-content: center;
  }

  .patient-card .patient-meta {
    grid-template-columns: 1fr;
  }

  .examenes-table .table td {
    padding: var(--spacing-sm);
    font-size: 0.875rem;
  }
}

/* Móviles */
@media (max-width: 576px) {
  :root {
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
  }

  .container-fluid {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }

  .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
  }

  .btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.75rem;
  }

  .form-control,
  .form-select {
    padding: var(--spacing-sm);
    font-size: 16px;
    /* Previene zoom en iOS */
  }

  .stats-card {
    padding: var(--spacing-lg);
  }

  .stats-card .stats-number {
    font-size: 1.25rem;
  }

  .stats-card .stats-icon {
    font-size: 2rem;
  }

  .page-title {
    font-size: 1.25rem;
  }

  .lab-form {
    padding: var(--spacing-md);
  }

  .lab-form .section-title {
    font-size: 1rem;
  }

  .patient-card {
    padding: var(--spacing-md);
  }

  .patient-card .patient-name {
    font-size: 1rem;
  }

  .examenes-table .table thead th {
    font-size: 0.75rem;
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .examenes-table .table td {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.75rem;
  }

  .timeline-item {
    padding-left: var(--spacing-md);
  }

  .activity-timeline {
    padding-left: var(--spacing-lg);
  }

  .file-upload-area {
    padding: var(--spacing-lg);
  }

  .file-upload-area .upload-icon {
    font-size: 2rem;
  }

  .modal-body {
    padding: var(--spacing-lg);
  }

  .modal-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .modal-footer .btn {
    width: 100%;
  }

  /* Ocultar elementos no esenciales en móvil */
  .d-none-mobile {
    display: none !important;
  }

  /* Hacer tablas responsive */
  .table-responsive {
    font-size: 0.875rem;
  }

  .table-responsive .table td {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
    max-width: 150px;
    word-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    line-height: 1.4 !important;
  }
}

/* ====================================
   UTILIDADES Y CLASES DE AYUDA
   ==================================== */

/* Logo responsivo - clase de utilidad */
.logo-sidebar {
  max-height: 35px !important;
  max-width: 150px !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Espaciado */
.m-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

/* Colores de texto */
.text-primary {
  color: var(--primary) !important;
}

.text-secondary {
  color: var(--secondary) !important;
}

.text-accent {
  color: var(--accent) !important;
}

.text-warning {
  color: var(--warning) !important;
}

.text-error {
  color: var(--error) !important;
}

.text-light {
  color: var(--text-light) !important;
}

.text-muted {
  color: var(--text-secondary) !important;
}

.text-dark {
  color: var(--text) !important;
}

.text-white {
  color: var(--text-light) !important;
}

/* Fondos */
.bg-primary {
  background-color: var(--primary) !important;
}

.bg-secondary {
  background-color: var(--secondary) !important;
}

.bg-accent {
  background-color: var(--accent) !important;
}

.bg-warning {
  background-color: var(--warning) !important;
}

.bg-error {
  background-color: var(--error) !important;
}

.bg-surface {
  background-color: var(--surface) !important;
}

.bg-surface-variant {
  background-color: var(--surface-variant) !important;
}

.bg-light {
  background-color: var(--background) !important;
}

.bg-white {
  background-color: var(--surface) !important;
}

/* Bordes */
.border-primary {
  border-color: var(--primary) !important;
}

.border-secondary {
  border-color: var(--secondary) !important;
}

.border-accent {
  border-color: var(--accent) !important;
}

.border-light {
  border-color: var(--border-light) !important;
}

/* Sombras */
.shadow-light {
  box-shadow: var(--shadow-light) !important;
}

.shadow-normal {
  box-shadow: var(--shadow) !important;
}

.shadow-strong {
  box-shadow: var(--shadow-strong) !important;
}

.shadow-none {
  box-shadow: none !important;
}

/* Tipografía */
.font-weight-light {
  font-weight: 300 !important;
}

.font-weight-normal {
  font-weight: 400 !important;
}

.font-weight-medium {
  font-weight: 500 !important;
}

.font-weight-bold {
  font-weight: 600 !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

/* Display */
.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-block {
  display: block !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-none {
  display: none !important;
}

/* Flexbox */
.flex-column {
  flex-direction: column !important;
}

.flex-row {
  flex-direction: row !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-end {
  align-items: flex-end !important;
}

/* Posición */
.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: sticky !important;
}

/* Overflow */
.overflow-hidden {
  overflow: hidden !important;
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-scroll {
  overflow: scroll !important;
}

/* Text wrapping utilities */
.u-text-wrap {
  white-space: normal !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto !important;
  overflow-wrap: break-word !important;
}

.u-text-nowrap {
  white-space: nowrap !important;
}

.u-text-ellipsis {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Tamaños */
.w-100 {
  width: 100% !important;
}

.w-75 {
  width: 75% !important;
}

.w-50 {
  width: 50% !important;
}

.w-25 {
  width: 25% !important;
}

.w-auto {
  width: auto !important;
}

.h-100 {
  height: 100% !important;
}

.h-75 {
  height: 75% !important;
}

.h-50 {
  height: 50% !important;
}

.h-25 {
  height: 25% !important;
}

.h-auto {
  height: auto !important;
}

/* Radius */
.rounded {
  border-radius: var(--border-radius) !important;
}

.rounded-lg {
  border-radius: var(--border-radius-large) !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

/* Cursor */
.cursor-pointer {
  cursor: pointer !important;
}

.cursor-move {
  cursor: move !important;
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}

/* Opacidad */
.opacity-0 {
  opacity: 0 !important;
}

.opacity-25 {
  opacity: 0.25 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

/* Transiciones */
.transition-fast {
  transition: all var(--transition-fast) !important;
}

.transition-normal {
  transition: all var(--transition-normal) !important;
}

.transition-slow {
  transition: all var(--transition-slow) !important;
}

/* ====================================
   PRINT STYLES
   ==================================== */

@media print {
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }

  .no-print {
    display: none !important;
  }

  .page-header,
  .content-widget,
  .lab-form {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }

  .btn {
    display: none !important;
  }

  .table {
    border-collapse: collapse !important;
  }

  .table th,
  .table td {
    border: 1px solid #ddd !important;
  }
}

/* ====================================
   DARK MODE SUPPORT (Futuro)
   ==================================== */

@media (prefers-color-scheme: dark) {
  .auto-dark {
    --background: #1a1a1a;
    --surface: #2d2d2d;
    --surface-variant: #404040;
    --text: #ffffff;
    --text-secondary: #b3b3b3;
    --text-disabled: #666666;
    --border: #404040;
    --border-light: #333333;
  }
}

/* ====================================
   PÁGINA REINICIAR CONTRASEÑA - MODERNA
   ==================================== */

/* Estilos específicos para la página de reiniciar contraseña */
.reset-password-wrapper {
  min-height: 100vh;
  background: linear-gradient(135deg, #26a69a 0%, #00695c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

.reset-password-wrapper .container-fluid {
  max-width: 1200px;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  margin: 2rem auto;
  min-height: 600px;
}

.reset-left-panel {
  background: linear-gradient(135deg, #26a69a 0%, #004d40 100%);
  color: white;
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
  min-height: 600px;
}

.reset-left-panel::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 20%, transparent 20%);
  background-size: 30px 30px;
  animation: float 20s infinite linear;
}

@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  100% {
    transform: translateY(-30px) rotate(360deg);
  }
}

.reset-logo-container {
  position: relative;
  z-index: 2;
  margin-bottom: 2rem;
}

.img-full-width {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

.reset-logo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  object-fit: contain;
  padding: 10px;
  margin: 0 auto;
  display: block;
}

.reset-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
}

.reset-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  line-height: 1.6;
  position: relative;
  z-index: 2;
  max-width: 400px;
  margin: 0 auto;
}

.reset-form-panel {
  padding: 3rem 2rem;
  background: var(--surface);
  min-height: 600px;
}

.reset-form-container {
  max-width: 400px;
  margin: 0 auto;
}

.reset-form-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
  text-align: center;
}

.reset-form-description {
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 2rem;
  line-height: 1.5;
}

.reset-input-field {
  position: relative;
  margin-bottom: 2rem;
}

.reset-input-field input {
  width: 100%;
  padding: 1rem;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: 1rem;
  background: var(--surface-variant);
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.reset-input-field input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.1);
}

.reset-input-field label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 1rem;
  color: var(--text-secondary);
  pointer-events: none;
  transition: all 0.3s ease;
  background: var(--surface-variant);
  padding: 0 0.5rem;
  margin-left: -0.5rem;
}

.reset-input-field input:focus+label,
.reset-input-field input:not(:placeholder-shown)+label {
  top: -0.5rem;
  left: 0.5rem;
  font-size: 0.85rem;
  color: var(--secondary);
  background: var(--surface);
}

.password-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #bdc3c7;
  font-size: 1.2rem;
}

.btn-reset {
  background: linear-gradient(135deg, #26a69a 0%, #00695c 100%);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  margin-top: 1rem;
  position: relative;
  overflow: hidden;
}

.btn-reset::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-reset:hover::before {
  left: 100%;
}

.btn-reset:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(38, 166, 154, 0.3);
}

.btn-reset:active {
  transform: translateY(0);
}

.security-notice {
  background: #e8f5e8;
  border-left: 4px solid #4caf50;
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: #2e7d32;
}

.security-icon {
  color: #4caf50;
  margin-right: 0.5rem;
}

/* Responsive design para reset password */
@media (max-width: 768px) {
  .reset-password-wrapper .container-fluid {
    margin: 1rem;
    border-radius: 15px;
    min-height: auto;
  }

  .reset-left-panel,
  .reset-form-panel {
    padding: 2rem 1.5rem;
    min-height: auto;
  }

  .reset-left-panel {
    text-align: center;
  }

  .reset-title {
    font-size: 1.8rem;
  }

  .reset-logo {
    width: 80px;
    height: 80px;
  }

  .reset-form-container {
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .reset-password-wrapper {
    padding: 1rem 0.5rem;
  }

  .reset-password-wrapper .container-fluid {
    margin: 0.5rem;
  }

  .reset-left-panel,
  .reset-form-panel {
    padding: 1.5rem 1rem;
  }

  .reset-title {
    font-size: 1.6rem;
  }

  .reset-subtitle {
    font-size: 1rem;
  }
}

/* Loading animation */
.loading {
  pointer-events: none;
  opacity: 0.7;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid white;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Estados de validación para inputs */
.input-valid {
  border-color: #4caf50 !important;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1) !important;
}

.input-invalid {
  border-color: #f44336 !important;
  box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1) !important;
}

.input-neutral {
  border-color: #e0e0e0 !important;
  box-shadow: none !important;
}

/* Estados del botón */
.btn-enabled {
  opacity: 1 !important;
  cursor: pointer !important;
}

.btn-disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* Iconos con colores específicos */
.icon-teal {
  color: #26a69a !important;
}

.icon-large {
  font-size: 1.5rem !important;
}

/* Indicadores de fortaleza de contraseña */
.strength-very-weak {
  color: #f44336 !important;
}

.strength-weak {
  color: #ff9800 !important;
}

.strength-regular {
  color: #ffc107 !important;
}

.strength-good {
  color: #4caf50 !important;
}

.strength-very-strong {
  color: #2e7d32 !important;
}

/* ====================================
   PÁGINA LOGIN - MODERNA Y MINIMALISTA
   ==================================== */

/* Login wrapper principal */
.modern-login-wrapper {
  min-height: 100vh;
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  position: relative;
  overflow: hidden;
}

/* Patrón de fondo sutil */
.login-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.03) 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.03) 2px, transparent 2px);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
}

/* Contenedor principal del login */
.login-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 420px;
  padding: 2rem;
}

/* Tarjeta principal */
.login-card {
  background: var(--surface);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 3rem 2.5rem;
  box-shadow: var(--shadow-strong);
  border: 1px solid var(--border);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.5), transparent);
}

/* Header del login */
.login-header {
  margin-bottom: 2.5rem;
}

.login-logo-wrapper {
  margin-bottom: 1.5rem;
}

.login-logo-modern {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: contain;
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 16px;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.login-brand {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.5px;
}

.login-tagline {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin: 0;
  font-weight: 400;
}

/* Wrapper del formulario */
.login-form-wrapper {
  margin-bottom: 2rem;
}

/* Grupos de input modernos */
.input-group-modern {
  position: relative;
  margin-bottom: 1.5rem;
}

.input-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-disabled);
  font-size: 1.1rem;
  z-index: 2;
  transition: color 0.3s ease;
}

.form-input-modern {
  width: 100%;
  padding: 1rem 1rem 1rem 3rem;
  border: 2px solid var(--border);
  border-radius: 16px;
  font-size: 1rem;
  background: var(--surface-variant) !important;
  transition: all 0.3s ease;
  color: var(--text) !important;
  box-sizing: border-box;
}

/* Fix para autofill del navegador */
.form-input-modern:-webkit-autofill,
.form-input-modern:-webkit-autofill:hover,
.form-input-modern:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--surface-variant) inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

.form-input-modern::placeholder {
  color: var(--text-disabled);
  opacity: 0.6;
  font-weight: 400;
}

.form-input-modern:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface) !important;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}

.form-input-modern:focus+.input-icon {
  color: #667eea;
}

/* Botón de login moderno */
.btn-login-modern {
  width: 100%;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 16px;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.btn-login-modern:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(102, 126, 234, 0.4);
}

.btn-login-modern:active:not(:disabled) {
  transform: translateY(0);
}

.btn-login-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.btn-login-modern:hover::before {
  left: 100%;
}

.btn-text {
  font-weight: 600;
}

.btn-icon {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.btn-login-modern:hover .btn-icon {
  transform: translateX(4px);
}

/* Footer del login */
.login-footer {
  margin-bottom: 2rem;
}

.forgot-password-link {
  color: #667eea;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-block;
}

.forgot-password-link:hover {
  color: #5a67d8;
  transform: translateY(-1px);
}

/* Información adicional */
.login-info {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid #e2e8f0;
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  color: #718096;
  font-size: 0.85rem;
}

.info-item i {
  font-size: 1.2rem;
  color: #667eea;
}

.info-item span {
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}

/* Estados de validación */
.form-input-modern.valid {
  border-color: #48bb78;
  background: rgba(72, 187, 120, 0.1) !important;
  transform: none;
}

.form-input-modern.valid+.input-icon {
  color: #48bb78;
}

.form-input-modern.invalid {
  border-color: #f56565;
  background: rgba(245, 101, 101, 0.1) !important;
  animation: shake 0.5s ease-in-out;
}

.form-input-modern.invalid+.input-icon {
  color: #f56565;
}

.form-input-modern.input-neutral {
  border-color: var(--border);
  background: var(--surface-variant) !important;
}

/* Medidor de fortaleza de contraseña */
.password-strength-meter {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.strength-very-weak {
  background: rgba(245, 101, 101, 0.1);
  color: #f56565;
  border-color: rgba(245, 101, 101, 0.2);
}

.strength-weak {
  background: rgba(237, 137, 54, 0.1);
  color: #ed8936;
  border-color: rgba(237, 137, 54, 0.2);
}

.strength-regular {
  background: rgba(236, 201, 75, 0.1);
  color: #ecc94b;
  border-color: rgba(236, 201, 75, 0.2);
}

.strength-good {
  background: rgba(72, 187, 120, 0.1);
  color: #48bb78;
  border-color: rgba(72, 187, 120, 0.2);
}

.strength-very-strong {
  background: rgba(56, 178, 172, 0.1);
  color: #38b2ac;
  border-color: rgba(56, 178, 172, 0.2);
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .login-container {
    padding: 1rem;
    max-width: 100%;
  }

  .login-card {
    padding: 2rem 1.5rem;
    border-radius: 20px;
  }

  .login-brand {
    font-size: 1.6rem;
  }

  .login-logo-modern {
    width: 70px;
    height: 70px;
  }

  .login-info {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

  .info-item {
    flex-direction: row;
    justify-content: center;
    gap: 0.75rem;
  }
}

@media (max-width: 480px) {
  .modern-login-wrapper {
    padding: 1rem 0.5rem;
  }

  .login-card {
    padding: 1.5rem 1rem;
  }

  .login-brand {
    font-size: 1.4rem;
  }

  .login-tagline {
    font-size: 0.9rem;
  }

  .form-input-modern {
    padding: 0.875rem 0.875rem 0.875rem 2.75rem;
  }

  .btn-login-modern {
    padding: 0.875rem 1.25rem;
  }
}

/* Animaciones */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

.login-card {
  animation: fadeInUp 0.6s ease-out;
}

.login-header {
  animation: slideInFromLeft 0.8s ease-out 0.2s both;
}

.login-form-wrapper {
  animation: slideInFromLeft 0.8s ease-out 0.4s both;
}

.login-info {
  animation: slideInFromLeft 0.8s ease-out 0.6s both;
}

.login-logo-modern {
  transition: transform 0.3s ease;
}

.login-logo-modern:hover {
  transform: scale(1.05);
}

/* Efecto de foco mejorado */
.form-input-modern:focus {
  outline: 2px solid #667eea;
  outline-offset: 2px;
  transform: scale(1.02);
}

.btn-login-modern:focus {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

.forgot-password-link:focus {
  outline: 2px solid #667eea;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Estados adicionales del botón */
.btn-login-modern:disabled,
.btn-login-modern.btn-disabled {
  background: linear-gradient(135deg, #a0aec0 0%, #718096 100%);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-login-modern:disabled:hover,
.btn-login-modern.btn-disabled:hover {
  transform: none;
  box-shadow: none;
}

.btn-login-modern.loading {
  pointer-events: none;
}

.btn-login-modern.loading .btn-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ====================================
   MODALES MODERNOS
   ==================================== */

/* Modal moderno con bordes redondeados */
.modern-modal {
  border: none;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.modern-modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-bottom: none;
  padding: 1.5rem 2rem;
  border-radius: 20px 20px 0 0;
}

.modern-modal-header .modal-title {
  font-weight: 600;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
}

.modern-modal-header .btn-close {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 35px;
  height: 35px;
  opacity: 1;
  filter: none;
  transition: all 0.3s ease;
}

.modern-modal-header .btn-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.modern-modal-header .btn-close::before {
  content: "×";
  font-size: 1.5rem;
  color: white;
  font-weight: 300;
}

.modern-modal-body {
  padding: 2rem;
  background: #ffffff;
  border-radius: 0 0 20px 20px;
}

/* Configuración de altura y scroll para modales */
.modal-dialog {
  max-height: 90vh;
  margin: 1rem auto;
  display: flex;
  align-items: center;
}

.modal-dialog .modal-content {
  max-height: 90vh;
  overflow-y: auto;
}

/* Animación de entrada del modal */
.modal.fade .modal-dialog {
  transform: scale(0.8) translateY(-50px);
  transition: all 0.3s ease-out;
}

.modal.show .modal-dialog {
  transform: scale(1) translateY(0);
}

/* Backdrop del modal */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}

/* Formularios dentro del modal */
.modern-modal .form-control {
  border: 2px solid var(--border);
  border-radius: var(--border-radius);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 1rem;
  transition: var(--transition-normal);
  background: var(--surface);
  color: var(--text);
}

.modern-modal .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
  background: var(--surface);
  outline: none;
}

/* Form-select específicos para modern-modal */
.modern-modal .form-select {
  border: 2px solid var(--border) !important;
  border-radius: var(--border-radius) !important;
  padding: var(--spacing-sm) var(--spacing-md) !important;
  padding-right: calc(var(--spacing-md) + 24px) !important;
  font-size: 1rem !important;
  transition: var(--transition-normal) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23757575' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right var(--spacing-sm) center !important;
  background-size: 16px 12px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.modern-modal .form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232196f3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  outline: none !important;
}

.modern-modal .form-label {
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.modern-modal .btn {
  border-radius: 12px;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  transition: all 0.3s ease;
}

.modern-modal .btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.modern-modal .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.modern-modal .btn-secondary {
  background: #6c757d;
  border: none;
}

.modern-modal .btn-secondary:hover {
  background: #5a6268;
  transform: translateY(-1px);
}

/* Estados de carga en el modal */
.modern-modal .loading {
  pointer-events: none;
  opacity: 0.8;
}

.modern-modal .loading .spinner-border {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}

/* Responsive para modales */
@media (max-width: 768px) {
  .modern-modal {
    border-radius: 15px;
    margin: 1rem;
  }

  .modern-modal-header {
    padding: 1.25rem 1.5rem;
    border-radius: 15px 15px 0 0;
  }

  .modern-modal-body {
    padding: 1.5rem;
    border-radius: 0 0 15px 15px;
  }

  .modal-dialog {
    margin: 1rem;
    max-height: 90vh;
  }

  .modal-dialog .modal-content {
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* Estados de validación en formularios de modal */
.modern-modal .form-control.is-valid {
  border-color: #48bb78;
  background-color: #f0fff4;
  box-shadow: 0 0 0 4px rgba(72, 187, 120, 0.1);
}

.modern-modal .form-control.is-invalid {
  border-color: #f56565;
  background-color: #fff5f5;
  box-shadow: 0 0 0 4px rgba(245, 101, 101, 0.1);
}

.modern-modal .form-control.is-valid:focus {
  border-color: #48bb78;
  box-shadow: 0 0 0 4px rgba(72, 187, 120, 0.2);
}

.modern-modal .form-control.is-invalid:focus {
  border-color: #f56565;
  box-shadow: 0 0 0 4px rgba(245, 101, 101, 0.2);
}

/* Iconos de validación */
.modern-modal .form-control.is-valid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2348bb78' d='m2.3 6.73.94-.94 2.94-2.94L6.85 2.2 3.24 5.81l-1.64-1.64-.96.96z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
  padding-right: 3rem;
}

.modern-modal .form-control.is-invalid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23f56565'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6 2.4 2.4M8.2 4.6l-2.4 2.4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
  padding-right: 3rem;
}

/* Efectos adicionales CoreUI */
.coreui-modal-header .modal-title .icon,
.modern-modal-header .modal-title i {
  animation: pulse 2s infinite;
}

/* Estilos específicos para CoreUI Modal */
.coreui-modal {
  border: none;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.coreui-modal-header {
  background: linear-gradient(135deg, var(--cui-primary) 0%, #764ba2 100%);
  color: white;
  border-bottom: none;
  padding: 1.5rem 2rem;
  border-radius: 20px 20px 0 0;
}

.coreui-modal-header .modal-title {
  font-weight: 600;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
}

.coreui-modal-header .btn-close {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 35px;
  height: 35px;
  opacity: 1;
  filter: none;
  transition: all 0.3s ease;
  border: none;
  position: relative;
}

.coreui-modal-header .btn-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.coreui-modal-header .btn-close::before {
  content: "×";
  font-size: 1.5rem;
  color: white;
  font-weight: 300;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.coreui-modal-body {
  padding: 2rem;
  background: var(--surface);
  border-radius: 0 0 20px 20px;
}

/* Formularios dentro del modal CoreUI */
.coreui-modal .form-control {
  border: 2px solid var(--border);
  border-radius: var(--border-radius);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 1rem;
  transition: var(--transition-normal);
  background: var(--surface);
  color: var(--text);
}

.coreui-modal .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
  background: var(--surface);
  outline: none;
}

/* Form-select específicos para coreui-modal */
.coreui-modal .form-select {
  border: 2px solid var(--border) !important;
  border-radius: var(--border-radius) !important;
  padding: var(--spacing-sm) var(--spacing-md) !important;
  padding-right: calc(var(--spacing-md) + 24px) !important;
  font-size: 1rem !important;
  transition: var(--transition-normal) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23757575' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right var(--spacing-sm) center !important;
  background-size: 16px 12px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.coreui-modal .form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232196f3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  outline: none !important;
}

.coreui-modal .form-label {
  font-weight: 600;
  color: var(--cui-dark);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.coreui-modal .btn {
  border-radius: 12px;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  transition: all 0.3s ease;
}

.coreui-modal .btn-primary {
  background: linear-gradient(135deg, var(--cui-primary) 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(50, 31, 219, 0.3);
}

.coreui-modal .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(50, 31, 219, 0.4);
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

/* ====================================
   PÁGINA OLVIDÉ CONTRASEÑA - MODERNA
   ==================================== */

/* Estilos específicos para la página de olvidé contraseña */
.forgot-password-wrapper {
  min-height: 100vh;
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

.forgot-password-wrapper .container-fluid {
  max-width: 1200px;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: var(--shadow-strong);
  overflow: hidden;
  margin: 2rem auto;
  min-height: 600px;
}

.forgot-left-panel {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--text-light);
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
  min-height: 600px;
}

.forgot-left-panel::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 20%, transparent 20%);
  background-size: 40px 40px;
  animation: float 25s infinite linear;
}

.forgot-logo-container {
  position: relative;
  z-index: 2;
  margin-bottom: 2rem;
}

.forgot-logo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  object-fit: contain;
  padding: 10px;
  margin: 0 auto;
  display: block;
}

.forgot-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
}

.forgot-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  line-height: 1.6;
  position: relative;
  z-index: 2;
  max-width: 400px;
  margin: 0 auto;
}

.forgot-form-panel {
  padding: 3rem 2rem;
  background: var(--surface);
  min-height: 600px;
}

.forgot-form-container {
  max-width: 400px;
  margin: 0 auto;
}

.forgot-form-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
  text-align: center;
}

.forgot-form-description {
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 2rem;
  line-height: 1.5;
}

.forgot-input-field {
  position: relative;
  margin-bottom: 2rem;
}

.forgot-input-field input {
  width: 100%;
  padding: 1rem;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: 1rem;
  background: var(--surface-variant);
  transition: all 0.3s ease;
  color: var(--text);
  box-sizing: border-box;
}

.forgot-input-field input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.forgot-input-field label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 1rem;
  color: var(--text-secondary);
  pointer-events: none;
  transition: all 0.3s ease;
  background: transparent;
  padding: 0 0.5rem;
  margin-left: -0.5rem;
}

.forgot-input-field input:focus+label,
.forgot-input-field input:not(:placeholder-shown)+label {
  top: -0.5rem;
  left: 0.5rem;
  font-size: 0.85rem;
  color: var(--primary);
  background: var(--surface);
}

.btn-forgot {
  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  margin-top: 1rem;
  position: relative;
  overflow: hidden;
}

.btn-forgot::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-forgot:hover::before {
  left: 100%;
}

.btn-forgot:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(25, 118, 210, 0.3);
}

.btn-forgot:active {
  transform: translateY(0);
}

.forgot-info-notice {
  background: var(--info);
  opacity: 0.9;
  border-left: 4px solid var(--primary);
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-light);
}

.forgot-info-icon {
  color: var(--primary);
  margin-right: 0.5rem;
}

.forgot-back-link {
  color: #1976d2;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
}

.forgot-back-link:hover {
  color: #1565c0;
  text-decoration: none;
  transform: translateX(-3px);
}

/* Estados de validación para input username */
.username-valid {
  border-color: #4caf50 !important;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1) !important;
}

.username-invalid {
  border-color: #f44336 !important;
  box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1) !important;
}

/* Responsive design para forgot password */
@media (max-width: 768px) {
  .forgot-password-wrapper .container-fluid {
    margin: 1rem;
    border-radius: 15px;
    min-height: auto;
  }

  .forgot-left-panel,
  .forgot-form-panel {
    padding: 2rem 1.5rem;
    min-height: auto;
  }

  .forgot-left-panel {
    text-align: center;
  }

  .forgot-title {
    font-size: 1.8rem;
  }

  .forgot-logo {
    width: 80px;
    height: 80px;
  }

  .forgot-form-container {
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .forgot-password-wrapper {
    padding: 1rem 0.5rem;
  }

  .forgot-password-wrapper .container-fluid {
    margin: 0.5rem;
  }

  .forgot-left-panel,
  .forgot-form-panel {
    padding: 1.5rem 1rem;
  }

  .forgot-title {
    font-size: 1.6rem;
  }

  .forgot-subtitle {
    font-size: 1rem;
  }
}

/* Login específico para CSP */
.fondo-login {
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.card-login-form {
  background: var(--surface);
}

.logo-login-small {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.logo-login-large {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: var(--shadow);
  background: var(--surface);
}

.card-login-side {
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
}

.titulo-bienvenida {
  color: var(--text-light);
  font-weight: 700;
}

.subtitulo-bienvenida {
  color: #e3f2fd;
}

.link-login {
  color: var(--primary);
}

/* Materialize button styles */
.btn-large {
  padding: 0.75rem 2rem;
  font-size: 1.25rem;
  border-radius: 0.3rem;
  font-weight: 500;
}

.waves-effect {
  transition: box-shadow 0.2s;
}

.waves-light {
  color: #fff;
}

.teal {
  background-color: #26a69a !important;
  color: #fff !important;
  border: none;
}

.btn-large:active,
.btn-large:focus {
  box-shadow: 0 4px 12px rgba(38, 166, 154, 0.2);
  outline: none;
}

/* Materialize input and form styles */
.input-field {
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.input-field input[type="text"],
.input-field input[type="password"],
.input-field input[type="email"],
.input-field input[type="number"],
.input-field input[type="search"],
.input-field textarea {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 2px solid #9e9e9e;
  background-color: transparent;
  font-size: 1.1rem;
  padding: 0.5rem 0;
  box-shadow: none;
  transition: border-color 0.3s;
}

.input-field input:focus,
.input-field textarea:focus {
  border-bottom: 2px solid #26a69a;
  outline: none;
}

.input-field label {
  color: #9e9e9e;
  position: absolute;
  top: 0.75rem;
  left: 0;
  font-size: 1rem;
  cursor: text;
  transition: 0.2s ease all;
}

.input-field input:focus+label,
.input-field input:not(:placeholder-shown)+label,
.input-field textarea:focus+label,
.input-field textarea:not(:placeholder-shown)+label {
  top: -1rem;
  font-size: 0.85rem;
  color: #26a69a;
}

.input-field input:disabled,
.input-field textarea:disabled {
  border-bottom: 1px dotted #bdbdbd;
  background-color: #f5f5f5;
}

/* ========================================
   TABLE ACTION BUTTONS
======================================== */

.table .btn-group {
  display: flex;
  /* clave para que flex: 1 funcione */
  gap: 1px;
  /* espacio entre botones */
  width: 100%;
  /* opcional, asegura que el grupo ocupe todo el ancho disponible */
}

.table .btn-group .btn {
  flex: 1;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table .btn-group .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.table .btn-group .btn i {
  font-size: 0.9rem;
}

/* Botón de editar */
.table .btn-warning {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  color: white;
}

.table .btn-warning:hover {
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
  color: white;
}

/* Botón de eliminar */
.table .btn-danger {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
}

.table .btn-danger:hover {
  background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
  color: white;
}

/* Botón de éxito/activar */
.table .btn-success {
  background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
  color: white;
}

.table .btn-success:hover {
  background: linear-gradient(135deg, #229954 0%, #1e8449 100%);
  color: white;
}

/* Botón de información */
.table .btn-info {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
}

.table .btn-info:hover {
  background: linear-gradient(135deg, #2980b9 0%, #1f5582 100%);
  color: white;
}

/* Botón secundario */
.table .btn-secondary {
  background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
  color: white;
}

.table .btn-secondary:hover {
  background: linear-gradient(135deg, #7f8c8d 0%, #34495e 100%);
  color: white;
}

/* ===========================================
   ESTILOS MORADOS - REEMPLAZAR ELEMENTOS AZULES
   =========================================== */

/* Botones primarios morados */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled),
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%) !important;
  border-color: #8b5cf6 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25) !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #5b21b6 100%) !important;
  border-color: #7c3aed !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.35) !important;
}

.btn-outline-primary {
  background: transparent !important;
  border-color: #8b5cf6 !important;
  color: #8b5cf6 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%) !important;
  border-color: #8b5cf6 !important;
  color: #ffffff !important;
}

/* Enlaces y elementos de navegación con color morado */
.nav-link.active,
.nav-pills .nav-link.active,
.navbar-brand,
a.text-primary,
.text-primary,
.link-primary {
  color: #8b5cf6 !important;
}

/* Badges y etiquetas */
.badge-primary,
.badge.bg-primary {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
}

/* Alerts primarios */
.alert-primary {
  background-color: rgba(139, 92, 246, 0.1) !important;
  border-color: rgba(139, 92, 246, 0.2) !important;
  color: #6d28d9 !important;
}

/* Progress bars */
.progress-bar,
.bg-primary {
  background: linear-gradient(90deg, #8b5cf6 0%, #7c3aed 100%) !important;
}

/* Form controls focus */
.form-control:focus,
.form-select:focus {
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25) !important;
}

/* Estilos específicos para form-select para que coincida exactamente con form-control */
.form-select {
  /* Mismos estilos base que form-control */
  border: 2px solid var(--border);
  border-radius: var(--border-radius);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 1rem;
  background: var(--surface);
  color: var(--text);
  transition: var(--transition-normal);

  /* Específicos para select - mantener la flecha */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23757575' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--spacing-sm) center;
  background-size: 16px 12px;
  padding-right: calc(var(--spacing-md) + 24px);
  /* Espacio extra para la flecha */

  /* Eliminar estilos por defecto del navegador */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.form-select:focus {
  /* Mismo foco que form-control */
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);

  /* Cambiar color de la flecha en focus */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232196f3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Estados disabled */
.form-select:disabled {
  background-color: var(--surface-variant);
  opacity: 0.65;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bdbdbd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Sobrescribir estilos de CoreUI para form-select para que coincida exactamente con form-control */
.form-select {
  /* Forzar estilos idénticos a form-control */
  display: block !important;
  width: 100% !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--text) !important;
  background-color: var(--surface) !important;

  /* Mismos borders y espaciado que form-control */
  border: 2px solid var(--border) !important;
  border-radius: var(--border-radius) !important;
  padding: var(--spacing-sm) var(--spacing-md) !important;
  padding-right: calc(var(--spacing-md) + 24px) !important;
  /* Espacio para flecha */

  /* Flecha personalizada con nuestros colores */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23757575' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right var(--spacing-sm) center !important;
  background-size: 16px 12px !important;

  /* Transición igual que form-control */
  transition: var(--transition-normal) !important;

  /* Eliminar apariencia nativa */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  -moz-padding-start: var(--spacing-sm) !important;
}

/* Focus idéntico a form-control */
.form-select:focus {
  border-color: var(--primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232196f3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Checkboxes y radios */
.form-check-input:checked {
  background-color: #8b5cf6 !important;
  border-color: #8b5cf6 !important;
}

/* Dropdown items activos */
.dropdown-item.active,
.dropdown-item:active {
  background-color: #8b5cf6 !important;
}

/* Paginación */
.page-link {
  color: #8b5cf6 !important;
}

.page-item.active .page-link {
  background-color: #8b5cf6 !important;
  border-color: #8b5cf6 !important;
}

/* Tabs activos - Regla ampliada */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: white !important;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  border-color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
}

/* Botones de información que usan azul, cambiar a morado */
.btn-info {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
  border-color: #8b5cf6 !important;
  color: #ffffff !important;
}

.btn-info:hover,
.btn-info:focus {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
  border-color: #7c3aed !important;
}

/* Tablas con elementos primarios morados */
.table .btn-info {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
  color: white !important;
}

.table .btn-info:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
  color: white !important;
}

/* Modales y elementos de UI primarios */
.modal-header {
  border-bottom-color: rgba(139, 92, 246, 0.2) !important;
}

.modal-footer .btn-primary {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
  border-color: #8b5cf6 !important;
}

/* Spinners y loaders primarios */
.spinner-border.text-primary {
  color: #8b5cf6 !important;
}

/* Border primarios */
.border-primary {
  border-color: #8b5cf6 !important;
}

/* Estilo específico para quitar fondo solo del texto NOMBRE_SISTEMA */
.sidebar-title {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Leyendas de tablas moradas */
.table caption,
table caption,
.table-responsive caption,
.dataTables_info,
.dataTables_length,
.dataTables_filter,
.dataTables_paginate,
caption {
  color: #8b5cf6 !important;
  font-weight: 600 !important;
}

/* Elementos de DataTables morados */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border-color: #8b5cf6 !important;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25) !important;
}

/* Texto de información de paginación */
.dataTables_info {
  color: #6d28d9 !important;
}

/* Leyendas y descripciones de formularios */
.form-text,
.text-muted {
  color: #8b5cf6 !important;
}

/* Labels de formularios con estilo morado */
.form-label,
label {
  color: #6d28d9 !important;
  font-weight: 500 !important;
}

/* ====================================
   TOOLTIPS MODERNOS CON TIPPY.JS
   ==================================== */

/* Tema moderno para Tippy.js */
.tippy-box[data-theme~='modern'] {
  background: linear-gradient(135deg, var(--cui-dark) 0%, #2d3748 100%);
  color: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  font-size: 0.875rem;
  font-weight: 500;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tippy-box[data-theme~='modern'][data-placement^='top']>.tippy-arrow::before {
  border-top-color: var(--cui-dark);
}

.tippy-box[data-theme~='modern'][data-placement^='bottom']>.tippy-arrow::before {
  border-bottom-color: var(--cui-dark);
}

.tippy-box[data-theme~='modern'][data-placement^='left']>.tippy-arrow::before {
  border-left-color: var(--cui-dark);
}

.tippy-box[data-theme~='modern'][data-placement^='right']>.tippy-arrow::before {
  border-right-color: var(--cui-dark);
}

/* Contenido del tooltip */
.tooltip-content {
  text-align: center;
  padding: 0.25rem;
  line-height: 1.4;
}

.tooltip-content i {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
  display: block;
}

.tooltip-content strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  color: white;
}

.tooltip-content .text-muted {
  font-size: 0.8rem;
  color: #cbd5e0 !important;
  opacity: 0.8;
}

/* Tema de éxito */
.tippy-box[data-theme~='success'] {
  background: linear-gradient(135deg, var(--cui-success) 0%, #38a169 100%);
  color: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(46, 184, 92, 0.3);
}

.tippy-box[data-theme~='success'][data-placement^='top']>.tippy-arrow::before {
  border-top-color: var(--cui-success);
}

/* Tema de advertencia */
.tippy-box[data-theme~='warning'] {
  background: linear-gradient(135deg, var(--cui-warning) 0%, #d69e2e 100%);
  color: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(249, 177, 21, 0.3);
}

.tippy-box[data-theme~='warning'][data-placement^='top']>.tippy-arrow::before {
  border-top-color: var(--cui-warning);
}

/* Tema de peligro */
.tippy-box[data-theme~='danger'] {
  background: linear-gradient(135deg, var(--cui-danger) 0%, #c53030 100%);
  color: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(229, 83, 83, 0.3);
}

.tippy-box[data-theme~='danger'][data-placement^='top']>.tippy-arrow::before {
  border-top-color: var(--cui-danger);
}

/* Temas Outline para Tippy.js - CSP-Safe */
.tippy-box[data-theme~='outline-primary'],
.tippy-popper[data-theme~='outline-primary'] .tippy-box {
  background: rgba(255, 255, 255, 0.95);
  color: #0a58ca;
  border: 2px solid var(--cui-primary);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(13, 110, 253, 0.2);
}

.tippy-box[data-theme~='outline-primary'][data-placement^='top']>.tippy-arrow::before,
.tippy-popper[data-theme~='outline-primary'] .tippy-box[data-placement^='top']>.tippy-arrow::before {
  border-top-color: var(--cui-primary);
}

.tippy-box[data-theme~='outline-success'],
.tippy-popper[data-theme~='outline-success'] .tippy-box {
  background: rgba(255, 255, 255, 0.95);
  color: #146c43;
  border: 2px solid var(--cui-success);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(25, 135, 84, 0.2);
}

.tippy-box[data-theme~='outline-success'][data-placement^='top']>.tippy-arrow::before,
.tippy-popper[data-theme~='outline-success'] .tippy-box[data-placement^='top']>.tippy-arrow::before {
  border-top-color: var(--cui-success);
}

.tippy-box[data-theme~='outline-warning'],
.tippy-popper[data-theme~='outline-warning'] .tippy-box {
  background: rgba(255, 255, 255, 0.95);
  color: #997404;
  border: 2px solid var(--cui-warning);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(255, 193, 7, 0.2);
}

.tippy-box[data-theme~='outline-warning'][data-placement^='top']>.tippy-arrow::before,
.tippy-popper[data-theme~='outline-warning'] .tippy-box[data-placement^='top']>.tippy-arrow::before {
  border-top-color: var(--cui-warning);
}

.tippy-box[data-theme~='outline-danger'],
.tippy-popper[data-theme~='outline-danger'] .tippy-box {
  background: rgba(255, 255, 255, 0.95);
  color: #b02a37;
  border: 2px solid var(--cui-danger);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(220, 53, 69, 0.2);
}

.tippy-box[data-theme~='outline-danger'][data-placement^='top']>.tippy-arrow::before,
.tippy-popper[data-theme~='outline-danger'] .tippy-box[data-placement^='top']>.tippy-arrow::before {
  border-top-color: var(--cui-danger);
}

.tippy-box[data-theme~='outline-info'],
.tippy-popper[data-theme~='outline-info'] .tippy-box {
  background: rgba(255, 255, 255, 0.95);
  color: #087990;
  border: 2px solid var(--cui-info);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(13, 202, 240, 0.2);
}

.tippy-box[data-theme~='outline-info'][data-placement^='top']>.tippy-arrow::before,
.tippy-popper[data-theme~='outline-info'] .tippy-box[data-placement^='top']>.tippy-arrow::before {
  border-top-color: var(--cui-info);
}

.tippy-box[data-theme~='outline-secondary'],
.tippy-popper[data-theme~='outline-secondary'] .tippy-box {
  background: rgba(255, 255, 255, 0.95);
  color: #495057;
  border: 2px solid var(--cui-secondary);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(108, 117, 125, 0.2);
}

.tippy-box[data-theme~='outline-secondary'][data-placement^='top']>.tippy-arrow::before,
.tippy-popper[data-theme~='outline-secondary'] .tippy-box[data-placement^='top']>.tippy-arrow::before {
  border-top-color: var(--cui-secondary);
}

/* Z-index alto para tooltips */
.tippy-popper {
  z-index: 10000 !important;
}

.tippy-popper-safe {
  z-index: 10000 !important;
}

/* Asegurar que el contenido del tooltip sea visible */
.tippy-content {
  font-size: 14px;
  line-height: 1.4;
  padding: 8px 12px;
}

/* Animaciones CSP-safe para tooltips */
.tippy-fade-in,
.tippy-showing {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Estilos adicionales para mejor compatibilidad CSP */
.tippy-box[data-inertia] {
  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}

.tippy-box[data-state='visible'] {
  transform: scale(1);
  opacity: 1;
}

.tippy-box[data-state='hidden'] {
  transform: scale(0.96);
  opacity: 0;
}

/* Configuración base para Tippy.js CSP-safe */
.tippy-box {
  position: relative;
  background-color: rgba(255, 255, 255, 0.95);
  color: #333;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
  outline: 0;
  transition-property: transform, visibility, opacity;
  max-width: 250px;
  z-index: 10000;
}

.tippy-content {
  position: relative;
  padding: 8px 12px;
  z-index: 1;
  font-size: 14px;
  line-height: 1.4;
}

.tippy-arrow {
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.95);
}

.tippy-arrow:before {
  content: '';
  position: absolute;
  border-color: transparent;
  border-style: solid;
}

/* Posicionamiento de flechas */
.tippy-box[data-placement^='top']>.tippy-arrow {
  bottom: 0;
}

.tippy-box[data-placement^='top']>.tippy-arrow:before {
  bottom: -7px;
  left: 0;
  border-width: 8px 8px 0;
  border-top-color: initial;
  transform-origin: center top;
}

.tippy-box[data-placement^='bottom']>.tippy-arrow {
  top: 0;
}

.tippy-box[data-placement^='bottom']>.tippy-arrow:before {
  top: -7px;
  left: 0;
  border-width: 0 8px 8px;
  border-bottom-color: initial;
  transform-origin: center bottom;
}

.tippy-box[data-placement^='left']>.tippy-arrow {
  right: 0;
}

.tippy-box[data-placement^='left']>.tippy-arrow:before {
  border-width: 8px 0 8px 8px;
  border-left-color: initial;
  right: -7px;
  transform-origin: center left;
}

.tippy-box[data-placement^='right']>.tippy-arrow {
  left: 0;
}

.tippy-box[data-placement^='right']>.tippy-arrow:before {
  left: -7px;
  border-width: 8px 8px 8px 0;
  border-right-color: initial;
  transform-origin: center right;
}

/* Estados de animación CSP-safe */
.tippy-box[data-state='hidden'] {
  opacity: 0;
  pointer-events: none;
}

.tippy-box[data-state='visible'] {
  opacity: 1;
}

/* Animaciones */
.tippy-box[data-animation='fade'][data-state='hidden'] {
  opacity: 0;
}

.tippy-box[data-animation='fade'][data-state='visible'] {
  opacity: 1;
}

.tippy-box[data-animation='fade'] {
  transition: opacity 0.2s ease;
}

.tippy-box[data-theme~='outline-secondary'][data-placement^='top']>.tippy-arrow::before {
  border-top-color: var(--cui-secondary);
}

/* Mejorar legibilidad del texto en tooltips outline */
.tippy-box[data-theme*='outline'] {
  font-weight: 500 !important;
  text-shadow: none !important;
}

.tippy-box[data-theme*='outline'] .tooltip-content {
  color: inherit !important;
}

.tippy-box[data-theme*='outline'] .tooltip-content strong {
  font-weight: 600 !important;
}

.tippy-box[data-theme*='outline'] .text-muted {
  color: #6c757d !important;
  opacity: 0.8 !important;
}

/* Animaciones personalizadas */
.tippy-box[data-animation='shift-away'][data-state='hidden'] {
  opacity: 0;
  transform: scale(0.8) translateY(-10px);
}

.tippy-box[data-animation='shift-away'][data-state='visible'] {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Botones con tooltips mejorados */
.modern-tooltip-btn {
  position: relative;
  transition: all 0.3s ease;
}

.modern-tooltip-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Estilos para iconos SVG en botones */
.btn .icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  vertical-align: middle;
  display: inline-block;
  flex-shrink: 0;
}

.btn-sm .icon {
  width: 14px;
  height: 14px;
}

.btn-lg .icon {
  width: 20px;
  height: 20px;
}

/* Asegurar visibilidad de iconos en botones pequeños */
.btn-sm.modern-tooltip-btn {
  padding: 0.25rem 0.4rem;
  min-width: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-sm.modern-tooltip-btn .icon {
  margin: 0;
  line-height: 1;
}

/* Asegurar que los iconos en tooltips se muestren correctamente */
.tooltip-content .icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  vertical-align: middle;
  display: inline-block;
}

/* Responsive tooltips */
@media (max-width: 768px) {
  .tippy-box {
    font-size: 0.8rem;
    max-width: 180px !important;
  }

  .tooltip-content i {
    font-size: 1.1rem;
  }
}

/* Clases para iconos emoji */
.icon-emoji {
  font-size: 1em;
  margin-right: 0.5rem;
  display: inline-block;
}

.icon-emoji-small {
  font-size: 0.9em;
  display: inline-block;
}

/* Iconos centrados en botones */
.btn .icon-emoji,
.btn .icon-emoji-small {
  margin-right: 0 !important;
  margin-left: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Iconos Bootstrap centrados en botones */
.btn i[class*="bi-"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 1rem !important;
}

/* Asegurar que los botones también estén centrados */
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-primary,
.btn-outline-info,
.btn-outline-success,
.btn-warning,
.btn-danger,
.btn-primary,
.btn-info,
.btn-success {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.icon-emoji-tooltip {
  font-size: 1.2em;
  display: inline-block;
}

/* Mejorar visibilidad de emojis en botones outline - Simple */
.btn-outline-primary .icon-emoji,
.btn-outline-primary .icon-emoji-small {
  color: var(--cui-primary);
}

.btn-outline-warning .icon-emoji,
.btn-outline-warning .icon-emoji-small {
  color: var(--cui-warning);
}

.btn-outline-danger .icon-emoji,
.btn-outline-danger .icon-emoji-small {
  color: var(--cui-danger);
}

.btn-outline-success .icon-emoji,
.btn-outline-success .icon-emoji-small {
  color: var(--cui-success);
}

.btn-outline-info .icon-emoji,
.btn-outline-info .icon-emoji-small {
  color: var(--cui-info);
}

.btn-outline-secondary .icon-emoji,
.btn-outline-secondary .icon-emoji-small {
  color: var(--cui-secondary);
}

/* Efecto hover para botones outline con emojis - Simple */
.btn-outline-primary:hover .icon-emoji,
.btn-outline-warning:hover .icon-emoji,
.btn-outline-danger:hover .icon-emoji,
.btn-outline-success:hover .icon-emoji,
.btn-outline-info:hover .icon-emoji,
.btn-outline-secondary:hover .icon-emoji {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* Sombras con color del botón para botones outline */
.btn-outline-primary {
  transition: all 0.3s ease;
}

.btn-outline-primary:hover {
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
  transform: translateY(-2px);
}

.btn-outline-secondary {
  transition: all 0.3s ease;
}

.btn-outline-secondary:hover {
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
  transform: translateY(-2px);
}

.btn-outline-success {
  transition: all 0.3s ease;
}

.btn-outline-success:hover {
  box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3);
  transform: translateY(-2px);
}

.btn-outline-danger {
  color: #dc3545 !important;
  border: 2px solid #dc3545 !important;
  border-color: #dc3545 !important;
  background-color: transparent !important;
  transition: all 0.3s ease;
}

.btn-outline-danger:hover {
  color: #fff !important;
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
  transform: translateY(-2px);
}

.btn-outline-danger:focus,
.btn-outline-danger.focus {
  color: #fff !important;
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.btn-outline-danger:active,
.btn-outline-danger.active {
  color: #fff !important;
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
}

.btn-outline-warning {
  color: #ffc107 !important;
  border: 2px solid #ffc107 !important;
  border-color: #ffc107 !important;
  background-color: transparent !important;
  transition: all 0.3s ease;
}

.btn-outline-warning:hover {
  color: #000 !important;
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
  transform: translateY(-2px);
}

.btn-outline-warning:focus,
.btn-outline-warning.focus {
  color: #000 !important;
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-outline-warning:active,
.btn-outline-warning.active {
  color: #000 !important;
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
}

.btn-outline-info {
  color: #17a2b8 !important;
  border: 2px solid #17a2b8 !important;
  border-color: #17a2b8 !important;
  background-color: transparent !important;
  transition: all 0.3s ease;
}

.btn-outline-info:hover {
  color: #fff !important;
  background-color: #17a2b8 !important;
  border-color: #17a2b8 !important;
  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
  transform: translateY(-2px);
}

.btn-outline-info:focus,
.btn-outline-info.focus {
  color: #fff !important;
  background-color: #17a2b8 !important;
  border-color: #17a2b8 !important;
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.btn-outline-info:active,
.btn-outline-info.active {
  color: #fff !important;
  background-color: #17a2b8 !important;
  border-color: #17a2b8 !important;
}

.btn-outline-success {
  color: #28a745 !important;
  border: 2px solid #28a745 !important;
  border-color: #28a745 !important;
  background-color: transparent !important;
  transition: all 0.3s ease;
}

.btn-outline-success:hover {
  color: #fff !important;
  background-color: #28a745 !important;
  border-color: #28a745 !important;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
  transform: translateY(-2px);
}

.btn-outline-success:focus,
.btn-outline-success.focus {
  color: #fff !important;
  background-color: #28a745 !important;
  border-color: #28a745 !important;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.btn-outline-success:active,
.btn-outline-success.active {
  color: #fff !important;
  background-color: #28a745 !important;
  border-color: #28a745 !important;
}

.btn-outline-primary {
  color: #007bff !important;
  border: 2px solid #007bff !important;
  border-color: #007bff !important;
  background-color: transparent !important;
  transition: all 0.3s ease;
}

.btn-outline-primary:hover {
  color: #fff !important;
  background-color: #007bff !important;
  border-color: #007bff !important;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
  transform: translateY(-2px);
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
  color: #fff !important;
  background-color: #007bff !important;
  border-color: #007bff !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-outline-primary:active,
.btn-outline-primary.active {
  color: #fff !important;
  background-color: #007bff !important;
  border-color: #007bff !important;
}

.btn-outline-light {
  transition: all 0.3s ease;
}

.btn-outline-light:hover {
  box-shadow: 0 4px 12px rgba(248, 249, 250, 0.3);
  transform: translateY(-2px);
}

.btn-outline-dark {
  transition: all 0.3s ease;
}

.btn-outline-dark:hover {
  box-shadow: 0 4px 12px rgba(33, 37, 41, 0.3);
  transform: translateY(-2px);
}

/* Estilos para SweetAlert2 - Diseño Moderno CoreUI */
.swal2-container {
  z-index: 99999 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.swal2-popup {
  border-radius: 16px !important;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.8) !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: 2rem !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  min-width: 400px !important;
  max-width: 500px !important;
}

/* Estilos personalizados para clases custom */
.swal2-popup-custom {
  text-align: center !important;
}

.swal2-icon-custom {
  margin: 0 auto 1.5rem !important;
}

/* Iconos HTML personalizados con Bootstrap Icons */
.swal2-icon.border-0 {
  border: none !important;
  background: none !important;
  margin: 0 auto 1.5rem !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.swal2-icon.border-0:before,
.swal2-icon.border-0:after {
  display: none !important;
}

/* Clase para icono de advertencia personalizado - CSP safe */
.swal2-custom-icon-warning {
  font-size: 4rem !important;
  color: #f59e0b !important;
  display: inline-block !important;
}

.swal2-title-custom {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  margin: 0 0 1rem !important;
}

.swal2-html-custom {
  margin: 0 0 1.5rem !important;
  font-size: 1rem !important;
  color: #5c6873 !important;
}

.swal2-backdrop-show {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(8px) !important;
}

.swal2-title {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--cui-body-color) !important;
  margin: 0 0 0.5rem 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

.swal2-content {
  font-size: 1rem !important;
  color: var(--cui-text-muted) !important;
  line-height: 1.5 !important;
  margin: 0 0 1rem 0 !important;
  padding: 0 !important;
}

.swal2-icon {
  border: none !important;
  margin: 0 auto 1.5rem !important;
  width: 80px !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
}

.swal2-icon:before,
.swal2-icon:after {
  content: '' !important;
  display: block !important;
}

/* Forzar visibilidad de iconos específicos */
.swal2-icon.swal2-warning,
.swal2-icon.swal2-error,
.swal2-icon.swal2-success,
.swal2-icon.swal2-info,
.swal2-icon.swal2-question {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Si los iconos siguen sin aparecer, ocultar el contenedor del icono */
.swal2-icon-content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Fallback: si no hay icono, reducir el espacio */
.swal2-popup:not(.swal2-icon-show) .swal2-icon,
.swal2-icon:empty {
  display: none !important;
  margin: 0 !important;
  height: 0 !important;
}

/* Clase específica para iconos simples forzados (CSP-safe) */
.swal2-icon-forced {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 80px !important;
  height: 80px !important;
  border: none !important;
  background: none !important;
  margin: 0 auto !important;
  position: relative !important;
}

.swal2-icon-simple {
  font-size: 4rem !important;
  font-weight: bold !important;
  line-height: 1 !important;
  font-family: "Arial", "Helvetica", sans-serif !important;
  text-align: center !important;
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Colores específicos para cada tipo de icono */
.swal2-icon-forced.swal2-warning.swal2-icon-simple {
  color: #f39c12 !important;
  background: rgba(243, 156, 18, 0.1) !important;
  border: 3px solid #f39c12 !important;
  border-radius: 50% !important;
}

.swal2-icon-forced.swal2-error.swal2-icon-simple {
  color: #e74c3c !important;
  background: rgba(231, 76, 60, 0.1) !important;
  border: 3px solid #e74c3c !important;
  border-radius: 50% !important;
}

.swal2-icon-forced.swal2-success.swal2-icon-simple {
  color: #27ae60 !important;
  background: rgba(39, 174, 96, 0.1) !important;
  border: 3px solid #27ae60 !important;
  border-radius: 50% !important;
}

.swal2-icon-forced.swal2-info.swal2-icon-simple {
  color: #3498db !important;
  background: rgba(52, 152, 219, 0.1) !important;
  border: 3px solid #3498db !important;
  border-radius: 50% !important;
}

.swal2-icon-forced.swal2-question.swal2-icon-simple {
  color: #9b59b6 !important;
  background: rgba(155, 89, 182, 0.1) !important;
  border: 3px solid #9b59b6 !important;
  border-radius: 50% !important;
}

.swal2-emoji-icon {
  font-size: 4rem !important;
  line-height: 1 !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols", "Twemoji Mozilla", "EmojiOne Color", sans-serif !important;
  display: block !important;
  text-align: center !important;
  color: inherit !important;
  text-shadow: none !important;
  font-weight: normal !important;
  font-style: normal !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-variant-emoji: emoji !important;
  font-feature-settings: "liga" off !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 9999 !important;
  position: relative !important;
}

/* Asegurar que los iconos forzados sean visibles */
.swal2-icon-forced,
.swal2-icon-forced * {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Estilos adicionales para SweetAlert2 moderno */
.swal2-modern {
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
}

.swal2-modern .swal2-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
}

/* Icono personalizado base */
.custom-icon {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 3rem !important;
  font-weight: bold !important;
  font-family: Arial, sans-serif !important;
  margin: 0 auto 20px auto !important;
  color: white !important;
}

/* Icono personalizado de advertencia */
.custom-warning-icon,
.custom-icon-warning {
  background: #f39c12 !important;
  border: 4px solid #e67e22 !important;
  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3) !important;
}

/* Icono personalizado de error */
.custom-icon-error {
  background: #e74c3c !important;
  border: 4px solid #c0392b !important;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3) !important;
}

/* Icono personalizado de éxito */
.custom-icon-success {
  background: #27ae60 !important;
  border: 4px solid #229954 !important;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3) !important;
}

/* Icono personalizado de información */
.custom-icon-info {
  background: #3498db !important;
  border: 4px solid #2980b9 !important;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3) !important;
}

/* Icono personalizado de pregunta */
.custom-icon-question {
  background: #9b59b6 !important;
  border: 4px solid #8e44ad !important;
  box-shadow: 0 4px 12px rgba(155, 89, 182, 0.3) !important;
}

/* Estilos para popup con icono personalizado */
.swal2-custom-warning .swal2-header {
  padding-bottom: 0 !important;
}

/* Ocultar cualquier icono de SweetAlert2 cuando usamos personalizado */
.swal2-custom-warning .swal2-icon {
  display: none !important;
}

/* Desactivar animaciones de SweetAlert2 para CSP compliance */
.swal2-popup,
.swal2-container,
.swal2-backdrop {
  animation: none !important;
  transition: none !important;
}

.swal2-show {
  display: block !important;
}

.swal2-hide {
  display: none !important;
}

/* Ocultar completamente los iconos originales de SweetAlert2 */
.swal2-icon-forced .swal2-icon-content,
.swal2-icon-forced .swal2-x-mark,
.swal2-icon-forced .swal2-success-ring,
.swal2-icon-forced .swal2-success-fix,
.swal2-icon-forced .swal2-success-line-tip,
.swal2-icon-forced .swal2-success-line-long,
.swal2-icon-forced .swal2-error-icon,
.swal2-icon-forced .swal2-error-x,
.swal2-icon-forced .swal2-warning,
.swal2-icon-forced::before,
.swal2-icon-forced::after {
  display: none !important;
  visibility: hidden !important;
}

.swal2-icon.swal2-warning::before,
.swal2-icon[aria-label*="warning"]::before,
.swal2-popup[class*="warning"] .swal2-icon::before {
  content: '⚠️' !important;
  font-size: 3rem !important;
  line-height: 1 !important;
  display: block !important;
  text-align: center !important;
}

.swal2-icon.swal2-error::before,
.swal2-icon[aria-label*="error"]::before,
.swal2-popup[class*="error"] .swal2-icon::before {
  content: '❌' !important;
  font-size: 3rem !important;
  line-height: 1 !important;
  display: block !important;
  text-align: center !important;
}

.swal2-icon.swal2-success::before,
.swal2-icon[aria-label*="success"]::before,
.swal2-popup[class*="success"] .swal2-icon::before {
  content: '✅' !important;
  font-size: 3rem !important;
  line-height: 1 !important;
  display: block !important;
  text-align: center !important;
}

.swal2-icon.swal2-info::before,
.swal2-icon[aria-label*="info"]::before,
.swal2-popup[class*="info"] .swal2-icon::before {
  content: 'ℹ️' !important;
  font-size: 3rem !important;
  line-height: 1 !important;
  display: block !important;
  text-align: center !important;
}

.swal2-icon.swal2-question::before,
.swal2-icon[aria-label*="question"]::before,
.swal2-popup[class*="question"] .swal2-icon::before {
  content: '❓' !important;
  font-size: 3rem !important;
  line-height: 1 !important;
  display: block !important;
  text-align: center !important;
}

/* Forzar iconos para todos los tipos de SweetAlert */
.swal2-icon::before {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Estrategia adicional: Forzar contenido directamente en los iconos vacíos */
.swal2-icon:empty::after,
.swal2-icon:not(:has(*))::after {
  content: attr(data-emoji) !important;
  font-size: 3rem !important;
  line-height: 1 !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: block !important;
}

/* Asegurar que los iconos sean visibles independientemente del estado */
.swal2-icon,
.swal2-icon * {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Iconos específicos más fuertes con múltiples selectores */
.swal2-popup[class*="success"] .swal2-icon,
.swal2-icon.swal2-success,
.swal2-icon[aria-label*="success"],
.swal2-icon[data-swal-type="success"] {
  background-image: none !important;
}

.swal2-popup[class*="success"] .swal2-icon::after,
.swal2-icon.swal2-success::after,
.swal2-icon[aria-label*="success"]::after,
.swal2-icon[data-swal-type="success"]::after {
  content: '✅' !important;
  font-size: 3.5rem !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: block !important;
  z-index: 1000 !important;
}

.swal2-popup[class*="error"] .swal2-icon::after,
.swal2-icon.swal2-error::after,
.swal2-icon[aria-label*="error"]::after,
.swal2-icon[data-swal-type="error"]::after {
  content: '❌' !important;
  font-size: 3.5rem !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: block !important;
  z-index: 1000 !important;
}

.swal2-popup[class*="warning"] .swal2-icon::after,
.swal2-icon.swal2-warning::after,
.swal2-icon[aria-label*="warning"]::after,
.swal2-icon[data-swal-type="warning"]::after {
  content: '⚠️' !important;
  font-size: 3.5rem !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: block !important;
  z-index: 1000 !important;
}

.swal2-popup[class*="info"] .swal2-icon::after,
.swal2-icon.swal2-info::after,
.swal2-icon[aria-label*="info"]::after,
.swal2-icon[data-swal-type="info"]::after {
  content: 'ℹ️' !important;
  font-size: 3.5rem !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: block !important;
  z-index: 1000 !important;
}

.swal2-popup[class*="question"] .swal2-icon::after,
.swal2-icon.swal2-question::after,
.swal2-icon[aria-label*="question"]::after,
.swal2-icon[data-swal-type="question"]::after {
  content: '❓' !important;
  font-size: 3.5rem !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: block !important;
  z-index: 1000 !important;
}

/* Eliminar cualquier espaciado por defecto de SweetAlert2 */
.swal2-header {
  padding: 0 !important;
  margin: 0 !important;
}

.swal2-html-container {
  margin: 0 !important;
  padding: 0 !important;
}

.swal2-icon.swal2-warning {
  border-color: var(--cui-warning) !important;
  color: var(--cui-warning) !important;
}

.swal2-icon.swal2-error {
  border-color: var(--cui-danger) !important;
  color: var(--cui-danger) !important;
}

.swal2-icon.swal2-success {
  border-color: var(--cui-success) !important;
  color: var(--cui-success) !important;
}

.swal2-icon.swal2-info {
  border-color: var(--cui-info) !important;
  color: var(--cui-info) !important;
}

.swal2-actions {
  gap: 0.75rem !important;
  margin: 0.75rem 0 0 0 !important;
  padding: 0 !important;
  justify-content: center !important;
}

.swal2-confirm.btn,
.swal2-cancel.btn {
  margin: 0 !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  min-width: 100px !important;
  transition: all 0.3s ease !important;
}

.swal2-confirm.btn:hover,
.swal2-cancel.btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

/* Clase moderna personalizada */
.swal2-modern {
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(248, 249, 250, 0.98) 100%) !important;
  backdrop-filter: blur(25px) !important;
}

/* Animaciones mejoradas */
.swal2-show {
  animation: swal2-show-modern 0.3s ease !important;
}

.swal2-hide {
  animation: swal2-hide-modern 0.3s ease !important;
}

@keyframes swal2-show-modern {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes swal2-hide-modern {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

/* Spinner de loading mejorado */
.swal2-loader {
  border-color: var(--cui-primary) transparent var(--cui-primary) transparent !important;
}

/* Prevenir scroll cuando SweetAlert está activo */
body.swal2-shown {
  overflow: hidden !important;
}

/* Estilo para inputs en SweetAlert (si se usan) */
.swal2-input {
  border-radius: 8px !important;
  border: 1px solid var(--cui-border-color) !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  transition: border-color 0.3s ease !important;
}

.swal2-input:focus {
  border-color: var(--cui-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--cui-primary-rgb), 0.25) !important;
}

/* Responsive para móviles */
@media (max-width: 576px) {
  .swal2-popup {
    min-width: 300px !important;
    max-width: 90vw !important;
    margin: 0 1rem !important;
    padding: 1.25rem !important;
  }

  .swal2-title {
    font-size: 1.25rem !important;
    margin-bottom: 0.5rem !important;
  }

  .swal2-content {
    font-size: 0.9rem !important;
    margin-bottom: 1rem !important;
  }

  .swal2-icon {
    width: 70px !important;
    height: 70px !important;
    margin-bottom: 0.75rem !important;
  }

  .swal2-actions {
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin-top: 0.75rem !important;
  }

  .swal2-confirm.btn,
  .swal2-cancel.btn {
    width: 100% !important;
  }
}

/* Mejoras para dispositivos móviles y touch */
button,
.btn {
  /* Mejorar área táctil en móviles */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;

  /* Asegurar que los botones sean tocables */
  min-height: 44px;
  /* Mínimo recomendado por Apple para iOS */
  min-width: 44px;

  /* Mejorar feedback visual en touch */
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}

/* Estados activos mejorados para móvil */
button:active,
.btn:active {
  transform: scale(0.98);
  transition: transform 0.05s ease;
}

/* Eliminamos la definición duplicada de .btn-sm */

/* Mejorar tooltips en móviles */
@media (hover: none) and (pointer: coarse) {
  .modern-tooltip-btn {
    /* En dispositivos táctiles, deshabilitar hover de tooltips */
    pointer-events: auto;
  }

  /* Asegurar que los tooltips funcionen con touch */
  [data-tippy-content] {
    touch-action: manipulation;
  }
}

/* Mejorar área táctil para elementos interactivos pequeños */
.table .btn-group .btn {
  position: relative;
}

/* Footer básico del sistema */
footer {
  margin-top: auto !important;
  width: 100% !important;
  position: relative !important;
  bottom: 0 !important;
  flex-shrink: 0 !important;
}

.fondo_gris_claro {
  background-color: #f8f9fa !important;
  color: #6c757d !important;
  padding: 1rem !important;
  border-top: 1px solid #dee2e6 !important;
  font-size: 0.875rem !important;
  text-align: center !important;
}

/* Contenedor principal que ocupa espacio disponible */
.container-fluid,
.content-widget,
main {
  flex-grow: 1 !important;
}

/* Mejoras adicionales para dispositivos móviles */
@media (max-width: 768px) {

  /* Footer específico para móviles */
  footer {
    position: relative !important;
    margin-top: auto !important;
    width: 100% !important;
    flex-shrink: 0 !important;
  }

  .fondo_gris_claro {
    padding: 1.5rem 1rem !important;
    font-size: 0.8rem !important;
  }

  /* Forzar layout flexbox en móviles */
  body {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Soporte para dispositivos con notch (iPhone X, etc.) */
  body.pagina {
    padding-bottom: max(70px, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Mejorar el área de scroll del sidebar para evitar conflictos */
  .sidebar-nav {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Asegurar que el contenido no quede detrás de barras del sistema */
  .content-wrapper {
    padding-bottom: var(--spacing-xl);
  }

  /* Mejorar la visibilidad del toggler en diferentes temas - ELIMINADO */
}

/* Mejoras para landscape en móviles */
@media (max-width: 896px) and (orientation: landscape) {
  /* Sidebar footer y toggler eliminados */

  .sidebar-nav {
    max-height: calc(100vh - 100px);
  }
}

/* ====================================
   NAVEGACIÓN TABS MEJORADA
   ==================================== */

/* Nav tabs container */
.nav-tabs {
  border-bottom: 2px solid #e0e0e0 !important;
  margin-bottom: 0 !important;
  background: #f5f5f5 !important;
  padding: 8px 8px 0 8px !important;
  border-radius: 8px 8px 0 0 !important;
  box-shadow: none !important;
}

/* Nav items */
.nav-tabs .nav-item {
  margin-bottom: -2px !important;
  margin-right: 4px !important;
}

/* Nav links - estado normal */
.nav-tabs .nav-link {
  background: #ffffff !important;
  color: #666666 !important;
  border: 1px solid #e0e0e0 !important;
  border-bottom: 1px solid #e0e0e0 !important;
  border-radius: 6px 6px 0 0 !important;
  padding: 10px 16px !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  text-decoration: none !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 4px !important;
}

/* Nav links - hover */
.nav-tabs .nav-link:hover {
  background: #f0f7ff !important;
  color: #0066cc !important;
  border-color: #0066cc !important;
  border-bottom-color: #0066cc !important;
  transform: none !important;
  box-shadow: none !important;
  z-index: 2 !important;
}

/* Nav links - estado activo */
.nav-tabs .nav-link.active {
  background: #ffffff !important;
  color: #0066cc !important;
  border-color: #0066cc !important;
  border-bottom-color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  z-index: 3 !important;
  position: relative !important;
}

/* Indicador visual para el tab activo */
.nav-tabs .nav-link.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: #0066cc !important;
  border-radius: 0 !important;
}

/* Tab content */
.tab-content {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-top: none !important;
  border-radius: 0 6px 6px 6px !important;
  padding: var(--spacing-lg) !important;
  box-shadow: none !important;
  min-height: 400px !important;
  margin-top: -1px !important;
}

/* Tab pane */
.tab-pane {
  animation: fadeInUp 0.3s ease !important;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .nav-tabs {
    padding: 4px !important;
    flex-wrap: wrap !important;
  }

  .nav-tabs .nav-item {
    flex: 1 !important;
    margin-right: 2px !important;
    margin-bottom: 4px !important;
  }

  .nav-tabs .nav-link {
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-size: 0.85rem !important;
    min-height: 48px !important;
    text-align: center !important;
  }

  .tab-content {
    padding: var(--spacing-md) !important;
    min-height: 300px !important;
  }
}

/* Estados de focus para accesibilidad */
.nav-tabs .nav-link:focus {
  outline: 2px solid var(--primary-light) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.2) !important;
}

/* Mejoras para temas oscuros */
@media (prefers-color-scheme: dark) {
  .nav-tabs {
    background: #f5f5f5 !important;
    border-bottom-color: #e0e0e0 !important;
  }

  .nav-tabs .nav-link {
    background: #ffffff !important;
    color: #666666 !important;
    border-color: #e0e0e0 !important;
  }

  .tab-content {
    background: #ffffff !important;
    border-color: #e0e0e0 !important;
  }
}

/* Mejoras adicionales para tablas con bordes redondeados */

/* DataTables específico */
.dataTables_wrapper .table {
  border-radius: var(--border-radius-large);
  overflow: hidden;
}

.dataTables_wrapper .table-responsive {
  border-radius: var(--border-radius-large);
  overflow-x: auto !important;
}

/* Widget tables */
.content-widget .table-responsive {
  border-radius: var(--border-radius);
  overflow-x: auto !important;
  border: none;
  /* Eliminar borde para evitar doble efecto con la sombra del widget */
}

.content-widget .table {
  border-radius: 0;
  box-shadow: none;
  border: none;
}

/* Tablas con clase striped */
.table-striped>tbody>tr:nth-of-type(odd)>td,
.table-striped>tbody>tr:nth-of-type(odd)>th {
  background-color: rgba(33, 150, 243, 0.02);
}

/* Tablas hover mejoradas */
.table-hover>tbody>tr:hover>td,
.table-hover>tbody>tr:hover>th {
  background-color: rgba(33, 150, 243, 0.06);
  transition: background-color 0.2s ease;
}

/* Bordes redondeados para tablas dentro de cards */
.card .table-responsive:first-child {
  border-top-left-radius: calc(var(--border-radius-large) - 1px);
  border-top-right-radius: calc(var(--border-radius-large) - 1px);
}

.card .table-responsive:last-child {
  border-bottom-left-radius: calc(var(--border-radius-large) - 1px);
  border-bottom-right-radius: calc(var(--border-radius-large) - 1px);
}

/* Tablas sin header */
.table thead th {
  border-top: none;
}

/* Primera fila cuando no hay header */
.table:not(:has(thead)) tbody tr:first-child td:first-child {
  border-top-left-radius: var(--border-radius-large);
}

.table:not(:has(thead)) tbody tr:first-child td:last-child {
  border-top-right-radius: var(--border-radius-large);
}

/* Tablas dentro de modales */
.modal .table-responsive {
  border-radius: var(--border-radius);
  max-height: 400px;
  overflow-y: auto;
}

/* Sombras adicionales para profundidad */
.table-responsive:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s ease;
}

/* ====================================
   UTILIDADES PARA IMÁGENES
   ==================================== */

/* Imagen responsive básica */
.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Imagen que ocupa el tamaño completo del contenedor */
.img-container-full,
.tamano-completo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  object-position: center;
}

/* Imagen que ocupa el ancho completo manteniendo proporción */
.img-width-full {
  width: 100% !important;
  height: auto !important;
}

/* Imagen que ocupa la altura completa manteniendo proporción */
.img-height-full {
  height: 100% !important;
  width: auto !important;
}

/* Imagen que cubre completamente el contenedor (puede recortar) */
.img-cover {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

/* Clases de tamaño específico */
.tamano25porciento {
  width: 25% !important;
  height: auto !important;
}

.tamano50porciento {
  width: 50% !important;
  height: auto !important;
}

.tamano75porciento {
  width: 75% !important;
  height: auto !important;
}

.tamano100porciento {
  width: 100% !important;
  height: auto !important;
}

/* Imagen centrada */
.img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Imagen con bordes redondeados */
.img-rounded {
  border-radius: var(--border-radius);
}

.img-rounded-large {
  border-radius: var(--border-radius-large);
}

.img-circle {
  border-radius: 50%;
}

/* Imagen con sombra */
.img-shadow {
  box-shadow: var(--shadow);
}

.img-shadow-large {
  box-shadow: var(--shadow-strong);
}

/* Imagen con hover effect */
.img-hover {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.img-hover:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-strong);
}

/* Logo específico */
.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}

.logo-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Responsive para imágenes */
@media (max-width: 768px) {
  .tamano25porciento {
    width: 50% !important;
  }

  .tamano50porciento {
    width: 75% !important;
  }

  .tamano75porciento,
  .tamano100porciento {
    width: 100% !important;
  }

  .img-container-full {
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }
}

/* Mejoras para la imagen específica mencionada */
#imagen {
  transition: all var(--transition-normal);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

#imagen:hover {
  box-shadow: var(--shadow-strong);
  transform: scale(1.01);
}

/* =================================================================
   CORRECCIONES ESPECÍFICAS PARA MÓVILES
   Evitar elementos ocultos en pantallas pequeñas
   ================================================================= */

@media (max-width: 768px) and (orientation: portrait) {

  /* Corrección para altura de viewport en móviles */
  .modern-sidebar,
  .sidebar-dark,
  .sidebar {
    /* Fallback para navegadores sin soporte de svh */
    min-height: 100vh !important;
    min-height: 100svh !important;
    /* svh = small viewport height, más preciso */
  }

  /* Asegurar que el contenido principal sea visible con barras dinámicas */
  .body.flex-grow-1 {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px) !important;
    /* Fallbacks para navegadores sin dvh */
    min-height: calc(100vh - 120px) !important;
    max-height: calc(100vh - 80px) !important;
  }

  /* Soporte mejorado para navegadores modernos */
  @supports (height: 100dvh) {
    .body.flex-grow-1 {
      min-height: calc(100dvh - 120px) !important;
      /* dvh = dynamic viewport height */
      max-height: calc(100dvh - 80px) !important;
    }
  }

  /* Contenedor principal con margen dinámico */
  .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 30px !important;
    /* Fallback */
    min-height: calc(100vh - 140px) !important;
  }

  @supports (height: 100dvh) {
    .container-fluid {
      min-height: calc(100dvh - 140px) !important;
    }
  }

  /* Mejorar botones táctiles */
  .btn-sm {
    min-height: 44px !important;
    min-width: 44px !important;
    touch-action: manipulation !important;
  }

  /* Scroll suave en tablas */
  .table-responsive {
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 20px !important;
  }

  /* Evitar contenido cortado en modales */
  .modal-dialog {
    margin: 10px !important;
    max-width: calc(100vw - 20px) !important;
    /* Fallback */
    max-height: calc(100vh - 40px) !important;
  }

  @supports (height: 100dvh) {
    .modal-dialog {
      max-height: calc(100dvh - 40px) !important;
    }
  }

  /* Widget de contenido usa estilos desktop para consistencia */

  /* DataTables con espacio para barras del navegador */
  .dataTables_wrapper {
    padding-bottom: 20px !important;
  }
}

/* Correcciones adicionales para móviles en landscape */
@media (max-width: 896px) and (orientation: landscape) {
  .body.flex-grow-1 {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
    /* Fallback para navegadores sin dvh */
    min-height: calc(100vh - 80px) !important;
    min-height: calc(100dvh - 80px) !important;
  }

  /* Soporte específico para navegadores modernos */
  @supports (height: 100dvh) {
    .body.flex-grow-1 {
      min-height: calc(100dvh - 80px) !important;
    }
  }
}

/* Corrección adicional para barras de navegación dinámicas */
@media (max-width: 768px) {

  /* Asegurar espacio suficiente cuando aparecen las barras del navegador */
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* Contenido con margen inferior generoso - content-widget usa estilo desktop */
  .page-header+div:not(.content-widget) {
    margin-bottom: 40px !important;
  }

  /* Tablas con espacio adicional al final */
  .table-responsive:last-child,
  .content-widget:last-child {
    margin-bottom: 50px !important;
  }

  /* Botones y controles con margen inferior */
  .btn-group:last-child,
  .dataTables_info,
  .dataTables_paginate {
    margin-bottom: 30px !important;
  }

  /* Asegurar que los elementos flotantes no queden ocultos */
  .fixed-bottom,
  .position-fixed {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
  }
}

/* ========================================
   NOTAS DE COMPATIBILIDAD DEL NAVEGADOR
   ======================================== */

/*
  PROPIEDADES CSS MODERNAS UTILIZADAS:
  
  1. VIEWPORT UNITS (svh, dvh):
     - 100svh: Altura de viewport pequeña (sin barras dinámicas)
     - 100dvh: Altura de viewport dinámica (con barras dinámicas)
     - Fallback: 100vh para navegadores sin soporte
     - Soporte: Chrome 108+, Firefox 101+, Safari 15.4+
  
  2. CSS ENVIRONMENT VARIABLES:
     - env(safe-area-inset-bottom): Espacio para muescas y barras de navegación
     - Fallback automático: 0px si no está soportado
     - Soporte: iOS Safari 11.1+, Chrome 69+, Firefox 69+
  
  3. BACKDROP-FILTER:
     - backdrop-filter: blur(): Efectos de desenfoque de fondo
     - Fallback: Colores sólidos con transparencia en su lugar
     - Soporte: Chrome 76+, Safari 9+, Firefox 103+
  
  4. @SUPPORTS QUERIES:
     - Detecta soporte nativo para propiedades modernas
     - Aplica estilos progresivamente mejorados
     - Soporte universal en navegadores modernos
  
  ESTRATEGIA DE FALLBACKS:
  - Primero se define el fallback (vh, colores sólidos)
  - Luego se aplica la versión moderna si está disponible
  - @supports proporciona detección de características
  
  NAVEGADORES OBJETIVO:
  - Chrome/Edge 76+ (soporte completo)
  - Firefox 103+ (soporte completo)  
  - Safari 15.4+ (soporte completo)
  - iOS Safari 11.1+ (soporte parcial con fallbacks)
  - Navegadores antiguos: funcionalidad básica garantizada
*/

/* ========================================
   OPTIMIZACIONES ESPECÍFICAS PARA iPAD
   ======================================== */

/* iPad estándar en portrait (768x1024) */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {

  /* Ajustar sidebar para iPad portrait */
  .modern-sidebar,
  .sidebar-dark,
  .sidebar {
    min-height: 100vh !important;
    min-height: 100svh !important;
  }

  /* Optimizar contenido principal */
  .body.flex-grow-1 {
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 30px) !important;
  }

  /* Botones más grandes para touch */
  .btn-sm {
    min-height: 48px !important;
    min-width: 48px !important;
    font-size: 0.9rem !important;
  }

  /* DataTables optimizado */
  .dataTables_wrapper {
    font-size: 0.9rem !important;
  }

  .dataTables_filter input {
    padding: 8px 12px !important;
    min-height: 44px !important;
  }
}

/* iPad estándar en landscape (1024x768) */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {

  /* En landscape, usar todo el espacio vertical disponible */
  .modern-sidebar,
  .sidebar-dark,
  .sidebar {
    min-height: 100vh !important;
    min-height: 100svh !important;
  }

  /* Contenido principal más compacto en landscape */
  .body.flex-grow-1 {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
    min-height: calc(100vh - 60px) !important;
  }

  @supports (height: 100dvh) {
    .body.flex-grow-1 {
      min-height: calc(100dvh - 60px) !important;
    }
  }

  /* Optimizar tablas para landscape de iPad */
  .table-responsive {
    margin-bottom: 15px !important;
  }

  /* Modales más eficientes en landscape */
  .modal-dialog {
    max-width: 90vw !important;
    margin: 2vh auto !important;
  }
}

/* iPad Pro 11" (834x1194) */
@media only screen and (min-device-width: 834px) and (max-device-width: 1194px) and (-webkit-min-device-pixel-ratio: 2) {

  /* Aprovechar el espacio extra del iPad Pro */
  .container-fluid {
    max-width: 95% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Botones optimizados para iPad Pro */
  .btn-sm {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 8px 12px !important;
  }
}

/* iPad Pro 12.9" (1024x1366) */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {

  /* Usar diseño casi de escritorio en iPad Pro grande */
  .container-fluid {
    max-width: 92% !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
  }

  /* Mantener botones touch-friendly pero más elegantes */
  .btn-sm {
    min-height: 42px !important;
    min-width: 42px !important;
  }

  /* DataTables con paginación más grande */
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 8px 12px !important;
  }
}

/* Solución general para problemas de hover en iPad */
@media (hover: none) and (pointer: coarse) {

  /* Remover efectos hover en dispositivos touch */
  .table-row-hover:hover {
    background-color: inherit !important;
  }

  /* Botones con estados touch mejorados */
  .btn:hover {
    transform: none !important;
  }

  .btn:active,
  .btn:focus {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
  }

  /* Tooltips más grandes en touch */
  .tippy-box {
    font-size: 14px !important;
    padding: 8px 12px !important;
  }
}

/* === FOOTER FIXES === */
/* Solución definitiva para el footer en todas las resoluciones */
html,
body {
  height: 100% !important;
  min-height: 100vh !important;
}

body {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Wrapper principal que ocupa todo el espacio */
.sidebar:not(.sidebar-end)~*,
.main-wrapper,
.page-wrapper,
.content-wrapper {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Footer siempre al final */
footer {
  flex-shrink: 0 !important;
  margin-top: auto !important;
  width: 100% !important;
  position: relative !important;
  z-index: 1 !important;
}

/* === TEXT OVERFLOW PREVENTION === */
/* Reglas generales para prevenir desbordamiento de texto */

/* Contenedores principales */
.card-body,
.content-widget,
.container-fluid,
.widget-body {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* Títulos y encabezados */
h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.widget-title,
.page-title {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  max-width: 100% !important;
}

/* Elementos de navegación */
.nav-text,
.sidebar-title,
.breadcrumb-item {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* Botones con texto largo */
.btn {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  text-align: center !important;
}

/* Alertas y notificaciones */
.alert,
.notification,
.toast {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
}

/* Corrección específica para notificaciones tipo toast */
.notification.position-fixed {
  height: auto !important;
  min-height: unset !important;
  max-height: 300px !important;
  overflow: visible !important;
}

/* Formularios */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select,
.form-control {
  max-width: 100% !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Badges personalizados más grandes */
.badge.badge-sm {
  font-size: 0.7rem !important;
  padding: 0.25rem 0.5rem !important;
}

.badge.badge-lg {
  font-size: 0.95rem !important;
  padding: 0.5rem 0.8rem !important;
  font-weight: 600 !important;
}

.badge.badge-xl {
  font-size: 1.1rem !important;
  padding: 0.6rem 1rem !important;
  font-weight: 600 !important;
  border-radius: 0.5rem !important;
}

.badge.badge-xxl {
  font-size: 1.25rem !important;
  padding: 0.75rem 1.2rem !important;
  font-weight: 700 !important;
  border-radius: 0.6rem !important;
}

/* Badges con mejor legibilidad */
.badge.badge-readable {
  font-size: 0.875rem !important;
  padding: 0.4rem 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.025rem !important;
}

/* Contenedor de botones de exportación - Flexbox con wrap */
.export-buttons-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Botones de exportación - tamaño adaptable */
.export-button {
  flex: 0 1 auto !important;
  min-width: 160px !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: break-word !important;
  text-align: center !important;
  height: auto !important;
  padding: 0.5rem 1rem !important;
  line-height: 1.4 !important;
}

/* Responsive: en pantallas pequeñas, botones al 100% */
@media (max-width: 576px) {
  .export-button {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   ESTILOS GENERALES CHOICES.JS Y SELECTS (Bordes Redondeados)
   ========================================================= */

.choices {
  margin-bottom: var(--spacing-sm);
}

.choices__inner {
  border: 1px solid var(--border) !important;
  border-radius: var(--border-radius) !important;
  background-color: var(--surface) !important;
  padding: 0.4rem 0.8rem !important;
  min-height: 45px !important;
  display: flex !important;
  align-items: center !important;
  transition: var(--transition-normal) !important;
  box-shadow: var(--shadow-sm) !important;
}

.choices.is-focused .choices__inner {
  border-color: var(--primary-light) !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15) !important;
}

.choices__list--dropdown {
  border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
}

.choices.is-open .choices__inner {
  border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: var(--primary) !important;
  color: white !important;
}

/* =========================================================
   COMPATIBILIDAD EXTERNA MODO OSCURO (SweetAlert2, Choices, Selects)
   ========================================================= */

[data-coreui-theme="dark"] .swal2-popup {
  background: var(--surface) !important;
  color: var(--text) !important;
}

[data-coreui-theme="dark"] .swal2-title,
[data-coreui-theme="dark"] .swal2-html-container,
[data-coreui-theme="dark"] .swal2-content {
  color: var(--text) !important;
}

[data-coreui-theme="dark"] select:not([multiple]),
[data-coreui-theme="dark"] option {
  background-color: var(--surface) !important;
  color: var(--text) !important;
}

[data-coreui-theme="dark"] .choices__inner {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

[data-coreui-theme="dark"] .choices__list--dropdown,
[data-coreui-theme="dark"] .choices__list[aria-expanded] {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

[data-coreui-theme="dark"] .choices__list--dropdown .choices__item,
[data-coreui-theme="dark"] .choices__list[aria-expanded] .choices__item {
  color: var(--text) !important;
}

[data-coreui-theme="dark"] .choices__list--single .choices__item {
  color: var(--text) !important;
}

[data-coreui-theme="dark"] .choices__input {
  background-color: var(--surface-variant) !important;
  color: var(--text) !important;
}


[data-coreui-theme="dark"] .modal-content {
  background-color: var(--surface) !important;
  color: var(--text) !important;
}

[data-coreui-theme="dark"] .modal-header {
  background-color: var(--surface-variant) !important;
  color: var(--text) !important;
  border-bottom-color: var(--border) !important;
}

[data-coreui-theme="dark"] .modal-footer {
  border-top-color: var(--border-light) !important;
  background-color: var(--surface-variant) !important;
}

/* Adaptación de utilidades comunes de Bootstrap para Modo Oscuro */
[data-coreui-theme="dark"] .bg-light {
  background-color: var(--surface-variant) !important;
}

[data-coreui-theme="dark"] .text-dark {
  color: var(--text) !important;
}

[data-coreui-theme="dark"] .border-light {
  border-color: var(--border) !important;
}

[data-coreui-theme="dark"] .card.bg-light {
  background-color: var(--surface-variant) !important;
  border: 1px solid var(--border) !important;
}

[data-coreui-theme="dark"] .bg-body-tertiary {
  background-color: var(--background) !important;
}

[data-coreui-theme="dark"] .verificar-bateria-header {
  background: linear-gradient(135deg, var(--primary-dark) 0%, #1e1b4b 100%) !important;
}

[data-coreui-theme="dark"] .verificar-bateria-avatar {
  background-color: var(--surface-variant) !important;
}

[data-coreui-theme="dark"] .verificar-bateria-icon-error {
  opacity: 0.8;
}

/* Nav Tabs en Modo Oscuro */
[data-coreui-theme="dark"] .nav-tabs {
  --cui-nav-tabs-border-color: var(--border) !important;
  --cui-nav-tabs-link-active-bg: var(--surface) !important;
  --cui-nav-tabs-link-active-color: var(--text) !important;
  --cui-nav-tabs-link-active-border-color: var(--border) var(--border) var(--surface) !important;
  --cui-nav-tabs-link-hover-border-color: var(--border-light) var(--border-light) var(--border) !important;
  border-bottom-color: var(--border) !important;
  background-color: transparent !important;
}

[data-coreui-theme="dark"] .nav-tabs .nav-link {
  color: var(--text-secondary) !important;
  background-color: transparent !important;
}

[data-coreui-theme="dark"] .nav-tabs .nav-link:hover,
[data-coreui-theme="dark"] .nav-tabs .nav-link:focus {
  border-color: var(--border-light) var(--border-light) var(--border) !important;
  background-color: var(--surface-variant) !important;
  color: var(--text) !important;
}

[data-coreui-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--surface) !important;
  color: var(--primary-light) !important;
  border-color: var(--border) var(--border) var(--surface) !important;
}

/* Tab Content en Modo Oscuro */
[data-coreui-theme="dark"] .tab-content,
[data-coreui-theme="dark"] .tab-pane {
  background-color: transparent !important;
  color: var(--text) !important;
  border: none !important;
}



[data-coreui-theme="dark"] .tab-pane hr {
  border-color: var(--border) !important;
  opacity: 0.2;
}

/* ==========================================================================
   ESTADOS DINÁMICOS Y ANIMACIONES (Para JS)
   ========================================================================== */

/* Dashboards Stats Loading */
.stats-number-loading {
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

/* Dashboard Card Animation */
.card-animate-refresh {
  animation: cardPulse 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cardPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

/* Modern Notifications System */
.notification-modern {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  min-width: 300px;
  max-width: 400px;
  padding: 1rem;
  border-radius: 12px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
}

.notification-modern.success {
  border-left: 4px solid var(--success);
}

.notification-modern.error {
  border-left: 4px solid var(--danger);
}

.notification-modern.info {
  border-left: 4px solid var(--info);
}

.notification-modern.warning {
  border-left: 4px solid var(--warning);
}

@keyframes slideInRight {
  from {
    transform: translateX(120%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(120%);
    opacity: 0;
  }
}

.notification-modern-closing {
  animation: slideOutRight 0.3s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

@media (max-width: 768px) {
  .notification-modern {
    top: 10px;
    right: 10px;
    left: 10px;
    min-width: auto;
    max-width: none;
  }
}

/* SWAL2 Custom Adjustments for Dark Mode */
[data-coreui-theme="dark"] .swal2-popup {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-xl) !important;
}

[data-coreui-theme="dark"] .swal2-title,
[data-coreui-theme="dark"] .swal2-html-container {
  color: var(--text) !important;
}

[data-coreui-theme="dark"] .custom-icon {
  background-color: var(--surface-variant) !important;
  border-color: var(--border) !important;
}

/* ==========================================================================
   DROPDOWN DE USUARIO (Cabecera)
   ========================================================================== */

.modern-dropdown-menu {
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem 0;
  min-width: 200px;
  background-color: var(--surface);
}

.modern-dropdown-menu .dropdown-header {
  color: var(--text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.5rem 1rem;
}

.modern-dropdown-menu .dropdown-divider {
  border-top-color: var(--border);
  opacity: 0.6;
  margin: 0.25rem 0;
}

.modern-dropdown-item {
  color: var(--text);
  padding: 0.5rem 1rem;
  border-radius: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
  display: flex;
  align-items: center;
}

.modern-dropdown-item:hover {
  background-color: var(--surface-variant);
  color: var(--primary-light);
}

.modern-dropdown-item.text-danger:hover {
  background-color: rgba(231, 76, 60, 0.1);
  color: var(--danger) !important;
}

/* Dark Mode — explicit overrides for dropdown containers */
[data-coreui-theme="dark"] .dropdown-menu,
[data-coreui-theme="dark"] .modern-dropdown-menu {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

[data-coreui-theme="dark"] .dropdown-menu .dropdown-header,
[data-coreui-theme="dark"] .modern-dropdown-menu .dropdown-header {
  color: var(--text-secondary) !important;
}

[data-coreui-theme="dark"] .dropdown-menu .dropdown-divider,
[data-coreui-theme="dark"] .modern-dropdown-menu .dropdown-divider {
  border-top-color: var(--border) !important;
}

[data-coreui-theme="dark"] .dropdown-item,
[data-coreui-theme="dark"] .modern-dropdown-item {
  color: var(--text) !important;
  background-color: transparent !important;
}

[data-coreui-theme="dark"] .dropdown-item:hover,
[data-coreui-theme="dark"] .modern-dropdown-item:hover {
  background-color: var(--surface-variant) !important;
  color: var(--primary-light) !important;
}

[data-coreui-theme="dark"] .modern-dropdown-item.text-danger,
[data-coreui-theme="dark"] .dropdown-item.text-danger {
  color: var(--danger) !important;
}

[data-coreui-theme="dark"] .modern-dropdown-item.text-danger:hover,
[data-coreui-theme="dark"] .dropdown-item.text-danger:hover {
  background-color: rgba(231, 76, 60, 0.12) !important;
  color: var(--danger) !important;
}