/* ==========================================================================
   Cotizador de Cabitrans One (plugin del FormBuilder) en TPal — 2026-10-14
   --------------------------------------------------------------------------
   Lo de DENTRO del formulario (campos, chips, botones, progreso…) va en el
   aspecto «transportedepalets» del FormBuilder
   (/var/www/vhosts/FormBuilder/data/aspects/form_transportedepalets.json).
   Aquí solo el MARCO que pone la web: la tarjeta blanca con el halo azul del
   cotizador de antes, la página /cotizador y el héroe de la portada, que se
   abre a una sola columna mientras el cliente avanza por el asistente.
   La tarjeta no puede ir en el aspecto: el plugin copia las clases de su raíz
   a las ventanas que cuelga del <body>, y la tarjeta saldría también allí.
   ========================================================================== */

/* La tarjeta (la del Quoter: 20 px, borde #E6E9F5 y halo azul). */
.tp-fb-tarjeta{
  position:relative;
  background:#fff;color:#0E1428;
  border:1px solid #E6E9F5;border-radius:20px;
  padding:28px;
  box-shadow:0 0 0 1px rgba(0,71,255,.18),0 20px 60px -20px rgba(0,71,255,.28),0 0 80px -10px rgba(0,71,255,.12);
  text-align:left;line-height:1.5;letter-spacing:normal;
  min-height:340px;
}
.tp-fb-tarjeta .tp-fb-cargando{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:284px;margin:0;color:#5B6478;font-size:.95rem;text-align:center;
}
.tp-fb-tarjeta .tp-fb-cargando a{color:#0047FF;font-weight:600}
/* Ya montado, la tarjeta mide lo que mida el formulario. */
.tp-fb-tarjeta:has(> .fb-root){min-height:0}
/* La cabecera es pegajosa (73 px): lo que el plugin lleva a la vista
   («Volver al inicio», el primer error) no tiene que quedar debajo. */
.tp-fb-tarjeta,.tp-fb-tarjeta .fb-root,.tp-fb-tarjeta [data-step]{scroll-margin-top:96px}
.tp-fb-tarjeta input,.tp-fb-tarjeta select,.tp-fb-tarjeta textarea,.tp-fb-tarjeta button{scroll-margin-top:110px}
/* «Presupuesto 100% gratis» bajo la tarjeta: el azul de la web sobre el héroe
   oscuro se leía a 3:1; aquí, el azul claro de la propia portada. */
.hero-cot .quote-note b{color:#8FB0FF}
@media (max-width:600px){
  .tp-fb-tarjeta{padding:22px 16px;border-radius:18px}
}

/* Aviso de la página oculta de pruebas (/cotizador-one). */
.tp-fb-aviso{
  margin:0 0 14px;padding:10px 14px;border-radius:12px;
  border:1px solid #F5D29A;background:#FFF7EA;color:#6B3D09;
  font-size:.9rem;line-height:1.45;text-align:left;
}
.tp-fb-aviso a{color:#6B3D09;text-decoration:underline}

/* ── La portada: el héroe se abre a una columna al pasar de la ruta ──────────
   (la clase la pone el montaje, resources/views/partials/cotizador-one.blade.php,
   con onStepChange). En la primera pantalla la tarjeta va en su columna, como
   el cotizador de antes; de la mercancía en adelante el titular y la ilustración
   se apartan y el formulario tiene el ancho de la página /cotizador. */
/* El héroe recorta lo que se sale (overflow:hidden): el calendario y la lista
   de poblaciones del cotizador pueden asomar por debajo de la tarjeta, así que
   se recorta solo en horizontal (sin «clip», el navegador viejo se queda como
   estaba: con «hidden» y «visible» a la vez saldría una barra de scroll). */
@supports (overflow:clip){
  .hero:has(.tp-fb-tarjeta){overflow-x:clip;overflow-y:visible}
}
.hero.tp-fb-ancho{padding-top:44px}
.hero.tp-fb-ancho .hero-in{grid-template-columns:minmax(0,1fr);max-width:var(--wrap)}
.hero.tp-fb-ancho .hero-copy{display:none}
.hero.tp-fb-ancho .hero-cot{max-width:980px;margin:0 auto}
@media (max-width:600px){
  .hero.tp-fb-ancho{padding-top:20px}
}

/* ── La página /cotizador ───────────────────────────────────────────────── */
.tp-fb-pagina{
  position:relative;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(0,71,255,.10), transparent 60%),
    radial-gradient(700px 380px at 95% 0%, rgba(34,227,227,.10), transparent 55%),
    #F4F6FE;
  padding:48px 0 72px;
  min-height:60vh;
}
.tp-fb-pagina .tp-fb-pagina-in{max-width:1028px;margin:0 auto}
.tp-fb-pagina .tp-fb-nota{margin:14px 0 0;text-align:center;font-size:.85rem;color:#5B6478}
.tp-fb-pagina .tp-fb-nota b{color:#0047FF}
@media (max-width:600px){
  .tp-fb-pagina{padding:24px 0 48px}
}

/* Accesible y fuera de la vista. */
.tp-fb-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}