:root{
    --site-bg:var(--tsw-light-bg);
    --site-bg-secondary:var(--tsw-light-bg-secondary);
    --site-text:var(--tsw-light-text);
    --site-text-secondary:var(--tsw-light-text-secondary);
    --site-border:var(--tsw-light-border);
    --site-accent:var(--tsw-light-accent);

    --infobar-bg:var(--site-bg);
    --infobar-text:var(--site-text);
    --infobar-accent:var(--site-accent);
    --infobar-accent-text:#ffffff;
    --infobar-icon:var(--site-text);
}

html[data-theme="light"]{
    --site-bg:var(--tsw-light-bg);
    --site-bg-secondary:var(--tsw-light-bg-secondary);
    --site-text:var(--tsw-light-text);
    --site-text-secondary:var(--tsw-light-text-secondary);
    --site-border:var(--tsw-light-border);
    --site-accent:var(--tsw-light-accent);

    --infobar-bg:var(--site-bg);
    --infobar-text:var(--site-text);
    --infobar-accent:var(--site-accent);
    --infobar-accent-text:#ffffff;
    --infobar-icon:var(--site-text);
}

html[data-theme="dark"]{
    --site-bg:var(--tsw-dark-bg);
    --site-bg-secondary:var(--tsw-dark-bg-secondary);
    --site-text:var(--tsw-dark-text);
    --site-text-secondary:var(--tsw-dark-text-secondary);
    --site-border:var(--tsw-dark-border);
    --site-accent:var(--tsw-dark-accent);

    --infobar-bg:var(--site-bg);
    --infobar-text:var(--site-text);
    --infobar-accent:var(--site-accent);
    --infobar-accent-text:#ffffff;
    --infobar-icon:var(--site-text);
}

body{
    background-color:var(--site-bg);
    color:var(--site-text);
}

.tsw-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0;
    border:0;
    background:transparent;
    color:inherit;
    font:inherit;
    cursor:pointer;
}

.tsw-track{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    width:var(--tsw-toggle-width);
    height:var(--tsw-toggle-height);
    border-radius:var(--tsw-toggle-radius);
    padding:0 5px;
    box-sizing:border-box;
    background:var(--tsw-toggle-bg-light);
    transition:background-color .2s ease;
}

html[data-theme="dark"] .tsw-track{
    background:var(--tsw-toggle-bg-dark);
}

.tsw-knob{
    position:absolute;
    top:3px;
    left:3px;
    width:calc(var(--tsw-toggle-height) - 6px);
    height:calc(var(--tsw-toggle-height) - 6px);
    border-radius:50%;
    background:#ffffff;
    box-shadow:0 1px 4px rgba(0,0,0,.25);
    transition:transform .2s ease;
    z-index:2;
}

html[data-theme="dark"] .tsw-knob{
    transform:translateX(calc(var(--tsw-toggle-width) - var(--tsw-toggle-height)));
}

.tsw-icon{
    position:relative;
    z-index:3;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:14px;
    height:14px;
    pointer-events:none;
}

.tsw-icon svg{
    width:100%;
    height:100%;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.tsw-icon-sun{
    color:var(--tsw-toggle-icon-light);
}

.tsw-icon-moon{
    color:var(--tsw-toggle-icon-dark);
}

.tsw-style-icons .tsw-track{
    width:auto;
    height:auto;
    padding:0;
    background:transparent !important;
    gap:6px;
}

.tsw-style-icons .tsw-knob{
    display:none;
}

.tsw-style-icons .tsw-icon{
    width:18px;
    height:18px;
    opacity:.35;
    transition:opacity .2s ease, transform .2s ease;
}

html[data-theme="light"] .tsw-style-icons .tsw-icon-sun,
html[data-theme="dark"] .tsw-style-icons .tsw-icon-moon{
    opacity:1;
    transform:scale(1.08);
}

.tsw-label{
    font-size:12px;
    line-height:1;
    color:var(--site-text);
}


/* =========================================================
   1.1.0 — Integração com as variáveis globais do Elementor
   ========================================================= */

body.tsw-elementor-integration{
    --e-global-color-primary:var(--site-text);
    --e-global-color-secondary:var(--site-text-secondary);
    --e-global-color-text:var(--site-text);
    --e-global-color-accent:var(--site-accent);

    /* aliases úteis para widgets/temas que usam tokens */
    --e-global-color-background:var(--site-bg);
    --e-global-color-border:var(--site-border);
}

/*
 * Modo automático opcional.
 * Não é necessário quando o layout já utiliza as variáveis globais.
 */
body.tsw-auto-site-colors{
    background-color:var(--site-bg) !important;
    color:var(--site-text);
}

body.tsw-auto-site-colors .site,
body.tsw-auto-site-colors .site-content,
body.tsw-auto-site-colors main,
body.tsw-auto-site-colors .elementor-location-header,
body.tsw-auto-site-colors .elementor-location-footer{
    color:var(--site-text);
}

/* Textos que não possuem uma cor específica inline */
body.tsw-auto-site-colors .elementor-widget-text-editor,
body.tsw-auto-site-colors .elementor-widget-heading .elementor-heading-title,
body.tsw-auto-site-colors p,
body.tsw-auto-site-colors li{
    color:var(--site-text);
}

/* Classes opcionais para uso visual no Elementor sem escrever CSS */
.theme-bg{
    background-color:var(--site-bg) !important;
}
.theme-bg-secondary{
    background-color:var(--site-bg-secondary) !important;
}
.theme-text{
    color:var(--site-text) !important;
}
.theme-text-secondary{
    color:var(--site-text-secondary) !important;
}
.theme-border{
    border-color:var(--site-border) !important;
}
.theme-accent{
    color:var(--site-accent) !important;
}
.theme-accent-bg{
    background-color:var(--site-accent) !important;
}


/* =========================================================
   1.2.0 — Integração automática por ID
   ---------------------------------------------------------
   Exemplos com prefixo padrão "themesw-":

   themesw-header           -> fundo principal
   themesw-menu             -> fundo principal
   themesw-footer           -> fundo principal

   themesw-secondary-news   -> fundo secundário
   themesw-accent-cta       -> fundo de destaque
   themesw-text-title       -> somente texto
   themesw-border-box       -> somente borda
   ========================================================= */


/* =========================================================
   1.2.1 — Compatibilidade com o plugin News Ticker
   Use no container do Elementor um ID iniciado por:
   themesw-news
   Exemplo: themesw-news-header
   ========================================================= */

body.tsw-id-integration [id^="themesw-news"] .vnr-ntw-wrap{
    background:var(--site-bg) !important;
    color:var(--site-text) !important;
    border-color:var(--site-border) !important;
}

body.tsw-id-integration [id^="themesw-news"] .vnr-ntw-label{
    background:var(--site-accent) !important;
    color:#ffffff !important;
}

body.tsw-id-integration [id^="themesw-news"] .vnr-ntw-item,
body.tsw-id-integration [id^="themesw-news"] .vnr-ntw-title,
body.tsw-id-integration [id^="themesw-news"] .vnr-ntw-date{
    color:var(--site-text) !important;
}

body.tsw-id-integration [id^="themesw-news"] .vnr-ntw-dot{
    color:var(--site-accent) !important;
}

/* Se o shortcode estiver diretamente no elemento com o ID */
body.tsw-id-integration [id^="themesw-news"].vnr-ntw-wrap{
    background:var(--site-bg) !important;
    color:var(--site-text) !important;
}

body.tsw-id-integration [id^="themesw-news"].vnr-ntw-wrap .vnr-ntw-label{
    background:var(--site-accent) !important;
    color:#ffffff !important;
}


/* =========================================================
   1.3.1 — sincronização das transições de tema
   ========================================================= */
html.tsw-theme-changing [id^="themesw-"],
html.tsw-theme-changing .ib2-bar,
html.tsw-theme-changing .ib2-module,
html.tsw-theme-changing .vnr-ntw-wrap,
html.tsw-theme-changing .vnr-ntw-label{
    transition-delay:0ms!important;
}


/* =========================================================
   1.4.0 — integração de menus
   Qualquer menu com ID iniciado por themesw-menu-
   acompanha automaticamente o tema.
   ========================================================= */
[id^="themesw-menu-"]{
    color:var(--site-text);
    border-color:var(--site-border);
}

[id^="themesw-menu-"] .sub-menu,
[id^="themesw-menu-"] .elementor-nav-menu--dropdown{
    border-color:var(--site-border);
}