/* ======================================== 
   Estilo para el Popup 
   ======================================== */

/* Estilo del contenedor principal del popup */
.popup {
  position: relative;
  width: 80%; /* Ancho del popup */
  height: 50%; /* Alto del popup */
  margin: 0 auto; /* Centra el popup en la pantalla */
  background: #e1e0e0; /* Color de fondo */
  box-shadow: 
    0px 187px 75px rgba(0, 0, 0, 0.01),
    0px 105px 63px rgba(0, 0, 0, 0.05),
    0px 47px 47px rgba(0, 0, 0, 0.09),
    0px 12px 26px rgba(0, 0, 0, 0.1),
    0px 0px 0px rgba(0, 0, 0, 0.1); /* Sombra alrededor del popup */
  border-radius: 13px; /* Bordes redondeados */
}

/* ======================================== 
   Estilo para el formulario dentro del popup 
   ======================================== */

/* Estilo general del formulario */
.form {
  display: flex;
  flex-direction: column; /* Organiza los elementos en columna */
  text-align: center; /* Centra el texto */
  justify-content: center;
  align-items: center; /* Centra los elementos */
  padding: 5%; /* Espaciado interior */
  gap: 20px; /* Espacio entre los elementos */
  color: rgb(90, 90, 90); /* Color del texto */
  border-radius: 10px; /* Bordes redondeados */
}

/* ======================================== 
   Estilo para el ícono dentro del formulario 
   ======================================== */

/* Estilo del ícono */
.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20%; /* Tamaño del ícono */
  height: 20%; /* Tamaño del ícono */
  background: #e1e0e0; /* Fondo del ícono */
  box-shadow: 0px 0.5px 0.5px #e1e0e0, 0px 1px 0.5px rgba(239, 239, 239, 0.5); /* Sombra */
  border-radius: 5px; /* Bordes redondeados */
}

/* ======================================== 
   Estilo para las notas dentro del formulario 
   ======================================== */

/* Estilo de las notas (sección con texto) */
.note {
  display: flex;
  flex-direction: column; /* Organiza las notas en columna */
  gap: 8px; /* Espacio entre las notas */
  justify-content: center;
  align-items: center; /* Centra el contenido */
}

/* ======================================== 
   Estilo para el título dentro del formulario 
   ======================================== */

/* Estilo del título */
.title {
  font-style: normal;
  font-weight: 700; /* Negrita */
  font-size: 19px; /* Tamaño de la fuente */
  line-height: 24px; /* Altura de línea */
  color: #2B2B2F; /* Color del título */
}

/* ======================================== 
   Estilo para el subtítulo dentro del formulario 
   ======================================== */

/* Estilo del subtítulo */
.subtitle {
  font-style: normal;
  font-weight: 600; /* Seminegrita */
  font-size: 17px; /* Tamaño de la fuente */
  line-height: 18px; /* Altura de línea */
  color: #5F5D6B; /* Color del subtítulo */
}

/* ======================================== 
   Estilo para los campos de entrada (inputs) 
   ======================================== */

/* Estilo del campo de entrada */
.input_field {
  width: 100%; /* Ancho completo */
  height: 42px; /* Alto del campo */
  padding: 0 0 0 12px; /* Espaciado interior */
  border-radius: 5px; /* Bordes redondeados */
  outline: none; /* Elimina el borde del campo cuando está seleccionado */
  border: 1px solid #464646; /* Borde gris */
  filter: drop-shadow(0px 1px 0px #000000)
    drop-shadow(0px 1px 0.5px rgba(0, 0, 0, 0.5)); /* Sombra en el campo */
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); /* Transición suave */
}

/* Estilo cuando el campo está en foco (activo) */
.input_field:focus {
  border: 1px solid transparent; /* Elimina el borde */
  box-shadow: 0px 0px 0px 1px #2B2B2F; /* Añade una sombra en el borde */
  background-color: transparent; /* Mantiene el fondo transparente */
}

/* ======================================== 
   Estilo para el botón de envío 
   ======================================== */

/* Estilo del botón de envío */
.form button.submit {
  display: flex;
  flex-direction: row; /* Alinea el texto e íconos en fila */
  justify-content: center; /* Centra el contenido */
  align-items: center; /* Centra los elementos */
  padding: 10px 18px; /* Espaciado interior */
  gap: 10px; /* Espacio entre los elementos */
  width: 40%; /* Ancho del botón */
  height: 40px; /* Alto del botón */
  background: linear-gradient(180deg, #D4AF37 0%, #D4AF37 50%, #D4AF37 100%); /* Fondo con degradado dorado */
  box-shadow: 0px 0.5px 0.5px #000000, 0px 1px 0.5px rgba(239, 239, 239, 0.5); /* Sombra del botón */
  border-radius: 5px; /* Bordes redondeados */
  border: 0; /* Sin borde */
  font-style: normal;
  font-weight: 600; /* Negrita */
  font-size: 12px; /* Tamaño de fuente */
  line-height: 15px; /* Altura de línea */
  color: #ffffff; /* Color del texto */
}