/* ============================================================
   retiro.css — panel de retiro y lista de movimientos
   ============================================================ */

/* ---------- Movimientos ---------- */

.movimientos { display: grid; gap: 8px; }

.movimiento {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  background: #0C1424;
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  padding: 10px 12px;
  animation: entrada-movimiento .3s ease;
}

@keyframes entrada-movimiento {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.movimiento-icono {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-alto);
}

.movimiento-icono svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: var(--texto-suave);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.movimiento.positivo .movimiento-icono { background: rgba(34, 197, 94, .14); }
.movimiento.positivo .movimiento-icono svg { stroke: var(--verde); }

.movimiento.negativo .movimiento-icono { background: rgba(240, 80, 58, .14); }
.movimiento.negativo .movimiento-icono svg { stroke: var(--rojo); }

.movimiento-texto { min-width: 0; }

.movimiento-titulo {
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.movimiento-detalle {
  font-size: 11.5px;
  color: var(--texto-tenue);
  font-family: var(--fuente-dato);
}

.movimiento-monto {
  font-family: var(--fuente-dato);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.movimiento.positivo .movimiento-monto { color: var(--verde); }
.movimiento.negativo .movimiento-monto { color: var(--rojo); }

.movimiento-estado {
  display: block;
  font-family: var(--fuente-texto);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-top: 2px;
}

.movimiento-estado.en-proceso { color: var(--ambar); }
.movimiento-estado.completado { color: var(--verde); }

.vacio-movimientos {
  font-size: 12.5px;
  color: var(--texto-tenue);
  text-align: center;
  padding: 14px 6px;
  border: 1px dashed var(--borde);
  border-radius: var(--radio-m);
}

.vacio-movimientos.oculto { display: none; }

/* ---------- Estado de carga del botón retirar ---------- */

.girador {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .25);
  border-top-color: var(--texto);
  animation: girar .7s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}