/* Blue-themed navbar styles to match original design */
:root{
  /* Slightly darker blue but not too dark (user requested) */
  --nav-gradient: linear-gradient(180deg,#0f3f9f 0%, #153fae 100%);
  --nav-text-light: #ffffff;
  --nav-accent: #0f3f9f;
}

.site-header{
  position:sticky; top:0; z-index:1301;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 30, 80, 0.9) 0%, rgba(12, 45, 115, 0.9) 100%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  z-index: -1;
}

.nav-container{position:relative; z-index:1; display:flex;align-items:center;justify-content:space-between;padding:10px 20px;max-width:1280px;margin:0 auto}
.brand-wrap{display:flex;align-items:center;gap:10px}
.brand-logo{height:45px;width:auto;object-fit:contain;border-radius:6px}
.brand-text{font-weight:700;font-size:18px;color:var(--nav-text-light);margin-left:8px}

/* Desktop nav */
.primary-menu{display:flex;align-items:center}
.nav-links{list-style:none;display:flex;gap:14px;margin:0;padding:0;align-items:center}
/* Center the primary links in desktop layouts */
.nav-links{margin:0 auto}
/* On desktop keep brand left and push nav to the right */
.nav-links li{position:relative}
.nav-links a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;color:var(--nav-text-light);text-decoration:none;border-radius:10px;font-weight:600;
  border:1px solid rgba(255,255,255,0.06); background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); transition:transform .12s ease, box-shadow .12s ease, background .12s ease}
.nav-links a i { color: rgba(255,255,255,0.95); }
.nav-links a:hover{background:rgba(255,255,255,0.06); transform:translateY(-2px); box-shadow:0 8px 28px rgba(9,30,66,0.12)}

/* Accent button style for highlighted links (e.g., Acceder) */
.nav-links a.btn-accent{background:rgba(255,255,255,0.12);padding:10px 16px;border:1px solid rgba(255,255,255,0.2); color:#fff !important; box-shadow:0 8px 20px rgba(9,30,66,0.12);}
.nav-links a.btn-accent:hover{background:rgba(255,255,255,0.18); transform:translateY(-2px)}

.has-dropdown .dropdown-panel{display:none;position:absolute;top:100%;left:0;min-width:220px;background:#fff;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.12);padding:10px;z-index:260}
.has-dropdown:hover .dropdown-panel{display:block}

/* Desktop dropdown submenu list */
.dropdown-submenu{list-style:none;padding:4px 0;margin:0}
.dropdown-submenu li a{display:block;padding:8px 14px;color:var(--nav-accent);text-decoration:none;border-radius:6px;font-weight:600}
.dropdown-submenu li a:hover{background:rgba(30,64,175,0.06)}

/* menu_info submenu styles */
.menu-info-list { display:flex; gap:18px; align-items:center; margin:0; padding:0; }
.menu-info-list { /* full-width blue secondary bar */
  display:flex; gap:24px; align-items:center; margin:0; padding:8px 0; width:100%; justify-content:center; background: linear-gradient(90deg,#0f3f9f 0%, #153fae 100%); box-shadow:0 2px 0 rgba(0,0,0,0.08); z-index:260
}
.menu-info-list > li { list-style:none }
.menu-info-list > li > a { background:transparent; color:#fff; padding:6px 16px; display:inline-block; border-radius:6px; font-weight:800; letter-spacing:0.4px; text-transform:uppercase; font-size:0.86rem; text-shadow:0 1px 0 rgba(0,0,0,0.18) }
.menu-info-list > li > a:hover, .menu-info-list > li > a:focus { background: rgba(255,255,255,0.06); color:#fff }

/* responsive: allow horizontal scroll on narrow screens */
@media (max-width: 880px) {
  .menu-info-list { gap:14px; padding:8px 10px; overflow-x:auto; -webkit-overflow-scrolling:touch }
  .menu-info-list > li > a { white-space:nowrap; font-size:0.9rem }

  /* Mobile: hide the full-width secondary bar by default; show only via hamburger
     Hide desktop dropdown panels to avoid overlapping. Use the mobile-submenu
     as a single fixed overlay when `body.nav-open` is present. */
  .menu-info { display:none !important }
  /* But keep menu-info visible when inside the mobile-submenu (slide-out panel) */
  .mobile-submenu .menu-info { display:block !important }

  .primary-menu .dropdown-panel { display:none }
  .primary-menu .mobile-submenu { display:none }

  /* Mobile-submenu now lives inside the slide-out panel body; no separate overlay needed */
}
.menu-info-list .menu-group { position:relative; }
.menu-info-list .submenu { display:none; position:absolute; top:100%; left:0; min-width:200px; background:#fff; color:#07203a; padding:8px; border-radius:8px; box-shadow:0 8px 22px rgba(9,30,66,0.12); list-style:none; z-index:270 }
.menu-info-list .submenu li { text-align:center; }
.menu-info-list .submenu a { display:block; padding:8px 12px; color:#07203a; text-decoration:none; border-radius:6px }
.menu-info-list .menu-group:hover > .submenu{ display:block }

.menu-info-list > li > a { background: transparent; color: var(--nav-text-light); padding: 8px 12px; display:inline-block; border-radius:6px; font-weight:700; text-transform:none }
.menu-info-list > li > a:hover, .menu-info-list > li > a:focus { background: rgba(255,255,255,0.06); color: var(--nav-text-light); }

/* Keep submenu (dropdown) as white box with blue links */
.menu-info-list .submenu a { color: var(--nav-accent); font-weight:600 }
.menu-info-list .submenu a:hover, .menu-info-list .submenu a:focus { background: rgba(30,64,175,0.04); }

/* Accent button for login */
.nav-link.btn-accent { background: #fff; color: var(--nav-accent); padding: 6px 12px; border-radius: 8px; font-weight:700; box-shadow: 0 1px 0 rgba(0,0,0,0.06); text-decoration:none }
.nav-link.btn-accent:hover, .nav-link.btn-accent:focus { background: #ffffff; color: var(--nav-accent); opacity:0.95 }

/* Logout button (in form) styled to blend with nav */
.nav-logout-form .btn-logout { background: transparent; color: var(--nav-text-light); padding:6px 10px; border: none; font-weight:700 }
.nav-logout-form .btn-logout:hover { text-decoration:underline }

/* Brand / logo boxed design — premium glassmorphism */
.brand-wrap { display:flex; align-items:center }
.brand-link {
  display:flex; align-items:center; gap:14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding:10px 20px; border-radius:14px;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 4px 24px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.10);
  transition: box-shadow .2s ease, transform .2s ease;
}
.brand-link:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

/* Circular white badge behind the logo image */
.brand-logo-wrap {
  display:flex; align-items:center; justify-content:center;
  width:50px; height:50px;
  background: #ffffff;
  border-radius:50%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  flex-shrink:0;
  overflow:hidden;
}
.brand-logo { width:36px; height:36px; object-fit:contain; display:block }

.brand-text { display:flex; flex-direction:column; gap:1px; }
.brand-line-small {
  display:block; color:rgba(210,230,255,0.85); font-weight:600; font-size:11px;
  letter-spacing:1.6px; text-transform:uppercase;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
.brand-line-large {
  display:block; color:#ffffff; font-weight:800; font-size:19px;
  letter-spacing:1px; text-transform:uppercase;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

@media (max-width:900px) {
  .brand-link { padding:8px 14px; gap:10px; border-radius:12px }
  .brand-logo-wrap { width:42px; height:42px }
  .brand-logo { width:30px; height:30px }
  .brand-line-small { font-size:10px; letter-spacing:1.2px }
  .brand-line-large { font-size:15px }
}

/* Improved submenu link styling for visibility */
.menu-info-list .submenu a { color: var(--nav-accent); font-weight:700; }
.menu-info-list .submenu a:hover, .menu-info-list .submenu a:focus { background: rgba(30,64,175,0.06); color: var(--nav-accent); outline: none; }

/* Dropdown panel when included inside the main navbar (desktop) */
.dropdown-panel { padding: 0.5rem; }
.dropdown-panel .menu-info-list { padding: 8px; }
.dropdown-panel .submenu { position: static; box-shadow: none; border-radius:6px; background:#fff; }

/* Mobile: when submenu appears inside the blue slide-out panel, keep links readable */
.primary-menu .menu-info-list .submenu a, .primary-menu .menu-info-list a { color: var(--nav-text-light); font-weight:600 }
.primary-menu .menu-info-list .submenu a:hover { background: rgba(255,255,255,0.06); }

/* Small pointer triangle for desktop submenu */
.menu-info-list .submenu::before { content: ''; position: absolute; top: -8px; left: 18px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); box-shadow: -2px -2px 4px rgba(9,30,66,0.04); }


/* Secondary menu (menu_info) displayed under header on desktop */
.menu-info{background:#0f3f9f;border-top:1px solid rgba(255,255,255,0.04); position:relative; z-index:1200; width:100%} 
.menu-info-list{display:flex;gap:18px;list-style:none;margin:0;padding:10px 20px}
.menu-info-list a{color:var(--nav-text-light);text-decoration:none;padding:8px 10px;border-radius:6px;font-weight:600}
.menu-info-list a:hover{background:rgba(255,255,255,0.04)}

/* Desktop-only adjustments */
@media (min-width: 901px){
  /* Place logo at left and nav group flush to the right edge of the header */
  .nav-container{justify-content:space-between}
  .mobile-cta{display:none}
  .brand-wrap{margin-right:12px}
  .nav-links{margin-left:0; margin-right:8px}

  /* Make desktop 'Acceder' button more visible with white text */
  .nav-links a.btn-accent{
    background: rgba(255,255,255,0.12);
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.18);
    padding:10px 14px;
    border-radius:10px;
    box-shadow: 0 6px 18px rgba(9,30,66,0.12);
    font-weight:800;
  }
  .nav-links a.btn-accent:hover{ background: rgba(255,255,255,0.18) }
  
    /* Desktop: hide the compact duplicate 'Bienvenidos' dropdown toggle in the top bar
      We keep the secondary full-width menu below (menu-info) as the canonical place */
    .nav-links li.has-dropdown > a.dropdown-toggle { display:none !important }
    /* small spacing to keep items visually separated from logo */
    .nav-links > li { margin-left: 12px }
}

/* Mobile */
.nav-toggle{display:none;background:none;border:0;padding:6px}
.hamburger{display:block;width:28px;height:2px;background:var(--nav-text-light);position:relative}
.hamburger::before,.hamburger::after{content:'';position:absolute;left:0;right:0;height:2px;background:var(--nav-text-light)}
.hamburger::before{top:-8px}.hamburger::after{top:8px}
.primary-menu{gap:12px}
.mobile-submenu{display:none}

/* Hide mobile-only elements on desktop */
.mobile-menu-header{display:none}
.mobile-menu-body{display:contents}
.mobile-menu-divider{display:none}
.mobile-close-btn{display:none}

@media (max-width: 900px){
  .hide-on-mobile{display:none !important}
  .nav-container{padding:10px}
  /* Show brand text on mobile (previously hidden) and reduce size to fit */
  .brand-text{display:block;color:var(--nav-text-light);margin-left:8px}
  .brand-line-small{font-size:0.55rem;opacity:0.95}
  .brand-line-large{font-size:0.72rem;opacity:1}
  /* Make toggle clearly visible and on top of overlays */
  .nav-toggle{display:block; position:relative; z-index:1302; width:44px; height:44px; padding:8px; border-radius:8px; background:transparent}
  .nav-toggle:focus{outline:2px solid rgba(255,255,255,0.14)}

  /* Full-screen slide-out panel */
  .primary-menu{
    position:fixed; left:0; top:0; bottom:0; right:0;
    width:100%;
    background: #0f3f9f; /* Changed to solid blue matching original design */
    flex-direction:column;
    padding:0;
    transform:translateX(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
    box-shadow:-12px 0 40px rgba(0,0,0,0.20);
    z-index:1300;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .primary-menu.open{transform:translateX(0)}

  /* Mobile brand header inside slide-out */
  .mobile-menu-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 20px 16px;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .mobile-brand{
    display:flex; align-items:center; gap:12px;
  }
  .mobile-brand .brand-logo-wrap{ width:44px; height:44px }
  .mobile-brand .brand-logo{ width:30px; height:30px }
  .mobile-brand .brand-text{ display:flex; flex-direction:column; gap:1px }
  .mobile-brand .brand-line-small{ display:block; font-size:9px; letter-spacing:1.4px; color:rgba(200,220,255,0.7); font-weight:600; text-transform:uppercase }
  .mobile-brand .brand-line-large{ display:block; font-size:14px; font-weight:800; color:#fff; letter-spacing:0.6px; text-transform:uppercase }

  /* Close button (X) */
  .mobile-close-btn{
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.10);
    color:#fff; width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; cursor:pointer;
    transition:background .15s ease, transform .15s ease;
  }
  .mobile-close-btn:hover, .mobile-close-btn:active{
    background:rgba(255,255,255,0.15); transform:scale(1.05);
  }

  /* Scrollable body area */
  .mobile-menu-body{
    flex:1; padding:16px 16px 120px; overflow-y:auto;
  }

  /* Nav links as glass cards */
  .nav-links{flex-direction:column; align-items:stretch; gap:8px; padding:0; margin:0}
  .nav-links li{ list-style:none }
  .nav-links a{
    display:flex !important; align-items:center; gap:12px;
    padding:14px 18px !important;
    background:rgba(255,255,255,0.06) !important;
    border:1px solid rgba(255,255,255,0.08) !important;
    border-radius:14px !important;
    color:#fff !important; font-weight:700 !important; font-size:1rem;
    text-decoration:none;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    transition:background .15s ease, transform .15s ease;
  }
  .nav-links a:hover, .nav-links a:active{
    background:rgba(255,255,255,0.12) !important;
    transform:translateX(4px);
  }
  .nav-links a i{
    font-size:1.2rem; color:rgba(255,255,255,0.85); width:24px; text-align:center; flex-shrink:0;
  }

  /* Divider between sections */
  .mobile-menu-divider{
    height:1px; background:rgba(255,255,255,0.08);
    margin:16px 0;
  }

  /* Dropdown/submenu inside mobile */
  .has-dropdown .dropdown-panel{position:static;display:none;background:transparent;box-shadow:none;padding:0}
  .has-dropdown.expanded .dropdown-panel{display:block !important}
  /* Simple dropdown submenu items inside the Bienvenidos dropdown */
  .dropdown-submenu{list-style:none;padding:4px 0 4px 16px;margin:4px 0 0 8px;border-left:2px solid rgba(255,255,255,0.15)}
  .dropdown-submenu li a{
    display:flex;align-items:center;gap:12px;
    padding:8px 14px !important;
    background:transparent !important;
    border:none !important;
    border-radius:8px !important;
    color:rgba(255,255,255,0.8) !important;font-weight:600 !important;font-size:0.95rem;
    text-decoration:none;margin-top:2px;
  }
  .dropdown-submenu li a:hover{background:rgba(255,255,255,0.08) !important; color:#fff !important}
  .primary-menu .mobile-submenu{display:block !important;margin-top:0}
  .menu-info{display:block; background:transparent; border:none; width:100%; box-shadow:none;}
  .menu-info-list{flex-direction:column;padding:0;gap:6px; background:transparent;}
  .menu-info-list .submenu{position:static;display:none;background:transparent;padding:0;box-shadow:none}
  .menu-info-list .menu-group.expanded > .submenu{display:block}

  /* Style the mobile-submenu menu_info items as cards too */
  .mobile-submenu .menu-info-list{ display:flex; flex-direction:column; align-items:stretch; gap:6px; margin:0; padding:0; background:transparent; box-shadow:none }
  .mobile-submenu .menu-info-list > li{ list-style:none }
  .mobile-submenu .menu-info-list > li > a{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:16px 20px;
    background:transparent;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:14px;
    color:rgba(255,255,255,1); font-weight:600; font-size:1.05rem;
    text-decoration:none; text-transform:none; text-shadow:none;
    transition:background .15s ease, border-color .15s ease;
  }
  .mobile-submenu .menu-info-list > li > a:hover{
    background:rgba(255,255,255,0.06);
    border-color:rgba(255,255,255,0.25);
  }
  /* Submenu items (expanded dropdowns) */
  .mobile-submenu .menu-info-list .submenu{ padding:8px 0 8px 16px; margin:4px 0 0 12px; border-left:1px solid rgba(255,255,255,0.15); background:transparent; }
  .mobile-submenu .menu-info-list .submenu a{
    color:rgba(255,255,255,0.85) !important; font-size:1rem; padding:10px 14px;
    border-radius:8px; background:transparent; border:none; margin-top:2px; display:block;
  }
  .mobile-submenu .menu-info-list .submenu a:hover{
    background:rgba(255,255,255,0.08); color:#fff !important;
  }
  /* Remove the white triangle on mobile */
  .mobile-submenu .menu-info-list .submenu::before{ display:none }
}

/* Mobile 'Inicio' visible pill: show only on small screens to keep header minimal */
.mobile-home-btn{display:none}

@media (max-width:900px){
  .mobile-home-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,255,255,0.06);color:var(--nav-text-light);border-radius:999px;font-weight:800;text-decoration:none;border:1px solid rgba(255,255,255,0.06);margin-left:8px}
  .mobile-home-btn .mobile-home-label{display:inline-block}
  /* keep the home pill visually separate from the brand */
  .brand-wrap + .mobile-home-btn{margin-left:12px}
  /* if you prefer the hamburger to remain, leave it; otherwise hide it by uncommenting the next line */
  /* .nav-toggle{display:none !important} */
}

/* Mobile CTA styles */
@media (max-width:900px){
  /* hide the top 'Acceder' link inside the main list so mobile CTA is the primary action */
  .nav-links a.btn-accent { display: none !important }

  .mobile-cta {
    display:block; position:sticky; bottom:0; left:0; right:0;
    padding:32px 20px 40px; z-index:1400; text-align:center;
    margin-top:auto;
    background: transparent;
  }
  .btn-accent-mobile {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    width:100%; padding:14px 20px;
    background: transparent;
    color:#fff !important; border-radius:12px;
    border: 2px solid rgba(255,255,255,0.8);
    font-weight:700; text-decoration:none;
    font-size:1.05rem; letter-spacing:0.5px;
    transition:all .2s ease;
  }
  .btn-accent-mobile i{ font-size:1.2rem; }
  .btn-accent-mobile:hover, .btn-accent-mobile:focus {
    background: #fff; color: var(--nav-accent) !important;
  }
  .primary-menu .mobile-cta .btn-accent-mobile { text-shadow:none }
}

/* Small accessibility tweaks */
.btn-logout{background:none;border:0;color:var(--nav-text-light);padding:8px}
.nav-logout-form{display:inline}