/* Reseteo básico para quitar márgenes y asegurar el tamaño */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* Cuerpo de la página: Fondo negro, texto blanco, todo centrado */
body {
    background-color: #000000; /* Fondo negro puro */
    color: #ffffff; /* Texto blanco puro */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 100vh; /* Ocupa toda la altura de la pantalla */
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    overflow: hidden; /* Evita barras de desplazamiento */
    text-align: center; /* Centra el texto y los elementos inline */
}

/* Contenedor principal */
.app-container {
    padding: 20px;
    width: 100%;
    max-width: 600px; /* No se hará demasiado ancho en PC */
}

/* Logo central de 350x350 */
.app-logo {
    width: 350px;
    height: 350px;
    margin: 0 auto 40px; /* Centrado y separación inferior */
    display: block;
    object-fit: contain; /* Mantiene la proporción de tu imagen */
    /* Sombra sutil blanca para darle profundidad sobre el fondo negro */
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1); 
}

/* Título de la radio */
.app-title {
    font-size: 2.5rem;
    letter-spacing: 4px;
    font-weight: 800;
    margin-bottom: 50px;
    color: #ffffff; /* Título en blanco puro */
    text-transform: uppercase;
}

/* Botón de instalación */
.install-btn {
    background-color: #ffffff; /* Botón blanco */
    color: #000000; /* Texto del botón negro */
    border: 2px solid #ffffff;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease; /* Transición suave al pasar el ratón */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
    display: inline-block;
}

/* Efecto al pasar el ratón por encima (en PC) o al presionar (en móviles) */
.install-btn:hover {
    background-color: #000000; /* El botón se vuelve negro */
    color: #ffffff; /* El texto se vuelve blanco */
    transform: translateY(-2px); /* Sube un poquito */
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);
}

.install-btn:active {
    transform: translateY(0); /* Vuelve a su posición al hacer clic */
}

/* Clase para ocultar el botón cuando la app ya está instalada */
.hidden {
    display: none !important;
}

/* Responsive: Si la pantalla es muy pequeña (móviles antiguos), reducimos un poco el logo */
@media (max-width: 400px) {
    .app-logo {
        width: 280px;
        height: 280px;
    }
    .app-title {
        font-size: 2rem;
    }
}