/* Nahuel Seguridad — navegacion global de la barra superior.
 *
 * La cargan las CUATRO paginas publicas: index.html y las tres interiores
 * (/guardias-de-seguridad, /camaras-de-seguridad, /seguridad-para-condominios).
 * gracias.html NO la carga: es una confirmacion noindex, sin menu.
 *
 * POR QUE UN ARCHIVO Y NO INLINE: el mismo menu vive en cuatro documentos. Con
 * el CSS repetido habria que mantener cuatro copias sincronizadas a mano.
 *
 * DONDE VA EL <link>: SIEMPRE DESPUES de la hoja propia de cada pagina (el
 * <style> inline de index.html, assets/interior.v1.css en las interiores).
 * Varias reglas de aca reajustan la barra existente (`.status`, `nav .cta`) con
 * la misma especificidad o mayor, y a igualdad gana la ultima en el documento.
 *
 * POR QUE EL NOMBRE LLEVA `.v1`: `location /assets/` en nginx.conf sirve este
 * directorio con `expires 30d`, y no hay build que ponga hashes. Un cambio de
 * estilos no se veria hasta que expire la cache del visitante: hay que subir la
 * version del nombre (nav.v2.css) y actualizar el <link> de las cuatro paginas.
 *
 * TODO VA SCOPEADO A #nav O A CLASES .nv-*: el selector global
 * `nav{position:fixed;display:flex}` de ambas hojas ya alcanza sin querer a los
 * <nav> semanticos del footer, y ese accidente no se repite aca.
 *
 * BREAKPOINT: 1024px. Hasta ahi manda el boton hamburguesa; desde 1025px, la
 * fila horizontal con el desplegable. Se eligio holgado (y no los 700px del CTA
 * original) porque la fila completa —logo + cinco items + CTA— recien entra sin
 * apretarse alrededor de los 1000px.
 */

/* ---------------------------------------------------------------- barra */
/* La barra pasa de tres hijos sueltos (logo, status, CTA) a dos: el logo y el
   contenedor .nv, que en escritorio es la fila y en movil el panel. */
#nav{gap:clamp(10px,1.6vw,24px)}
#nav > .lgk{flex:0 0 auto}

/* Con el panel movil abierto la barra necesita fondo propio: arriba del todo
   (sin scroll) `nav.sc` todavia no esta puesta y el panel opaco quedaria
   colgando de una barra transparente. */
#nav.op{background:rgba(7,13,34,.94);backdrop-filter:blur(14px)}

/* ------------------------------------------------------------ enlaces */
.nv-l{list-style:none;margin:0;padding:0}
.nv-a{display:flex;align-items:center;gap:7px;width:100%;text-align:left;
  font-family:var(--fd);font-size:.88rem;font-weight:500;letter-spacing:.2px;line-height:1.4;
  color:var(--tx2);background:none;border:0;cursor:pointer;
  padding:9px 12px;border-radius:10px;transition:color .25s ease,background .25s ease}
.nv-a:hover{color:var(--white);background:rgba(22,255,187,.08)}
#nav a:focus-visible,#nav button:focus-visible{outline:2px solid var(--mint);outline-offset:3px}

/* Chevron del desplegable. Gira cuando el grupo esta abierto. */
.nv-ch{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.8;transition:transform .25s ease}

/* ---------------------------------------------------------- desplegable */
.nv-has{position:relative}
.nv-sub{list-style:none;margin:0;padding:0}
.nv-sub a{display:block;padding:10px 14px;border-radius:10px;font-size:.88rem;
  color:var(--tx2);transition:color .25s ease,background .25s ease}
.nv-sub a:hover{color:var(--white);background:rgba(22,255,187,.1)}
/* Pagina actual dentro del desplegable: misma convencion que el footer
   (`.f-list [aria-current]`), no se enlaza a si misma. */
.nv-sub .nv-cur{display:block;padding:10px 14px;font-size:.88rem;color:var(--mint);cursor:default}

/* ============================================== escritorio (>= 1025px) */
@media(min-width:1025px){
  .nv-tg{display:none}
  .nv{display:flex;flex:1;align-items:center;gap:clamp(10px,1.4vw,22px);
    margin-inline-start:clamp(8px,1.8vw,30px)}
  .nv-l{display:flex;align-items:center;gap:clamp(0px,.6vw,8px);margin-inline-end:auto}

  .nv-sub{position:absolute;top:calc(100% + 12px);inset-inline-start:0;min-width:262px;
    padding:8px;background:rgba(9,18,49,.97);backdrop-filter:blur(14px);
    border:1px solid rgba(22,255,187,.18);border-radius:16px;
    box-shadow:0 24px 60px rgba(0,0,0,.45);z-index:2;
    opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
    transition:opacity .22s ease,transform .22s ease,visibility .22s}

  /* Puente invisible sobre el hueco de 12px: sin el, el puntero "sale" del
     grupo al bajar del boton al panel y el menu se cierra a mitad de camino. */
  .nv-has::after{content:'';position:absolute;inset-inline:0;top:100%;height:14px}

  /* Fallback sin JS: hover y foco abren el panel por CSS. El JS agrega .js a
     #nav y a partir de ahi manda .op, para que aria-expanded y lo que se ve
     nunca digan cosas distintas (con las dos vias activas, un clic que cierra
     chocaria con el :focus-within que sigue abriendo). */
  #nav:not(.js) .nv-has:hover > .nv-sub,
  #nav:not(.js) .nv-has:focus-within > .nv-sub{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  #nav:not(.js) .nv-has:hover > .nv-a > .nv-ch,
  #nav:not(.js) .nv-has:focus-within > .nv-a > .nv-ch{transform:rotate(180deg)}
}

/* Estado abierto que pone el JS (clic, hover y foco). Fuera del media query:
   en movil el mismo .op abre el acordeon. */
.nv-has.op > .nv-sub{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.nv-has.op > .nv-a > .nv-ch{transform:rotate(180deg)}

/* La pildora "CENTRAL OPERATIVA · 24/7" solo entra comoda cuando sobra ancho:
   por debajo se oculta para dejarle el sitio al menu. Gana a las reglas de
   `.status` de index.html (700px) y interior.v1.css (820px) por especificidad. */
@media(max-width:1199px){#nav .status{display:none}}

/* ================================================== movil (<= 1024px) */
@media(max-width:1024px){
  /* Boton hamburguesa: 46px de lado para que sea un objetivo tactil comodo. */
  .nv-tg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    flex:0 0 auto;width:46px;height:46px;padding:0;cursor:pointer;color:var(--mint);
    background:rgba(22,255,187,.06);border:1px solid rgba(22,255,187,.28);border-radius:14px;
    -webkit-tap-highlight-color:transparent}
  .nv-tg i{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;
    transition:transform .25s ease,opacity .2s ease}
  #nav.op .nv-tg i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  #nav.op .nv-tg i:nth-child(2){opacity:0}
  #nav.op .nv-tg i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Panel desplegable bajo la barra. Cuelga de #nav, que es position:fixed, asi
     que `top:100%` lo deja justo debajo sin medir alturas en JS.
     max-height + overflow-y: en pantallas bajas el panel scrollea solo, nunca
     empuja la pagina ni se sale del viewport. */
  .nv{position:absolute;top:100%;inset-inline:0;display:block;
    padding:12px clamp(20px,4vw,50px) 20px;
    background:rgba(7,13,34,.97);backdrop-filter:blur(16px);
    border-top:1px solid rgba(22,255,187,.14);
    border-bottom:1px solid rgba(22,255,187,.14);
    box-shadow:0 26px 60px rgba(0,0,0,.5);
    max-height:70vh;max-height:70svh;overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
    transition:opacity .24s ease,transform .24s ease,visibility .24s}
  #nav.op .nv{opacity:1;visibility:visible;transform:none;pointer-events:auto}

  .nv-l{display:block}
  .nv-l > li + li{border-top:1px solid rgba(199,208,228,.09)}
  .nv-a{padding:14px 4px;font-size:.98rem;border-radius:8px}
  .nv-a .nv-ch{margin-inline-start:auto}

  /* El submenu deja de flotar: es un acordeon dentro del panel. Aca se usa
     display none/block —y no visibility— para que el alto del panel se ajuste
     de verdad al abrir y cerrar. */
  .nv-sub{display:none;position:static;opacity:1;visibility:visible;transform:none;
    pointer-events:auto;background:none;border:0;box-shadow:none;
    margin:0 0 8px 6px;padding:0 0 4px 12px;border-inline-start:1px solid rgba(22,255,187,.22)}
  .nv-has.op > .nv-sub{display:block}
  .nv-sub a,.nv-sub .nv-cur{padding:11px 8px;font-size:.92rem}

  /* El CTA se veia solo en escritorio (`nav .cta{display:none}` bajo 700px).
     Dentro del panel vuelve, con el mismo texto y el mismo destino. */
  .nv > .cta{display:flex;justify-content:center;margin-top:16px}
  /* La pildora, si alguna vez se muestra en este rango, no debe quedar pegada. */
  .nv > .status{margin-top:14px}
}

/* Regla del proyecto: toda animacion se apaga con prefers-reduced-motion. Las
   hojas de cada pagina ya matan transition/animation con !important; aca se
   quitan ademas los desplazamientos de apertura, para que el panel y el
   desplegable aparezcan en su sitio en vez de saltar. */
@media(prefers-reduced-motion:reduce){
  #nav .nv,#nav .nv-sub{transform:none!important}
  #nav .nv-ch,#nav .nv-tg i{transition:none!important}
}