/* Preferência administrativa de Natal. Os tokens de cor também alimentam as utilidades do Tailwind. */
:root {
  --nt-amarelo: 242 183 5;
  --nt-ouro: rgb(var(--nt-amarelo));
  --nt-ouro-claro: #ffd74c;
  --nt-azul: #173b50;
  --nt-azul-escuro: #0e2635;
  --nt-tinta-sobre-ouro: #202b32;
  --nt-destaque: linear-gradient(145deg, var(--nt-ouro-claro), var(--nt-ouro));
}

html[data-clima-natalino] {
  --nt-fundo: #f3f7fa;
  --nt-cartao: #fff;
  --nt-suave: #edf3f7;
  --nt-tinta: #1b3546;
  --nt-texto-medio: #4e6575;
  --nt-linha: #d5e1e9;
  --nt-ouro-txt: #765208;
  --nt-verde-txt: #1e6c4a;
  --nt-verde-bg: #e4efe2;
  --nt-vermelho-txt: #9b3042;
  --nt-vermelho-bg: #f9e7e7;
  --nt-ambar-bg: #fff3c7;
  --nt-neve: #fff8e9;
  --nt-sombra: 0 3px 14px #173b500d;
  --nt-estampa: radial-gradient(circle at 10% 0, #ffd74c2e 0, transparent 39rem),
    radial-gradient(circle at 100% 3%, #b3d5ed47 0, transparent 32rem);
  --nt-hero: url('/img/natal-ramos.svg') right top / auto 180px no-repeat,
    linear-gradient(112deg, var(--nt-azul-escuro), var(--nt-azul));

  --sr-marinho: 23 59 80;
  --sr-amarelo: var(--nt-amarelo);
  --sr-fundo: 243 247 250;
  --sr-linha: 213 225 233;
  --sr-tinta: 27 53 70;
  --sr-suave: 78 101 117;

  --painel-fundo: var(--nt-fundo);
  --painel-linha: var(--nt-linha);
  --painel-linha-forte: var(--nt-linha);
  --cabecalho-cartao: var(--nt-azul);
  --cabecalho-cartao-txt: var(--nt-neve);
  --faixa-cabecalho: var(--nt-suave);
  --faixa-cabecalho-txt: var(--nt-texto-medio);
  --rodape-cartao: var(--nt-suave);
  --texto-medio: var(--nt-texto-medio);
  --aberto-bg: var(--nt-ambar-bg);
  --aberto-borda: #d4a306;
  --aberto-hover: #f2b70520;
  --trilho: var(--nt-suave);
  --verm: var(--nt-vermelho-txt);
  --verde: var(--nt-verde-txt);
  --verde-txt: var(--nt-verde-txt);
  --atend-bg: var(--nt-verde-bg);
  --atend-borda: #548b65;
  --setor-painel: var(--nt-cartao);
  --adm-bg: var(--nt-vermelho-bg);
  --adm-borda: color-mix(in srgb, var(--nt-vermelho-txt) 28%, var(--nt-cartao));
  --adm-txt: var(--nt-vermelho-txt);
  --adm-hover: color-mix(in srgb, var(--nt-vermelho-bg) 85%, var(--nt-vermelho-txt));
  --sup-bg: var(--nt-verde-bg);
  --sup-borda: var(--nt-linha);
  --sup-txt: var(--nt-verde-txt);
  --sup-hover: color-mix(in srgb, var(--nt-verde-bg) 88%, var(--nt-verde-txt));
  --relogio-bg: var(--nt-azul-escuro);
  --relogio-borda: var(--nt-ouro);
  --kpi1: #4d8866;
  --kpi2: var(--nt-ouro);
  --kpi3: #bd5a65;
  --tinta-painel: var(--nt-tinta);
  --backup-cab: var(--nt-vermelho-bg);
  --fora: var(--nt-verde-txt);
  --fora-bg: var(--nt-suave);
  --fora-txt: var(--nt-tinta);

  --cf-bg: var(--nt-fundo);
  --cf-card: var(--nt-cartao);
  --cf-text: var(--nt-tinta);
  --cf-muted: var(--nt-texto-medio);
  --cf-border: var(--nt-linha);
  --cf-soft: var(--nt-suave);
  --cf-active: var(--nt-ambar-bg);
  --cf-green: var(--nt-verde-txt);
  --cf-green-bg: var(--nt-verde-bg);
  --cf-yellow: var(--nt-ouro);
  --auth-bg: var(--nt-fundo);
  --auth-text: var(--nt-tinta);
  --auth-muted: var(--nt-texto-medio);
  --auth-input: var(--nt-cartao);
  --auth-border: var(--nt-linha);
  --auth-soft: var(--nt-suave);
  --auth-accent: var(--nt-ouro);
  accent-color: var(--nt-ouro);
}

html[data-clima-natalino][data-tema="escuro"] {
  --nt-fundo: #10222e;
  --nt-cartao: #192f3e;
  --nt-suave: #213b4d;
  --nt-tinta: #edf5fb;
  --nt-texto-medio: #b5cad9;
  --nt-linha: #355467;
  --nt-verde-txt: #a1dbad;
  --nt-verde-bg: #203e2d;
  --nt-vermelho-txt: #ffc0bd;
  --nt-vermelho-bg: #432931;
  --nt-ouro-txt: #ffdc70;
  --nt-ambar-bg: #44391d;
  --nt-sombra: 0 3px 14px #0003;
  --nt-estampa: radial-gradient(circle at 12% 0, #285a765c 0, transparent 40rem),
    radial-gradient(circle at 100% 0, #e1b52e26 0, transparent 32rem);
  --sr-fundo: 16 34 46;
  --sr-linha: 53 84 103;
  --sr-tinta: 237 245 251;
  --sr-suave: 181 202 217;
}

html[data-clima-natalino] body,
html[data-clima-natalino][data-tema="escuro"] body.dashboard {
  background: var(--nt-estampa), var(--nt-fundo);
  color: var(--nt-tinta);
}

html[data-clima-natalino] body::before {
  content: "";
  position: absolute;
  z-index: 120;
  inset: 0 0 auto;
  height: 15px;
  pointer-events: none;
  background: url('/img/natal-luzes.svg') left top / 184px 15px repeat-x,
    linear-gradient(90deg, var(--nt-ouro-claro), var(--nt-ouro) 70%, #4381ab 70% 90%, #4b8b65 90%) left top / 100% 3px no-repeat;
}

html[data-clima-natalino] :is(.shell-sidebar,.conf-sidebar,.shell-mobilebar) {
  background: url('/img/natal-ramos.svg') right -36px bottom -70px / 230px auto no-repeat,
    linear-gradient(162deg, var(--nt-azul), var(--nt-azul-escuro) 65%);
  border-color: #3c6278;
}
html[data-clima-natalino] :is(.shell-wordmark,.conf-brand,.auth-story .brand) {
  border-color: #f2b70554;
}
html[data-clima-natalino] :is(.shell-sidebar .menu-item,.conf-nav button):hover {
  background: #f2b70520;
  color: var(--nt-neve);
}
html[data-clima-natalino] .conf-nav button[aria-current="page"] > span {
  background: #4735091f;
  color: var(--nt-tinta-sobre-ouro);
}
html[data-clima-natalino] :is(.conf-sidebar .nav-label,.conf-security,.conf-sidebar-bottom) {
  color: #bfd1dd;
}

html[data-clima-natalino] :is(.cartao,.bg-white,dialog,.conf-topbar,.conf-card,.conf-locked) {
  background-color: var(--nt-cartao);
  border-color: var(--nt-linha);
  color: var(--nt-tinta);
}
html[data-clima-natalino] :is(.cartao,.conf-card) { box-shadow: var(--nt-sombra); }
html[data-clima-natalino] :is(.bg-fundo:not(body),.trilho,.campo,.input-wrap) { background-color: var(--nt-suave); }
html[data-clima-natalino] :is(.campo,.input-wrap,.botao-sec,.chip,.botao-icone,.theme-button,.conf-outline) {
  border-color: var(--nt-linha);
  color: var(--nt-tinta);
}
html[data-clima-natalino] :is(.botao-sec,.chip,.botao-icone,.theme-button,.conf-outline) { background: var(--nt-cartao); }
html[data-clima-natalino] :is(.botao-sec,.chip,.botao-icone,.theme-button,.conf-outline):hover { background: var(--nt-suave); }
html[data-clima-natalino] :is(.text-tinta,.rotulo) { color: var(--nt-tinta); }
html[data-clima-natalino] .text-suave { color: var(--nt-texto-medio); }
html[data-clima-natalino] :is(.border-linha,.divide-linha > :not([hidden]) ~ :not([hidden])) { border-color: var(--nt-linha); }
html[data-clima-natalino] :is(.campo,input)::placeholder { color: var(--nt-texto-medio); }
html[data-clima-natalino] :is(.botao,.auth-submit,.conf-save,.gt-button-yellow,.cs-btn-primary),
html[data-clima-natalino] :is(.shell-sidebar .menu-item,.conf-nav button)[aria-current="page"],
html[data-clima-natalino] :is(.chip,.botao-icone)[aria-pressed="true"] {
  background: var(--nt-destaque);
  color: var(--nt-tinta-sobre-ouro);
  border-color: var(--nt-ouro);
}
html[data-clima-natalino] :is(.botao,.auth-submit,.conf-save,.gt-button-yellow,.cs-btn-primary):hover {
  background: var(--nt-ouro-claro);
}
html[data-clima-natalino] .botao-icone-menu {
  color: var(--nt-neve);
  background: #fff4dd15;
  border-color: #e4d1a744;
}
html[data-clima-natalino] .tabela th {
  color: var(--nt-texto-medio);
  background: var(--nt-suave);
  border-color: var(--nt-linha);
}
html[data-clima-natalino] .tabela td { border-color: var(--nt-linha); }
html[data-clima-natalino] :is(.tabela tbody tr,.hover\:bg-fundo):hover { background: var(--nt-suave); }
html[data-clima-natalino] :is(.tom-verm,.selo-verm) { color: var(--nt-vermelho-txt); }
html[data-clima-natalino] .selo-verm { background: var(--nt-vermelho-bg); }
html[data-clima-natalino] .selo-verde { background: var(--nt-verde-bg); color: var(--nt-verde-txt); }
html[data-clima-natalino] .selo-amb { background: var(--nt-ambar-bg); color: var(--nt-ouro-txt); }
html[data-clima-natalino] :focus-visible { outline-color: #d6a200; }
html[data-clima-natalino] .conf-switch input { accent-color: var(--nt-ouro); }
html[data-clima-natalino] .conf-app .campo:focus { border-color: #d6a200; box-shadow: 0 0 0 3px #f2b70533; }
html[data-clima-natalino] .conf-page-title h1 { color: var(--nt-tinta); }
html[data-clima-natalino] .conf-topbar { box-shadow: inset 0 3px var(--nt-ouro); }

html[data-clima-natalino] .dashboard-cabecalho {
  border-bottom-color: var(--nt-ouro);
}
@media screen and (min-width: 1000px) {
  html[data-clima-natalino] .dashboard-marca::after {
    content: "";
    flex: 1 1 0;
    min-width: 0;
    max-width: 440px;
    height: clamp(40px, 7vh, 76px);
    margin-inline: auto;
    background: url('/img/natal-vila.svg') center / contain no-repeat;
    pointer-events: none;
  }
}
@media screen and (min-width: 1000px) and (min-height: 540px) {
  html[data-clima-natalino] .dashboard.modo-tv[data-pagina="hoje"] .dashboard-marca::after {
    height: calc(51 * var(--tv-u));
  }
}
@media screen and (max-width: 999px) {
  html[data-clima-natalino] .dashboard-cabecalho::after {
    content: "";
    flex: 0 0 100%;
    height: 47px;
    background: url('/img/natal-vila.svg') center / contain no-repeat;
  }
}
html[data-clima-natalino] :is(#t-atendendo,#t-feed,#t-agenda)::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1.12em;
  vertical-align: -.18em;
  margin-inline-end: .36em;
  background: url('/img/natal-bola.svg') center / contain no-repeat;
}
html[data-clima-natalino] [data-hud-item="atendimento"] > .secao-cab {
  background: url('/img/natal-luzes.svg') left top / 135px 11px repeat-x,
    linear-gradient(105deg, #f2b70524, transparent 52%, #4b8b6524);
}
@media screen and (min-width: 1280px) {
  html[data-clima-natalino] [data-hud-item="atendimento"] > .secao-cab::after {
    content: "";
    order: 1;
    flex: 1 1 0;
    max-width: 140px;
    height: calc(22 * var(--tv-u, 1.25px));
    margin-inline: auto;
    background: url('/img/natal-vila.svg') center / contain no-repeat;
  }
  html[data-clima-natalino] .atendendo-cab-direita { order: 2; }
}
html[data-clima-natalino] #atendendo .atend-card {
  background-image: radial-gradient(ellipse at top right, #f2b70528, transparent 62%);
  box-shadow: inset 0 2px #f2b705a6;
}
html[data-clima-natalino] #atendendo .atend-tec {
  padding-inline-end: 22px;
  background: url('/img/natal-bola.svg') right center / auto min(100%, 20px) no-repeat;
}
html[data-clima-natalino] .dashboard-relogio {
  background: var(--nt-destaque);
  box-shadow: var(--nt-sombra);
}
html[data-clima-natalino] .dashboard-relogio time { color: var(--nt-tinta-sobre-ouro); }
html[data-clima-natalino] .dashboard-relogio > span { color: #4e3e15; }
html[data-clima-natalino] :is(#kpis .cartao:first-child,#conteudo [data-hud-item="indicadores"] > .cartao[href="/hoje"]) {
  background: var(--nt-destaque);
  border-color: var(--nt-ouro);
  color: var(--nt-tinta-sobre-ouro);
}
html[data-clima-natalino] #kpis .cartao:first-child :is(.kpi-rotulo,.kpi-sub) { color: #4e3e15; }
html[data-clima-natalino] #conteudo [data-hud-item="indicadores"] > .cartao[href="/hoje"] .text-suave { color: #4e3e15; }
html[data-clima-natalino] #conteudo [data-hud-item="indicadores"] > .cartao[href="/hoje"] .num { color: var(--nt-tinta-sobre-ouro); }
html[data-clima-natalino] #kpis .kpi-verde { border-top-color: var(--verde); }
html[data-clima-natalino] #kpis .kpi-amb { background-color: var(--nt-ambar-bg); border-top-color: var(--nt-ouro); }
html[data-clima-natalino] #kpis .kpi-amb .kpi-valor { color: var(--nt-ouro-txt); }
html[data-clima-natalino] :is(.dashboard #chamados-abertos article > header,.dashboard .setores-cabecalho) {
  border-bottom-color: var(--nt-ouro);
}
html[data-clima-natalino] .setor-suporte { border-left-color: #468461; }
html[data-clima-natalino] .setor-administrativo { border-left-color: #b5505e; }

html[data-clima-natalino] .gt-main {
  background: transparent;
  --gt-card: var(--nt-cartao);
  --gt-bg: var(--nt-fundo);
  --gt-text: var(--nt-tinta);
  --gt-muted: var(--nt-texto-medio);
  --gt-border: var(--nt-linha);
  --gt-soft: var(--nt-suave);
  --gt-accent: var(--nt-ouro);
  --gt-strong: var(--nt-tinta);
  --gt-good: var(--nt-verde-txt);
  --gt-bad: var(--nt-vermelho-txt);
  --gt-warning: var(--nt-ouro-txt);
}
html[data-clima-natalino] .cs-main {
  background: transparent;
  --cs-card: var(--nt-cartao);
  --cs-bg: var(--nt-fundo);
  --cs-text: var(--nt-tinta);
  --cs-muted: var(--nt-texto-medio);
  --cs-border: var(--nt-linha);
  --cs-soft: var(--nt-suave);
  --cs-accent: var(--nt-ouro-txt);
  --cs-late: var(--nt-vermelho-txt);
  --cs-ok: var(--nt-verde-txt);
  --cs-done: var(--nt-verde-txt);
  --cs-soon: var(--nt-ouro-txt);
  --cs-shadow: var(--nt-sombra);
}
html[data-clima-natalino] :is(.gt-hero,.cs-hero) {
  background: var(--nt-hero);
  border-color: #527b94;
}
html[data-clima-natalino] :is(.gt-hero h1 span,.cs-hero h1 em,.gt-tabs a.gt-tab-active) { color: var(--nt-ouro); }
html[data-clima-natalino] .gt-tabs a.gt-tab-active { border-color: var(--nt-ouro); }

.natal-mcqueen { display: none; }
html[data-clima-natalino] .auth-story {
  isolation: isolate;
  background: linear-gradient(150deg, var(--nt-azul-escuro) 35%, #173f43);
  justify-content: flex-start;
  gap: clamp(20px, 5vh, 48px);
}
html[data-clima-natalino] .auth-story::before {
  inset: auto 0 clamp(32px, 5vh, 58px);
  z-index: -1;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 76%;
  background: url('/img/natal-mcqueen.jpg?v=0.26.4') 69% center / cover no-repeat;
  mask-image: linear-gradient(transparent, #000 15% 89%, transparent);
}
html[data-clima-natalino] .auth-story::after { display: none; }
html[data-clima-natalino] .auth-story .story-content { display: none; }
html[data-clima-natalino] .natal-mcqueen { display: block; position: relative; }
.natal-mcqueen .natal-etiqueta {
  border: 1px solid var(--nt-ouro);
  border-radius: 999px;
  padding: 7px 11px;
  background: var(--nt-destaque);
  color: var(--nt-tinta-sobre-ouro);
}
.natal-mcqueen h1 {
  font-size: clamp(34px, 4.8vw, 68px);
  letter-spacing: -.05em;
  margin: 9px 0 0;
  color: var(--nt-ouro-claro);
  text-shadow: 0 2px 16px #0e2635bf;
}
html[data-clima-natalino] .auth-story .story-footer { margin-top: auto; color: #fff4db; }
html[data-clima-natalino] .auth-main { background: var(--nt-estampa), var(--nt-fundo); }
html[data-clima-natalino] .section-label { color: var(--nt-ouro-txt); }
html[data-clima-natalino] :is(.story-footer,.story-content > p,.story-features small) { color: #c6d9e6; }

html[data-clima-natalino] :is(.hud-palco-wrap,.hud-area) { background-color: var(--nt-azul-escuro); }
html[data-clima-natalino] .hud-prancheta { background-color: var(--nt-azul); border-color: #527b94; }
html[data-clima-natalino] .hud-bloco[data-selecionado=true] { border-color: var(--nt-ouro); }
html[data-clima-natalino] .hud-bloco-titulo { color: var(--nt-neve); }

html[data-clima-natalino] :is([data-pagina="offline"],[data-pagina="unidade-pendente"]) {
  background: var(--nt-hero);
  color: var(--nt-neve);
}
html[data-clima-natalino] :is([data-pagina="offline"],[data-pagina="unidade-pendente"]) main {
  background: var(--nt-azul);
  border-color: #527b94;
}
html[data-clima-natalino] :is([data-pagina="offline"],[data-pagina="unidade-pendente"]) p { color: #c6d9e6; }
html[data-clima-natalino] :is([data-pagina="offline"],[data-pagina="unidade-pendente"]) :is(main a,main button) {
  background: var(--nt-ouro);
  color: var(--nt-tinta-sobre-ouro);
}

/* O cartão de preferências também apresenta a edição quando ela está desativada. */
.natal-preferencia {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(245px, .8fr);
  align-items: center;
  gap: 24px;
  padding: clamp(20px, 3vw, 34px);
  margin: 18px 0;
  border: 1px solid #527b94;
  border-radius: 18px;
  background: url('/img/natal-vila.svg') right 30% bottom 12px / min(38%, 375px) auto no-repeat,
    url('/img/natal-ramos.svg') right top / min(57%, 435px) auto no-repeat,
    radial-gradient(ellipse at 90% 100%, #35644f, transparent 58%),
    linear-gradient(125deg, var(--nt-azul-escuro), var(--nt-azul));
  color: #fff9eb;
  box-shadow: inset 4px 0 var(--nt-ouro), 0 8px 24px #102c4123;
}
.natal-etiqueta,.natal-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
}
.natal-etiqueta { color: var(--nt-ouro-claro); }
.natal-preferencia h3 { font-size: clamp(23px, 3vw, 32px); letter-spacing: -.035em; margin: 8px 0; color: var(--nt-ouro-claro); }
.natal-preferencia p { margin: 0; max-width: 440px; font-size: 13px; line-height: 1.6; color: #d1e1eb; }
.natal-preferencia-controle {
  justify-self: end;
  width: min(100%, 300px);
  border: 1px solid #ffd74c55;
  border-radius: 13px;
  padding: 15px 17px;
  background: #0e2635ee;
}
.natal-estado { color: #e3ddcb; background: #fff9e51a; border-radius: 99px; padding: 5px 8px; letter-spacing: .035em; }
.natal-estado-ativo { color: var(--nt-tinta-sobre-ouro); background: var(--nt-ouro-claro); }
.natal-switch {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  position: relative;
  margin: 5px 0;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.natal-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.natal-trilho {
  display: block;
  flex: 0 0 42px;
  width: 42px;
  height: 24px;
  border: 1px solid #a9bfcc;
  border-radius: 999px;
  background: #3f5c70;
  padding: 3px;
}
.natal-trilho::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff4dd;
  box-shadow: 0 1px 4px #0004;
  transition: transform .16s ease;
}
.natal-switch input:checked + .natal-trilho { background: var(--nt-ouro); border-color: var(--nt-ouro-claro); }
.natal-switch input:checked + .natal-trilho::before { transform: translateX(18px); background: var(--nt-azul-escuro); }
.natal-switch input:focus-visible + .natal-trilho { outline: 2px solid var(--nt-ouro-claro); outline-offset: 4px; }
.natal-switch:has(input:disabled) { cursor: wait; opacity: .7; }
.natal-preferencia-controle p { font-size: 11px; }
.natal-preferencia-controle [data-tone=error] { color: #ffc0bd; }

@media (751px <= width <= 980px) {
  html[data-clima-natalino] .auth-story::before { bottom: 17vh; }
}

@media (max-width: 750px) {
  html[data-clima-natalino] .auth-story {
    min-height: max(330px, calc(111px + 69vw));
    gap: 10px;
  }
  html[data-clima-natalino] .auth-story::before {
    bottom: 0;
    max-height: none;
    mask-image: linear-gradient(transparent, #000 14%);
  }
  .natal-mcqueen h1 { font-size: clamp(29px, 4.8vw, 36px); }
}

@media (max-width: 680px) {
  .natal-preferencia { grid-template-columns: 1fr; gap: 15px; background-size: 0 0, 245px auto, auto, auto; }
  .natal-preferencia-controle { justify-self: start; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .natal-trilho::before { transition: none; }
}
@media print {
  html[data-clima-natalino] body::before,
  html[data-clima-natalino] .dashboard-marca::after,
  html[data-clima-natalino] .dashboard-cabecalho::after,
  html[data-clima-natalino] :is(#t-atendendo,#t-feed,#t-agenda)::before { display: none; }
}