/* =========================================================
   Syntech Chamado - Temas escuro e claro
   Mesma paleta do Syntech Flow.
   Uso: <html data-tema="escuro"> ou <html data-tema="claro">
   Carregar SEMPRE depois dos demais CSS.
   ========================================================= */

/* ---------- TEMA ESCURO (padrao) ---------- */
:root,
[data-tema="escuro"] {
  --fundo-pagina:        #3c3f4e;
  --topo:                #292b35;
  --topo-borda:          #292b35;
  --topo-titulo:         #ffffff;
  --topo-texto:          #dcdcdc;

  --menu:                #292b35;
  --menu-icone:          #ffffff;
  --menu-texto:          #dcdcdc;
  --menu-texto-suave:    #9ca3af;
  --menu-hover:          #4d4d4d;
  --menu-hover-texto:    #ffffff;
  --menu-ativo:          #ff791f;
  --menu-ativo-texto:    #ffffff;
  --menu-divisor:        rgba(255, 255, 255, 0.1);

  --card:                #292b35;
  --card-cabecalho:      #1e2026;
  --tabela-cab:          #1e2026;
  --card-hover:          rgba(255, 255, 255, 0.04);
  --sombra-card:         0 8px 40px rgba(0, 0, 0, 0.35);
  --borda:               #3b3e4d;
  --texto:               #dcdcdc;
  --texto-suave:         #9ca3af;
  --texto-fraco:         #6b7280;

  --campo:               #1e2026;
  --campo-texto:         #dcdcdc;
  --campo-borda:         #3b3e4d;
  --campo-placeholder:   #6b7280;

  --acento:              #f37c20;
  --acento-hover:        #ff791f;
  --acento-texto:        #ffffff;
  --acento-borda:        rgba(243, 124, 32, 0.2);
  --acento-fundo:        rgba(243, 124, 32, 0.15);

  --btn-tema-fundo:      #3a3d4a;
  --btn-tema-borda:      #4a4d5a;
  --btn-tema-texto:      #e6e7ec;

  --erro-fundo:          #3d1a1a;
  --erro-texto:          #f08080;

  --logo-filtro:         none;
}

/* ---------- TEMA CLARO (branco com azul) ---------- */
[data-tema="claro"] {
  --fundo-pagina:        #eef2f7;
  --topo:                #ffffff;
  --topo-borda:          #d9e2ee;
  --topo-titulo:         #1b2230;
  --topo-texto:          #1b2230;

  --menu:                #ffffff;
  --menu-icone:          #44526a;
  --menu-texto:          #44526a;
  --menu-texto-suave:    #5f6b80;
  --menu-hover:          #eaf1fb;
  --menu-hover-texto:    #1f5fae;
  --menu-ativo:          #1f5fae;
  --menu-ativo-texto:    #ffffff;
  --menu-divisor:        #e2e9f3;

  --card:                #ffffff;
  --card-cabecalho:      #dbe8f8;
  --tabela-cab:          #f1f5fb;
  --card-hover:          #eaf1fb;
  --sombra-card:         0 1px 3px rgba(20, 40, 80, 0.08), 0 8px 24px rgba(20, 40, 80, 0.08);
  --borda:               #d9e2ee;
  --texto:               #1b2230;
  --texto-suave:         #4a5669;
  --texto-fraco:         #5f6b80;

  --campo:               #edf2f9;
  --campo-texto:         #1b2230;
  --campo-borda:         #b7c5da;
  --campo-placeholder:   #5f6b80;

  --acento:              #1f5fae;
  --acento-hover:        #184e94;
  --acento-texto:        #ffffff;
  --acento-borda:        rgba(31, 95, 174, 0.25);
  --acento-fundo:        rgba(31, 95, 174, 0.12);

  --btn-tema-fundo:      #ffffff;
  --btn-tema-borda:      #c9d5e6;
  --btn-tema-texto:      #1f3a63;

  --erro-fundo:          #fdeeee;
  --erro-texto:          #b42323;

  /* logo/icones brancos viram escuros, mantendo o laranja (invert + hue 180) */
  --logo-filtro:         invert(1) hue-rotate(180deg);
}

/* =========================================================
   Botao de tema em pilula (icone + "Tema claro/escuro")
   ========================================================= */
.btn-tema-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--btn-tema-borda);
  background: transparent;
  color: var(--texto);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, border-color .2s;
}
.btn-tema-pill:hover { background: var(--acento-fundo); border-color: var(--acento); }
.btn-tema-pill svg { width: 18px; height: 18px; fill: currentColor; }
.btn-tema-pill .ico-sol, .btn-tema-pill .lbl-escuro { display: none; }
[data-tema="claro"] .btn-tema-pill .ico-sol { display: block; }
[data-tema="claro"] .btn-tema-pill .lbl-escuro { display: inline; }
[data-tema="claro"] .btn-tema-pill .ico-lua,
[data-tema="claro"] .btn-tema-pill .lbl-claro { display: none; }
[data-tema="escuro"] .btn-tema-pill { border-color: rgba(255,255,255,.35); color: #e6e7ec; }

/* =========================================================
   Base
   ========================================================= */
html[data-tema] { background: var(--fundo-pagina); }
html[data-tema] body {
  background-color: var(--fundo-pagina);
  color: var(--texto);
}
/* logos brancos viram escuros no claro, mantendo o laranja (invert + hue 180) */
html[data-tema] .login-logo,
html[data-tema] .topbar-home img { filter: var(--logo-filtro); }

/* =========================================================
   Login.php
   ========================================================= */
.login-acoes { display: flex; align-items: center; gap: 14px; }
html[data-tema] body .topbar-home { color: var(--texto-suave); }
html[data-tema] body .topbar-home:hover { color: var(--acento); background: transparent; }
html[data-tema] body .field-input {
  background: var(--campo);
  color: var(--campo-texto);
  border-color: var(--campo-borda);
}
html[data-tema] body .field-input::placeholder { color: var(--campo-placeholder); }
html[data-tema] body .field-input:hover { border-color: var(--acento); }
html[data-tema] body .field-input:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 2px var(--acento-fundo);
}
html[data-tema] body .toggle-senha svg { fill: var(--texto-suave); }
html[data-tema] body .toggle-senha:hover svg { fill: var(--acento); }
html[data-tema] body .btn-login {
  background: var(--acento);
  border: 1px solid var(--acento);
  color: var(--acento-texto);
}
html[data-tema] body .btn-login:hover:not(:disabled) { background: var(--acento-hover); opacity: 1; }
html[data-tema] body .login-error { background: transparent; color: var(--erro-texto); }
html[data-tema] body .login-error .login-error {
  background: var(--erro-fundo);
  color: var(--erro-texto);
  border: 1px solid var(--erro-texto);
  width: 100%;
}
html[data-tema] body .footer-text { color: var(--texto-suave); }

@media screen and (max-width: 1000px) and (orientation: portrait) {
  .login-acoes { gap: 20px; }
  /* celular: so o icone (com texto o botao invadia o logo) */
  .login-acoes { gap: 18px; }
  .login-acoes .btn-tema-pill { width: 62px; height: 62px; padding: 0; justify-content: center; }
  .login-acoes .btn-tema-pill svg { width: 36px; height: 36px; }
  html[data-tema] body .login-acoes .btn-tema-pill span { display: none !important; }
}

/* =========================================================
   Telas de login: dark igual ao Syntech Flow (fundo #292b35,
   campos brancos, botao laranja translucido); claro com fundo #dbe3ee
   ========================================================= */
[data-tema="escuro"] body.pg-login { background-color: #292b35; }
/* no celular o .login-wrapper sobe sobre o topo (margin-top negativo): sem fundo proprio e com o topo SEMPRE por cima */
html[data-tema] body.pg-login .login-wrapper { background: transparent; }
html[data-tema] body.pg-login .topbar { position: relative; z-index: 5; }
[data-tema="claro"] body.pg-login { background-color: #dbe3ee; }
html[data-tema="claro"]:has(body.pg-login) { background: #dbe3ee; }
html[data-tema="escuro"]:has(body.pg-login) { background: #292b35; }

[data-tema="escuro"] body.pg-login .form-input,
[data-tema="escuro"] body.pg-login .field-input {
  background: #ffffff;
  color: #000000;
  border-color: #e0e4ee;
}
[data-tema="escuro"] body.pg-login .form-input::placeholder,
[data-tema="escuro"] body.pg-login .field-input::placeholder { color: #818181; }
[data-tema="escuro"] body.pg-login .form-input:hover,
[data-tema="escuro"] body.pg-login .field-input:hover { border-color: #eaeaea; }
[data-tema="escuro"] body.pg-login .form-input:focus,
[data-tema="escuro"] body.pg-login .field-input:focus {
  border-color: #e0e0e0;
  box-shadow: none;
}
[data-tema="escuro"] body.pg-login .password-toggle { color: #000; }
[data-tema="escuro"] body.pg-login .toggle-senha svg { fill: #000; }
[data-tema="escuro"] body.pg-login .toggle-senha:hover svg { fill: #000; }
[data-tema="escuro"] body.pg-login .btn-access,
[data-tema="escuro"] body.pg-login .btn-login {
  background: linear-gradient(135deg, #ff66008c 0%, #ff6600bd 100%);
  border: 1px solid #f60;
  color: #fff;
}
[data-tema="escuro"] body.pg-login .btn-access:hover:not(:disabled),
[data-tema="escuro"] body.pg-login .btn-login:hover:not(:disabled) { background: linear-gradient(135deg, #ff66008c 0%, #ff6600bd 100%); opacity: .8; }

/* logo do login: margem para nao ficar colado na borda da janela */
html[data-tema] body .login-logo { left: 22px; top: 12px; }
@media screen and (max-width: 1000px) and (orientation: portrait) {
  html[data-tema] body .login-logo { left: 16px; top: 12px; }
}

/* =========================================================
   Topbar + sidebar (_sidebar.php) e painel (painelS.php)
   ========================================================= */
html[data-tema] body { background: var(--fundo-pagina); }
html[data-tema] body .syn-topbar {
  background: var(--topo);
  border-bottom: 1px solid var(--topo-borda);
}
html[data-tema] body .syn-topbar-user,
html[data-tema] body .syn-topbar-user-name { color: var(--topo-texto); }
html[data-tema] body .syn-topbar-logo img { filter: var(--logo-filtro); }
html[data-tema] body .syn-topbar-user { gap: 14px; }
html[data-tema] body #syn-hamburger-icon { color: var(--menu-icone) !important; }

html[data-tema] body #syn-sidebar {
  background: var(--menu);
  border-right: 1px solid var(--topo-borda);
}
html[data-tema] body .syn-toggle-btn { color: var(--menu-icone); }
html[data-tema] body .syn-icon { fill: currentColor; }
html[data-tema] body .syn-nav a,
html[data-tema] body .syn-nav-sair a { color: var(--menu-texto); }
html[data-tema] body .syn-nav a:hover,
html[data-tema] body .syn-nav-sair a:hover {
  background: var(--menu-hover);
  color: var(--menu-hover-texto);
}
html[data-tema] body .syn-nav a.active,
html[data-tema] body .syn-nav-sair a.active {
  background: var(--menu-ativo);
  color: var(--menu-ativo-texto);
}

/* filtros */
html[data-tema] body .syn-filter-label { color: var(--texto-suave); }
html[data-tema] body .syn-filter-date-wrap,
html[data-tema] body .syn-filter-empresa-wrap,
html[data-tema] body .syn-filter-select,
html[data-tema] body .syn-filter-select-user,
html[data-tema] body .assunto {
  background: var(--campo);
  border-color: var(--campo-borda);
  color: var(--campo-texto);
}
html[data-tema] body .syn-filter-date-wrap input[type="text"],
html[data-tema] body .syn-filter-empresa-wrap input[type="text"] {
  background: transparent;
  color: var(--campo-texto);
}
html[data-tema] body .assunto::placeholder,
html[data-tema] body .syn-filter-empresa-wrap input::placeholder { color: var(--campo-placeholder); }
html[data-tema] body .syn-filter-select:focus,
html[data-tema] body .assunto:focus { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-fundo); }
html[data-tema] body .syn-filter-select option,
html[data-tema] body .syn-filter-select-user option { background: var(--campo); color: var(--campo-texto); }
html[data-tema] body .syn-filter-date-wrap span { color: var(--texto-fraco); }
html[data-tema] body .syn-filter-date-wrap img { opacity: .7; }
[data-tema="escuro"] body .syn-filter-date-wrap img { filter: invert(1); }
html[data-tema] body .syn-icon-search { fill: var(--texto-suave); }
html[data-tema] body .syn-filter-check-wrap,
html[data-tema] body .syn-filter-check-wrap-filter { color: var(--texto); }
html[data-tema] body .syn-filter-check-wrap input[type="checkbox"],
html[data-tema] body .syn-filter-check-wrap-filter input[type="checkbox"] { accent-color: var(--acento); }
html[data-tema] body .syn-btn-filtrar {
  background: var(--acento);
  color: var(--acento-texto);
}
html[data-tema] body .syn-btn-filtrar:hover { background: var(--acento-hover); }
html[data-tema] body .syn-btn-limpar {
  background: transparent;
  color: var(--texto-suave);
  border: 1px solid var(--campo-borda);
}
html[data-tema] body .syn-btn-limpar:hover { background: var(--acento-fundo); color: var(--acento); }

/* titulos de secao */
html[data-tema] body .syn-section-title h2 { color: var(--texto); }
html[data-tema] body .syn-section-title-icon.aberto { fill: var(--texto); color: var(--texto); }
[data-tema="escuro"] body .syn-section-title-icon.encerrado { fill: #ff6b6b; }

/* tabela */
html[data-tema] body .syn-table-wrap {
  background: var(--card);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-card);
}
html[data-tema] body .syn-table-head {
  background: var(--tabela-cab);
  color: var(--texto);
  border-bottom: 1px solid var(--borda);
}
html[data-tema] body .syn-table-head .sortable:hover { color: var(--acento); }
html[data-tema] body .sort-icon { color: var(--texto-suave); }
html[data-tema] body .syn-row { border-bottom: 1px solid var(--borda); }
html[data-tema] body .syn-row-main:hover { background: var(--card-hover); }
html[data-tema] body .syn-row-main .syn-col { color: var(--texto); }
html[data-tema] body .syn-row-main .syn-col-por,
html[data-tema] body .syn-row-main .syn-col-data,
html[data-tema] body .syn-row-main .syn-col-tipo { color: var(--texto-suave); }
html[data-tema] body .syn-row-main .syn-col-action a:hover { background: var(--acento-fundo); }
[data-tema="escuro"] body .img-vizualizar { filter: invert(1); }
html[data-tema] body .syn-row-sub {
  background: var(--tabela-cab);
  color: var(--texto-suave);
}
html[data-tema] body .syn-row-sub strong { color: var(--texto); }
html[data-tema] body .syn-row-sub .syn-sub-sep { color: var(--texto-fraco); }
html[data-tema] body .syn-empty { color: var(--texto-suave); }

/* badges de prioridade: no escuro ficam translucidas */
[data-tema="escuro"] body .syn-badge-imediata { background: rgba(231, 76, 60, .16); }
[data-tema="escuro"] body .syn-badge-urgente  { background: rgba(243, 156, 18, .16); }
[data-tema="escuro"] body .syn-badge-alta     { background: rgba(230, 126, 34, .16); }
[data-tema="escuro"] body .syn-badge-normal   { background: rgba(39, 174, 96, .16); }
[data-tema="escuro"] body .syn-badge-baixa    { background: rgba(52, 152, 219, .16); }

/* autocomplete e calendario (jquery-ui) */
html[data-tema] body div.autocomplete {
  background: var(--card);
  border-color: var(--borda);
  color: var(--texto);
}
html[data-tema] body div.autocomplete ul li { color: var(--texto); }
html[data-tema] body div.autocomplete ul li:hover,
html[data-tema] body div.autocomplete ul li.sel { background: var(--acento-fundo); color: var(--acento); }
html[data-tema] body .ui-datepicker {
  background: var(--card);
  border: 1px solid var(--borda);
  color: var(--texto);
}
html[data-tema] body .ui-datepicker .ui-datepicker-header {
  background: var(--card-cabecalho);
  border: 0;
  color: var(--texto);
}
html[data-tema] body .ui-datepicker .ui-datepicker-title,
html[data-tema] body .ui-datepicker th { color: var(--texto); }
html[data-tema] body .ui-datepicker td .ui-state-default {
  background: transparent;
  border: 1px solid transparent;
  color: var(--texto);
}
html[data-tema] body .ui-datepicker td .ui-state-hover {
  background: var(--acento-fundo);
  border-color: var(--acento);
}
html[data-tema] body .ui-datepicker td .ui-state-highlight { border-color: var(--acento); }
html[data-tema] body .ui-datepicker td .ui-state-active {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-texto);
}
html[data-tema] body .ui-datepicker .ui-datepicker-prev,
html[data-tema] body .ui-datepicker .ui-datepicker-next { color: var(--texto); }

/* botao de tema no topo: pilula (so icone no celular) */
.syn-topbar-user .btn-tema-pill { padding: 6px 14px; font-size: 13px; }
@media screen and (max-width: 1000px) and (orientation: portrait) {
  .syn-topbar-user .btn-tema-pill { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .syn-topbar-user .btn-tema-pill svg { width: 20px; height: 20px; }
  html[data-tema] body .syn-topbar-user .btn-tema-pill span { display: none !important; }
  html[data-tema] body .syn-table-head > div { background: var(--card); border-color: var(--borda); color: var(--texto); }
  html[data-tema] body .syn-table-head > div:hover { background: var(--acento-fundo); border-color: var(--acento); }
  html[data-tema] body .syn-table-head { background: none; border-bottom-color: var(--borda); }
  html[data-tema] body .syn-row { background: var(--card); border: 1px solid var(--borda); }
  html[data-tema] body .syn-row-main .syn-col:first-child { color: var(--texto); border-bottom-color: var(--borda); }
  html[data-tema] body .syn-row-main .syn-col-por::before,
  html[data-tema] body .syn-row-main .syn-col-data::before,
  html[data-tema] body .syn-row-main .syn-col-tipo::before,
  html[data-tema] body .syn-row-main .syn-prior-cell::before { color: var(--texto); }
  html[data-tema] body .syn-row-main .syn-col-action a { background: var(--tabela-cab); }
  html[data-tema] body .syn-row-sub { border-top-color: var(--borda); }
  html[data-tema] body .syn-nav a.active { background: var(--menu-ativo); color: var(--menu-ativo-texto); }
  html[data-tema] body .syn-table-wrap { background: transparent; border: 0; }
}

/* =========================================================
   Ajustes: botao de tema (so 1 icone) e mais contraste no claro
   ========================================================= */
.btn-tema-pill .ico-sol,
.btn-tema-pill .lbl-escuro { display: none !important; }
.btn-tema-pill .ico-lua,
.btn-tema-pill .lbl-claro { display: inline-block !important; }
[data-tema="claro"] .btn-tema-pill .ico-sol,
[data-tema="claro"] .btn-tema-pill .lbl-escuro { display: inline-block !important; }
[data-tema="claro"] .btn-tema-pill .ico-lua,
[data-tema="claro"] .btn-tema-pill .lbl-claro { display: none !important; }

[data-tema="escuro"], :root { --linha-sub: var(--tabela-cab); }
/* claro: campos brancos com borda mais forte; cabecalho e linhas de card bem distintos */
[data-tema="claro"] {
  --campo:        #ffffff;
  --campo-borda:  #a9bbd6;
  --tabela-cab:   #dbe8f8;
  --linha-sub:    #f4f7fc;
}
html[data-tema] body .syn-row-sub { background: var(--linha-sub); border-top: 1px solid var(--borda); }
[data-tema="claro"] body .syn-table-head { color: #1f3a63; border-bottom-color: #b7c5da; }
[data-tema="claro"] body .syn-table-wrap { border-color: #b7c5da; }
[data-tema="claro"] body .syn-row { border-bottom-color: #c9d5e6; }
[data-tema="claro"] body .syn-filter-date-wrap,
[data-tema="claro"] body .syn-filter-empresa-wrap,
[data-tema="claro"] body .syn-filter-select,
[data-tema="claro"] body .syn-filter-select-user,
[data-tema="claro"] body .assunto { box-shadow: 0 1px 2px rgba(20, 40, 80, 0.08); }

/* =========================================================
   Detalhes do chamado - chamado.php
   ========================================================= */
html[data-tema] body .syn-card,
html[data-tema] body .syn-message-card,
html[data-tema] body .syn-post {
  background: var(--card);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-card);
}
html[data-tema] body .syn-page-header h1,
html[data-tema] body .syn-message-card h2 { color: var(--texto); }

/* status */
html[data-tema] body .syn-badge-status.aberto { background: rgba(46, 125, 50, .16); color: #2e7d32; }
[data-tema="escuro"] body .syn-badge-status.aberto { color: #7bd88f; }
html[data-tema] body .syn-badge-status.encerrado { background: var(--erro-fundo); color: var(--erro-texto); }

/* informacoes */
html[data-tema] body .syn-info-item label,
html[data-tema] body .syn-field-group label { color: var(--texto-suave); }
html[data-tema] body .syn-info-item .syn-info-value { color: var(--texto); }
html[data-tema] body .syn-priority-row { border-top: 1px solid var(--borda); }
html[data-tema] body .syn-section-title-anexos { color: var(--texto-suave); }

/* selects e campos */
html[data-tema] body .syn-select {
  background-color: var(--campo);
  border-color: var(--campo-borda);
  color: var(--campo-texto);
}
html[data-tema] body .syn-select option { background: var(--campo); color: var(--campo-texto); }
html[data-tema] body .syn-select:focus,
html[data-tema] body .syn-input:focus,
html[data-tema] body .syn-textarea:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 2px var(--acento-fundo);
}
html[data-tema] body .syn-input,
html[data-tema] body .syn-textarea {
  background: var(--campo);
  border-color: var(--campo-borda);
  color: var(--campo-texto);
}
html[data-tema] body .syn-input::placeholder,
html[data-tema] body .syn-textarea::placeholder { color: var(--campo-placeholder); }
html[data-tema] body .syn-input-ico svg { color: var(--texto-fraco); }
html[data-tema] body .syn-cal-btn { color: var(--texto-suave); }
html[data-tema] body .syn-cal-btn:hover { color: var(--acento); }
html[data-tema] body .syn-char-counter,
html[data-tema] body .syn-char-count { color: var(--texto-fraco); }

/* botoes de acao */
html[data-tema] body .syn-btn-primary,
html[data-tema] body .syn-btn-secondary-reabrir,
html[data-tema] body .syn-btn-secondary.ativo,
html[data-tema] body .syn-btn-submit {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-texto);
}
html[data-tema] body .syn-btn-primary:hover,
html[data-tema] body .syn-btn-secondary-reabrir:hover,
html[data-tema] body .syn-btn-secondary.ativo:hover,
html[data-tema] body .syn-btn-submit:hover { background: var(--acento-hover); border-color: var(--acento-hover); }
html[data-tema] body .syn-btn-secondary {
  background: transparent;
  border: 1.5px solid var(--campo-borda);
  color: var(--texto);
}
html[data-tema] body .syn-btn-secondary:hover { background: var(--acento-fundo); border-color: var(--acento); }
html[data-tema] body .syn-btn-secondary.ativo { color: var(--acento-texto); }
html[data-tema] body .syn-btn-danger {
  background: var(--erro-fundo);
  border: 1.5px solid #d84a4a;
  color: var(--erro-texto);
}
html[data-tema] body .syn-btn-danger:hover { background: #d84a4a; color: #fff; }
html[data-tema] body .syn-btn-disabled {
  background: transparent;
  border-color: var(--borda);
  color: var(--texto-fraco);
  opacity: .65;
}

/* anexos */
html[data-tema] body .drop-zone {
  background: var(--tabela-cab);
  border-color: var(--campo-borda);
}
html[data-tema] body .drop-zone.dragover { background: var(--acento-fundo); border-color: var(--acento); }
html[data-tema] body .drop-zone > span { color: var(--texto-suave); }
html[data-tema] body .drop-zone > span a { color: var(--acento); }
html[data-tema] body .file-item { background: var(--card); border-color: var(--borda); }
html[data-tema] body .file-item:hover { border-color: var(--acento); }
html[data-tema] body .file-icon { background: var(--tabela-cab); color: var(--texto-suave); }

/* bloco de hora de servico */
html[data-tema] body .syn-service-time-block {
  background: var(--tabela-cab);
  border-color: var(--borda);
}
html[data-tema] body .syn-service-time-block .syn-stb-title,
html[data-tema] body .syn-time-field label { color: var(--texto-suave); }

/* gemini */
html[data-tema] body .syn-gemini-link { color: var(--acento); }
html[data-tema] body .syn-gemini-link:hover { color: var(--acento-hover); }
html[data-tema] body .syn-gemini-loading { color: var(--texto-suave); }
html[data-tema] body .syn-spinner { border-color: var(--borda); border-top-color: var(--acento); }

/* historico */
html[data-tema] body .syn-post-header {
  background: var(--tabela-cab);
  border-bottom: 1px solid var(--borda);
}
html[data-tema] body .syn-post-meta .syn-meta-item,
html[data-tema] body .syn-post-meta .syn-meta-item strong,
html[data-tema] body .syn-post-body { color: var(--texto); }
html[data-tema] body .syn-post-body.has-service {
  background: var(--acento-fundo);
  border-left: 2px solid var(--acento);
}
html[data-tema] body .syn-service-strip {
  background: var(--tabela-cab);
  border-top: 1px solid var(--borda);
  color: var(--texto);
}
html[data-tema] body .syn-service-strip .syn-ss-item svg { color: var(--acento); }
html[data-tema] body .syn-btn-trash { color: var(--texto-suave); }
html[data-tema] body .syn-btn-trash:hover { color: #d84a4a; background: var(--erro-fundo); }
html[data-tema] body .syn-card .syn-section-title,
html[data-tema] body .syn-message-card .syn-section-title { color: var(--texto-suave); }
html[data-tema] body .syn-section-title::after { background: var(--borda); }

/* calendario: chamado.css forca cabecalho laranja com !important */
html[data-tema] body .ui-datepicker-header { background: var(--acento) !important; }
html[data-tema] body .ui-datepicker .ui-state-active {
  background: var(--acento) !important;
  border-color: var(--acento) !important;
  color: var(--acento-texto) !important;
}

/* =========================================================
   Novo chamado - newchamado.php
   ========================================================= */
html[data-tema] body .nc-card {
  background: var(--card);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-card);
}
html[data-tema] body .nc-title { color: var(--texto); }
html[data-tema] body .nc-field label { color: var(--texto-suave); }
html[data-tema] body .nc-field input[type="text"],
html[data-tema] body .nc-field select,
html[data-tema] body #assuntoChamado {
  background: var(--campo);
  border: 1.5px solid var(--campo-borda);
  color: var(--campo-texto);
}
html[data-tema] body .nc-field input[type="text"]::placeholder,
html[data-tema] body #assuntoChamado::placeholder { color: var(--campo-placeholder); }
html[data-tema] body .nc-field select option { background: var(--campo); color: var(--campo-texto); }
html[data-tema] body .nc-field input[type="text"]:focus,
html[data-tema] body .nc-field select:focus,
html[data-tema] body #assuntoChamado:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 2px var(--acento-fundo);
  outline: none;
}
html[data-tema] body #assuntoChamado:invalid { border-color: #d84a4a; }
html[data-tema] body .nc-select-wrap::after { border-top-color: var(--texto-suave); }
html[data-tema] body .nc-char-count { color: var(--texto-fraco); }

/* erro de validacao */
html[data-tema] body .nc-field.has-error input,
html[data-tema] body .nc-field.has-error select,
html[data-tema] body .nc-field.has-error #assuntoChamado {
  border-color: #d84a4a;
  box-shadow: 0 0 0 2px rgba(216, 74, 74, .15);
}
html[data-tema] body .nc-alert {
  background: var(--erro-fundo);
  border-color: #d84a4a;
  color: var(--erro-texto);
}

/* botao inserir */
html[data-tema] body .nc-btn-insert {
  background: var(--acento);
  color: var(--acento-texto);
}
html[data-tema] body .nc-btn-insert:hover {
  background: var(--acento-hover);
  box-shadow: none;
}

/* gemini */
html[data-tema] body .nc-gemini-link { color: var(--acento); }
html[data-tema] body .nc-gemini-link:hover { color: var(--acento-hover); }
html[data-tema] body .nc-gemini-loading { color: var(--texto-suave); }
html[data-tema] body .nc-spinner { border-color: var(--borda); border-top-color: var(--acento); }

/* lista do autocomplete de empresas */
html[data-tema] body div.autocomplete {
  background: var(--card);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-dropdown);
}

/* =========================================================
   Alterar senha - senha.php
   ========================================================= */
html[data-tema] body .senha-card {
  background: var(--card);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-card);
}
html[data-tema] body .senha-card h2 { color: var(--texto); }
html[data-tema] body .senha-group label { color: var(--texto-suave); }
html[data-tema] body .senha-group input[type="password"] {
  background: var(--campo);
  border: 1.5px solid var(--campo-borda);
  color: var(--campo-texto);
}
html[data-tema] body .senha-group input[type="password"]::placeholder { color: var(--campo-placeholder); }
html[data-tema] body .senha-group input[type="password"]:focus {
  background: var(--campo);
  border-color: var(--acento);
  box-shadow: 0 0 0 2px var(--acento-fundo);
}
html[data-tema] body .senha-hint { color: var(--texto-fraco); }
html[data-tema] body .senha-btn {
  background: var(--acento);
  color: var(--acento-texto);
}
html[data-tema] body .senha-btn:hover { background: var(--acento-hover); opacity: 1; }
html[data-tema] body .senha-msg.erro {
  background: var(--erro-fundo);
  border-color: #d84a4a;
  color: var(--erro-texto);
}
html[data-tema] body .senha-msg.sucesso {
  background: rgba(31, 138, 59, .15);
  border-color: #1f8a3b;
  color: #1f8a3b;
}
[data-tema="escuro"] body .senha-msg.sucesso { color: #7bd88f; }

/* =========================================================
   Relatorio - rel.php
   ========================================================= */
html[data-tema] body .syn-page-title,
html[data-tema] body .syn-results-title { color: var(--texto); }

/* filtros especificos do relatorio */
html[data-tema] body .syn-filter-date-wrap-rel {
  background: var(--campo);
  border-color: var(--campo-borda);
  color: var(--campo-texto);
}
html[data-tema] body .syn-filter-date-wrap-rel input[type="text"] {
  background: transparent;
  color: var(--campo-texto);
}
html[data-tema] body .syn-filter-date-wrap-rel span { color: var(--texto-fraco); }
html[data-tema] body .syn-filter-date-wrap-rel img { opacity: .7; }
[data-tema="escuro"] body .syn-filter-date-wrap-rel img { filter: invert(1); }
[data-tema="claro"] body .syn-filter-date-wrap-rel { box-shadow: 0 1px 2px rgba(20, 40, 80, 0.08); }
html[data-tema] body .syn-btn-filtrar-rel,
html[data-tema] body .btn-filtrar {
  background: var(--acento);
  color: var(--acento-texto);
  box-shadow: none;
}
html[data-tema] body .syn-btn-filtrar-rel:hover,
html[data-tema] body .btn-filtrar:hover { background: var(--acento-hover); box-shadow: none; }
html[data-tema] body .syn-filter-card {
  background: var(--card);
  border-color: var(--borda);
}
html[data-tema] body .syn-field label,
html[data-tema] body .syn-check-label { color: var(--texto-suave); }
html[data-tema] body .syn-field input[type="text"],
html[data-tema] body .syn-field select,
html[data-tema] body .syn-date-row input[type="text"] {
  background: var(--campo);
  border-color: var(--campo-borda);
  color: var(--campo-texto);
}
html[data-tema] body .btn-limpar {
  color: var(--texto-suave);
  border-color: var(--campo-borda);
}
html[data-tema] body .btn-limpar:hover { color: var(--acento); border-color: var(--acento); }

/* card de resultados */
html[data-tema] body .syn-table-card {
  background: var(--card);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-card);
}
html[data-tema] body .syn-group-name {
  background: var(--tabela-cab);
  color: var(--texto);
  border-bottom: 1px solid var(--borda);
}
[data-tema="claro"] body .syn-group-name { color: #1f3a63; }
html[data-tema] body .syn-group-name::before { background: var(--acento); }
html[data-tema] body .syn-group-spacer { background: var(--fundo-pagina); }

/* tabela interna */
html[data-tema] body .syn-inner-table thead tr {
  background: var(--card-cabecalho);
  border-top: 1px solid var(--borda);
}
html[data-tema] body .syn-inner-table th { color: var(--texto); }
[data-tema="claro"] body .syn-inner-table th { color: #1f3a63; }
html[data-tema] body .syn-inner-table th.sortable:hover {
  color: var(--acento);
  background: var(--acento-fundo);
}
html[data-tema] body th.sort-asc .syn-sort-icon,
html[data-tema] body th.sort-desc .syn-sort-icon { color: var(--acento); }
html[data-tema] body .syn-inner-table tbody tr.syn-data-row { border-top: 1px solid var(--borda); }
html[data-tema] body .syn-inner-table tbody tr.syn-data-row:hover { background: var(--card-hover); }
html[data-tema] body .syn-inner-table tbody tr.syn-data-row td { color: var(--texto); }
html[data-tema] body .syn-inner-table tbody tr.syn-desc-row td {
  background: var(--tabela-cab);
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borda);
}
html[data-tema] body .syn-tipo-badge { color: var(--texto); }
html[data-tema] body .syn-total-badge {
  background: var(--acento-fundo);
  color: var(--texto);
}
html[data-tema] body .syn-total-row { background: var(--tabela-cab) !important; }
html[data-tema] body .syn-total-row td { color: var(--texto) !important; }
html[data-tema] body .syn-total-row .total-label { color: var(--texto-suave); }
html[data-tema] body .syn-total-row .total-value { color: var(--texto); }
html[data-tema] body .syn-empty { color: var(--texto-suave); }

/* autocomplete / calendario deste relatorio (rel.css usa !important) */
html[data-tema] body div.autocomplete {
  background: var(--card) !important;
  border: 1px solid var(--borda) !important;
}
html[data-tema] body div.autocomplete div { color: var(--texto); }
html[data-tema] body div.autocomplete div:hover,
html[data-tema] body div.autocomplete div.sel {
  background: var(--acento-fundo) !important;
  color: var(--acento) !important;
}
html[data-tema] body .ui-datepicker {
  background: var(--card) !important;
  border: 1px solid var(--borda) !important;
  color: var(--texto);
}
html[data-tema] body .ui-datepicker .ui-datepicker-header { background: var(--acento) !important; }
html[data-tema] body .ui-state-active,
html[data-tema] body .ui-widget-content .ui-state-active {
  background: var(--acento) !important;
  border-color: var(--acento) !important;
  color: var(--acento-texto) !important;
}

/* celular em pe: cards */
@media screen and (max-width: 1000px) and (orientation: portrait) {
  html[data-tema] body .syn-card-container {
    background: var(--card);
    border-color: var(--borda);
  }
  html[data-tema] body .syn-card-header { background: var(--tabela-cab); }
  html[data-tema] body .syn-empresa-badge { color: var(--texto); }
  [data-tema="claro"] body .syn-empresa-badge { color: #1f3a63; }
  html[data-tema] body .syn-empresa-badge::before { background: var(--acento); }
  html[data-tema] body .syn-card-filters { border-bottom: 1px solid var(--borda); }
  html[data-tema] body .syn-filter-btn {
    background: var(--campo);
    border-color: var(--campo-borda);
    color: var(--texto);
  }
  html[data-tema] body .syn-filter-btn:active {
    background: var(--acento-fundo);
    border-color: var(--acento);
    color: var(--acento);
  }
  html[data-tema] body .syn-card-item {
    background: var(--card);
    border-bottom: 1px solid var(--borda);
  }
  html[data-tema] body .syn-card-tipo { background: var(--tabela-cab); color: var(--texto); }
  html[data-tema] body .syn-card-total { background: var(--acento-fundo); color: var(--texto); }
  html[data-tema] body .syn-card-row { border-top-color: var(--borda); }
  html[data-tema] body .syn-card-label { color: var(--texto-suave); }
  html[data-tema] body .syn-card-value { color: var(--texto); }
  html[data-tema] body .syn-card-desc {
    background: var(--tabela-cab);
    border-left-color: var(--acento);
    color: var(--texto-suave);
  }
  html[data-tema] body .syn-card-desc strong { color: var(--texto); }
  html[data-tema] body .syn-card-total-row {
    background: var(--tabela-cab);
    border-top-color: var(--borda);
  }
  html[data-tema] body .syn-card-total-label,
  html[data-tema] body .syn-card-total-value { color: var(--texto); }
}

/* =========================================================
   Cadastro de usuarios - usuario.php
   ========================================================= */
html[data-tema] body .card-cadastro {
  background: var(--card);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-card);
}
html[data-tema] body .card-cadastro h2,
html[data-tema] body .section-title { color: var(--texto); }
html[data-tema] body .form-group label { color: var(--texto-suave); }
html[data-tema] body .form-group input[type="text"],
html[data-tema] body .form-group input[type="password"],
html[data-tema] body .form-group select {
  background-color: var(--campo);
  border: 1.5px solid var(--campo-borda);
  color: var(--campo-texto);
}
html[data-tema] body .form-group input::placeholder { color: var(--campo-placeholder); }
html[data-tema] body .form-group select option { background: var(--campo); color: var(--campo-texto); }
html[data-tema] body .form-group input:focus,
html[data-tema] body .form-group select:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 2px var(--acento-fundo);
}
html[data-tema] body .btn-toggle-senha { color: var(--texto-suave); }
html[data-tema] body .btn-toggle-senha:hover { color: var(--acento); }
html[data-tema] body .hint-senha { color: var(--texto-fraco); }
html[data-tema] body .btn-cadastrar {
  background: var(--acento);
  color: var(--acento-texto);
  box-shadow: none;
}
html[data-tema] body .btn-cadastrar:hover { background: var(--acento-hover); }

/* alertas */
html[data-tema] body .syn-alert.success {
  background: rgba(31, 138, 59, .15);
  color: #1f8a3b;
  border: 1px solid #1f8a3b;
}
[data-tema="escuro"] body .syn-alert.success { color: #7bd88f; }
html[data-tema] body .syn-alert.error {
  background: var(--erro-fundo);
  color: var(--erro-texto);
  border: 1px solid #d84a4a;
}

/* lista */
html[data-tema] body .table-wrapper {
  background: var(--card);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-card);
}
html[data-tema] body .syn-table thead tr {
  background: var(--card-cabecalho);
  border-bottom: 1px solid var(--borda);
}
html[data-tema] body .syn-table th { color: var(--texto); }
[data-tema="claro"] body .syn-table th { color: #1f3a63; }
html[data-tema] body .syn-table thead th.sortable:hover { color: var(--acento); }
html[data-tema] body .syn-table thead th.sortable .sort-icon { color: var(--texto-suave); }
html[data-tema] body .syn-table td {
  color: var(--texto);
  border-top: 1px solid var(--borda);
}
html[data-tema] body .syn-table tbody tr:hover td { background: var(--card-hover); }

/* selos de tipo */
html[data-tema] body .badge-parceiro { background: var(--acento-fundo); color: var(--acento); }
html[data-tema] body .badge-usuario { background: rgba(31, 138, 59, .15); color: #1f8a3b; }
html[data-tema] body .badge-admin { background: rgba(37, 99, 235, .15); color: #2563eb; }
html[data-tema] body .badge-normal { background: var(--tabela-cab); color: var(--texto-suave); }
[data-tema="escuro"] body .badge-usuario { color: #7bd88f; }
[data-tema="escuro"] body .badge-admin { color: #8fb4ff; }

/* acoes (email, excluir) */
html[data-tema] body .btn-action { color: var(--texto-suave); }
html[data-tema] body .btn-action:hover { background: var(--acento-fundo); color: var(--acento); }
html[data-tema] body .btn-action.danger:hover { background: var(--erro-fundo); color: #d84a4a; }
html[data-tema] body .btn-action.email:hover { background: var(--acento-fundo); color: var(--acento); }

/* autocomplete deste formulario (usa .autocomplete sem "div") */
html[data-tema] body .autocomplete {
  background: var(--card);
  border-color: var(--borda);
  color: var(--texto);
}
html[data-tema] body .autocomplete li { color: var(--texto); }
html[data-tema] body .autocomplete li.sel,
html[data-tema] body .autocomplete li:hover {
  background: var(--acento-fundo);
  color: var(--acento);
}

/* celular em pe: cards */
@media screen and (max-width: 1000px) and (orientation: portrait) {
  html[data-tema] body .section-title::before { color: var(--texto); }
  html[data-tema] body .table-wrapper { background: transparent; border: 0; box-shadow: none; }
  html[data-tema] body .syn-table tbody tr,
  html[data-tema] body .syn-table tbody tr.row-alt {
    background: var(--card);
    border: 1px solid var(--borda);
  }
  html[data-tema] body .syn-table td { color: var(--texto); border: 0; }
  html[data-tema] body .syn-table td::before { color: var(--texto-suave); }
  html[data-tema] body .td-actions { border-top: 1px solid var(--borda); }
  html[data-tema] body .filter-btn {
    background: var(--campo);
    border-color: var(--campo-borda);
    color: var(--texto);
  }
  html[data-tema] body .filter-btn:hover { background: var(--acento-fundo); }
  html[data-tema] body .filter-btn.active {
    background: var(--acento-fundo);
    border-color: var(--acento);
    color: var(--acento);
  }
}

/* =========================================================
   Vincular empresas ao parceiro - usuario_parc.php
   ========================================================= */
html[data-tema] body .vp-card {
  background: var(--card);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-card);
}
html[data-tema] body .vp-section-title {
  color: var(--texto);
  border-bottom: 1px solid var(--borda);
}
html[data-tema] body .vp-parceiro-label { color: var(--texto-suave); }
html[data-tema] body .vp-parceiro-nome { color: var(--texto); }

html[data-tema] body .vp-input-empresa {
  background: var(--campo);
  border: 1px solid var(--campo-borda);
  color: var(--campo-texto);
}
html[data-tema] body .vp-input-empresa::placeholder { color: var(--campo-placeholder); }
html[data-tema] body .vp-input-empresa:focus {
  background: var(--campo);
  border-color: var(--acento);
  box-shadow: 0 0 0 2px var(--acento-fundo);
}
html[data-tema] body .vp-btn-cadastrar {
  background: var(--acento);
  color: var(--acento-texto);
}
html[data-tema] body .vp-btn-cadastrar:hover { background: var(--acento-hover); }

/* lista de empresas vinculadas */
html[data-tema] body .vp-table-header {
  background: var(--card-cabecalho);
  color: var(--texto);
  border-bottom: 1px solid var(--borda);
  border-radius: 6px;
}
[data-tema="claro"] body .vp-table-header { color: #1f3a63; }
html[data-tema] body .vp-table-row:hover { background: var(--card-hover); }
html[data-tema] body .vp-table-row + .vp-table-row { border-top: 1px solid var(--borda); }
html[data-tema] body .vp-table-row .col-nome { color: var(--texto); }
html[data-tema] body .vp-empty { color: var(--texto-fraco); }

/* excluir: vermelho de perigo */
html[data-tema] body .vp-btn-excluir { color: #d84a4a; }
html[data-tema] body .vp-btn-excluir:hover {
  background: var(--erro-fundo);
  color: var(--erro-texto);
}
[data-tema="escuro"] body .vp-btn-excluir { color: #ff8585; }

/* autocomplete (usa !important no usuario_parc.css) */
html[data-tema] body .autocomplete {
  background: var(--card);
  border: 1px solid var(--borda) !important;
  color: var(--texto);
}
html[data-tema] body .autocomplete li { color: var(--texto); }
html[data-tema] body .autocomplete .sel,
html[data-tema] body .autocomplete li:hover {
  background: var(--acento-fundo) !important;
  color: var(--acento) !important;
}