/* ============================================================
   Hoja del vehículo + pestaña (solo móvil, ≤920px) — ver hoja-vehiculo.js.
   Por encima de 920px no existe: .hv queda en display:none y el
   escritorio se ve y se comporta como siempre.
   Diseño: mocks14/vehiculo (ronda XI) — pestaña T2 «solo flecha»,
   hoja que sube sobre ella, buscador con pasos.
   ============================================================ */
.hv{display:none}

@media (max-width:920px),(orientation:landscape) and (max-height:500px) and (max-width:1000px){
  .hv{
    display:block;position:fixed;inset:0;z-index:80;pointer-events:none;
    --tw:236px;--tx:160px;--th:72px;--hv-t2:#5A6472;--hv-linea:#DFE2E8;
    font-family:var(--sans);color:var(--tinta);
    -webkit-tap-highlight-color:transparent;
  }
  /* móvil apaisado: mucho menos alto (46px de 302 en vez de 72: la pestaña no se come un
     cuarto de la pantalla) y el MISMO ancho que en vertical (236px; el director, 26-sep:
     «¿por qué la haces tan ancha?» — a 320px ocupaba un tercio de la pantalla sin necesidad,
     el texto cabe de sobra). El icono y el texto pasan a una sola fila; la silueta la
     recalcula ajustarLinea() (hoja-vehiculo.js) leyendo --tw y --th. */
  @media (orientation:landscape) and (max-height:520px){
    .hv{--th:46px}
    .hv .hv-ti{flex-direction:row;align-items:center;gap:9px;padding-top:0;height:100%}
    .hv .hv-ti .tx{font-size:13.5px}
  }

  /* --- el bloque «Tu vehículo» de escritorio, fuera: su lugar lo ocupa la pestaña --- */
  body.hv-con-pestana #registroEnvoltura{display:none}
  /* el pie no queda tapado por la pestaña (72px + zona segura) */
  body.hv-con-pestana .pie{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  @media (orientation:landscape) and (max-height:520px){
    body.hv-con-pestana .pie{padding-bottom:calc(46px + env(safe-area-inset-bottom,0px))}
  }
  /* en <html> y, como la página se desplaza dentro de <body> («raíz 2», estilo.css), también en body;
     en modo QA body no se desplaza y ahí no: con overflow en body el masthead sticky se descuelga */
  html.hv-bloq{overflow:hidden;overscroll-behavior:none}
  html.hv-bloq:not(.qa) body{overflow:hidden;overscroll-behavior:none}

  /* sonda de la zona segura inferior (offsetHeight → JS) */
  .hv-sb{position:fixed;left:0;bottom:0;width:0;height:env(safe-area-inset-bottom,0px);visibility:hidden;pointer-events:none}

  /* --- velo --- */
  .hv-velo{
    position:absolute;inset:0;width:100%;border:0;padding:0;background:rgba(5,24,46,.52);
    opacity:0;pointer-events:none;touch-action:none;transition:opacity .34s;
  }
  .hv.abierta .hv-velo{opacity:1;pointer-events:auto}

  /* --- contenedor de la hoja: la altura la fija el JS ---
     Todo el movimiento es transform (compositor) — sin clip-path ni filter animados:
     en iOS dejaban bandas y recuadros huérfanos y se entrecortaban. Cerrada, la hoja
     está bajo el borde y además visibility:hidden (tras la transición): si el navegador
     dejase una tesela vieja, no hay nada que pintar. */
  .hv-dockw{
    position:absolute;left:0;right:0;margin-inline:auto;width:min(100%,480px);
    bottom:var(--kb,0px);z-index:2;height:500px;pointer-events:none;
    transform:translate3d(0,calc(100% + 40px),0);visibility:hidden;will-change:transform;
    transition:transform .38s cubic-bezier(.3,0,.2,1),height .46s cubic-bezier(.2,.8,.2,1),visibility 0s .4s;
  }
  .hv.abierta .hv-dockw{
    transform:none;visibility:visible;
    transition:transform .5s cubic-bezier(.32,.72,0,1),height .46s cubic-bezier(.2,.8,.2,1),visibility 0s;
  }
  .hv-dock{
    position:relative;width:100%;height:100%;pointer-events:auto;
    background:#fff;border-radius:24px 24px 0 0;box-shadow:0 -14px 30px -14px rgba(5,24,46,.55);
  }

  /* --- cuerpo --- */
  .hv-cuerpo{
    position:absolute;inset:0;display:flex;flex-direction:column;
    padding:12px 16px calc(22px + env(safe-area-inset-bottom,0px));
    color:var(--tinta);outline:none;
  }
  .hv-cuerpo.auto{top:auto;height:auto}
  /* Safari de iPhone (iOS 26): debajo de la hoja Safari añade una franja blanca
     propia de ~18px (`ios-cristal`, sistema.js). Sin descontarla, bajo los
     botones quedaban ~46px en blanco; así, ~28px, como en Android. */
  @media (orientation:portrait){
    html.ios-cristal .hv-cuerpo{padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}
  }
  /* nada de la hoja desplaza la página de atrás; solo la lista se desplaza */
  .hv-cuerpo{touch-action:none}
  .hv-res{touch-action:pan-y}

  /* la pestaña: fija abajo; al abrir, la hoja sube por encima y la tapa; al cerrar, la hoja
     baja y la pestaña ya está ahí (no hay que animarla) */
  .hv-tabw{
    position:absolute;left:0;right:0;bottom:0;z-index:1;height:var(--th);pointer-events:none;
    transition:transform .44s cubic-bezier(.2,.8,.2,1);
  }
  .hv-tabw.oculta{transform:translate3d(0,calc(124px + env(safe-area-inset-bottom,0px)),0)}

  /* --- la pestaña T2: «solo flecha» --- */
  .hv-tab{
    position:absolute;left:50%;bottom:0;width:var(--tw);height:var(--th);margin:0 0 0 calc(var(--tw) / -2);
    display:flex;justify-content:center;align-items:flex-start;border:0;padding:0;background:none;
    color:#fff;cursor:pointer;font-family:var(--sans);
    pointer-events:auto;filter:drop-shadow(0 -5px 9px rgba(5,24,46,.34));
    visibility:visible;transition:visibility 0s;
  }
  .hv.abierta .hv-tab{visibility:hidden;pointer-events:none;transition:visibility 0s .5s}
  .hv-tab:focus-visible{outline:2px solid #fff;outline-offset:-8px}
  /* En iPhone la barra de Safari flota sobre el contenido: un fixed
     bottom:0 se queda por encima de ella y por debajo se ve pasar la
     página. Mismo relleno que .barra-precio (producto.astro) — mismo
     bug, misma solución — pero en var(--panel) (navy), no blanco: el
     fondo real de la pestaña no es un background propio, lo dibuja el
     SVG .hv-ln con ese mismo color, así que el relleno tiene que
     igualarlo. Va en .hv-tab (el ancho real de la pestaña, var(--tw)),
     no en .hv-tabw (ancho completo): fuera de la pestaña no hay fondo
     que tapar. */
  .hv-tab::after{content:"";position:absolute;left:0;right:0;top:100%;height:240px;background:var(--panel);pointer-events:none}
  .hv-ln{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:var(--panel);stroke:rgba(255,255,255,.17);stroke-width:2}
  .hv-ti{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding-top:12px;color:#fff}
  .hv-ti .cv{display:grid;place-items:center;height:14px}
  .hv-ti .cv svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .hv-ti .tx{display:flex;max-width:var(--tx);font:800 14.5px/18px var(--sans);white-space:nowrap}
  .hv-ti .mo{overflow:hidden;text-overflow:ellipsis;min-width:0}
  .hv-ti .an{flex:none;white-space:pre}

  /* --- cabecera --- */
  .hv-arr{flex:none;margin-bottom:24px;touch-action:none;cursor:grab}
  .hv-asa{display:block;width:38px;height:4px;border-radius:2px;background:#C4C9D2;margin:0 auto 12px}
  .hv-hd{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px}
  .hv-tit{flex:1;margin:0;font:800 22px/1.15 var(--sans);font-stretch:108%;color:var(--tinta)}
  /* Sin flecha a la vista (director, 24-sep-2026): la barrita de arriba ya
     dice que la hoja se baja, y se cierra también tocando fuera. El botón
     sigue ahí para el lector de pantalla y el teclado: aparece solo al llegar
     a él con el tabulador. Va fuera del flujo, así que la cabecera ya no
     reserva sus 36px. */
  .hv-x{
    position:absolute;right:-10px;top:50%;width:40px;height:36px;margin-top:-18px;border:0;border-radius:10px;
    background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;
    opacity:0;pointer-events:none;
  }
  .hv-x:focus-visible{opacity:1;pointer-events:auto}
  .hv-x .hv-i{width:24px;height:24px;stroke-width:2.2}

  .hv-i{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

  /* --- pasos: aros 1·2·3 en un solo azul --- */
  .hv-st{display:grid;grid-template-columns:repeat(3,1fr);position:relative;flex:none;margin:0 0 22px}
  .hv-st::before{content:"";position:absolute;top:16px;left:16.6%;right:16.6%;height:2px;background:rgba(0,40,86,.13)}
  .hv-pa{
    position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;
    border:0;background:none;padding:0;cursor:pointer;font-family:var(--sans);
  }
  .hv-pa:disabled{cursor:default}
  .hv-n{
    position:relative;z-index:1;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
    font:800 14.5px/1 var(--sans);background:#fff;box-shadow:inset 0 0 0 1.5px var(--navy);color:var(--navy);
  }
  .hv-off .hv-n{box-shadow:inset 0 0 0 1.5px rgba(0,40,86,.24);color:rgba(0,40,86,.42)}
  .hv-act .hv-n{background:var(--navy);color:#fff}
  .hv-l{max-width:100%;font:600 14px/1.2 var(--sans);color:rgba(0,40,86,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hv-act .hv-l{color:var(--navy);font-weight:700}

  /* --- buscador y lista --- */
  .hv-bus{
    flex:none;display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;margin-bottom:10px;
    border-radius:12px;background:#F1F2F5;color:var(--hv-t2);
  }
  .hv-bus:focus-within{box-shadow:inset 0 0 0 2px var(--navy);background:#fff}
  .hv-bus input{
    flex:1;min-width:0;border:0;background:none;outline:0;
    font:500 17px var(--sans);color:var(--tinta);
  }
  .hv-bus input::placeholder{color:#8A93A1}
  .hv-res{position:relative;flex:1;min-height:0;overflow-y:auto;margin:0 -16px;padding:0 16px;scrollbar-width:thin;overscroll-behavior:contain}
  .hv-rw{
    display:flex;align-items:center;justify-content:space-between;width:100%;height:48px;padding:0 2px;
    border:0;border-bottom:1px solid #EDEEF1;background:none;text-align:left;cursor:pointer;
    font:600 16.5px var(--sans);color:var(--tinta);
  }
  .hv-rw b{color:var(--navy);font-weight:800}
  .hv-rw .hv-i{width:17px;height:17px;color:#98A0AD;stroke-width:2.2}
  .hv-sel{color:var(--navy);font-weight:700}
  .hv-sel .hv-i{color:var(--navy);stroke-width:2.6}
  .hv-sin{color:var(--hv-t2);font-weight:500}
  .hv-vacio{padding:18px 4px;text-align:center}
  .hv-vacio p{margin:0 0 6px;font-size:15.5px;line-height:1.45;color:var(--hv-t2)}
  .hv-vacio p:first-child{color:var(--tinta);font-weight:600}
  .hv-wa{
    display:inline-flex;align-items:center;gap:8px;margin-top:10px;height:44px;padding:0 18px;
    border-radius:999px;border:1.5px solid var(--navy);background:#fff;color:var(--navy);
    font:700 15px var(--sans);text-decoration:none;
  }
  .hv-wa .hv-i{width:18px;height:18px}
  .hv-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* --- al terminar: el vehículo centrado y una fila con el botón y un círculo (ronda 4, B) --- */
  .hv-tj{flex:none;padding:4px 0 6px;text-align:center}
  .hv-tx small{display:block;margin-bottom:4px;font:500 15px/1.3 var(--sans);color:var(--hv-t2)}
  .hv-tx b{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;
    font:800 30px/1.08 var(--sans);font-stretch:106%;color:var(--navy);
  }
  .hv-tja{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:24px}
  .hv-cta{
    flex:none;height:50px;padding:0 28px;border:0;border-radius:999px;
    background:var(--navy);color:#fff;font:700 16.5px/1 var(--sans);letter-spacing:-.005em;white-space:nowrap;cursor:pointer;
  }
  .hv-cta:disabled{background:#D5D8DE;color:#7B8494;cursor:default}
  .hv-ed,.hv-el{
    position:relative;flex:none;width:50px;height:50px;border:0;border-radius:50%;
    background:#EEF0F3;box-shadow:inset 0 0 0 1px #DADDE3;display:grid;place-items:center;cursor:pointer;
  }
  .hv-ed{color:var(--navy)}
  /* RJ6 (ronda de mocks del rojo de la papelera): «sin rojo del todo,
     extremo» — elegida por el director sobre RJ4/RJ1, que era lo que había
     aquí (var(--no), el rojo de "esto borra" del resto del sitio, a pleno
     color). Mismo gris que el resto de textos secundarios de la hoja
     (var(--hv-t2), el "tinta-2" del mock), no navy: sigue distinguiéndose
     del lápiz sin necesitar un color de alarma. */
  .hv-el{color:var(--hv-t2)}
  .hv-ed .hv-i,.hv-el .hv-i{width:20px;height:20px;stroke-width:2.1}
  @media(hover:hover){
    .hv-ed:hover,.hv-el:hover{background:#E3E6EB}
  }
  /* nota discreta, solo al confirmar por primera vez: qué pasa después */
  .hv-nota{margin:14px auto 0;max-width:30ch;font:500 13.5px/1.4 var(--sans);color:var(--hv-t2);text-wrap:balance}
  /* la fila de acciones es el último paso: entra con suavidad cuando aparece la tarjeta */
  .hv-tja,.hv-nota{animation:hv-entra .32s .14s cubic-bezier(.2,.8,.2,1) both}
  @keyframes hv-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  .hv-rw:focus-visible,.hv-cta:focus-visible,.hv-x:focus-visible,
  .hv-ed:focus-visible,.hv-el:focus-visible,.hv-pa:focus-visible,.hv-wa:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

  /* móvil apaisado / pantallas bajas: un poco más apretado para que la lista respire */
  @media (max-height:520px){
    .hv-cuerpo{padding-top:8px}
    .hv-asa{margin-bottom:6px}
    .hv-arr{margin-bottom:6px}
    .hv-st{margin-bottom:8px}
    .hv-tja{margin-top:14px}
  }
  /* --- móvil apaisado (~300–430px de alto): hoja estrecha centrada (opción A del mock «Volver y hojas») ---
     Antes ocupaba el ancho entero entre las zonas seguras (~830px de 956) y casi todo era aire.
     Ahora es una hoja de 560px centrada entre ellas (--zs-i/--zs-d, estilo.css §19d), con la cabecera
     compacta arriba —título a la izquierda, los tres pasos como tira de píldoras a la derecha—, el
     buscador debajo y la lista pegada a él, de una columna y de arriba abajo de la hoja.
     Dos clases las pone hoja-vehiculo.js en la raíz (.hv): .hv-baja cuando queda poco alto (teclado
     abierto) y .hv-teclado cuando el teclado tapa la barra de inicio (no se reserva su zona segura).
     La hoja «Ir a la página» (.hp) queda como estaba. */
  @media (orientation:landscape) and (max-height:520px){
    .hv:not(.hp){--pb:calc(8px + env(safe-area-inset-bottom,0px))}
    .hv.hv-teclado{--pb:8px}
    .hv:not(.hp) .hv-dockw{
      left:var(--zs-i,0px);right:var(--zs-d,0px);
      width:min(calc(100% - var(--zs-i,0px) - var(--zs-d,0px)),560px);
    }
    .hv:not(.hp) .hv-dock{border-radius:18px 18px 0 0}
    .hv:not(.hp) .hv-cuerpo{
      display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);
      column-gap:10px;align-content:start;padding:14px 18px var(--pb);
    }
    .hv.hv-baja:not(.hp) .hv-cuerpo{padding-top:10px}
    /* la barrita, centrada en toda la hoja, con más zona de agarre que sus 4px */
    .hv:not(.hp) .hv-asa{position:absolute;top:6px;left:50%;width:38px;margin:0 0 0 -19px}
    .hv:not(.hp) .hv-asa::before{content:"";position:absolute;inset:-8px -44px -14px}
    .hv:not(.hp) .hv-arr{grid-column:1;grid-row:1;align-self:center;margin:0}
    .hv:not(.hp) .hv-tit{font-size:19px}

    /* pasos: tira de píldoras en una fila, sin la línea de unión; el toque llega a 44px con el ::after */
    .hv:not(.hp) .hv-st{grid-column:2;grid-row:1;justify-self:end;display:flex;gap:2px;align-items:center;margin:0}
    .hv:not(.hp) .hv-st::before{display:none}
    .hv:not(.hp) .hv-pa{
      flex-direction:row;justify-content:flex-start;align-items:center;gap:6px;height:34px;padding:0 10px 0 5px;
      border-radius:999px;
    }
    .hv:not(.hp) .hv-pa::after{content:"";position:absolute;inset:-5px -1px}
    .hv:not(.hp) .hv-pa.hv-act{background:#E9EEF5}
    .hv:not(.hp) .hv-n{width:24px;height:24px;font-size:12px}
    .hv:not(.hp) .hv-l{font-size:14px}

    .hv:not(.hp) .hv-bus{grid-column:1 / -1;grid-row:2;align-self:start;height:40px;margin:6px 0 2px}
    .hv:not(.hp) .hv-bus input{font-size:16px}

    /* lista: de una columna, pegada al buscador y hasta el borde de la hoja; el último renglón sube
       por encima de la zona segura */
    .hv:not(.hp) .hv-res{
      grid-column:1 / -1;grid-row:3;margin:0 -18px calc(-1 * var(--pb));padding:2px 18px var(--pb);
    }
    .hv:not(.hp) .hv-rw{height:44px;border-bottom-color:#F0F1F4;font-size:16px}

    /* resumen (Confirmar / Cambiar): todo centrado y apilado, en la misma hoja estrecha */
    .hv:not(.hp) .hv-cuerpo:has(.hv-tj) .hv-arr{grid-column:1 / -1;text-align:center}
    .hv:not(.hp) .hv-tj{grid-column:1 / -1;grid-row:2 / 4;display:block;margin:0;padding:8px 0 0;text-align:center}
    .hv:not(.hp) .hv-tx small{margin-bottom:2px;font-size:14px}
    .hv:not(.hp) .hv-tx b{font-size:28px}
    .hv:not(.hp) .hv-tja{justify-content:center;margin-top:12px}
    .hv:not(.hp) .hv-cta,.hv:not(.hp) .hv-ed,.hv:not(.hp) .hv-el{height:48px}
    .hv:not(.hp) .hv-ed,.hv:not(.hp) .hv-el{width:48px}
    .hv:not(.hp) .hv-nota{margin:8px auto 0;max-width:none;font-size:13px}
  }

  @media (prefers-reduced-motion:reduce){
    .hv-dockw,.hv-tabw,.hv-tab,.hv-velo{transition:none!important}
    .hv-tja,.hv-nota{animation:none}
  }
}