/* Contenedor de lista */
.contendor-movimientos {
  margin: 0 30px 20px 30px;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background-color: var(--bg-white-100);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fadeIn 0.5s linear;
  flex: 1;          /* ocupa todo el espacio vertical restante */
  min-height: 0;    /* necesario para que flex respete el overflow */
}

/* Header de movimientos */
.header-movimientos {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px;
  width: 100% !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.068);
  transition: all ease .2s;

  & h2 {
    font-size: calc(20px);
    color: var(--color-blue-800);
    font-weight: 600;
  }

  & a {
    font-size: calc(14px);
    color: var(--color-blue-400);
    font-weight: 400;

    &:hover {
      text-decoration: none;
      color: var(--color-blue-800);
    }
  }
}

.todos-los-movimientos {
  border-bottom: 1px solid rgba(0, 0, 0, 0.068);
  flex: 1;          /* crece para llenar el espacio dentro del contenedor */
  min-height: 0;    /* idem, clave para scroll en flex */
  overflow-y: auto;
}

/* Select de los movimientos */
.contenedor-select-periodo {
  display: flex;
  align-items: center;
  gap: 8px;

  & .select-periodo-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: rgb(115, 115, 115);
  }

  & select {
    padding: 6px 32px 6px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    color: var(--bg-blue-800);
    font-weight: 600;
    font-size: 0.875rem;
    font-family: 'DM Sans';
    background-color: #ffffff;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;

    /* flecha personalizada */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;

    &:hover {
      border-color: var(--bg-blue-800);
    }

    &:focus {
      border-color: var(--bg-blue-800);
    }
  }
}

/* Contenedor de movimiento */
.contenedor-movimiento {
  border-bottom: 1px solid rgba(0, 0, 0, 0.034);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  transition: all ease .2s;
  animation: animarAlto .5s linear;

  &:hover {
    background-color: rgb(243, 243, 243);
  }
}

/* Contenido Izquierdo */
.movimiento-contenido-izquierda {
  display: flex;
  gap: 15px;
  align-items: center;
}

.movimiento-contenido-izquierda div {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.icon-movimiento {
  font-size: 22px;
  font-weight: 100 !important;
}

.movimiento-titulo {
  font-size: 16px;
  font-weight: 500;
  color: #0f2744ce;
}

.movimiento-fecha {
  font-size: calc(10px + 0.1vw);
  margin: 0;
  color: var(--color-blue-400);
}

/* Contenido derecha */
.movimiento-monto {
  font-size: calc(15px + 0.1vw);
  font-weight: 600;
  margin: 0;
  font-family: 'DM Sans', monospace;
}

.monto-positivo {
  color: #1a9e6b;
}

.monto-negativo {
  color: #e05252;
}

.icon-positivo {
  color: #1a9e6b;
}

.icon-negativo {
  color: #e05252;
}

/* Footer de movimientos */
.total-movimientos {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 20px 30px;
  gap: 5px;

  & p {
    font-weight: 300;
    color: rgb(91, 91, 91);
  }

  & span {
    font-weight: 600;
  }
}

.movimientos-vacio {
  width: 100%;
  height: 100%;
  padding: 200px 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  font-size: 14px;
  color: var(--color-white-300);
}

@media (max-width: 900px) {
  .contendor-movimientos {
    margin: 0 10px 5px 10px;
  }
}