/* ══════════════════════════════════════════════════════════════
   SIMPLECONVERTLY · CONVERSOR v4
   Paleta: crema cálida · dorado auténtico · tipografía premium
══════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --bg:         #f4f1eb;
  --bg2:        #ebe7df;
  --bg3:        #dedad1;
  --surf:       #ffffff;
  --surf2:      #f9f7f3;
  --surf3:      #f1ede6;

  --gold:       #b8892a;
  --gold-hi:    #d4a84d;
  --gold-lo:    #8a6118;
  --gold-s:     rgba(184,137,42,.09);
  --gold-gl:    rgba(184,137,42,.22);
  --gold-bd:    rgba(184,137,42,.22);

  --tx:         #18140f;
  --tx2:        #46413a;
  --mu:         #888278;

  --gr:         #16a34a;
  --gr-s:       rgba(22,163,74,.1);
  --rd:         #dc2626;
  --rd-s:       rgba(220,38,38,.1);
  --bl:         #2563eb;
  --bl-s:       rgba(37,99,235,.08);

  --bd:         rgba(0,0,0,.07);
  --bd2:        rgba(0,0,0,.13);

  --f-sans: 'Inter', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', monospace;

  --r1: 8px; --r2: 12px; --r3: 18px; --r4: 24px; --r5: 32px;

  --s1: 0 1px 3px rgba(0,0,0,.05);
  --s2: 0 2px 10px rgba(0,0,0,.07);
  --s3: 0 6px 24px rgba(0,0,0,.09);
  --s4: 0 12px 48px rgba(0,0,0,.11);
  --sg: 0 6px 32px rgba(184,137,42,.15);

  --ease: cubic-bezier(.22,1,.36,1);
  --t: .16s;
}

[data-theme="dark"] {
  --bg:    #0e0c09; --bg2: #161310; --bg3: #1e1b16;
  --surf:  #1b1814; --surf2: #222018; --surf3: #2a271f;
  --gold:  #c9a24d; --gold-hi: #e0bb6a; --gold-lo: #9a7530;
  --gold-s: rgba(201,162,77,.1); --gold-gl: rgba(201,162,77,.22);
  --gold-bd: rgba(201,162,77,.24);
  --tx: #f0ece4; --tx2: #bcb8b0; --mu: #7a7568;
  --bd: rgba(255,255,255,.07); --bd2: rgba(255,255,255,.13);
  --s3: 0 6px 24px rgba(0,0,0,.36); --s4: 0 12px 48px rgba(0,0,0,.5);
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--f-sans);
  background: var(--bg);
  color: var(--tx);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background .35s, color .25s;
  overflow-x: hidden;
}
a    { text-decoration:none; color:inherit; }
img  { max-width:100%; }

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes up     { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse  { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes pop    { from{opacity:0;transform:scale(.95) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes shimmer{ 0%{background-position:-600px 0} 100%{background-position:600px 0} }

/* ══════════════════════════════════════════════════════════════
   TICKER
══════════════════════════════════════════════════════════════ */
#ticker-bar {
  height: 36px;
  background: #14100a;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.04);
  position: relative;
  z-index: 200;
}
[data-theme="dark"] #ticker-bar { background:#0a0806; }

#ticker-bar:hover .ticker-track { animation-play-state:paused; }
.ticker-track {
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  animation: ticker 38s linear infinite;
  width: max-content;
}
.t-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px;
  font-family: var(--f-mono);
  font-size: .68rem;
}
.t-pair { color: #a8a09a; font-weight: 700; letter-spacing: .05em; }
.t-rate { color: #f0ece4; font-weight: 500; }
.t-sep  { color: #3a3630; }
.t-chg  { font-size: .62rem; padding: 1px 5px; border-radius: 3px; font-weight: 700; }
.t-pos  { background: rgba(22,163,74,.22); color: #4ade80; }
.t-neg  { background: rgba(220,38,38,.20); color: #f87171; }

/* ══════════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════════ */
#main-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244,241,235,.92);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--bd);
  transition: background .3s;
}
[data-theme="dark"] #main-nav {
  background: rgba(14,12,9,.9);
  border-color: rgba(255,255,255,.06);
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.nav-logo-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-weight: 700; font-size: .68rem;
  color: #fff; letter-spacing: -.04em;
  box-shadow: 0 2px 10px rgba(184,137,42,.3);
}
.nav-logo-name {
  font-size: .9rem; font-weight: 700;
  color: var(--tx); letter-spacing: -.02em;
}
.nav-logo-name em { color: var(--gold); font-style: normal; }

/* Nav links pill */
.nav-links {
  display: flex;
  gap: 1px;
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: 999px;
  padding: 3px;
  margin: 0 auto;
}
.nav-link {
  padding: 6px 16px;
  border-radius: 999px;
  font-size: .8rem; font-weight: 600;
  color: var(--mu);
  transition: color var(--t), background var(--t);
  white-space: nowrap;
}
.nav-link:hover  { color: var(--tx); background: var(--surf); }
.nav-link.active { color: var(--tx); background: var(--surf); box-shadow: var(--s1); }

/* Nav controls */
.nav-ctrl { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.nav-btn {
  height: 32px; padding: 0 12px; min-width: 32px;
  border: 1px solid var(--bd2); border-radius: 8px;
  background: var(--surf2); color: var(--tx2);
  font-size: .76rem; font-weight: 600; font-family: var(--f-sans);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.nav-btn:hover { border-color: var(--gold-bd); color: var(--gold); background: var(--gold-s); }
select.nav-btn { appearance: none; padding: 0 14px; }

/* ══════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════ */
.hero {
  text-align: center;
  padding: 80px 24px 64px;
  max-width: 100%;
  animation: up .6s var(--ease) both;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); background: var(--gold-s);
  border: 1px solid var(--gold-bd);
  padding: 5px 14px; border-radius: 999px;
  margin-bottom: 22px;
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gr); animation: pulse 2s infinite;
  box-shadow: 0 0 7px var(--gr);
}
.hero h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 900; letter-spacing: -.05em; line-height: 1.05;
  color: var(--tx); margin-bottom: 14px;
}
.hero p {
  font-size: 1.05rem; color: var(--mu); line-height: 1.7;
  max-width: 560px; margin: 0 auto 32px;
}
.hero-pills {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.hero-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--surf); border: 1px solid var(--bd2);
  border-radius: 999px; padding: 6px 15px;
  font-size: .76rem; font-weight: 600; color: var(--tx2);
  box-shadow: var(--s1);
}
.hero-pill strong { color: var(--gold); }

/* ══════════════════════════════════════════════════════════════
   LAYOUT PRINCIPAL — full width
══════════════════════════════════════════════════════════════ */
.page-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px 100px;
}

/* ══════════════════════════════════════════════════════════════
   CONVERSOR CARD — hero visual
══════════════════════════════════════════════════════════════ */
.conv-card {
  background: var(--surf);
  border: 1px solid var(--bd2);
  border-radius: var(--r5);
  box-shadow: var(--s4);
  margin-bottom: 28px;
  overflow: hidden;
  animation: up .6s var(--ease) .08s both;
  opacity: 0; animation-fill-mode: forwards;
}

/* ── Tabs ──────────────────────────────────────────────────── */
.cv-tabs {
  display: flex;
  background: var(--bg2);
  border-bottom: 1px solid var(--bd);
}
.cv-tab {
  flex: 1;
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: .78rem; font-weight: 600;
  color: var(--mu);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--t), border-color var(--t), background var(--t);
  background: none; border-top: none; border-left: none; border-right: none;
  font-family: var(--f-sans);
}
.cv-tab:hover { color: var(--tx); background: rgba(0,0,0,.03); }
.cv-tab.on    { color: var(--gold); border-bottom-color: var(--gold); background: var(--surf); }

/* ── Panels ────────────────────────────────────────────────── */
.cv-panel { display: none; padding: 36px 40px; }
.cv-panel.on { display: block; }

/* ══════════════════════════════════════════════════════════════
   PANEL 1: CONVERSOR
══════════════════════════════════════════════════════════════ */

/* Fila principal de conversión */
.cv-row {
  display: grid;
  grid-template-columns: 1fr 52px 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}

/* Campo */
.cv-field {
  background: var(--bg2);
  border: 1.5px solid var(--bd2);
  border-radius: var(--r4);
  padding: 20px 22px;
  transition: border-color var(--t), box-shadow var(--t);
}
.cv-field:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-s);
}
.cv-field-lbl {
  font-size: .6rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mu); margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center;
}
.fav-star {
  cursor: pointer; font-size: .9rem;
  opacity: .35; transition: opacity var(--t), transform var(--t);
}
.fav-star.on, .fav-star:hover { opacity:1; transform:scale(1.2); }

/* Amount input */
#amount {
  display: block;
  width: 100%;
  background: none; border: none; outline: none;
  font-family: var(--f-mono);
  font-size: 2.2rem; font-weight: 700;
  color: var(--tx); letter-spacing: -.03em;
  -moz-appearance: textfield;
}
#amount::-webkit-outer-spin-button,
#amount::-webkit-inner-spin-button { -webkit-appearance: none; }
#amount::placeholder { color: var(--mu); }

/* Result */
#result {
  display: block;
  font-family: var(--f-mono);
  font-size: 1rem; font-weight: 500;
  color: var(--tx2); min-height: 1.2rem;
  line-height: 1.4; word-break: break-word;
}

/* Currency trigger */
.cc-trig {
  display: flex; align-items: center; gap: 11px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--bd);
  cursor: pointer; border-radius: var(--r2);
  transition: background var(--t);
}
.cc-trig:hover { background: var(--gold-s); padding: 8px 10px; margin: 6px -10px 0; }
.cc-flag { font-size: 1.4rem; line-height: 1; }
.cc-code { font-family: var(--f-mono); font-size: .95rem; font-weight: 700; color: var(--tx); }
.cc-name { font-size: .72rem; color: var(--mu); margin-top: 1px; }
.cc-chev { margin-left: auto; color: var(--mu); transition: transform var(--t); font-size: .7rem; }
.cc-trig:hover .cc-chev { transform: rotate(90deg); color: var(--gold); }

/* Ocultar el custom select de script.js completamente */
.select-wrapper            { position: static !important; }
.currency-select-trigger,
.currency-dropdown         { display: none !important; }
#from, #to                 { display: none !important; }

/* Botón swap */
.cvr-swap-btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--surf2); border: 1.5px solid var(--bd2);
  color: var(--tx2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--t); flex-shrink: 0;
  font-size: 1rem;
}
.cvr-swap-btn:hover {
  background: var(--gold-s); border-color: var(--gold-bd);
  color: var(--gold); transform: rotate(180deg);
}

/* Banner resultado */
.result-banner {
  background: linear-gradient(135deg, var(--gold-s), rgba(184,137,42,.03));
  border: 1px solid var(--gold-bd);
  border-radius: var(--r3);
  padding: 22px 26px;
  margin-bottom: 20px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.result-big {
  font-family: var(--f-mono);
  font-size: 1.8rem; font-weight: 700;
  color: var(--tx); letter-spacing: -.03em;
}
.result-big .to { color: var(--gold); }
#rateInfo {
  font-size: .74rem; color: var(--mu);
  font-family: var(--f-mono); margin-top: 4px;
}
.result-acts { display: flex; gap: 8px; flex-shrink: 0; }
.act-btn {
  height: 32px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--bd2); background: var(--surf2);
  font-size: .74rem; font-weight: 700; color: var(--tx2);
  cursor: pointer; transition: all var(--t); font-family: var(--f-sans);
  display: flex; align-items: center; gap: 5px;
}
.act-btn:hover { border-color: var(--gold-bd); color: var(--gold); background: var(--gold-s); }
.act-btn.primary { background: var(--gold); border-color: var(--gold); color: #fff; }
.act-btn.primary:hover { background: var(--gold-hi); }

/* Quick amounts */
.quick-row {
  display: flex; gap: 5px; flex-wrap: wrap;
  align-items: center; margin-bottom: 18px;
}
.quick-lbl { font-size: .6rem; color: var(--mu); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.q-btn {
  height: 26px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--bd2); background: var(--surf2);
  font-size: .7rem; font-weight: 600; color: var(--mu);
  cursor: pointer; transition: all var(--t); font-family: var(--f-sans);
}
.q-btn:hover,.q-btn.on { border-color: var(--gold-bd); color: var(--gold); background: var(--gold-s); }

/* Favoritos */
.fav-section { display: none; margin-bottom: 16px; }
.fav-lbl { font-size: .6rem; color: var(--mu); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 7px; }
#favGrid  { display: flex; gap: 5px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════
   PANEL 2: MULTI-DIVISA
══════════════════════════════════════════════════════════════ */
.multi-hd  { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.multi-hd h3 { font-size:.9rem; font-weight:700; }
#addMultiCur {
  height: 30px; padding: 0 14px; border-radius:999px;
  border: 1px dashed var(--bd2); background:transparent;
  font-size:.72rem; font-weight:700; color:var(--tx2);
  cursor:pointer; transition:all var(--t); font-family:var(--f-sans);
}
#addMultiCur:hover { border-color:var(--gold-bd); color:var(--gold); border-style:solid; }
.multi-base {
  display:flex; align-items:center; gap:12px;
  background:var(--bg2); border:1.5px solid var(--bd2);
  border-radius:var(--r3); padding:14px 18px; margin-bottom:16px;
}
#multi-amount {
  background:none; border:none; outline:none;
  font-family:var(--f-mono); font-size:1.5rem; font-weight:700; color:var(--tx); width:130px;
}
.multi-base-cur { font-family:var(--f-mono); font-size:.9rem; font-weight:700; color:var(--gold); }
.multi-base-trig {
  display:flex; flex-direction:column; gap:2px;
  background:var(--gold-s); border:1.5px solid var(--gold-bd);
  border-radius:var(--r2); padding:8px 14px;
  cursor:pointer; transition:all var(--t);
  text-align:left; font-family:var(--f-sans);
}
.multi-base-trig:hover { background:rgba(184,137,42,.18); }
.multi-base-lbl { font-size:.6rem; color:var(--gold); font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-top:1px; }

/* Validación campo descripción viaje */
.exp-in.error { border-color:var(--rd) !important; box-shadow:0 0 0 3px var(--rd-s) !important; animation: shake .3s ease; }
.exp-error-msg { font-size:.72rem; color:var(--rd); font-weight:600; margin-top:4px; display:none; }
.exp-error-msg.show { display:block; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.multi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:11px; }
.m-item {
  background:var(--surf2); border:1px solid var(--bd);
  border-radius:var(--r3); padding:16px 18px;
  transition:border-color var(--t),transform var(--t); position:relative;
}
.m-item:hover { border-color:var(--gold-bd); transform:translateY(-2px); }
.m-item-flag { font-size:1.2rem; margin-bottom:4px; }
.m-item-code { font-family:var(--f-mono); font-size:.7rem; font-weight:700; color:var(--mu); }
.m-item-val  { font-family:var(--f-mono); font-size:1.2rem; font-weight:700; color:var(--tx); letter-spacing:-.02em; margin-top:3px; }
.m-item-rate { font-size:.65rem; color:var(--mu); margin-top:2px; }
.m-rm {
  position:absolute; top:7px; right:7px; width:20px; height:20px; border-radius:50%;
  background:var(--rd-s); color:var(--rd);
  font-size:.65rem; display:none; align-items:center; justify-content:center;
  cursor:pointer; border:none; font-family:var(--f-sans);
}
.m-item:hover .m-rm { display:flex; }

/* ══════════════════════════════════════════════════════════════
   PANEL 3: MODO VIAJE
══════════════════════════════════════════════════════════════ */
.tv-hd   { margin-bottom:22px; }
.tv-hd h3 { font-size:.9rem; font-weight:700; margin-bottom:3px; }
.tv-hd p  { font-size:.8rem; color:var(--mu); }
.tv-setup { display:grid; grid-template-columns:1fr 1fr 1fr; gap:13px; margin-bottom:22px; }
.tv-fld   { display:flex; flex-direction:column; gap:5px; }
.tv-fld label { font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mu); }
.tv-in {
  width:100%; background:var(--bg2); border:1.5px solid var(--bd2);
  border-radius:var(--r2); padding:10px 13px;
  font-family:var(--f-mono); font-size:.95rem; font-weight:700; color:var(--tx);
  outline:none; transition:border-color var(--t);
}
.tv-in:focus { border-color:var(--gold); }
.tv-cur-btn {
  width:100%; display:flex; align-items:center; gap:9px;
  background:var(--bg2); border:1.5px solid var(--bd2);
  border-radius:var(--r2); padding:10px 13px;
  cursor:pointer; transition:all var(--t); font-family:var(--f-sans);
  text-align:left;
}
.tv-cur-btn:hover { border-color:var(--gold); background:var(--gold-s); }
.tcb-flag { font-size:1.1rem; }
.tcb-code { font-family:var(--f-mono); font-weight:700; font-size:.84rem; color:var(--tx); }
.tcb-name { font-size:.7rem; color:var(--mu); }
.tcb-chev { margin-left:auto; color:var(--mu); font-size:.65rem; }

/* Budget card */
.tv-budget {
  background:var(--bg2); border:1px solid var(--bd2);
  border-radius:var(--r3); padding:20px 24px; margin-bottom:14px;
}
.tv-bud-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.tv-bud-lbl { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--mu); }
.tv-bud-pct { font-size:.7rem; font-family:var(--f-mono); color:var(--tx2); }
.tv-bar-wrap { height:7px; background:var(--bd2); border-radius:999px; margin:10px 0; overflow:hidden; }
.tv-bar { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--gr),var(--gold)); transition:width .5s var(--ease),background .3s; }
.tv-bar.warn { background:linear-gradient(90deg,var(--gold),var(--rd)); }
.tv-stats { display:flex; justify-content:space-between; }
.tv-stat .lbl { font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:var(--mu); }
.tv-stat .val { font-family:var(--f-mono); font-size:.9rem; font-weight:700; color:var(--tx); margin-top:2px; }
.tv-stat .val.red   { color:var(--rd); }
.tv-stat .val.green { color:var(--gr); }

/* Expenses */
.exp-list { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.exp-item {
  display:flex; align-items:center; gap:9px;
  background:var(--surf); border:1px solid var(--bd);
  border-radius:var(--r2); padding:9px 13px; font-size:.8rem;
}
[data-theme="dark"] .exp-item { background:var(--surf2); }
.exp-emo  { font-size:.95rem; }
.exp-lbl  { flex:1; color:var(--tx2); }
.exp-amt  { font-family:var(--f-mono); font-weight:700; color:var(--tx); }
.exp-conv { font-family:var(--f-mono); font-size:.7rem; color:var(--mu); }
.exp-del  {
  background:none; border:none; color:var(--mu);
  font-size:.75rem; cursor:pointer; padding:3px 7px;
  border-radius:5px; transition:all var(--t);
}
.exp-del:hover { color:var(--rd); background:var(--rd-s); }
.exp-add-row { display:flex; gap:7px; }
.exp-in {
  flex:1; background:var(--surf2); border:1px solid var(--bd2);
  border-radius:var(--r2); padding:9px 12px;
  font-family:var(--f-sans); font-size:.8rem; color:var(--tx); outline:none;
  transition:border-color var(--t);
}
.exp-in:focus { border-color:var(--gold); }
.exp-add {
  height:36px; padding:0 16px; border-radius:var(--r2);
  background:var(--gold); color:#fff; font-weight:700;
  font-size:.78rem; border:none; cursor:pointer;
  transition:background var(--t); font-family:var(--f-sans);
}
.exp-add:hover { background:var(--gold-hi); }

/* ══════════════════════════════════════════════════════════════
   GRID — gráfico + historial
══════════════════════════════════════════════════════════════ */
.below-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 22px;
  margin-bottom: 24px;
  animation: up .6s var(--ease) .16s both;
  opacity: 0; animation-fill-mode: forwards;
}

/* ── Gráfico ───────────────────────────────────────────────── */
.chart-card {
  background: var(--surf);
  border: 1px solid var(--bd2);
  border-radius: var(--r4);
  padding: 28px;
  box-shadow: var(--s3);
}
.chart-card-hd {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 20px; flex-wrap: wrap; gap: 10px;
}
.chart-ttl   { font-size: .82rem; font-weight: 700; color: var(--tx); }
.chart-meta  { font-size: .7rem; color: var(--mu); font-family: var(--f-mono); margin-top: 3px; }
.chart-ctrl  { display: flex; gap: 3px; }
.chart-controls button {
  height: 26px; padding: 0 12px; border-radius: 999px;
  font-size: .7rem; font-weight: 700; color: var(--mu);
  border: 1px solid transparent; cursor: pointer;
  transition: all var(--t); background: none; font-family: var(--f-sans);
  box-shadow: none;
}
.chart-controls button:hover  { background: var(--bg2); color: var(--tx); }
.chart-controls button.active { color: var(--gold); background: var(--gold-s); border-color: var(--gold-bd); }
.chart-stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 18px; }
.cs { background: var(--bg2); border-radius: var(--r2); padding: 10px 14px; }
.cs-lbl { font-size: .59rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--mu); margin-bottom: 3px; }
.cs-val { font-family: var(--f-mono); font-size: .88rem; font-weight: 700; color: var(--tx); }

/* ── Historial ─────────────────────────────────────────────── */
.hist-card {
  background: var(--surf);
  border: 1px solid var(--bd2);
  border-radius: var(--r4);
  padding: 24px;
  box-shadow: var(--s3);
  display: flex; flex-direction: column;
}
.hist-hd {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.hist-ttl  { font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mu); }
#histClear { font-size: .7rem; color: var(--mu); cursor: pointer; background: none; border: none; font-family: var(--f-sans); transition: color var(--t); }
#histClear:hover { color: var(--rd); }

#historyList { list-style: none; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: 340px; }
#historyList li {
  display: flex; align-items: center; gap: 11px;
  background: var(--bg2); border: 1px solid var(--bd);
  border-radius: var(--r2); padding: 11px 14px;
  cursor: pointer; transition: all var(--t);
  opacity: 0; transform: translateY(4px);
  font-size: .82rem;
}
#historyList li.show { opacity: 1; transform: translateY(0); transition: opacity .3s, transform .3s; }
#historyList li:hover  { border-color: var(--gold-bd); background: var(--gold-s); }
#historyList li.active { border-color: var(--gold-bd); background: var(--gold-s); }
#historyList li.removing { opacity:0; transform:translateX(10px); transition: all .2s; }

.history-main { flex: 1; min-width: 0; }
.history-main strong { display:block; font-family:var(--f-mono); font-size:.82rem; font-weight:700; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.history-date { font-size: .68rem; color: var(--mu); margin-top: 2px; }
.history-badge {
  display: inline-block; margin-top: 4px;
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  background: var(--gold); color: #fff;
  padding: 1px 7px; border-radius: 999px;
}
.history-delete {
  background: none; border: none; cursor: pointer;
  color: var(--mu); font-size: .78rem; padding: 4px 6px;
  border-radius: 5px; transition: all var(--t); box-shadow: none;
  flex-shrink: 0;
}
.history-delete:hover { background: var(--rd-s); color: var(--rd); }

.hist-empty { text-align:center; padding:24px 16px; color:var(--mu); font-size:.84rem; }

/* ══════════════════════════════════════════════════════════════
   GUÍA DE BOLSILLO
══════════════════════════════════════════════════════════════ */
.guide-card {
  background: var(--surf);
  border: 1px solid var(--bd2);
  border-radius: var(--r4);
  padding: 28px;
  box-shadow: var(--s3);
  margin-bottom: 24px;
  animation: up .6s var(--ease) .2s both;
  opacity: 0; animation-fill-mode: forwards;
}
.guide-hd {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;
}
.guide-lbl { font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mu); }
.guide-acts { display: flex; gap: 6px; }
#guideGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 7px; }
.guide-item {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg2); border: 1px solid var(--bd);
  border-radius: var(--r2); padding: 9px 13px;
  font-family: var(--f-mono); font-size: .78rem;
  cursor: pointer; transition: border-color var(--t);
}
.guide-item:hover { border-color: var(--gold-bd); }
.guide-item span  { color: var(--gold); font-weight: 700; }
#guideNote { font-size: .7rem; color: var(--mu); margin-top: 10px; }
#msgAdd, #msgRemove { font-size: .7rem; margin-top: 6px; }
#msgAdd    { color: var(--gr); }
#msgRemove { color: var(--rd); }

/* ══════════════════════════════════════════════════════════════
   INFO DE DIVISAS
══════════════════════════════════════════════════════════════ */
.info-section {
  margin-bottom: 36px;
  animation: up .6s var(--ease) .24s both;
  opacity: 0; animation-fill-mode: forwards;
}
.sec-ttl { font-size: 1.1rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: 5px; }
.sec-sub { font-size: .84rem; color: var(--mu); margin-bottom: 18px; }
#currencyInfoGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.currency-card {
  background: var(--surf); border: 1px solid var(--bd);
  border-radius: var(--r3); padding: 22px;
  transition: border-color var(--t), transform var(--t);
}
.currency-card:hover { border-color: var(--gold-bd); transform: translateY(-2px); }
.currency-card-header { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.currency-card-header .flag { font-size: 1.3rem; }
.currency-card-header h3 { font-size: .9rem; font-weight: 700; }
.currency-card p { font-size: .8rem; color: var(--tx2); line-height: 1.6; }
.info-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .76rem; font-weight: 700; color: var(--gold);
  margin-top: 10px; transition: gap var(--t);
}
.info-link:hover { gap: 7px; }

/* ══════════════════════════════════════════════════════════════
   OTROS CONVERSORES
══════════════════════════════════════════════════════════════ */
.other-section {
  margin-bottom: 40px;
  animation: up .6s var(--ease) .28s both;
  opacity: 0; animation-fill-mode: forwards;
}
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.tool-card {
  background: var(--surf); border: 1px solid var(--bd);
  border-radius: var(--r3); padding: 22px;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
  display: flex; flex-direction: column; gap: 7px;
}
.tool-card:hover { border-color: var(--gold-bd); transform: translateY(-2px); box-shadow: var(--sg); }
.tool-tag { font-family: var(--f-mono); font-size: .6rem; font-weight: 700; color: var(--gold); background: var(--gold-s); padding: 2px 8px; border-radius: 999px; display: inline-block; }
.tool-name { font-size: .95rem; font-weight: 700; }
.tool-desc { font-size: .8rem; color: var(--tx2); line-height: 1.6; }
.cta { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--gold); font-weight: 700; margin-top: 4px; transition: gap var(--t); }
.cta:hover { gap: 8px; }

/* ══════════════════════════════════════════════════════════════
   MODAL SELECTOR DE DIVISA
══════════════════════════════════════════════════════════════ */
#cpOverlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9999;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  align-items: center; justify-content: center; padding: 16px;
}
#cpOverlay.open { display: flex; }
.cp-modal {
  background: var(--surf);
  border: 1px solid var(--bd2);
  border-radius: var(--r4);
  width: 100%; max-width: 500px;
  max-height: 84vh;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
  animation: pop .22s var(--ease) both;
  overflow: hidden;
}
.cp-head { padding: 18px 18px 0; flex-shrink: 0; }
.cp-head-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; }
.cp-title { font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mu); }
.cp-close {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--bd2);
  color: var(--mu); font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--t);
}
.cp-close:hover { background: var(--rd-s); color: var(--rd); border-color: transparent; }
.cp-sw { position: relative; margin-bottom: 11px; }
.cp-si { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--mu); pointer-events: none; }
.cp-search {
  width: 100%; padding: 11px 13px 11px 40px;
  border: 1.5px solid var(--bd2); border-radius: 12px;
  background: var(--bg2); color: var(--tx);
  font-family: var(--f-sans); font-size: .9rem; outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}
.cp-search:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-s); }
.cp-search::placeholder { color: var(--mu); }
.cp-filters { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.cp-filters::-webkit-scrollbar { display: none; }
.cp-filter {
  flex-shrink: 0; height: 24px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--bd2); background: var(--bg2);
  font-size: .66rem; font-weight: 700; color: var(--mu);
  cursor: pointer; transition: all var(--t); font-family: var(--f-sans);
}
.cp-filter:hover { border-color: var(--gold-bd); color: var(--tx); }
.cp-filter.on   { background: var(--gold); border-color: var(--gold); color: #fff; }
.cp-list { flex: 1; overflow-y: auto; padding: 0 6px 10px; }
.cp-grp { padding: 7px 10px 3px; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--mu); position: sticky; top: 0; background: var(--surf); z-index: 1; }
[data-theme="dark"] .cp-grp { background: var(--surf); }
.cp-opt { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: pointer; transition: background var(--t); }
.cp-opt:hover { background: var(--gold-s); }
.cp-opt.cur   { background: var(--gold-s); }
.cp-opt-flag  { font-size: 1.2rem; width: 26px; text-align: center; line-height: 1; flex-shrink: 0; }
.cp-opt-code  { font-family: var(--f-mono); font-weight: 700; font-size: .82rem; color: var(--tx); min-width: 38px; }
.cp-opt-name  { font-size: .78rem; color: var(--mu); flex: 1; }
.cp-opt-chk   { color: var(--gold); opacity: 0; font-size: .8rem; }
.cp-opt.cur .cp-opt-chk { opacity: 1; }
.cp-empty { text-align: center; padding: 32px 16px; color: var(--mu); font-size: .88rem; }

/* ══════════════════════════════════════════════════════════════
   AI CHAT
══════════════════════════════════════════════════════════════ */
#aiToggle {
  position: fixed; bottom: 22px; right: 22px; z-index: 200;
  width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold));
  color: #000; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(184,137,42,.35);
  transition: transform var(--t), box-shadow var(--t);
}
#aiToggle:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(184,137,42,.45); }
#aiChatWidget {
  position: fixed; bottom: 84px; right: 22px; z-index: 200;
  width: 330px; background: var(--surf);
  border: 1px solid var(--bd2); border-radius: var(--r4);
  box-shadow: var(--s4); display: none; flex-direction: column; overflow: hidden;
}
#aiChatWidget.open { display: flex; }
.ai-head { background: var(--bg2); border-bottom: 1px solid var(--bd); padding: 13px 15px; display: flex; justify-content: space-between; align-items: center; }
.ai-dot  { width: 7px; height: 7px; border-radius: 50%; background: var(--gr); animation: pulse 2s infinite; }
.ai-ttl  { font-size: .8rem; font-weight: 700; display: flex; align-items: center; gap: 7px; }
#aiMessages { min-height: 180px; max-height: 260px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 7px; }
.msg { max-width: 86%; padding: 8px 12px; border-radius: 12px; font-size: .8rem; line-height: 1.5; }
.msg.user { background: var(--gold-s); border: 1px solid var(--gold-bd); align-self: flex-end; border-bottom-right-radius: 3px; color: var(--tx); }
.msg.bot  { background: var(--bg2); align-self: flex-start; border-bottom-left-radius: 3px; color: var(--tx2); }
.ai-inp   { border-top: 1px solid var(--bd); padding: 11px; display: flex; gap: 7px; }
#aiInput  { flex: 1; background: var(--bg2); border: 1px solid var(--bd2); border-radius: 8px; padding: 8px 12px; font-family: var(--f-sans); font-size: .8rem; color: var(--tx); outline: none; transition: border-color var(--t); }
#aiInput:focus { border-color: var(--gold); }
#aiSend   { width: 30px; height: 30px; border-radius: 8px; background: var(--gold); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; transition: background var(--t); }
#aiSend:hover { background: var(--gold-hi); }

/* ══════════════════════════════════════════════════════════════
   COOKIE BANNER
══════════════════════════════════════════════════════════════ */
#cookiePopup {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--surf); border: 1px solid var(--bd2);
  border-radius: var(--r4); padding: 16px 20px;
  display: none; align-items: center; gap: 14px;
  box-shadow: var(--s4); z-index: 300;
  max-width: 520px; width: calc(100% - 28px);
}
#cookiePopup p { font-size: .8rem; color: var(--tx2); flex: 1; line-height: 1.5; }
.cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-actions button {
  height: 32px; padding: 0 14px; border-radius: 8px;
  font-size: .76rem; font-weight: 700; cursor: pointer;
  font-family: var(--f-sans); transition: all var(--t); box-shadow: none;
}
#acceptCookies { background: var(--gold); border: 1px solid var(--gold); color: #fff; }
#acceptCookies:hover { background: var(--gold-hi); }
#configCookies { background: var(--surf2); border: 1px solid var(--bd2); color: var(--tx2); }
#configCookies:hover { border-color: var(--gold-bd); color: var(--gold); }

/* ══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--bg2);
  border-top: 1px solid var(--bd);
  margin-top: 60px;
}
.footer-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 36px; padding: 44px 32px;
}
.f-brand { font-size: .86rem; font-weight: 700; color: var(--gold); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.f-desc  { font-size: .8rem; color: var(--mu); line-height: 1.75; max-width: 270px; }
.f-col h4 { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: var(--tx2); margin-bottom: 13px; }
.f-col ul { list-style: none; }
.f-col li { margin-bottom: 8px; }
.f-col a  { font-size: .8rem; color: var(--mu); transition: color var(--t); }
.f-col a:hover { color: var(--gold); }
.footer-bottom {
  max-width: 1280px; margin: 0 auto;
  border-top: 1px solid var(--bd); padding: 14px 32px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
}
.footer-bottom p { font-size: .74rem; color: var(--mu); }
.f-chip { font-family: var(--f-mono); font-size: .65rem; background: var(--surf2); border: 1px solid var(--bd2); color: var(--mu); padding: 2px 10px; border-radius: 999px; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .below-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 680px) {
  .cv-row { grid-template-columns: 1fr; }
  .cvr-swap-btn { margin: 0 auto; }
  .cv-panel { padding: 22px 18px; }
  .tv-setup { grid-template-columns: 1fr 1fr; }
  .page-body { padding: 0 16px 80px; }
  .nav-inner { padding: 0 16px; }
  .float-ico { display: none; }
  .footer-inner { padding: 32px 16px; }
  .footer-bottom { padding: 12px 16px; }
}

/* ══════════════════════════════════════════════════════════════
   AESTHETIC UPGRADE — Animated hero · scroll reveal · 3D tilt
══════════════════════════════════════════════════════════════ */

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes gradShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes float1 {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-18px) rotate(4deg); }
}
@keyframes float2 {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-18px) rotate(-4deg); }
}
@keyframes float3 {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-24px); }
}

/* ── Hero wrap ──────────────────────────────────────────────── */
.hero-wrap {
  position: relative;
  overflow: hidden;
  margin-bottom: 48px;
}

/* Subtle gold shimmer on the existing light background */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg,
    rgba(184,137,42,.06)  0%,
    rgba(212,168,77,.04)  25%,
    rgba(184,137,42,.08)  50%,
    rgba(22,163,74,.03)   75%,
    rgba(184,137,42,.06)  100%
  );
  background-size: 400% 400%;
  animation: gradShift 12s ease infinite;
}

/* Decorative gold grid — fades at edges */
.hero-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(184,137,42,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,137,42,.07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
  mask-image:         radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

/* Floating orbs — low opacity, blurred color blobs */
.orb {
  position: absolute; z-index: 0;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .25;
  pointer-events: none;
}
.orb1 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, var(--gold-hi), transparent);
  top: -80px; left: -80px;
  animation: float1 8s ease-in-out infinite;
}
.orb2 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(22,163,74,.6), transparent);
  bottom: -60px; right: -60px;
  animation: float2 10s ease-in-out infinite;
}
.orb3 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(37,99,235,.5), transparent);
  top: 40%; right: 15%;
  animation: float3 7s ease-in-out infinite;
}

/* Floating emoji decorations */
.float-ico {
  position: absolute; z-index: 1;
  font-size: 1.8rem;
  opacity: .65;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.12));
}
.fi1 { top: 12%;    left: 8%;    animation: float1 7s   ease-in-out infinite; }
.fi2 { top: 55%;    left: 5%;    animation: float2 11s  ease-in-out infinite 2s; }
.fi3 { top: 20%;    right: 10%;  animation: float2 9s   ease-in-out infinite .5s; }
.fi4 { bottom: 15%; right: 8%;   animation: float1 6s   ease-in-out infinite 1.5s; }
.fi5 { bottom: 20%; left: 12%;   animation: float3 8s   ease-in-out infinite 1s; }

/* Hero content sits above decorations */
.hero-wrap .hero {
  position: relative; z-index: 2;
}

/* ── Gradient text on h1 ────────────────────────────────────── */
#mainTitle {
  background: linear-gradient(120deg, var(--gold-lo) 0%, var(--gold) 35%, var(--gold-hi) 60%, var(--gold) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradShift 5s ease infinite;
}

/* ── Scroll reveal ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 3D tilt cards ───────────────────────────────────────────── */
.tool-card, .guide-card {
  transition: box-shadow .3s, transform .12s;
  transform-style: preserve-3d;
  will-change: transform;
}
.tool-card:hover, .guide-card:hover {
  box-shadow: 0 22px 52px rgba(0,0,0,.1), 0 6px 18px rgba(184,137,42,.12);
}
@media (max-width: 480px) {
  .tv-setup { grid-template-columns: 1fr; }
  .chart-stats-row { grid-template-columns: 1fr 1fr; }
  #aiChatWidget { width: calc(100vw - 28px); right: 14px; }
  .hero h1 { font-size: 1.9rem; }
}

/* ── Multi-base clickable ─────────────────────────────────── */
.multi-base-trig {
  display:flex; flex-direction:column; gap:2px;
  background:var(--gold-s); border:1.5px solid var(--gold-bd);
  border-radius:var(--r2); padding:8px 14px;
  cursor:pointer; transition:all var(--t); text-align:left;
  font-family:var(--f-sans);
}
.multi-base-trig:hover { background:rgba(184,137,42,.18); }
.multi-base-lbl { font-size:.6rem; color:var(--gold); font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-top:1px; }

/* ── Barra exportar viaje ────────────────────────────────── */
.tv-export-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  margin-top: 18px; padding: 14px 18px;
  background: var(--bg2); border: 1px solid var(--bd2);
  border-radius: var(--r3);
  animation: up .25s var(--ease) both;
}
.tv-export-lbl {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mu);
}
.tv-export-btns { display: flex; gap: 7px; flex-wrap: wrap; }
.tv-exp-btn {
  display: flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 13px; border-radius: var(--r2);
  background: var(--surf); border: 1px solid var(--bd2);
  color: var(--tx2); font-size: .76rem; font-weight: 600;
  font-family: var(--f-sans); cursor: pointer;
  transition: all var(--t); box-shadow: var(--s1);
}
.tv-exp-btn:hover { border-color: var(--gold-bd); color: var(--gold); background: var(--gold-s); }
.tv-exp-btn#tvExportShare { background: var(--gold); color: #fff; border-color: var(--gold); }
.tv-exp-btn#tvExportShare:hover { background: var(--gold-hi); border-color: var(--gold-hi); color: #fff; }

/* ── Validación campo descripción viaje ──────────────────── */
.exp-in.err { border-color:var(--rd)!important; box-shadow:0 0 0 3px var(--rd-s)!important; animation:shake .3s ease; }
.exp-err { font-size:.72rem; color:var(--rd); font-weight:600; margin-top:4px; display:none; }
.exp-err.on { display:block; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }