/* Banco: enlace con el banco, cuentas, movimientos y diálogos de conciliación. */

/* ── Enlace con el banco ────────────────────────────────────────────────── */

.banco-enlace {
  display: flex;
  align-items: center;
  gap: 6px 10px;
  flex-wrap: wrap;
  margin: -8px 0 18px;
  color: var(--suave);
  font-size: 14px;
}
.banco-enlace-texto { flex: 1 1 240px; min-width: 0; }
.banco-enlace strong { color: var(--verde); }
.banco-enlace.destacada {
  margin-top: 0;
  padding: 10px 12px 10px 16px;
  border-radius: var(--radio);
  font-weight: 600;
}
.banco-enlace.acento { background: var(--acento-tenue); color: var(--acento-fuerte); }
.banco-enlace.acento .punto { background: var(--acento); }
.banco-enlace.ambar { background: var(--ambar-fondo); color: var(--ambar); }
.banco-enlace.rojo { background: var(--rojo-fondo); color: var(--rojo); }

/* ── Cifras ─────────────────────────────────────────────────────────────── */

.banco-entra { color: var(--verde); }
.banco-sale { color: var(--rojo); }
.banco-falta { color: var(--ambar); }
.banco-cifra-boton { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.banco-cifra-boton:hover { border-color: #bcc4cf; }
.banco-cifra-boton span { display: block; }

/* ── Cuentas ────────────────────────────────────────────────────────────── */

.banco-cuentas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.banco-cuentas > .tarjeta { margin-top: 0; }
.banco-cuenta { display: flex; flex-direction: column; min-width: 0; }
.banco-cuenta.elegida { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.banco-cuenta-datos {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1px 11px;
  align-items: center;
  width: 100%;
  padding: 14px 16px 10px;
  border: 0;
  border-radius: var(--radio) var(--radio) 0 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.banco-cuenta-datos:hover { background: #f8fafb; }
.banco-sigla {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--tinta);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.banco-cuenta-nombre { overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.banco-cuenta-iban { color: var(--suave); font-size: 13px; font-variant-numeric: tabular-nums; }
.banco-cuenta-detalle { display: grid; gap: 5px; padding: 0 16px 12px; color: var(--suave); font-size: 13.5px; }
.banco-cuenta-detalle .etiqueta { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.banco-cuenta-estado .punto { margin-right: 3px; }
.banco-cuenta-acciones {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  margin-top: auto;
  padding: 6px 8px;
  border-top: 1px solid var(--borde-suave);
}
.banco-cuenta-acciones .boton { font-size: 14px; }
.banco-cuenta-nueva {
  min-height: 104px;
  border: 1.5px dashed var(--borde-control);
  border-radius: var(--radio);
  background: none;
  color: var(--suave);
  font-weight: 600;
  cursor: pointer;
}
.banco-cuenta-nueva:hover { border-color: var(--acento); background: var(--acento-tenue); color: var(--acento-fuerte); }

/* ── Movimientos ────────────────────────────────────────────────────────── */

.banco-lista { scroll-margin-top: 12px; }
.banco-movimientos { margin: 0; padding: 0; list-style: none; }
.banco-dia {
  padding: 13px 18px 6px;
  background: #fafbfc;
  color: var(--suave);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.banco-mov + .banco-dia { border-top: 1px solid var(--borde-suave); }
.banco-mov {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px 13px;
  align-items: center;
  padding: 11px 18px;
  border-top: 1px solid var(--borde-suave);
}
.banco-mov-sigla {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gris-fondo);
  color: var(--gris);
  font-size: 13px;
  font-weight: 700;
}
.banco-mov-sigla.entra { background: var(--verde-fondo); color: var(--verde); }
.banco-mov-concepto { font-weight: 600; overflow-wrap: anywhere; }
.banco-mov-texto .celda-secundaria { overflow-wrap: anywhere; }
.banco-mov-cifra { display: grid; justify-items: end; gap: 3px; }
.banco-mov-cifra .ingreso, .banco-mov-cifra .gasto { font-size: 16px; }
.banco-mov.ignorado .banco-mov-sigla, .banco-mov.ignorado .banco-mov-texto,
.banco-mov.ignorado .banco-mov-cifra .ingreso, .banco-mov.ignorado .banco-mov-cifra .gasto { opacity: .5; }

/* Debajo de cada movimiento: con qué está conciliado, o lo que se puede hacer con él. */
.banco-mov-pie {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  flex-wrap: wrap;
  min-width: 0;
}
.banco-mov-que { min-width: 0; color: var(--suave); font-size: 14px; overflow-wrap: anywhere; }
.banco-mov-que a { color: inherit; font-weight: 600; }
.banco-mov-que a:hover { color: var(--acento); }
.banco-cobro { display: block; }
.banco-mov-acciones { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.banco-mov-acciones .boton { padding: 5px 11px; font-size: 14px; }

.banco-propuesta { padding: 9px 10px 9px 14px; border-radius: 10px; background: var(--acento-tenue); }
.banco-propuesta.media { background: #f1f3f6; }
.banco-propuesta .banco-mov-que { flex: 1 1 260px; color: var(--texto); }
.banco-propuesta .celda-secundaria { display: block; }
.banco-propuesta .boton.discreto:hover { background: rgba(23, 33, 43, .08); }

.banco-mas, .banco-sin-filas { padding: 16px 18px; border-top: 1px solid var(--borde-suave); text-align: center; }
.banco-sin-filas { padding: 38px 18px; border-top: 0; color: var(--suave); }

/* ── Diálogos ───────────────────────────────────────────────────────────── */

.banco-opciones { display: grid; gap: 10px; padding-bottom: 22px; }
.banco-opcion {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--borde-control);
  border-radius: var(--radio);
  background: var(--superficie);
  text-align: left;
  cursor: pointer;
}
.banco-opcion:hover:not(:disabled) { border-color: var(--acento); background: var(--acento-tenue); }
.banco-opcion:disabled { opacity: .6; cursor: default; }
.banco-opcion strong { font-size: 16px; font-weight: 650; }
.banco-opcion span { color: var(--suave); font-size: 14px; }

.banco-espera { align-items: center; padding: 34px 24px 30px; text-align: center; }
.banco-espera h2 { margin-top: 16px; font-size: 18px; font-weight: 650; }
.banco-rueda {
  width: 38px;
  height: 38px;
  border: 4px solid var(--acento-tenue);
  border-top-color: var(--acento);
  border-radius: 50%;
  animation: banco-girar .8s linear infinite;
}
@keyframes banco-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .banco-rueda { animation-duration: 3s; } }

.banco-recibos, .banco-reglas, .banco-variables, .banco-extracto-muestra { margin: 0; padding: 0; list-style: none; }
.banco-recibos { border: 1px solid var(--borde); border-radius: 10px; }
.banco-recibos li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.banco-recibos li + li, .banco-reglas li + li, .banco-variables li + li, .banco-extracto-muestra li + li { border-top: 1px solid var(--borde-suave); }
.banco-recibo { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; cursor: pointer; }
.banco-recibo input { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--acento); }
.banco-recibo .celda-principal, .banco-recibo .celda-secundaria,
.banco-reglas .celda-principal, .banco-reglas .celda-secundaria { display: block; overflow-wrap: anywhere; }
.banco-recibo-importe {
  flex: none;
  width: 108px;
  padding: 7px 9px;
  border: 1px solid var(--borde-control);
  border-radius: 9px;
  background: #fff;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.banco-recibo-importe:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-tenue); }
.banco-recibo-importe:disabled { border-color: transparent; background: var(--gris-fondo); }
.banco-reparto { margin-top: 12px; font-weight: 600; }
.banco-reparto.pasado { color: var(--rojo); }

.banco-reglas li, .banco-variables li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; }
.banco-variables { margin-bottom: 12px; }
.banco-variables code, .modal-nota code, .ayuda code { font-size: 13px; overflow-wrap: anywhere; }

.banco-extracto:not(:empty) { margin-top: 14px; }
.banco-extracto-resumen { display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--acento-tenue); }
.banco-extracto-saltadas { margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: var(--ambar-fondo); color: var(--ambar); font-size: 14px; }
.banco-extracto-saltadas ul { margin: 4px 0 0; padding-left: 18px; overflow-wrap: anywhere; }
.banco-extracto .ayuda { margin: 10px 0 4px; }
.banco-extracto-muestra li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  font-size: 14px;
}
.banco-extracto-concepto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Pantallas estrechas ────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .banco-enlace .boton { margin-left: 19px; }
  .banco-mov { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; }
  .banco-mov-sigla { display: none; }
  .banco-mov-pie { grid-column: 1 / -1; }
  .banco-dia { padding-left: 14px; padding-right: 14px; }
  .banco-recibos li { flex-wrap: wrap; }
  .banco-recibo { flex-basis: 100%; }
  .banco-recibo-importe { flex: 1 1 auto; width: auto; min-width: 0; margin-left: 28px; }
  .banco-reglas li, .banco-variables li { flex-wrap: wrap; }
}