/* ==========================================================
   OSLO IMPOR-TEC · COTIZADOR DE ENVÍOS POTOSINOS · V5
   ========================================================== */

.oslo-cotizador-page {
  background: #f5f7f4;
  padding: 1px 0 80px;
}

.oslo-cotizador {
  --oslo-green: #8ed420;
  --oslo-green-dark: #6da816;
  --oslo-dark: #111511;
  --oslo-dark-2: #1a211a;
  --oslo-gray: #68716a;
  --oslo-border: #e1e7df;
  --oslo-soft: #f4f7f2;
  max-width: 1180px;
  margin: 54px auto 0;
  padding: 0 24px;
  color: #171a17;
}

.oslo-cotizador,
.oslo-cotizador * { box-sizing: border-box; }

.oslo-cotizador__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 28px;
}

.oslo-cotizador__eyebrow {
  display: inline-block;
  margin-bottom: 9px;
  color: var(--oslo-green-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
}

.oslo-cotizador h1 {
  margin: 0 0 10px;
  color: #151815;
  font-size: clamp(36px, 5vw, 56px);
  line-height: .98;
  letter-spacing: -.025em;
}

.oslo-cotizador__head p {
  max-width: 760px;
  margin: 0;
  color: var(--oslo-gray);
  font-size: 16px;
  line-height: 1.65;
}

.oslo-cotizador__head-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid var(--oslo-border);
  border-radius: 999px;
  background: #fff;
  color: #424a42;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.oslo-cotizador__head-badge i { color: var(--oslo-green-dark); font-size: 18px; }

.oslo-cotizador__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(350px, .72fr);
  gap: 24px;
  align-items: start;
}

.oslo-cotizador__form-card,
.oslo-cotizador__result { border-radius: 22px; overflow: hidden; }

.oslo-cotizador__form-card {
  border: 1px solid var(--oslo-border);
  background: #fff;
  box-shadow: 0 12px 34px rgba(20,30,20,.055);
}

.oslo-form-title {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 21px 28px;
  border-bottom: 1px solid var(--oslo-border);
  background: #fbfcfa;
}

.oslo-form-title__number {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: var(--oslo-dark);
  color: var(--oslo-green);
  font-size: 15px;
  font-weight: 800;
}

.oslo-form-title strong { display:block; font-size:15px; line-height:1.2; }
.oslo-form-title small { display:block; margin-top:3px; color:#818981; font-size:11px; }

.oslo-cotizador__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 28px;
}

.oslo-field { min-width:0; }
.oslo-field--full { grid-column:1 / -1; }

.oslo-field > label:first-child {
  display:block;
  margin-bottom:8px;
  color:#292e29;
  font-size:13px;
  font-weight:700;
}

.oslo-field input[type="number"],
.oslo-field select {
  width:100%;
  height:50px;
  border:1px solid #d7ded5;
  border-radius:10px;
  outline:none;
  background:#fff;
  color:#171a17;
  font:inherit;
  transition:border-color .2s,box-shadow .2s;
}

.oslo-field input[type="number"] { padding:0 14px; }
.oslo-field select { padding:0 40px 0 14px; cursor:pointer; }
.oslo-field input[type="number"]:focus,
.oslo-field select:focus { border-color:var(--oslo-green); box-shadow:0 0 0 3px rgba(142,212,32,.14); }

.oslo-field__hint {
  display:block;
  margin-top:7px;
  color:#818981;
  font-size:11px;
  line-height:1.5;
}

/* ==========================================================
   PAQUETES
   ========================================================== */

.oslo-packages {
  padding: 18px;
  border: 1px solid #e1e7df;
  border-radius: 16px;
  background: #fbfcfa;
}

.oslo-packages__header {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:13px;
}

.oslo-packages__header label {
  display:block;
  margin:0 0 4px;
  color:#292e29;
  font-size:13px;
  font-weight:800;
}

.oslo-packages__header small {
  color:#818981;
  font-size:11px;
}

.oslo-packages__legend { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.oslo-packages__legend span {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  border-radius:7px;
  background:#eef5e9;
  color:#56820e;
  font-size:10px;
  font-weight:900;
}
.oslo-packages__legend em { color:#71806e; font-style:normal; font-weight:600; }

.oslo-packages__table-head,
.oslo-package-row {
  display:grid;
  grid-template-columns: minmax(105px, .8fr) minmax(130px, 1fr) minmax(130px, 1fr) minmax(135px, 1.05fr) 34px;
  gap:10px;
  align-items:center;
}

.oslo-packages__table-head {
  padding:0 9px 7px;
  color:#7b847b;
  font-size:10px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.oslo-packages__list { display:grid; gap:8px; }

.oslo-package-row {
  min-height:58px;
  padding:8px 9px;
  border:1px solid #e1e7df;
  border-radius:11px;
  background:#fff;
  transition:border-color .2s,box-shadow .2s;
}

.oslo-package-row:focus-within {
  border-color:#b8d98c;
  box-shadow:0 0 0 3px rgba(142,212,32,.08);
}

.oslo-package-name { min-width:0; }
.oslo-package-number {
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 9px;
  border-radius:7px;
  background:#111511;
  color:#8ed420;
  font-size:10px;
  font-weight:900;
  letter-spacing:.05em;
}

.oslo-package-input {
  display:flex;
  align-items:center;
  height:40px;
  overflow:hidden;
  border:1px solid #d7ded5;
  border-radius:8px;
  background:#fff;
}

.oslo-package-input:focus-within {
  border-color:var(--oslo-green);
  box-shadow:0 0 0 3px rgba(142,212,32,.12);
}

.oslo-package-input > span {
  flex:0 0 auto;
  padding:0 9px;
  color:#747c74;
  font-size:12px;
  font-weight:800;
}

.oslo-package-input input {
  width:100% !important;
  height:38px !important;
  padding:0 9px !important;
  border:0 !important;
  border-radius:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  font-size:13px !important;
}

.oslo-package-input--weight input { padding-left:6px !important; }

.oslo-package-cost {
  min-height:40px;
  display:flex;
  align-items:center;
  padding:0 10px;
  border-radius:8px;
  background:#f0f4ed;
  color:#4f5b4f;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.oslo-package-cost strong { margin-right:5px; color:#70aa11; }
.oslo-package-cost[data-cost-state="d"] { background:#edf4e8; color:#315a0c; }
.oslo-package-cost[data-cost-state="e"] { background:#f2f6ed; color:#52710f; }
.oslo-package-cost[data-cost-state="warning"] { background:#fff5df; color:#946414; }
.oslo-package-cost[data-cost-state="empty"] { color:#a1a8a1; }

.oslo-remove-package {
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#929a92;
  cursor:pointer;
  transition:background .2s,color .2s;
}
.oslo-remove-package:hover { background:#fff0ef; color:#d6312b; }

.oslo-add-package {
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:12px;
  padding:9px 12px;
  border:1px dashed #b8c4b4;
  border-radius:9px;
  background:#fff;
  color:#4f6f17;
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;
}
.oslo-add-package:hover { border-color:var(--oslo-green); background:#f6faef; color:#4d7809; }

.oslo-package-warning {
  display:block;
  margin-top:10px;
  padding:9px 11px;
  border-radius:8px;
  background:#fff5df;
  color:#8b621c;
  font-size:11px;
  line-height:1.45;
}
.oslo-package-warning.is-hidden { display:none; }

/* ==========================================================
   TOTALES
   ========================================================== */

.oslo-total-weight-box {
  display:flex;
  min-height:50px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 14px;
  border:1px solid #dfe6dc;
  border-radius:10px;
  background:#f8faf7;
}
.oslo-total-weight-box strong { color:#111511; font-size:16px; }
.oslo-total-weight-box span { color:#879087; font-size:10px; text-align:right; }
.oslo-total-weight-box--value strong { color:#5c8d11; }

.oslo-radio-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.oslo-choice { position:relative; display:block !important; margin:0 !important; }
.oslo-choice input { position:absolute; width:1px; height:1px; opacity:0; }
.oslo-choice span {
  display:flex;
  min-height:74px;
  flex-direction:column;
  justify-content:center;
  padding:0 15px;
  border:1px solid #d7ded5;
  border-radius:11px;
  background:#fff;
  cursor:pointer;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.oslo-choice strong { color:#202620; font-size:13px; }
.oslo-choice strong i { margin-right:5px; color:#78b516; }
.oslo-choice small { margin-top:4px; color:#8a928a; font-size:10px; }
.oslo-choice input:checked + span { border-color:var(--oslo-green); background:#f7faef; box-shadow:0 0 0 2px rgba(142,212,32,.08); }

.oslo-switch-wrap { display:flex; align-items:center; gap:11px; min-height:50px; color:#2b312b; font-size:13px; font-weight:700; }
.oslo-switch { position:relative; width:48px; height:28px; display:block; margin:0 !important; }
.oslo-switch input { position:absolute; opacity:0; width:1px; height:1px; }
.oslo-switch span { position:absolute; inset:0; border-radius:999px; background:#d5dcd3; cursor:pointer; transition:.2s; }
.oslo-switch span:after { content:""; position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.18); transition:.2s; }
.oslo-switch input:checked + span { background:var(--oslo-green); }
.oslo-switch input:checked + span:after { transform:translateX(20px); }

.oslo-form-actions { grid-column:1 / -1; display:grid; grid-template-columns:1fr auto; gap:12px; margin-top:2px; }
.oslo-cotizador__button,
.oslo-cotizador__reset { min-height:53px; border-radius:11px; font:inherit; font-size:13px; font-weight:800; cursor:pointer; transition:transform .15s,background .2s,border-color .2s; }
.oslo-cotizador__button { border:1px solid var(--oslo-dark); background:var(--oslo-dark); color:#fff; }
.oslo-cotizador__button i { margin-right:7px; color:var(--oslo-green); }
.oslo-cotizador__button:hover { transform:translateY(-1px); background:#1b221b; }
.oslo-cotizador__reset { padding:0 18px; border:1px solid #d7ded5; background:#fff; color:#4c554c; }
.oslo-cotizador__reset:hover { border-color:#aeb9aa; }

/* ==========================================================
   RESULTADO
   ========================================================== */

.oslo-cotizador__result { padding:28px; background:#111711; color:#fff; box-shadow:0 18px 42px rgba(16,24,16,.15); }
.oslo-result__top { display:flex; justify-content:space-between; gap:15px; }
.oslo-result__label { color:#8ed420; font-size:10px; font-weight:900; letter-spacing:.16em; }
.oslo-result__route { display:flex; align-items:center; gap:8px; margin-top:13px; font-size:20px; font-weight:800; }
.oslo-result__route b { color:#8ed420; font-weight:500; }
.oslo-result__zone { margin-top:5px; color:#7e887e; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.oslo-result__truck { display:grid; width:44px; height:44px; place-items:center; border:1px solid rgba(142,212,32,.28); border-radius:12px; background:rgba(142,212,32,.07); color:#8ed420; font-size:20px; }
.oslo-result__status { margin-top:24px; padding:10px 12px; border:1px solid rgba(255,255,255,.08); border-radius:9px; background:rgba(255,255,255,.04); color:#9ca59c; font-size:10px; line-height:1.45; }
.oslo-result__rows { margin-top:18px; }
.oslo-result__rows > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.oslo-result__rows span { color:#929b92; font-size:11px; }
.oslo-result__rows strong { color:#f3f6f1; font-size:12px; text-align:right; }
.oslo-result__total { display:flex; align-items:flex-end; justify-content:space-between; gap:15px; padding:20px 0 17px; border-bottom:1px solid rgba(142,212,32,.35); }
.oslo-result__total span { color:#b1b8b1; font-size:11px; }
.oslo-result__total strong { color:#fff; font-size:31px; line-height:1; letter-spacing:-.03em; }
.oslo-result__notice { margin-top:14px; padding:12px; border-radius:9px; background:rgba(255,255,255,.07); color:#899389; font-size:9px; line-height:1.55; }
.oslo-result__rows .is-hidden { display:none; }

.oslo-cotizador__legal { display:flex; gap:14px; margin-top:18px; padding:18px 20px; border:1px solid #e1e7df; border-radius:16px; background:#fff; color:#616961; }
.oslo-legal-icon { display:grid; flex:0 0 34px; width:34px; height:34px; place-items:center; border-radius:9px; background:#eff7e8; color:#6eaa13; }
.oslo-cotizador__legal strong { display:block; margin-bottom:6px; color:#252b25; font-size:12px; }
.oslo-cotizador__legal ul { margin:0; padding-left:17px; }
.oslo-cotizador__legal li { margin:4px 0; font-size:10px; line-height:1.5; }

@media (max-width: 960px) {
  .oslo-cotizador__grid { grid-template-columns:1fr; }
  .oslo-cotizador__result { order:-1; }
}

@media (max-width: 760px) {
  .oslo-cotizador { margin-top:34px; padding:0 16px; }
  .oslo-cotizador__head { align-items:flex-start; flex-direction:column; }
  .oslo-cotizador__head-badge { display:none; }
  .oslo-cotizador__form { grid-template-columns:1fr; padding:20px; }
  .oslo-field--full { grid-column:auto; }
  .oslo-packages { padding:12px; }
  .oslo-packages__header { align-items:flex-start; flex-direction:column; }
  .oslo-packages__legend { justify-content:flex-start; }
  .oslo-packages__table-head { display:none; }
  .oslo-package-row { grid-template-columns:1fr 1fr; padding:11px; }
  .oslo-package-name { grid-column:1 / -1; display:flex; justify-content:space-between; }
  .oslo-package-input--weight,
  .oslo-package-input--value { width:100%; }
  .oslo-package-cost { min-height:40px; }
  .oslo-remove-package { justify-self:end; }
  .oslo-radio-grid { grid-template-columns:1fr; }
  .oslo-form-actions { grid-template-columns:1fr; }
  .oslo-cotizador__result { padding:22px; }
  .oslo-result__total strong { font-size:26px; }
}

@media (max-width: 430px) {
  .oslo-package-row { grid-template-columns:1fr; }
  .oslo-package-name { grid-column:auto; }
  .oslo-package-cost { grid-column:1 / -1; }
  .oslo-remove-package { position:absolute; right:18px; margin-top:-39px; }
  .oslo-total-weight-box { align-items:flex-start; flex-direction:column; justify-content:center; padding:9px 14px; gap:2px; }
  .oslo-total-weight-box span { text-align:left; }
}