/* ==========================================================================
   BlueBox — Calculadora de envíos
   Solo la carga esta página. Consume las variables de tokens.css.
   ========================================================================== */

.bb-calc-hero{
  background:
    radial-gradient(900px 460px at 92% -10%, rgba(204,132,66,.20), transparent 60%),
    linear-gradient(158deg, var(--bb-blue-900) 0%, var(--bb-blue-800) 60%, #0a2233 100%);
  color:#fff;
  padding-block:clamp(2.5rem,6vw,4rem) clamp(3rem,7vw,4.5rem);
  text-align:center;
}
.bb-calc-hero h1{
  font-size:clamp(1.9rem,4.4vw,3rem); font-weight:800;
  max-width:24ch; margin-inline:auto;
}
.bb-calc-hero h1 em{ font-style:normal; color:var(--bb-amber-300) }
.bb-calc-hero p{
  margin-top:1rem; margin-inline:auto; max-width:52ch;
  color:rgba(255,255,255,.82); font-size:clamp(1rem,1.4vw,1.15rem);
}

/* ---- Cuerpo: formulario a la izquierda, resultado a la derecha ---- */

.bb-calc{ padding-block:clamp(2.5rem,6vw,4rem) }

.bb-calc__grid{
  display:grid; gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:start;
}
@media (max-width:900px){
  .bb-calc__grid{ grid-template-columns:1fr }
}

.bb-panel{
  background:var(--bb-surface);
  border:1px solid var(--bb-line);
  border-radius:var(--bb-r-lg);
  box-shadow:var(--bb-shadow-sm);
  padding:clamp(1.5rem,3vw,2.25rem);
}

.bb-calc__legend{
  font-family:var(--bb-font-display);
  font-size:var(--bb-fs-xs); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--bb-muted);
  margin-bottom:1.5rem;
}

.bb-calc__group{ margin-bottom:1.75rem }
.bb-calc__group:last-child{ margin-bottom:0 }

.bb-calc__label{
  display:block; margin-bottom:.6rem;
  font-weight:700; font-size:1.0625rem; color:var(--bb-ink);
}
.bb-calc__help{
  display:block; margin-top:.45rem;
  font-size:var(--bb-fs-xs); color:var(--bb-muted);
}

/* ---- Campo numérico con unidad ---- */

.bb-input-unit{ position:relative; display:flex; align-items:center }
.bb-input-unit input{
  width:100%; padding:.85rem 3.6rem .85rem 1rem;
  font-family:var(--bb-font); font-size:1.15rem; font-weight:700;
  color:var(--bb-ink); background:var(--bb-surface);
  border:1px solid var(--bb-input-border,#8699a8); border-radius:var(--bb-r);
  /* Se ocultan las flechitas del campo numérico: hay deslizador y teclado,
     y en un campo grande esas flechas son un blanco diminuto. */
  -moz-appearance:textfield; appearance:textfield;
}
.bb-input-unit input::-webkit-outer-spin-button,
.bb-input-unit input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.bb-input-unit input:focus{
  outline:none; border-color:var(--bb-primary); box-shadow:var(--bb-ring);
}
.bb-input-unit__unit{
  position:absolute; right:1rem;
  font-weight:700; font-size:.95rem; color:var(--bb-muted);
  pointer-events:none;
}

/* ---- Deslizador ---- */

.bb-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; margin-top:1rem;
  background:var(--bb-blue-100); border-radius:var(--bb-r-pill);
  cursor:pointer;
}
.bb-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:24px; height:24px; border-radius:50%;
  background:var(--bb-primary); border:3px solid #fff;
  box-shadow:0 1px 4px rgba(13,43,62,.35);
  cursor:grab;
}
.bb-range::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:var(--bb-primary); border:3px solid #fff;
  box-shadow:0 1px 4px rgba(13,43,62,.35);
  cursor:grab;
}
.bb-range:focus-visible{ outline:2px solid var(--bb-blue-600); outline-offset:4px }

.bb-range__marks{
  display:flex; justify-content:space-between;
  margin-top:.4rem;
  font-size:var(--bb-fs-xs); color:var(--bb-muted);
}

/* ---- Selector de tipo de artículo ---- */

.bb-choice{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem }
@media (max-width:420px){ .bb-choice{ grid-template-columns:1fr } }

/* El radio de verdad está ahí para el teclado y los lectores de pantalla;
   se oculta a la vista y la etiqueta hace de botón. */
.bb-choice input{
  position:absolute; width:1px; height:1px; opacity:0;
  pointer-events:none;
}
.bb-choice label{
  display:flex; align-items:center; gap:.7rem;
  padding:1rem 1.1rem;
  background:var(--bb-surface);
  border:1px solid var(--bb-line-strong); border-radius:var(--bb-r);
  font-weight:700; font-size:var(--bb-fs-sm); color:var(--bb-ink-soft);
  cursor:pointer;
  transition:border-color .16s var(--bb-ease), background .16s var(--bb-ease),
             color .16s var(--bb-ease);
}
.bb-choice label:hover{ border-color:var(--bb-blue-300) }
.bb-choice input:checked + label{
  border-color:var(--bb-primary); background:var(--bb-blue-050);
  color:var(--bb-blue-800);
  box-shadow:inset 0 0 0 1px var(--bb-primary);
}
.bb-choice input:focus-visible + label{
  outline:2px solid var(--bb-blue-600); outline-offset:2px;
}
.bb-choice svg{
  width:22px; height:22px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}

/* El precio solo aparece cuando hace falta. Se anima el alto para que no
   salte de golpe. */
.bb-calc__conditional{
  overflow:hidden;
  max-height:0; opacity:0;
  margin-top:0;
  /* visibility:hidden saca el bloque del árbol de accesibilidad: con solo
     max-height:0 el campo seguía siendo alcanzable con el tabulador y quien
     navega con teclado caía en un campo invisible.
     La transición de visibility se retrasa hasta que termina el colapso, para
     que no desaparezca de golpe mientras se está cerrando. */
  visibility:hidden;
  transition:max-height .28s var(--bb-ease), opacity .2s var(--bb-ease),
             margin-top .28s var(--bb-ease), visibility 0s linear .28s;
}
.bb-calc__conditional.is-open{
  max-height:14rem; opacity:1; margin-top:1.75rem;
  visibility:visible;
  transition:max-height .28s var(--bb-ease), opacity .2s var(--bb-ease),
             margin-top .28s var(--bb-ease), visibility 0s;
}

/* ---- Resultado ---- */

/* La columna que encierra la tarjeta. `align-self:stretch` la hace del alto de
   la fila completa (el formulario es más alto que la tarjeta): así la tarjeta
   tiene margen para deslizarse, pero no puede pasar de la fila.
   Sin esta envoltura, Chrome usa el contenedor de la rejilla como límite del
   `sticky` en vez de la celda —contra lo que dice la norma— y la tarjeta se
   metía encima del bloque de Colombia y Madrid. Medido: 118px de solape en una
   ventana de 1000x497. En pantallas altas no se notaba porque el scroll se
   terminaba antes de que la tarjeta llegara. */
.bb-result-col{ align-self:stretch }

.bb-result-card{
  position:sticky; top:calc(var(--bb-topbar-h) + 1.25rem);
  background:var(--bb-blue-900); color:#fff;
  border-radius:var(--bb-r-lg);
  box-shadow:var(--bb-shadow-lg);
  overflow:hidden;
}
@media (max-width:900px){
  .bb-result-card{ position:static }
}

.bb-result-card__top{ padding:clamp(1.5rem,3vw,2rem) }

.bb-result-card__label{
  font-size:var(--bb-fs-xs); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
}

.bb-total{
  display:flex; align-items:baseline; gap:.35rem;
  margin-top:.5rem;
  font-family:var(--bb-font-display);
  font-weight:800; letter-spacing:-.03em;
}
.bb-total__currency{ font-size:1.5rem; color:var(--bb-amber-300) }
.bb-total__value{ font-size:clamp(2.6rem,6vw,3.4rem); line-height:1 }
.bb-total__note{
  margin-top:.5rem;
  font-size:var(--bb-fs-sm); color:rgba(255,255,255,.6);
}

.bb-breakdown{
  list-style:none; margin:1.5rem 0 0; padding:1.35rem 0 0;
  border-top:1px solid rgba(255,255,255,.16);
}
.bb-breakdown li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.4rem 0;
  font-size:var(--bb-fs-sm); color:rgba(255,255,255,.82);
}
.bb-breakdown li span:last-child{ font-weight:700; white-space:nowrap; color:#fff }
.bb-breakdown li.is-muted{ color:rgba(255,255,255,.5) }
.bb-breakdown__formula{
  display:block; margin-top:.15rem;
  font-size:var(--bb-fs-xs); color:rgba(255,255,255,.45);
}

.bb-result-card__foot{
  padding:1.25rem clamp(1.5rem,3vw,2rem);
  background:rgba(255,255,255,.06);
  border-top:1px solid rgba(255,255,255,.12);
}

/* Aviso de que es un estimado. Va dentro del resultado a propósito: si está en
   el pie de la página nadie lo lee, y la cifra crea expectativa. */
.bb-disclaimer{
  display:flex; gap:.6rem; align-items:flex-start;
  font-size:var(--bb-fs-xs); line-height:1.55;
  color:rgba(255,255,255,.62);
}
.bb-disclaimer svg{
  width:15px; height:15px; flex:0 0 auto; margin-top:.15rem;
  fill:var(--bb-amber-300);
}

/* Aquí estaba el botón verde de WhatsApp dentro de la tarjeta del estimado. Se
   retiró: era el tercer verde de la pantalla. El camino a WhatsApp queda en la
   burbuja flotante y en el bloque de Colombia y Madrid. */

/* ---- Aviso de dato inválido ---- */

.bb-calc__error{
  display:none; align-items:flex-start; gap:.55rem;
  margin-top:.6rem;
  font-size:var(--bb-fs-sm); font-weight:600; color:var(--bb-danger);
}
.bb-calc__error.is-shown{ display:flex }

/* ---- Tarifa de referencia ---- */

.bb-rate{
  display:flex; flex-wrap:wrap; gap:.5rem 1.25rem;
  margin-top:2rem; padding-top:1.5rem;
  border-top:1px solid var(--bb-line);
  font-size:var(--bb-fs-sm); color:var(--bb-muted);
}
.bb-rate strong{ color:var(--bb-ink) }

/* ==========================================================================
   Aviso de otros orígenes (Colombia y Madrid)

   Ocupa el ancho completo debajo de las dos columnas: la calculadora solo
   cotiza Miami, y quien trae de otro lado tiene que ver a dónde escribir.
   ========================================================================== */

.bb-otros{
  grid-column:1 / -1;
  display:flex; flex-wrap:wrap; gap:1.5rem;
  align-items:center; justify-content:space-between;
  margin-top:.5rem;
  padding:clamp(1.5rem,3vw,2rem);
  background:var(--bb-blue-050);
  border:1px solid var(--bb-blue-100);
  border-radius:var(--bb-r-lg);
}

.bb-otros__texto{ flex:1 1 22rem; min-width:0 }

.bb-otros h2{
  font-size:1.3rem; font-weight:800;
  color:var(--bb-blue-800);
}
.bb-otros p{
  margin-top:.5rem; max-width:52ch;
  color:var(--bb-ink-soft); font-size:var(--bb-fs-sm);
}

/* Este bloque usa `.bb-btn-wa` de site.css, en contorno. Antes tenía su propia
   regla en verde relleno; se retiró para no repetir el verde de la burbuja. */