/**
 * =============================================================================
 * FIDAE VIRTUAL ADMIN - CUSTOM OVERRIDES
 * =============================================================================
 *
 * This file contains ONLY the style overrides for FIDAE organizer.
 * Base styles are in style.css and virtual_theme.css
 *
 * COLOR PALETTE:
 * - Primary:   #18214C (Dark Navy Blue) - Sidebar background
 * - Secondary: #3B487A (Medium Blue)    - Selected items, Top navigation
 * - Tertiary:  #7481AA (Light Blue)     - Accents, hover states
 * - White:     #FDFCFD (Off-white)      - Content boxes
 * - Gray:      #9AA2A5 (Gray)           - Muted text
 *
 * TYPOGRAPHY:
 * - Font:      Poppins (Google Fonts)
 *
 * =============================================================================
 */

/* =============================================================================
   GOOGLE FONTS IMPORT
   ============================================================================= */

   @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

   /* =============================================================================
                     CSS VARIABLES
                     ============================================================================= */
   
   :root {
     /* FIDAE Brand Colors */
     --fidae-primary: #18214c;
     --fidae-secondary: #3b487a;
     --fidae-tertiary: #7481aa;
     --fidae-white: #fdfcfd;
     --fidae-gray: #9aa2a5;
   
     /* Typography */
     --fidae-font-family:
       "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
       "Helvetica Neue", Arial, sans-serif;
   
     /* Override default colors */
     --main-color: #3b487a;
     --home-color-2: #7481aa;
   }
   
   /* =============================================================================
                     GLOBAL TYPOGRAPHY
                     ============================================================================= */
   
   body,
   html {
     font-family: var(--fidae-font-family) !important;
   }
   
   /* Apply to all common elements */
   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
   p,
   span,
   a,
   li,
   td,
   th,
   label,
   input,
   select,
   textarea,
   button,
   .nav-link,
   .dropdown-item,
   .btn {
     font-family: var(--fidae-font-family) !important;
   }
   
   /* =============================================================================
                     SIDEBAR OVERRIDES
                     ============================================================================= */
   
   /* Sidebar background - Primary color with subtle gradient */
   #accordionSidebar,
   .sidebar {
     background: linear-gradient(
       180deg,
       var(--fidae-primary) 0%,
       #121a3d 100%
     ) !important;
     box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
     border-right: 1px solid rgba(255, 255, 255, 0.04);
   }
   
   /* Sidebar brand/title - Desktop default state */
   .sidebar .sidebar-brand,
   .sidebar-dark .sidebar-brand {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 1.5rem 1rem 1.25rem;
     color: var(--fidae-white) !important;
     text-decoration: none !important;
     position: relative;
     transition: opacity 0.2s ease;
   }
   
   .sidebar .sidebar-brand:hover {
     opacity: 0.92;
   }
   
   .sidebar .sidebar-brand::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 1rem;
     right: 1rem;
     height: 1px;
     background: linear-gradient(
       90deg,
       transparent 0%,
       rgba(116, 129, 170, 0.3) 50%,
       transparent 100%
     );
   }
   
   /* Logo container */
   .sidebar .sidebar-brand > div:first-child {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 0.75rem;
   }
   
   /* Logo image - Base styles */
   .sidebar .sidebar-brand .logo {
     height: auto;
     object-fit: contain;
     filter: brightness(1.05) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
     transition:
       filter 0.3s ease,
       transform 0.3s ease;
   }
   
   .sidebar .sidebar-brand:hover .logo {
     filter: brightness(1.15) drop-shadow(0 3px 10px rgba(0, 0, 0, 0.25));
     transform: scale(1.02);
   }
   
   /* Full logo - visible on desktop */
   .sidebar .sidebar-brand .logo-full {
     max-width: 160px;
     width: 100%;
     display: block;
   }
   
   /* Mobile icon - hidden by default */
   .sidebar .sidebar-brand .logo-mobile {
     max-width: 50px;
     width: 50px;
     display: none;
   }
   
   /* Event name container */
   .sidebar .sidebar-brand > div:last-child {
     text-align: center;
     padding: 0 0.5rem;
     margin-top: 0 !important;
   }
   
   /* Event name */
   .sidebar .sidebar-brand h3 {
     display: block;
     font-size: 0.75rem;
     font-weight: 600;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.85);
     line-height: 1.4;
     margin: 0;
     transition: color 0.2s ease;
   }
   
   .sidebar .sidebar-brand:hover h3 {
     color: rgba(255, 255, 255, 1);
   }
   
   /* Mobile adjustments */
   @media only screen and (max-width: 767px) {
     /* Sidebar scrollable on mobile */
     #accordionSidebar {
       overflow-y: auto;
       height: 100vh;
     }
   
     /* Hide sidebar-brand on mobile (when sidebar is open) */
     .sidebar .sidebar-brand,
     .sidebar-dark .sidebar-brand,
     #accordionSidebar .sidebar-brand {
       display: none !important;
     }
   }
   
   /* Sidebar divider - hidden to avoid duplicate line with sidebar-brand::after */
   .sidebar-dark hr.sidebar-divider {
     display: none !important;
   }
   
   /* Sidebar links - Base state */
   .sidebar .nav-item .nav-link,
   .sidebar-dark .nav-item .nav-link {
     padding: 0.55rem 1rem;
     color: rgba(255, 255, 255, 0.65) !important;
     border-radius: 10px;
     transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     background: transparent;
     border: 1px solid transparent;
   }
   
   .sidebar-dark .nav-item .nav-link i {
     color: rgba(255, 255, 255, 0.5) !important;
     font-size: 1rem;
     width: 20px;
     text-align: center;
     transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   .sidebar-dark .nav-item .nav-link span {
     transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   /* Sidebar hover - Refined glass effect */
   .sidebar-dark .nav-item .nav-link:hover {
     background: linear-gradient(
       135deg,
       rgba(59, 72, 122, 0.5) 0%,
       rgba(59, 72, 122, 0.3) 100%
     ) !important;
     color: var(--fidae-white) !important;
     border-radius: 10px;
     border-color: rgba(116, 129, 170, 0.2);
     box-shadow:
       0 4px 12px rgba(0, 0, 0, 0.15),
       inset 0 1px 0 rgba(255, 255, 255, 0.05);
   }
   
   .sidebar-dark .nav-item .nav-link:hover i {
     color: var(--fidae-tertiary) !important;
   }
   
   /* Sidebar selected item - Premium active state */
   .latera_selected {
     background: linear-gradient(
       135deg,
       var(--fidae-secondary) 0%,
       rgba(59, 72, 122, 0.9) 100%
     ) !important;
     color: var(--fidae-white) !important;
     border-radius: 10px;
     border-left: none;
     box-shadow:
       0 4px 16px rgba(59, 72, 122, 0.4),
       0 2px 4px rgba(0, 0, 0, 0.1),
       inset 0 1px 0 rgba(255, 255, 255, 0.1);
     position: relative;
     overflow: hidden;
   }
   
   .latera_selected::before {
     content: "";
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 3px;
     height: 60%;
     background: linear-gradient(
       180deg,
       var(--fidae-tertiary) 0%,
       rgba(116, 129, 170, 0.5) 100%
     );
     border-radius: 0 2px 2px 0;
     box-shadow: 0 0 8px rgba(116, 129, 170, 0.5);
   }
   
   .latera_selected::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(
       135deg,
       rgba(255, 255, 255, 0.05) 0%,
       transparent 50%
     );
     pointer-events: none;
   }
   
   .latera_selected i {
     color: var(--fidae-white) !important;
     filter: drop-shadow(0 0 4px rgba(116, 129, 170, 0.3));
   }
   
   /* Active state hover - subtle feedback */
   .latera_selected:hover {
     box-shadow:
       0 6px 20px rgba(59, 72, 122, 0.5),
       0 2px 4px rgba(0, 0, 0, 0.1),
       inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
   }
   
   /* Scrollbar styling for sidebar */
   .sidebar .nav-item.v_scroll {
     scrollbar-width: thin;
     scrollbar-color: rgba(116, 129, 170, 0.3) transparent;
   }
   
   .sidebar .nav-item.v_scroll::-webkit-scrollbar {
     width: 4px;
   }
   
   .sidebar .nav-item.v_scroll::-webkit-scrollbar-track {
     background: transparent;
   }
   
   .sidebar .nav-item.v_scroll::-webkit-scrollbar-thumb {
     background: rgba(116, 129, 170, 0.3);
     border-radius: 2px;
   }
   
   .sidebar .nav-item.v_scroll::-webkit-scrollbar-thumb:hover {
     background: rgba(116, 129, 170, 0.5);
   }
   
   /* =============================================================================
                     TOP NAVIGATION OVERRIDES
                     ============================================================================= */
   
   /* Topbar background - Clean, minimal header */
   .topbar,
   .navbar.topbar {
     background: linear-gradient(
       180deg,
       var(--fidae-secondary) 0%,
       #2f3a66 100%
     ) !important;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
     height: 60px !important;
     min-height: 60px !important;
     padding: 0 1rem !important;
   }
   
   /* Remove default margins that create visual noise */
   .topbar.mb-4 {
     margin-bottom: 1.5rem !important;
   }
   
   /* Topbar navigation container - simplified alignment */
   .topbar .navbar-nav {
     align-items: center;
     gap: 0.25rem;
   }
   
   /* Topbar divider - subtle and minimal */
   .topbar .topbar-divider {
     display: none !important;
   }
   
   /* =============================================================================
                     TOPBAR ICONS & LINKS - Unified clean style
                     ============================================================================= */
   
   .topbar .nav-link {
     color: rgba(255, 255, 255, 0.85) !important;
     padding: 0.5rem 0.75rem !important;
     border-radius: 8px;
     transition: all 0.2s ease;
     display: flex;
     align-items: center;
     gap: 0.5rem;
   }
   
   .topbar .nav-link:hover {
     color: var(--fidae-white) !important;
     background: rgba(255, 255, 255, 0.1);
   }
   
   .topbar .nav-link i {
     color: rgba(255, 255, 255, 0.75) !important;
     font-size: 1rem !important;
     transition: color 0.2s ease;
   }
   
   .topbar .nav-link:hover i {
     color: var(--fidae-white) !important;
   }
   
   /* User name text */
   .topbar .text-gray-600 {
     color: rgba(255, 255, 255, 0.9) !important;
     font-size: 0.875rem;
     font-weight: 500;
   }
   
   /* =============================================================================
                     USER INFO BOX - Simplified & integrated
                     ============================================================================= */
   
   /* Remove the white box completely - integrate icons directly */
   .topbar .nav-item .rounded[style*="background-color: #ffffff"],
   .topbar .nav-item .rounded[style*="background-color:#ffffff"] {
     background-color: transparent !important;
     background: transparent !important;
     padding: 0 !important;
     margin: 0 !important;
     height: auto !important;
     border-radius: 0 !important;
     gap: 0.25rem;
   }
   
   /* Hide "Mi cuenta" text - redundant with profile dropdown */
   .topbar .nav-item .rounded p,
   .topbar .nav-item .rounded a > p {
     display: none !important;
   }
   
   /* Style the icon containers inside the box */
   .topbar .nav-item .rounded > div[style*="padding: 8px"],
   .topbar .nav-item .rounded > div[style*="padding:8px"] {
     padding: 0.5rem !important;
     border-radius: 8px;
     transition: all 0.2s ease;
   }
   
   .topbar .nav-item .rounded > div[style*="padding: 8px"]:hover,
   .topbar .nav-item .rounded > div[style*="padding:8px"]:hover {
     background: rgba(255, 255, 255, 0.1);
   }
   
   /* Icons inside the box */
   .topbar .nav-item .rounded i {
     color: rgba(255, 255, 255, 0.75) !important;
     font-size: 1rem !important;
     transition: color 0.2s ease;
   }
   
   .topbar .nav-item .rounded > div:hover i {
     color: var(--fidae-white) !important;
   }
   
   /* =============================================================================
                     NOTIFICATION BADGES - Clean minimal style
                     ============================================================================= */
   
   .topbar .badge-counter {
     position: absolute;
     top: -2px;
     right: -2px;
     font-size: 0.65rem;
     padding: 0.2rem 0.4rem;
     min-width: 1rem;
     height: 1rem;
     line-height: 0.6rem;
     border-radius: 50px;
     background: #ef4444 !important;
     border: 2px solid var(--fidae-secondary);
     box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
   }
   
   /* =============================================================================
                     LOCALE SELECTOR - Refined minimal design
                     Override inline <style> tags from CakePHP
                     ============================================================================= */
   
   /* Reset locale container */
   .topbar .locale,
   .navbar .locale,
   .locale {
     z-index: 1000;
   }
   
   /* Override inline ul styles */
   .topbar .locale ul,
   .navbar .locale ul,
   .locale ul {
     height: auto !important;
     width: auto !important;
     margin: 0 !important;
     padding: 0 !important;
   }
   
   /* Fix locale alignment in topbar */
   .topbar .locale ul.list-unstyled {
     top: -25px !important;
     right: 20px !important;
   }
   
   /* Override inline li.init styles */
   .topbar .locale li.init,
   .navbar .locale li.init,
   .locale li.init {
     color: rgba(255, 255, 255, 0.85) !important;
     background-color: transparent !important;
     border: 1px solid rgba(255, 255, 255, 0.2) !important;
     border-radius: 6px !important;
     padding: 0.4rem 0.65rem !important;
     height: auto !important;
     width: auto !important;
     font-size: 0.75rem !important;
     font-weight: 500 !important;
     transition: all 0.2s ease !important;
     display: flex !important;
     align-items: center !important;
     gap: 0.35rem;
     float: none !important;
     margin-bottom: 0 !important;
   }
   
   .topbar .locale li.init:hover,
   .navbar .locale li.init:hover,
   .locale li.init:hover {
     background-color: rgba(255, 255, 255, 0.1) !important;
     border-color: rgba(255, 255, 255, 0.3) !important;
     color: var(--fidae-white) !important;
   }
   
   /* Globe icon */
   .topbar .locale li.init .fa-globe,
   .navbar .locale li.init .fa-globe,
   .locale li.init .fa-globe,
   .locale .fa.pull-left {
     font-size: 0.85rem !important;
     margin: 0 !important;
     margin-right: 0 !important;
     float: none !important;
   }
   
   /* Language text (ES, EN, etc) */
   .topbar .locale li.init > .pull-left,
   .navbar .locale li.init > .pull-left,
   .locale li.init > .pull-left {
     margin-top: 0 !important;
     float: none !important;
   }
   
   /* Dropdown arrow */
   .topbar .locale li.init .glyphicon-menu-down,
   .navbar .locale li.init .glyphicon-menu-down,
   .locale .glyphicon.glyphicon-menu-down {
     font-size: 0.5rem !important;
     opacity: 0.7;
     padding: 0 !important;
   }
   
   /* Name container inside init */
   .topbar .locale .init .name,
   .navbar .locale .init .name,
   .locale .init .name {
     line-height: 1 !important;
     float: none !important;
   }
   
   /* Override inline dropdown li styles */
   .topbar .locale ul li:not(.init),
   .navbar .locale ul li:not(.init),
   .locale ul li:not(.init) {
     background: var(--fidae-white) !important;
     color: var(--fidae-primary) !important;
     padding: 0.5rem 0.75rem !important;
     padding-right: 0.75rem !important;
     font-size: 0.8rem !important;
     border: none !important;
     transition: background 0.15s ease !important;
     width: 120px !important;
     float: left !important;
   }
   
   .topbar .locale ul li:not(.init):first-of-type,
   .navbar .locale ul li:not(.init):first-of-type,
   .locale ul li:not(.init):first-of-type {
     border-radius: 6px 6px 0 0 !important;
     margin-top: 0.35rem !important;
   }
   
   .topbar .locale ul li:not(.init):last-child,
   .navbar .locale ul li:not(.init):last-child,
   .locale ul li:not(.init):last-child {
     border-radius: 0 0 6px 6px !important;
   }
   
   /* Hover states - override inline styles */
   .topbar .locale ul li.avalaible:hover,
   .navbar .locale ul li.avalaible:hover,
   .locale li.avalaible:hover {
     background: #f0f1f5 !important;
   }
   
   /* Selected state - override inline styles */
   .topbar .locale ul li.selected:not(.init),
   .navbar .locale ul li.selected:not(.init),
   .locale ul li.selected:not(.init) {
     background: var(--fidae-secondary) !important;
     color: var(--fidae-white) !important;
   }
   
   /* =============================================================================
                     USER PROFILE DROPDOWN - Clean avatar design
                     ============================================================================= */
   
   .topbar .img-profile {
     width: 36px !important;
     height: 36px !important;
     border: 2px solid rgba(255, 255, 255, 0.3);
     transition: all 0.2s ease;
   }
   
   .topbar .nav-link:hover .img-profile {
     border-color: rgba(255, 255, 255, 0.6);
     transform: scale(1.05);
   }
   
   /* Dropdown menu styling */
   .topbar .dropdown-menu {
     border: none;
     border-radius: 10px;
     box-shadow:
       0 10px 40px rgba(0, 0, 0, 0.15),
       0 2px 10px rgba(0, 0, 0, 0.1);
     padding: 0.5rem;
     margin-top: 0.5rem !important;
     min-width: 200px;
   }
   
   .topbar .dropdown-item {
     padding: 0.6rem 1rem;
     border-radius: 6px;
     font-size: 0.85rem;
     color: #4a5568;
     transition: all 0.15s ease;
   }
   
   .topbar .dropdown-item:hover {
     background: #f0f1f5;
     color: var(--fidae-primary);
   }
   
   .topbar .dropdown-item i {
     width: 1.25rem;
     color: var(--fidae-gray) !important;
   }
   
   .topbar .dropdown-item:hover i {
     color: var(--fidae-secondary) !important;
   }
   
   .topbar .dropdown-divider {
     margin: 0.5rem 0;
     border-color: #e5e7eb;
   }
   
   /* =============================================================================
                     MOBILE TOGGLE BUTTON - Simplified
                     ============================================================================= */
   
   #accordionSidebar #sidebarToggleTop,
   .topbar #sidebarToggleTop,
   #sidebarToggleTop {
     color: var(--fidae-white) !important;
     background: transparent !important;
     border: none !important;
     padding: 0.5rem !important;
     border-radius: 8px !important;
     transition: all 0.2s ease !important;
   }
   
   @media only screen and (max-width: 767px) {
     #accordionSidebar #sidebarToggleTop {
       margin: 0 !important;
       margin-top: 10px !important;
       margin-bottom: 10px !important;
     }
   }
   
   #accordionSidebar #sidebarToggleTop:hover,
   .topbar #sidebarToggleTop:hover,
   #sidebarToggleTop:hover {
     background: rgba(255, 255, 255, 0.1) !important;
     color: var(--fidae-white) !important;
   }
   
   #accordionSidebar #sidebarToggleTop i,
   .topbar #sidebarToggleTop i,
   #sidebarToggleTop i {
     font-size: 1.1rem !important;
     color: var(--fidae-white) !important;
   }
   
   /* =============================================================================
                     CONTENT AREA OVERRIDES
                     ============================================================================= */
   
   /* Content background */
   #content-wrapper {
     background-color: #f0f1f5;
   }
   
   /* Content boxes - White color */
   .white_box {
     background-color: var(--fidae-white);
   }
   
   /* =============================================================================
                     BUTTON OVERRIDES
                     ============================================================================= */
   
   /* Primary buttons */
   .btn-primary {
     background-color: var(--fidae-secondary);
     border-color: var(--fidae-secondary);
   }
   
   .btn-primary:hover,
   .btn-primary:active,
   .btn-primary:focus,
   .btn-primary:not(:disabled):not(.disabled):active {
     background-color: var(--fidae-primary) !important;
     border-color: var(--fidae-primary) !important;
   }
   
   /* Secondary buttons */
   .btn-primary.btn-primary2,
   .btn-primary.btn-primary2:hover,
   .btn-primary.btn-primary2:active {
     background-color: var(--fidae-tertiary) !important;
     border-color: var(--fidae-tertiary) !important;
   }
   
   /* =============================================================================
                     LOGIN PAGE OVERRIDES
                     ============================================================================= */
   
   /* Locale selector on login pages */
   .locale li.init {
     background-color: var(--fidae-secondary) !important;
   }
   
   .locale ul li.selected:not(.init) {
     background-color: var(--fidae-secondary) !important;
   }
   
   /* =============================================================================
                     BADGES & ACCENTS
                     ============================================================================= */
   
   .badge-primary {
     background-color: var(--fidae-secondary);
   }
   
   .list-group-item.active {
     background-color: var(--fidae-secondary);
     border-color: var(--fidae-secondary);
   }
   
   .day_picker_circle.selected {
     background-color: var(--fidae-secondary);
   }
   
   /* =============================================================================
                     RESPONSIVE SIDEBAR
                     ============================================================================= */
   
   /* Desktop sidebar width - matches real environment */
   /* @media (min-width: 768px) {
                    .sidebar {
                      width: 14rem !important;
                    }
                  } */
   
   /* =============================================================================
                     MOBILE OVERRIDES
                     ============================================================================= */
   
   @media only screen and (max-width: 767px) {
     .sidebar {
       background: linear-gradient(
         180deg,
         var(--fidae-primary) 0%,
         #121a3d 100%
       ) !important;
     }
   
     /* Mobile topbar adjustments */
     .topbar,
     .navbar.topbar {
       background: var(--fidae-primary) !important;
       height: 56px !important;
       min-height: 56px !important;
       padding: 0 0.75rem !important;
     }
   
     .topbar .nav-link {
       padding: 0.4rem 0.5rem !important;
     }
   
     .topbar .locale li.init {
       padding: 0.3rem 0.5rem !important;
       font-size: 0.7rem;
     }
   
     /* Mobile locale positioning fix */
     .topbar .locale ul.list-unstyled {
       top: 11px !important;
       right: 110px !important;
       z-index: 1000 !important;
       display: grid !important;
     }
   
     .topbar .img-profile {
       width: 32px !important;
       height: 32px !important;
     }
   
     .topbar .text-gray-600 {
       font-size: 0.8rem;
     }
   }
   
   /* Tablet adjustments */
   @media only screen and (min-width: 768px) and (max-width: 991px) {
     .topbar .navbar-nav {
       gap: 0.15rem;
     }
   
     .topbar .nav-link {
       padding: 0.4rem 0.6rem !important;
     }
   }
   
   /* =============================================================================
                     LOGIN VIEW - DARK MODE
                     ============================================================================= */
   
   /* Body background - Deep navy gradient (applied to main element) */
   main {
     background: linear-gradient(
       135deg,
       var(--fidae-primary) 0%,
       #0d1229 50%,
       #121a3d 100%
     ) !important;
     min-height: 100vh;
     position: relative;
   }
   
   /* Subtle pattern overlay */
   main::before {
     content: "";
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-image:
       radial-gradient(
         circle at 25% 25%,
         rgba(59, 72, 122, 0.1) 0%,
         transparent 50%
       ),
       radial-gradient(
         circle at 75% 75%,
         rgba(116, 129, 170, 0.08) 0%,
         transparent 50%
       );
     pointer-events: none;
     z-index: 0;
   }
   
   /* =============================================================================
                     LOGIN CONTAINER
                     ============================================================================= */
   
   .users .container {
     padding-right: 0;
     padding-left: 0;
   }
   
   /* =============================================================================
                     LOGIN CARD - Dark glass morphism
                     ============================================================================= */
   
   /* Login card parent container fix */
   .users .row {
     margin-left: 0 !important;
     margin-right: 0 !important;
     width: 100% !important;
     max-width: 100% !important;
     justify-content: center;
   }
   
   .users .col-md-7.white-box,
   .users .col-sm-12.white-box,
   .users [class*="col-"].white-box {
     /* Let Bootstrap grid handle max-width on desktop */
     flex: 0 1 auto !important;
   }
   
   /* Override inline background-color */
   .users .white-box,
   .users .white-box[style],
   .users .col-md-7.white-box,
   .users div[style*="background-color:rgba(255,255,255"] {
     background: linear-gradient(
       145deg,
       rgba(24, 33, 76, 0.95) 0%,
       rgba(18, 26, 61, 0.98) 100%
     ) !important;
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(116, 129, 170, 0.15) !important;
     box-shadow:
       0 25px 50px rgba(0, 0, 0, 0.4),
       0 10px 20px rgba(0, 0, 0, 0.3),
       inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
     position: relative;
     z-index: 1;
     /* Let Bootstrap grid handle max-width on desktop */
     box-sizing: border-box;
     overflow: visible;
   }
   
   /* Card glow effect */
   .users .white-box::before {
     content: "";
     position: absolute;
     top: -1px;
     left: 20%;
     right: 20%;
     height: 2px;
     background: linear-gradient(
       90deg,
       transparent 0%,
       var(--fidae-tertiary) 50%,
       transparent 100%
     );
     border-radius: 2px;
     opacity: 0.5;
   }
   
   /* =============================================================================
                     LOGIN TYPOGRAPHY
                     ============================================================================= */
   
   /* Title */
   .users h3,
   .users .h3 {
     color: var(--fidae-white) !important;
     font-weight: 600;
     letter-spacing: 0.3px;
     margin-bottom: 0.5rem;
   }
   
   /* Description text */
   .users p {
     color: var(--fidae-gray) !important;
     font-size: 0.9rem;
     line-height: 1.6;
   }
   
   /* Divider */
   .users hr {
     border-color: rgba(116, 129, 170, 0.2) !important;
     margin: 1.25rem 0 !important;
   }
   
   /* Labels */
   .users label {
     color: rgba(255, 255, 255, 0.85) !important;
     font-weight: 500;
     font-size: 0.875rem;
     margin-bottom: 0.5rem;
   }
   
   /* Links */
   .users a {
     color: var(--fidae-tertiary) !important;
     transition: color 0.2s ease;
   }
   
   .users a:hover {
     color: var(--fidae-white) !important;
   }
   
   /* Info text (e.g., "¿Cuál es mi orden de compra?") */
   .users #buyOrderInfo {
     color: var(--fidae-tertiary) !important;
     font-size: 0.85rem;
     opacity: 0.9;
     transition: all 0.2s ease;
   }
   
   .users #buyOrderInfo:hover {
     color: var(--fidae-white) !important;
     opacity: 1;
   }
   
   /* =============================================================================
                     FORM INPUTS - Dark theme
                     ============================================================================= */
   
   .users .form-control {
     background-color: rgba(13, 18, 41, 0.6) !important;
     border: 1px solid rgba(116, 129, 170, 0.25) !important;
     color: var(--fidae-white) !important;
     border-radius: 8px !important;
     padding: 0.75rem 1rem !important;
     font-size: 0.95rem !important;
     transition: all 0.25s ease !important;
   }
   
   .users .form-control::placeholder {
     color: rgba(154, 162, 165, 0.6) !important;
   }
   
   .users .form-control:focus {
     background-color: rgba(13, 18, 41, 0.8) !important;
     border-color: var(--fidae-tertiary) !important;
     box-shadow:
       0 0 0 3px rgba(116, 129, 170, 0.15),
       0 0 20px rgba(116, 129, 170, 0.1) !important;
     outline: none !important;
   }
   
   /* Input group prepend */
   .users .input-group-text {
     background-color: rgba(59, 72, 122, 0.4) !important;
     border: 1px solid rgba(116, 129, 170, 0.25) !important;
     border-right: none !important;
     color: var(--fidae-tertiary) !important;
     border-radius: 8px 0 0 8px !important;
     font-size: 0.85rem !important;
   }
   
   .users .input-group .form-control {
     border-radius: 0 8px 8px 0 !important;
   }
   
   /* Checkbox styling */
   .users .checkbox {
     color: rgba(255, 255, 255, 0.75) !important;
   }
   
   .users .checkbox input[type="checkbox"] {
     accent-color: var(--fidae-secondary);
     width: 16px;
     height: 16px;
   }
   
   /* =============================================================================
                     LOGIN BUTTONS - Aligned with sidebar button styles
                     ============================================================================= */
   
   .users .btn-primary,
   .users .btn-default,
   .users .btn-blue {
     background: linear-gradient(
       135deg,
       var(--fidae-secondary) 0%,
       rgba(59, 72, 122, 0.9) 100%
     ) !important;
     border: 1px solid transparent !important;
     color: var(--fidae-white) !important;
     border-radius: 10px !important;
     padding: 0.85rem 1.5rem !important;
     font-weight: 600 !important;
     font-size: 1rem !important;
     letter-spacing: 0.3px;
     transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
     box-shadow:
       0 4px 16px rgba(59, 72, 122, 0.4),
       0 2px 4px rgba(0, 0, 0, 0.1),
       inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
     position: relative;
     overflow: hidden;
   }
   
   .users .btn-primary:hover,
   .users .btn-default:hover,
   .users .btn-blue:hover {
     background: linear-gradient(
       135deg,
       rgba(59, 72, 122, 0.5) 0%,
       rgba(59, 72, 122, 0.3) 100%
     ) !important;
     border-color: rgba(116, 129, 170, 0.2) !important;
     box-shadow:
       0 6px 20px rgba(59, 72, 122, 0.5),
       0 2px 4px rgba(0, 0, 0, 0.1),
       inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
   }
   
   .users .btn-primary:active,
   .users .btn-default:active,
   .users .btn-blue:active {
     box-shadow:
       0 2px 8px rgba(59, 72, 122, 0.3),
       inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
   }
   
   /* Secondary button (Acceso Expositores) - Same style as primary */
   .users .btn-primary2,
   .users .btn-primary.btn-primary2 {
     background: linear-gradient(
       135deg,
       var(--fidae-secondary) 0%,
       rgba(59, 72, 122, 0.9) 100%
     ) !important;
   }
   
   .users .btn-primary2:hover,
   .users .btn-primary.btn-primary2:hover {
     background: linear-gradient(
       135deg,
       rgba(59, 72, 122, 0.5) 0%,
       rgba(59, 72, 122, 0.3) 100%
     ) !important;
   }
   
   /* =============================================================================
                     LOGIN LOGO
                     ============================================================================= */
   
   .users .logo {
     filter: brightness(1.1) drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3));
     transition: all 0.3s ease;
     margin-bottom: 1.5rem !important;
   }
   
   .users .logo:hover {
     filter: brightness(1.2) drop-shadow(0 6px 25px rgba(0, 0, 0, 0.4));
     transform: scale(1.02);
   }
   
   /* =============================================================================
                     LOGIN LOCALE SELECTOR - Dark adaptation, positioned top-right of page
                     ============================================================================= */
   
   /* Position locale above the card, at top-right */
   .users .locale,
   .users .locale[style] {
     position: absolute !important;
     right: 0 !important;
     left: auto !important;
     top: -3.5rem !important;
     bottom: auto !important;
     z-index: 1100 !important;
   }
   
   .users .locale ul.list-unstyled {
     position: relative !important;
     right: 0 !important;
     left: auto !important;
     height: auto !important;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-end;
   }
   
   .users .locale li.init {
     background: rgba(59, 72, 122, 0.5) !important;
     color: var(--fidae-white) !important;
     border: 1px solid rgba(116, 129, 170, 0.3) !important;
     border-radius: 8px !important;
     backdrop-filter: blur(10px);
     transition: all 0.2s ease !important;
   }
   
   .users .locale li.init:hover {
     background: rgba(59, 72, 122, 0.7) !important;
     border-color: rgba(116, 129, 170, 0.5) !important;
   }
   
   .users .locale li.init .fa-globe,
   .users .locale li.init .glyphicon {
     color: var(--fidae-tertiary) !important;
   }
   
   /* Dropdown items */
   .users .locale ul li:not(.init) {
     background: rgba(24, 33, 76, 0.98) !important;
     color: rgba(255, 255, 255, 0.85) !important;
     border: none !important;
     backdrop-filter: blur(10px);
   }
   
   /* Dropdown opens downward */
   .users .locale ul li:not(.init):first-of-type {
     border-radius: 8px 8px 0 0 !important;
     margin-top: 0.5rem !important;
     border-top: 1px solid rgba(116, 129, 170, 0.2) !important;
   }
   
   .users .locale ul li:not(.init):last-child {
     border-radius: 0 0 8px 8px !important;
   }
   
   .users .locale li.avalaible:hover {
     background: rgba(59, 72, 122, 0.6) !important;
     color: var(--fidae-white) !important;
   }
   
   .users .locale ul li.selected:not(.init) {
     background: var(--fidae-secondary) !important;
     color: var(--fidae-white) !important;
   }
   
   /* =============================================================================
                     LOGIN MODAL - Dark theme
                     ============================================================================= */
   
   .users .modal {
     background: rgba(0, 0, 0, 0.85) !important;
     backdrop-filter: blur(5px);
   }
   
   .users .modal-content {
     background: linear-gradient(
       145deg,
       rgba(24, 33, 76, 0.98) 0%,
       rgba(18, 26, 61, 1) 100%
     ) !important;
     border: 1px solid rgba(116, 129, 170, 0.2) !important;
     border-radius: 16px !important;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
   }
   
   .users .modal-header {
     border-bottom: 1px solid rgba(116, 129, 170, 0.15) !important;
     padding: 1.25rem 1.5rem !important;
   }
   
   .users .modal-title {
     color: var(--fidae-white) !important;
     font-weight: 600;
   }
   
   .users .modal-header .close {
     color: var(--fidae-gray) !important;
     text-shadow: none !important;
     opacity: 0.7;
     transition: all 0.2s ease;
   }
   
   .users .modal-header .close:hover {
     color: var(--fidae-white) !important;
     opacity: 1;
   }
   
   .users .modal-bodys {
     padding: 1.5rem !important;
   }
   
   .users .modal-bodys img {
     border-radius: 8px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   }
   
   /* =============================================================================
                     LOGIN LOADER - Theme match
                     ============================================================================= */
   
   .users #virtual_loader {
     background-color: rgba(13, 18, 41, 0.9) !important;
     backdrop-filter: blur(10px);
   }
   
   .users .lds-dual-ring:after {
     border-color: var(--fidae-tertiary) transparent var(--fidae-secondary)
       transparent !important;
   }
   
   /* =============================================================================
                     LOGIN ALERTS
                     ============================================================================= */
   
   .users .alert {
     border-radius: 10px !important;
     border: none !important;
     backdrop-filter: blur(10px);
   }
   
   .users .alert-success {
     background-color: rgba(34, 197, 94, 0.9) !important;
     box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3) !important;
   }
   
   .users .alert-danger {
     background-color: rgba(239, 68, 68, 0.9) !important;
     box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important;
   }
   
   /* =============================================================================
                     LOGIN RESPONSIVE
                     ============================================================================= */
   
   @media only screen and (max-width: 767px) {
     .users .white-box,
     .users div[style*="background-color:rgba(255,255,255"] {
       margin: 1rem !important;
       padding: 1.5rem !important;
       max-width: 100% !important;
       width: auto !important;
     }
   
     .users h3 {
       font-size: 1.25rem !important;
     }
   
     .users .btn-primary,
     .users .btn-default {
       padding: 0.75rem 1rem !important;
       font-size: 0.95rem !important;
     }
   
     .users .logo {
       max-width: 200px !important;
     }
   
     .users .locale {
       top: -3rem !important;
       right: 0 !important;
       bottom: auto !important;
       left: auto !important;
     }
   }
   
   /* Tablet adjustments */
   @media only screen and (min-width: 768px) and (max-width: 991px) {
     .users .white-box {
       padding: 2rem !important;
     }
   }