/* Contenedor que envuelve el formulario */
.contenedor-formulario {
  display: flex;                        /* Usa flexbox para posicionar el formulario */
  justify-content: center;              /* Centra horizontalmente */
  align-items: start;                   /* Alinea el contenido al inicio verticalmente */
  min-height: calc(100vh - 160px);     /* Altura visible menos espacio ocupado por header/nav */
  padding-top: 40px;                    /* Espacio arriba del contenedor */
}

/* Estilo del formulario */
.formulario {
  background-color: #ffffff;            /* Fondo blanco */
  padding: 25px;                       /* Relleno interno */
  border-left: 10px solid #00bcd4;     /* Barra vertical azul a la izquierda */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Sombra sutil para dar profundidad */
  border-radius: 8px;                  /* Bordes redondeados */
  width: 700px;                       /* Ancho fijo del formulario */
  height: 400px;                      /* Alto fijo */
  margin: auto;                      /* Centra el formulario horizontalmente */
}

/* Título dentro del formulario */
h2 {
  color: #007c91;                     /* Azul oscuro */
  margin-top: 0;                     /* Sin margen superior */
  text-align: center;
}

/* Etiquetas de los campos */
label {
  display: block;                    /* Ocupa toda la línea */
  margin-top: 10px;                 /* Espacio arriba */
  color: #007c91;                   /* Azul oscuro */
}

/* Campos de entrada */
input {
  width: 100%;                     /* Ocupan todo el ancho disponible */
  padding: 8px;                    /* Espaciado interno */
  margin-top: 5px;                 /* Espacio arriba */
  border: 1px solid #b2ebf2;       /* Borde celeste claro */
  border-radius: 4px;              /* Bordes redondeados */
}

/* Botones */
button {
  background-color: #00bcd4;        /* Fondo azul turquesa */
  color: white;                    /* Texto blanco */
  padding: 10px;                   /* Espaciado interno */
  margin-top: 15px;                /* Espacio arriba */
  border: none;                   /* Sin borde */
  width: 100%;                   /* Botón ocupa todo el ancho */
  cursor: pointer;               /* Cursor mano para indicar clic */
  border-radius: 4px;            /* Bordes redondeados */
}

/* Efecto hover en botones */
button:hover {
  background-color: #008ba3;       /* Azul más oscuro al pasar mouse */
}

/* Contenedor para botones o acciones adicionales */
.acciones {
  margin-top: 20px;                /* Espacio superior */
  text-align: center;             /* Centra horizontalmente */
}

/* Botones dentro del contenedor de acciones */
.acciones button {
  width: auto;                   /* Botones con ancho automático */
  margin: 5px;                   /* Margen alrededor */
}

@media (max-width: 768px) {
  .contenedor-formulario {
    padding: 20px;
    align-items: center; /* Centrar verticalmente también */
  }

  .formulario {
    width: 100%;             /* Que ocupe todo el ancho disponible */
    height: auto;            /* Altura automática según contenido */
    padding: 20px;
  }

  h2 {
    font-size: 24px;
  }

  label {
    font-size: 16px;
  }

  input {
    font-size: 16px;
  }

  button {
    font-size: 16px;
    padding: 10px;
  }

  .acciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .acciones a {
    display: block;
    width: 100%;
  }

  .acciones button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .formulario {
    padding: 15px;
  }

  h2 {
    font-size: 20px;
  }

  label, input, button {
    font-size: 14px;
  }
}