/* ======================================================================
   Base del sitio (mantengo lo que ya tenías)
====================================================================== */
.navbar-dark .navbar-brand { font-weight: 600; }
.card { color: #111; }

/* ======================================================================
   CANA NAV – Estilos del menú con variables inyectadas por MenuStyle
   Las variables --cana-nav-* se ponen inline en <nav class="cana-nav" style="...">
   Hay fallbacks seguros y compatibilidad con tu sistema anterior (--nav-*)
====================================================================== */

/* Defaults si aún no hay estilo inline */
:root{
  --cana-nav-bg:          var(--nav-bg, rgba(255,255,255,.70));
  --cana-nav-text:        var(--nav-link-color, var(--bs-body-color, #212529));
  --cana-nav-hover-bg:    var(--nav-hover-bg, rgba(0,0,0,.06));
  --cana-nav-hover-text:  var(--nav-link-color, var(--bs-body-color, #212529));
  --cana-nav-active-bg:   var(--nav-active-bg, var(--bs-primary, #0d6efd));
  --cana-nav-active-text: var(--nav-active-color, #fff);
  --cana-nav-badge-bg:    var(--bs-primary-bg-subtle, rgba(13,110,253,.12));
  --cana-nav-badge-text:  var(--bs-primary, #0d6efd);
  --cana-nav-border:      var(--nav-border, var(--bs-border-color-translucent, rgba(0,0,0,.075)));
  --cana-nav-dd-bg:       var(--nav-bg, #fff);
  --cana-nav-dd-text:     var(--nav-link-color, #212529);
  --cana-nav-radius:      var(--nav-radius, .75rem);
  --cana-nav-height:      2.75rem;
  --cana-nav-uppercase:   none;     /* 'uppercase' o 'none' */
  --cana-nav-shadow:      0 0 0 rgba(0,0,0,0);
  --cana-nav-icon-size:   1rem;
}

/* Soporte modo oscuro si no hay vars específicas */
[data-bs-theme="dark"]{
  --cana-nav-bg:          var(--nav-bg, rgba(17,17,17,.70));
  --cana-nav-text:        var(--nav-link-color, var(--bs-body-color, #e6e6e6));
  --cana-nav-hover-bg:    var(--nav-hover-bg, rgba(255,255,255,.06));
  --cana-nav-hover-text:  var(--nav-link-color, var(--bs-body-color, #e6e6e6));
  --cana-nav-active-bg:   var(--nav-active-bg, var(--bs-primary, #0d6efd));
  --cana-nav-active-text: var(--nav-active-color, #fff);
  --cana-nav-border:      var(--nav-border, rgba(255,255,255,.08));
}

/* Contenedor del navbar (scope de las variables) */
.navbar.cana-nav,
.cana-nav{
  background: var(--cana-nav-bg);
  border-bottom: 1px solid var(--cana-nav-border);
  box-shadow: var(--cana-nav-shadow);
  backdrop-filter: saturate(1.05);
  -webkit-backdrop-filter: saturate(1.05);
}

/* Marca / brand */
.navbar.cana-nav .navbar-brand,
.cana-nav .navbar-brand{
  font-weight: 600;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Links principales */
.navbar.cana-nav .navbar-nav .nav-link,
.cana-nav .navbar-nav .nav-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--cana-nav-text);
  height: var(--cana-nav-height);
  padding: 0 .9rem;                 /* altura controla la vertical; padding solo horizontal */
  border-radius: var(--cana-nav-radius);
  text-transform: var(--cana-nav-uppercase);
  font-weight: 500;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

/* Hover / focus */
.navbar.cana-nav .navbar-nav .nav-link:hover,
.navbar.cana-nav .navbar-nav .nav-link:focus,
.cana-nav .navbar-nav .nav-link:hover,
.cana-nav .navbar-nav .nav-link:focus{
  background: var(--cana-nav-hover-bg);
  color: var(--cana-nav-hover-text);
  text-decoration: none;
}
.cana-nav .navbar-nav .nav-link:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--cana-nav-active-bg) 35%, transparent);
  outline-offset: 2px;
  border-radius: calc(var(--cana-nav-radius) + 2px);
}

/* Activo */
.navbar.cana-nav .navbar-nav .nav-link.active,
.cana-nav .navbar-nav .nav-link.active,
.navbar.cana-nav .navbar-nav .nav-item.active > .nav-link,
.cana-nav .navbar-nav .nav-item.active > .nav-link{
  background: var(--cana-nav-active-bg);
  color: var(--cana-nav-active-text);
}

/* Iconos */
.navbar.cana-nav .navbar-nav .nav-link i,
.cana-nav .navbar-nav .nav-link i{
  font-size: var(--cana-nav-icon-size);
  opacity: .9;
}

/* Badge */
.navbar.cana-nav .nav-link .nav-badge,
.cana-nav .nav-link .nav-badge,
.navbar.cana-nav .nav-link .badge,
.cana-nav .nav-link .badge{
  font-size: .65rem;
  font-weight: 600;
  padding: .18rem .45rem;
  border-radius: 999px;
  background: var(--cana-nav-badge-bg);
  color: var(--cana-nav-badge-text);
  border: 1px solid color-mix(in srgb, var(--cana-nav-badge-bg) 50%, #0000 50%);
}

/* CTA */
.navbar.cana-nav .navbar-nav .nav-link.nav-cta,
.cana-nav .navbar-nav .nav-link.nav-cta{
  /* Fallback + degradado suave */
  background: var(--bs-primary, #0d6efd);
  background: linear-gradient(180deg,
              var(--bs-primary, #0d6efd),
              color-mix(in srgb, var(--bs-primary, #0d6efd) 85%, #000));
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--bs-primary-rgb, 13,110,253), .28);
}
.navbar.cana-nav .navbar-nav .nav-link.nav-cta:hover,
.cana-nav .navbar-nav .nav-link.nav-cta:hover{
  transform: translateY(-1px);
}

/* Dropdowns */
.navbar.cana-nav .dropdown-menu,
.cana-nav .dropdown-menu{
  --bs-dropdown-bg: var(--cana-nav-dd-bg);
  --bs-dropdown-color: var(--cana-nav-dd-text);
  --bs-dropdown-link-color: var(--cana-nav-dd-text);
  --bs-dropdown-link-hover-bg: var(--cana-nav-hover-bg);
  background: var(--cana-nav-dd-bg);
  color: var(--cana-nav-dd-text);
  border: 1px solid var(--cana-nav-border);
  border-radius: calc(var(--cana-nav-radius) + 2px);
  box-shadow: var(--cana-nav-shadow);
  padding: .4rem;
  animation: dd-fade .14s ease-out both;
  transform-origin: top;
}
@keyframes dd-fade{
  from{ opacity:0; transform: translateY(6px) scale(.98); }
  to  { opacity:1; transform: translateY(0) scale(1); }
}

.navbar.cana-nav .dropdown-item,
.cana-nav .dropdown-item{
  border-radius: .5rem;
  padding: .55rem .75rem;
  color: var(--cana-nav-dd-text);
  transition: background-color .15s ease, color .15s ease;
}
.navbar.cana-nav .dropdown-item:hover,
.cana-nav .dropdown-item:hover{
  background: var(--cana-nav-hover-bg);
}
.navbar.cana-nav .dropdown-item.active,
.cana-nav .dropdown-item.active{
  color: var(--cana-nav-active-text);
  background: var(--cana-nav-active-bg);
}

/* Cabeceras dentro del dropdown */
.navbar.cana-nav .dropdown-header,
.cana-nav .dropdown-header{
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .7;
}

/* Toggler móvil */
.navbar.cana-nav .navbar-toggler,
.cana-nav .navbar-toggler{
  border-color: var(--cana-nav-border);
  padding: .35rem .45rem;
  border-radius: .6rem;
}
.navbar.cana-nav .navbar-toggler:focus,
.cana-nav .navbar-toggler:focus{
  box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--bs-primary, #0d6efd) 25%, transparent);
}

/* Colapso (móvil) */
@media (max-width: 991.98px){
  .navbar.cana-nav .navbar-collapse.show,
  .cana-nav .navbar-collapse.show{
    background: var(--cana-nav-bg);
    border-top: 1px solid var(--cana-nav-border);
    margin-top: .5rem;
    padding: .5rem;
    border-radius: var(--cana-nav-radius);
    backdrop-filter: saturate(1.05);
    -webkit-backdrop-filter: saturate(1.05);
  }
  .navbar.cana-nav .navbar-nav .nav-link,
  .cana-nav .navbar-nav .nav-link{
    padding: .6rem .75rem;
    height: auto; /* en móvil dejamos que crezca */
  }
}

/* Barra secundaria opcional */
.navbar-secondary{
  border-top: 1px solid var(--cana-nav-border);
  border-bottom: 1px solid var(--cana-nav-border);
  background: color-mix(in srgb, var(--cana-nav-bg) 90%, transparent);
}
.navbar-secondary .nav-link{
  color: color-mix(in srgb, var(--cana-nav-text) 70%, #0000 30%);
  padding: .35rem .6rem;
  border-radius: .5rem;
}
.navbar-secondary .nav-link:hover{ background: var(--cana-nav-hover-bg); }
.navbar-secondary .nav-link.active{
  color: var(--cana-nav-active-text);
  background: var(--cana-nav-active-bg);
}

/* =========================================================================
   COMPAT: Soporte para tu clase antigua .navbar-blur usando las mismas vars
========================================================================= */
.navbar-blur{
  background: var(--cana-nav-bg);
  border-bottom: 1px solid var(--cana-nav-border);
  box-shadow: var(--cana-nav-shadow);
  backdrop-filter: saturate(1.05);
  -webkit-backdrop-filter: saturate(1.05);
}
.navbar-blur .navbar-nav .nav-link{ color: var(--cana-nav-text); }
.navbar-blur .navbar-nav .nav-link:hover,
.navbar-blur .navbar-nav .nav-link:focus{
  background: var(--cana-nav-hover-bg);
  color: var(--cana-nav-hover-text);
}
.navbar-blur .navbar-nav .nav-link.active,
.navbar-blur .navbar-nav .nav-item.active > .nav-link{
  background: var(--cana-nav-active-bg);
  color: var(--cana-nav-active-text);
}
.navbar-blur .dropdown-menu{
  background: var(--cana-nav-dd-bg);
  color: var(--cana-nav-dd-text);
}
.navbar-blur .dropdown-item:hover{ background: var(--cana-nav-hover-bg); }
.navbar-blur .dropdown-item.active{
  background: var(--cana-nav-active-bg);
  color: var(--cana-nav-active-text);
}

/* =========================================================================
   SAFETY-OVERRIDES: por si otro CSS intenta pisar el menú.
   (No abusamos de !important; solo en props críticas de cascada)
========================================================================= */
.navbar.cana-nav,
.cana-nav{
  background: var(--cana-nav-bg) !important;
  border-color: var(--cana-nav-border) !important;
}
.navbar.cana-nav .navbar-nav .nav-link,
.cana-nav .navbar-nav .nav-link{
  color: var(--cana-nav-text) !important;
}

/* Mejora buscador y cabecera móvil */
@media (max-width: 991.98px) {
  #mobileSearchForm {
    display: block !important;
    width: 100% !important;
    min-width: 0;
  }
  #liveSearchInputSm {
    width: 100% !important;
    min-width: 0;
  }
}
@media (min-width: 992px) {
  #mobileSearchForm {
    display: none !important;
  }
  #liveSearchDropdownSm {
    display: none !important;
  }
}