body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;/* Tipo de letra que usará toda la página */
    place-items: center;/* Centra el contenido, pero SOLO funciona si el body tiene display: grid */
}

label {
   display: block;/* Hace que cada label ocupe toda la línea */
   background-color: #48A111; /* Color de fondo azul claro */
   width: 70px;/* Ancho del label */
   border: 0px solid #4d82bc;/* Borde (en este caso no se ve porque es 0px) */
   padding: 3px; /* Espacio interno */
   margin: 1px; /* Espacio externo */

}

button { 
    display: block; /* Hace que el botón ocupe su propia línea */
    color: white;/* Color del texto */
    background-color: #005187; /* Color de fondo */
    border-radius: 8px; /* Bordes redondeados */
    border: none; /* Quita el borde */
    padding: 15px 32px;/* Espacio interno */
    cursor: pointer;/* Cambia el cursor a manita */
    width: 120px;/* Ancho inicial */
    transition:  2s; /* La animación dura 2 segundos */
    margin: 0 auto;  /* Centra el botón horizontalmente */
    text-align: center;/* Centra el texto */
}

div{

    border: 2px solid #004173;   /* Borde azul oscuro */
    padding: 20px; /* Espacio interno */      
    width: 300px;  /* Ancho del contenedor */        
    background-color: #f0f0f0;/* Fondo gris claro */
    }

button:hover {
  width: 200px;/* Cuando pasas el mouse, el botón se hace más ancho */
}

input {
    width: 285px;/* Ancho del campo */
    align-items: center;  /* Esta propiedad NO funciona en input (solo en flex o grid) */
    padding: 5px 5px;    /* Espacio interno */
    border: 1px solid #0979b0;  /* Borde azul */

}