/* ── Nav del formulario como ISLA ─────────────────────────────────────────────
   Convierte el nav del formulario (nav.nav de form.css) en una cápsula flotante,
   a juego con el navbar isla del resto del front. Se carga DESPUÉS de form.css en
   las páginas de reclamación. El nav es fijo y SIEMPRE visible (flujo de una sola
   pantalla, sin ocultar). Owner 13-jul-2026. */

/* Hueco para el nav flotante (form.css pone padding-top:56). */
body{ padding-top:100px; }
@media(max-width:768px){ body{ padding-top:150px; } }

.nav{
  position:fixed; top:16px; left:0; right:0; z-index:200;
  background:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:none;
  padding:0 16px;
}
.nav-capsule{
  max-width:1112px; margin:0 auto;                 /* mismo ancho que el navbar del front */
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-radius:20px;
  box-shadow:0 2px 16px rgba(0,0,0,.06);           /* sombra de las cards del formulario */
  overflow:hidden;
}
.nav-inner{ height:58px; max-width:none; margin:0; padding:0 50px; }
.nav-prog{ max-width:none; margin:0; padding:6px 20px 12px; }
@media(max-width:1100px){ .nav-inner{ padding:0 30px; } }
@media(max-width:768px){ .nav-inner{ padding:0 20px; } }

/* La isla del formulario es SIEMPRE fija — NUNCA se va con el scroll (la barra de
   progreso se rellena mientras avanzas). form.css:549 pone .nav{position:relative}
   en ≤768px (diseño viejo pre-isla) → lo neutralizamos explícitamente para que no
   dependa del orden de carga entre hojas. */
@media(max-width:768px){ .nav{ position:fixed !important; top:16px !important; } }

/* Collapsing header (≤768): el nav sigue fijo, pero al hacer scroll la FILA DEL
   LOGO (.nav-inner) se colapsa y queda ÚNICAMENTE la barra de progreso pegada
   arriba con la sección actual. La clase .nav-collapsed la alterna form-nav.js.
   En escritorio no aplica (la fila del logo se queda siempre). Owner 14-jul. */
@media(max-width:768px){
  .nav-inner{ overflow:hidden; transition:height .28s cubic-bezier(.4,0,.2,1), opacity .18s ease; }
  .nav.nav-collapsed .nav-inner{ height:0; opacity:0; pointer-events:none; }

  /* Al colapsar, la card se extiende de EXTREMO A EXTREMO (como la barra clásica):
     se pega a top:0, pierde el margen lateral y cuadra las esquinas → sin huecos
     arriba ni a los lados. Todo animado a la par que el logo (mismo .28s/easing). */
  .nav{ transition:top .28s cubic-bezier(.4,0,.2,1), padding .28s cubic-bezier(.4,0,.2,1); }
  .nav-capsule{ transition:border-radius .28s cubic-bezier(.4,0,.2,1); }
  .nav.nav-collapsed{ top:0 !important; padding-left:0; padding-right:0; }
  .nav.nav-collapsed .nav-capsule{ border-radius:0; }
}

/* El sidebar es position:fixed top:57 → bajarlo para alinear con el contenido. */
.sidebar{ top:100px; height:calc(100vh - 100px); }