/* Aparência (app/aparencia.js): botão no topo e a janela de tema e letras. Prefixo tzap-. */
.top-actions .tzap-btn svg { display: block; margin: auto; }
.tzap-pop { position: fixed; z-index: 1200; width: 340px; max-width: calc(100vw - 16px); padding: var(--tz-s4); border: 1px solid var(--tz-outline-container); border-radius: var(--tz-r-md); background: var(--surface, var(--tz-n0)); color: var(--ink); box-shadow: var(--tz-shadow-lg); font-size: var(--tz-t-sm); }
.tzap-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tz-s2); margin-bottom: var(--tz-s3); }
.tzap-head strong { font-size: var(--tz-t-lg); font-weight: 600; }
.tzap-head span { color: var(--muted); font-size: var(--tz-t-xs); }
.tzap-sec { margin: var(--tz-s3) 0 var(--tz-s2); color: var(--muted); font-size: var(--tz-t-xs); font-weight: 500; }
.tzap-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tz-s2); }
.tzap-theme { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 6px; border: 1px solid var(--tz-outline-container); border-radius: var(--tz-r-md); background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.tzap-theme:hover { border-color: var(--muted); }
.tzap-theme.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.tzap-theme:focus-visible, .tzap-size:focus-visible, .tzap-team:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tzap-name { margin-top: 4px; font-weight: 600; font-size: var(--tz-t-sm); }
.tzap-hint { color: var(--muted); font-size: var(--tz-t-xs); line-height: 1.3; }
.tzap-note { margin: var(--tz-s2) 0 0; color: var(--muted); font-size: var(--tz-t-xs); }
.tzap-team { margin-top: var(--tz-s2); padding: 0; border: 0; background: none; color: var(--blue); font: inherit; font-size: var(--tz-t-xs); font-weight: 500; cursor: pointer; }
.tzap-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tz-s2); }
.tzap-size { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: 1px solid var(--tz-outline-container); border-radius: var(--tz-r-md); background: transparent; color: var(--ink); font: inherit; font-size: var(--tz-t-xs); cursor: pointer; }
.tzap-size span { font-weight: 600; line-height: 1; }
.tzap-size.on { border-color: var(--blue); color: var(--blue); background: var(--blue2); }

/* miniatura de cada tema (cores literais de propósito: mostram o tema, não o tema atual) */
.tzap-mini { position: relative; display: block; height: 52px; border-radius: 6px; overflow: hidden; background: var(--mb); border: 1px solid var(--ml); }
.tzap-mini i { position: absolute; display: block; border-radius: 2px; }
.tzap-mini .s { left: 0; top: 0; bottom: 0; width: 14px; border-radius: 0; background: var(--ms); border-right: 1px solid var(--ml); }
.tzap-mini .h { left: 20px; top: 6px; width: 34px; height: 5px; background: var(--mi); opacity: .8; }
.tzap-mini .c { left: 20px; width: calc(100% - 26px); height: 11px; background: var(--mc); border: 1px solid var(--ml); }
.tzap-mini .c:nth-of-type(3) { top: 16px; }
.tzap-mini .c:nth-of-type(4) { top: 31px; }
.tzap-mini .b { right: 6px; top: 5px; width: 14px; height: 7px; border-radius: 4px; background: var(--ma); }
.tzap-mini.ocean { --mb: #f6f8fa; --ms: #ffffff; --mc: #ffffff; --ml: #e2e7ee; --mi: #161c27; --ma: #0b6bff; }
.tzap-mini.graphite { --mb: #202735; --ms: #252e3f; --mc: #2b3446; --ml: #435069; --mi: #f5f7fb; --ma: #3bb0ff; }
.tzap-mini.coral { --mb: #fff2ed; --ms: #fffaf7; --mc: #fffaf7; --ml: #ecd9d2; --mi: #3f1d2a; --ma: #c24162; }

/* menu da conta: bolinha do Escuro e do Coral iguais às miniaturas */
.tzc-menu .tzc-sw.coral { background: #c24162; }

/* No celular a Aparência fica no menu da conta (o topo não tem espaço). */
@media (max-width: 760px) { .top-actions .tzap-btn { display: none !important; } }

/* ---------- Temas completos ----------
   As telas novas usam --tz-primary (base-visual.css), que ficava azul no Coral e no Escuro:
   bolinhas de não lidas, botões e selos continuavam azuis. */
body[data-theme="coral"] {
  --tz-primary: #c24162; --tz-primary-hover: #a8344f; --tz-primary-soft: #fde3ea; --tz-primary-ink: #8f2a44;
}
body[data-theme="coral"] .primary { box-shadow: 0 8px 18px #c2416233 !important; }
body[data-theme="coral"] .drawer .bubble.agent, body[data-theme="coral"] .drawer .bubble.mine { background: #fde3ea !important; }
/* As telas novas usam a escala de neutros (--tz-n0 = fundo do cartão ... --tz-n900 = texto). Ela não mudava no Escuro e
   cartões, janelas e campos dessas telas ficavam brancos (Acesso remoto, Importar, Kanban...). No Escuro a escala inverte,
   nos mesmos tons do Escuro antigo (--surface, --panel, --line, --muted, --ink). */
body[data-theme="graphite"] {
  --tz-n0: #2b3446; --tz-n25: #283142; --tz-n50: #252e3f; --tz-n100: #303a4e; --tz-n200: #435069; --tz-n300: #4f5e78;
  --tz-n400: #7d8aa0; --tz-n500: #9aa7bb; --tz-n600: #b1bdcf; --tz-n700: #cfd8e5; --tz-n800: #e3e9f2; --tz-n900: #f5f7fb;
  --tz-success: #4ade80; --tz-success-soft: #1e4d40; --tz-warning: #fbbf24; --tz-warning-soft: #4a3a14; --tz-danger: #f87171; --tz-danger-soft: #4c1d1d;
  --tz-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --tz-shadow-lg: 0 12px 32px rgba(0, 0, 0, .45);
}
body[data-theme="graphite"] {
  --tz-primary: #3bb0ff; --tz-primary-hover: #66c2ff; --tz-primary-soft: #203e68; --tz-primary-ink: #9cd4ff;
}
body[data-theme="graphite"] .primary { box-shadow: none !important; color: #0b1b33; }
/* "Sincronizado" ficava verde escuro sobre o fundo escuro */
body[data-theme="graphite"] .drawer .drawer-actions .finish { color: #4ade80; }
body[data-theme="graphite"] .realtime-status { background: #1e4d40 !important; color: #86efac !important; }