/* ──────────────────────────────────────────────────────────────────────────
   Encabezado del Carriers Map Day · portada y ediciones
   Revision de diseno del 13/10, reglas comunes a los cuatro sitios, con el
   mismo comportamiento y las mismas medidas que el Data Center (PR #148,
   data-center-event/cabecera.css), en los colores de Carriers:
   - fijo arriba, con fondo opaco, desenfoque y una linea fina abajo;
   - mas de 860 px: el menu a la vista y «Registrate» como ultimo item del
     menu, marcado con el color; sin hamburguesa ni boton suelto;
   - hasta 860 px: logo · ES ▾ · tema · hamburguesa; el menu cae debajo a
     todo el ancho y «Registrate» es un boton lleno al final;
   - idioma: ES ▾ con desplegable (ES · EN · PT); tema: un icono de 34 px.
   Se carga DESPUES del <style> de cada pagina, asi que estas reglas mandan.
   ────────────────────────────────────────────────────────────────────────── */
.nav,.nav.onhero{position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(4,9,13,.9);-webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px);
  border-bottom:1px solid rgba(var(--inkq),.1)}
html[data-theme="light"] .nav,html[data-theme="light"] .nav.onhero{background:rgba(255,255,255,.92);border-bottom-color:rgba(7,19,22,.08)}
.nav .in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:nowrap;height:auto;padding-top:14px;padding-bottom:14px}
.nav .in .wm{flex:none}
.sec[id],.fin[id],main [id]{scroll-margin-top:calc(var(--cab,64px) + 12px)}

/* ---- menu ---- */
.nav nav{display:flex;align-items:center;gap:26px;margin-left:auto;font-family:"Geist Mono",monospace;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut)}
.nav nav a{color:inherit;text-decoration:none;position:relative;padding:6px 0 4px;white-space:nowrap}
.nav nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--acc);transition:right .22s ease}
.nav nav a:hover{color:var(--fg)}
.nav nav a:hover::after{right:0}
/* la accion principal es una opcion mas del menu, marcada con el color */
.nav nav a.menucta{color:var(--acc);font-weight:500}
html[data-theme="light"] .nav nav a.menucta{color:var(--accink,var(--acc))}
.nav nav a.menucta::after{right:0;background:currentColor;opacity:.5}
.nav nav a.menucta:hover::after{opacity:1}

.navr{display:flex;align-items:center;gap:8px;flex:none}

/* ---- idioma: dos letras con desplegable ---- */
.lngdd{position:relative}
.lngbtn{appearance:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 10px 0 11px;cursor:pointer;
  background:transparent;color:var(--fg);border:1px solid rgba(var(--inkq),.22);border-radius:3px;
  font-family:"Geist Mono",monospace;font-size:12px;font-weight:500;letter-spacing:.1em}
.lngbtn svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .18s ease}
.lngbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.lngbtn:hover,.lngbtn[aria-expanded="true"]{border-color:var(--acc)}
.lngdd .lng{position:absolute;right:0;top:calc(100% + 6px);z-index:70;display:flex;flex-direction:column;min-width:150px;
  margin:0;padding:0;border:1px solid rgba(var(--inkq),.18);border-radius:4px;overflow:hidden;background:var(--bg2);
  box-shadow:0 16px 34px -18px rgba(0,0,0,.8)}
html[data-theme="light"] .lngdd .lng{background:#FFFFFF;box-shadow:0 16px 34px -18px rgba(7,19,22,.35)}
.lngdd .lng[hidden]{display:none}
.lngdd .lng button{appearance:none;display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:0;border-top:1px solid rgba(var(--inkq),.1);border-radius:0;color:var(--fg);padding:11px 14px;
  font-family:"Geist Mono",monospace;font-size:12px;font-weight:500;letter-spacing:.1em}
.lngdd .lng button:first-child{border-top:0}
.lngdd .lng button span{font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:14px;letter-spacing:0;font-weight:400;color:var(--mut)}
.lngdd .lng button:hover{background:rgba(var(--inkq),.06)}
.lngdd .lng button[aria-pressed="true"]{background:var(--accfill);color:#04120F}
.lngdd .lng button[aria-pressed="true"] span{color:#04120F}

/* ---- tema: un icono (sol en oscuro, luna en claro) ---- */
.thm,body.archivo .thm{appearance:none;display:inline-grid;place-items:center;width:34px;height:34px;padding:0;gap:0;cursor:pointer;
  background:transparent;color:var(--fg);border:1px solid rgba(var(--inkq),.22);border-radius:3px}
.thm:hover{border-color:var(--acc);color:var(--acc)}
.thm i,.thm>span{display:none}
.thm svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.thm .luna,html[data-theme="light"] .thm .sol{display:none}
html[data-theme="light"] .thm .luna{display:block}

/* ---- hamburguesa: solo movil ---- */
.burger{display:none;appearance:none;place-items:center;width:38px;height:34px;padding:0;cursor:pointer;
  background:transparent;color:var(--fg);border:1px solid rgba(var(--inkq),.22);border-radius:3px}
.burger svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.burger .x,.burger[aria-expanded="true"] .h{display:none}
.burger[aria-expanded="true"] .x{display:block}

/* las ediciones suman el selector de edicion: a la misma altura que el resto */
.nav .edsel summary{height:34px;box-sizing:border-box;padding:0 14px}

.nav :focus{outline:none}
.nav :focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:3px}
html[data-theme="light"] .nav :focus-visible{outline-color:var(--accink,var(--acc))}

/* Pantallas medianas: el menu sigue a la vista (la hamburguesa es solo de
   movil), pero no entra en la misma linea que el logo y los controles. Pasa a
   una segunda fila, alineado a la izquierda. Las ediciones tienen mas
   secciones y el selector de edicion, asi que lo necesitan hasta mas ancho. */
@media (min-width:861px) and (max-width:1000px){
  .nav .in{flex-wrap:wrap;row-gap:4px}
  .nav .in .wm{order:1}
  .navr{order:2;margin-left:auto}
  .nav nav{order:3;width:100%;margin-left:0;gap:22px}
}
@media (min-width:1001px) and (max-width:1240px){
  body.archivo .nav .in{flex-wrap:wrap;row-gap:4px}
  body.archivo .nav .in .wm{order:1}
  body.archivo .navr{order:2;margin-left:auto}
  body.archivo .nav nav{order:3;width:100%;margin-left:0;gap:22px}
}
@media (min-width:861px) and (max-width:1000px){ body.archivo .nav nav{gap:18px} }

@media (max-width:860px){
  .nav .in{padding-top:11px;padding-bottom:11px;gap:10px}
  .nav .wm img.gc{height:23px}
  .burger{display:inline-grid}
  .navr{gap:6px}
  /* el menu cae debajo de la cabecera, a todo el ancho */
  .nav nav{display:none;position:absolute;left:0;right:0;top:100%;margin:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid rgba(var(--inkq),.14);padding:6px 20px 18px;
    box-shadow:0 22px 30px -24px rgba(0,0,0,.9);font-size:13px}
  html[data-theme="light"] .nav nav{background:#FFFFFF;box-shadow:0 22px 30px -24px rgba(7,19,22,.35)}
  .nav.abierto nav{display:flex}
  .nav nav a{padding:15px 0;border-bottom:1px solid rgba(var(--inkq),.1)}
  .nav nav a::after{display:none}
  .nav nav a.menucta{margin-top:14px;border:0;border-radius:3px;text-align:center;padding:15px 0;
    background:var(--accfill);color:#04120F}
  html[data-theme="light"] .nav nav a.menucta{color:#04120F}
  .nav .edsel summary{padding:0 10px;gap:6px}
  .navr .edsel summary .k{display:none}
}
@media (max-width:420px){
  .nav .wm img.gc{height:20px}
  .nav .in{gap:8px}
}
@media (prefers-reduced-motion:reduce){ .lngbtn svg,.nav nav a::after{transition:none} }
