/* =========================================
   1. VARIABLES Y CONFIGURACIÓN GLOBAL
   ========================================= */
   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

   :root {
       /* Colores Corporativos */
       --primary-color: #0f2b4c;       /* Azul Marino Profundo */
       --primary-light: #1a4f8a;       /* Azul Medio */
       --primary-gradient: linear-gradient(135deg, #0f2b4c 0%, #1a4f8a 100%);
       
       --accent-color: #f39c12;        /* Dorado/Naranja Acción */
       --accent-hover: #d35400;
       
       --success-color: #27ae60;
       --danger-color: #c0392b;
       --info-color: #2980b9;
   
       /* Fondos y Textos */
       --bg-body: #f0f2f5;             /* Gris muy suave moderno */
       --bg-card: #ffffff;
       --text-main: #2c3e50;
       --text-muted: #7f8c8d;
       
       /* UI Elements */
       --sidebar-width: 260px;
       --border-radius: 12px;
       --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
       --shadow-md: 0 5px 15px rgba(0,0,0,0.08);
       --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);
       --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   }
   
   * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }
   
   body {
       font-family: 'Poppins', sans-serif;
       background-color: var(--bg-body);
       color: var(--text-main);
       line-height: 1.6;
       overflow-x: hidden;
       -webkit-font-smoothing: antialiased; /* Mejor renderizado en Mac/iOS */
   }
   
   a { text-decoration: none; }
   ul { list-style: none; }
   
   /* =========================================
      2. LOGIN PAGE (VISTOSA Y MODERNA)
      ========================================= */
   .login-container {
       height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       background: var(--primary-gradient);
       position: relative;
       overflow: hidden;
   }
   
   /* Efecto de fondo decorativo */
   .login-container::before {
       content: '';
       position: absolute;
       width: 400px;
       height: 400px;
       background: rgba(255, 255, 255, 0.1);
       border-radius: 50%;
       top: -100px;
       left: -100px;
       backdrop-filter: blur(20px);
   }
   
   .login-container::after {
       content: '';
       position: absolute;
       width: 300px;
       height: 300px;
       background: rgba(243, 156, 18, 0.15); /* Accent color */
       border-radius: 50%;
       bottom: -50px;
       right: -50px;
       backdrop-filter: blur(20px);
   }
   
   .login-card {
       background: rgba(255, 255, 255, 0.95);
       padding: 2.5rem;
       border-radius: 20px;
       box-shadow: 0 20px 50px rgba(0,0,0,0.3);
       width: 100%;
       max-width: 420px;
       z-index: 10;
       backdrop-filter: blur(10px);
       border: 1px solid rgba(255,255,255,0.5);
       animation: fadeInUp 0.6s ease-out;
   }
   
   @keyframes fadeInUp {
       from { opacity: 0; transform: translateY(20px); }
       to { opacity: 1; transform: translateY(0); }
   }
   
   .login-card .form-control {
       background: #f8f9fa;
       border: 1px solid #e9ecef;
       padding: 12px 15px;
       border-radius: 8px;
       font-size: 0.95rem;
       transition: var(--transition);
   }
   
   .login-card .form-control:focus {
       background: #fff;
       border-color: var(--primary-light);
       box-shadow: 0 0 0 3px rgba(26, 79, 138, 0.1);
   }
   
   /* =========================================
      3. LAYOUT PRINCIPAL (SIDEBAR & CONTENT)
      ========================================= */
   .wrapper {
       display: flex;
       width: 100%;
       align-items: stretch;
   }
   
   /* Sidebar Profesional */
   #sidebar {
       min-width: var(--sidebar-width);
       max-width: var(--sidebar-width);
       background: var(--primary-color);
       color: #fff;
       transition: var(--transition);
       min-height: 100vh;
       position: relative;
       z-index: 999;
       box-shadow: 4px 0 15px rgba(0,0,0,0.1);
   }
   
   #sidebar.active {
       margin-left: calc(var(--sidebar-width) * -1);
   }
   
   #sidebar .sidebar-header {
       padding: 25px 20px;
       background: rgba(0,0,0,0.2);
       text-align: center;
       border-bottom: 1px solid rgba(255,255,255,0.1);
   }
   
   #sidebar .sidebar-header h3 {
       font-weight: 700;
       letter-spacing: 1px;
       margin-bottom: 5px;
   }
   
   #sidebar ul.components {
       padding: 20px 0;
   }
   
   #sidebar ul li a {
       padding: 15px 25px;
       font-size: 0.95rem;
       display: flex;
       align-items: center;
       color: rgba(255,255,255,0.7);
       transition: var(--transition);
       border-left: 4px solid transparent;
       font-weight: 500;
   }
   
   #sidebar ul li a i {
       margin-right: 15px;
       font-size: 1.1rem;
       width: 20px;
       text-align: center;
   }
   
   #sidebar ul li a:hover, 
   #sidebar ul li a.active {
       color: #fff;
       background: rgba(255,255,255,0.05);
       border-left: 4px solid var(--accent-color);
       padding-left: 30px; /* Efecto de desplazamiento */
   }
   
   /* Contenido Principal */
   #content {
       width: 100%;
       padding: 0;
       min-height: 100vh;
       transition: var(--transition);
       display: flex;
       flex-direction: column;
   }
   
   /* Navbar Superior */
   .navbar {
       background: #fff !important;
       padding: 15px 25px;
       box-shadow: var(--shadow-sm);
       border-bottom: 1px solid #eee;
   }
   
   .btn-corporate {
       background: var(--primary-gradient);
       border: none;
       color: white;
       padding: 10px 20px;
       border-radius: 8px;
       font-weight: 500;
       box-shadow: 0 4px 6px rgba(15, 43, 76, 0.2);
       transition: var(--transition);
   }
   
   .btn-corporate:hover {
       transform: translateY(-2px);
       box-shadow: 0 6px 12px rgba(15, 43, 76, 0.3);
       color: white;
   }
   
   /* =========================================
      4. COMPONENTES UI (CARDS, TABLAS, FORMS)
      ========================================= */
   
   /* Tarjetas Modernas */
   .card {
       border: none;
       border-radius: var(--border-radius);
       box-shadow: var(--shadow-sm);
       background: var(--bg-card);
       transition: var(--transition);
       margin-bottom: 25px;
       overflow: hidden;
   }
   
   .card:hover {
       box-shadow: var(--shadow-md);
       transform: translateY(-2px);
   }
   
   .card-header {
       background-color: #fff;
       border-bottom: 1px solid #f0f0f0;
       font-weight: 600;
       color: var(--primary-color);
       padding: 15px 20px;
       font-size: 1rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   
   .card-body {
       padding: 25px;
   }
   
   /* Dashboard Widgets */
   .widget-card {
       background: #fff;
       border-radius: var(--border-radius);
       padding: 25px;
       box-shadow: var(--shadow-sm);
       position: relative;
       overflow: hidden;
       border-left: 5px solid transparent;
   }
   
   .widget-card.primary { border-left-color: var(--primary-color); }
   .widget-card.success { border-left-color: var(--success-color); }
   .widget-card.warning { border-left-color: var(--accent-color); }
   
   .widget-card h3 { font-size: 2rem; font-weight: 700; color: var(--text-main); }
   .widget-card p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0; }
   .widget-card i {
       position: absolute;
       right: 20px;
       top: 20px;
       font-size: 3rem;
       opacity: 0.1;
       color: var(--primary-color);
   }
   
   /* Tablas Profesionales */
   .table-responsive {
       border-radius: var(--border-radius);
       overflow: hidden;
       box-shadow: var(--shadow-sm);
       background: #fff;
   }
   
   .table {
       margin-bottom: 0;
       width: 100%;
       border-collapse: separate;
       border-spacing: 0;
   }
   
   .table thead th {
       background-color: #f8f9fa;
       color: var(--primary-color);
       font-weight: 600;
       text-transform: uppercase;
       font-size: 0.75rem;
       letter-spacing: 0.5px;
       padding: 15px 20px;
       border-bottom: 2px solid #e9ecef;
       white-space: nowrap;
   }
   
   .table tbody tr {
       transition: var(--transition);
   }
   
   .table tbody tr:hover {
       background-color: #f8f9fa;
       transform: scale(1.005);
       z-index: 10;
       position: relative;
       box-shadow: 0 2px 5px rgba(0,0,0,0.05);
   }
   
   .table tbody td {
       padding: 15px 20px;
       vertical-align: middle;
       border-bottom: 1px solid #f0f0f0;
       color: var(--text-main);
       font-size: 0.9rem;
   }
   
   /* Inputs y Formularios */
   .form-control, .form-select {
       border: 1px solid #dee2e6;
       border-radius: 8px;
       padding: 10px 15px;
       font-size: 0.95rem;
       color: var(--text-main);
       transition: var(--transition);
       background-color: #fff;
   }
   
   .form-control:focus, .form-select:focus {
       border-color: var(--primary-light);
       box-shadow: 0 0 0 3px rgba(26, 79, 138, 0.1);
       outline: none;
   }
   
   .form-label {
       font-weight: 500;
       color: var(--primary-color);
       font-size: 0.9rem;
       margin-bottom: 5px;
   }
   
   /* Botones de Acción en Tablas */
   .btn-sm {
       padding: 5px 10px;
       font-size: 0.8rem;
       border-radius: 6px;
   }
   
   /* =========================================
      5. RESPONSIVE DESIGN (MOBILE FIRST)
      ========================================= */
   
   /* Tablets y Móviles (Max 991px) */
   @media (max-width: 991px) {
       #sidebar {
           margin-left: calc(var(--sidebar-width) * -1); /* Oculto por defecto */
           position: fixed;
           height: 100vh;
           z-index: 1000;
       }
   
       #sidebar.active {
           margin-left: 0; /* Mostrar al activar */
       }
       
       /* Overlay oscuro cuando el menú está abierto en móvil */
       #sidebar.active::before {
           content: '';
           position: fixed;
           top: 0; left: 0; right: 0; bottom: 0;
           background: rgba(0,0,0,0.5);
           z-index: -1;
       }
   
       .navbar {
           padding: 10px 15px;
       }
       
       .card-body {
           padding: 15px;
       }
   }
   
   /* Móviles Pequeños (Max 576px - iOS/Android) */
   @media (max-width: 576px) {
       .login-card {
           margin: 20px;
           padding: 1.5rem;
       }
   
       .widget-card {
           margin-bottom: 15px;
           padding: 20px;
       }
   
       .table-responsive {
           border: none;
           box-shadow: none;
           background: transparent;
       }
       
       /* Ajuste de tablas en móvil para scroll horizontal */
       .table thead {
           display: none; /* Opcional: ocultar cabecera en móvil extremo y usar cards */
       }
       
       .table, .table tbody, .table tr, .table td {
           display: block;
           width: 100%;
       }
       
       .table tr {
           margin-bottom: 15px;
           background: #fff;
           border-radius: 10px;
           padding: 15px;
           box-shadow: var(--shadow-sm);
           border: 1px solid #eee;
       }
       
       .table td {
           text-align: right;
           padding: 10px;
           border-bottom: 1px solid #eee;
           position: relative;
           padding-left: 50%;
       }
       
       .table td::before {
           content: attr(data-label);
           position: absolute;
           left: 15px;
           width: 45%;
           padding-right: 10px;
           white-space: nowrap;
           text-align: left;
           font-weight: bold;
           color: var(--primary-color);
       }
       
       /* Botones de acción en móvil */
       .btn-group {
           display: flex;
           justify-content: flex-end;
           gap: 5px;
       }
   }
   
   /* =========================================
      6. UTILIDADES Y ANIMACIONES
      ========================================= */
   .badge {
       padding: 6px 10px;
       border-radius: 20px;
       font-weight: 500;
       font-size: 0.75rem;
       letter-spacing: 0.5px;
   }
   
   /* Scrollbar personalizado para Webkit (Chrome/Safari) */
   ::-webkit-scrollbar {
       width: 8px;
       height: 8px;
   }
   ::-webkit-scrollbar-track {
       background: #f1f1f1; 
   }
   ::-webkit-scrollbar-thumb {
       background: #ccc; 
       border-radius: 4px;
   }
   ::-webkit-scrollbar-thumb:hover {
       background: var(--primary-light); 
   }
   
   /* Animación de carga suave */
   .fade-in {
       animation: fadeIn 0.5s ease-in;
   }
   
   @keyframes fadeIn {
       from { opacity: 0; }
       to { opacity: 1; }
   }