/* Estilos generales del cuerpo de la página */
body {
    font-family: Arial, sans-serif; /* Fuente principal */
    background-color: #f5f7fa;      /* Color de fondo claro */
    color: #333;                     /* Color de texto oscuro */
    display: flex;                   /* Usamos flexbox para estructura de la página */
    flex-direction: column;          /* Elementos en columna */
    min-height: 100vh;               /* Altura mínima de toda la ventana */
    margin: 0;                       /* Eliminamos márgenes por defecto */
}

/* Estilos del encabezado */
header {
    text-align: center;              /* Centrar texto */
    padding: 2rem;                   /* Espaciado interno */
    background-color: #4a90e2;       /* Fondo azul */
    color: white;                    /* Texto blanco */
}

/* Estilos del contenido principal */
main {
    flex: 1;                         /* Ocupa el espacio disponible */
    display: flex;                   
    flex-direction: column;          /* Columna vertical */
    align-items: center;             /* Centrado horizontal de los elementos */
    padding: 2rem;                   /* Espaciado interno */
}

/* Estilos de formularios */
form {
    display: flex;                   /* Flexbox para los inputs y botón */
    flex-direction: column;          /* Columna vertical */
    gap: 1rem;                       /* Espacio entre elementos */
    width: 300px;                    /* Ancho fijo del formulario */
}

/* Estilos para los campos numéricos */
input[type="number"] {
    padding: 0.5rem;                 /* Espaciado interno */
    font-size: 1rem;                 /* Tamaño de letra */
    border-radius: 5px;              /* Bordes redondeados */
    border: 2px solid #ccc;          /* Borde gris claro */
}

/* Estilo cuando un input está enfocado */
input[type="number"]:focus {
    border-color: #4a90e2;           /* Cambia el borde al azul */
    outline: none;                   /* Eliminamos el contorno por defecto */
}

/* Estilos de botones */
button {
    padding: 0.7rem;                 /* Espaciado interno */
    background-color: #4a90e2;       /* Fondo azul */
    color: white;                    /* Texto blanco */
    border: none;                    /* Sin borde */
    border-radius: 5px;              /* Bordes redondeados */
    cursor: pointer;                 /* Cambia el cursor al pasar por encima */
}

/* Efecto al pasar el ratón sobre el botón */
button:hover {
    background-color: #357abd;       /* Azul más oscuro */
}

/* Estilos para mostrar la fórmula */
.formula {
    margin-top: 1rem;                /* Separación superior */
    padding: 1rem;                   /* Espaciado interno */
    width: 300px;                     /* Ancho fijo */
    border-left: 5px solid #4a90e2;  /* Línea azul a la izquierda */
    border-radius: 5px;               /* Bordes redondeados */
    background-color: #e7f0fd;       /* Fondo azul muy claro */
    font-style: italic;               /* Texto en cursiva */
    white-space: pre-line;            /* Respeta saltos de línea */
}

/* Estilos para mostrar el resultado */
.resultado {
    margin-top: 1rem;                /* Separación superior */
    padding: 1rem;                   /* Espaciado interno */
    width: 300px;                     /* Ancho fijo */
    border-left: 5px solid #4a90e2;  /* Línea azul a la izquierda */
    border-radius: 5px;               /* Bordes redondeados */
    font-weight: bold;               /* Texto en negrita */
    white-space: pre-line;            /* Respeta saltos de línea */
}

/* Estilos del pie de página */
footer {
    text-align: center;              /* Centrado de texto */
    padding: 1rem;                   /* Espaciado interno */
    background-color: #333;          /* Fondo oscuro */
    color: white;                    /* Texto blanco */
}