/* Situação do WhatsApp (app/conexao.js): checklist de cada número, em Configurações → WhatsApp → Números. */
.tzc-wrap { margin-bottom: 14px; padding: 14px 16px; border: 1px solid var(--tz-outline-container); border-radius: var(--tz-r-md); background: var(--surface); }
.tzc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.tzc-top small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.tzc-top button { padding: 7px 12px; border: 1px solid var(--tz-outline-control); border-radius: var(--tz-r-sm); background: var(--surface); color: var(--ink); font-weight: 700; cursor: pointer; }
.tzc-top button:disabled { opacity: .55; cursor: default; }
.tzc-conn { padding-top: 10px; }
.tzc-conn + .tzc-conn { margin-top: 12px; border-top: 1px solid var(--tz-outline-divider); }
.tzc-conn-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tzc-phone { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.tzc-pill { margin-left: auto; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.tzc-headline { margin: 6px 0 4px; font-weight: 800; }
.tzc-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.tzc-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--tz-outline-divider); }
.tzc-item:first-child { border-top: 0; }
.tzc-text { flex: 1; min-width: 0; }
.tzc-text p { margin: 3px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.tzc-text small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.tzc-state { margin-left: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.tzc-dot { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #fff; background: var(--tzc-c, #64748b); }
.tzc-act { flex: none; align-self: center; padding: 8px 12px; border: 0; border-radius: 9px; background: var(--blue); color: #fff; font-weight: 800; font-size: 13px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.tzc-act:hover { filter: brightness(1.08); }
/* cores por estado: o ponto, o rótulo, a faixa de resumo e a pílula usam a mesma */
.st-ok { --tzc-c: #16a34a; }
.st-error { --tzc-c: #dc2626; }
.st-warn { --tzc-c: #d97706; }
.st-pending { --tzc-c: #d97706; }
.st-info { --tzc-c: #64748b; }
.st-unknown { --tzc-c: #94a3b8; }
.tzc-item .tzc-state, .tzc-headline { color: var(--tzc-c); }
.tzc-pill { color: #fff; background: var(--tzc-c); }
.tzc-item.st-ok .tzc-dot::before { content: "\2713"; }
.tzc-item.st-error .tzc-dot::before { content: "!"; }
.tzc-item.st-warn .tzc-dot::before, .tzc-item.st-pending .tzc-dot::before { content: "!"; }
.tzc-item.st-info .tzc-dot::before { content: "i"; font-style: italic; }
.tzc-item.st-unknown .tzc-dot::before { content: "?"; }
/* tema escuro (Grafite): tons mais claros para o texto colorido e botão com letra escura (o azul daqui é claro) */
body[data-theme="graphite"] .tzc-wrap .st-error { --tzc-c: #f87171; }
body[data-theme="graphite"] .tzc-wrap .st-warn, body[data-theme="graphite"] .tzc-wrap .st-pending { --tzc-c: #fbbf24; }
body[data-theme="graphite"] .tzc-wrap .st-ok { --tzc-c: #4ade80; }
body[data-theme="graphite"] .tzc-wrap .st-info, body[data-theme="graphite"] .tzc-wrap .st-unknown { --tzc-c: #94a3b8; }
body[data-theme="graphite"] .tzc-dot, body[data-theme="graphite"] .tzc-pill { color: #0f172a; }
body[data-theme="graphite"] .tzc-act { color: #0b1b33; }
.tzc-steps { margin: 8px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.45; }
.tzc-next { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--tz-outline-divider); }
.tzc-flash { animation: tzc-flash 1.1s ease-in-out 2; }
@keyframes tzc-flash { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, #25d366 45%, transparent); } }
@media (max-width: 760px) {
  .tzc-wrap { padding: 12px; }
  .tzc-item { flex-wrap: wrap; gap: 10px; }
  .tzc-text { flex: 1 1 calc(100% - 40px); }
  .tzc-state { display: inline-block; margin-left: 6px; }
  .tzc-act { flex: 1 1 100%; align-self: stretch; margin-left: 32px; text-align: center; white-space: normal; }
  .tzc-pill { margin-left: 0; }
}