/* ---------- capture layer (shared: fab + drawer + toast) ---------- */
.navbtn{position:fixed;top:86px;right:24px;width:50px;height:50px;border-radius:50%;
  background:var(--card);color:#002147;border:1px solid var(--line);cursor:pointer;z-index:43;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 14px rgba(22,24,28,.12);transition:transform .2s}
.navbtn:hover{transform:scale(1.06)}
.navbtn:focus-visible{outline:2px solid var(--bbva);outline-offset:3px}
.navbtn svg{width:20px;height:20px}
.fab{position:fixed;top:24px;right:24px;width:50px;height:50px;border-radius:50%;
  background:var(--ink);color:var(--card);border:0;cursor:pointer;z-index:43;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 14px rgba(22,24,28,.22);transition:transform .2s}
.fab:hover{transform:scale(1.06)}
.fab:focus-visible{outline:2px solid var(--bbva);outline-offset:3px}
.fab svg{width:20px;height:20px;transition:transform .25s}
.fab[aria-expanded="true"] svg{transform:rotate(45deg)}
.scrim{position:fixed;inset:0;background:rgba(22,24,28,.28);opacity:0;pointer-events:none;transition:opacity .28s;z-index:41}
.scrim.on{opacity:1;pointer-events:auto}
.navlink{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line-soft);
  font-size:14px;color:var(--ink);text-decoration:none;transition:color .15s}
.navlink:hover{color:var(--bbva)}
.navlink .n{width:22px;text-align:center;font-size:16px}
.drawer{position:fixed;top:0;right:0;bottom:0;width:410px;max-width:92vw;background:var(--card);
  border-left:1px solid var(--line);z-index:42;transform:translateX(100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.drawer.on{transform:none}
.dr-hd{padding:20px 22px 16px;border-bottom:1px solid var(--line)}
.dr-hd h3{font-family:'Fraunces',serif;font-size:24px;font-weight:400;letter-spacing:-.01em;margin-top:4px}
.dr-body{padding:18px 22px;overflow-y:auto;flex:1}
.hint{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:11px 13px;margin-bottom:18px;
  display:flex;gap:10px;align-items:flex-start;cursor:pointer;width:100%;text-align:left;font-family:inherit}
.hint:hover{border-color:var(--ink-3)}
.hint .n{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-3);flex:0 0 auto;margin-top:2px}
.hint p{font-size:12.5px;line-height:1.45}
.seg{margin-bottom:18px}
.seg-primary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.seg-secondary{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg-btn{font-family:inherit;border:1px solid var(--line);background:var(--card);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--ink-2);transition:transform .15s,box-shadow .15s,border-color .15s,background .15s}
.seg-btn:hover{border-color:var(--ink-3);transform:translateY(-1px)}
.seg-btn:active{transform:translateY(0)}
.seg-btn:focus-visible{outline:2px solid var(--bbva);outline-offset:2px}
.seg-badge{display:flex;align-items:center;justify-content:center;line-height:1;
  background:linear-gradient(145deg,#FFFFFF,#ECE9DE);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -2px 3px rgba(22,24,28,.07),0 1px 3px rgba(22,24,28,.10);
  transition:background .15s,box-shadow .15s}
.seg-label{font-weight:500}

.seg-btn--primary{gap:9px;padding:14px 6px 12px;border-radius:14px;
  box-shadow:0 1px 2px rgba(22,24,28,.03),0 3px 8px rgba(22,24,28,.03)}
.seg-btn--primary:hover{box-shadow:0 3px 12px rgba(22,24,28,.08)}
.seg-btn--primary .seg-badge{width:38px;height:38px;border-radius:12px;font-size:19px}
.seg-btn--primary .seg-label{font-size:12.5px;color:var(--ink)}
.seg-btn--primary[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--card);
  box-shadow:0 4px 14px rgba(22,24,28,.24)}
.seg-btn--primary[aria-pressed="true"] .seg-label{color:var(--card)}
.seg-btn--primary[aria-pressed="true"] .seg-badge{background:linear-gradient(145deg,#3A3D43,#202226);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.14),inset 0 -2px 3px rgba(0,0,0,.4),0 1px 4px rgba(0,0,0,.3)}
.seg-btn--primary[data-t="saldo"] .seg-badge{filter:hue-rotate(140deg) saturate(1.15)}

.seg-btn--secondary{gap:6px;padding:9px 4px 8px;border-radius:11px}
.seg-btn--secondary .seg-badge{width:28px;height:28px;border-radius:9px;font-size:14px}
.seg-btn--secondary .seg-label{font-size:10px;text-align:center;line-height:1.2}
.seg-btn--secondary[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--card)}
.seg-btn--secondary[aria-pressed="true"] .seg-badge{background:linear-gradient(145deg,#3A3D43,#202226);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.14),inset 0 -2px 3px rgba(0,0,0,.4)}
.f{margin-bottom:14px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f label{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;font-weight:500}
.f input,.f select,.f textarea{width:100%;font-family:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);
  border-radius:7px;background:var(--card);color:var(--ink)}
.f textarea{resize:vertical;min-height:52px;font-size:13px;line-height:1.45}
.f input.mono{font-family:'IBM Plex Mono',monospace}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--bbva);outline-offset:-1px;border-color:var(--bbva)}
.f .hint-line{font-size:10.5px;color:var(--ink-3);margin-top:6px}
.err{font-size:11.5px;color:var(--alert);margin-top:6px;display:none}
.err.on{display:block}
.dr-ft{padding:14px 22px 20px;border-top:1px solid var(--line)}
.submit{width:100%;font-family:inherit;font-size:14px;font-weight:500;padding:11px;border:0;border-radius:8px;
  background:var(--ink);color:var(--card);cursor:pointer}
.submit:hover{background:#000}
.submit:focus-visible{outline:2px solid var(--bbva);outline-offset:2px}
.recent{margin-top:22px;padding-top:16px;border-top:1px solid var(--line-soft)}
.recent li{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:6px 0;color:var(--ink-2);list-style:none}
.toast{position:fixed;bottom:24px;right:24px;background:var(--ink);color:var(--card);font-size:13px;
  padding:11px 16px;border-radius:8px;z-index:50;opacity:0;transform:translateY(8px);
  transition:opacity .25s,transform .25s;pointer-events:none}
.toast.on{opacity:1;transform:none}
@media(max-width:560px){.fab{top:auto;bottom:82px;right:20px}.navbtn{top:auto;bottom:20px;right:20px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
