/* ==========================================================================
   Bancos v2 — la vista de cuentas y sus cuatro diálogos (gasto, ingreso,
   transferencia y notas), según el handoff de diseño.

   Todo va colgado de `#vista-bancos` o de `.dialogo-banco`: los controles
   globales (02-controles.css) pintan cualquier `button` de azul y cualquier
   `input` con su borde y su foco, y acá cada control trae su propia forma. El
   prefijo es lo que gana esa pelea sin `!important`.
   ========================================================================== */

@keyframes mIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes fIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* La vista pide más ancho que el resto: cinco columnas con cifras. */
.contenido:has(#vista-bancos:not([hidden])) {
  max-width: calc(1140px + 80px);
  padding: 28px 40px 56px;
}

#vista-bancos {
  gap: 20px;
  color: var(--marca-negro);
}

/* Reset de los controles globales dentro de la vista y de los diálogos. */
#vista-bancos button,
.dialogo-banco button {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
#vista-bancos input,
.dialogo-banco input,
.dialogo-banco select,
.dialogo-banco textarea {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--marca-negro);
  font: inherit;
  outline: none;
}
.dialogo-banco label { display: block; color: inherit; }

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */
.bn-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.bn-titulos { display: flex; flex-direction: column; gap: 4px; }
.bn-h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.bn-h::before {
  content: '';
  width: 6px;
  height: 22px;
  border-radius: 2px;
  background: var(--marca-rojo);
}
.bn-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: var(--marca-texto-2);
  font-size: 13px;
}
.bn-leyenda { display: contents; }
.bn-leyenda > span { display: flex; align-items: center; gap: 6px; }
.bn-clave { width: 8px; height: 8px; border-radius: 2px; }
.bn-clave-sobra { background: #b8912f; }
.bn-clave-falta { background: var(--marca-rojo); }
.bn-clave-cuadra { background: var(--marca-negro); }

#vista-bancos .bn-notas {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--marca-borde);
  border-radius: 9px;
  background: #fff;
  color: var(--marca-negro);
  font-size: 13px;
  font-weight: 500;
}
#vista-bancos .bn-notas:hover { border-color: #c6c6c6; }
.bn-cabeza-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.bn-badge.bn-badge-gris { background: var(--marca-fondo); color: var(--marca-texto-fuerte); }
.bn-badge {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--marca-rojo);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   KPIs
   -------------------------------------------------------------------------- */
.bn-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.bn-kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--marca-borde);
  border-radius: 14px;
  background: #fff;
}
.bn-kpi-rotulo {
  color: var(--marca-texto-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.bn-kpi-valor {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.3;
}
.bn-kpi-sub { font-size: 12px; }
.bn-kpi-pendiente { border-color: #e9d8ae; background: #fbf5e6; }
.bn-kpi-pendiente .bn-kpi-rotulo,
.bn-kpi-pendiente .bn-kpi-sub { color: #7a5a14; }
.bn-kpi-pendiente .bn-kpi-valor { color: var(--marca-oro-texto); }
.bn-kpi-total {
  border: 0;
  border-top: 3px solid var(--marca-oro);
  background: var(--marca-negro);
  color: #fff;
}
.bn-kpi-total .bn-kpi-rotulo { color: #a8a8a8; }
.bn-kpi-total .bn-kpi-valor { color: #e7c874; }

/* --------------------------------------------------------------------------
   Tarjetas: tabla de cuentas y cuentas externas
   -------------------------------------------------------------------------- */
.bn-card {
  border: 1px solid var(--marca-borde);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.bn-tabla-envoltura { overflow-x: auto; }

/* Las columnas del diseño son `1fr 140 170 130 132` con 16 de separación: en
   una tabla la separación va como relleno izquierdo de cada celda. */
.bn-tabla {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  table-layout: fixed;
}
.bn-col-saldo { width: 156px; }
.bn-col-actual { width: 186px; }
.bn-col-dif { width: 146px; }
.bn-col-acciones { width: 168px; }

.bn-tabla th,
.bn-tabla td {
  padding: 14px 0 14px 16px;
  text-align: left;
  vertical-align: middle;
}
.bn-tabla :is(th, td):first-child { padding-left: 20px; }
.bn-tabla :is(th, td):last-child { padding-right: 20px; }
.bn-tabla .col-num { text-align: right; }

.bn-tabla thead th {
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--marca-borde);
  color: var(--marca-texto-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.bn-tabla tbody tr { border-bottom: 1px solid var(--marca-linea); }
/* La franja de pendientes es parte de su cuenta: la línea va debajo de ella. */
.bn-tabla tbody tr:has(+ .banco-fila-pendientes) { border-bottom: 0; }
.bn-tabla tbody tr.banco,
.bn-tabla tbody tr.banco-todos { cursor: pointer; }
.bn-tabla tbody tr.banco:hover,
.bn-tabla tbody tr.banco-todos:hover { background: #fafafa; }
body[data-rol='operador'] .bn-tabla tbody tr.banco { cursor: default; }

.bn-cuenta { min-width: 0; }
.bn-cuenta-caja { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bn-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--marca-borde);
  border-radius: 9px;
  background: var(--marca-fondo);
  color: var(--marca-texto-fuerte);
  font-size: 11px;
  font-weight: 600;
}
.bn-cuenta-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bn-tabla .banco-nombre {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bn-sub { color: var(--marca-texto-3); font-size: 12px; font-weight: 400; }
.banco-todos .banco-nombre { font-style: normal; }

.bn-tabla .banco-saldo {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
}
.bn-tabla .banco-saldo.bn-negativo { color: var(--marca-rojo); }

/* Conteo real: caja con «S/» adelante. */
.bn-conteo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 150px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--marca-borde);
  border-radius: 8px;
  background: #fafafa;
  vertical-align: middle;
}
.bn-conteo:focus-within { border-color: var(--marca-negro); }
.bn-conteo > span { color: var(--marca-texto-3); font-size: 12px; }
#vista-bancos .bn-conteo input {
  flex: 1;
  width: auto;
  min-width: 0;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Diferencia: una píldora. «—» sin conteo. */
.bn-tabla .banco-diferencia { color: var(--marca-texto-3); }
.bn-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.bn-pill-tag {
  font-family: var(--font);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.banco-diferencia-cuadra .bn-pill { background: var(--marca-negro); color: #fff; }
.banco-diferencia-sobra .bn-pill { background: #f6ecd2; color: #7a5a10; }
.banco-diferencia-falta .bn-pill { background: #fbe3e6; color: #b00d26; }
.banco-diferencia-invalido .bn-pill { background: #fbe3e6; color: #b00d26; font-family: var(--font); }
/* En la fila, «cuadra» es el rótulo solo; en el total, la cifra sola. */
.bn-tabla tbody .banco-diferencia-cuadra .bn-pill-monto { display: none; }
.bn-tabla tfoot .bn-pill {
  padding: 0;
  background: none;
  color: inherit;
  font-size: 14px;
}
.bn-tabla tfoot .bn-pill-tag { display: none; }

/* Acciones: tres botones de icono. */
.bn-tabla .acciones-banco { display: flex; justify-content: flex-end; gap: 4px; }
#vista-bancos .accion-banco {
  display: grid;
  place-items: center;
  width: 36px;
  min-width: 0;
  height: 34px;
  border: 1px solid var(--marca-borde);
  border-radius: 8px;
  background: #fff;
}
#vista-bancos .accion-gasto { color: var(--marca-rojo); }
#vista-bancos .accion-gasto:hover { border-color: #f2c4cc; background: #fcebee; }
#vista-bancos .accion-ingreso { color: var(--marca-oro-texto); }
#vista-bancos .accion-ingreso:hover { border-color: #e6d3a6; background: #f8f0dc; }
#vista-bancos .accion-transferencia { color: var(--marca-negro); }
#vista-bancos .accion-transferencia:hover { border-color: #cfcfcf; background: #efefef; }

/* Franja de lo que falta abonar, debajo de su cuenta. */
.bn-tabla .banco-fila-pendientes > td { padding: 0; }
.bn-tabla .lista-pendientes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: auto;
  margin: 0 20px 14px 66px;
  padding: 0;
  list-style: none;
}
.bn-tabla .banco-pendiente {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e9d8ae;
  border-left: 1px solid #e9d8ae;
  border-radius: 10px;
  background: #fbf5e6;
  color: #5a420e;
  font-size: 13px;
}
.bn-pend-rotulo {
  color: #7a5a14;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.bn-pend-texto { flex: 1; min-width: 200px; }
.bn-pend-monto {
  color: var(--marca-oro-texto);
  font-family: var(--font-mono);
  font-weight: 600;
}
#vista-bancos .bn-pend-boton {
  height: 28px;
  padding: 0 10px;
  border: 1px solid #d9c089;
  border-radius: 7px;
  background: #fff;
  color: #5a420e;
  font-size: 12px;
  font-weight: 500;
}
#vista-bancos .bn-pend-boton:hover { background: #f5ebcf; }
#vista-bancos .bn-pend-boton:disabled { opacity: .5; cursor: default; }

/* Total. */
.bn-tabla tfoot tr { background: #fafafa; }
.bn-tabla tfoot :is(th, td) { padding-top: 16px; padding-bottom: 16px; }
.bn-tabla tfoot th {
  display: table-cell;
  font-size: 14px;
  font-weight: 600;
}
.bn-tabla tfoot th .bn-sub { display: block; margin-top: 2px; }
.bn-tabla tfoot td {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
}
.bn-tabla tfoot #bancos-total-actual { padding-right: 10px; }
.bn-tabla tfoot .banco-diferencia-cuadra { color: var(--marca-negro); }
.bn-tabla tfoot .banco-diferencia-sobra { color: var(--marca-oro-texto); }
.bn-tabla tfoot .banco-diferencia-falta { color: var(--marca-rojo); }

/* Alta de una cuenta, al pie de la tarjeta. */
.bn-alta {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--marca-linea);
}
#vista-bancos .bn-alta input {
  flex: 1;
  max-width: 360px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--marca-borde);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
}
#vista-bancos .bn-alta input:focus { border-color: var(--marca-negro); }
#vista-bancos .bn-alta button {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--marca-borde);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
}
#vista-bancos .bn-alta button:hover { background: var(--marca-fondo); }

/* Cuentas externas, en su modal. */
.dialogo-externas .dlg-cabeza { border-bottom: 1px solid var(--marca-linea); }
.dialogo-externas .dlg-pie { justify-content: flex-end; }
#lista-externas {
  max-height: min(60vh, 520px);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
#lista-externas .externa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--marca-linea);
}
#lista-externas .externa:last-child { border-bottom: 0; }
#lista-externas .externa:hover { background: #fafafa; }
.externa-nombre { font-size: 14px; font-weight: 500; }
#lista-externas .externa button {
  flex: none;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--marca-borde);
  border-radius: 7px;
  background: #fff;
  color: var(--marca-texto-fuerte);
  font-size: 12.5px;
}
#lista-externas .externa button:hover { background: var(--marca-fondo); color: var(--marca-negro); }

/* ==========================================================================
   Diálogos
   ========================================================================== */
.dialogo-banco {
  --acento: var(--marca-negro);
  --acento-bg: #fafafa;
  width: min(540px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 64px -16px rgba(28, 27, 25, .35);
  color: var(--marca-negro);
  font-size: 14px;
}
.dialogo-banco[open] { animation: mIn .2s ease; }
.dialogo-banco::backdrop {
  background: rgba(28, 27, 25, .42);
  backdrop-filter: blur(3px);
  animation: fIn .15s ease;
}
.dialogo-gasto { --acento: var(--marca-rojo); --acento-bg: #fff5f6; }
.dialogo-ingreso { --acento: var(--marca-oro-texto); --acento-bg: #fcf8ee; }
.dialogo-transferencia { width: min(560px, calc(100vw - 32px)); }
.dialogo-notas { width: min(600px, calc(100vw - 32px)); }

.dlg-caja { display: flex; flex-direction: column; }

.dlg-cabeza {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 22px 0;
}
.dlg-icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #efefef;
  color: var(--marca-negro);
}
.dialogo-gasto .dlg-icono { background: #fcebee; color: var(--marca-rojo); }
.dialogo-ingreso .dlg-icono { background: #f8f0dc; color: var(--marca-oro-texto); }
.dlg-titulos { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.dlg-titulo { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.dlg-sub {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  color: var(--marca-texto-2);
  font-size: 13px;
}
.dlg-sub p { margin: 0; }
.dialogo-banco .dlg-cerrar {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--marca-texto-2);
}
.dialogo-banco .dlg-cerrar:hover { background: var(--marca-fondo); }

.dlg-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 22px;
}
.dlg-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.dialogo-banco .dlg-rotulo {
  padding: 0;
  color: var(--marca-texto-fuerte);
  font-size: 12px;
  font-weight: 500;
}
.dlg-nota { color: var(--marca-texto-3); font-size: 12px; font-weight: 400; }
.dlg-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dlg-fila-fecha { grid-template-columns: minmax(0, 180px) minmax(0, 1fr); }
.dlg-fila-desc { grid-template-columns: minmax(0, 1fr) 170px; }
.dlg-fecha-sola { max-width: 180px; }
/* Una legend no entra al flex del fieldset: el hueco va como margen. */
.campo-naturaleza > legend.dlg-rotulo { margin-bottom: 8px; }
.dialogo-banco #gasto-campo-categoria,
.dialogo-banco #ingreso-campo-categoria { gap: 8px; animation: fIn .2s ease; }

/* Monto: la cifra grande. */
.dlg-monto {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  border: 1.5px solid var(--marca-borde);
  border-radius: 12px;
}
.dlg-monto:focus-within { border-color: var(--acento); }
.dlg-monto > span { color: var(--marca-texto-3); font-size: 22px; font-weight: 500; }
.dialogo-banco .dlg-monto input {
  flex: 1;
  width: auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.03em;
}

/* ITF debajo del monto. */
.dlg-itf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--marca-texto-2);
  font-size: 12.5px;
}
.dialogo-banco .dlg-itf label { color: inherit; }
.dlg-itf-caja {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 96px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--marca-borde);
  border-radius: 7px;
}
.dlg-itf-caja:focus-within { border-color: var(--acento); }
.dlg-itf-caja > span { color: var(--marca-texto-3); }
.dialogo-banco .dlg-itf-caja input {
  flex: 1;
  width: auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-align: right;
}
.dialogo-banco .itf-auto {
  color: var(--marca-rojo);
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Texto y fecha. */
.dialogo-banco .dlg-texto {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--marca-borde);
  border-radius: 10px;
  font-size: 14px;
}
.dialogo-banco .dlg-texto[type='date'] { padding: 0 10px; font-size: 13.5px; }
.dialogo-banco .dlg-texto:focus { border-color: var(--acento); }

/* Comisión e ITF de la transferencia. */
.dlg-cargo {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--marca-borde);
  border-radius: 10px;
}
.dlg-cargo:focus-within { border-color: var(--acento); }
.dlg-cargo > span { color: var(--marca-texto-3); font-size: 13px; }
.dialogo-banco .dlg-cargo input {
  flex: 1;
  width: auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 14px;
}

/* Naturaleza: tarjetas con punto, rótulo y descripción. El radio queda
   escondido pero sigue siendo el control (teclado y lectores). */
.dialogo-banco .naturalezas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  margin: 0;
}
.dialogo-banco .naturaleza {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1.5px solid var(--marca-borde);
  border-radius: 10px;
  background: #fff;
  white-space: normal;
  cursor: pointer;
}
.dialogo-banco .naturaleza:has(input:checked) {
  border-color: var(--acento);
  background: var(--acento-bg);
}
.dialogo-banco .naturaleza:has(input:focus-visible) {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}
.dialogo-banco .naturaleza input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.nat-dot {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1.5px solid #c6c6c6;
  border-radius: 50%;
  background: #fff;
}
.naturaleza:has(input:checked) .nat-dot { border: 5px solid var(--acento); }
.nat-textos { display: flex; flex-direction: column; gap: 2px; }
.nat-rotulo { color: var(--marca-negro); font-size: 13.5px; font-weight: 500; }
.nat-desc { color: var(--marca-texto-2); font-size: 12px; line-height: 1.35; }

/* Categorías como chips. */
.chips-cat { display: flex; flex-wrap: wrap; gap: 6px; }
.dialogo-banco .chip-cat {
  height: 32px;
  padding: 0 12px;
  border: 1.5px solid var(--marca-borde);
  border-radius: 16px;
  background: #fff;
  color: var(--marca-negro);
  font-size: 13px;
  font-weight: 500;
}
.dialogo-banco .chip-cat[aria-pressed='true'] {
  border-color: var(--acento);
  background: var(--acento);
  color: #fff;
}
.dialogo-banco .chip-agregar {
  height: 32px;
  padding: 0 12px;
  border: 1.5px dashed #c6c6c6;
  border-radius: 16px;
  color: var(--marca-texto-2);
  font-size: 13px;
}
.dialogo-banco .chip-agregar:hover { border-color: var(--marca-negro); color: var(--marca-negro); }
.chip-nueva {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 4px 0 12px;
  border: 1.5px solid var(--acento);
  border-radius: 16px;
  background: #fff;
}
.dialogo-banco .chip-nueva input { width: 120px; font-size: 13px; }
.dialogo-banco .chip-nueva button {
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  background: var(--marca-negro);
  color: #fff;
  font-size: 12px;
}

/* Adjuntar: `zonaDesdeCampo` cambia el label por un `.drop`. */
.dialogo-banco .drop {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px dashed #c6c6c6;
  border-radius: 10px;
  background: #fff;
  color: var(--marca-texto-2);
  font-size: 13px;
  text-align: left;
}
.dialogo-banco .drop::before {
  content: '';
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12l-8.5 8.5a5 5 0 0 1-7-7L14 5a3.5 3.5 0 0 1 5 5l-8.5 8.5a2 2 0 0 1-3-3L15 8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12l-8.5 8.5a5 5 0 0 1-7-7L14 5a3.5 3.5 0 0 1 5 5l-8.5 8.5a2 2 0 0 1-3-3L15 8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dialogo-banco .drop:hover { border-color: var(--marca-texto-3); background: #fafafa; color: var(--marca-texto-2); }
.dialogo-banco .drop.con-archivos { border-color: var(--marca-texto-3); }
.dialogo-banco .drop.encima { border-style: solid; border-color: var(--acento); background: var(--acento-bg); }
.dialogo-banco .drop-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialogo-banco .drop-archivos { flex-basis: 100%; }
.dialogo-banco .drop-archivos li { background: var(--marca-fondo); color: var(--marca-negro); }
.dialogo-banco .quitar-comprobante { padding: 0 4px; color: var(--marca-texto-2); }

/* Transferencia: las dos puntas. */
.tf-puntas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
}
.tf-punta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--marca-borde);
  border-radius: 12px;
  background: #fafafa;
}
.tf-hacia { border: 1.5px solid var(--marca-negro); background: #fff; }
.dialogo-banco .tf-punta-rotulo {
  color: var(--marca-texto-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.dialogo-banco .tf-hacia .tf-punta-rotulo { color: var(--marca-negro); }
.tf-punta-nombre {
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dialogo-banco .tf-hacia select {
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.tf-punta-saldo { color: var(--marca-texto-2); font-family: var(--font-mono); font-size: 12px; }
.tf-flecha { display: grid; place-items: center; }
.dialogo-banco .campo-aviso { margin: 0; color: var(--marca-texto-2); font-size: 13px; }

/* Pie: lo que sale o entra, y los botones. */
.dlg-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid var(--marca-linea);
  background: #fafafa;
}
.dlg-cuentas { display: flex; flex-direction: column; gap: 2px; }
.dlg-cuentas > span { color: var(--marca-texto-2); font-size: 12px; }
.dlg-cuentas b { color: var(--marca-negro); font-family: var(--font-mono); font-weight: 600; }
.dlg-cuentas .dlg-sale { color: var(--marca-rojo); }
.dlg-cuentas .dlg-entra { color: var(--marca-oro-texto); }
.dlg-botones { display: flex; gap: 8px; }
.dialogo-banco .dlg-secundario,
.dialogo-banco .dlg-primario {
  height: 38px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
}
.dialogo-banco .dlg-secundario {
  padding: 0 16px;
  border: 1px solid var(--marca-borde);
  background: #fff;
  color: var(--marca-negro);
}
.dialogo-banco .dlg-secundario:hover { background: var(--marca-fondo); }
.dialogo-banco .dlg-primario {
  padding: 0 18px;
  background: var(--marca-negro);
  color: #fff;
}
.dialogo-banco .dlg-primario:hover { background: #2a2a2a; }
.dialogo-banco .dlg-primario:disabled { opacity: .35; cursor: default; }
.dialogo-banco .dlg-primario:disabled:hover { background: var(--marca-negro); }
.dialogo-banco .dialogo-error { border-radius: 10px; }

/* Notas: papel crema, sin cuerpo con relleno. */
.dialogo-notas { background: #fffdf8; }
.dialogo-notas .dlg-cabeza {
  padding: 20px 22px 14px;
  border-bottom: 1px solid #efe6cf;
}
.dialogo-notas .dlg-titulos { gap: 3px; }
.dialogo-notas .dlg-sub { text-wrap: pretty; }
.dialogo-notas .dlg-cerrar:hover { background: #f3ecda; }
.dialogo-banco #notas-texto {
  width: 100%;
  min-height: 300px;
  padding: 18px 22px;
  resize: none;
  font-size: 14.5px;
  line-height: 1.7;
}
.dialogo-notas .dlg-pie {
  padding: 12px 22px;
  border-top: 1px solid #efe6cf;
  background: transparent;
}
.dlg-pie-nota { color: var(--marca-texto-3); font-size: 12px; }
.dialogo-notas .dlg-secundario,
.dialogo-notas .dlg-primario { height: 36px; }
.dialogo-banco .dlg-vaciar {
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  color: var(--marca-rojo);
  font-size: 13px;
}
.dialogo-banco .dlg-vaciar:hover { background: #fcebee; }

/* Teléfono: la vista y los diálogos sueltan aire, no letra. */
@media (max-width: 860px) {
  .contenido:has(#vista-bancos:not([hidden])) { padding: 16px 12px 32px; }
  .dlg-fila,
  .dlg-fila-fecha,
  .dlg-fila-desc { grid-template-columns: minmax(0, 1fr); }
  .dlg-fecha-sola { max-width: none; }
  .tf-puntas { grid-template-columns: minmax(0, 1fr); }
  .tf-flecha { transform: rotate(90deg); }
  .bn-alta input { max-width: none; }
}

/* Logo del banco en lugar de las iniciales: sin fondo propio, el logo trae el suyo. */
.bn-avatar-logo { overflow: hidden; background: #fff; }
.bn-avatar-logo img { width: 100%; height: 100%; object-fit: contain; }