/* Demo 16 · El mejor banco en segundos · escenario 1000 × 620 (.dm-std: WhatsApp del broker a la izquierda, la app a la derecha). Prefijo dba-. */
.d-ban .toast{ left:386px; right:26px; }

.dba-col{ flex:1; min-width:0; display:flex; flex-direction:column; }
.dba-barra{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 18px 10px; border-bottom:1px solid var(--linea); }
.dba-tit{ display:inline-flex; align-items:center; gap:7px; min-width:0; font-size:12.5px; }
.dba-tit b{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dba-tit .ico{ width:14px; height:14px; color:var(--tinta-45); flex:none; }
.dba-estados{ display:flex; flex:none; }
.dba-estado{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:999px; font-size:11.5px; font-weight:500; white-space:nowrap; }
.dba-estado.off{ display:none; }
.dba-estado:has(~ .dba-estado:not(.off)){ display:none; }
.dba-estado.espera{ background:var(--nieve); color:var(--tinta-45); }
.dba-estado.gira{ background:#fdf3e1; color:#8a5a12; }
.dba-estado.ok{ background:var(--verde-agua); color:var(--verde-osc); }
.dba-estado.env{ background:var(--tinta); color:#fff; }
.dba-estado .ico{ width:12px; height:12px; stroke-width:2.6; }
.dba-estado.env .ico{ color:var(--verde); }
.dba-gira{ width:11px; height:11px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:dba-gira .8s linear infinite; }
@keyframes dba-gira{ to{ transform:rotate(360deg); } }

.dba-hoja{ flex:1; min-height:0; overflow:hidden; position:relative; padding:14px 18px 40px; display:flex; flex-direction:column; gap:16px; }
.dba-hoja > *{ flex:none; }
.dba-sec{ display:flex; flex-direction:column; gap:9px; }
.dba-sec .rotulo{ display:inline-flex; align-items:center; gap:6px; }
.dba-sec .rotulo .ico{ width:12px; height:12px; }

/* Perfil del cliente */
.dba-perfil{ border:1px solid var(--linea); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.dba-p-cab{ display:flex; align-items:center; gap:10px; }
.dba-av{ width:36px; height:36px; border-radius:50%; background:var(--verde-agua); color:var(--verde-osc); font-size:12.5px; font-weight:600; display:grid; place-items:center; flex:none; }
.dba-p-cab b{ display:block; font-size:14.5px; font-weight:600; }
.dba-p-cab em{ display:block; font-style:normal; font-size:11.5px; color:var(--tinta-60); }
.dba-p-datos{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px 12px; margin:0; }
.dba-p-datos dt{ font-size:10.5px; color:var(--tinta-45); margin-bottom:2px; }
.dba-p-datos dd{ margin:0; font-size:12px; font-weight:500; line-height:1.35; color:var(--tinta); border-radius:4px; }

/* Fichas de los bancos */
.dba-bancos{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.dba-banco{ position:relative; min-width:0; display:flex; flex-direction:column; gap:7px; padding:10px 11px; border-radius:10px; border:1px solid var(--linea); background:#fff; transition:opacity .4s, border-color .4s, background .4s, box-shadow .4s; }
.dba-b-cab{ display:flex; align-items:center; gap:9px; min-width:0; }
.dba-logo{ width:30px; height:30px; border-radius:8px; background:var(--c); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.02em; display:grid; place-items:center; flex:none; }
.dba-b-t{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.dba-b-t b{ font-size:12.6px; font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dba-b-t em{ display:inline-flex; align-items:center; gap:3px; font-style:normal; font-size:10.5px; color:var(--tinta-60); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dba-b-t em .ico{ width:10px; height:10px; flex:none; }
.dba-nuevo{ margin-left:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:999px; background:#0a0a0a; color:#fff; font-style:normal; font-size:9.5px; font-weight:600; white-space:nowrap; }
.dba-nuevo .ico{ width:9px; height:9px; color:var(--verde); }
.dba-b-datos{ display:flex; flex-direction:column; gap:3px; margin:0; padding:0; list-style:none; }
.dba-b-datos li{ display:flex; align-items:center; gap:6px; font-size:11.2px; line-height:1.3; color:var(--tinta-80); min-width:0; }
.dba-b-datos li > span, .dba-b-datos li{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dba-b-datos .ico{ width:11px; height:11px; color:var(--tinta-45); flex:none; }
.dba-tipo{ border-radius:3px; }
.dba-res{ display:flex; align-items:center; gap:5px; padding-top:7px; border-top:1px dashed var(--linea); font-size:11px; font-weight:600; }
.dba-res .ico{ width:11px; height:11px; stroke-width:2.8; }
.dba-res-pend{ color:var(--tinta-30); font-weight:500; }
.dba-res-ok{ display:none; align-items:center; gap:5px; }
.dba-banco.encaja .dba-res-pend, .dba-banco.descarta .dba-res-pend{ display:none; }
.dba-banco.encaja .dba-res-ok, .dba-banco.descarta .dba-res-ok{ display:inline-flex; }
.dba-banco.encaja{ border-color:var(--verde); background:var(--verde-agua); box-shadow:0 8px 20px -14px rgba(47,163,135,.7); }
.dba-banco.encaja .dba-res-ok{ color:var(--verde-osc); }
.dba-banco.descarta{ opacity:.5; }
.dba-banco.descarta .dba-res-ok{ color:var(--tinta-60); }

/* Novedades en internet */
.dba-internet{ padding:12px 14px; border-radius:12px; background:var(--nieve); }
.dba-novs{ display:flex; flex-direction:column; gap:7px; margin:0; padding:0; list-style:none; }
.dba-novs li{ display:grid; grid-template-columns:26px 1fr auto; gap:9px; align-items:center; padding:8px 10px; border-radius:8px; background:#fff; border:1px solid var(--linea); }
.dba-fav{ width:26px; height:26px; border-radius:6px; background:var(--c); color:#fff; font-size:9.5px; font-weight:700; display:grid; place-items:center; }
.dba-nov-t{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.dba-nov-t em{ font-style:normal; font-size:10px; color:var(--tinta-45); }
.dba-nov-t b{ font-size:11.8px; font-weight:500; line-height:1.3; color:var(--tinta); }
.dba-etq{ font-size:10px; font-weight:600; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.dba-etq.ok{ background:var(--verde-agua); color:var(--verde-osc); }
.dba-etq.aviso{ background:#fdf3e1; color:#8a5a12; }

/* Las 3 mejores opciones */
.dba-top{ padding:12px 14px 10px; border-radius:12px; border:1.5px solid var(--verde); background:#fff; box-shadow:0 14px 34px -22px rgba(47,163,135,.8); }
.dba-top .rotulo{ color:var(--verde-osc); }
.dba-top ol{ display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none; }
.dba-top li{ display:grid; grid-template-columns:24px 1fr auto; gap:10px; align-items:center; padding:8px 0; border-top:1px solid var(--linea); }
.dba-top li:first-child{ border-top:0; }
.dba-n{ width:24px; height:24px; border-radius:50%; background:var(--tinta); color:#fff; font-size:11.5px; font-weight:600; display:grid; place-items:center; }
.dba-top li:first-child .dba-n{ background:var(--verde); color:var(--tinta); }
.dba-top-t{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dba-top-t b{ font-size:13px; font-weight:600; }
.dba-top-t em{ font-style:normal; font-size:11px; line-height:1.35; color:var(--tinta-60); }
.dba-top-c{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.dba-top-c b{ font-size:15px; font-weight:600; letter-spacing:-.02em; white-space:nowrap; }
.dba-top-c em{ font-style:normal; font-size:10.5px; color:var(--tinta-60); white-space:nowrap; }
.dba-pie{ margin:6px 0 0; font-size:10.5px; color:var(--tinta-45); }