/*
 * ═══════════════════════════════════════════════
 *  FREIGHTOR — Styles
 * ═══════════════════════════════════════════════
 *  Editorial logistics quoter
 *  Stack: Vue 2 (CDN) — no build step
 * ═══════════════════════════════════════════════
 */

:root{
  --ink:#0b1410;--ink-soft:#1f2c25;--bone:#faf9f5;--paper:#f5f3eb;
  --line:rgba(11,20,16,0.12);--line-soft:rgba(11,20,16,0.06);
  --muted:#5a6a60;--dim:#97a39a;
  --leaf-50:#f0f6e9;--leaf-100:#dcecc6;--leaf-300:#98b873;--leaf-500:#5d8033;--leaf-700:#3a5519;--leaf-900:#1c2c0d;
  --amber:#b8722a;--amber-bg:#fbeed4;--rust:#a23e1c;
  --blue-50:#eff2fb;--blue-300:#7c93d8;--blue-700:#3a52a6;
  --display:'Fraunces',Georgia,serif;
  --sans:'Inter Tight',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --r:10px;--r-lg:16px;--r-xl:24px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bone);color:var(--ink);min-height:100vh;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}

[v-cloak]{display:none}

.page{min-height:100vh;animation:fade .35s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}

.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(250,249,245,0.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-soft);padding:0 32px;height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none;color:var(--ink)}
.brand-mark{width:34px;height:34px;background:var(--ink);border-radius:9px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.brand-mark::after{content:'';position:absolute;width:18px;height:18px;background:var(--leaf-300);border-radius:50%;top:-4px;right:-4px;filter:blur(2px)}
.brand-mark svg{position:relative;z-index:1}
.brand-name{font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:-0.02em}
.brand-name em{font-style:italic;font-weight:400;color:var(--leaf-700)}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-link{font-size:14px;color:var(--muted);text-decoration:none;font-weight:500;transition:color .15s;cursor:pointer}
.nav-link:hover{color:var(--ink)}
.nav-cta{display:flex;gap:10px;align-items:center}

.lang-switch{display:inline-flex;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:50px;padding:3px;font-family:var(--mono);font-size:10px;font-weight:600;height:32px}
.lang-switch button{background:transparent;border:none;padding:0 10px;height:100%;border-radius:50px;cursor:pointer;color:var(--muted);transition:all .15s;font:inherit;letter-spacing:0.05em}
.lang-switch button.active{background:var(--ink);color:var(--bone)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:var(--r);font-family:var(--sans);font-size:14px;font-weight:600;border:none;cursor:pointer;text-decoration:none;transition:all .18s cubic-bezier(.4,0,.2,1);letter-spacing:-0.005em}
.btn-ink{background:var(--ink);color:var(--bone)}
.btn-ink:hover{background:var(--ink-soft);transform:translateY(-1px);box-shadow:0 8px 24px rgba(11,20,16,0.18)}
.btn-leaf{background:var(--leaf-700);color:var(--bone)}
.btn-leaf:hover{background:var(--leaf-900);transform:translateY(-1px);box-shadow:0 8px 24px rgba(58,85,25,0.25)}
.btn-bone{background:var(--bone);color:var(--ink);border:1px solid var(--line)}
.btn-bone:hover{background:var(--paper);border-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{color:var(--ink)}
.btn-lg{padding:14px 24px;font-size:15px;border-radius:12px}
.btn-sm{padding:7px 12px;font-size:12px;border-radius:8px}
.btn-arrow{transition:transform .2s;display:inline-block}
.btn:hover .btn-arrow{transform:translateX(3px)}

/* HERO */
.hero{padding:140px 32px 80px;max-width:1280px;margin:0 auto;position:relative}
.hero-frame{display:grid;grid-template-columns:1.1fr 0.9fr;gap:80px;align-items:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--leaf-700);margin-bottom:24px}
.hero-eyebrow-line{width:32px;height:1px;background:var(--leaf-500)}
.hero-h1{font-family:var(--display);font-size:clamp(48px,6.5vw,88px);font-weight:400;line-height:0.96;letter-spacing:-0.045em;color:var(--ink);margin-bottom:32px}
.hero-h1 em{font-style:italic;color:var(--leaf-700)}
.hero-sub{font-size:18px;line-height:1.6;color:var(--muted);max-width:480px;margin-bottom:40px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:48px}
.hero-meta{display:flex;gap:32px;font-size:13px;color:var(--muted);font-weight:500;flex-wrap:wrap}
.hero-meta-item{display:flex;align-items:center;gap:8px}
.hero-meta-dot{width:6px;height:6px;border-radius:50%;background:var(--leaf-500);animation:dot-pulse 2s infinite}
@keyframes dot-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.85)}}

.hero-card{background:var(--ink);color:var(--bone);border-radius:var(--r-xl);padding:32px;position:relative;overflow:hidden;transform:rotate(1.5deg);box-shadow:0 32px 80px rgba(11,20,16,0.18)}
.hero-card::before{content:'';position:absolute;top:-100px;right:-100px;width:300px;height:300px;background:radial-gradient(circle,rgba(152,184,115,0.25) 0%,transparent 70%);pointer-events:none}
.hero-card-eyebrow{font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:var(--leaf-300);font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.hero-card-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--leaf-300);box-shadow:0 0 8px var(--leaf-300);animation:dot-pulse 1.5s infinite}
.hero-card-route{font-family:var(--display);font-size:22px;font-weight:400;letter-spacing:-0.02em;line-height:1.2;margin-bottom:24px}
.hero-card-route em{font-style:italic;color:var(--leaf-300)}
.hero-card-rows{border-top:1px solid rgba(250,249,245,0.1);padding-top:16px}
.hero-card-row{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;color:rgba(250,249,245,0.7)}
.hero-card-row .val{font-family:var(--mono);color:var(--bone);font-weight:500}
.hero-card-total{display:flex;align-items:flex-end;justify-content:space-between;margin-top:20px;padding-top:20px;border-top:1px solid rgba(152,184,115,0.3)}
.hero-card-total-lbl{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:rgba(250,249,245,0.5);font-weight:600}
.hero-card-total-val{font-family:var(--display);font-size:42px;font-weight:500;color:var(--leaf-300);letter-spacing:-0.03em;line-height:1}
.hero-card-total-usd{font-family:var(--mono);font-size:12px;color:rgba(250,249,245,0.5);margin-top:4px}

.values{padding:100px 32px;background:var(--paper);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.values-inner{max-width:1280px;margin:0 auto}
.section-eyebrow{font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--leaf-700);margin-bottom:16px}
.section-h2{font-family:var(--display);font-size:clamp(36px,5vw,56px);font-weight:400;letter-spacing:-0.035em;line-height:1.05;margin-bottom:24px;max-width:720px}
.section-h2 em{font-style:italic;color:var(--leaf-700)}
.section-sub{font-size:17px;color:var(--muted);line-height:1.65;max-width:540px;margin-bottom:64px}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.value-cell{background:var(--bone);padding:32px;transition:background .25s}
.value-cell:hover{background:var(--paper)}
.value-num{font-family:var(--display);font-size:14px;color:var(--leaf-700);margin-bottom:48px;font-weight:500}
.value-h3{font-family:var(--display);font-size:24px;font-weight:500;letter-spacing:-0.02em;margin-bottom:12px;line-height:1.2}
.value-h3 em{font-style:italic;color:var(--leaf-700)}
.value-desc{font-size:14px;color:var(--muted);line-height:1.65}

.modes-strip{padding:80px 32px;background:var(--bone);border-bottom:1px solid var(--line-soft)}
.modes-strip-inner{max-width:1280px;margin:0 auto}
.modes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px}
.mode-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px;text-align:left;transition:all .25s}
.mode-card:hover{background:var(--bone);transform:translateY(-3px);box-shadow:0 16px 40px rgba(11,20,16,0.06)}
.mode-flags{font-size:22px;margin-bottom:14px;letter-spacing:2px}
.mode-name{font-family:var(--display);font-size:20px;font-weight:500;letter-spacing:-0.02em;margin-bottom:6px}
.mode-name em{font-style:italic;color:var(--leaf-700)}
.mode-meta{font-size:12px;color:var(--muted);line-height:1.6}

.pricing{padding:120px 32px;background:var(--bone)}
.pricing-inner{max-width:1280px;margin:0 auto}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.plan{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:36px 32px;display:flex;flex-direction:column;position:relative;transition:all .25s}
.plan:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(11,20,16,0.08)}
.plan.featured{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.plan.featured .plan-desc,.plan.featured .plan-feature{color:rgba(250,249,245,0.7)}
.plan.featured::before{content:attr(data-tag);position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--leaf-300);color:var(--leaf-900);font-size:11px;font-weight:600;letter-spacing:0.05em;padding:5px 14px;border-radius:50px}
.plan-name{font-family:var(--display);font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:8px;color:var(--leaf-700)}
.plan.featured .plan-name{color:var(--leaf-300)}
.plan-price{font-family:var(--display);font-size:64px;font-weight:400;letter-spacing:-0.045em;line-height:1;margin-bottom:4px}
.plan-price sup{font-size:24px;vertical-align:super;font-weight:500}
.plan-price-mo{font-size:14px;color:var(--muted);font-family:var(--sans);font-weight:500;margin-bottom:24px}
.plan.featured .plan-price-mo{color:rgba(250,249,245,0.5)}
.plan-desc{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:24px}
.plan-features{list-style:none;flex:1;margin-bottom:32px}
.plan-feature{display:flex;align-items:flex-start;gap:10px;font-size:14px;padding:6px 0}
.plan-feature::before{content:'';width:14px;height:14px;border-radius:50%;background:var(--leaf-100);flex-shrink:0;margin-top:4px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3.5 3.5L13 4' stroke='%233a5519' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-size:10px;background-position:center;background-repeat:no-repeat}
.plan.featured .plan-feature::before{background-color:var(--leaf-700);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3.5 3.5L13 4' stroke='%23dcecc6' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.plan-feature.no{color:var(--dim)}
.plan-feature.no::before{background-color:transparent;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 4l8 8M12 4l-8 8' stroke='%2397a39a' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");border:1px solid var(--line)}

.footer{background:var(--ink);color:var(--bone);padding:80px 32px 40px}
.footer-inner{max-width:1280px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(250,249,245,0.1);margin-bottom:32px}
.footer-brand-name{font-family:var(--display);font-size:28px;letter-spacing:-0.02em;font-weight:500;color:var(--bone);margin-bottom:12px}
.footer-tag{font-size:14px;color:rgba(250,249,245,0.5);line-height:1.6;max-width:280px}
.footer-col-title{font-family:var(--display);font-size:13px;font-weight:500;color:var(--leaf-300);margin-bottom:16px}
.footer-link{display:block;color:rgba(250,249,245,0.7);text-decoration:none;font-size:14px;padding:5px 0;transition:color .15s;cursor:pointer}
.footer-link:hover{color:var(--bone)}
.footer-copy{font-size:12px;color:rgba(250,249,245,0.4);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}

.app-frame{max-width:1100px;margin:0 auto;padding:96px 32px 64px}
.app-eyebrow{font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--leaf-700);margin-bottom:16px}
.app-h1{font-family:var(--display);font-size:clamp(36px,5vw,56px);font-weight:400;letter-spacing:-0.04em;line-height:1.02;margin-bottom:20px}
.app-h1 em{font-style:italic;color:var(--leaf-700)}
.app-intro{font-size:17px;color:var(--muted);line-height:1.6;max-width:600px;margin-bottom:40px}

.mode-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:32px}
.mode-pick{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r);padding:14px 12px;cursor:pointer;transition:all .15s;text-align:left}
.mode-pick:hover{border-color:var(--leaf-500);background:var(--bone)}
.mode-pick.selected{border-color:var(--ink);background:var(--ink);color:var(--bone)}
.mode-pick-flags{font-size:18px;margin-bottom:6px;letter-spacing:1px}
.mode-pick-name{font-family:var(--display);font-size:14px;font-weight:500;letter-spacing:-0.01em;line-height:1.15}
.mode-pick.selected .mode-pick-name{color:var(--bone)}
.mode-pick-name em{font-style:italic;color:var(--leaf-700)}
.mode-pick.selected .mode-pick-name em{color:var(--leaf-300)}
.mode-pick-currency{font-size:10px;color:var(--dim);font-family:var(--mono);margin-top:4px;letter-spacing:0.04em}
.mode-pick.selected .mode-pick-currency{color:rgba(250,249,245,0.5)}

.quote-layout{display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:flex-start}
.quote-form{display:flex;flex-direction:column;gap:32px}

.q-section{background:var(--bone);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 32px}
.q-section-head{display:flex;align-items:baseline;gap:14px;margin-bottom:24px}
.q-section-num{font-family:var(--display);font-size:14px;font-weight:500;color:var(--leaf-700);font-style:italic}
.q-section-title{font-family:var(--display);font-size:24px;font-weight:500;letter-spacing:-0.025em}

.q-row{display:grid;gap:18px;margin-bottom:18px}
.q-row:last-child{margin-bottom:0}
.q-row-2{grid-template-columns:1fr 1fr}
.q-row-3{grid-template-columns:1fr 1fr 1fr}

.q-field{display:flex;flex-direction:column;gap:6px}
.q-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted)}
.q-input,.q-select{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:13px 16px;font-family:var(--sans);font-size:15px;color:var(--ink);outline:none;transition:all .15s}
.q-input:focus,.q-select:focus{border-color:var(--leaf-500);background:var(--bone);box-shadow:0 0 0 4px rgba(93,128,51,0.12)}
.q-input::placeholder{color:var(--dim)}
.q-hint{font-size:12px;color:var(--dim);margin-top:2px}
.q-input-wrap{position:relative}
.q-input-suffix{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--dim);font-family:var(--mono);pointer-events:none;font-weight:500}
.q-input-wrap .q-input{padding-right:54px}

.unit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.unit-chip{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r);padding:16px 12px;text-align:center;cursor:pointer;transition:all .15s}
.unit-chip:hover{border-color:var(--leaf-500);background:var(--bone)}
.unit-chip.selected{border-color:var(--ink);background:var(--ink);color:var(--bone)}
.unit-chip-icon{font-size:24px;margin-bottom:6px;display:block;font-style:normal}
.unit-chip-name{font-family:var(--display);font-size:14px;font-weight:500;letter-spacing:-0.01em;margin-bottom:2px}
.unit-chip-meta{font-size:11px;color:var(--muted)}
.unit-chip.selected .unit-chip-meta{color:rgba(250,249,245,0.55)}

.toggle-wrap{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;transition:all .15s}
.toggle-wrap:hover{background:var(--bone);border-color:var(--leaf-500)}
.toggle{width:42px;height:24px;background:var(--line);border-radius:50px;position:relative;transition:background .2s;flex-shrink:0}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;background:var(--bone);border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(11,20,16,0.2)}
.toggle.on{background:var(--leaf-700)}
.toggle.on::after{transform:translateX(18px)}
.toggle-label{font-size:14px;color:var(--ink);font-weight:500;flex:1}
.toggle-label small{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:2px}

.gmaps-status{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--leaf-50);border:1px solid var(--leaf-100);border-radius:var(--r);font-size:13px;color:var(--leaf-700);margin-bottom:18px}
.gmaps-status-dot{width:8px;height:8px;border-radius:50%;background:var(--leaf-500);animation:dot-pulse 2s infinite;flex-shrink:0}
.gmaps-status.loading .gmaps-status-dot{background:var(--amber)}
.gmaps-status.error{background:#fbeae5;color:var(--rust);border-color:#f5cdc0}
.gmaps-status.error .gmaps-status-dot{background:var(--rust);animation:none}

.us-costs-badge{display:inline-flex;align-items:center;gap:6px;font-size:10px;padding:3px 9px;border-radius:50px;background:var(--blue-50);color:var(--blue-700);border:1px solid rgba(124,147,216,0.3);font-weight:600;font-family:var(--mono);letter-spacing:0.04em;margin-left:auto}
.border-badge{background:#fef0ec;color:var(--rust);border-color:#f5cdc0}

.preview{position:sticky;top:96px;background:var(--ink);color:var(--bone);border-radius:var(--r-xl);padding:32px;overflow:hidden}
.preview::before{content:'';position:absolute;top:-100px;right:-80px;width:280px;height:280px;background:radial-gradient(circle,rgba(152,184,115,0.18) 0%,transparent 70%);pointer-events:none}
.preview-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:0.14em;color:var(--leaf-300);font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:8px;position:relative}
.preview-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--leaf-300);box-shadow:0 0 8px var(--leaf-300);animation:dot-pulse 1.5s infinite}
.preview-route{font-family:var(--display);font-size:18px;font-weight:400;letter-spacing:-0.015em;line-height:1.25;margin-bottom:24px;color:var(--bone);min-height:48px;position:relative}
.preview-route em{font-style:italic;color:var(--leaf-300)}
.preview-route-empty{color:rgba(250,249,245,0.4);font-style:italic;font-weight:300}
.preview-rows{border-top:1px solid rgba(250,249,245,0.1);padding-top:16px;position:relative}
.preview-row{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;color:rgba(250,249,245,0.65)}
.preview-row .val{font-family:var(--mono);color:var(--bone);font-weight:500;font-variant-numeric:tabular-nums}
.preview-row .val.live::after{content:'';display:inline-block;width:5px;height:5px;background:var(--leaf-300);border-radius:50%;margin-left:6px;animation:dot-pulse 1.4s infinite;vertical-align:middle}
.preview-total{margin-top:20px;padding-top:24px;border-top:1px solid rgba(152,184,115,0.3);position:relative}
.preview-total-lbl{font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:rgba(250,249,245,0.55);font-weight:600;margin-bottom:6px}
.preview-total-val{font-family:var(--display);font-size:46px;font-weight:500;color:var(--leaf-300);letter-spacing:-0.04em;line-height:1;font-variant-numeric:tabular-nums}
.preview-total-alt{font-family:var(--mono);font-size:13px;color:rgba(250,249,245,0.5);margin-top:6px}
.preview-cta{margin-top:24px;width:100%;justify-content:center}
.preview-fx{margin-top:18px;font-size:11px;color:rgba(250,249,245,0.4);display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);position:relative}
.preview-fx-update{background:none;border:none;color:var(--leaf-300);font-size:11px;cursor:pointer;text-decoration:underline;font-family:var(--sans);font-weight:500}

.result-section{margin-top:48px;animation:slide-up .5s ease-out}
@keyframes slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.result-hero{background:var(--ink);color:var(--bone);border-radius:var(--r-xl);padding:48px;position:relative;overflow:hidden}
.result-hero::before{content:'';position:absolute;top:-150px;right:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(152,184,115,0.18) 0%,transparent 65%);pointer-events:none}
.result-hero-content{position:relative}
.result-folio{font-family:var(--mono);font-size:12px;color:var(--leaf-300);margin-bottom:8px;letter-spacing:0.04em}
.result-route{font-family:var(--display);font-size:32px;font-weight:400;letter-spacing:-0.025em;line-height:1.15;margin-bottom:32px}
.result-route em{font-style:italic;color:var(--leaf-300)}
.result-price-block{display:flex;align-items:flex-end;gap:24px;margin-bottom:8px;flex-wrap:wrap}
.result-price{font-family:var(--display);font-size:84px;font-weight:400;color:var(--bone);letter-spacing:-0.045em;line-height:0.95;font-variant-numeric:tabular-nums}
.result-price-alt{font-family:var(--mono);font-size:18px;color:var(--leaf-300);padding-bottom:8px}
.result-meta{font-size:14px;color:rgba(250,249,245,0.55);margin-bottom:32px}
.result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
.result-stat{background:rgba(250,249,245,0.05);border:1px solid rgba(250,249,245,0.1);border-radius:var(--r);padding:14px 16px}
.result-stat-lbl{font-size:10px;color:rgba(250,249,245,0.5);text-transform:uppercase;letter-spacing:0.08em;font-weight:600;margin-bottom:4px}
.result-stat-val{font-family:var(--mono);font-size:18px;font-weight:500;color:var(--bone);font-variant-numeric:tabular-nums}
.result-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.result-breakdown{margin-top:32px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px}
.breakdown-title{font-family:var(--display);font-size:20px;font-weight:500;letter-spacing:-0.02em;margin-bottom:20px}
.breakdown-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.breakdown-row:last-child{border-bottom:none}
.breakdown-row.section{font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--leaf-700);font-weight:600;padding:16px 0 6px}
.breakdown-row.section.us{color:var(--blue-700)}
.breakdown-row.section.border-sec{color:var(--rust)}
.breakdown-row.section.reefer{color:#1d6fb0}
.breakdown-row.section.specialized{color:#a55a16}
.breakdown-row .lbl{color:var(--muted)}
.breakdown-row .val{font-family:var(--mono);color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.breakdown-row.total{background:var(--ink);color:var(--bone);margin:8px -32px -32px;padding:18px 32px;border-radius:0 0 var(--r-lg) var(--r-lg);font-family:var(--display);font-size:18px;font-weight:500}
.breakdown-row.total .lbl{color:var(--bone)}
.breakdown-row.total .val{color:var(--leaf-300);font-size:24px;letter-spacing:-0.02em}

.locked-prompt{background:var(--leaf-50);border:1px solid var(--leaf-100);border-radius:var(--r-lg);padding:32px;margin-top:24px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.locked-prompt-title{font-family:var(--display);font-size:22px;font-weight:500;letter-spacing:-0.02em;margin-bottom:6px;color:var(--leaf-900)}
.locked-prompt-desc{font-size:14px;color:var(--leaf-700);line-height:1.6}

.modal-bg{position:fixed;inset:0;background:rgba(11,20,16,0.65);backdrop-filter:blur(8px);z-index:100;display:flex;align-items:center;justify-content:center;padding:32px;animation:fade .25s ease-out}
.modal{background:var(--bone);border-radius:var(--r-xl);width:600px;max-width:100%;max-height:90vh;overflow-y:auto;padding:40px;position:relative;animation:slide-up .35s ease-out}
.modal-close{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;background:var(--paper);border:1px solid var(--line);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--muted)}
.modal-close:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.modal-eyebrow{font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--leaf-700);margin-bottom:8px}
.modal-h2{font-family:var(--display);font-size:32px;font-weight:400;letter-spacing:-0.025em;line-height:1.1;margin-bottom:8px}
.modal-h2 em{font-style:italic;color:var(--leaf-700)}
.modal-sub{font-size:15px;color:var(--muted);line-height:1.6;margin-bottom:32px}
.modal-plans{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.modal-plan{background:var(--paper);border:2px solid var(--line);border-radius:var(--r-lg);padding:24px;cursor:pointer;transition:all .15s;text-align:left}
.modal-plan:hover{border-color:var(--leaf-500)}
.modal-plan.selected{border-color:var(--ink);background:var(--bone)}
.modal-plan.featured{border-color:var(--leaf-700);background:var(--leaf-50)}
.modal-plan-name{font-family:var(--display);font-size:14px;text-transform:uppercase;letter-spacing:0.1em;font-weight:500;color:var(--leaf-700);margin-bottom:6px}
.modal-plan-price{font-family:var(--display);font-size:36px;font-weight:400;letter-spacing:-0.03em;line-height:1}
.modal-plan-mo{font-size:12px;color:var(--muted);margin-top:4px;font-weight:500}
.modal-plan-feats{list-style:none;margin-top:14px;font-size:12px;color:var(--muted)}
.modal-plan-feats li{padding:3px 0;display:flex;align-items:flex-start;gap:6px}
.modal-plan-feats li::before{content:'✓';color:var(--leaf-700);font-weight:700;flex-shrink:0}
.stripe-zone{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin-top:8px;min-height:60px;display:flex;align-items:center;justify-content:center;flex-direction:column}
.stripe-payment-methods{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.payment-badge{font-size:11px;padding:3px 10px;border-radius:6px;background:var(--paper);border:1px solid var(--line);color:var(--muted);font-weight:500}
.modal-note{font-size:12px;color:var(--muted);text-align:center;line-height:1.6;margin-top:16px}
.config-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.config-help{background:var(--leaf-50);border:1px solid var(--leaf-100);border-radius:var(--r);padding:14px;font-size:13px;color:var(--leaf-700);line-height:1.7;margin-bottom:16px}

.toast-stack{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--ink);color:var(--bone);border-radius:var(--r);padding:12px 18px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:10px;box-shadow:0 12px 32px rgba(11,20,16,0.25);animation:toast-in .3s ease-out;max-width:340px;pointer-events:auto}
.toast.err{background:var(--rust)}
.toast-icon{width:18px;height:18px;border-radius:50%;background:var(--leaf-300);color:var(--leaf-900);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.toast.err .toast-icon{background:var(--bone);color:var(--rust)}
@keyframes toast-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.pac-container{border-radius:var(--r) !important;border:1px solid var(--line) !important;box-shadow:0 12px 32px rgba(11,20,16,0.12) !important;font-family:var(--sans) !important;margin-top:4px !important}
.pac-item{padding:10px 14px !important;font-size:14px !important;color:var(--ink) !important;cursor:pointer !important;border-top:1px solid var(--line-soft) !important}
.pac-item:first-child{border-top:none !important}
.pac-item:hover{background:var(--leaf-50) !important}
.pac-item-query{font-weight:600 !important;color:var(--leaf-700) !important}
.pac-icon{display:none !important}

@media(max-width:960px){
  .nav{padding:0 20px}.nav-links{display:none}
  .hero{padding:120px 20px 64px}.hero-frame{grid-template-columns:1fr;gap:48px}.hero-card{transform:none;padding:24px}
  .values-grid,.pricing-grid,.modes-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .app-frame{padding:96px 20px 64px}.quote-layout{grid-template-columns:1fr}.preview{position:relative;top:0}
  .unit-grid,.mode-picker{grid-template-columns:1fr 1fr}
  .q-row-2,.q-row-3{grid-template-columns:1fr}
  .result-price{font-size:56px}.result-stats{grid-template-columns:1fr 1fr}.modal-plans{grid-template-columns:1fr}
  .result-hero{padding:32px 24px}.locked-prompt{grid-template-columns:1fr}.config-grid{grid-template-columns:1fr}
}

/* Opción no disponible (ej. caja fría cuando la unidad es plataforma) */
.unit-chip.disabled{opacity:.45;cursor:not-allowed;filter:grayscale(1)}
.unit-chip.disabled:hover{border-color:var(--line);transform:none}

/* ═══ Historial y panel de administración ═══ */
.nav-active{background:var(--ink)!important;color:#fff!important}
.hist-empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:14px;background:var(--paper);border:1px dashed var(--line);border-radius:var(--r)}
.hist-table{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.hist-head,.hist-row{display:grid;grid-template-columns:120px 1fr 130px 150px 150px;gap:12px;align-items:center;padding:12px 16px}
.hist-head{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);background:var(--paper);border-bottom:1px solid var(--line)}
.hist-row{border-bottom:1px solid var(--line);font-size:14px}
.hist-row:last-child{border-bottom:none}
.hist-row:hover{background:var(--paper)}
.hist-row small,.hist-date small{display:block;font-size:11px;color:var(--muted);font-family:var(--mono);margin-top:2px}
.hist-route em{color:var(--leaf-700);font-style:normal}
.hist-unit{text-transform:capitalize;color:var(--muted)}
.hist-price{font-family:var(--mono);font-weight:600}
.hist-price small{display:inline;font-weight:400;font-family:inherit}
.right{text-align:right}
.admin-tabs{display:flex;gap:6px;margin:0 0 22px;border-bottom:1px solid var(--line)}
.admin-tabs button{background:none;border:none;padding:10px 16px;font:inherit;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.admin-tabs button.active{color:var(--ink);border-bottom-color:var(--leaf-700)}
.admin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.admin-stat{background:var(--ink);color:#fff;padding:20px;border-radius:var(--r)}
.admin-stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#9ec96b}
.admin-stat-value{font-family:var(--display);font-size:34px;margin:4px 0}
.admin-stat-sub{font-size:12px;color:#b9b6ab}
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.admin-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px}
.admin-card-title{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:10px}
.admin-list-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.admin-list-row:last-child{border-bottom:none}
.admin-list-row em{color:var(--leaf-700);font-style:normal}
.admin-head,.admin-row{grid-template-columns:1.6fr 110px 110px 100px 110px 1.4fr}
.admin-row.inactive{opacity:.55}
.admin-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.q-select-sm{padding:6px 8px;font-size:13px}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600}
.pill-ok{background:#e7f3d9;color:var(--leaf-700)}
.pill-off{background:#fbeae5;color:var(--rust)}
@media(max-width:900px){
  .hist-head{display:none}
  .hist-row,.admin-row{grid-template-columns:1fr;gap:6px}
  .right{text-align:left}
  .admin-stats,.admin-grid{grid-template-columns:1fr}
}

/* ═══ Legal, cookies, periodo de pago ═══ */
.legal-body{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 32px;font-size:14px;line-height:1.75;color:var(--ink);max-width:860px}
.legal-body h2{font-family:var(--display);font-size:26px;margin:0 0 6px}
.legal-body h3{font-size:15px;margin:22px 0 6px;color:var(--leaf-700)}
.legal-body p{margin:0 0 10px}
.legal-body a{color:var(--leaf-700);text-decoration:underline}
.legal-meta{font-family:var(--mono);font-size:12px;color:var(--muted)!important}
.legal-table{width:100%;border-collapse:collapse;font-size:12.5px;margin:8px 0 14px}
.legal-table th,.legal-table td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.legal-table th{background:var(--paper);font-weight:600}
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;background:var(--ink);color:#fff;padding:14px 18px;border-radius:var(--r);display:flex;gap:16px;align-items:center;justify-content:space-between;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.cookie-banner a{color:#9ec96b;text-decoration:underline}
.check-row{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;cursor:pointer;color:var(--ink)}
.check-row input{margin-top:3px;width:16px;height:16px;flex-shrink:0}
.check-row a{color:var(--leaf-700);text-decoration:underline}
.billing-period{margin:18px 0}
.period-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.save-badge{display:inline-block;background:#e7f3d9;color:var(--leaf-700);font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:middle}
.plan-annual{font-size:12.5px;color:var(--muted);margin:6px 0 10px}
.autorenew-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:14px 0}
.autorenew-title{font-weight:600;font-size:13px;margin-bottom:6px}
.autorenew-text{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0 0 10px}
.promo-hint{font-size:12px;color:var(--muted);margin-top:8px;text-align:center}
.pill-warn{background:#fef3e8;color:#a55a16;margin-left:6px}
.plans-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.plans-grid,.period-toggle{grid-template-columns:1fr}.cookie-banner{flex-direction:column;align-items:stretch}}

/* ═══ Tarjetas de modo como botones (atajo al cotizador) ═══ */
.mode-card{
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  width:100%;font:inherit;color:inherit;cursor:pointer;
  border:1px solid var(--line);background:#fff;
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.mode-card:hover{
  border-color:var(--leaf-700);
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(58,85,25,.12);
}
.mode-card:focus-visible{outline:2px solid var(--leaf-700);outline-offset:3px}
.mode-card:active{transform:translateY(-1px)}
/* La llamada a la acción aparece al pasar el cursor */
.mode-cta{
  margin-top:auto;padding-top:12px;
  font-size:12.5px;font-weight:600;color:var(--leaf-700);
  opacity:0;transform:translateX(-4px);
  transition:opacity .18s,transform .18s;
}
.mode-card:hover .mode-cta,
.mode-card:focus-visible .mode-cta{opacity:1;transform:translateX(0)}
/* En pantallas táctiles no hay hover: siempre visible */
@media(hover:none){.mode-cta{opacity:1;transform:none}}

/* ═══ Cotización en vivo de la portada ═══ */
/* La inclinación es intencional (da profundidad), pero más sutil que antes
   y se endereza al pasar el cursor para leerla cómodamente. */
.hero-card{
  transform:rotate(1deg);
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s;
}
.hero-card:hover{transform:rotate(0deg) translateY(-4px);box-shadow:0 36px 90px rgba(11,20,16,.24)}

/* Transición al cambiar de ruta: se desvanece y sube un poco */
.hero-card-route,.hero-card-rows,.hero-card-total{
  transition:opacity .26s ease, transform .26s ease;
}
.hero-card.is-switching .hero-card-route,
.hero-card.is-switching .hero-card-rows,
.hero-card.is-switching .hero-card-total{
  opacity:0;transform:translateY(6px);
}

/* Alto fijo para que la tarjeta no "salte" entre rutas con distinto desglose */
.hero-card-rows{min-height:150px}
.hero-card-route{min-height:56px}

/* Puntos indicadores de la ruta mostrada */
.hero-card-dots{display:flex;gap:7px;margin-top:18px;justify-content:center}
.hero-dot{
  width:7px;height:7px;border-radius:50%;padding:0;cursor:pointer;
  border:none;background:rgba(250,249,245,.25);transition:background .25s,width .25s;
}
.hero-dot.on{background:var(--leaf-300);width:20px;border-radius:4px}
.hero-dot:hover{background:rgba(250,249,245,.5)}
.hero-dot.on:hover{background:var(--leaf-300)}

/* Respeta a quien prefiere menos movimiento */
@media(prefers-reduced-motion:reduce){
  .hero-card,.hero-card-route,.hero-card-rows,.hero-card-total{transition:none}
  .hero-card{transform:none}
}

/* Botón de configuración técnica: vive en el panel de administrador,
   separado de las pestañas y alineado a la derecha. */
.admin-config-btn{
  margin-left:auto;background:none;border:none;font:inherit;font-size:13px;
  color:var(--muted);cursor:pointer;padding:10px 12px;
}
.admin-config-btn:hover{color:var(--ink)}
/* Enlaces legales en el pie */
.footer-legal-links{display:flex;gap:16px}
.footer-legal-links a{color:inherit;text-decoration:none;opacity:.75}
.footer-legal-links a:hover{opacity:1;text-decoration:underline}

/* ═══ Modo de viaje detectado automáticamente ═══ */
.mode-detected{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:24px 0 12px;padding:14px 18px;
  background:var(--leaf-50);border:1px solid var(--leaf-100);border-radius:var(--r);
}
.mode-detected-info{display:flex;align-items:center;gap:12px}
.mode-detected-flags{font-size:22px;line-height:1}
.mode-detected-text strong{display:block;font-size:15px;color:var(--ink)}
.mode-detected-text small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.mode-change-btn{
  background:none;border:none;font:inherit;font-size:12.5px;
  color:var(--leaf-700);cursor:pointer;text-decoration:underline;white-space:nowrap;padding:4px;
}
.mode-change-btn:hover{color:var(--ink)}
.mode-hint{
  margin:24px 0 12px;padding:12px 16px;font-size:13px;color:var(--muted);
  background:var(--paper);border:1px dashed var(--line);border-radius:var(--r);line-height:1.5;
}
@media(max-width:640px){
  .mode-detected{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ═══ Panel del usuario tras iniciar sesión ═══ */
.dash-head{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin:20px 0 24px;padding:22px 26px;
  background:var(--ink);border-radius:var(--r);color:#fff;
}
.dash-quota-plan{font-size:13px;color:#b9b6ab}
.dash-quota-plan strong{color:#9ec96b}
.dash-quota-num{font-family:var(--display);font-size:26px;margin-top:6px;line-height:1.2}
.dash-quota-num strong{font-size:34px;color:#9ec96b}
.dash-quota-num small{display:block;font-family:var(--sans);font-size:12px;color:#b9b6ab;margin-top:4px}
.dash-bar{height:5px;background:rgba(250,249,245,.15);border-radius:99px;margin-top:10px;overflow:hidden;max-width:280px}
.dash-bar span{display:block;height:100%;background:var(--leaf-300);border-radius:99px;transition:width .4s ease}
.dash-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.dash-limit-note{font-size:12px;color:#b9b6ab;margin:0;max-width:260px;text-align:right;line-height:1.5}
@media(max-width:720px){
  .dash-head{flex-direction:column;align-items:stretch}
  .dash-actions{align-items:stretch}
  .dash-actions .btn{width:100%;justify-content:center}
  .dash-limit-note{text-align:left;max-width:none}
}

/* ═══ Cuentas de empresa (Enterprise) ═══ */
.org-team{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:24px}
.org-team-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.org-seats{font-size:14px;color:var(--muted);margin-top:6px}
.org-seats strong{color:var(--ink);font-size:17px}
.org-quotes-month{text-align:right}
.org-quotes-month strong{display:block;font-family:var(--display);font-size:30px;color:var(--leaf-700)}
.org-quotes-month small{font-size:12px;color:var(--muted)}
.org-add{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:18px}
.org-add-row{display:grid;grid-template-columns:1.4fr 1fr 1.2fr auto;gap:12px;align-items:end}
.org-add-row .q-field{margin:0}
.org-gen{cursor:pointer;background:none;border:none;font:inherit;font-size:11px;color:var(--leaf-700);text-decoration:underline}
.org-head,.org-row{grid-template-columns:1.8fr 130px 110px 120px 1.4fr}
.org-admin-head,.org-admin-row{grid-template-columns:1.4fr 1.4fr 130px 110px 110px 130px}
.org-row.inactive,.org-admin-row.inactive{opacity:.55}
.org-seats-input{max-width:90px}
.pill-neutral{background:var(--paper);color:var(--muted);border:1px solid var(--line)}
@media(max-width:900px){
  .org-add-row{grid-template-columns:1fr}
  .org-add-row .btn{width:100%;justify-content:center}
  .org-head,.org-admin-head{display:none}
  .org-row,.org-admin-row{grid-template-columns:1fr;gap:6px}
  .org-quotes-month{text-align:left}
}


/* ═══ Logo del cliente y edición de cotizaciones ═══ */
.brand-box{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:16px 20px;margin-bottom:20px;
}
.brand-preview{
  width:64px;height:64px;flex-shrink:0;border-radius:var(--r);
  border:1px dashed var(--line);background:var(--paper);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:10px;color:var(--dim);text-align:center;padding:4px;
}
.brand-preview img{max-width:100%;max-height:100%;object-fit:contain}
.brand-info{flex:1;min-width:180px}
.brand-info .q-hint{margin:4px 0 0}
.brand-actions{display:flex;gap:8px;align-items:center}
.brand-upload{cursor:pointer;margin:0}
.editing-banner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:#fef3e8;border:1px solid #f4d4ad;border-radius:var(--r);
  padding:12px 16px;margin-bottom:18px;font-size:13px;color:#a55a16;
}
.editing-banner strong{font-family:var(--mono)}
@media(max-width:640px){
  .brand-box{flex-direction:column;align-items:stretch;text-align:center}
  .brand-preview{margin:0 auto}
  .brand-actions{justify-content:center}
}

/* ═══ Control de utilidad ═══ */
.margin-box{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:20px;margin:24px 0;
}
.margin-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.margin-head .q-hint{margin:4px 0 0;max-width:420px}
.margin-value{display:flex;align-items:baseline;gap:4px}
.margin-input{width:86px;text-align:right;font-size:20px;font-weight:600;padding:8px 10px}
.margin-pct{font-size:18px;color:var(--muted);font-weight:600}
.margin-presets{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap}
.margin-chip{
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:6px 16px;font:inherit;font-size:13px;cursor:pointer;color:var(--muted);
  transition:all .15s;
}
.margin-chip:hover{border-color:var(--leaf-700);color:var(--ink)}
.margin-chip.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.margin-result{
  display:flex;gap:22px;flex-wrap:wrap;padding:12px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:13px;color:var(--muted);
}
.margin-result strong{color:var(--ink);font-family:var(--mono)}
@media(max-width:640px){
  .margin-head{flex-direction:column}
  .margin-result{gap:12px;flex-direction:column}
  }

/* ═══ Certificación C-TPAT / OEA ═══ */
.ctpat-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:16px}
.ctpat-rate{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.ctpat-rate .q-label{margin:0}
.ctpat-input{max-width:110px}
.ctpat-amount{font-family:var(--mono);font-size:13px;color:var(--leaf-700);font-weight:600}

/* ═══ Panel de vista previa que acompaña el scroll ═══ */
/* La columna ocupa todo el alto del formulario; así el panel (sticky)
   tiene recorrido y va bajando conforme se llena la cotización. */
.preview-col{align-self:stretch}
/* Si el panel es más alto que la pantalla (p. ej. con caja fría y
   plataforma), se desplaza por dentro en vez de quedar cortado. */
.preview{max-height:calc(100vh - 112px);overflow-y:auto;scrollbar-width:thin}
@media(max-width:900px){.preview{max-height:none;overflow-y:visible}}

/* Columna de acciones del historial: ahora caben PDF, Duplicar, Editar y Re-cotizar */
.hist-head,.hist-row{grid-template-columns:110px 1fr 120px 130px auto}
.hist-row .admin-actions{flex-wrap:wrap;gap:6px}
@media(max-width:900px){.hist-head,.hist-row{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════
   Íconos de línea (sustituyen a los emojis)
   ═══════════════════════════════════════════════ */
.ico{
  width:1.15em;height:1.15em;display:inline-block;vertical-align:-.2em;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  overflow:visible;transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.btn .ico{margin-right:1px}

/* Fichas de unidad, caja, viaje y cruce */
.unit-chip-icon{font-size:inherit;height:34px;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.unit-chip-icon .ico{width:34px;height:34px;stroke-width:1.35;color:var(--ink)}
.unit-chip.selected .unit-chip-icon .ico{color:var(--leaf-300)}

/* ── El trazo se dibuja al aparecer o al seleccionar ── */
@keyframes ico-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.ico-draw [pathLength],
.unit-chip.selected .ico [pathLength]{stroke-dasharray:1;animation:ico-draw .75s cubic-bezier(.65,0,.35,1) both}
.ico-draw [pathLength]:nth-child(2),.unit-chip.selected .ico [pathLength]:nth-child(2){animation-delay:.08s}
.ico-draw [pathLength]:nth-child(3),.unit-chip.selected .ico [pathLength]:nth-child(3){animation-delay:.16s}
.ico-draw [pathLength]:nth-child(4),.unit-chip.selected .ico [pathLength]:nth-child(4){animation-delay:.24s}
.ico-draw [pathLength]:nth-child(n+5),.unit-chip.selected .ico [pathLength]:nth-child(n+5){animation-delay:.3s}

/* ── Vehículos: avanzan al pasar el cursor ── */
.unit-chip:hover :is(.ico-truck-s,.ico-truck-m,.ico-trailer,.ico-full,.ico-flatbed,.ico-stepdeck,.ico-lowboy,.ico-conestoga,.ico-specialized){transform:translateX(4px)}

/* ── Tipo de viaje ── */
.unit-chip:hover .ico-oneway{transform:translateX(5px)}
.unit-chip:hover .ico-twoway,.unit-chip.selected .ico-twoway{transform:rotate(180deg)}

/* ── Caja ── */
.unit-chip:hover .ico-box{transform:translateY(-3px)}
@keyframes ico-spin{to{transform:rotate(360deg)}}
.unit-chip:hover .ico-snow{transform:rotate(60deg)}
.unit-chip.selected .ico-snow{animation:ico-spin 12s linear infinite}

/* ── Aduana: la pluma se levanta ── */
.ico-customs .barrier{transform-box:fill-box;transform-origin:left center;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.unit-chip:hover .ico-customs .barrier,.unit-chip.selected .ico-customs .barrier{transform:rotate(-38deg)}

/* ── Globo: los meridianos giran lentamente ── */
@keyframes ico-meridian{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.25)}}
.ico-globe .meridian{transform-box:fill-box;transform-origin:center;animation:ico-meridian 5s ease-in-out infinite}

/* ── Botones ── */
@keyframes ico-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(3px)}70%{transform:translateY(-1px)}}
.btn:hover .ico-download{animation:ico-bounce .6s ease}
.btn:hover .ico-refresh{transform:rotate(200deg)}
.btn:hover .ico-copy{transform:translate(1.5px,-1.5px)}
.btn:hover .ico-edit{transform:rotate(-14deg)}
.btn:hover .ico-mail{transform:translateY(-2px)}
.btn:hover .ico-map{transform:scale(1.1)}
button:hover .ico-gear{transform:rotate(90deg)}
.btn:hover .ico-crown,.btn:hover .ico-clipboard{transform:translateY(-2px)}

/* ── Avisos ── */
.toast-icon .ico{width:12px;height:12px;stroke-width:2.6}
@keyframes ico-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.ico-alert{transform-origin:center}
.toast .ico-alert{animation:ico-pulse 1.4s ease-in-out infinite}

/* ── Encabezados del desglose, insignias y pagos ── */
.breakdown-row.section .ico{width:14px;height:14px;margin-right:7px;vertical-align:-2px}
.payment-badge{display:inline-flex;align-items:center;gap:5px}
.payment-badge .ico{width:13px;height:13px}
.hist-unit .ico,.hist-route .ico{width:15px;height:15px;color:var(--muted)}

/* ═══ Etiquetas de país (reemplazan a las banderas) ═══ */
.cc{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.6em;font-weight:600;letter-spacing:.06em;line-height:1;
  padding:.32em .55em;border:1.5px solid currentColor;border-radius:6px;
}
.cc-arrow{display:inline-block;margin:0 .35em;font-size:.75em;opacity:.7;animation:cc-travel 1.8s ease-in-out infinite}
@keyframes cc-travel{0%,100%{transform:translateX(-2px);opacity:.4}50%{transform:translateX(3px);opacity:1}}
.mode-card:hover .cc-arrow,.mode-pick:hover .cc-arrow{animation-duration:.8s}
.mode-flags,.mode-pick-flags,.mode-detected-flags{display:inline-flex;align-items:center;letter-spacing:0}
.cc-inline{display:inline-flex;align-items:center;margin-right:6px;font-size:18px}
.us-costs-badge .cc{font-size:9px;border-width:1px;padding:1px 4px}

/* Quien prefiere menos movimiento no ve animaciones */
@media (prefers-reduced-motion: reduce){
  .ico,.ico *{animation:none!important;transition:none!important}
  .ico-draw [pathLength],.unit-chip.selected .ico [pathLength]{stroke-dasharray:none}
  .cc-arrow{animation:none}
}

/* ═══ Banderas (SVG) en los modos de viaje ═══ */
.flag{width:1.5em;height:1em;display:inline-block;vertical-align:-.15em;flex-shrink:0;border-radius:3px;box-shadow:0 0 0 1px rgba(11,20,16,.14),0 1px 2px rgba(11,20,16,.08);transform-origin:left center}
.mode-flags .flag,.mode-detected-flags .flag{width:33px;height:22px}
.mode-pick-flags .flag{width:27px;height:18px}
.cc-inline .flag{width:21px;height:14px}
.us-costs-badge .flag{width:15px;height:10px;border-radius:2px}
/* La bandera ondea un poco al pasar el cursor */
@keyframes flag-wave{0%,100%{transform:perspective(60px) rotateY(0) skewY(0)}35%{transform:perspective(60px) rotateY(-14deg) skewY(2deg)}70%{transform:perspective(60px) rotateY(8deg) skewY(-1deg)}}
.mode-card:hover .flag,.mode-pick:hover .flag{animation:flag-wave .9s ease-in-out}
@media (prefers-reduced-motion: reduce){.flag{animation:none!important}}

/* ═══════════════════════════════════════════════
   Cotizador por pasos
   ═══════════════════════════════════════════════ */
.q-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:22px;scroll-margin-top:90px}
.q-step{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r);
  background:var(--paper);color:var(--muted);font:inherit;font-size:13px;font-weight:500;text-align:left;cursor:pointer;
  transition:border-color .2s,background .2s,color .2s}
.q-step:hover{border-color:var(--leaf-500)}
.q-step-num{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;font-weight:600;border:1.5px solid currentColor;transition:all .25s}
.q-step-num .ico{width:14px;height:14px;stroke-width:2.4}
.q-step.on{border-color:var(--ink);background:var(--ink);color:var(--bone)}
.q-step.on .q-step-num{background:var(--leaf-300);border-color:var(--leaf-300);color:var(--ink)}
.q-step.done{color:var(--leaf-700)}
.q-step.done .q-step-num{background:var(--leaf-50,#eaf5ec);border-color:var(--leaf-500)}
.q-step.locked{opacity:.5;cursor:not-allowed}
.q-step.locked:hover{border-color:var(--line)}
/* Cada paso entra con un deslizamiento suave */
@keyframes q-step-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.quote-form > .q-section,.quote-form > .margin-box{animation:q-step-in .35s ease both}

.q-nav{display:flex;gap:10px;align-items:stretch;margin-top:8px}
.q-nav .btn{justify-content:center}
.q-nav-main{flex:1;padding:16px 28px;font-size:16px}
.q-nav .ico-lock{margin-right:4px}
.btn:disabled{opacity:.6;cursor:wait}

/* Panel lateral: candado en lugar del precio */
.preview-lock{display:flex;gap:12px;align-items:flex-start;margin:18px 0 16px;padding:16px;border:1px dashed rgba(250,249,245,.25);border-radius:var(--r)}
.preview-lock > .ico{width:26px;height:26px;color:var(--leaf-300);flex-shrink:0}
.preview-lock strong{display:block;font-size:14px;font-weight:500;line-height:1.35;color:var(--bone)}
.preview-lock small{display:block;margin-top:4px;font-size:12px;color:rgba(250,249,245,.6)}
.preview-pending{margin-top:10px;font-size:12px;line-height:1.4;color:var(--leaf-300)}
.preview-pending .ico{width:13px;height:13px}

@media (max-width:640px){
  .q-step{flex-direction:column;align-items:flex-start;gap:6px;padding:10px;font-size:12px}
  .q-nav{flex-direction:column-reverse}
}
@media (prefers-reduced-motion: reduce){.quote-form > .q-section,.quote-form > .margin-box{animation:none}}

/* Campo de solo lectura (peso del viaje especializado, viene de "Tu carga") */
.q-input-readonly{background:transparent;border-style:dashed;color:var(--muted);cursor:default}
.q-input-readonly:focus{outline:none;box-shadow:none}
.q-hint-link{background:none;border:0;padding:0;margin-left:6px;font:inherit;color:var(--leaf-700);text-decoration:underline;cursor:pointer}

/* Medidor de peso bruto vehicular contra el límite legal */
.gross-meter{padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--paper)}
.gross-meter-val{font-size:15px;color:var(--ink)}
.gross-meter-val span{color:var(--muted);font-size:13px}
.gross-meter-bar{margin-top:8px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.gross-meter-bar span{display:block;height:100%;background:var(--leaf-500);border-radius:3px;transition:width .4s cubic-bezier(.34,1.3,.64,1),background .3s}
.gross-meter.over{border-color:var(--rust)}
.gross-meter.over .gross-meter-bar span{background:var(--rust)}

/* ═══════════════════════════════════════════════
   Teléfonos
   ═══════════════════════════════════════════════
   Nada puede ser más ancho que la pantalla: si algo se sale, Safari en
   iPhone agranda TODA la página y el contenido se ve cortado a la derecha. */
.nav-label{white-space:nowrap}
.nav .btn .ico{flex-shrink:0}
.nav-cta{min-width:0}
@media(max-width:900px){ .admin-head{display:none} }
@media(max-width:640px){
  .nav{padding:0 12px;gap:8px;height:58px}
  .nav-cta{gap:6px}
  .brand{gap:8px;flex-shrink:0}
  .brand-mark{width:30px;height:30px}
  .brand-name{font-size:18px}
  .lang-switch{height:30px;padding:2px}
  .lang-switch button{padding:0 8px}
  /* Correo oculto y botones de solo ícono (su nombre queda en title/aria-label) */
  .nav .nav-label,.nav .nav-user{display:none}
  .nav .btn-sm{height:34px;min-width:34px;padding:0 9px;justify-content:center}
  .nav .btn-sm .ico{width:17px;height:17px;margin:0}
  .nav .btn-ink:not(.btn-sm){padding:9px 14px;font-size:13px}

  .app-frame{padding:78px 12px 48px}
  .q-section{padding:20px 16px}
  .unit-grid{gap:8px}
  .unit-chip{padding:14px 8px}
  .unit-chip-meta{font-size:12px}

  /* Pestañas del administrador: una línea con desplazamiento lateral */
  .admin-tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .admin-tabs::-webkit-scrollbar{display:none}
  .admin-tabs button{white-space:nowrap;flex-shrink:0;padding:10px 12px}

  .cookie-banner{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom, 0px));padding:12px 14px;font-size:13px;gap:8px}
}
/* Pantallas muy angostas: solo el logo */
@media(max-width:374px){ .brand-name{display:none} }
/* Portada en teléfono: el botón "Cotizar gratis" del encabezado no cabe;
   el del inicio y las tarjetas de modalidad cumplen esa función. */
@media(max-width:480px){ .nav .btn-ink:not(.btn-sm){display:none} }

/* ═══ iPhone: sin zoom automático ═══
   Safari acerca la vista al entrar a un campo con letra < 16 px y al tocar
   dos veces seguidas. Se quitan esos dos disparadores; el zoom con dos
   dedos sigue funcionando (accesibilidad). */
html{touch-action:manipulation}
@media (hover:none) and (pointer:coarse){
  input,select,textarea,.q-input,.q-select{font-size:16px}
}

/* Leyenda fiscal bajo el precio */
.result-tax-note{margin-top:6px;font-size:12px;color:var(--muted)}
.preview-tax-note{margin-top:6px;font-size:11px;color:rgba(250,249,245,.55)}

/* ═══ Precios: planes, paquetes y empresas ═══ */
.interval-switch{display:inline-flex;gap:4px;padding:4px;margin-top:28px;background:var(--paper);border:1px solid var(--line);border-radius:999px}
.interval-switch button{border:none;background:transparent;font:600 13px var(--sans);color:var(--muted);padding:8px 18px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.interval-switch button.on{background:var(--ink);color:var(--bone)}
.interval-switch button.on .save-badge{background:var(--leaf-300);color:var(--leaf-900)}
.interval-switch.small{margin:0 0 16px}
.pricing-grid-4{grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.pricing-grid-4 .plan{padding:30px 24px}
.pricing-grid-4 .plan-price{font-size:48px}
.pricing-grid-4 .plan-price-mo{min-height:21px}
.pricing-grid-4 .plan .btn[disabled]{opacity:.6;cursor:default}
.pricing-extra{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:16px}
.pricing-packs,.pricing-ent{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:26px 24px}
.pricing-packs .plan-desc,.pricing-ent .plan-desc{margin-bottom:16px}
.pack-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pack-chip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;cursor:pointer;font:500 13px var(--sans);color:var(--muted);transition:border-color .15s,transform .15s}
.pack-chip:hover{border-color:var(--leaf-500);transform:translateY(-2px)}
.pack-chip strong{font-family:var(--display);font-size:28px;font-weight:400;color:var(--ink);line-height:1}
.pack-chip span{font-size:16px;font-weight:600;color:var(--ink);margin-top:6px}
.pack-chip small{font-size:12px;color:var(--leaf-700)}
.pricing-foot{font-size:12.5px;color:var(--muted);margin-top:18px;text-align:center;line-height:1.6}
@media(max-width:1100px){.pricing-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:960px){.pricing-grid.pricing-grid-4{grid-template-columns:repeat(2,1fr)}.pricing-extra{grid-template-columns:1fr}}
@media(max-width:600px){.pricing-grid.pricing-grid-4{grid-template-columns:1fr}.pack-chips{grid-template-columns:1fr}.interval-switch{display:flex}.interval-switch button{flex:1;justify-content:center;padding:8px 10px}}

/* ═══ Modal de compra ═══ */
.modal-buy{width:720px}
.buy-tabs{display:flex;gap:4px;background:var(--paper);padding:4px;border-radius:var(--r);border:1px solid var(--line);margin-bottom:18px}
.buy-tabs button{flex:1;border:none;background:transparent;font:600 13px var(--sans);color:var(--muted);padding:9px 12px;border-radius:8px;cursor:pointer}
.buy-tabs button.on{background:var(--ink);color:var(--bone)}
.modal-plans-3{grid-template-columns:repeat(3,1fr)}
.modal-plans-3 .modal-plan{padding:18px 16px}
.modal-plans-3 .modal-plan-price{font-size:28px}
.buy-go{width:100%;justify-content:center}
.buy-note{margin:0 0 14px}
.buy-signup{font-size:12px;color:var(--muted);margin-top:12px;text-align:center}
.buy-signup a{color:var(--leaf-700);cursor:pointer;text-decoration:underline}
@media(max-width:640px){.modal-plans-3{grid-template-columns:1fr}}

/* ═══ Panel: plan, avisos de pago y estado de cuenta ═══ */
.dash-quota-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:12px;color:#b9b6ab}
.dash-quota-meta strong{color:#fff;font-weight:600}
.dash-quota-plan .pill{margin-left:6px}
.dash-links{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin-top:4px}
.dash-links .btn-bone{background:rgba(250,249,245,.1);color:#fff;border-color:rgba(250,249,245,.25)}
.dash-links .btn-bone:hover{background:rgba(250,249,245,.2)}
@media(max-width:720px){.dash-links{justify-content:stretch}.dash-links .btn{flex:1 1 auto}}
.pay-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;margin:-8px 0 18px;border-radius:var(--r);font-size:13.5px;line-height:1.5;background:var(--leaf-50);border:1px solid var(--leaf-100);color:var(--leaf-900)}
.pay-banner.warn{background:var(--amber-bg);border-color:#f0d7a8;color:#6b4212}
.pay-banner.err{background:#fbe6df;border-color:#f0c2b3;color:var(--rust)}
.pay-banner .btn{margin-left:auto}
.spinner-inline{width:14px;height:14px;border:2px solid var(--leaf-300);border-top-color:transparent;border-radius:50%;display:inline-block;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ledger-box{margin:0 0 24px}
.ledger-toggle{display:flex;align-items:center;gap:8px;width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;font:600 14px var(--sans);color:var(--ink);cursor:pointer;text-align:left}
.ledger-caret{margin-left:auto;color:var(--muted)}
.ledger-box .hist-table{margin-top:8px}
.ledger-head,.hist-head.ledger-row,.hist-row.ledger-row{grid-template-columns:110px 1fr 90px 100px}
.ledger-delta{font-family:var(--mono);font-weight:600}
.ledger-delta.plus{color:var(--leaf-700)}
.ledger-delta.minus{color:var(--muted)}
.ledger-box .q-hint{margin-top:8px}
@media(max-width:900px){.hist-row.ledger-row{grid-template-columns:1fr auto;gap:2px 12px}.hist-row.ledger-row .hist-date{grid-column:1/-1}}
.hist-locked{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:20px;background:var(--paper);border:1px dashed var(--line);border-radius:var(--r)}
.hist-locked > div{flex:1;min-width:220px}
.hist-locked p{margin:4px 0 0;font-size:13px;color:var(--muted)}

/* ═══ PDF: elegir versión ═══ */
.modal-pdf{width:560px}
.pdf-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.pdf-option{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);padding:20px 18px;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .15s,transform .15s}
.pdf-option:hover{border-color:var(--leaf-500);transform:translateY(-2px)}
.pdf-option strong{font-size:15px}
.pdf-option span{font-size:12.5px;color:var(--muted);line-height:1.5}
.pdf-option .ico,.pdf-option svg{color:var(--leaf-700)}
@media(max-width:560px){.pdf-options{grid-template-columns:1fr}}

.brand-name-row{display:flex;gap:8px;margin-top:10px;max-width:460px}
.brand-name-row .q-input{flex:1;min-width:0}
@media(max-width:640px){.brand-name-row{max-width:none}}

/* ═══ Administrador · Clientes ═══ */
.hist-head.admin-head,.hist-row.admin-row{grid-template-columns:minmax(0,1.7fr) minmax(0,1.1fr) 80px 95px 90px minmax(0,1.6fr)}
.hist-row.admin-row > span{min-width:0}
.hist-row.admin-row small{overflow-wrap:anywhere}
.hist-row.admin-row .admin-actions{justify-content:flex-end}
.admin-plan-note{display:block;font-size:11px;color:var(--leaf-700);margin-top:2px}
@media(max-width:900px){.hist-head.admin-head{display:none}.hist-row.admin-row{grid-template-columns:1fr;gap:6px}.hist-row.admin-row .admin-actions{justify-content:flex-start}}
.modal-plan-admin{width:480px}
.modal-plan-admin .q-field{margin-bottom:14px}
.auth-link{color:var(--leaf-700);cursor:pointer;text-decoration:underline;font-weight:500}

.plan-usd{font-size:15px;font-weight:600;color:var(--leaf-700);margin:2px 0 2px}
.plan.featured .plan-usd{color:var(--leaf-300)}
.usd-inline{font-style:normal;font-size:12px;font-weight:500;color:var(--muted)}

/* ── Administrador → Costos ── */
.costs{padding-bottom:70px}
.costs .admin-card{margin-bottom:14px}
.costs-sources .src-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.costs-sources .src-row:last-of-type{border-bottom:0}
.src-name em{display:block;font-style:normal;color:var(--muted);font-size:12px}
.src-val{font-family:var(--mono);font-size:13px}
.src-val small{display:block;color:var(--muted);font-size:11px}
.src-pill{font-size:11.5px;padding:3px 9px;border-radius:99px;background:var(--leaf-50);color:var(--leaf-700);border:1px solid var(--leaf-100);white-space:nowrap}
.src-pill.ultimo,.src-pill.respaldo{background:#fff6e5;color:#8a5a00;border-color:#f3dfb2}
.costs-note{font-size:12px;color:var(--muted);margin:10px 0 0}
.costs-intro{font-size:13.5px;line-height:1.6;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:14px}
.costs-head{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;padding:0;font:inherit;font-weight:600;font-size:15px;color:var(--ink);cursor:pointer;text-align:left}
.costs-dot{font-weight:500;font-size:11px;color:#8a5a00;background:#fff6e5;border-radius:99px;padding:2px 8px;margin-left:6px}
.costs-help{font-size:12.5px;color:var(--muted);margin:8px 0 6px}
.cost-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(150px,1fr) minmax(0,.9fr);gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.cost-label{font-size:13.5px}
.cost-input{display:flex;align-items:center;gap:6px}
.cost-input .q-input{padding:7px 9px;font-family:var(--mono);font-size:13px;min-width:0}
.cost-unit{font-size:11.5px;color:var(--muted);white-space:nowrap}
.cost-base{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.cost-row.changed .cost-label{font-weight:600}
.cost-row.changed .q-input{border-color:#e2c27a;background:#fffaf0}
.cost-row.pending .q-input{border-color:var(--leaf-700);background:var(--leaf-50)}
.link-btn{background:none;border:0;color:var(--leaf-700);cursor:pointer;font-size:15px;padding:0 4px}
.cost-hist{padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.cost-hist-when{font-size:12px;color:var(--muted);margin-bottom:3px}
.costs-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:40;display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);box-shadow:0 8px 28px rgba(0,0,0,.14);border-radius:99px;padding:8px 10px 8px 18px;font-size:13.5px;max-width:calc(100% - 32px)}
@media (max-width:640px){
  .cost-row{grid-template-columns:1fr;gap:4px}
  .costs-sources .src-row{grid-template-columns:1fr auto}
  .costs-sources .src-val{grid-column:1}
  .costs-bar{border-radius:14px;flex-wrap:wrap;justify-content:center}
}
.src-val{text-align:right}
.cost-unit{min-width:72px}
@media (max-width:640px){.costs-bar{left:16px;right:16px;transform:none;max-width:none}.cost-unit{min-width:0}}

/* ── Cargos adicionales (ferry y otros) ── */
.extras-box{margin-top:18px;border:1px dashed var(--line);border-radius:var(--r);background:#fff}
.extras-box.open{border-style:solid}
.extras-toggle{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:none;border:0;padding:12px 14px;font:inherit;font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;text-align:left}
.extras-sub{font-weight:400;font-size:12.5px;color:var(--muted)}
.extras-count{display:inline-block;margin-left:6px;font-size:11px;background:var(--leaf-50);color:var(--leaf-700);border:1px solid var(--leaf-100);border-radius:99px;padding:1px 7px}
.extras-body{padding:0 14px 14px;display:flex;flex-direction:column;gap:10px}
.extras-hint{font-size:12.5px;line-height:1.5;background:var(--leaf-50);border:1px solid var(--leaf-100);color:var(--leaf-700);border-radius:var(--r);padding:8px 10px}
.extras-check{display:flex;gap:8px;align-items:center;font-size:14px;cursor:pointer}
.extras-ferry{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.extras-ferry .q-hint{grid-column:1/-1}
.extras-other{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:8px;align-items:center}
@media (max-width:640px){.extras-ferry{grid-template-columns:1fr}.extras-other{grid-template-columns:1fr auto}.extras-other .q-input-wrap{grid-column:1}}
.extras-ferry{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}@media (max-width:640px){.extras-ferry{grid-template-columns:1fr}}

.empty-leg{margin:-4px 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:#fff;align-items:flex-start}
.empty-leg input{margin-top:3px}
.empty-leg small{color:var(--muted);font-size:12.5px}

/* ── Anti-bots ── */
.hp-field{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}
.ts-box{display:flex;justify-content:center;margin:6px 0 4px;min-height:0}
.ts-box:empty{display:none}

/* ── Administrador → Tráfico ── */
.traffic .admin-card{margin-bottom:14px}
.traffic-range{display:flex;gap:8px;margin-bottom:14px}
.traffic-stats{margin-bottom:14px}
.traffic-chart{display:flex;align-items:flex-end;gap:2px;height:140px;padding-top:6px}
.traffic-bar{flex:1;height:100%;display:flex;align-items:flex-end;min-width:2px}
.traffic-bar span{display:block;width:100%;background:var(--leaf-700);border-radius:3px 3px 0 0;min-height:0}
.traffic-bar:hover span{background:var(--ink)}
.traffic-axis{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:6px}
.funnel-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.6fr) 90px minmax(0,1fr);gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px}
.funnel-track{height:12px;background:var(--paper);border-radius:99px;overflow:hidden}
.funnel-track span{display:block;height:100%;background:var(--leaf-700);border-radius:99px}
.funnel-num{text-align:right;font-family:var(--mono);font-size:13px}
.funnel-num small{color:var(--muted);margin-left:4px}
.funnel-drop{font-size:12px;color:var(--muted)}
.funnel-drop.worst{color:var(--rust);font-weight:600}
.funnel-drop.worst:before{content:'↓ '}
.share-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 44px;gap:10px;align-items:center;padding:6px 0;font-size:13.5px;border-top:1px solid var(--line)}
.share-row strong{text-align:right;font-family:var(--mono);font-size:13px}
.share-bar{height:8px;background:var(--paper);border-radius:99px;overflow:hidden}
.share-bar span{display:block;height:100%;background:var(--leaf-700)}
@media (max-width:640px){
  .funnel-row{grid-template-columns:1fr 70px;row-gap:4px}
  .funnel-track{grid-column:1/-1;order:3}
  .funnel-drop{grid-column:1/-1;order:4}
}
.traffic-stats{grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:820px){.traffic-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}