/* navbar-test.css — Navbar branded (manual de marca v1.3). Scope: #navWrapper-test / #mainNav-test
   2026-07-17: logo wordmark img (centrado en desktop como producción, invert en dark),
   sidenav rediseñado (CTA block + secciones con iconos, links Plus Jakarta, hover chip azul claro).
   F2 (chrome global): este navbar ahora corre TAMBIÉN en páginas con Materialize —
   geometría y resets explícitos acá para no depender del CSS crítico de cada head
   y para pisar los globals de Materialize (nav{background;line-height;box-shadow}). */

#mainNav-test {
  position: fixed; top: 0; left: 0; width: 100%; height: 56px; z-index: 100;
  background: var(--bg-page, #fff);
  border-bottom: 1px solid var(--brand-primario, #005685);
  box-sizing: border-box;
  line-height: normal;      /* Materialize pone line-height:56px en nav{} */
  box-shadow: none;         /* Materialize pone sombra en nav{} */
  color: var(--text-body, #1D1D1B);
}
@media (min-width: 601px) { #mainNav-test { height: 64px; } }

#mainNav-test .nav-inner {
  max-width: 1350px; margin: 0 auto; height: 100%; position: relative;
  display: flex; align-items: center; gap: 8px; padding: 0 12px; box-sizing: border-box;
}

/* Logo wordmark — mismo asset que producción (/img/rava/logo-rava.png) */
#mainNav-test #brand-logo {
  display: inline-flex; align-items: center; line-height: 0;
  margin-left: 4px; margin-right: auto;
}
#mainNav-test #brand-logo img { width: auto; height: 26px; display: block; }
@media (min-width: 601px) { #mainNav-test #brand-logo img { height: 30px; } }
/* Desktop ancho: centrado absoluto (mismo gesto que el navbar de producción) */
@media (min-width: 992px) {
  #mainNav-test #brand-logo {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
  }
}
/* Dark: wordmark azul → blanco (un solo asset, sin duplicar archivo) */
html.dark #mainNav-test #brand-logo img,
html.dark #navWrapper-test .sidenav-logo img { filter: brightness(0) invert(1); }

/* Icon buttons — scope navWrapper: también aplica al ✕ del sidenav y del search modal
   (con #mainNav-test quedaban con el chrome default del browser, fix 17/07) */
#navWrapper-test .nav-icon-btn {
  background: none; border: none; cursor: pointer; padding: 8px; border-radius: 8px;
  color: var(--brand-primario); display: inline-flex; align-items: center; justify-content: center; line-height: 0;
}
#navWrapper-test .nav-icon-btn:hover { background: var(--brand-acento-claro); }
#navWrapper-test .nav-icon-btn:focus-visible { outline: 2px solid var(--brand-primario); outline-offset: 2px; }
#mainNav-test .nav-burger { margin-right: 2px; }

#mainNav-test .nav-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }

/* CTA "Abrí tu cuenta" — pill azul (bronce queda reservado para el hero) */
#mainNav-test .nav-cta {
  background: var(--brand-primario); color: var(--brand-primario-text);
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 14px;
  padding: 9px 20px; border-radius: 50px; letter-spacing: 0.3px; text-decoration: none;
  margin-left: 6px; white-space: nowrap;
}
#mainNav-test .nav-cta:hover { filter: brightness(1.06); }
#mainNav-test .nav-cta:focus-visible { outline: 3px solid var(--brand-acento); outline-offset: 2px; }

/* Clientes */
#mainNav-test .nav-login {
  display: inline-flex; align-items: center; gap: 6px; color: var(--brand-primario);
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14px;
  text-decoration: none; padding: 8px 10px; border-radius: 8px; white-space: nowrap;
}
#mainNav-test .nav-login:hover { background: var(--brand-acento-claro); }
#mainNav-test .nav-login:focus-visible { outline: 2px solid var(--brand-primario); outline-offset: 2px; }

@media (max-width: 600px) { #mainNav-test .hide-mobile { display: none !important; } }

/* ── Sidenav ── */
#navWrapper-test .sidenav-overlay {
  position: fixed; inset: 0; background: rgba(11,47,85,0.5); z-index: 997;
  display: block;   /* Materialize define .sidenav-overlay{display:none} — sin esto,
                       en páginas con Materialize el overlay no aparecía (x-show
                       maneja el ocultado con display:none inline) */
  height: auto;     /* Materialize le pone height:120vh */
}
#navWrapper-test .sidenav-panel {
  position: fixed; top: 0; left: 0; bottom: 0; width: 316px; max-width: 88vw; z-index: 998;
  background: var(--bg-page); overflow-y: auto; box-shadow: 2px 0 24px rgba(0,0,0,0.18);
  padding-bottom: 26px;
}
#navWrapper-test .sidenav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border-color);
  position: sticky; top: 0; background: var(--bg-page); z-index: 1;
}
#navWrapper-test .sidenav-logo { display: inline-flex; line-height: 0; }
#navWrapper-test .sidenav-logo img { width: auto; height: 24px; display: block; }

/* CTA block — flujo principal arriba del menú (manual §4.1: bronce = destacado único) */
#navWrapper-test .sidenav-cta {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 16px 18px; border-bottom: 1px solid var(--border-color);
}
#navWrapper-test .sidenav-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 15px;
  padding: 13px 20px; border-radius: 50px; letter-spacing: 0.3px; text-decoration: none;
  text-align: center;
}
#navWrapper-test .sidenav-btn--primary {
  background: var(--brand-acento); color: var(--brand-acento-text);
  box-shadow: 0 4px 14px var(--brand-acento-glow);
}
#navWrapper-test .sidenav-btn--primary:hover { filter: brightness(1.05); }
#navWrapper-test .sidenav-btn--outline {
  background: transparent; color: var(--brand-primario);
  border: 2px solid var(--brand-primario); padding: 11px 20px;
}
#navWrapper-test .sidenav-btn--outline:hover { background: var(--brand-acento-claro); }
#navWrapper-test .sidenav-btn:focus-visible { outline: 3px solid var(--brand-primario); outline-offset: 2px; }
/* WhatsApp — foco de contacto (reemplaza al newsletter, pedido Juan 17/07) */
#navWrapper-test .sidenav-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--brand-primario); text-decoration: none; margin-top: 2px;
  padding: 10px 16px; border-radius: 50px; border: 1.5px solid var(--border-color);
}
#navWrapper-test .sidenav-wa svg { width: 19px; height: 19px; fill: #25D366; flex-shrink: 0; }
#navWrapper-test .sidenav-wa:hover { border-color: #25D366; background: rgba(37, 211, 102, 0.07); }
#navWrapper-test .sidenav-wa:focus-visible { outline: 2px solid var(--brand-primario); outline-offset: 2px; }

/* Secciones */
#navWrapper-test .sidenav-section { padding: 14px 12px 10px; border-bottom: 1px solid var(--border-color); }
#navWrapper-test .sidenav-title {
  display: flex; align-items: center; gap: 7px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.9px; color: var(--brand-acento);
  margin: 0 0 5px; padding: 0 10px;
}
#navWrapper-test .sidenav-title .icon { width: 15px; height: 15px; }
#navWrapper-test .sidenav-section ul { list-style: none; margin: 0; padding: 0; }
#navWrapper-test .sidenav-section li a {
  display: block; padding: 8px 10px; border-radius: 8px;
  color: var(--text-body); text-decoration: none;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 14.5px;
}
#navWrapper-test .sidenav-section li a:hover { background: var(--brand-acento-claro); color: var(--brand-primario); }
#navWrapper-test .sidenav-section li a:focus-visible { outline: 2px solid var(--brand-primario); outline-offset: -2px; }

#navWrapper-test .sidenav-datos {
  padding: 16px; font-family: 'Lora', serif; font-size: 12px; color: var(--text-secondary); line-height: 1.6;
}
#navWrapper-test .sidenav-datos p { margin: 0 0 2px; }

/* ── Search modal ── */
#navWrapper-test #search-modal {
  position: fixed; inset: 0; z-index: 1000; background: rgba(11,47,85,0.45);
  display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 0;
}
#navWrapper-test .search-box {
  width: 100%; max-width: 640px; background: var(--bg-page); border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3); padding: 12px 16px 20px; max-height: 70vh; overflow-y: auto;
}
#navWrapper-test .search-input-row {
  display: flex; align-items: center; gap: 8px; border-bottom: 2px solid var(--brand-primario); padding: 8px 4px;
}
#navWrapper-test .search-input-icon { color: var(--brand-primario); display: inline-flex; }
#navWrapper-test #buscar-input-test {
  flex: 1; border: none; outline: none; background: transparent; color: var(--text-body);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; padding: 6px 4px;
}
#navWrapper-test .search-hint {
  font-family: 'Lora', serif; color: var(--text-secondary); padding: 16px 4px 0; margin: 0;
}
#navWrapper-test #search-results-test { padding-top: 8px; }
/* Resultados del buscador (markup del server con clases Materialize que acá no aplican) */
#navWrapper-test .search-box .search-results a {
  color: var(--link-color); text-decoration: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
#navWrapper-test .search-box .search-results a:hover { text-decoration: underline; }
#navWrapper-test .search-box .search-results li { border-bottom-color: var(--border-color) !important; }
#navWrapper-test .search-box .search-results .grey-text { color: var(--text-secondary) !important; }