@charset "UTF-8";
.form-group.required .form-control-label::before {
  content: "*";
  color: #c00;
}

/*************************** Login & Register ***************************/
/* Estilos generales para el body y el contenedor del formulario */
/* Estilos para el efecto de "floating label" */
.form-group-custom {
  position: relative;
  border: 1px solid #000000; /* Borde predeterminado de Bootstrap */
  border-radius: 1rem; /* Bordes redondeados de Bootstrap */
  padding: 1.25rem 0.75rem 0.5rem; /* Espacio para el label flotante y el input */
  margin-bottom: 1rem; /* Espacio entre grupos de formulario */
  background-color: white;
}

.form-group-custom .form-control {
  border: none; /* Elimina el borde predeterminado del input */
  padding: 0; /* Elimina el padding predeterminado del input */
  height: auto; /* Permite que la altura del input se ajuste */
  min-height: 32px;
  line-height: normal; /* Restablece el line-height */
  position: relative;
}

/* Asegurarse de que el input tenga un placeholder (aunque sea vacío) para que funcione :not(:placeholder-shown) */
.form-group-custom .form-control:-ms-input-placeholder {
  color: #000000;
}
.form-group-custom .form-control::placeholder {
  color: #000000;
}

/* Estilo para el borde exterior de la última fila (Email y Contraseña) */
.form-row-outer-border {
  border: 2px solid #000000; /* Borde oscuro para la última fila */
  border-radius: 1rem; /* Bordes redondeados */
  padding: 1rem; /* Relleno dentro de este borde exterior */
  margin-bottom: 1rem; /* Espacio para mantener la coherencia con otros form-groups */
  /* En móviles, form-row ya apila, por lo que este padding funcionará bien */
}

/* Ajustes de margen para los form-group dentro de la fila con borde exterior */
.form-row-outer-border .form-group-custom {
  margin-bottom: 0; /* Elimina el margen inferior del último grupo dentro de esta fila */
}

/* Añadir un margen inferior a todos los form-group-custom dentro de .form-row-outer-border EXCEPTO el último */
.form-row-outer-border .form-group-custom:not(:last-child) {
  margin-bottom: 1rem;
}

/* Media Queries para Responsividad (Bootstrap ya maneja gran parte, pero podemos ajustar) */
@media (max-width: 767.98px) { /* Para dispositivos pequeños (móviles) */
  body {
    padding: 15px; /* Menos padding en los bordes en móviles */
    -ms-flex-align: start;
        align-items: flex-start; /* Asegura que el formulario no se centre verticalmente y se corte */
  }
  .card {
    padding: 1rem; /* Menos padding en la tarjeta en móviles */
  }
  .form-group-custom {
    padding: 1rem 0.75rem 0.25rem; /* Ajuste de padding en móviles */
  }
  .form-group-custom label {
    font-size: 0.9rem; /* Ligeramente más pequeño en móviles */
    top: 0.6rem;
  }
  .form-row-outer-border {
    padding: 0.75rem; /* Menos padding en el borde exterior en móviles */
  }
}
@media (min-width: 768px) and (max-width: 991.98px) { /* Para dispositivos medianos (tablets) */
  .card {
    padding: 1.5rem; /* Un poco más de padding en tablets */
  }
  /* Si las columnas se apilan en MD por defecto, el form-row-outer-border ya funcionará bien */
}
.login-page {
  margin-top: 1em;
}
.login-page .login-form-nav {
  margin-bottom: 1.25em;
}
.login-page .login-form-nav .tab-pane {
  margin-top: 1em;
}
.login-page .login {
  margin-bottom: 0.938em;
}
.login-page .login .error-message-form {
  padding: 0.625em;
  background-color: #c00;
  color: #fff;
  border-radius: 0.188em;
}
.login-page .modal-content {
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.login-page .modal-content.full-page {
  height: 100vh;
  width: 100vw;
}
.login-page .modal-content.full-page.vertical-content {
  -ms-flex-pack: center;
      justify-content: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}

.registration-page .privacy-policy {
  margin-top: 1rem;
}

.login-banner {
  background-image: url("../images/account.jpg");
  background-position-y: 40%;
}

.equal-height .card {
  width: 100%;
}

.track-order-header {
  font-size: 1.75rem;
}

/*************************** Login & Register ***************************/
/* Input con borde negro y redondeado */
.form-control {
  border: 1px solid black;
  border-radius: 0.5rem;
}

/* Contenedor de la fila 3 con borde negro y redondeado */
.enmarcado {
  border: 1px solid black;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

/* Botón burdeos */
.btn-burdeos {
  background-color: #800020;
  color: white;
  border-radius: 0.5rem;
  border: none;
}

.btn-burdeos:hover {
  background-color: #66001a;
}