/* Estilos generales */
body {
background-color: #f2f2f2;
font-family: 'Segoe UI', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
/* Título centrado */
h2 {
color: #2c3e50;
font-size: 2em;
margin-bottom: 20px;
}
/* Estilo del formulario como calculadora */
form {
background-color: #ffffff;
padding: 20px 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
display: flex;
align-items: center;
gap: 10px;
}
/* Campos de entrada y resultado */
input[type="number"],
input[readonly],
select {
font-size: 1.5em;
padding: 10px;
width: 80px;
text-align: center;
border: 1px solid #ccc;
border-radius: 5px;
}
#result {
width: 120px;
}
/* Botón de igual */
button {
font-size: 1.5em;
padding: 10px 20px;
background-color: #34495e;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #2c3e50;
}
/* Eliminar flechas en Chrome, Safari, Edge */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Eliminar flechas en Firefox */
input[type=number] {
-moz-appearance: textfield;
}