/*assets/css/theme.css*/
html[data-theme="dark"] {
    --color-primary: #FF1493; /* Magenta (Principal en oscuro para contraste) */
    --color-accent: #00BFFF;  /* Cian (Acento en oscuro) */
    --color-accent-subtle: rgba(0, 191, 255, 0.4);
    --color-text: #E5E7EB; 
    --color-background: #000000; /* Negro para mayor impacto */
    --color-light: #121212; 
    --color-dark: #374151; 
}

/* Adaptación de elementos para tema oscuro */


html[data-theme="dark"] .navbar {
    background-color: var(--color-light) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


@media (min-width: 900px) {
    html[data-theme="dark"] .nav-button:hover{
        background-color: var(--color-text) !important;
    }   
}




html[data-theme="dark"] .navbar-toggler-icon{
    filter: invert(1) !important;
}

html[data-theme="dark"] .hero-section {
    background-color: #0d0d0d; /* Negro sutilmente diferente */
    color: var(--color-text);
}



html[data-theme="dark"] .hero-section h1{
    color:var(--color-text) !important
}

html[data-theme="dark"] .hero-section .lead{
    color:var(--color-text) !important
}



html[data-theme="dark"] .nichos-section{
    background-color: var(--color-dark);
    color: var(--color-text)
}


html[data-theme="dark"] .section-description{
    color: var(--color-text)
}



html[data-theme="dark"] .card {
    background-color: var(--color-light); /* Fondo de tarjeta en oscuro */
    color: var(--color-text);
    border-top-color: var(--color-primary);
}

html[data-theme="dark"] .card .btn:hover{
    color: var(--color-accent);
    background-color: var(--color-background);
}


html[data-theme="dark"]  footer {
    background-color: var(--color-background);
    color: var(--color-text);
}






html[data-theme="dark"] .nicho-card h4 {
    color: var(--color-primary); /* Título de tarjeta en color primario */
}
html[data-theme="dark"] .cta-general {
    background-color: #111827; /* Fondo oscuro sutil */
}
html[data-theme="dark"] .cta-button-secondary {
    background-color: var(--color-accent); /* Cian */
    color: var(--color-dark);
}




html[data-theme="dark"] .cta-button {
    background-color: var(--color-accent); /* Cian */
    color: #121212;
}





html[data-theme="dark"] .dropdown-menu{
background-color: var(--color-light) !important;

}

html[data-theme="dark"] .dropdown-item{
color: var(--color-accent) !important
}

html[data-theme="dark"] .dropdown-item:hover{
background-color: var(--color-black) !important
}