/*
 * Archivo: style.css
 * Contiene estilos CSS personalizados que complementan las clases de utilidad de Tailwind CSS.
 * Enfocado en la navegación, el mockup del dispositivo y la codificación de colores AQI.
 */

/* =======================================
   1. Estilos de Navegación y Secciones
   ======================================= */

/* Estilo para el enlace de navegación activo (línea azul inferior) */
.nav-link.active {
    color: #2563eb; /* blue-600 */
    border-bottom: 2px solid #2563eb;
}

/* Estilo base para las secciones de la aplicación SPA */
.section {
    min-height: calc(100vh - 80px); /* Ajusta a la altura de la vista menos la altura del navbar */
}

/* =======================================
   2. Estilos del Mockup del Dispositivo
   ======================================= */

.device-mockup {
    background-color: #2c3e50; /* Gris oscuro para simular carcasa */
    border-radius: 1.5rem; /* rounded-xl */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 8px solid #1a242f; /* Borde más oscuro */
}

.screen-mockup {
    background-color: #1a242f; /* Fondo de pantalla oscuro */
    color: #ffffff;
    border-radius: 0.5rem; /* rounded-lg */
    padding: 1rem;
    text-align: center;
    font-family: 'Courier New', Courier, monospace; /* Fuente de display digital */
}


/* =======================================
   3. Estilos de Codificación de Color AQI
   ======================================= */

/* AQI - BUENA (Good) */
.aqi-good {
    background-color: #10b981; /* green-500 */
    color: #ffffff;
}

/* AQI - MODERADA (Moderate) */
.aqi-moderate {
    background-color: #f59e0b; /* yellow-600 */
    color: #ffffff;
}

/* AQI - NO SALUDABLE (Unhealthy) */
.aqi-unhealthy {
    background-color: #ef4444; /* red-500 */
    color: #ffffff;
}

/* Estilo para tarjetas de datos */
.data-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.data-card:hover {
    transform: translateY(-3px);
}