/* =========================================================================
   CANA NAV – Estilos del menú basados en variables CSS (--cana-nav-*)
   Estas variables se inyectan inline en <nav class="cana-nav" style="…">
   Este archivo sólo lee esas variables y pinta.
   Inclúyelo DESPUÉS de Bootstrap y de tus estilos generales.
   ====================================================================== */

/* Valores de respaldo por si no se inyecta nada desde plantillas */
:root {
  --cana-nav-bg:          rgba(255,255,255,.70);
  --cana-nav-text:        #212529;
  --cana-nav-hover-bg:    rgba(0,0,0,.06);
  --cana-nav-hover-text:  #212529;
  --cana-nav-active-bg:   #0d6efd;   /* var(--bs-primary) si existe */
  --cana-nav-active-text: #fff;
  --cana-nav-badge-bg:    rgba(13,110,253,.12);
  --cana-nav-badge-text:  #0d6efd;
  --cana-nav-border:      rgba(0,0,0,.075);
  --cana-nav-dd-bg:       #ffffff;
  --cana-nav-dd-text:     #212529;
  --cana-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;
}

/* Modo oscuro de respaldo (si no hay estilo específico para dark) */
[data-bs-theme="dark"] {
  --cana-nav-bg:          rgba(17,17,17,.70);
  --cana-nav-text:        #e6e6e6;
  --cana-nav-hover-bg:    rgba(255,255,255,.06);
  --cana-nav-hover-text:  #e6e6e6;
  --cana-nav-border:      rgba(255,255,255,.08);
  --cana-nav-dd-bg:       #191a1c;
  --cana-nav-dd-text:     #e6e6e6;
}

/* ======================== CONTENEDOR NAVBAR ========================= */

.navbar.cana-nav,
.cana-nav {
  background: var(--cana-nav-bg);
  color: var(--cana-nav-text);
  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 {
  color: var(--cana-nav-text);
  font-weight: 600;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
}
.navbar.cana-nav .navbar-brand:hover,
.cana-nav .navbar-brand:hover {
  opacity: .9;
}

/* =========================== LINKS TOP ============================= */

.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 la controla --cana-nav-height */
  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;
}

.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;
}

.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 dentro de los links */
.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 en items */
.navbar.cana-nav .nav-link .badge,

/* Ítems con fondo transparente (por ítem, desde admin) */
.cana-nav .navbar-nav .nav-link.nav-item-transparent,
.cana-nav .dropdown-item.nav-item-transparent {
  background: transparent !important;
}
.cana-nav .navbar-nav .nav-link.nav-item-transparent:hover,
.cana-nav .navbar-nav .nav-link.nav-item-transparent:focus,
.cana-nav .navbar-nav .nav-item.active > .nav-link.nav-item-transparent,
.cana-nav .dropdown-item.nav-item-transparent:hover,
.cana-nav .dropdown-item.nav-item-transparent:focus,
.cana-nav .dropdown-item.nav-item-transparent.active {
  background: transparent !important;
  color: inherit; /* usa el color actual del entorno/cabecera */
}
.cana-nav .nav-link .badge,
.navbar.cana-nav .nav-link .nav-badge,
.cana-nav .nav-link .nav-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 rgba(0,0,0,.04);
}

/* CTA (si decides usar una clase especial) */
.navbar.cana-nav .navbar-nav .nav-link.nav-cta,
.cana-nav .navbar-nav .nav-link.nav-cta {
  color: #fff;
  background: linear-gradient(
    180deg,
    var(--bs-primary, #0d6efd),
    rgba(0,0,0,.08)
  );
  box-shadow: 0 6px 16px rgba(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: cana-dd-fade .14s ease-out both;
  transform-origin: top;
}

@keyframes cana-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);
}

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

/* ============================ TOGGLER ============================== */

.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 rgba(13,110,253,.25);
}

/* ========================= LAYOUT 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 crecer */
  }
}

/* ======================= BARRA SECUNDARIA ========================= */

.navbar-secondary {
  border-top: 1px solid var(--cana-nav-border);
  border-bottom: 1px solid var(--cana-nav-border);
  background: var(--cana-nav-bg);
}
.navbar-secondary .nav-link {
  color: var(--cana-nav-text);
  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);
}

/* =============== COMPATIBILIDAD: .navbar-blur antigua ============== */

.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);
}