/* ============================================================
   CONEX361° — herramientas.css
   Las cuatro piezas que calculan: coste real puesto en almacén,
   línea de 90 días, detector de fábrica y llenado de contenedor.
   ============================================================ */

/* ---------------------------------------------------------
   1. CALCULADORA DE COSTE REAL
   --------------------------------------------------------- */
.calc{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(1.5rem,3.4vw,3.4rem);align-items:start;}
@media(max-width:980px){.calc{grid-template-columns:1fr;}}

.calc__mando{border:1px solid var(--rule);padding:clamp(1.3rem,2.6vw,2rem);background:var(--bg);}
.calc__mando .field{margin-bottom:1.1rem;}
.calc__par{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;}
@media(max-width:460px){.calc__par{grid-template-columns:1fr;}}
.calc__unidad{position:relative;}
.calc__unidad .input{padding-right:3.2rem;font-family:var(--f-mono);font-variant-numeric:tabular-nums;}
.calc__unidad em{
  position:absolute;right:1rem;top:50%;transform:translateY(-50%);
  font-style:normal;font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-3);pointer-events:none;
}
.calc__reset{margin-top:.4rem;}

/* Salida */
.calc__salida{display:flex;flex-direction:column;gap:clamp(1.4rem,2.6vw,2rem);min-width:0;}
.calc__total{
  border:1px solid var(--mar);background:var(--mar);color:#fff;
  padding:clamp(1.4rem,2.8vw,2.1rem);
  display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;align-items:end;
}
@media(max-width:520px){.calc__total{grid-template-columns:1fr;}}
.calc__total dt{font-size:var(--t-micro);font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:#9FB4C4;}
.calc__total dd{margin:0;font-family:var(--f-display);font-weight:700;letter-spacing:-.04em;line-height:.95;color:#fff;}
.calc__total .grande{font-size:clamp(2.4rem,5.4vw,3.8rem);}
.calc__total .grande i{font-style:normal;color:var(--export);}
.calc__total .peq{font-size:clamp(1.3rem,2.6vw,1.8rem);}
.calc__total__nota{grid-column:1/-1;font-size:var(--t-xs);color:#9FB4C4;line-height:1.55;border-top:1px solid rgba(255,255,255,.16);padding-top:.9rem;margin-top:.3rem;}

/* Barra apilada del desglose */
.desglose{display:flex;width:100%;height:56px;border:1px solid var(--rule);overflow:hidden;}
.desglose__seg{
  position:relative;min-width:2px;
  transition:flex-basis var(--d-2) var(--e-swell);
  display:grid;place-items:center;overflow:hidden;
}
.desglose__seg span{
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.04em;
  color:var(--mar);white-space:nowrap;padding-inline:.3rem;
}
.desglose__seg[data-k='producto']{background:var(--mar);}
.desglose__seg[data-k='producto'] span{color:#fff;}
.desglose__seg[data-k='flete']{background:var(--aire);}
/* Azul Mar sobre Azul Aire da 3,2:1 y el rótulo es de 11 px. */
.desglose__seg[data-k='flete'] span{color:var(--mar-profundo);}
.desglose__seg[data-k='seguro']{background:#8FC4DA;}
.desglose__seg[data-k='arancel']{background:var(--export);}
.desglose__seg[data-k='despacho']{background:var(--export-suave);}
.desglose__seg[data-k='tarifa']{background:#E9EFF3;}
.desglose__seg[data-k='tarifa'] span{color:var(--mar);}

.leyenda{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.1rem 1.4rem;}
.leyenda__i{display:flex;align-items:baseline;gap:.6rem;padding:.6rem 0;border-bottom:1px solid var(--rule);font-size:var(--t-sm);}
.leyenda__p{width:10px;height:10px;flex:none;transform:translateY(-1px);}
.leyenda__i b{margin-left:auto;font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:500;color:var(--ink);}
.leyenda__i span{color:var(--ink-2);}

/* Aviso de tramo del cálculo */
.calc__pista{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  font-size:var(--t-xs);color:var(--ink-2);line-height:1.6;
}
.calc__pista b{font-family:var(--f-mono);color:var(--accent-ink);font-weight:600;}

/* ---------------------------------------------------------
   2. LÍNEA DE 90 DÍAS
   --------------------------------------------------------- */
.linea90{border:1px solid var(--rule);background:var(--bg);}
.linea90__cab{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.4rem;
  padding:clamp(1.2rem,2.4vw,1.8rem);border-bottom:1px solid var(--rule);
}
.linea90__dia{font-family:var(--f-display);font-weight:700;font-size:clamp(2rem,4.4vw,3rem);line-height:1;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums;}
.linea90__dia i{font-style:normal;font-size:.36em;letter-spacing:.04em;color:var(--accent-ink);margin-left:.3em;}
.linea90__fase{margin-left:auto;}

.linea90__pista{padding:clamp(1.6rem,3vw,2.4rem) clamp(1.2rem,2.4vw,1.8rem);}
.linea90__riel{position:relative;height:44px;}
.linea90__fondo{position:absolute;left:0;right:0;top:20px;height:4px;background:var(--rule);border-radius:var(--r-pill);}
.linea90__hecho{position:absolute;left:0;top:20px;height:4px;background:var(--export);border-radius:var(--r-pill);width:0;transition:width .12s linear;}
.linea90__hito{
  position:absolute;top:14px;width:16px;height:16px;transform:translateX(-50%);
  border-radius:50%;background:var(--bg);border:2px solid var(--rule);
  transition:border-color var(--d-1),background var(--d-1);
}
.linea90__hito[data-pasado='1']{border-color:var(--export);background:var(--export);}
.linea90__hito span{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.06em;color:var(--ink-3);white-space:nowrap;
}
@media(max-width:720px){.linea90__hito span{display:none;}}
/* El control real: un range accesible por encima del dibujo */
.linea90__range{
  position:absolute;left:0;right:0;top:0;height:44px;width:100%;
  appearance:none;background:transparent;margin:0;cursor:ew-resize;
}
.linea90__range::-webkit-slider-runnable-track{height:44px;background:transparent;}
.linea90__range::-moz-range-track{height:44px;background:transparent;}
.linea90__range::-webkit-slider-thumb{
  appearance:none;width:30px;height:30px;margin-top:7px;border-radius:50%;
  background:var(--export);border:3px solid var(--bg);box-shadow:0 4px 16px rgba(7,31,48,.28);cursor:grab;
}
.linea90__range::-moz-range-thumb{
  width:30px;height:30px;border-radius:50%;
  background:var(--export);border:3px solid var(--bg);box-shadow:0 4px 16px rgba(7,31,48,.28);cursor:grab;
}
.linea90__range:focus-visible{outline:none;}
.linea90__range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--mar);outline-offset:2px;}
.linea90__range:focus-visible::-moz-range-thumb{outline:2px solid var(--mar);outline-offset:2px;}

.linea90__panel{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border-top:1px solid var(--rule);
}
@media(max-width:720px){.linea90__panel{grid-template-columns:1fr;}}
.linea90__panel > div{background:var(--bg);padding:clamp(1.2rem,2.4vw,1.8rem);min-height:170px;}
.linea90__k{font-size:var(--t-micro);font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.8rem;}
.linea90__t{font-size:var(--t-md);margin-bottom:.55rem;}
.linea90__d{font-size:var(--t-sm);color:var(--ink-2);line-height:1.65;}
.linea90__tu{font-family:var(--f-display);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.3rem);letter-spacing:-.04em;line-height:1;color:var(--accent-ink);}
.linea90__tu + p{margin-top:.7rem;font-size:var(--t-sm);color:var(--ink-2);line-height:1.6;}

/* ---------------------------------------------------------
   3. DETECTOR: ¿fábrica o intermediario?
   --------------------------------------------------------- */
.detector{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,3.4vw,3.2rem);align-items:start;}
@media(max-width:900px){.detector{grid-template-columns:1fr;}}
.detector__lista{border-top:1px solid var(--rule);}
.detector__i{
  display:flex;align-items:flex-start;gap:.9rem;
  padding:1rem 0;border-bottom:1px solid var(--rule);cursor:pointer;
  transition:padding-inline var(--d-1) var(--e-out);
}
.detector__i:hover{padding-inline:.5rem;}
.detector__i input{
  appearance:none;width:24px;height:24px;flex:none;margin-top:.15rem;position:relative;cursor:pointer;
  border:1px solid var(--rule);border-radius:3px;background:var(--bg);
  transition:background var(--d-1),border-color var(--d-1);
}
.detector__i input::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;}
.detector__i input:checked{background:var(--export);border-color:var(--export);}
.detector__i input:checked::after{
  content:'';position:absolute;left:8px;top:3.5px;width:6px;height:12px;
  border:solid var(--mar);border-width:0 2.4px 2.4px 0;transform:rotate(43deg);
}
.detector__i input:focus-visible{outline:2px solid var(--export);outline-offset:2px;}
.detector__i b{display:block;font-family:var(--f-brand);font-weight:700;font-size:var(--t-sm);letter-spacing:-.01em;color:var(--ink);}
.detector__i span{display:block;font-size:var(--t-xs);color:var(--ink-2);line-height:1.55;margin-top:.2rem;}
.detector__i em{
  margin-left:auto;flex:none;font-style:normal;font-family:var(--f-mono);
  font-size:var(--t-micro);color:var(--ink-3);letter-spacing:.06em;padding-top:.3rem;
}

.detector__marcador{border:1px solid var(--rule);padding:clamp(1.3rem,2.6vw,2rem);position:sticky;top:calc(var(--header-h) + 1.5rem);}
@media(max-width:900px){.detector__marcador{position:static;}}
.detector__aguja{position:relative;height:10px;background:var(--rule);border-radius:var(--r-pill);margin-block:1.2rem;overflow:hidden;}
.detector__aguja i{
  position:absolute;left:0;top:0;bottom:0;width:0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,#C4351F,var(--export) 55%,#12794A);
  transition:width var(--d-2) var(--e-swell);
}
.detector__valor{font-family:var(--f-display);font-weight:700;font-size:clamp(2.4rem,5.4vw,3.6rem);line-height:.95;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums;}
.detector__valor i{font-style:normal;font-size:.34em;color:var(--ink-3);letter-spacing:0;margin-left:.25em;}
.detector__veredicto{font-family:var(--f-brand);font-weight:700;font-size:var(--t-md);letter-spacing:-.02em;margin-top:.4rem;}
.detector__veredicto[data-nivel='rojo']{color:#A62B18;}
.detector__veredicto[data-nivel='ambar']{color:var(--accent-ink);}
.detector__veredicto[data-nivel='verde']{color:#0E6B41;}
/* Los tres rojos, ámbares y verdes de arriba están calculados sobre
   fondo claro. Sobre Azul Mar, el rojo oscuro caía a 1,6:1. */
.is-dark .detector__veredicto[data-nivel='rojo']{color:#FF9B8F;}
.is-dark .detector__veredicto[data-nivel='ambar']{color:var(--export-suave);}
.is-dark .detector__veredicto[data-nivel='verde']{color:#5FD39B;}
.detector__expl{font-size:var(--t-sm);color:var(--ink-2);line-height:1.65;margin-top:.8rem;}

/* ---------------------------------------------------------
   4. LLENADO DE CONTENEDOR — FCL o LCL
   --------------------------------------------------------- */
.cbm{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.5rem,3.4vw,3rem);align-items:center;}
@media(max-width:860px){.cbm{grid-template-columns:1fr;}}
.cbm__caja{
  position:relative;width:100%;aspect-ratio:2.6/1;border:2px solid var(--mar);
  background:var(--bg-alt);overflow:hidden;
}
.cbm__caja::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(90deg,rgba(12,63,94,.10) 1px,transparent 1px);
  background-size:6.25% 100%;
}
.cbm__relleno{
  position:absolute;left:0;top:0;bottom:0;width:0;background:var(--export);
  transition:width var(--d-2) var(--e-swell);
}
.cbm__relleno::after{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(90deg,rgba(12,63,94,.16) 1px,transparent 1px);
  background-size:12.5% 100%;
}
/* La etiqueta va debajo de la caja y no dentro: el contenedor puede
   quedar estrecho en dos columnas y el rótulo se montaba sobre el relleno. */
.cbm__etiqueta{
  display:block;margin-top:.7rem;
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.1em;color:var(--ink-3);
}
.cbm__lectura b{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.04em;line-height:1.05;color:var(--ink);}
.cbm__lectura p{margin-top:.7rem;font-size:var(--t-sm);color:var(--ink-2);line-height:1.65;max-width:46ch;}
.cbm__mando{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem;}