:root {
    --anf-navy: #0F2537;
    --anf-navy-hover: #1A365D;
    --anf-bg-soft: #F8FAFC;
    --anf-card-gray: #F3F4F6;
}

body {
    background-color: #FFFFFF;
    color: #1E293B;
}

/* Espacio extra en móvil para la barra de navegación inferior fija (Vista 6) */
@media (max-width: 768px) {
    body {
        padding-bottom: 4.5rem;
    }
}

/* Tarjetas de sectores en Inicio (Vista 1) */
.sector-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sector-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(15, 37, 55, 0.1);
}

/* Círculos de color (Vistas 2 y 3) */
.swatch-dot {
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.swatch-dot.active {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px var(--anf-navy);
}