/* ══════════════════════════════════════════
   BOLSILLO.CSS — Estilos de la vista Bolsillo
   ══════════════════════════════════════════ */

/* ── Calculadora de Divisas ── */
.calc-header    { font-size: 10px; font-weight: 800; color: #ffffff; text-transform: uppercase; letter-spacing: 2px; padding: 14px 14px 10px; }

.calc-inputs    { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); margin-bottom: 1px; }
.calc-input-cell {
  background: var(--s2);
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.calc-input-label { font-size: 10px; font-weight: 700; color: #ffffff; text-transform: uppercase; letter-spacing: 1.5px; display: flex; align-items: center; gap: 5px; }
.calc-input-label svg { color: var(--ye); opacity: 1; }
.calc-input-field {
  font-size: 28px;
  font-weight: 900;
  color: var(--ye);
  letter-spacing: -1px;
  background: none;
  border: none;
  outline: none;
  width: 100%;
  font-family: inherit;
  padding: 0;
}
.calc-input-field::placeholder { color: var(--t2); }

/* ── Grid de tasas ── */
.rates-grid     { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.rate-card      {
  background: var(--s2);
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: default;
}
.rate-card.rate-highlight {
  background: var(--s2);
  border: none;
  outline: none;
}
.rate-label     { font-size: 12px; font-weight: 700; color: #ffffff; }
.rate-label.lbl-ye { color: #ffffff; }
.rate-sublabel  { font-size: 10px; color: var(--t2); margin-bottom: 4px; }
.rate-val       { font-size: 17px; font-weight: 900; color: #ffffff; letter-spacing: -0.5px; }
.rate-card.rate-highlight .rate-val { color: #ffffff; }

/* ── Barra inferior tasas ── */
.rates-footer   { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-top: 1px solid var(--line); }
.rates-source   { font-size: 11px; color: var(--cy); letter-spacing: 0.3px; }

/* ── Gastos ── */
.exp-row               { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.exp-ico               { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.exp-body              { flex: 1; min-width: 0; }
.exp-body h4           { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-body p            { font-size: 10px; color: var(--t2); margin-top: 1px; }
.exp-amt               { font-size: 14px; font-weight: 700; color: var(--cy); white-space: nowrap; }
.exp-total-row         { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px; border-bottom: 1px solid var(--cy); }
.exp-total-row span    { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t2); }
.exp-total-row strong  { font-size: 20px; font-weight: 900; letter-spacing: -1px; color: var(--cy); }