/*
Devline DTE - Modern Theme System (Bootstrap 4)
Diseño profesional con contraste optimizado WCAG AA para modo claro y oscuro.
Paleta moderna, transiciones suaves y excelente legibilidad.
Fuente: Inter - Optimizada para interfaces digitales
*/

/* ========================================
   FUENTES - Inter Variable Font System
   ======================================== */
:root {
  /* Familias de fuentes */
  --brand-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  --brand-font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Roboto Mono', 'Courier New', monospace;
  
  /* Pesos de fuente */
  --brand-font-light: 300;
  --brand-font-regular: 400;
  --brand-font-medium: 500;
  --brand-font-semibold: 600;
  --brand-font-bold: 700;
  --brand-font-extrabold: 800;
  
  /* Tamaños de fuente optimizados */
  --brand-font-xs: 0.75rem;      /* 12px */
  --brand-font-sm: 0.8125rem;    /* 13px */
  --brand-font-base: 0.875rem;   /* 14px - base más compacto */
  --brand-font-md: 0.9375rem;    /* 15px */
  --brand-font-lg: 1rem;         /* 16px */
  --brand-font-xl: 1.125rem;     /* 18px */
  --brand-font-2xl: 1.25rem;     /* 20px */
  --brand-font-3xl: 1.5rem;      /* 24px */
  --brand-font-4xl: 1.875rem;    /* 30px */
  
  /* Alturas de línea */
  --brand-line-tight: 1.25;
  --brand-line-normal: 1.5;
  --brand-line-relaxed: 1.75;
  
  /* Espaciado de letras */
  --brand-tracking-tight: -0.025em;
  --brand-tracking-normal: 0;
  --brand-tracking-wide: 0.025em;
}

/* ========================================
   MODO CLARO - Profesional y con contraste
   ======================================== */
:root, [data-theme="light"] {
  /* Colores primarios - Ajustados para mejor contraste */
  --brand-primary: #0066CC;          /* Azul principal más profundo */
  --brand-primary-hover: #0052A3;    /* Hover más oscuro */
  --brand-primary-light: #E6F2FF;    /* Fondo suave para badges/alerts */
  
  --brand-secondary: #475569;        /* Gris neutro legible */
  --brand-secondary-hover: #334155;
  --brand-secondary-light: #F1F5F9;
  
  --brand-success: #059669;          /* Verde más saturado */
  --brand-success-hover: #047857;
  --brand-success-light: #D1FAE5;
  
  --brand-info: #0284C7;             /* Cian profesional */
  --brand-info-hover: #0369A1;
  --brand-info-light: #E0F2FE;
  
  --brand-warning: #D97706;          /* Naranja visible */
  --brand-warning-hover: #B45309;
  --brand-warning-light: #FEF3C7;
  
  --brand-danger: #DC2626;           /* Rojo intenso */
  --brand-danger-hover: #B91C1C;
  --brand-danger-light: #FEE2E2;

  /* Fondos y superficies - Reducir luminosidad para menos fatiga visual */
  --brand-bg: #F8FAFC;               /* Gris muy claro (no blanco puro) */
  --brand-bg-alt: #F1F5F9;           /* Alternativo para secciones */
  --brand-bg-accent: #E2E8F0;        /* Acentos sutiles */
  --brand-card: #FFFFFF;             /* Cards sobre fondo claro */
  --brand-card-hover: #FAFBFC;       /* Hover en cards */

  /* Texto - Alto contraste */
  --brand-text: #0F172A;             /* Texto principal (ratio 14.5:1) */
  --brand-text-secondary: #334155;   /* Texto secundario (ratio 8:1) */
  --brand-text-muted: #64748B;       /* Texto muted (ratio 5:1) */
  --brand-text-disabled: #94A3B8;    /* Texto deshabilitado */

  /* Enlaces */
  --brand-link: #0066CC;
  --brand-link-hover: #0052A3;
  --brand-link-visited: #4C1D95;     /* Enlaces visitados púrpura */

  /* Encabezados */
  --brand-heading: #0F172A;
  --brand-heading-secondary: #1E293B;

  /* Bordes */
  --brand-border: #CBD5E1;           /* Borde estándar */
  --brand-border-light: #E2E8F0;     /* Borde suave */
  --brand-border-dark: #94A3B8;      /* Borde enfático */

  /* Sombras - Más sutiles y profesionales */
  --brand-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --brand-shadow-sm: 0 2px 4px 0 rgba(15, 23, 42, 0.08);
  --brand-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -1px rgba(15, 23, 42, 0.06);
  --brand-shadow-md: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
  --brand-shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04);

  /* Bordes redondeados */
  --brand-radius-sm: 0.375rem;
  --brand-radius: 0.5rem;
  --brand-radius-md: 0.75rem;
  --brand-radius-lg: 1rem;

  /* Transiciones */
  --brand-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --brand-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   MODO OSCURO - Contraste óptimo sin deslumbramiento
   ======================================== */
[data-theme="dark"] {
  /* Colores primarios - Luminosidad ajustada para fondo oscuro */
  --brand-primary: #3B82F6;          /* Azul más brillante pero no cegador */
  --brand-primary-hover: #60A5FA;    /* Hover más claro en oscuro */
  --brand-primary-light: #1E3A5F;    /* Fondo oscuro para badges */
  
  --brand-secondary: #94A3B8;        /* Gris claro legible */
  --brand-secondary-hover: #CBD5E1;
  --brand-secondary-light: #1E293B;
  
  --brand-success: #10B981;          /* Verde brillante */
  --brand-success-hover: #34D399;
  --brand-success-light: #064E3B;
  
  --brand-info: #06B6D4;             /* Cian vibrante */
  --brand-info-hover: #22D3EE;
  --brand-info-light: #164E63;
  
  --brand-warning: #F59E0B;          /* Naranja cálido */
  --brand-warning-hover: #FBBF24;
  --brand-warning-light: #78350F;
  
  --brand-danger: #EF4444;           /* Rojo brillante */
  --brand-danger-hover: #F87171;
  --brand-danger-light: #7F1D1D;

  /* Fondos oscuros - Bien balanceados */
  --brand-bg: #0F172A;               /* Fondo principal oscuro profundo */
  --brand-bg-alt: #1E293B;           /* Alternativo más claro */
  --brand-bg-accent: #334155;        /* Acentos */
  --brand-card: #1E293B;             /* Cards elevados */
  --brand-card-hover: #253449;       /* Hover en cards */

  /* Texto - Alto contraste en oscuro */
  --brand-text: #F1F5F9;             /* Texto principal claro (ratio 13:1) */
  --brand-text-secondary: #CBD5E1;   /* Texto secundario (ratio 9:1) */
  --brand-text-muted: #94A3B8;       /* Texto muted (ratio 5:1) */
  --brand-text-disabled: #64748B;    /* Texto deshabilitado */

  /* Enlaces en oscuro */
  --brand-link: #60A5FA;
  --brand-link-hover: #93C5FD;
  --brand-link-visited: #A78BFA;

  /* Encabezados */
  --brand-heading: #F8FAFC;
  --brand-heading-secondary: #E2E8F0;

  /* Bordes en oscuro */
  --brand-border: #334155;
  --brand-border-light: #1E293B;
  --brand-border-dark: #475569;

  /* Sombras en oscuro - Más intensas para profundidad */
  --brand-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --brand-shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
  --brand-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --brand-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --brand-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
}

/* ========================================
   ESTILOS BASE Y TIPOGRAFÍA
   ======================================== */
body {
  font-family: var(--brand-font-family);
  font-size: var(--brand-font-base);
  font-weight: var(--brand-font-regular);
  line-height: var(--brand-line-normal);
  background-color: var(--brand-bg) !important;
  color: var(--brand-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'tnum' 1, 'cv08' 1, 'ss01' 1; /* Números tabulares + variantes mejoradas */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Tipografía optimizada con mejor jerarquía */
h1, .h1 { 
  color: var(--brand-heading); 
  font-weight: var(--brand-font-bold);
  font-size: var(--brand-font-4xl);
  line-height: var(--brand-line-tight);
  letter-spacing: var(--brand-tracking-tight);
  margin-bottom: 1rem;
}
h2, .h2 { 
  color: var(--brand-heading); 
  font-weight: var(--brand-font-semibold);
  font-size: var(--brand-font-3xl);
  line-height: var(--brand-line-tight);
  letter-spacing: var(--brand-tracking-tight);
  margin-bottom: 0.875rem;
}
h3, .h3 { 
  color: var(--brand-heading); 
  font-weight: var(--brand-font-semibold);
  font-size: var(--brand-font-2xl);
  line-height: var(--brand-line-normal);
  margin-bottom: 0.75rem;
}
h4, .h4 { 
  color: var(--brand-heading-secondary); 
  font-weight: var(--brand-font-semibold);
  font-size: var(--brand-font-xl);
  line-height: var(--brand-line-normal);
  margin-bottom: 0.625rem;
}
h5, .h5 { 
  color: var(--brand-heading-secondary); 
  font-weight: var(--brand-font-medium);
  font-size: var(--brand-font-lg);
  line-height: var(--brand-line-normal);
  margin-bottom: 0.5rem;
}
h6, .h6 { 
  color: var(--brand-heading-secondary); 
  font-weight: var(--brand-font-medium);
  font-size: var(--brand-font-md);
  line-height: var(--brand-line-normal);
  margin-bottom: 0.5rem;
}

/* Párrafos optimizados */
p {
  margin-bottom: 1rem;
  line-height: var(--brand-line-normal);
}

/* Texto auxiliar y muted */
small, .small, .form-text { 
  color: var(--brand-text-muted) !important; 
  font-size: var(--brand-font-sm);
}
.text-muted { 
  color: var(--brand-text-muted) !important; 
}
.text-secondary {
  color: var(--brand-text-secondary) !important;
}

/* Enlaces con transición suave */
a { 
  color: var(--brand-link);
  transition: var(--brand-transition-fast);
  text-decoration: none;
  font-weight: var(--brand-font-medium);
}
a:hover, a:focus { 
  color: var(--brand-link-hover); 
  text-decoration: underline;
}
a:visited {
  color: var(--brand-link-visited);
}

/* Código y monospace */
code, kbd, pre, samp {
  font-family: var(--brand-font-mono);
  font-size: var(--brand-font-sm);
  font-feature-settings: 'tnum' 1; /* Números tabulares en código */
}

/* Labels mejorados */
label { 
  color: var(--brand-text-secondary); 
  font-weight: 500;
  margin-bottom: 0.5rem;
}

/* ========================================
   CONTENEDORES Y LAYOUT
   ======================================== */
.main-container {
  background: var(--brand-card);
  border-radius: var(--brand-radius-md);
  box-shadow: var(--brand-shadow);
  padding: 1.5rem;
  border: 1px solid var(--brand-border);
  transition: var(--brand-transition);
}

@media (min-width: 768px) {
  .main-container {
    padding: 2rem;
  }
}

/* ========================================
   NAVBAR - Moderno y con transiciones
   ======================================== */
.navbar-light {
  background-color: var(--brand-card) !important;
  border-radius: var(--brand-radius);
  box-shadow: var(--brand-shadow-sm);
  border: 1px solid var(--brand-border);
  transition: var(--brand-transition);
  padding: 0.75rem 1rem;
}

.navbar-light .navbar-brand {
  color: var(--brand-heading);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  transition: var(--brand-transition-fast);
}

.navbar-light .navbar-brand:hover, 
.navbar-light .navbar-brand:focus {
  color: var(--brand-primary);
  transform: translateY(-1px);
}

.navbar-light .nav-link { 
  color: var(--brand-text-secondary);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: var(--brand-radius-sm);
  transition: var(--brand-transition-fast);
  position: relative;
}

.navbar-light .nav-link:hover {
  color: var(--brand-primary);
  background-color: var(--brand-primary-light);
}

.navbar-light .nav-link.disabled { 
  color: var(--brand-text-disabled);
  opacity: 0.6;
}

/* Estados activos con indicador visual */
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active { 
  color: var(--brand-primary);
  background-color: var(--brand-primary-light);
  font-weight: 600;
}

.navbar-light .nav-item.active .nav-link {
  color: var(--brand-primary);
  position: relative;
}

.navbar-light .nav-item.active .nav-link::after {
  content: "";
  position: absolute;
  left: 0.5rem; 
  right: 0.5rem; 
  bottom: 0;
  height: 2px;
  background: var(--brand-primary);
  border-radius: 2px 2px 0 0;
}

/* Dropdown del navbar */
.navbar-light .dropdown-menu { 
  background-color: var(--brand-card); 
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  box-shadow: var(--brand-shadow-md);
  padding: 0.5rem 0;
  margin-top: 0.5rem;
}

.navbar-light .dropdown-item { 
  color: var(--brand-text);
  padding: 0.5rem 1.25rem;
  transition: var(--brand-transition-fast);
  font-weight: 500;
}

.navbar-light .dropdown-item:hover, 
.navbar-light .dropdown-item:focus { 
  color: var(--brand-primary); 
  background-color: var(--brand-primary-light);
}

.navbar-light .dropdown-item i,
.navbar-light .dropdown-item .fa,
.navbar-light .dropdown-item .fas {
  margin-right: 0.5rem;
  width: 1.25rem;
  text-align: center;
}

.navbar-light .navbar-text { 
  color: var(--brand-text-muted); 
}

.navbar-light .navbar-toggler { 
  border-color: var(--brand-border);
  padding: 0.5rem;
  transition: var(--brand-transition-fast);
}

.navbar-light .navbar-toggler:hover {
  background-color: var(--brand-bg-alt);
}

.navbar-light .navbar-toggler-icon { 
  filter: contrast(1.2); 
}

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

/* ========================================
   BOTONES - Modernos con efectos
   ======================================== */
.btn {
  font-family: var(--brand-font-family);
  font-weight: var(--brand-font-medium);
  font-size: var(--brand-font-base);
  letter-spacing: var(--brand-tracking-normal);
  transition: var(--brand-transition-fast);
  border-radius: var(--brand-radius);
  padding: 0.5rem 1.25rem;
  border-width: 1px;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--brand-shadow-sm);
}

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

/* Botón Primary */
.btn-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-primary-hover) !important;
  border-color: var(--brand-primary-hover) !important;
  box-shadow: 0 0 0 0.2rem var(--brand-primary-light);
}

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

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
}

/* Botón Secondary */
.btn-secondary {
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: #ffffff !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--brand-secondary-hover) !important;
  border-color: var(--brand-secondary-hover) !important;
  box-shadow: 0 0 0 0.2rem var(--brand-secondary-light);
}

.btn-outline-secondary { 
  color: var(--brand-secondary); 
  border-color: var(--brand-secondary);
  background-color: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus { 
  background-color: var(--brand-secondary); 
  border-color: var(--brand-secondary);
  color: #ffffff;
}

/* Botones de estado */
.btn-success { 
  background-color: var(--brand-success) !important; 
  border-color: var(--brand-success) !important;
  color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus {
  background-color: var(--brand-success-hover) !important;
  border-color: var(--brand-success-hover) !important;
  box-shadow: 0 0 0 0.2rem var(--brand-success-light);
}

.btn-info { 
  background-color: var(--brand-info) !important; 
  border-color: var(--brand-info) !important;
  color: #ffffff !important;
}

.btn-info:hover,
.btn-info:focus {
  background-color: var(--brand-info-hover) !important;
  border-color: var(--brand-info-hover) !important;
  box-shadow: 0 0 0 0.2rem var(--brand-info-light);
}

.btn-warning { 
  background-color: var(--brand-warning) !important; 
  border-color: var(--brand-warning) !important;
  color: #ffffff !important;
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--brand-warning-hover) !important;
  border-color: var(--brand-warning-hover) !important;
  box-shadow: 0 0 0 0.2rem var(--brand-warning-light);
}

.btn-danger { 
  background-color: var(--brand-danger) !important; 
  border-color: var(--brand-danger) !important;
  color: #ffffff !important;
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--brand-danger-hover) !important;
  border-color: var(--brand-danger-hover) !important;
  box-shadow: 0 0 0 0.2rem var(--brand-danger-light);
}

/* ========================================
   BADGES - Modernos y legibles
   ======================================== */
.badge {
  font-weight: 600;
  padding: 0.35em 0.65em;
  border-radius: var(--brand-radius-sm);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.badge-primary { 
  background-color: var(--brand-primary) !important;
  color: #ffffff !important; 
}

.badge-secondary {
  background-color: var(--brand-secondary) !important;
  color: #ffffff !important;
}

.badge-success { 
  background-color: var(--brand-success) !important;
  color: #ffffff !important; 
}

.badge-info { 
  background-color: var(--brand-info) !important;
  color: #ffffff !important; 
}

.badge-warning { 
  background-color: var(--brand-warning) !important;
  color: #ffffff !important; 
}

.badge-danger { 
  background-color: var(--brand-danger) !important;
  color: #ffffff !important; 
}

/* Backgrounds de estado */
.bg-primary { background-color: var(--brand-primary) !important; }
.bg-secondary { background-color: var(--brand-secondary) !important; }
.bg-success { background-color: var(--brand-success) !important; }
.bg-info { background-color: var(--brand-info) !important; }
.bg-warning { background-color: var(--brand-warning) !important; }
.bg-danger { background-color: var(--brand-danger) !important; }

/* ========================================
   CARDS - Elegantes con profundidad
   ======================================== */
.card { 
  background-color: var(--brand-card);
  border: 1px solid var(--brand-border); 
  box-shadow: var(--brand-shadow-sm); 
  border-radius: var(--brand-radius);
  transition: var(--brand-transition);
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--brand-shadow-md);
  border-color: var(--brand-border-dark);
}

.card-header { 
  background-color: var(--brand-bg-alt); 
  border-bottom: 1px solid var(--brand-border); 
  font-weight: 600;
  padding: 1rem 1.25rem;
  color: var(--brand-heading-secondary);
}

.card-footer { 
  background-color: var(--brand-bg-alt); 
  border-top: 1px solid var(--brand-border);
  padding: 0.75rem 1.25rem;
}

.card-body {
  padding: 1.25rem;
}

.card-title { 
  color: var(--brand-heading);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.card-subtitle { 
  color: var(--brand-text-secondary);
  font-weight: 500;
}

.card-text { 
  color: var(--brand-text); 
}

/* ========================================
   FORMULARIOS - Modernos y accesibles
   ======================================== */
.form-control { 
  font-family: var(--brand-font-family);
  font-size: var(--brand-font-base);
  font-weight: var(--brand-font-regular);
  border-radius: var(--brand-radius);
  background-color: var(--brand-card);
  border: 1px solid var(--brand-border);
  color: var(--brand-text);
  padding: 0.5rem 0.75rem;
  transition: var(--brand-transition-fast);
  height: calc(1.5em + 1rem + 2px);
  line-height: 1.5;
  font-feature-settings: 'tnum' 1; /* Números tabulares en inputs */
}

.form-control:focus { 
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem var(--brand-primary-light);
  background-color: var(--brand-card);
  outline: 0;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--brand-bg-alt);
  color: var(--brand-text-disabled);
  opacity: 1;
}

.form-group label { 
  font-family: var(--brand-font-family);
  font-size: var(--brand-font-sm);
  font-weight: var(--brand-font-medium);
  color: var(--brand-text-secondary);
  margin-bottom: 0.5rem;
  display: inline-block;
  letter-spacing: var(--brand-tracking-normal);
}

/* Input Groups */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group > .form-control {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  margin-bottom: 0;
}

.input-group-prepend,
.input-group-append {
  display: flex;
}

.input-group-prepend {
  margin-right: -1px;
}

.input-group-append {
  margin-left: -1px;
}

.input-group-text { 
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--brand-text-secondary);
  text-align: center;
  white-space: nowrap;
  background-color: var(--brand-bg-alt);
  border: 1px solid var(--brand-border);
  transition: var(--brand-transition-fast);
}

.input-group-text a {
  color: var(--brand-primary);
  transition: var(--brand-transition-fast);
}

.input-group-text a:hover {
  color: var(--brand-primary-hover);
  text-decoration: none;
}

.input-group-text i,
.input-group-text .fa,
.input-group-text .fas,
.input-group-text .far {
  font-size: 1rem;
  line-height: 1;
}

.input-group-prepend .input-group-text {
  border-right: 0;
  border-radius: var(--brand-radius) 0 0 var(--brand-radius);
}

.input-group-append .input-group-text {
  border-left: 0;
  border-radius: 0 var(--brand-radius) var(--brand-radius) 0;
}

.input-group-prepend + .form-control {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group .form-control:focus ~ .input-group-append .input-group-text,
.input-group .form-control:focus + .input-group-append .input-group-text {
  border-color: var(--brand-primary);
}

/* Selects nativos y custom-select */
.custom-select, 
select.form-control { 
  background-color: var(--brand-card);
  color: var(--brand-text);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  transition: var(--brand-transition-fast);
  height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath fill='%2364748B' d='M6 9L1 4h10z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Select en modo oscuro - ajustar color del icono */
[data-theme="dark"] .custom-select,
[data-theme="dark"] select.form-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath fill='%2394A3B8' d='M6 9L1 4h10z'/%3e%3c/svg%3e");
}

.custom-select:focus,
select.form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem var(--brand-primary-light);
  outline: 0;
}

.custom-select:disabled,
select.form-control:disabled,
.custom-select[readonly],
select.form-control[readonly] {
  background-color: var(--brand-bg-alt);
  color: var(--brand-text-disabled);
  cursor: not-allowed;
  opacity: 1;
}

/* Opciones del select */
.custom-select option,
select.form-control option {
  background-color: var(--brand-card);
  color: var(--brand-text);
  padding: 0.5rem;
}

/* Select múltiple (tamaño específico) */
select.form-control[multiple],
select.form-control[size]:not([size="1"]) {
  height: auto;
  padding: 0.5rem;
  background-image: none;
}

select.form-control[multiple] option,
select.form-control[size]:not([size="1"]) option {
  padding: 0.375rem 0.75rem;
  border-radius: var(--brand-radius-sm);
  margin-bottom: 0.25rem;
}

select.form-control[multiple] option:checked,
select.form-control[size]:not([size="1"]) option:checked {
  background-color: var(--brand-primary);
  color: #ffffff;
}

/* Checkboxes y radios */ 
  color: var(--brand-text);
  font-weight: 400;
  cursor: pointer;
}

.form-check-input {
  cursor: pointer;
}

.form-check-input:focus { 
  box-shadow: 0 0 0 0.2rem var(--brand-primary-light);
  border-color: var(--brand-primary);
}

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

/* Placeholders */
::placeholder { 
  color: var(--brand-text-muted);
  opacity: 1;
}

.form-control::placeholder { 
  color: var(--brand-text-muted);
}

/* Form validation states */
.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: var(--brand-success);
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
  border-color: var(--brand-success);
  box-shadow: 0 0 0 0.2rem var(--brand-success-light);
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: var(--brand-danger);
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  border-color: var(--brand-danger);
  box-shadow: 0 0 0 0.2rem var(--brand-danger-light);
}

.invalid-feedback {
  color: var(--brand-danger);
}

.valid-feedback {
  color: var(--brand-success);
}

/* Textarea con auto-crecimiento */
textarea.form-control {
  height: auto;
  min-height: calc(1.5em + 1rem + 2px);
  resize: vertical;
}

/* File input */
.custom-file-label {
  background-color: var(--brand-card);
  border: 1px solid var(--brand-border);
  color: var(--brand-text);
  border-radius: var(--brand-radius);
}

.custom-file-label::after {
  background-color: var(--brand-bg-alt);
  color: var(--brand-text-secondary);
  border-left: 1px solid var(--brand-border);
}

.custom-file-input:focus ~ .custom-file-label {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem var(--brand-primary-light);
}

/* ========================================
   TABLAS - Modernas y legibles con números tabulares
   ======================================== */
.table { 
  font-family: var(--brand-font-family);
  font-size: var(--brand-font-base);
  color: var(--brand-text);
  background-color: var(--brand-card);
  border-radius: var(--brand-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-feature-settings: 'tnum' 1; /* Números tabulares para alineación perfecta */
}

.table thead th { 
  border-bottom: 2px solid var(--brand-border);
  font-weight: var(--brand-font-semibold);
  background-color: var(--brand-bg-alt);
  color: var(--brand-heading-secondary);
  padding: 1rem 0.75rem;
  text-transform: uppercase;
  font-size: var(--brand-font-xs);
  letter-spacing: var(--brand-tracking-wide);
  vertical-align: middle;
  position: sticky;
  top: 0;
  z-index: 10;
}

.table tbody tr {
  transition: var(--brand-transition-fast);
  border-bottom: 1px solid var(--brand-border-light);
}

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

.table-striped tbody tr:nth-of-type(odd) { 
  background-color: var(--brand-bg-alt);
}

.table-hover tbody tr:hover { 
  background-color: var(--brand-primary-light);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--brand-primary);
}

.table td, .table th { 
  border-color: var(--brand-border);
  padding: 0.875rem 0.75rem;
  vertical-align: middle;
}

/* Columnas numéricas optimizadas */
.table td.text-right,
.table th.text-right,
.table .numero,
.table .monto,
.table .cantidad,
.table .rut {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1; /* Números tabulares + cero con slash */
}

.table td:first-child,
.table th:first-child {
  padding-left: 1.25rem;
}

.table td:last-child,
.table th:last-child {
  padding-right: 1.25rem;
}

.table a:not(.btn) { 
  color: var(--brand-link);
  font-weight: 500;
  text-decoration: none;
  transition: var(--brand-transition-fast);
}

.table a:not(.btn):hover { 
  color: var(--brand-link-hover);
  text-decoration: underline;
}

/* Grupos de botones dentro de tablas */
.table .btn-group,
.table .text-right > .btn,
.table .text-center > .btn,
.table td > .btn {
  margin: 0.125rem;
}

.table .btn {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: nowrap;
}

.table .btn i,
.table .btn .fa,
.table .btn .fas {
  margin: 0;
  font-size: 0.875rem;
}

/* Contenedor de acciones en tablas */
.table .text-right,
.table .text-center {
  display: flex;
  gap: 0.375rem;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  min-width: fit-content;
}

.table .text-center {
  justify-content: center;
}

/* Evitar que los botones se apilen verticalmente */
.table td:last-child {
  white-space: nowrap;
}

/* Asegurar que la columna de acciones tenga el ancho adecuado */
.table td:last-child,
.table th:last-child {
  min-width: 180px;
  width: auto;
}

/* Tabla responsive mejorada */
.table-responsive {
  border-radius: var(--brand-radius);
  box-shadow: var(--brand-shadow-sm);
  border: 1px solid var(--brand-border);
  background: var(--brand-card);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
  margin-bottom: 0;
  border: none;
}

/* Tabla bordered moderna */
.table-bordered {
  border: 1px solid var(--brand-border);
}

.table-bordered th,
.table-bordered td {
  border: 1px solid var(--brand-border);
}

.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 2px;
}

/* Estilos para tablas pequeñas/compactas */
.table-sm td,
.table-sm th {
  padding: 0.5rem;
}

.table-sm .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
}

/* Responsive: En móviles, hacer scroll horizontal */
@media (max-width: 767.98px) {
  .table-responsive {
    border-radius: var(--brand-radius-sm);
  }
  
  .table {
    font-size: 0.875rem;
  }
  
  .table thead th {
    font-size: 0.7rem;
    padding: 0.75rem 0.5rem;
  }
  
  .table td,
  .table th {
    padding: 0.75rem 0.5rem;
  }
  
  .table .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
  }
  
  .table .text-right,
  .table .text-center {
    gap: 0.25rem;
  }
}

/* ========================================
   DATATABLES - Integración visual
   ======================================== */
.dataTables_wrapper {
  padding: 1rem 0;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info { 
  color: var(--brand-text-secondary);
  font-weight: 500;
}

.dataTables_wrapper .dataTables_length select {
  margin: 0 0.5rem;
}

.dataTables_wrapper .dataTables_paginate {
  padding-top: 1rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--brand-card);
  border: 1px solid var(--brand-border);
  color: var(--brand-text) !important;
  border-radius: var(--brand-radius-sm);
  padding: 0.375rem 0.75rem;
  margin: 0 0.125rem;
  transition: var(--brand-transition-fast);
  font-weight: 500;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #ffffff !important;
  box-shadow: var(--brand-shadow-sm);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--brand-text-disabled) !important;
  background: var(--brand-bg-alt) !important;
  border-color: var(--brand-border) !important;
  cursor: not-allowed;
  box-shadow: none;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background-color: var(--brand-card);
  color: var(--brand-text);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  padding: 0.375rem 0.75rem;
  transition: var(--brand-transition-fast);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem var(--brand-primary-light);
  outline: 0;
}

/* ========================================
   BREADCRUMBS - Navegación moderna
   ======================================== */
.breadcrumb { 
  background-color: transparent;
  padding: 0.75rem 0;
  margin-bottom: 1rem;
}

.breadcrumb .breadcrumb-item { 
  font-size: 0.875rem;
}

.breadcrumb .breadcrumb-item a { 
  color: var(--brand-text-secondary);
  font-weight: 500;
  transition: var(--brand-transition-fast);
}

.breadcrumb .breadcrumb-item a:hover {
  color: var(--brand-primary);
  text-decoration: none;
}

.breadcrumb .breadcrumb-item.active { 
  color: var(--brand-primary);
  font-weight: 600;
}

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

/* ========================================
   ALERTS - Modernos con mejores colores
   ======================================== */
.alert { 
  border-radius: var(--brand-radius);
  border: 1px solid;
  box-shadow: var(--brand-shadow-sm);
  padding: 1rem 1.25rem;
  position: relative;
  transition: var(--brand-transition);
}

.alert i,
.alert .fa,
.alert .fas,
.alert .far {
  margin-right: 0.5rem;
  font-size: 1.125rem;
  vertical-align: middle;
}

.alert-success { 
  background-color: var(--brand-success-light);
  border-color: var(--brand-success);
  color: var(--brand-success-hover);
}

[data-theme="dark"] .alert-success {
  background-color: rgba(16, 185, 129, 0.15);
  color: #6EE7B7;
}

.alert-info { 
  background-color: var(--brand-info-light);
  border-color: var(--brand-info);
  color: var(--brand-info-hover);
}

[data-theme="dark"] .alert-info {
  background-color: rgba(6, 182, 212, 0.15);
  color: #67E8F9;
}

.alert-warning { 
  background-color: var(--brand-warning-light);
  border-color: var(--brand-warning);
  color: var(--brand-warning-hover);
}

[data-theme="dark"] .alert-warning {
  background-color: rgba(245, 158, 11, 0.15);
  color: #FCD34D;
}

.alert-danger { 
  background-color: var(--brand-danger-light);
  border-color: var(--brand-danger);
  color: var(--brand-danger-hover);
}

[data-theme="dark"] .alert-danger {
  background-color: rgba(239, 68, 68, 0.15);
  color: #FCA5A5;
}

.alert .close,
.alert .btn-close { 
  color: inherit;
  opacity: 0.6;
  transition: var(--brand-transition-fast);
  text-shadow: none;
}

.alert .close:hover,
.alert .btn-close:hover { 
  opacity: 1;
  color: inherit;
}

/* ========================================
   DROPDOWNS Y MENÚS
   ======================================== */
.dropdown-menu { 
  border-radius: var(--brand-radius);
  box-shadow: var(--brand-shadow-md);
  border: 1px solid var(--brand-border);
  background-color: var(--brand-card);
  padding: 0.5rem 0;
  margin-top: 0.25rem;
}

.dropdown-item { 
  color: var(--brand-text);
  padding: 0.5rem 1.25rem;
  transition: var(--brand-transition-fast);
  font-weight: 500;
  font-size: 0.9375rem;
}

.dropdown-item:hover,
.dropdown-item:focus { 
  background-color: var(--brand-primary-light);
  color: var(--brand-primary);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--brand-primary);
  color: #ffffff;
}

.dropdown-item.disabled,
.dropdown-item:disabled {
  color: var(--brand-text-disabled);
  background-color: transparent;
}

.dropdown-header { 
  color: var(--brand-text-muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 1.25rem;
}

.dropdown-divider {
  border-top-color: var(--brand-border);
  margin: 0.5rem 0;
}

/* ========================================
   SELECT2 - Solo personalización de colores para tema
   ======================================== */

/* Colores para el contenedor y selección */
.select2-container--bootstrap4 .select2-selection {
  background-color: var(--brand-card);
  border-color: var(--brand-border);
  color: var(--brand-text);
}

.select2-container--bootstrap4 .select2-selection__rendered {
  color: var(--brand-text);
}

.select2-container--bootstrap4 .select2-selection__placeholder {
  color: var(--brand-text-muted);
}

/* Estado focus */
.select2-container--bootstrap4.select2-container--focus .select2-selection {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem var(--brand-primary-light);
}

/* Dropdown */
.select2-container--bootstrap4 .select2-dropdown {
  background-color: var(--brand-card);
  border-color: var(--brand-border);
  box-shadow: var(--brand-shadow-md);
}

/* Opciones del dropdown */
.select2-container--bootstrap4 .select2-results__option {
  color: var(--brand-text);
}

.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] { 
  background-color: var(--brand-primary-light);
  color: var(--brand-primary);
}

.select2-container--bootstrap4 .select2-results__option[aria-selected="true"] {
  background-color: var(--brand-primary);
  color: #ffffff;
}

/* Campo de búsqueda */
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field { 
  background-color: var(--brand-card);
  color: var(--brand-text);
  border-color: var(--brand-border);
}

.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem var(--brand-primary-light);
}

/* Disabled */
.select2-container--bootstrap4.select2-container--disabled .select2-selection {
  background-color: var(--brand-bg-alt);
  color: var(--brand-text-disabled);
}

/* Multiple select choices */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
}

/* ========================================
   TABS - Modernos y claros
   ======================================== */
.nav-tabs {
  border-bottom: 2px solid var(--brand-border);
}

.nav-tabs .nav-link { 
  color: var(--brand-text-secondary);
  font-weight: 500;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.75rem 1.25rem;
  transition: var(--brand-transition-fast);
  margin-bottom: -2px;
}

.nav-tabs .nav-link:hover {
  color: var(--brand-primary);
  background-color: var(--brand-primary-light);
  border-bottom-color: var(--brand-primary);
}

.nav-tabs .nav-link.active { 
  color: var(--brand-primary);
  background-color: transparent;
  border-bottom-color: var(--brand-primary);
  font-weight: 600;
}

.tab-content {
  padding: 1.5rem 0;
}

/* ========================================
   MODALES - Elegantes y modernos
   ======================================== */
.modal-content { 
  border-radius: var(--brand-radius-md);
  box-shadow: var(--brand-shadow-lg);
  border: 1px solid var(--brand-border);
  background-color: var(--brand-card);
}

.modal-header { 
  background-color: var(--brand-bg-alt);
  border-bottom: 1px solid var(--brand-border);
  padding: 1.25rem 1.5rem;
  border-radius: var(--brand-radius-md) var(--brand-radius-md) 0 0;
}

.modal-footer { 
  background-color: var(--brand-bg-alt);
  border-top: 1px solid var(--brand-border);
  padding: 1rem 1.5rem;
  border-radius: 0 0 var(--brand-radius-md) var(--brand-radius-md);
}

.modal-body {
  padding: 1.5rem;
}

.modal-backdrop.show { 
  opacity: 0.5;
}

[data-theme="dark"] .modal-backdrop.show {
  opacity: 0.7;
}

.modal-title { 
  color: var(--brand-heading);
  font-weight: 600;
}

.modal-body { 
  color: var(--brand-text);
}

.modal-header .close {
  color: var(--brand-text-secondary);
  opacity: 0.7;
  transition: var(--brand-transition-fast);
  text-shadow: none;
}

.modal-header .close:hover {
  color: var(--brand-text);
  opacity: 1;
}

/* ========================================
   FOOTER
   ======================================== */
.footer { 
  padding: 1.5rem 0;
  margin-top: 3rem;
}

.footer .container { 
  background-color: var(--brand-card);
  border-radius: var(--brand-radius);
  box-shadow: var(--brand-shadow-sm);
  padding: 1rem 1.5rem;
  border: 1px solid var(--brand-border);
}

.footer .small {
  color: var(--brand-text-muted);
  font-size: 0.8125rem;
}

/* ========================================
   UTILIDADES Y HELPERS
   ======================================== */
.rounded { 
  border-radius: var(--brand-radius) !important;
}

.rounded-sm {
  border-radius: var(--brand-radius-sm) !important;
}

.rounded-md {
  border-radius: var(--brand-radius-md) !important;
}

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

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

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

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

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

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

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

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

/* ========================================
   SCROLLBAR PERSONALIZADO (WebKit)
   ======================================== */
::-webkit-scrollbar { 
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track { 
  background: var(--brand-bg-alt);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb { 
  background-color: var(--brand-border-dark);
  border-radius: 10px;
  border: 3px solid var(--brand-bg-alt);
  transition: var(--brand-transition);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--brand-text-muted);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--brand-border-dark) var(--brand-bg-alt);
}

/* ========================================
   SELECCIÓN DE TEXTO
   ======================================== */
::selection { 
  background: var(--brand-primary-light);
  color: var(--brand-primary);
}

::-moz-selection {
  background: var(--brand-primary-light);
  color: var(--brand-primary);
}

/* ========================================
   ICONOS FONT AWESOME
   ======================================== */
i.fa, i.fas, i.far, i.fab,
span.fa, span.fas, span.far, span.fab { 
  color: currentColor;
  display: inline-block;
}

.btn .fa, .btn .fas, .btn .far, .btn .fab { 
  color: inherit;
}

.nav-link .fa, .nav-link .fas, .nav-link .far, .nav-link .fab { 
  color: inherit;
}

.dropdown-item .fa, .dropdown-item .fas, .dropdown-item .far, .dropdown-item .fab { 
  color: inherit;
}

/* ========================================
   LOADING Y SPINNERS
   ======================================== */
.spinner-border,
.spinner-grow {
  color: var(--brand-primary);
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.15em;
}

/* ========================================
   PROGRESS BARS
   ======================================== */
.progress {
  background-color: var(--brand-bg-alt);
  border-radius: var(--brand-radius);
  height: 1rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar {
  background-color: var(--brand-primary);
  transition: width 0.6s ease;
}

/* ========================================
   PAGINATION
   ======================================== */
.pagination {
  margin-bottom: 0;
}

.page-link {
  color: var(--brand-text);
  background-color: var(--brand-card);
  border: 1px solid var(--brand-border);
  padding: 0.5rem 0.75rem;
  transition: var(--brand-transition-fast);
  font-weight: 500;
}

.page-link:hover {
  color: var(--brand-primary);
  background-color: var(--brand-primary-light);
  border-color: var(--brand-primary);
}

.page-link:focus {
  box-shadow: 0 0 0 0.2rem var(--brand-primary-light);
  z-index: 2;
}

.page-item.active .page-link {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
}

.page-item.disabled .page-link {
  color: var(--brand-text-disabled);
  background-color: var(--brand-bg-alt);
  border-color: var(--brand-border);
  cursor: not-allowed;
}

/* ========================================
   TOOLTIPS Y POPOVERS
   ======================================== */
.tooltip-inner {
  background-color: var(--brand-text);
  color: var(--brand-card);
  border-radius: var(--brand-radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: var(--brand-text);
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: var(--brand-text);
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: var(--brand-text);
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: var(--brand-text);
}

.popover {
  background-color: var(--brand-card);
  border: 1px solid var(--brand-border);
  box-shadow: var(--brand-shadow-md);
  border-radius: var(--brand-radius);
}

.popover-header {
  background-color: var(--brand-bg-alt);
  border-bottom: 1px solid var(--brand-border);
  color: var(--brand-heading-secondary);
  font-weight: 600;
}

.popover-body {
  color: var(--brand-text);
}

/* ========================================
   RESPONSIVE Y MEDIA QUERIES
   ======================================== */
@media (max-width: 767.98px) {
  .main-container {
    border-radius: 0;
    padding: 1rem;
    margin: 0 -15px;
  }
  
  .navbar-light {
    border-radius: 0;
  }
  
  .table {
    font-size: 0.875rem;
  }
  
  .table thead th {
    font-size: 0.7rem;
  }
}

@media print {
  body {
    background-color: #ffffff !important;
    color: #000000 !important;
  }
  
  .navbar,
  .breadcrumb,
  .btn,
  .footer,
  .d-print-none {
    display: none !important;
  }
  
  .main-container {
    box-shadow: none !important;
    border: none !important;
  }
}

/* ========================================
   LAYOUT PRINCIPAL Y PÁGINAS
   ======================================== */

/* Page headers modernos */
.page-header {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-info) 100%);
  color: #ffffff;
  padding: 1.5rem 2rem;
  border-radius: var(--brand-radius-lg);
  margin-bottom: 2rem;
  box-shadow: var(--brand-shadow-md);
  border: none;
}

.page-header h1,
.page-header h2,
.page-header h3 {
  color: #ffffff;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.page-header p {
  color: rgba(255, 255, 255, 0.9);
  margin: 0.5rem 0 0 0;
}

/* Contenedor principal de contenido */
.container {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

/* Cards de contenido */
.content-card {
  background: var(--brand-card);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--brand-shadow-md);
  border: 1px solid var(--brand-border);
  padding: 2rem;
  margin-bottom: 2rem;
  transition: var(--brand-transition);
}

.content-card:hover {
  box-shadow: var(--brand-shadow-lg);
  transform: translateY(-2px);
}

.content-card h2,
.content-card h3 {
  color: var(--brand-heading);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--brand-border);
}

/* Grupos de botones mejorados */
.btn-group-modern {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.btn-group-modern .btn {
  margin: 0;
}

/* Botones con iconos */
.btn i,
.btn .fa,
.btn .fas,
.btn .far {
  margin-right: 0.375rem;
}

.btn i:only-child,
.btn .fa:only-child,
.btn .fas:only-child,
.btn .far:only-child {
  margin-right: 0;
}

/* Lista de elementos con estilo moderno */
.list-modern {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-modern li {
  background: var(--brand-card);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  padding: 1rem;
  margin-bottom: 0.75rem;
  transition: var(--brand-transition-fast);
}

.list-modern li:hover {
  background: var(--brand-primary-light);
  border-color: var(--brand-primary);
  transform: translateX(5px);
}

/* Stats y métricas */
.stat-card {
  background: var(--brand-card);
  border-radius: var(--brand-radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--brand-border);
  box-shadow: var(--brand-shadow-sm);
  text-align: center;
  transition: var(--brand-transition);
}

.stat-card:hover {
  box-shadow: var(--brand-shadow-md);
  transform: translateY(-5px);
}

.stat-card .stat-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--brand-primary);
  line-height: 1;
  margin-bottom: 0.5rem;
  display: block;
}

.stat-card .stat-label {
  color: var(--brand-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-card .stat-icon {
  font-size: 2rem;
  color: var(--brand-primary);
  opacity: 0.3;
  margin-bottom: 1rem;
}

/* Empty states */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--brand-bg-alt);
  border-radius: var(--brand-radius-lg);
  border: 2px dashed var(--brand-border);
}

.empty-state i,
.empty-state .fa,
.empty-state .fas {
  font-size: 4rem;
  color: var(--brand-text-muted);
  margin-bottom: 1.5rem;
  opacity: 0.5;
}

.empty-state h3 {
  color: var(--brand-heading-secondary);
  margin-bottom: 0.75rem;
}

.empty-state p {
  color: var(--brand-text-muted);
  max-width: 400px;
  margin: 0 auto 1.5rem;
}

/* Dividers con estilo */
.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--brand-border), transparent);
  margin: 2rem 0;
}

.divider-text {
  text-align: center;
  position: relative;
  margin: 2rem 0;
}

.divider-text::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--brand-border);
}

.divider-text span {
  position: relative;
  background: var(--brand-bg);
  padding: 0 1rem;
  color: var(--brand-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Info boxes */
.info-box {
  background: var(--brand-bg-alt);
  border-left: 4px solid var(--brand-info);
  border-radius: var(--brand-radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.info-box.info-box-success {
  border-left-color: var(--brand-success);
}

.info-box.info-box-warning {
  border-left-color: var(--brand-warning);
}

.info-box.info-box-danger {
  border-left-color: var(--brand-danger);
}

.info-box i,
.info-box .fa,
.info-box .fas {
  margin-right: 0.75rem;
  font-size: 1.125rem;
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--brand-border);
}

.timeline-item {
  position: relative;
  padding-bottom: 2rem;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 0.25rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand-primary);
  border: 2px solid var(--brand-card);
  box-shadow: 0 0 0 2px var(--brand-border);
}

.timeline-item-content {
  background: var(--brand-card);
  border-radius: var(--brand-radius);
  padding: 1rem;
  border: 1px solid var(--brand-border);
  box-shadow: var(--brand-shadow-sm);
}

/* Loading states */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--brand-border);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ========================================
   ANIMACIONES Y TRANSICIONES
   ======================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-in;
}

.slide-down {
  animation: slideDown 0.3s ease-out;
}

/* ========================================
   ACCESIBILIDAD
   ======================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus visible para mejor accesibilidad */
*:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Reduce motion para usuarios con preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================
   HEADERS MODERNOS (Page Headers)
   ======================================== */

/* Header moderno con gradiente suave - compatible con enlaces y botones */
.page-header-modern {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-info) 100%);
    color: #ffffff;
    padding: 1.5rem 2rem;
    border-radius: var(--brand-radius-lg);
    margin-bottom: 2rem;
    box-shadow: var(--brand-shadow-md);
    position: relative;
    overflow: visible;
}

.page-header-modern h1,
.page-header-modern h2 {
    color: #ffffff !important;
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.page-header-modern p,
.page-header-modern small {
    color: rgba(255, 255, 255, 0.95) !important;
    margin: 0.5rem 0 0 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Enlaces y botones en header - mejorados para visibilidad */
.page-header-modern a:not(.btn) {
    color: #ffffff !important;
    text-decoration: underline;
    font-weight: 500;
}

.page-header-modern a:not(.btn):hover {
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none;
}

/* Navegación en header (nav-pills, etc) */
.page-header-modern .nav-pills {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--brand-radius);
    padding: 0.25rem;
    backdrop-filter: blur(10px);
}

.page-header-modern .nav-pills .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    background: transparent;
    border: 1px solid transparent;
    font-weight: 500;
    transition: var(--brand-transition-fast);
}

.page-header-modern .nav-pills .nav-link:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff !important;
}

.page-header-modern .nav-pills .nav-link i {
    opacity: 0.9;
}

/* Dropdown en header */
.page-header-modern .dropdown-menu {
    background: var(--brand-card);
    border: 1px solid var(--brand-border);
    box-shadow: var(--brand-shadow-lg);
}

.page-header-modern .dropdown-item {
    color: var(--brand-text) !important;
}

.page-header-modern .dropdown-item:hover {
    background: var(--brand-primary-light);
    color: var(--brand-primary) !important;
}

/* Botones en header con mejor contraste */
.page-header-modern .btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff !important;
    font-weight: 600;
    backdrop-filter: blur(5px);
    transition: var(--brand-transition-fast);
}

.page-header-modern .btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.page-header-modern .btn-primary {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.page-header-modern .btn-primary:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* Header responsive */
@media (max-width: 767.98px) {
    .page-header-modern {
        padding: 1.25rem 1.5rem;
        text-align: center;
    }
    
    .page-header-modern h1 {
        font-size: 1.5rem;
    }
    
    .page-header-modern .nav-pills {
        flex-direction: column;
    }
}

/* ========================================
   STAT CARDS (Tarjetas de estadísticas)
   ======================================== */

.stat-cards-row {
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--brand-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-lg);
    padding: 1.25rem 1.5rem;
    text-align: center;
    transition: var(--brand-transition);
    display: block;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-info) 100%);
    opacity: 0;
    transition: var(--brand-transition-fast);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--brand-shadow-lg);
    border-color: var(--brand-primary);
    text-decoration: none;
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-card-icon {
    font-size: 2.5rem;
    color: var(--brand-primary);
    opacity: 0.2;
    margin-bottom: 0.75rem;
    display: block;
}

.stat-card-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--brand-text);
    line-height: 1;
    margin-bottom: 0.5rem;
    display: block;
}

.stat-card-label {
    color: var(--brand-text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

/* Variantes de color para stat cards */
.stat-card.stat-info .stat-card-icon { color: var(--brand-info); }
.stat-card.stat-success .stat-card-icon { color: var(--brand-success); }
.stat-card.stat-warning .stat-card-icon { color: var(--brand-warning); }
.stat-card.stat-danger .stat-card-icon { color: var(--brand-danger); }

.stat-card.stat-info:hover { border-color: var(--brand-info); }
.stat-card.stat-success:hover { border-color: var(--brand-success); }
.stat-card.stat-warning:hover { border-color: var(--brand-warning); }
.stat-card.stat-danger:hover { border-color: var(--brand-danger); }

.stat-card.stat-info::before { background: var(--brand-info); }
.stat-card.stat-success::before { background: var(--brand-success); }
.stat-card.stat-warning::before { background: var(--brand-warning); }
.stat-card.stat-danger::before { background: var(--brand-danger); }

@media (max-width: 767.98px) {
    .stat-card {
        margin-bottom: 1rem;
    }
    
    .stat-card-value {
        font-size: 1.875rem;
    }
}

/* ========================================
   DASHBOARD COMPONENTS
   ======================================== */

.periodo-selector {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: var(--brand-radius);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.periodo-selector .btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff !important;
    padding: 0.5rem 0.75rem;
    transition: var(--brand-transition-fast);
}

.periodo-selector .btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

.periodo-selector input {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff !important;
    text-align: center;
    width: 100px;
    font-weight: 600;
}

.periodo-selector input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* ========================================
   SIDEBAR MENU (Menú lateral integrado)
   ======================================== */

/* Contenedor del menú sin padding para items flush */
.sidebar-menu-widget {
    background: var(--brand-card);
    border-radius: var(--brand-radius-lg);
    border: 1px solid var(--brand-border);
    box-shadow: var(--brand-shadow-sm);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.sidebar-menu-widget .card-header {
    background: var(--brand-bg-alt);
    border-bottom: 1px solid var(--brand-border);
    padding: 0.875rem 1.25rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--brand-heading-secondary);
}

.sidebar-menu-widget .card-header i {
    margin-right: 0.5rem;
    color: var(--brand-primary);
}

/* List group flush (sin bordes laterales) */
.sidebar-menu {
    margin: 0;
    padding: 0;
}

.sidebar-menu .list-group-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--brand-border);
    color: var(--brand-text);
    padding: 0.875rem 1.25rem;
    transition: var(--brand-transition-fast);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Borde izquierdo animado */
.sidebar-menu .list-group-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--brand-primary);
    transform: translateX(-4px);
    transition: var(--brand-transition-fast);
}

.sidebar-menu .list-group-item:hover::before {
    transform: translateX(0);
}

/* Último item sin borde inferior */
.sidebar-menu .list-group-item:last-child {
    border-bottom: none;
}

.sidebar-menu .list-group-item:hover {
    background: var(--brand-primary-light);
    color: var(--brand-primary);
    padding-left: 1.5rem;
}

.sidebar-menu .list-group-item i {
    margin-right: 0.75rem;
    width: 1.25rem;
    text-align: center;
    font-size: 1rem;
    opacity: 0.7;
    transition: var(--brand-transition-fast);
}

.sidebar-menu .list-group-item:hover i {
    opacity: 1;
    transform: scale(1.1);
}

/* Estado activo */
.sidebar-menu .list-group-item.active {
    background: var(--brand-primary-light);
    color: var(--brand-primary);
    font-weight: 600;
}

.sidebar-menu .list-group-item.active::before {
    transform: translateX(0);
}

.dashboard-alert {
    border-radius: var(--brand-radius-lg);
    border: none;
    box-shadow: var(--brand-shadow-sm);
    margin-bottom: 1.5rem;
}

.chart-card {
    background: var(--brand-card);
    border-radius: var(--brand-radius-lg);
    border: 1px solid var(--brand-border);
    box-shadow: var(--brand-shadow-md);
    overflow: hidden;
    margin-bottom: 1.5rem;
    transition: var(--brand-transition);
}

.chart-card:hover {
    box-shadow: var(--brand-shadow-lg);
}

.chart-card .card-header {
    background: var(--brand-bg-alt);
    border-bottom: 2px solid var(--brand-border);
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--brand-heading-secondary);
}

.chart-card .card-body {
    padding: 1.5rem;
}

.info-widget {
    background: var(--brand-card);
    border-radius: var(--brand-radius-lg);
    border: 1px solid var(--brand-border);
    box-shadow: var(--brand-shadow-sm);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.info-widget .card-header {
    background: var(--brand-bg-alt);
    border-bottom: 1px solid var(--brand-border);
    padding: 0.875rem 1.25rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--brand-heading-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-widget .card-header i {
    margin-right: 0.5rem;
}

.info-widget .card-header a {
    color: var(--brand-text-muted);
    transition: var(--brand-transition-fast);
}

.info-widget .card-header a:hover {
    color: var(--brand-primary);
}

.info-widget .card-body {
    padding: 1.25rem;
}

.progress-modern {
    height: 1.5rem;
    border-radius: var(--brand-radius);
    background: var(--brand-bg-alt);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    margin-bottom: 1rem;
}

.progress-modern .progress-bar {
    border-radius: var(--brand-radius);
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-info) 100%);
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.5rem;
}

.list-group-modern .list-group-item {
    background: var(--brand-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    margin-bottom: 0.5rem;
    padding: 0.875rem 1rem;
    transition: var(--brand-transition-fast);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-group-modern .list-group-item:hover {
    background: var(--brand-primary-light);
    border-color: var(--brand-primary);
    transform: translateX(3px);
}

.search-widget {
    background: var(--brand-card);
    border-radius: var(--brand-radius-lg);
    padding: 1.5rem;
    border: 1px solid var(--brand-border);
    box-shadow: var(--brand-shadow-sm);
    margin-bottom: 1.5rem;
}

.search-widget .input-group-lg .form-control {
    border-radius: var(--brand-radius) 0 0 var(--brand-radius);
    font-size: 1.125rem;
}

.search-widget .input-group-lg .btn {
    border-radius: 0 var(--brand-radius) var(--brand-radius) 0;
    padding: 0.75rem 1.5rem;
}

/* ===================================================================
   GLOBAL CONTENT ELEMENTS - Compact Integrated Header System
   =================================================================== */

/* Integrated Content Bar - Ultra Compact */
.content-bar-integrated {
    background: var(--brand-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    padding: 0.625rem 1rem;
    margin: 0.75rem 0 1.25rem 0;
    box-shadow: var(--brand-shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    min-height: 42px;
}

/* Certification Badge - Inline Compact */
.certification-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--brand-info) 0%, #1e88c7 100%);
    color: #ffffff;
    padding: 0.375rem 0.875rem;
    border-radius: 50px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(33, 150, 243, 0.3);
    animation: pulse 2s ease-in-out infinite;
}

.certification-badge i {
    font-size: 0.875rem;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

[data-theme="dark"] .certification-badge {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.4);
}

/* Breadcrumb - Inline Compact */
.breadcrumb-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
    flex: 1;
    min-width: 200px;
}

.breadcrumb-inline li {
    display: flex;
    align-items: center;
    color: var(--brand-text-muted);
}

.breadcrumb-inline li + li::before {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin: 0 0.375rem;
    font-size: 0.625rem;
    color: var(--brand-border);
}

.breadcrumb-inline a {
    color: var(--brand-primary);
    text-decoration: none;
    transition: var(--brand-transition-fast);
    font-weight: 500;
}

.breadcrumb-inline a:hover {
    color: var(--brand-info);
}

.breadcrumb-inline .active {
    color: var(--brand-text-primary);
    font-weight: 600;
}

/* Page Actions - Inline Compact */
.page-actions-inline {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.page-actions-inline .nav-pills {
    display: flex;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-actions-inline .nav-pills .nav-item {
    margin: 0;
}

.page-actions-inline .nav-pills .nav-link {
    color: var(--brand-text-primary);
    background: transparent;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    padding: 0.375rem 0.75rem;
    font-weight: 500;
    font-size: 0.8125rem;
    transition: var(--brand-transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    line-height: 1.2;
}

.page-actions-inline .nav-pills .nav-link i {
    font-size: 0.875rem;
}

.page-actions-inline .nav-pills .nav-link:hover {
    background: var(--brand-primary-light);
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    transform: translateY(-1px);
}

.page-actions-inline .nav-pills .nav-link.active,
.page-actions-inline .nav-pills .nav-link:active {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-info) 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(33, 150, 243, 0.3);
}

/* Dropdown support in inline actions */
.page-actions-inline .dropdown-menu {
    font-size: 0.8125rem;
    margin-top: 0.25rem;
    min-width: 10rem;
}

/* Left section (breadcrumb + certification) */
.content-bar-left {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex: 1;
    min-width: 0;
}

/* Right section (actions) */
.content-bar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Responsive behavior */
@media (max-width: 992px) {
    .content-bar-integrated {
        padding: 0.5rem 0.875rem;
        gap: 0.75rem;
    }
    
    .breadcrumb-inline {
        font-size: 0.75rem;
        min-width: 150px;
    }
    
    .page-actions-inline .nav-pills .nav-link {
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
    }
    
    .page-actions-inline .nav-pills .nav-link i {
        font-size: 0.8125rem;
    }
    
    .certification-badge {
        font-size: 0.75rem;
        padding: 0.3125rem 0.75rem;
    }
}

@media (max-width: 768px) {
    .content-bar-integrated {
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
        padding: 0.625rem;
    }
    
    .content-bar-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .content-bar-right {
        width: 100%;
    }
    
    .page-actions-inline {
        width: 100%;
    }
    
    .page-actions-inline .nav-pills {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .page-actions-inline .nav-pills .nav-link {
        flex: 1 1 auto;
        justify-content: center;
    }
    
    .breadcrumb-inline {
        width: 100%;
    }
}

/* Print styles */
@media print {
    .content-bar-integrated {
        border: none;
        box-shadow: none;
        padding: 0.25rem 0;
        margin: 0.5rem 0;
    }
    
    .certification-badge,
    .page-actions-inline {
        display: none !important;
    }
    
    .breadcrumb-inline {
        font-size: 0.75rem;
    }
}

/* ===================================================================
   LEGACY SUPPORT - Keep old classes for backwards compatibility
   =================================================================== */

/* Old standalone certification banner */
.certification-banner {
    background: linear-gradient(135deg, var(--brand-info) 0%, #1e88c7 100%);
    border-left: 4px solid #1565c0;
    border-radius: var(--brand-radius);
    padding: 0.875rem 1.5rem;
    margin: 1rem 0;
    box-shadow: var(--brand-shadow-md);
    display: flex;
    align-items: center;
    gap: 0.875rem;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    animation: slideDown 0.4s ease-out;
}

.certification-banner i {
    font-size: 1.5rem;
    opacity: 0.9;
    flex-shrink: 0;
}

.certification-banner strong {
    font-weight: 600;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-theme="dark"] .certification-banner {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    border-left-color: #0d47a1;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

/* Old standalone breadcrumb */
.breadcrumb-modern {
    background: var(--brand-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    padding: 0.75rem 1.25rem;
    margin: 1rem 0;
    box-shadow: var(--brand-shadow-sm);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    font-size: 0.9375rem;
}

.breadcrumb-modern li {
    display: flex;
    align-items: center;
    color: var(--brand-text-muted);
}

.breadcrumb-modern li + li::before {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin: 0 0.5rem;
    font-size: 0.75rem;
    color: var(--brand-border);
}

.breadcrumb-modern a {
    color: var(--brand-primary);
    text-decoration: none;
    transition: var(--brand-transition-fast);
    font-weight: 500;
}

.breadcrumb-modern a:hover {
    color: var(--brand-info);
    text-decoration: underline;
}

.breadcrumb-modern .active {
    color: var(--brand-text-primary);
    font-weight: 600;
}

/* Old standalone page actions */
.page-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.page-actions .nav-pills {
    background: var(--brand-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    padding: 0.375rem;
    box-shadow: var(--brand-shadow-sm);
    display: flex;
    gap: 0.25rem;
    margin: 0;
}

.page-actions .nav-pills .nav-item {
    margin: 0;
}

.page-actions .nav-pills .nav-link {
    color: var(--brand-text-primary);
    background: transparent;
    border: none;
    border-radius: var(--brand-radius);
    padding: 0.5rem 1rem;
    font-weight: 500;
    font-size: 0.9375rem;
    transition: var(--brand-transition-fast);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.page-actions .nav-pills .nav-link:hover {
    background: var(--brand-primary-light);
    color: var(--brand-primary);
}

.page-actions .nav-pills .nav-link.active,
.page-actions .nav-pills .nav-link:active {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-info) 100%);
    color: #ffffff;
    box-shadow: var(--brand-shadow-sm);
}

.page-actions .nav-pills .nav-link i {
    font-size: 0.875rem;
}

/* Alternative: Integrated in page header */
.page-header-modern .page-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.page-header-modern .page-header-actions .nav-pills {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--brand-radius);
    padding: 0.25rem;
    display: flex;
    gap: 0.25rem;
    margin: 0;
}

.page-header-modern .page-header-actions .nav-pills .nav-item {
    margin: 0;
}

.page-header-modern .page-header-actions .nav-pills .nav-link {
    color: #ffffff;
    background: transparent;
    border: none;
    border-radius: calc(var(--brand-radius) - 2px);
    padding: 0.5rem 1rem;
    font-weight: 500;
    font-size: 0.875rem;
    transition: var(--brand-transition-fast);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    white-space: nowrap;
}

.page-header-modern .page-header-actions .nav-pills .nav-link:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.page-header-modern .page-header-actions .nav-pills .nav-link.active,
.page-header-modern .page-header-actions .nav-pills .nav-link:active {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.page-header-modern .page-header-actions .nav-pills .nav-link i {
    font-size: 0.875rem;
}

/* Responsive behavior */
@media (max-width: 768px) {
    .certification-banner {
        padding: 0.75rem 1rem;
        font-size: 0.9375rem;
    }
    
    .certification-banner i {
        font-size: 1.25rem;
    }
    
    .breadcrumb-modern {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }
    
    .page-actions {
        justify-content: stretch;
    }
    
    .page-actions .nav-pills {
        width: 100%;
        justify-content: space-between;
    }
    
    .page-actions .nav-pills .nav-link {
        flex: 1;
        justify-content: center;
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .page-header-modern .page-header-actions {
        width: 100%;
        margin-top: 1rem;
    }
    
    .page-header-modern .page-header-actions .nav-pills {
        width: 100%;
    }
}

/* Print styles */
@media print {
    .certification-banner,
    .page-actions,
    .page-header-modern .page-header-actions {
        display: none !important;
    }
    
    .breadcrumb-modern {
        border: none;
        box-shadow: none;
        padding: 0.5rem 0;
    }
}