/* Estilos generales de cambio de base */
body {
    font-family: Arial, sans-serif;   /* Fuente principal */
    background-color: #f0f4f8;        /* Fondo claro */
    color: #333;                       /* Color de texto oscuro */
    display: flex;                     /* Usamos flexbox para estructura */
    flex-direction: column;            /* Elementos en columna */
    min-height: 100vh;                 /* Altura mínima de 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 */
    max-width: 600px;                  /* Ancho máximo para centrado */
    margin: 2rem auto;                 /* Centrado horizontal con margen vertical */
    padding: 1rem;                     /* Espaciado interno */
    display: flex;
    flex-direction: column;            /* Columna vertical */
    gap: 1.5rem;                       /* Espacio entre elementos */
}

/* Estilos de formularios y contenedor de inputs */
.inputs, form {
    display: flex;
    flex-direction: column;            /* Columna vertical */
    gap: 1rem;                         /* Espacio entre campos */
}

/* Estilos de campos numéricos */
input[type="number"] {
    padding: 0.5rem;                   /* Espaciado interno */
    font-size: 1rem;                   /* Tamaño de letra */
    border-radius: 6px;                /* Bordes redondeados */
    border: 2px solid #ccc;            /* Borde gris */
    transition: border 0.3s;           /* Transición suave al cambiar borde */
}

/* Estilo cuando un input está enfocado */
input[type="number"]:focus {
    border-color: #4a90e2;             /* Cambia el borde a azul */
    outline: none;                      /* Sin 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: 6px;                /* Bordes redondeados */
    cursor: pointer;                   /* Cursor tipo puntero */
    transition: background 0.3s;       /* Transición suave al cambiar color */
}

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

/* Estilos para mostrar resultados */
.resultado {
    padding: 1rem;                      /* Espaciado interno */
    border-left: 5px solid #4a90e2;    /* Línea azul a la izquierda */
    border-radius: 6px;                 /* Bordes redondeados */
    font-weight: bold;                  /* Texto en negrita */
    white-space: pre-line;              /* Respeta saltos de línea */
    transition: background 0.3s, border-color 0.3s; /* Transición suave para cambios */
}

/* Contenedor de video centrado */
.video {
    text-align: center;                 /* Centrado horizontal */
}

/* Estilos para iframe de videos */
iframe {
    max-width: 100%;                    /* Ajusta al ancho del contenedor */
    height: 315px;                      /* Altura fija */
    border-radius: 6px;                 /* Bordes redondeados */
}

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