/* Estilos generales del cuerpo de la página */
body {
    font-family: Arial, sans-serif;   /* Cambia la tipografía del texto */
    background-color: #f4f4f4;        /* Color gris claro de fondo */
    padding: 40px;                    /* Espacio alrededor del contenido */
    display: block;                    /* Centra el formulario usando flexbox */
    justify-content: center;          /* Centra horizontalmente */
    align-items: center;              /* Centra verticalmente */
}

.form_container {
    width: 90%;        /* o el ancho que quieras */
    max-width: 600px;  /* opcional, para que no se estire demasiado */
    margin: 0 auto;    /* ESTO lo centra horizontalmente */
}

/* Estilos del formulario */
form {
    background: white;                /* Fondo blanco para destacar el formulario */
    padding: 25px 35px;               /* Espacio interno del formulario */
    border-radius: 10px;              /* Bordes redondeados */
    width: 380px;                     /* Ancho fijo del formulario */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Sombra suave para dar profundidad */
}

/* Quita el borde por defecto de los fieldset */
fieldset {
    border: none;                     /* Sin borde */
    margin-bottom: 20px;              /* Espacio entre secciones */
}

/* Estilo del título de cada fieldset */
legend {
    font-weight: bold;                /* Texto en negrita */
    margin-bottom: 10px;              /* Espacio debajo del título */
    font-size: 1.1rem;                /* Tamaño de letra un poco más grande */
}

/* Estilos generales para los labels */
label {
    display: block;                   /* Cada label ocupa toda la línea */
    margin-top: 12px;                 /* Espacio superior para separar inputs */
    font-size: 0.95rem;               /* Tamaño de letra ligeramente reducido */
}

/* Estilos para inputs de texto, email y textarea */
input[type="text"],
input[type="email"],
textarea {
    width: 100%;                      /* Ocupan todo el ancho disponible */
    padding: 10px;                    /* Espacio interno */
    margin-top: 5px;                  /* Separación respecto al label */
    border-radius: 6px;               /* Bordes redondeados */
    border: 1px solid #ccc;           /* Borde gris claro */
    font-size: 0.95rem;               /* Tamaño de letra */
}

/* Permite que el textarea se pueda agrandar verticalmente */
textarea {
    resize: vertical;                 /* Solo permite cambiar altura */
}

/* Contenedor para agrupar los checkbox */
.checkbox-group {
    margin-top: 10px;                 /* Espacio superior */
}

/* Estilo de los labels de los checkbox */
.checkbox-group label {
    display: inline-block;            /* Se colocan en línea */
    margin-right: 10px;               /* Espacio entre opciones */
}

/* Estilo del botón de enviar */
input[type="submit"] {
    margin-top: 20px;                 /* Separación respecto al contenido anterior */
    width: 100%;                      /* Botón ocupa todo el ancho */
    padding: 12px;                    /* Tamaño del botón */
    background-color: #4CAF50;        /* Color verde */
    color: white;                     /* Texto blanco */
    border: none;                     /* Sin borde */
    border-radius: 6px;               /* Bordes redondeados */
    font-size: 1rem;                  /* Tamaño de letra */
    cursor: pointer;                  /* Cambia el cursor al pasar por encima */
}

/* Efecto hover cuando el usuario pasa el ratón por encima del botón */
input[type="submit"]:hover {
    background-color: #45a049;        /* Verde un poco más oscuro */
}

/* Estilo para mensajes de error */
.error {
    color: red;                       /* Texto en rojo */
    font-size: 0.9rem;                /* Tamaño de letra ligeramente reducido */
    margin-top: 5px;                  /* Espacio superior */
}
/* Estilo para mensajes de éxito */
.success {
    color: green;                     /* Texto en verde */
    font-size: 1rem;                  /* Tamaño de letra */
    margin-top: 10px;                 /* Espacio superior */
    text-align: center;               /* Centra el texto */
}

.site-footer {
  background: #d7d7d7;                 /* Fondo gris claro */
  padding: 2rem 0;                     /* Espaciado vertical */
  margin-top: 3rem;                    /* Separación del contenido */
  text-align: center;                  /* Centra el texto */
  font-size: 0.9rem;                   /* Tamaño ligeramente reducido */
}

/* Enlaces del footer */
.site-footer a {
  color: #4d8359;                      /* Morado corporativo */
  font-weight: 600;                    /* Negrita */
  width: 100%;
  align-self: stretch;
}


.container {
    flex-direction: row;
  width: 90%;              /* El contenido ocupa el 90% del ancho de la pantalla */
  max-width: 1100px;       /* Pero nunca supera los 1100px para mantener legibilidad */
  margin: auto;            /* Centra el contenedor horizontalmente */
  position: relative; 
}