/* Estilos generales para toda la página */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden; /* Evita barras de desplazamiento */
    font-family: sans-serif;
}

/* Contenedor principal de la aplicación */
#app {
    width: 100%;
    height: 100%;
    display: flex; /* Habilita Flexbox en #app */
    flex-direction: column;
    /* #app actúa como el contenedor de página completa para el div de tema oscuro */
}


#dark-theme-div {
    width: 100%;
    /* height: 100%; */ /* Esta línea es redundante si usas flex-grow: 1 */
    flex-grow: 1; /* Hace que dark-theme-div ocupe todos el espacio disponible */
    background-color: #1a1a1a;
    color: #f0f0f0;
    display: flex;
    /* --- ¡AQUÍ ESTÁ EL CAMBIO CLAVE! --- */
    flex-direction: column; /* Apila los elementos hijos (imagen y párrafo) verticalmente */
    /* ---------------------------------- */
    justify-content: center; /* Centra el contenido (imagen y párrafo) verticalmente */
    align-items: center; /* Centra el contenido (imagen y párrafo) horizontalmente */
}

/* Estilos para el icono de la aplicación */
/* Estilos para el icono de la aplicación */
.app-icon {
    max-width: 150px; /* Ancho máximo del icono */
    max-height: 150px; /* Alto máximo del icono */
    height: auto; /* Mantiene la proporción del icono */
    display: block; /* Asegura que se comporte como un bloque */
    object-fit: contain; /* Asegura que la imagen completa quepa dentro de sus dimensiones */
    animation: floatUpDown 0.5s ease-in-out infinite alternate; /* Animación de flotación */
}
/* Nuevo estilo para el texto en la parte inferior */
.bottom-text {
    margin-top: 20px; /* Espacio entre el icono y el texto */
    font-size: 1.2em; /* Tamaño del texto, ajusta si es necesario */
    text-align: center; /* Asegura que el texto esté centrado si ocupa varias líneas */
    max-width: 80%; /* Limita el ancho del texto para que no ocupe toda la pantalla */
}

/* Estilos para el pie de página */
#page-footer {
    width: 100%;
    padding: 15px 0; /* Espaciado interno */
    background-color: #0d0d0d; /* Un color ligeramente más oscuro para el pie de página */
    color: #ababab; /* Color del texto del pie de página */
    text-align: center; /* Centra el texto horizontalmente */
    font-size: 0.9em; /* Tamaño de fuente más pequeño */
    flex-shrink: 0; /* Evita que el footer se encoja */
}

/* Asegurarse de que el párrafo dentro del footer no tenga márgenes que lo desplacen */
#page-footer p {
    margin: 0;
}

/* Definición de la animación de flotación */
@keyframes floatUpDown {
    from {
        transform: translateY(0); /* Posición inicial */
    }

    to {
        transform: translateY(-20px); /* Se mueve 15px hacia arriba */
    }
}