/* ============================================================
   AMONG S.R.L. — Simulador de costo real de importación
   ============================================================ */

.sim-shell{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:0;
  border:1px solid var(--line);
  background:var(--ink-2);
  position:relative;
}

/* ---------- Riel de pasos ---------- */
.sim-rail{
  display:flex;
  border-bottom:1px solid var(--line-faint);
  background:var(--ink);
}
.sim-rail-item{
  flex:1;
  padding:18px 16px;
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cream-faint);
  border-right:1px solid var(--line-faint);
  position:relative;
  transition:color .35s ease, background .35s ease;
  cursor:default;
}
.sim-rail-item:last-child{ border-right:none; }
.sim-rail-item::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.sim-rail-item.active{ color:var(--gold); background:var(--ink-panel); }
.sim-rail-item.active::after{ transform:scaleX(1); }
.sim-rail-item.done{ color:var(--cream-dim); cursor:pointer; }
.sim-rail-item.done:hover{ color:var(--gold-soft); }
.sim-rail-num{
  width:22px; height:22px; flex-shrink:0;
  border:1px solid currentColor; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:9.5px; letter-spacing:0;
}
.sim-rail-item.done .sim-rail-num{ background:var(--gold-deep); border-color:var(--gold-deep); color:var(--ink); }
.sim-rail-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Panel de pasos ---------- */
.sim-main{ padding:44px 40px 40px; min-height:560px; display:flex; flex-direction:column; }
.sim-step{ display:none; animation:simIn .55s var(--ease-out); flex:1; }
.sim-step.active{ display:block; }
@keyframes simIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
.sim-step-head{ margin-bottom:30px; }
.sim-step-head h3{ font-size:30px; color:var(--cream); margin:12px 0 10px; }
.sim-step-head p{ font-size:14px; color:var(--cream-dim); max-width:52ch; }

/* ---------- Opciones seleccionables ---------- */
.sim-options{ display:grid; gap:12px; }
.sim-options.cols-2{ grid-template-columns:repeat(2,1fr); }
.sim-options.cols-3{ grid-template-columns:repeat(3,1fr); }
.sim-option{
  border:1px solid var(--line-faint);
  background:var(--ink);
  padding:20px 20px;
  text-align:left;
  position:relative;
  transition:border-color .3s ease, background .3s ease, transform .3s var(--ease-out);
}
.sim-option:hover{ border-color:var(--gold-deep); background:var(--ink-3); transform:translateY(-2px); }
.sim-option.selected{ border-color:var(--gold); background:var(--ink-panel); }
.sim-option.selected::after{
  content:"✓"; position:absolute; top:14px; right:16px;
  color:var(--gold); font-size:13px;
}
.sim-option-title{
  font-family:var(--display); font-size:19px; text-transform:uppercase;
  color:var(--cream); line-height:1.05; margin-bottom:7px; padding-right:22px;
}
.sim-option-sub{ font-family:var(--mono); font-size:10.5px; color:var(--cream-faint); letter-spacing:.04em; line-height:1.5; }
.sim-option-meta{
  font-family:var(--mono); font-size:10.5px; color:var(--gold-deep);
  letter-spacing:.06em; margin-top:10px; display:flex; gap:12px; flex-wrap:wrap;
}
.sim-option.warn.selected{ border-color:var(--data-impuesto); }
.sim-option.warn.selected::after{ color:var(--data-impuesto); }

/* Aviso de categoría restringida */
.sim-warn{
  margin-top:18px; padding:16px 18px;
  border:1px solid rgba(181,112,90,.4);
  background:rgba(181,112,90,.07);
  font-size:13px; color:var(--cream-dim);
  display:none;
}
.sim-warn.visible{ display:block; }
.sim-warn b{ color:var(--data-impuesto); font-weight:500; }

/* ---------- Campos del simulador ---------- */
.sim-fields{ display:grid; gap:26px; }
.sim-fields .field{ margin-bottom:0; }
.sim-field-group{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.sim-dims{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.sim-hint{ font-family:var(--mono); font-size:10.5px; color:var(--cream-faint); margin-top:8px; letter-spacing:.03em; }
.sim-inline-readout{
  display:flex; gap:28px; flex-wrap:wrap;
  margin-top:8px; padding:16px 0;
  border-top:1px solid var(--line-faint);
}
.sim-readout-item{ display:flex; flex-direction:column; gap:5px; }
.sim-readout-label{ font-family:var(--mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--cream-faint); }
.sim-readout-value{ font-family:var(--mono); font-size:17px; color:var(--gold-soft); }

/* ---------- Toggle modalidad ---------- */
.sim-modal-compare{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:4px; }
.sim-modal-card{
  border:1px solid var(--line-faint); background:var(--ink);
  padding:24px 22px; text-align:left; position:relative;
  transition:border-color .3s ease, background .3s ease;
}
.sim-modal-card:hover{ border-color:var(--gold-deep); }
.sim-modal-card.selected{ border-color:var(--gold); background:var(--ink-panel); }
.sim-modal-icon{ width:30px; height:30px; stroke:var(--gold); fill:none; stroke-width:1.2; margin-bottom:16px; }
.sim-modal-card h4{ font-size:21px; color:var(--cream); margin-bottom:14px; }
.sim-modal-line{
  display:flex; justify-content:space-between; gap:12px;
  font-family:var(--mono); font-size:11px; color:var(--cream-dim);
  padding:7px 0; border-top:1px solid var(--line-faint);
}
.sim-modal-line b{ color:var(--gold-soft); font-weight:500; }
.sim-modal-badge{
  position:absolute; top:-1px; right:-1px;
  background:var(--gold); color:var(--ink);
  font-family:var(--mono); font-size:9px; letter-spacing:.08em;
  padding:4px 10px; text-transform:uppercase;
}

/* ---------- Navegación del wizard ---------- */
.sim-nav{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  margin-top:auto; padding-top:32px;
}
.sim-nav .btn[disabled]{ opacity:.3; pointer-events:none; }

/* ---------- Consola en vivo (columna derecha) ---------- */
.sim-console{
  background:var(--ink);
  border-left:1px solid var(--line-faint);
  padding:36px 32px;
  display:flex; flex-direction:column; gap:28px;
  position:sticky; top:calc(var(--header-h) + 8px); align-self:start;
}
.sim-console-head{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cream-faint);
  padding-bottom:16px; border-bottom:1px solid var(--line-faint);
}
.sim-live-dot{ display:inline-flex; align-items:center; gap:7px; color:var(--gold); }
.sim-live-dot::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--gold);
  animation:livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.8);} }

/* Total grande en vivo */
.sim-total-block{ display:flex; flex-direction:column; gap:6px; }
.sim-total-label{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--cream-faint); }
.sim-total-value{
  font-family:var(--display); font-size:clamp(44px,5vw,62px);
  color:var(--gold); line-height:1;
}
.sim-total-value small{ font-size:.42em; color:var(--cream-faint); margin-right:6px; vertical-align:top; }
.sim-total-value.is-empty{ font-family:var(--mono); font-size:30px; color:var(--cream-faint); }
.sim-total-value.is-empty small{ font-size:1em; vertical-align:baseline; margin-right:2px; }
.sim-total-note{ font-family:var(--mono); font-size:10px; color:var(--cream-faint); letter-spacing:.03em; }

/* Visualizador de contenedor */
.sim-container-viz{ display:flex; flex-direction:column; gap:14px; }
.sim-viz-head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--cream-faint);
}
.sim-viz-head b{ color:var(--gold-soft); font-size:12px; letter-spacing:.04em; }
.container-svg{ width:100%; height:auto; }
.container-fill{ transition:width .8s var(--ease-out); }
.container-mode{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.05em;
  color:var(--cream-dim); display:flex; align-items:center; gap:8px;
}
.container-mode b{ color:var(--gold); font-weight:500; }

/* Resumen de manifiesto */
.sim-manifest{ display:grid; gap:0; }
.sim-manifest-row{
  display:flex; justify-content:space-between; gap:14px;
  font-family:var(--mono); font-size:11px; color:var(--cream-faint);
  padding:9px 0; border-top:1px solid var(--line-faint);
}
.sim-manifest-row b{ color:var(--cream); font-weight:400; text-align:right; }
.sim-manifest-row.empty b{ color:var(--cream-faint); }

/* ---------- Resultado ---------- */
.sim-result-hero{
  border:1px solid var(--line);
  background:var(--ink-panel);
  padding:38px 34px;
  margin-bottom:34px;
  position:relative; overflow:hidden;
}
.sim-result-hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 100% 0%, rgba(201,162,74,.14), transparent 60%);
  pointer-events:none;
}
.sim-result-hero > *{ position:relative; z-index:2; }
.sim-reveal-line{ font-size:15px; color:var(--cream-dim); margin-bottom:16px; }
.sim-reveal-line b{ color:var(--cream); font-weight:500; }
.sim-reveal-big{
  font-family:var(--display); font-size:clamp(38px,5vw,58px);
  color:var(--gold); line-height:1; margin-bottom:14px;
}
.sim-rango{
  font-family:var(--mono); font-size:11.5px; line-height:1.7;
  color:var(--cream-faint); letter-spacing:.03em;
  margin-bottom:18px; max-width:52ch;
}
.sim-rango b{ color:var(--gold-soft); font-weight:400; }

/* Tramo cotizado por viaje: se marca para no dar falsa precisión */
.wf-row.variable .wf-value{ color:var(--cream-faint); }
.wf-row.variable .wf-label{ border-left:2px solid var(--data-tramite); padding-left:8px; margin-left:-10px; }

.sim-multiplier{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  color:var(--data-impuesto);
  border:1px solid rgba(181,112,90,.4);
  padding:8px 14px;
}

/* Cascada de costos */
.sim-waterfall{ display:grid; gap:2px; margin-bottom:14px; }
.wf-row{
  display:grid; grid-template-columns:190px 1fr 120px;
  align-items:center; gap:16px;
  padding:11px 0;
  border-bottom:1px solid var(--line-faint);
}
.wf-label{ font-family:var(--mono); font-size:11.5px; color:var(--cream-dim); letter-spacing:.03em; }
.wf-label small{ display:block; color:var(--cream-faint); font-size:9.5px; margin-top:3px; letter-spacing:.06em; }
.wf-bar-track{ height:9px; background:var(--line-faint); position:relative; overflow:hidden; }
.wf-bar{
  height:100%; width:0;
  transition:width 1s var(--ease-out);
}
.wf-value{ font-family:var(--mono); font-size:13px; color:var(--cream); text-align:right; }
.wf-row.total{ border-bottom:none; border-top:1px solid var(--gold); margin-top:10px; padding-top:20px; }
.wf-row.total .wf-label{ font-family:var(--display); font-size:19px; text-transform:uppercase; color:var(--cream); letter-spacing:.02em; }
.wf-row.total .wf-value{ font-family:var(--display); font-size:27px; color:var(--gold); }
.wf-row.subtotal .wf-label{ color:var(--cream); }
.wf-row.subtotal .wf-value{ color:var(--gold-soft); }

/* Encabezado de grupo (el flete y sus tramos) */
.wf-row.encabezado{ border-bottom:none; padding:22px 0 6px; }
.wf-row.encabezado .wf-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold);
}
.wf-row.encabezado .wf-label small{ text-transform:none; letter-spacing:.04em; color:var(--cream-faint); }
/* Tramos: sangrados y con una guía a la izquierda */
.wf-row.sub{ position:relative; padding-left:18px; }
.wf-row.sub::before{
  content:""; position:absolute; left:4px; top:0; bottom:0;
  width:1px; background:var(--line-faint);
}
.wf-row.sub .wf-label{ font-size:11px; color:var(--cream-faint); }
.wf-row.sub .wf-value{ font-size:12px; color:var(--cream-dim); }

/* Línea de tiempo */
.sim-timeline{ display:grid; gap:0; margin-top:10px; }
.tl-item{
  display:grid; grid-template-columns:104px 1fr;
  gap:20px; padding:16px 0;
  border-bottom:1px solid var(--line-faint);
  position:relative;
}
.tl-date{ font-family:var(--mono); font-size:11px; color:var(--gold); letter-spacing:.04em; padding-top:2px; }
.tl-body h5{ font-family:var(--display); font-size:17px; text-transform:uppercase; color:var(--cream); margin-bottom:4px; }
.tl-body p{ font-size:12.5px; color:var(--cream-faint); }
.tl-item.final .tl-date{ color:var(--gold-soft); }
.tl-item.final h5{ color:var(--gold-soft); }

/* Grid de resultado */
.sim-result-grid{ display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:34px; }
.sim-result-block h4{
  font-family:var(--mono); font-size:10.5px; font-weight:400; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin-bottom:20px;
  padding-bottom:12px; border-bottom:1px solid var(--line-faint);
}
.sim-unit-cost{
  display:flex; align-items:baseline; gap:12px;
  font-family:var(--display); font-size:34px; color:var(--cream);
}
.sim-unit-cost span{ font-family:var(--mono); font-size:11px; color:var(--cream-faint); letter-spacing:.08em; text-transform:uppercase; }

.sim-disclaimer{
  font-family:var(--mono); font-size:10.5px; color:var(--cream-faint);
  line-height:1.7; margin-top:30px; padding-top:22px;
  border-top:1px solid var(--line-faint);
}
.sim-result-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:34px; }

/* Envío del resultado */
.sim-send-panel{
  margin-top:34px; padding:32px 30px;
  border:1px solid var(--line); background:var(--ink-panel);
  display:none;
}
.sim-send-panel.visible{ display:block; animation:simIn .5s var(--ease-out); }
.sim-send-panel h4{ font-family:var(--display); font-size:24px; text-transform:uppercase; color:var(--cream); margin-bottom:10px; }
.sim-send-panel p{ font-size:13.5px; color:var(--cream-dim); margin-bottom:24px; max-width:56ch; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .sim-shell{ grid-template-columns:1fr; }
  .sim-console{ border-left:none; border-top:1px solid var(--line-faint); position:static; }
  .sim-result-grid{ grid-template-columns:1fr; gap:28px; }
}
@media (max-width:860px){
  .sim-main{ padding:30px 22px 28px; min-height:auto; }
  .sim-console{ padding:28px 22px; }
  .sim-rail{ overflow-x:auto; scrollbar-width:none; }
  .sim-rail::-webkit-scrollbar{ display:none; }
  .sim-rail-item{ flex:0 0 auto; min-width:145px; }
  .sim-options.cols-2,.sim-options.cols-3{ grid-template-columns:1fr; }
  .sim-field-group{ grid-template-columns:1fr; gap:22px; }
  .sim-modal-compare{ grid-template-columns:1fr; }
  .wf-row{ grid-template-columns:1fr 92px; }
  .wf-bar-track,.wf-spacer{ display:none; }
  .tl-item{ grid-template-columns:86px 1fr; gap:14px; }
  .sim-step-head h3{ font-size:25px; }
}