/* ══════════════════════════════════════════════════════════════════
   TECNOVE — estilos
   Idea: es un libro de cuentas con dos columnas de moneda.
   El ocre es siempre bolívares. El verde es siempre USDT.
   Ese código de color se respeta en toda la app.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --paper:      #F6F5F1;
  --card:       #FFFFFF;
  --card-2:     #FBFAF7;
  --ink:        #171A1F;
  --ink-2:      #5A5F6A;
  --ink-3:      #8D929C;
  --rule:       #E2DED6;
  --rule-soft:  #EFEDE7;

  --bs:         #8F5415;   /* bolívares — texto */
  --bs-bar:     #B06A1E;   /* bolívares — barras y acentos */
  --bs-soft:    #FAF1E4;

  --usdt:       #0E6B5A;   /* USDT — texto */
  --usdt-bar:   #16856F;
  --usdt-soft:  #E6F1EE;

  --alert:      #A52B21;
  --alert-soft: #FAEBE9;
  --warn:       #7D5A0B;
  --warn-soft:  #FDF4DF;
  --ok:         #0E6B5A;

  --sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --r: 7px;
  --gut: 16px;
  --shadow: 0 1px 2px rgba(23, 26, 31, .06), 0 1px 1px rgba(23, 26, 31, .04);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #13151A;
    --card:       #1B1E24;
    --card-2:     #22262D;
    --ink:        #ECEAE5;
    --ink-2:      #A2A7B1;
    --ink-3:      #767C87;
    --rule:       #2B3038;
    --rule-soft:  #23272E;
    --bs:         #DCA259;
    --bs-bar:     #C9893E;
    --bs-soft:    #2A2219;
    --usdt:       #55C5A9;
    --usdt-bar:   #38A98E;
    --usdt-soft:  #16292A;
    --alert:      #E87664;
    --alert-soft: #2E1D1B;
    --warn:       #D9AE55;
    --warn-soft:  #2A2318;
    --ok:         #55C5A9;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  }
}
:root[data-theme="dark"] {
  --paper: #13151A; --card: #1B1E24; --card-2: #22262D;
  --ink: #ECEAE5; --ink-2: #A2A7B1; --ink-3: #767C87;
  --rule: #2B3038; --rule-soft: #23272E;
  --bs: #DCA259; --bs-bar: #C9893E; --bs-soft: #2A2219;
  --usdt: #55C5A9; --usdt-bar: #38A98E; --usdt-soft: #16292A;
  --alert: #E87664; --alert-soft: #2E1D1B;
  --warn: #D9AE55; --warn-soft: #2A2318; --ok: #55C5A9;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Los iconos miden lo mismo en todas partes. Los gráficos se excluyen:
   ellos llevan su propio tamaño, calculado al dibujarlos. */
svg:not(.viz-svg) { width: 16px; height: 16px; flex-shrink: 0; display: block; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body { overflow-x: hidden; }

button, input, select, textarea { font-family: inherit; font-size: inherit; }

:focus-visible { outline: 2px solid var(--usdt-bar); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Cabecera ────────────────────────────────────────────────────── */

.top {
  position: sticky; top: 0; z-index: 30;
  background: var(--card);
  border-bottom: 1px solid var(--rule);
}

.top-row {
  max-width: 900px; margin: 0 auto;
  padding: 11px var(--gut) 9px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

.brand {
  font-weight: 700; font-size: 17px; letter-spacing: -.3px;
  display: flex; align-items: baseline; gap: 7px;
}
.brand small {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  color: var(--ink-3); letter-spacing: .5px; text-transform: uppercase;
}

.top-actions { display: flex; gap: 6px; align-items: center; }

/* ── La banda de tasas: el elemento firma ───────────────────────── */

.band {
  border-top: 1px solid var(--rule-soft);
  background: var(--card-2);
}
.band-in {
  max-width: 900px; margin: 0 auto;
  padding: 8px var(--gut);
  display: flex; align-items: center; gap: 18px;
  overflow-x: auto; scrollbar-width: none;
}
.band-in::-webkit-scrollbar { display: none; }

.band-item { display: flex; flex-direction: column; line-height: 1.2; flex-shrink: 0; }
.band-item .lbl {
  font-family: var(--mono); font-size: 9px; letter-spacing: .9px;
  text-transform: uppercase; color: var(--ink-3);
}
.band-item .val {
  font-family: var(--mono); font-weight: 600; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.band-item.bs .val { color: var(--bs); }
.band-item.usdt .val { color: var(--usdt); }

.band-gap {
  margin-left: auto; display: flex; flex-direction: column;
  align-items: flex-end; line-height: 1.1; flex-shrink: 0; padding-left: 10px;
}
.band-gap .lbl {
  font-family: var(--mono); font-size: 9px; letter-spacing: .9px;
  text-transform: uppercase; color: var(--ink-3);
}
.band-gap .val {
  font-family: var(--mono); font-weight: 700; font-size: 20px;
  font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}

.band.stale { background: var(--warn-soft); border-top-color: var(--warn); }
.band.stale .band-warn {
  font-size: 12px; color: var(--warn); font-weight: 600;
  display: flex; align-items: center; gap: 6px; text-align: left;
  line-height: 1.25; flex-shrink: 0; font-family: var(--sans);
}
.band-warn svg { width: 15px; height: 15px; }

/* ── Navegación ──────────────────────────────────────────────────── */

.tabs-top { display: none; }

@media (min-width: 880px) {
  .tabs-top {
    display: block; background: var(--card);
    border-bottom: 1px solid var(--rule);
    position: sticky; top: 0; z-index: 25;
  }
  .tabs-top-in {
    max-width: 900px; margin: 0 auto; padding: 0 var(--gut);
    display: flex; gap: 2px;
  }
  .tabs-top button {
    background: none; border: none; cursor: pointer;
    padding: 11px 13px; font-size: 14px; font-weight: 500;
    color: var(--ink-2); border-bottom: 2px solid transparent;
  }
  .tabs-top button.on {
    color: var(--ink); font-weight: 600;
    border-bottom-color: var(--usdt-bar);
  }
  .tabbar { display: none !important; }
  main { padding-bottom: 40px !important; }
}

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: var(--card); border-top: 1px solid var(--rule);
  display: flex; padding-bottom: env(safe-area-inset-bottom, 0);
}
.tabbar button {
  flex: 1; background: none; border: none; cursor: pointer;
  padding: 8px 2px 9px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--ink-3); border-top: 2px solid transparent; margin-top: -1px;
}
.tabbar button.on { color: var(--ink); border-top-color: var(--usdt-bar); }
.tabbar button span { font-size: 10px; font-weight: 600; letter-spacing: .1px; }
.tabbar svg { width: 20px; height: 20px; }

main {
  max-width: 900px; margin: 0 auto;
  padding: 16px var(--gut) 90px;
}

/* ── Piezas ──────────────────────────────────────────────────────── */

.h1 {
  font-size: 21px; font-weight: 700; letter-spacing: -.4px;
  margin: 0 0 3px;
}
.sub { color: var(--ink-2); font-size: 13px; margin: 0 0 16px; }

.eyebrow {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px;
}

.card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 14px;
}
.card + .card { margin-top: 10px; }
.card.tap { cursor: pointer; }
.card.tap:active { background: var(--card-2); }
.card.flag { border-left: 3px solid var(--alert); }
.card.flag-warn { border-left: 3px solid var(--warn); }
.card.flag-ok { border-left: 3px solid var(--usdt-bar); }

.grid { display: grid; gap: 10px; }
.grid.g2 { grid-template-columns: 1fr 1fr; }
.grid.g3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .grid.g3 { grid-template-columns: 1fr 1fr; } }

.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

/* ── Dinero: USDT grande arriba, bolívares chico abajo ──────────── */

.money { line-height: 1.15; }
.money .u {
  font-family: var(--mono); font-weight: 600; color: var(--usdt);
  font-variant-numeric: tabular-nums; letter-spacing: -.3px;
}
.money .u .cur { font-size: .58em; margin-left: 2px; opacity: .7; font-weight: 500; }
.money .b {
  font-family: var(--mono); font-size: 11px; color: var(--bs);
  font-variant-numeric: tabular-nums;
}
.money .d {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.money.right { text-align: right; }
.money.neg .u { color: var(--alert); }
.money.sz-s .u { font-size: 14px; }
.money.sz-m .u { font-size: 17px; }
.money.sz-l .u { font-size: 23px; }
.money.sz-xl .u { font-size: 29px; }

.n { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.n.big { font-size: 25px; font-weight: 600; letter-spacing: -.5px; }
.n.pos { color: var(--usdt); }
.n.neg { color: var(--alert); }

/* ── Etiquetas ───────────────────────────────────────────────────── */

.chip {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .5px;
  text-transform: uppercase; padding: 3px 6px; border-radius: 3px;
  border: 1px solid currentColor; white-space: nowrap; font-weight: 500;
  display: inline-block;
}
.chip.c-ok { color: var(--usdt); }
.chip.c-warn { color: var(--warn); }
.chip.c-alert { color: var(--alert); }
.chip.c-mute { color: var(--ink-3); }
.chip.c-bs { color: var(--bs); }
.chip.fill-alert { background: var(--alert-soft); }
.chip.fill-warn { background: var(--warn-soft); }
.chip.fill-ok { background: var(--usdt-soft); }

/* ── Botones ─────────────────────────────────────────────────────── */

.btn {
  border-radius: 5px; cursor: pointer; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 15px; font-size: 14px; border: 1px solid transparent;
  background: var(--ink); color: var(--paper); text-decoration: none;
}
.btn:active { opacity: .85; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.green { background: var(--usdt-bar); color: #fff; }
.btn.danger { background: transparent; color: var(--alert); border-color: var(--alert); }
.btn.s { padding: 6px 10px; font-size: 12.5px; }
.btn.full { width: 100%; }
.btn[disabled] { opacity: .45; cursor: default; }
.btn svg { width: 15px; height: 15px; }

.ibtn {
  background: none; border: 1px solid var(--rule); border-radius: 5px;
  cursor: pointer; padding: 6px; color: var(--ink-2);
  display: inline-flex; align-items: center;
}
.ibtn svg { width: 15px; height: 15px; }
.ibtn.danger { color: var(--alert); }

/* ── Formularios ─────────────────────────────────────────────────── */

.field { display: block; margin-bottom: 12px; }
.field > .lbl {
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 4px; display: block;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 11px;
  border: 1px solid var(--rule); border-radius: 5px;
  background: var(--card); color: var(--ink); outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--usdt-bar); }
.field input.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.field.inline-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Vale dentro y fuera de un campo, porque algunos avisos van sueltos. */
.hint {
  display: block; font-size: 11.5px; color: var(--ink-3);
  margin-top: 4px; line-height: 1.45;
}
.hint .btn.s { margin-top: 5px; }
.field > .hint { margin-bottom: 0; }
.field + .hint { margin: -8px 0 12px; }

.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pills button {
  background: transparent; border: 1px solid var(--rule); border-radius: 4px;
  padding: 7px 11px; font-size: 13px; cursor: pointer; color: var(--ink-2);
  font-weight: 500;
}
.pills button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ── Panel modal ─────────────────────────────────────────────────── */

.scrim {
  position: fixed; inset: 0; background: rgba(23, 26, 31, .5);
  z-index: 60; display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  background: var(--paper); width: 100%; max-width: 560px;
  max-height: 93vh; border-radius: 10px 10px 0 0;
  display: flex; flex-direction: column;
  border-top: 3px solid var(--ink);
}
@media (min-width: 620px) {
  .scrim { align-items: center; }
  .sheet { border-radius: 10px; max-height: 88vh; border-top-width: 3px; }
}
.sheet-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--rule); flex-shrink: 0;
}
.sheet-top h3 { margin: 0; font-size: 16px; font-weight: 700; }
.sheet-body { padding: 16px; overflow-y: auto; flex: 1; }
.sheet-foot {
  padding: 13px 16px; border-top: 1px solid var(--rule);
  background: var(--card); flex-shrink: 0;
  padding-bottom: calc(13px + env(safe-area-inset-bottom, 0px));
}

/* ── Listas ──────────────────────────────────────────────────────── */

.lrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 0; border-top: 1px solid var(--rule-soft);
}
.lrow:first-of-type { border-top: none; }
.lrow .main { min-width: 0; flex: 1; }
.lrow .t { font-weight: 600; font-size: 14px; }
.lrow .s { font-size: 12px; color: var(--ink-2); }
.lrow.tap { cursor: pointer; }

.empty { text-align: center; padding: 42px 18px; color: var(--ink-3); }
.empty .t { font-weight: 700; color: var(--ink); font-size: 15px; margin-bottom: 5px; }
.empty .s { font-size: 13px; line-height: 1.55; margin-bottom: 15px; }
.empty svg { width: 34px; height: 34px; margin: 0 auto 11px; opacity: .55; }

/* ── Barras del análisis ─────────────────────────────────────────── */

.bars { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 1fr; gap: 3px; }
.bar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px;
}
.bar-head .nm { font-weight: 600; }
.bar-track {
  height: 7px; background: var(--rule-soft); border-radius: 4px; overflow: hidden;
  display: flex;
}
.bar-fill { height: 100%; background: var(--usdt-bar); }
.bar-fill.cost { background: var(--bs-bar); }
.bar-fill.neg { background: var(--alert); }

table.t {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
table.t th {
  text-align: right; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .6px; text-transform: uppercase; color: var(--ink-3);
  padding: 0 0 7px; font-weight: 500; white-space: nowrap;
}
table.t th:first-child, table.t td:first-child { text-align: left; }
table.t td {
  padding: 8px 0; border-top: 1px solid var(--rule-soft);
  text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums;
}
table.t td:first-child { font-family: var(--sans); font-weight: 500; }
.scroll-x { overflow-x: auto; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); }

/* ── Login ───────────────────────────────────────────────────────── */

.login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-card { width: 100%; max-width: 360px; }
.login-card .mark {
  font-size: 26px; font-weight: 700; letter-spacing: -.6px; margin-bottom: 2px;
}
.login-card .tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 22px;
}

.msg {
  padding: 10px 12px; border-radius: 5px; font-size: 13px;
  display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px;
}
.msg.err { background: var(--alert-soft); color: var(--alert); }
.msg.warn { background: var(--warn-soft); color: var(--warn); }
.msg.ok { background: var(--usdt-soft); color: var(--usdt); }
.msg svg { width: 15px; height: 15px; margin-top: 2px; }

.note {
  font-size: 12px; color: var(--ink-2); line-height: 1.55;
  background: var(--card-2); border-radius: 5px; padding: 10px 11px;
}
.note b { color: var(--ink); }

.loading { text-align: center; padding: 60px 20px; color: var(--ink-3); }

/* ══════════════════════════════════════════════════════════════════
   GRÁFICOS
   Los dos colores pasan las comprobaciones de daltonismo y contraste
   contra la superficie de cada modo. Si los cambias, vuelve a validarlos.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --viz-1: #008F72;   /* USDT · ganancia · lo que entra */
  --viz-2: #8F5415;   /* bolívares · costo · lo que sale */
  --viz-grid: #E8E5DE;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --viz-1: #1FA183;
    --viz-2: #C47C2E;
    --viz-grid: #2B3038;
  }
}
:root[data-theme="dark"] {
  --viz-1: #1FA183;
  --viz-2: #C47C2E;
  --viz-grid: #2B3038;
}

.viz { position: relative; width: 100%; }
.viz-svg {
  display: block; overflow: visible;
  width: auto; height: auto; max-width: 100%;
}
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-axis {
  font-family: var(--mono); font-size: 9px; fill: var(--ink-3);
}
.viz-dato {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; fill: var(--ink-2);
}
.viz-cursor { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.viz-hit { cursor: pointer; }
.viz-vacio {
  padding: 26px 12px; text-align: center; color: var(--ink-3); font-size: 13px;
}

/* Tooltip */
.tt {
  position: absolute; display: none; z-index: 5; pointer-events: none;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 5px; padding: 8px 10px; box-shadow: 0 3px 10px rgba(0,0,0,.13);
  min-width: 132px;
}
.tt-tit { font-weight: 700; font-size: 12px; margin-bottom: 5px; }
.tt-row {
  display: flex; align-items: center; gap: 6px; font-size: 11.5px;
  line-height: 1.7;
}
.tt-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.tt-lbl { color: var(--ink-2); }
.tt-val {
  margin-left: auto; font-family: var(--mono); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.tt-sep { border-top: 1px solid var(--rule-soft); margin: 4px 0; }
.tt-pie { font-size: 10.5px; color: var(--ink-3); margin-top: 4px; }

/* Leyenda */
.leyenda {
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 9px;
  font-size: 12px; color: var(--ink-2);
}
.ley-item { display: flex; align-items: center; gap: 5px; }
.ley-dot { width: 9px; height: 9px; border-radius: 2px; }

/* Barras horizontales */
.viz-h { display: flex; flex-direction: column; gap: 10px; }
.hrow { display: flex; flex-direction: column; gap: 3px; }
.hhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hnom { font-weight: 600; font-size: 13px; }
.htrack {
  height: 7px; background: var(--rule-soft); border-radius: 4px; overflow: hidden;
}
.hfill { height: 100%; border-radius: 4px; }
.hpie { font-size: 11.5px; color: var(--ink-3); }

/* Cifras grandes */
.cifra { }
.cifra-lbl {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px;
}
.cifra-val {
  font-family: var(--mono); font-size: 25px; font-weight: 600;
  letter-spacing: -.6px; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.cifra-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* Resultado de la calculadora */
.precio-hero {
  text-align: center; padding: 16px 12px;
  background: var(--usdt-soft); border-radius: var(--r);
}
.precio-hero .lbl {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px;
}
.precio-hero .val {
  font-family: var(--mono); font-size: 38px; font-weight: 700;
  color: var(--usdt); letter-spacing: -1.5px; line-height: 1;
}
.precio-hero .sub {
  font-family: var(--mono); font-size: 12.5px; color: var(--bs); margin-top: 5px;
}

/* La tabla comparativa de la calculadora lleva muchas columnas:
   se deja desplazar en vez de apretar los números. */
.scroll-x table.t { min-width: 330px; }
.scroll-x table.t th, .scroll-x table.t td { padding-left: 7px; white-space: nowrap; }
.scroll-x table.t th:first-child, .scroll-x table.t td:first-child { padding-left: 0; }