/* Banca Conversacional · Banco Demo — tokens y componentes compartidos del asistente (app mobile y web desktop)
   Referencia visual: Figma "Exploraciones | Interno" (App). Tipografía Satoshi (Fontshare) en /fonts. */
@font-face{font-family:'Satoshi';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/satoshi-400.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/satoshi-500.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/satoshi-700.woff2') format('woff2')}

/* Layout: pantalla de app (izq.) + "detrás de escena" (der.). Solo tema claro. */
:root{
  color-scheme:light;
  --page:#E9ECF5;
  --bg:#F3F3F3;              /* fondo de app */
  --surface:#FFFFFF;         /* Backgrounds/App/Level 3 */
  --tile:#F3F3F3;            /* tile de ícono */
  --ink:#111111;             /* Text Color/Extra Contrast */
  --ink-2:#333333;           /* Text Color/High Contrast */
  --muted:#666666;           /* Text Color/Regular Contrast */
  --line:#E0E0E0;            /* borde de botón secundario / inputs */
  --line-card:#E9E9E9;       /* borde de card */
  --line-row:#EEEEEE;        /* separador de lista */
  --accent:#082B99;          /* Brand Color/Web/Primary */
  --accent-soft:rgba(8,43,153,.10);
  --accent-tint:#E6EAF5;
  --on-accent:#FFFFFF;
  --dis-bg:#E0E0E0; --dis-ink:#9E9E9E;
  --ok:#00743C; --ok-bg:#E8F4EC; --ok-line:#CDE2D4; --ok-strong:#008042;
  --err:#A00001; --err-bg:#FFE4E5; --err-strong:#EC0002;
  --pend:#854000; --pend-bg:#FFF4E9;
  --info-bg:#E6EAF5;
  --msg-bg:#FFD635;
  --r-rag:#0C7FC0; --r-tool:#082B99; --r-data:#008042; --r-human:#E0560E; --r-guard:#DD0417; --r-pro:#9B3FA1;
  --shadow-card:0 8px 16px rgba(109,114,128,.10);
  --radius-xs:4px; --radius-s:8px; --radius-m:12px; --radius-l:16px; --radius-full:999px;
  --f-body:"Satoshi", "Helvetica Neue", Arial, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
}
*{box-sizing:border-box}
body{color:var(--ink-2);font-family:var(--f-body);font-weight:500;font-size:14px;line-height:20px}
[hidden]{display:none!important}
html,body{margin:0}
img{max-width:100%}

.nav{display:flex;align-items:center;gap:8px;padding:10px 12px 12px;background:var(--bg)}
.nav .t{flex:1;min-width:0;line-height:20px}
.nav .t b{display:block;font-size:20px;line-height:28px;font-weight:500;color:var(--ink)}
.nav .t small{display:flex;align-items:center;gap:6px;font-size:12px;line-height:18px;color:var(--muted)}
.nav .t small::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok-strong)}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;color:var(--ink-2);background:none;border:0;padding:0;flex:none}
.icon-btn.round{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m)}
.msgs{flex:1;overflow-y:auto;padding:4px 16px 16px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.msgs > *{flex-shrink:0}  /* sin esto, las tarjetas con overflow:hidden (opciones, resultado) se aplastan cuando el chat se llena */
.day{align-self:flex-start;font-size:12px;line-height:18px;color:var(--muted)}
.b{max-width:86%;padding:10px 14px;border-radius:var(--radius-l);font-size:14px;line-height:20px;font-weight:500;min-width:0;overflow-wrap:anywhere}
.b.bot{background:var(--surface);color:var(--ink-2);border:1px solid var(--line-card);border-bottom-left-radius:var(--radius-xs);align-self:flex-start;box-shadow:var(--shadow-card)}
.b.me{background:var(--accent);color:var(--on-accent);border-bottom-right-radius:var(--radius-xs);align-self:flex-end}
.b.sys{align-self:center;background:none;border:0;box-shadow:none;color:var(--muted);font-size:12px;line-height:18px;text-align:center;padding:2px 8px}
.b p{margin:0;white-space:pre-line}.b p+p{margin-top:6px}
.b b{font-weight:700;color:var(--ink)}
.src{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.src span{font-size:12px;line-height:18px;color:var(--accent);background:var(--accent-tint);padding:2px 8px;border-radius:var(--radius-xs)}
.agent{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--r-human);font-weight:700;margin-bottom:2px}
.typing{display:flex;gap:4px;padding:16px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:bl 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bl{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* card: blanco, radio 16, borde #E9E9E9 y sombra suave (Cuentas destacadas / Préstamos) */
.card{align-self:stretch;background:var(--surface);border:1px solid var(--line-card);border-radius:var(--radius-l);padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-card)}
.eyebrow{font-size:16px;line-height:24px;font-weight:500;color:var(--ink)}
.card h3{margin:0;font-size:18px;line-height:28px;font-weight:500;color:var(--ink)}
.big{font-size:24px;line-height:32px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.cur{font-size:inherit;font-weight:500;color:var(--ink);margin-right:4px}
.rows{display:flex;flex-direction:column}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-row);font-size:14px;line-height:20px;font-variant-numeric:tabular-nums}
.row:last-child{border-bottom:0}
.row > span:first-child{color:var(--muted);min-width:0}
.row b{font-weight:500;color:var(--ink);text-align:right}
.row input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}
label.row{cursor:pointer}
.actions{display:flex;flex-direction:column;gap:8px}
.actions .btn{width:100%}
button{font:inherit;cursor:pointer}
/* primario: azul marino, radio 12 · secundario: tinte azul (como "Transferir") */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--accent);border-radius:var(--radius-m);min-height:48px;padding:12px 16px;font-weight:500;font-size:16px;line-height:24px;background:var(--accent);color:var(--on-accent);text-wrap:balance}
.btn:not(.ghost)::after{content:"→";font-size:18px;line-height:1}
.btn.ghost{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.btn:disabled{background:var(--dis-bg);border-color:var(--dis-bg);color:var(--dis-ink);cursor:default}
.btn.ghost:disabled{background:var(--bg);color:var(--dis-ink)}
/* selector tipo chip (Ordenar / Filtros) */
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:6px 14px;font-size:14px;line-height:20px;font-weight:500;font-variant-numeric:tabular-nums;border-radius:var(--radius-full)}
.seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn:focus-visible,.chip:focus-visible,.icon-btn:focus-visible,.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* input: "Desde tu cuenta" / campos con radio 8 */
.field{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s);padding:8px 12px}
.field:focus-within{border-color:var(--accent)}
.field label{font-size:12px;line-height:18px;color:var(--muted)}
.field input{font:500 18px/28px var(--f-body);font-variant-numeric:tabular-nums;border:0;background:transparent;color:var(--accent);padding:0;width:100%;outline:none}
.field input.txt{font-size:16px;line-height:24px;color:var(--ink)}
.field:has(.seg){border:0;padding:0;background:transparent;gap:8px}
.lbl{font-size:12px;line-height:18px;color:var(--muted)}
/* avisos */
.warn,.disc{font-size:12px;line-height:18px;font-weight:500;border-radius:var(--radius-s);padding:8px 12px}
.warn{background:var(--err-bg);color:var(--err)}
.disc{background:var(--info-bg);color:var(--ink-2)}
.disc.pend{background:var(--pend-bg);color:var(--pend)}
.msg{display:flex;align-items:center;gap:8px;background:var(--msg-bg);color:var(--ink);font-size:14px;line-height:20px;padding:6px 10px;border-radius:var(--radius-s);align-self:flex-start}
.okline{align-self:flex-start;font-size:12px;line-height:18px;color:var(--ok);background:var(--ok-bg);border-radius:var(--radius-xs);padding:2px 6px}
.note{font-size:14px;line-height:20px;color:var(--muted)}
/* resultado: cabecera verde "¡Listo!" */
.result{padding:0;overflow:hidden;gap:0;text-align:center}
.result .hd{background:var(--ok-strong);color:#fff;padding:20px 16px 18px;display:flex;flex-direction:column;align-items:center;gap:4px}
.result .chk{width:44px;height:44px}
.result .amt{font-size:20px;line-height:28px;font-weight:500;color:#fff}
.result .amt .cur{color:#fff}
.result .sub{font-size:14px;line-height:20px;color:#fff;opacity:.95}
.result .rows{padding:4px 16px 8px;text-align:left}
.result .hd span{color:#fff!important}
/* movimientos (Últimos movimientos) */
.mov{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-row)}
.mov:last-child{border-bottom:0}
.mov .ic{grid-row:span 2;width:40px;height:40px;border-radius:var(--radius-s);background:var(--tile);border:1px solid var(--line-card);display:grid;place-items:center;color:var(--ink-2)}
.mov .n{font-size:14px;line-height:20px;color:var(--ink-2);min-width:0}
.mov .d{font-size:14px;line-height:20px;color:var(--muted);grid-column:2}
.mov .r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;grid-row:span 2;grid-column:3}
.amt-pill{font-size:14px;line-height:20px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.amt-pill small{font-size:14px;margin-right:4px}
.amt-pill.cr{color:var(--ink)}
.amt-pill.db{color:var(--ink)}
.amt-pill.pe{color:var(--pend)}
.stag{font-size:12px;line-height:18px;border-radius:var(--radius-xs);padding:0 4px}
.stag.pe{background:var(--pend-bg);color:var(--pend)}.stag.er{background:var(--err-bg);color:var(--err)}.stag.ok{background:var(--ok-bg);color:var(--ok)}
.time{font-size:12px;line-height:18px;color:var(--muted)}
/* cuenta (Cuentas destacadas) */
.ribbon{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:12px 0;border-bottom:1px solid var(--line-row)}
.ribbon:last-child{border-bottom:0}
.ribbon .ic{display:none}
.ribbon .k{font-size:14px;line-height:20px;color:var(--ink-2)}
.ribbon .s{font-size:14px;line-height:20px;color:var(--muted);grid-column:1}
.ribbon .v{grid-row:span 2;grid-column:2;align-self:center;font-size:20px;line-height:28px;font-weight:500;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ribbon .v sup{order:-1}
.bars{display:flex;flex-direction:column;gap:8px}
.bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:14px;font-variant-numeric:tabular-nums}
.bar b{font-weight:500;color:var(--ink)}
.bar .track{grid-column:1/-1;height:6px;background:var(--tile);border-radius:var(--radius-full);overflow:hidden}
.bar .fill{height:100%;background:var(--accent);border-radius:var(--radius-full)}
.badge{font-size:12px;line-height:18px;padding:0 4px;border-radius:var(--radius-xs);background:var(--tile);color:var(--ink);white-space:nowrap;display:inline-block;margin-top:2px}
.badge.ok{color:var(--ok);background:var(--ok-bg)}.badge.due{color:var(--pend);background:var(--pend-bg)}

/* sugerencias = chips de filtro · composer = buscador */
.chips{display:flex;gap:8px;overflow-x:auto;padding:8px 16px 4px;scrollbar-width:none;background:var(--bg)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--radius-full);padding:6px 14px;font-size:14px;line-height:20px;font-weight:500;white-space:nowrap}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.composer{display:flex;gap:8px;padding:8px 16px 18px;background:var(--bg)}
.composer input{flex:1;min-width:0;font:500 14px/20px var(--f-body);border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--radius-full);padding:13px 16px}
.composer input::placeholder{color:var(--muted)}
.composer input:focus{outline:none;border-color:var(--accent)}
.send{width:48px;height:48px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;flex:none;box-shadow:0 4px 10px rgba(8,43,153,.3)}
.send:disabled{background:var(--dis-bg);box-shadow:none}

.stage{display:flex;flex-direction:column;gap:12px;min-width:0}
.legend{background:var(--surface);border:1px solid var(--line-card);border-radius:var(--radius-l);padding:16px 20px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-card)}
.lg-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.legend h2{margin:0;font-size:20px;line-height:28px;font-weight:500;color:var(--ink)}
.engine{font-size:12px;display:flex;align-items:center;gap:6px;color:var(--muted)}
.engine i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.engine.ai i{background:var(--ok-strong)}.engine.rules i{background:var(--r-human)}
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;counter-reset:s}
@media (max-width:560px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.flow li{counter-increment:s;background:var(--bg);border-radius:var(--radius-m);padding:10px 12px;font-size:12px;line-height:18px;color:var(--muted)}
.flow li b{display:block;color:var(--ink);font-size:14px;font-weight:500}
.flow li::before{content:counter(s);font-size:12px;font-weight:700;color:var(--accent);display:block}
.keys{display:flex;flex-wrap:wrap;gap:6px}
.pill{font-size:12px;line-height:1;font-weight:500;padding:6px 10px;border-radius:var(--radius-full);color:var(--c);background:color-mix(in srgb,var(--c) 10%,#fff);white-space:nowrap}
.p-rag{--c:var(--r-rag)}.p-tool{--c:var(--r-tool)}.p-data{--c:var(--r-data)}.p-human{--c:var(--r-human)}.p-guard{--c:var(--r-guard)}.p-pro{--c:var(--r-pro)}
.traces{display:flex;flex-direction:column;gap:10px}
.trace{background:var(--surface);border:1px solid var(--line-card);border-left:4px solid var(--c);border-radius:var(--radius-m);padding:12px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.trace.new{animation:in .35s ease-out}
@keyframes in{from{transform:translateY(-6px);opacity:.4}to{transform:none;opacity:1}}
.t-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.t-head q{font-weight:500;font-size:16px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.t-head time{font:400 11px var(--f-mono);color:var(--muted);flex:none}
.steps{display:grid;grid-template-columns:110px minmax(0,1fr);gap:6px 12px;font-size:14px;line-height:20px;margin:0}
@media (max-width:480px){.steps{grid-template-columns:minmax(0,1fr)}.steps dt{margin-top:4px}}
.steps dt{color:var(--muted);font-size:11px;line-height:20px;text-transform:uppercase;letter-spacing:.04em}
.steps dd{margin:0;min-width:0;color:var(--ink-2)}
.steps b{font-weight:700}
code,.code{font:400 12px/1.5 var(--f-mono)}
.code{display:block;background:var(--bg);border-radius:var(--radius-s);padding:8px 10px;overflow-x:auto;white-space:pre;color:var(--ink-2)}
.docs{display:flex;flex-direction:column;gap:3px}
.doc{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.doc.off{color:#BBBBBB;text-decoration:line-through}
.doc code{color:var(--muted)}
.foot{color:var(--muted);font-size:14px;line-height:20px;max-width:80ch;margin:0}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{font-family:var(--f-body);font-size:11px;font-weight:500;fill:var(--muted)}
.chart text.v{fill:var(--ink);font-size:12px;font-weight:700}
.chart .hit{fill:transparent;cursor:default}
.chart-title{font-size:12px;line-height:18px;color:var(--muted);margin-bottom:-6px}
.lgd{display:flex;flex-direction:column;gap:6px}
.lgd .li{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;align-items:center;gap:8px;font-size:14px;line-height:20px}
.lgd .sw{width:10px;height:10px;border-radius:2px}
.lgd .li span{color:var(--muted)}
.lgd .li b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.lgd .li em{font-style:normal;font-size:12px;color:var(--muted);min-width:36px;text-align:right;font-variant-numeric:tabular-nums}
.donut-wrap{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center}
.tip{position:fixed;z-index:50;pointer-events:none;background:#111;color:#fff;font-size:12px;line-height:16px;padding:6px 8px;border-radius:var(--radius-s);white-space:nowrap;transform:translate(-50%,calc(-100% - 10px))}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fact{background:var(--bg);border-radius:var(--radius-m);padding:10px 12px;min-width:0}
.fact span{display:block;font-size:12px;line-height:18px;color:var(--muted)}
.fact b{display:block;font-size:16px;line-height:24px;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.card.choice{padding:0;gap:0;overflow:hidden}
.choice .q{padding:14px 16px 10px;font-size:16px;line-height:24px;font-weight:500;color:var(--ink)}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);border:0;border-top:1px solid var(--line-row);padding:12px 16px;font-size:14px;line-height:20px;font-weight:500;color:var(--ink)}
.opt::after{content:"";width:8px;height:8px;border-right:2px solid var(--accent);border-top:2px solid var(--accent);transform:rotate(45deg);flex:none;margin-right:4px}
.opt:hover:not(:disabled){background:var(--accent-tint)}
.opt .av{width:40px;height:40px;border-radius:50%;background:var(--accent-tint);color:var(--accent);display:grid;place-items:center;font-size:14px;font-weight:700;flex:none}
.opt .tx{flex:1;min-width:0}
.opt .tx small{display:block;font-size:12px;line-height:18px;color:var(--muted);font-weight:500}
.opt[aria-pressed="true"]{background:var(--accent-tint)}
.opt[aria-pressed="true"]::after{width:10px;height:5px;border:0;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.opt:disabled{cursor:default}
.opt:disabled:not([aria-pressed="true"]){color:#AAAAAA}
.opt.write{color:var(--accent)}
.opt.write::after{display:none}
.opt:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ai-form{display:flex;flex-direction:column;gap:8px;background:var(--bg);border-radius:var(--radius-m);padding:12px}
.ai-form label{font-size:12px;line-height:18px;color:var(--muted)}
.ai-row{display:flex;gap:8px;flex-wrap:wrap}
.ai-row input{flex:1 1 200px;min-width:0;font:500 14px/20px var(--f-body);border:1px solid var(--line);border-radius:var(--radius-s);padding:10px 12px;background:var(--surface);color:var(--ink)}
.ai-row .btn{min-height:42px;padding:8px 14px;font-size:14px}
.ai-row .btn::after{content:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}