/* ============================================================
   SEMANARIO TUCUMANO - THEME SYSTEM (claro / oscuro)
   Modo claro y oscuro con transición suave + toques modernos
   ============================================================ */

:root{
    --st-bg-body:        #ffffff;
    --st-bg-alt:         #f6f7f9;
    --st-bg-card:        #ffffff;
    --st-bg-header:      #1d1d1d;
    --st-text-heading:   #232323;
    --st-text-body:      #333333;
    --st-text-muted:     #7a7a7a;
    --st-border:         #eaeaea;
    --st-accent:         #ff0303;
    --st-accent-2:       #ff084e;
    --st-shadow:         0 10px 30px rgba(20, 20, 20, 0.06);
    --st-shadow-hover:   0 16px 40px rgba(20, 20, 20, 0.12);
    --st-toggle-bg:      #1d1d1d;
    --st-toggle-fg:      #ffffff;
    color-scheme: light;
}

html[data-theme="dark"]{
    --st-bg-body:        #121212;
    --st-bg-alt:         #181818;
    --st-bg-card:        #1b1b1d;
    --st-bg-header:      #0d0d0d;
    --st-text-heading:   #f5f5f5;
    --st-text-body:      #e2e2e2;
    --st-text-muted:     #a7a7a7;
    --st-border:         #2c2c2e;
    --st-accent:         #ff3b4e;
    --st-accent-2:       #ff5577;
    --st-shadow:         0 10px 30px rgba(0, 0, 0, 0.45);
    --st-shadow-hover:   0 16px 45px rgba(0, 0, 0, 0.55);
    --st-toggle-bg:      #f5f5f5;
    --st-toggle-fg:      #121212;
    color-scheme: dark;
}

/* ---------- Transición suave global ---------- */
html, body{
    background-color: var(--st-bg-body);
}
body,
.header-area, .top-header, .middle-header, .bottom-header,
.main-content-wrapper, .gazette-welcome-post, .gazette-todays-post,
.gazette-single-todays-post, .sidebar-area, .advert-widget,
.footer-area, .single-blog-post-slide, .catagory-welcome-post-area,
.breadcumb-area, .latest-news-marquee-area, .simple-marquee-container,
h1, h2, h3, h4, h5, h6, p, a, span, .todays-post-thumb img,
.blog-post-thumbnail img{
    transition: background-color .35s ease, color .35s ease,
                border-color .35s ease, box-shadow .35s ease;
}

/* ---------- Base tipográfica ---------- */
body{
    color: var(--st-text-body);
    background-color: var(--st-bg-body);
}
h1, h2, h3, h4, h5, h6{
    color: var(--st-text-heading);
}
p{
    color: var(--st-text-body);
}
.gazette-post-date,
.todays-post-content span,
.post-total-comments{
    color: var(--st-text-muted) !important;
}

/* ---------- Header ---------- */
.top-header{
    background-color: var(--st-bg-header);
}
.middle-header{
    background-color: var(--st-bg-body);
}
.bottom-header{
    background-color: var(--st-bg-body);
    border-top: 1px solid var(--st-border);
}
.main-menu .navbar.navbar-expand-lg .nav-link{
    color: var(--st-text-body);
}
.main-menu .dropdown-menu.show{
    background-color: var(--st-bg-card);
    box-shadow: var(--st-shadow);
}
.main-menu .dropdown-item{
    color: var(--st-text-body);
    background-color: transparent;
}
.main-menu .dropdown-item:hover{
    background-color: var(--st-bg-alt);
}

/* ---------- Contenido / tarjetas ---------- */
.main-content-wrapper{
    background-color: var(--st-bg-body);
}
.gazette-welcome-post h2,
.gazette-welcome-post p,
.gazette-welcome-post font,
.todays-post-content h3 a,
.todays-post-content p{
    color: var(--st-text-body);
}
.gazette-welcome-post h2,
.todays-post-content h3 a{
    color: var(--st-text-heading);
}
.gazette-welcome-post font{
    color: var(--st-text-muted);
}
.post-continue-btn a{
    border-color: var(--st-text-heading);
    color: var(--st-text-heading);
}
.gazette-heading h4{
    color: var(--st-text-heading);
    border-bottom-color: var(--st-border);
}
.sidebar-area .widget-title h5{
    color: var(--st-text-heading);
}
.advert-widget{
    background-color: var(--st-bg-card);
}
.catagory-welcome-post-area .gazette-welcome-post{
    border-bottom-color: var(--st-border);
}
.breadcumb-area{
    background-color: var(--st-bg-alt);
}

/* ---------- Toques modernos (sombras suaves, esquinas, hover) ---------- */
.gazette-welcome-post .blog-post-thumbnail,
.todays-post-thumb,
.advert-thumb{
    border-radius: 10px;
    overflow: hidden;
}
.gazette-welcome-post .blog-post-thumbnail img,
.todays-post-thumb img{
    border-radius: 10px;
    transition: transform .5s ease;
}
.gazette-single-todays-post:hover .todays-post-thumb img,
.gazette-welcome-post:hover .blog-post-thumbnail img{
    transform: scale(1.03);
}
.gazette-post-tag a{
    border-radius: 3px;
    letter-spacing: 1.2px;
}
.post-continue-btn a{
    border-radius: 30px;
    transition: all .3s ease;
}
.welcome-blog-post-slide .single-blog-post-content{
    transition: transform .3s ease;
}

/* ---------- Footer ---------- */
.footer-area{
    background-color: #0d0d0d;
}

/* ============================================================
   BOTÓN / SWITCH DE MODO CLARO-OSCURO
   ============================================================ */
.st-theme-toggle{
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 9999;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--st-toggle-bg);
    color: var(--st-toggle-fg);
    box-shadow: var(--st-shadow);
    cursor: pointer;
    font-size: 18px;
    transition: background-color .3s ease, color .3s ease,
                box-shadow .3s ease, transform .2s ease;
}
.st-theme-toggle:hover{
    box-shadow: var(--st-shadow-hover);
    transform: translateY(-2px);
}
.st-theme-toggle:active{
    transform: translateY(0);
}
.st-theme-toggle i{
    pointer-events: none;
}

@media (max-width: 767px){
    .st-theme-toggle{
        top: auto;
        bottom: 18px;
        right: 18px;
        width: 42px;
        height: 42px;
        font-size: 16px;
    }
}