/* Tokens de tema — marca Utak (claro: slate+teal; escuro: carvão neutro+teal) */

html.tema-pre-claro body.corpo-login,
html.tema-pre-claro body.layout-app {
  background: #f0f2f7;
  color: #0f172a;
}

html.tema-pre-escuro body.layout-app {
  background: #121212;
  color: #e4e4e4;
}

:root {
  --utak-marca-escuro: #0f172a;
  --utak-marca-teal: #0d9488;
  --utak-marca-teal-forte: #0f766e;
  --utak-marca-teal-claro: #5eead4;
  --utak-raio: 14px;
  --utak-raio-sm: 10px;
  --utak-fonte-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

body.tema-claro {
  --utak-fundo: #f1f5f9;
  --utak-fundo-elevado: #ffffff;
  --utak-fundo-painel: #ffffff;
  --utak-fundo-campo: #f8fafc;
  --utak-fundo-cartao: #ffffff;
  --utak-fundo-suave: #f1f5f9;
  --utak-fundo-hover: rgba(148, 163, 184, 0.14);
  --utak-texto: #0f172a;
  --utak-texto-suave: #64748b;
  --utak-icone-acao: #475569;
  --utak-borda: #e2e8f0;
  --utak-nav-hover: #f1f5f9;
  --utak-accent-dim: #ccfbf1;
  --utak-accent-texto: #0f766e;
  --utak-bolha-saida-fundo: #dcf8c6;
  --utak-bolha-saida-texto: var(--utak-texto);
  --utak-barra-bg: rgba(255, 255, 255, 0.96);
  --utak-barra-icone-bg: #ffffff;
  --utak-sombra-elevada: 0 12px 40px rgba(15, 23, 42, 0.12);
  --utak-sombra-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.04);
  --utak-backdrop: rgba(15, 23, 42, 0.45);
  --utak-badge-bg: #dc2626;
  --utak-badge-texto: #ffffff;
  --utak-sombra-drawer: rgba(15, 23, 42, 0.18);
  --utak-perigo: #b91c1c;
  --utak-perigo-fundo: #fef2f2;
  --utak-perigo-borda: #fecaca;
  --utak-sucesso: #15803d;
  --utak-sucesso-fundo: #f0fdf4;
  --utak-aviso: #a16207;
  --utak-aviso-fundo: #fffbeb;
  --utak-interruptor-off: #cbd5e1;
  --utak-interruptor-off-borda: #94a3b8;
  --utak-interruptor-knob: #ffffff;
  --utak-scrollbar-track: #f1f5f9;
  --utak-scrollbar-thumb: #94a3b8;
  --utak-scrollbar-thumb-hover: #64748b;
  background: var(--utak-fundo);
  color: var(--utak-texto);
  color-scheme: light;
}

/* Escuro carvão neutro — sem slate azulado; accent teal de marca (não ciano Cursor) */
body.tema-escuro {
  --utak-fundo: #121212;
  --utak-fundo-elevado: #1a1a1a;
  --utak-fundo-painel: #1a1a1a;
  --utak-fundo-campo: #181818;
  --utak-fundo-cartao: #222222;
  --utak-fundo-suave: #1e1e1e;
  --utak-fundo-hover: rgba(255, 255, 255, 0.07);
  --utak-texto: #e4e4e4;
  --utak-texto-suave: #a3a3a3;
  --utak-icone-acao: #c4c4c4;
  --utak-borda: rgba(255, 255, 255, 0.08);
  --utak-nav-hover: rgba(255, 255, 255, 0.06);
  --utak-accent-dim: rgba(20, 184, 166, 0.16);
  --utak-accent-texto: #5eead4;
  --utak-bolha-saida-fundo: rgba(20, 184, 166, 0.22);
  --utak-bolha-saida-texto: #e4e4e4;
  --utak-marca-teal: #14b8a6;
  --utak-marca-teal-forte: #0d9488;
  --utak-barra-bg: rgba(18, 18, 18, 0.96);
  --utak-barra-icone-bg: #222222;
  --utak-sombra-elevada: 0 12px 40px rgba(0, 0, 0, 0.5);
  --utak-sombra-card: 0 1px 3px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.25);
  --utak-backdrop: rgba(0, 0, 0, 0.6);
  --utak-badge-bg: #ef4444;
  --utak-badge-texto: #ffffff;
  --utak-sombra-drawer: rgba(0, 0, 0, 0.55);
  --utak-perigo: #f87171;
  --utak-perigo-fundo: rgba(248, 113, 113, 0.14);
  --utak-perigo-borda: rgba(248, 113, 113, 0.35);
  --utak-sucesso: #4ade80;
  --utak-sucesso-fundo: rgba(74, 222, 128, 0.14);
  --utak-aviso: #fbbf24;
  --utak-aviso-fundo: rgba(251, 191, 36, 0.14);
  --utak-interruptor-off: #404040;
  --utak-interruptor-off-borda: #525252;
  --utak-interruptor-knob: #e4e4e4;
  --utak-scrollbar-track: #121212;
  --utak-scrollbar-thumb: #525252;
  --utak-scrollbar-thumb-hover: #737373;
  background: var(--utak-fundo);
  color: var(--utak-texto);
  color-scheme: dark;
}

body.tema-escuro .icone-tema-sol { display: inline-flex; }
body.tema-escuro .icone-tema-lua { display: none; }
body.tema-claro .icone-tema-sol { display: none; }
body.tema-claro .icone-tema-lua { display: inline-flex; }

.marca-horizontal--escuro { display: none; }
body.tema-escuro .marca-horizontal--claro { display: none; }
body.tema-escuro .marca-horizontal--escuro { display: block; }
body.tema-claro .marca-horizontal--escuro { display: none; }
body.tema-claro .marca-horizontal--claro { display: block; }

/* Logo na barra: esconder a variante inativa */
body.tema-escuro .logo-topo-marca .marca-horizontal--claro,
body.tema-claro .logo-topo-marca .marca-horizontal--escuro {
  display: none !important;
}

body.tema-claro .logo-topo-marca .marca-horizontal--claro,
body.tema-escuro .logo-topo-marca .marca-horizontal--escuro {
  display: block !important;
}

body.layout-app.tema-claro {
  --utak-barra-bg: rgba(255, 255, 255, 0.96);
}

body.layout-app.tema-escuro {
  --utak-barra-bg: rgba(18, 18, 18, 0.96);
}

/* Foco visivel nos controles do shell */
body.layout-app .menu-lateral-toggle:focus-visible,
body.layout-app .botao-secao-todas:focus-visible,
body.layout-app .nav-lateral-link:focus-visible,
body.layout-app .botao-barra-icone:focus-visible,
body.layout-app .usuario-gatilho:focus-visible,
body.layout-app .menu-lateral-busca input:focus-visible,
body.layout-app .logo-topo-marca:focus-visible {
  outline: 2px solid var(--utak-marca-teal);
  outline-offset: 2px;
}

body.layout-app .menu-lateral-busca input:focus {
  outline: none;
  border-color: var(--utak-marca-teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--utak-marca-teal) 28%, transparent);
}

/* color-scheme espelha tema Utak (não prefers-color-scheme / SO) */
html.tema-pre-claro {
  color-scheme: light;
}

html.tema-pre-escuro {
  color-scheme: dark;
}

/* Apoio anti-zoom (double-tap); pinch no iOS pode persistir */
html,
body {
  touch-action: manipulation;
}

/* Scrollbar tematizada (tokens + Firefox / WebKit) */
body.tema-claro,
body.tema-escuro {
  scrollbar-width: thin;
  scrollbar-color: var(--utak-scrollbar-thumb) var(--utak-scrollbar-track);
}

body.tema-claro::-webkit-scrollbar,
body.tema-escuro::-webkit-scrollbar,
body.tema-claro *::-webkit-scrollbar,
body.tema-escuro *::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

body.tema-claro::-webkit-scrollbar-track,
body.tema-escuro::-webkit-scrollbar-track,
body.tema-claro *::-webkit-scrollbar-track,
body.tema-escuro *::-webkit-scrollbar-track {
  background: var(--utak-scrollbar-track);
}

body.tema-claro::-webkit-scrollbar-thumb,
body.tema-escuro::-webkit-scrollbar-thumb,
body.tema-claro *::-webkit-scrollbar-thumb,
body.tema-escuro *::-webkit-scrollbar-thumb {
  background: var(--utak-scrollbar-thumb);
  border-radius: 8px;
  border: 2px solid var(--utak-scrollbar-track);
}

body.tema-claro::-webkit-scrollbar-thumb:hover,
body.tema-escuro::-webkit-scrollbar-thumb:hover,
body.tema-claro *::-webkit-scrollbar-thumb:hover,
body.tema-escuro *::-webkit-scrollbar-thumb:hover {
  background: var(--utak-scrollbar-thumb-hover);
}

/* Cor de destaque da instalação (tema personalizado) — vale no shell claro e escuro.
   --utak-marca-teal vem inline no body; demais tokens derivados. */
body.utak-instalacao-cor-personalizada,
body.tema-claro.utak-instalacao-cor-personalizada,
body.tema-escuro.utak-instalacao-cor-personalizada {
  --utak-marca-teal-forte: color-mix(in srgb, var(--utak-marca-teal) 78%, #000000);
  --utak-marca-teal-claro: color-mix(in srgb, var(--utak-marca-teal) 55%, #ffffff);
  --utak-accent-texto: var(--utak-marca-teal);
  --utak-accent-dim: color-mix(in srgb, var(--utak-marca-teal) 18%, transparent);
}