/* Tema claro é o padrão (:root); a classe .tema-escuro no <html>, aplicada
   por tema.js a partir do localStorage antes do primeiro paint, troca os
   valores abaixo pro conjunto escuro. Todo o app (login, painel do técnico,
   admin) usa essas mesmas variáveis -- nada de cor fixa fora daqui. */
:root {
  --bg: #ffffff;
  --card: #f7f5f1;
  --bg-elevated: #efece4;
  /* Laranja da marca (mesma família de --home-destaque-icon) -- cor de
     destaque única do app: botões primários, abas/cards/módulos ativos. */
  --primary: #d85a30;
  --primary-hover: #be4f2a;
  --text: #444441;
  --text-muted: #7a776d;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --border: #e4e0d6;

  /* Badges de status (OS, agendamento, financeiro) -- par fundo/texto/borda
     por família de cor, recalibrado pra manter contraste nos dois temas. */
  --badge-info-bg: rgba(37, 99, 235, 0.12);
  --badge-info-text: #1d4ed8;
  --badge-info-border: rgba(37, 99, 235, 0.25);

  --badge-warning-bg: rgba(217, 119, 6, 0.14);
  --badge-warning-text: #92400e;
  --badge-warning-border: rgba(217, 119, 6, 0.3);

  --badge-success-bg: rgba(22, 163, 74, 0.14);
  --badge-success-text: #15803d;
  --badge-success-border: rgba(22, 163, 74, 0.3);

  --badge-danger-bg: rgba(220, 38, 38, 0.12);
  --badge-danger-text: #b91c1c;
  --badge-danger-border: rgba(220, 38, 38, 0.3);

  --dot-success: #16a34a;

  /* Sombra sutil de elevação pra cards/itens de lista -- discreta o
     suficiente pra não pesar, só dar uma noção de profundidade. */
  --shadow-card: 0 1px 2px rgba(20, 18, 14, 0.04), 0 2px 10px rgba(20, 18, 14, 0.05);
  --shadow-card-hover: 0 2px 4px rgba(20, 18, 14, 0.06), 0 6px 16px rgba(20, 18, 14, 0.08);

  /* Identidade visual da tela Home (cores exatas da logo da empresa,
     aprovadas em mockup). O gradiente é usado só na marca e no botão
     "Nova OS" -- os cards de destaque usam cor sólida. */
  --home-gradient: linear-gradient(135deg, #f78d4b, #f37157);
  --home-destaque-bg: #faece7;
  --home-destaque-text: #4a1b0c;
  --home-destaque-icon: #d85a30;
  --home-neutral-icon: #888780;
  --home-accent-text: #832f3c;
}

:root.tema-escuro {
  --bg: #1c1a19;
  --card: #262523;
  --bg-elevated: #2f2c29;
  --text: #d3d1c7;
  --text-muted: #9c998f;
  --border: #38352f;

  --badge-info-bg: rgba(37, 99, 235, 0.2);
  --badge-info-text: #60a5fa;
  --badge-info-border: rgba(37, 99, 235, 0.3);

  --badge-warning-bg: rgba(217, 119, 6, 0.2);
  --badge-warning-text: #fbbf24;
  --badge-warning-border: rgba(217, 119, 6, 0.3);

  --badge-success-bg: rgba(22, 163, 74, 0.2);
  --badge-success-text: #4ade80;
  --badge-success-border: rgba(22, 163, 74, 0.3);

  --badge-danger-bg: rgba(220, 38, 38, 0.2);
  --badge-danger-text: #f87171;
  --badge-danger-border: rgba(220, 38, 38, 0.3);

  --dot-success: #4ade80;

  /* Fundos escuros já se destacam pouco por sombra -- usamos algo mais
     transparente e discreto que no tema claro. */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.14);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.2), 0 6px 18px rgba(0, 0, 0, 0.22);

  --home-destaque-bg: #2a221d;
  --home-destaque-text: #f5c4b3;
  --home-destaque-icon: #f0997b;
  --home-accent-text: #f0997b;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.container {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 16px 90px;
}

.login-container {
  max-width: 360px;
  margin: 0 auto;
  padding: 60px 24px;
}

h1 {
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 24px;
}

label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  margin-top: 16px;
}

input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 1rem;
}

input:focus {
  outline: 2px solid var(--primary);
}

/* Campo de valor em reais -- prefixo "R$" fixo à esquerda, o input só
   recebe o número (aceita vírgula ou ponto como decimal, ver
   normalizarValorMonetario em admin.js). Regra de padding-left fica em
   admin.css (depois de ".admin-form input" no cascade -- aqui não vence). */
.campo-moeda {
  position: relative;
}

.campo-moeda-prefixo {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1rem;
  pointer-events: none;
}

select, textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
}

select:focus, textarea:focus {
  outline: 2px solid var(--primary);
}

button {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  border: none;
  background: var(--primary);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 20px;
  transition: background 0.15s, border-color 0.15s, filter 0.1s, transform 0.1s;
}

button:hover {
  background: var(--primary-hover);
}

button:active:not(:disabled) {
  filter: brightness(0.94);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

button.secundario {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

button.secundario:hover {
  background: var(--bg-elevated);
  border-color: var(--text-muted);
}

.erro {
  color: var(--danger);
  font-size: 0.85rem;
  margin-top: 12px;
  min-height: 1em;
}

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.tab {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 0.15s, border-color 0.15s;
}

.tab:hover:not(.ativa) {
  color: var(--text);
}

.tab.ativa {
  color: var(--text);
  border-bottom-color: var(--primary);
}

.os-card {
  background: var(--card);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s;
}

.os-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.os-numero {
  font-weight: 700;
  font-size: 1.05rem;
}

.os-cliente-nome {
  font-weight: 700;
  font-size: 1.05rem;
}

.os-numero-discreto {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-bottom: 8px;
}

.os-card-header-direita {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-foto-icone {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.15s;
}

.btn-foto-icone:hover:not(:disabled) {
  background: var(--bg-elevated);
}

.btn-foto-icone:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.os-cliente {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.os-endereco-link {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.os-endereco-link:hover {
  color: var(--primary);
}

.os-endereco-vazio {
  font-style: italic;
  opacity: 0.7;
}

.os-descricao {
  font-size: 0.9rem;
  margin-bottom: 12px;
  color: var(--text);
}

.os-checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.os-checklist label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
}

.badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.badge.aberta { background: var(--badge-info-bg); color: var(--badge-info-text); }
.badge.em_andamento { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge.aguardando_peca { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge.concluida { background: var(--badge-success-bg); color: var(--badge-success-text); }
.badge.cancelada { background: var(--badge-danger-bg); color: var(--badge-danger-text); }

.badge.agendado { background: var(--badge-info-bg); color: var(--badge-info-text); }
.badge.confirmado { background: var(--badge-success-bg); color: var(--badge-success-text); }
.badge.nao_confirmado { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge.concluido { background: var(--badge-success-bg); color: var(--badge-success-text); }
.badge.cancelado { background: var(--badge-danger-bg); color: var(--badge-danger-text); }

.badge.pendente { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge.atendida { background: var(--badge-success-bg); color: var(--badge-success-text); }
.badge.recusada { background: var(--badge-danger-bg); color: var(--badge-danger-text); }

.status-label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 12px;
  margin-bottom: 4px;
}

.status-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
}

.status-select:disabled {
  opacity: 0.6;
}

.os-fotos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.foto-miniatura {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.btn-foto {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-foto:hover:not(:disabled) {
  background: var(--bg-elevated);
}

.btn-foto:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.botoes-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.btn-status {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}

.btn-status:hover:not(:disabled):not(.ativo) {
  background: var(--bg-elevated);
  border-color: var(--text-muted);
}

.btn-status:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-status.ativo {
  border-color: currentColor;
}

.btn-status-andamento { color: var(--badge-warning-text); }
.btn-status-andamento.ativo { background: var(--badge-warning-bg); }

.btn-status-espera { color: var(--badge-warning-text); }
.btn-status-espera.ativo { background: var(--badge-warning-bg); }

.btn-status-concluir { color: var(--badge-success-text); }
.btn-status-concluir.ativo { background: var(--badge-success-bg); }

.btn-status-confirmar { color: var(--badge-success-text); }
.btn-status-confirmar.ativo { background: var(--badge-success-bg); }

.btn-a-caminho,
.btn-solicitar-peca {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-a-caminho { display: flex; align-items: center; justify-content: center; }
.btn-a-caminho .ic { color: var(--badge-success-text); }
.btn-a-caminho:hover:not(:disabled),
.btn-solicitar-peca:hover:not(:disabled) {
  background: var(--bg-elevated);
  border-color: var(--text-muted);
}

.btn-nova-peca {
  margin-top: 0;
  margin-bottom: 16px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  z-index: 1000;
}

.modal-conteudo {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  max-width: 480px;
  width: 100%;
  margin-top: 20px;
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.35);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.1rem;
}

.modal-fechar {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 6px;
  width: auto;
  margin: 0;
  transition: background 0.15s, color 0.15s;
}

.modal-fechar:hover {
  background: var(--bg-elevated);
  color: var(--text);
}

.calendario-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.calendario-titulo {
  font-weight: 700;
  font-size: 1.05rem;
}

.calendario-nav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
  margin: 0;
  padding: 0;
  transition: background 0.15s;
}

.calendario-nav:hover {
  background: var(--bg-elevated);
}

.calendario-semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}

.dia-semana-label {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 4px 0;
}

.calendario-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 20px;
}

.dia-vazio {
  aspect-ratio: 1;
}

.dia-cel {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text);
  position: relative;
  transition: background 0.1s;
}

.dia-cel:hover:not(.dia-selecionado) {
  background: var(--card);
}

.dia-cel:active {
  background: var(--card);
}

.dia-hoje {
  border: 1px solid var(--primary);
}

.dia-selecionado {
  background: var(--primary);
  color: white;
  font-weight: 700;
}

.dia-ponto {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dot-success);
  margin-top: 3px;
}

.dia-selecionado .dia-ponto {
  background: white;
}

.dia-contador {
  font-size: 0.62rem;
  font-weight: 700;
  color: white;
  background: var(--dot-success);
  min-width: 15px;
  height: 15px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  padding: 0 3px;
}

.dia-selecionado .dia-contador {
  background: white;
  color: var(--primary);
}

.contador-dia {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.vazio {
  text-align: center;
  color: var(--text-muted);
  padding: 60px 20px;
  font-size: 0.9rem;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.painel-empresa-linha {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.painel-logo-mark {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--home-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 0.7rem;
}

.painel-logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.painel-empresa-nome {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
}

.sair {
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  background: none;
  border: none;
  width: auto;
  padding: 0;
  margin: 0;
  transition: color 0.15s;
}

.sair:hover {
  color: var(--danger);
  background: none;
}

.aviso-push {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.aviso-push button {
  width: auto;
  padding: 8px 14px;
  font-size: 0.82rem;
  margin: 0;
}

.offline-indicator {
  background: var(--badge-warning-bg);
  border: 1px solid var(--badge-warning-border);
  color: var(--badge-warning-text);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.85rem;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ================================================================
   VISUAL REFRESH 2026 — camada de identidade/UX
   Mantém a estrutura e lógica existentes, modernizando superfícies,
   espaçamento, tipografia e estados interativos.
   ================================================================ */
:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --bg-elevated: #f0f2f5;
  --primary: #e0653a;
  --primary-hover: #c9542f;
  --text: #25282d;
  --text-muted: #717780;
  --border: #e4e7eb;
  --shadow-card: 0 1px 2px rgba(16,24,40,.035), 0 8px 24px rgba(16,24,40,.045);
  --shadow-card-hover: 0 2px 4px rgba(16,24,40,.04), 0 12px 30px rgba(16,24,40,.08);
  --home-gradient: linear-gradient(135deg, #f27945, #df5a36);
  --home-destaque-bg: #fff5f0;
  --home-destaque-text: #71301c;
  --home-destaque-icon: #df5a36;
  --home-neutral-icon: #6c727b;
  --home-accent-text: #32363c;
}

:root.tema-escuro {
  --bg: #151719;
  --card: #1d2023;
  --bg-elevated: #262a2e;
  --text: #f0f1f2;
  --text-muted: #9ba1a9;
  --border: #2d3237;
  --home-destaque-bg: #2b201c;
  --home-destaque-text: #ffd7c5;
  --home-neutral-icon: #a9afb6;
  --home-accent-text: #f2f3f4;
}

body {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.01em;
}

.container,
.admin-container,
.tela-home {
  width: 100%;
}

h1, h2, h3 { color: var(--text); letter-spacing: -0.025em; }

input, select, textarea {
  background: var(--card);
  border-radius: 12px;
  border-color: var(--border);
  transition: border-color .18s, box-shadow .18s, background .18s;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.manual-tecnico { max-width:560px; }
.manual-tecnico-item { padding:12px 0; border-bottom:1px solid var(--border); }
.manual-tecnico-item:last-child { border-bottom:0; }
.manual-tecnico-item strong { display:block; margin-bottom:4px; }
.manual-tecnico-item span { display:block; color:var(--text-muted); font-size:.88rem; line-height:1.45; }

.painel-titulo-linha { display:flex; align-items:center; gap:8px; }
.painel-titulo-linha h1 { margin:0; }
.ajuda-tecnico-botao {
  width:22px;
  height:22px;
  min-width:22px;
  padding:0;
  border:1px solid var(--border);
  border-radius:50%;
  background:transparent;
  color:var(--text-muted);
  font:700 .75rem/1 inherit;
  cursor:pointer;
}
.ajuda-tecnico-botao:hover,
.ajuda-tecnico-botao:focus-visible { border-color:var(--primary); color:var(--primary); }

button { border-radius: 12px; }

.tabs {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.03);
}

.tab {
  border: 0;
  border-radius: 10px;
  padding: 10px 8px;
}

.tab.ativa {
  color: var(--text);
  border: 0;
  background: var(--bg-elevated);
  box-shadow: inset 0 0 0 1px var(--border);
}

.os-card {
  border-radius: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  background: var(--card);
}

.os-card:hover { box-shadow: var(--shadow-card-hover); }

.modal-conteudo {
  border-radius: 20px !important;
  border: 1px solid var(--border);
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
}

/* Widget de chat de suporte (frontend/suporte-widget.js) -- mesmo formato
   e tamanho do .quick-fab ("Criar rápido") pra não parecer dois idiomas
   visuais empilhados (um círculo perfeito em cima de um quadrado
   arredondado ficava torto). */
.suporte-widget-botao {
  position: fixed;
  bottom: 20px;
  right: 26px;
  z-index: 9999;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* Com o menu "Criar rápido" aberto, o botão do chat ficava por cima do
   último item ("Novo lançamento"). Some só enquanto o menu está aberto. */
.suporte-widget-botao { transition: opacity 0.15s ease-out; }
body:has(#quick-menu.ativo) .suporte-widget-botao { opacity: 0; pointer-events: none; }

.suporte-widget-painel {
  position: fixed;
  bottom: 88px;
  right: 26px;
  z-index: 9999;
  width: 340px;
  max-width: calc(100vw - 24px);
  height: 460px;
  max-height: calc(100vh - 120px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.4);
}

/* A regra global `button { margin-top: 20px }` abria buracos acima das abas
   e em volta de "Falar com uma pessoa"; dentro do chat cada botão define o
   próprio espaço. Fica antes das regras específicas pra elas poderem somar. */
.suporte-widget-painel button { margin: 0; }

.suporte-widget-cabecalho {
  background: var(--primary);
  color: #fff;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  /* flex-start (não center): se o título quebrar em duas linhas numa tela
     estreita, o X fica alinhado com a primeira linha em vez de flutuar
     centralizado entre as duas -- foi assim que o botão de fechar
     "não estava no lugar certo" que o dono do produto reportou. */
  align-items: flex-start;
  font-weight: 600;
  flex-shrink: 0;
}

.suporte-widget-cabecalho button {
  /* A regra global `button { width: 100%; padding: 13px }` esticava o X
     pra largura toda e empurrava ele pra baixo do título, roubando altura
     da área de mensagens. */
  width: auto;
  flex: none;
  padding: 2px 6px;
  margin: -2px -4px 0 0;
  border-radius: 6px;
  background: none;
  border: none;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}
.suporte-widget-cabecalho button:hover { opacity: 1; }
.suporte-widget-cabecalho button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* As três áreas usam `display: flex`, que vence o atributo `hidden` -- sem
   isto o formulário de Sugestões aparecia embaixo do chat. */
.suporte-widget-mensagens[hidden],
.suporte-widget-sugestoes[hidden],
.suporte-widget-rodape[hidden] { display: none; }

.suporte-widget-abas {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.suporte-widget-abas button {
  flex: 1;
  background: none;
  border: none;
  padding: 9px 4px;
  font-size: 0.78rem;
  color: var(--text);
  opacity: 0.6;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}

.suporte-widget-abas button[aria-selected="true"] {
  opacity: 1;
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.suporte-widget-mensagens {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.suporte-widget-sugestoes {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.suporte-widget-sugestoes-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.suporte-widget-sugestoes-form input,
.suporte-widget-sugestoes-form textarea {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  resize: vertical;
}

.suporte-widget-sugestoes-form button {
  align-self: flex-end;
  padding: 7px 14px;
  border-radius: 8px;
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  font-size: 0.82rem;
}

.suporte-widget-sugestoes-titulo-lista {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0.6;
  margin-top: 4px;
}

.suporte-widget-sugestoes-vazio {
  font-size: 0.8rem;
  opacity: 0.6;
  text-align: center;
  padding: 8px 0;
}

.suporte-widget-sugestao-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.82rem;
}

.suporte-widget-sugestao-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.suporte-widget-sugestao-descricao {
  margin-top: 4px;
  opacity: 0.8;
  white-space: pre-wrap;
  word-break: break-word;
}

.suporte-widget-sugestao-status {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--bg);
  border: 1px solid var(--border);
}

.suporte-widget-sugestao-status-feita {
  color: #1a7f37;
  border-color: #1a7f37;
}

.suporte-widget-sugestao-status-recusada {
  opacity: 0.6;
}

.suporte-widget-sugestao-status-planejada,
.suporte-widget-sugestao-status-em_analise {
  color: var(--primary);
  border-color: var(--primary);
}

.suporte-widget-msg {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.suporte-widget-msg-bot {
  align-self: flex-start;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
}

.suporte-widget-msg-cliente {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
}

/* Resposta do assistente/equipe: chega com parágrafos, listas e negrito já
   montados (formatarTextoRico em suporte-widget.js), então o espaçamento é
   do HTML, não do pre-wrap. */
.suporte-widget-msg-rica { white-space: normal; }
.suporte-widget-msg-rica p { margin: 0; }
.suporte-widget-msg-rica p + p,
.suporte-widget-msg-rica p + ol,
.suporte-widget-msg-rica p + ul,
.suporte-widget-msg-rica ol + p,
.suporte-widget-msg-rica ul + p { margin-top: 6px; }
.suporte-widget-msg-rica ol,
.suporte-widget-msg-rica ul { margin: 4px 0 0; padding-left: 1.25em; }
.suporte-widget-msg-rica li + li { margin-top: 3px; }
.suporte-widget-msg-rica li::marker { color: var(--text-muted); }
.suporte-widget-msg-rica strong { font-weight: 650; }

.suporte-widget-atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.suporte-widget-atalho {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}
.suporte-widget-atalho svg { color: var(--primary); flex-shrink: 0; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.suporte-widget-atalho:hover { border-color: var(--primary); }
.suporte-widget-atalho:hover svg { transform: translateX(2px); }
.suporte-widget-atalho:focus-visible,
.suporte-widget-envio button:focus-visible,
.suporte-widget-link-humano:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* "digitando..." enquanto a resposta da IA não chega (alguns segundos). */
.suporte-widget-digitando { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: 0.78rem; }
.suporte-widget-digitando-pontos { display: inline-flex; gap: 3px; }
.suporte-widget-digitando-pontos i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.35;
  animation: suporte-digitando 1.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.suporte-widget-digitando-pontos i:nth-child(2) { animation-delay: 0.15s; }
.suporte-widget-digitando-pontos i:nth-child(3) { animation-delay: 0.3s; }
@keyframes suporte-digitando {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .suporte-widget-digitando-pontos i { animation: none; opacity: 0.6; }
  .suporte-widget-atalho svg { transition: none; }
}

.suporte-widget-envio button:disabled { opacity: 0.55; cursor: default; }

.suporte-widget-rotulo {
  font-size: 0.68rem;
  opacity: 0.7;
  margin-bottom: 2px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.suporte-widget-rodape {
  border-top: 1px solid var(--border);
  padding: 8px;
  flex-shrink: 0;
}

.suporte-widget-link-humano {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 4px;
  text-align: center;
}

.suporte-widget-acoes { display: flex; gap: 6px; margin: 6px 0; }
.suporte-widget-acoes button { flex: 1; min-width: 0; padding: 7px 4px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); cursor: pointer; font-size: .72rem; }
.suporte-widget-acoes button[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); }
.suporte-widget-modo { margin: 5px 0; color: var(--text); font-size: .7rem; line-height: 1.3; }
.suporte-widget-modo[hidden] { display: none; }

.suporte-widget-envio {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.suporte-widget-envio input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
}

.suporte-widget-envio button {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  font-size: 0.85rem;
}

@media (max-width: 480px) {
  .suporte-widget-painel {
    right: 12px;
    left: 12px;
    width: auto;
  }
  .suporte-widget-botao {
    right: 12px;
  }
}

/* Botão "mostrar senha" (senha-visivel.js): ícone SVG na cor do texto, em
   vez do emoji 👁 cinza que sumia no fundo claro do preenchimento
   automático do navegador. Cor média, legível em campo claro e escuro. */
.btn-olho-senha { display: grid; place-items: center; z-index: 2; border: 0; color: #6b7280; background: transparent; cursor: pointer; }
.btn-olho-senha:hover, .btn-olho-senha:focus-visible, .btn-olho-senha[aria-pressed="true"] { color: #d85a30; }
.btn-olho-senha:focus-visible { outline: 2px solid #d85a30; outline-offset: 2px; }
.btn-olho-senha svg { display: block; pointer-events: none; }

/* Ícones de traço do sistema -- mesma família (Tabler: 24px, traço 2,
   pontas redondas) do menu lateral e da barra do celular. Desenhados por
   máscara: herdam a cor do texto (currentColor), cabem em botão, lista e
   template JS, e não dependem da fonte de emoji de cada aparelho (que
   trocava cor e tamanho de um celular pro outro). Uso: <i class="ic
   ic-busca" aria-hidden="true"></i>, ou icone("busca") em JS (tema.js).
   ic-so = só o ícone (botão com aria-label); ic-fim = ícone depois do texto. */
.ic {
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.22em;
  margin-inline-end: 0.42em;
  background-color: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}
.ic.ic-so { margin: 0; }
.ic.ic-fim { margin-inline: 0.38em 0; }
.ic-busca { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M21 21l-6-6'/%3E%3C/svg%3E"); }
.ic-fechar { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.ic-upload { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3Cpath d='M7 9l5-5 5 5'/%3E%3Cpath d='M12 4v12'/%3E%3C/svg%3E"); }
.ic-download { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M12 4v12'/%3E%3C/svg%3E"); }
.ic-camera { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h1a2 2 0 0 0 2-2 1 1 0 0 1 1-1h6a1 1 0 0 1 1 1 2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E"); }
.ic-cadeado { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Ccircle cx='12' cy='16' r='1'/%3E%3Cpath d='M8 11V7a4 4 0 1 1 8 0v4'/%3E%3C/svg%3E"); }
.ic-documento { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpath d='M9 9h1M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
.ic-bandeira { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5a5 5 0 0 1 7 0 5 5 0 0 0 7 0v9a5 5 0 0 1-7 0 5 5 0 0 0-7 0V5z'/%3E%3Cpath d='M5 21v-7'/%3E%3C/svg%3E"); }
.ic-lista { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M5 6v.01M5 12v.01M5 18v.01'/%3E%3C/svg%3E"); }
.ic-grade { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1'/%3E%3C/svg%3E"); }
.ic-modelo { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='4' rx='1'/%3E%3Crect x='4' y='12' width='6' height='8' rx='1'/%3E%3Cpath d='M14 12h6M14 16h6M14 20h6'/%3E%3C/svg%3E"); }
.ic-ajustes { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='14' cy='6' r='2'/%3E%3Cpath d='M4 6h8M16 6h4'/%3E%3Ccircle cx='8' cy='12' r='2'/%3E%3Cpath d='M4 12h2M10 12h10'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Cpath d='M4 18h11M19 18h1'/%3E%3C/svg%3E"); }
.ic-ajuda { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 17v.01'/%3E%3Cpath d='M12 13.5a1.5 1.5 0 0 1 1-1.5 2.6 2.6 0 1 0-3-4'/%3E%3C/svg%3E"); }
.ic-local { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='11' r='3'/%3E%3Cpath d='M17.657 16.657L13.414 20.9a2 2 0 0 1-2.827 0l-4.244-4.243a8 8 0 1 1 11.314 0z'/%3E%3C/svg%3E"); }
.ic-email { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.ic-telefone { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
.ic-seta-esquerda { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M5 12l6 6M5 12l6-6'/%3E%3C/svg%3E"); }
.ic-seta-direita { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 18l6-6M13 6l6 6'/%3E%3C/svg%3E"); }
.ic-mais { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ic-assinatura { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17c3.333-3.333 5-6 5-8 0-3-1-3-2-3S3.968 7.085 4 9c.034 2.048 1.658 4.877 2.5 6 1.5 2 2.5 2.5 3.5 1l2-3c.333 2.667 1.333 4 3 4 .53 0 2.639-2 3-2 .517 0 1.517.667 3 2'/%3E%3C/svg%3E"); }
.ic-bloqueio { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.7 5.7l12.6 12.6'/%3E%3C/svg%3E"); }
.ic-historico { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v4l2 2'/%3E%3Cpath d='M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5'/%3E%3C/svg%3E"); }
.ic-calendario { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M4 11h16'/%3E%3C/svg%3E"); }
.ic-ferramenta { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10h3V7L6.5 3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1-3 3l-6-6a6 6 0 0 1-8-8L7 10'/%3E%3C/svg%3E"); }
.ic-chave { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M10.85 12.15L18.5 4.5M18 5l2 2M15 8l2 2'/%3E%3C/svg%3E"); }
.ic-compartilhar { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='6' r='3'/%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Cpath d='M8.7 10.7l6.6-3.4M8.7 13.3l6.6 3.4'/%3E%3C/svg%3E"); }
.ic-copiar { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E"); }
.ic-check { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.ic-alerta { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3Cpath d='M10.363 3.591L2.257 17.125a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87L13.637 3.59a1.914 1.914 0 0 0-3.274 0z'/%3E%3C/svg%3E"); }
.ic-usuario { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E"); }
.ic-orcamento { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpath d='M9 7h1M9 13h6M13 17h2'/%3E%3C/svg%3E"); }
.ic-moeda { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.7 8a3 3 0 0 0-2.7-2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1-2.7-2'/%3E%3Cpath d='M12 3v3m0 12v3'/%3E%3C/svg%3E"); }
.ic-externo { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6'/%3E%3Cpath d='M11 13l9-9M15 4h5v5'/%3E%3C/svg%3E"); }
.ic-chat { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20l1.3-3.9C1.976 12.663 2.874 8.228 6.4 5.726c3.526-2.501 8.59-2.296 11.845.48 3.255 2.777 3.695 7.266 1.029 10.501C16.608 19.942 11.659 20.922 7.7 19L3 20'/%3E%3C/svg%3E"); }
.ic-ideia { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h1m8-9v1m8 8h1M5.6 5.6l.7.7m12.1-.7l-.7.7'/%3E%3Cpath d='M9 16a5 5 0 1 1 6 0 3.5 3.5 0 0 0-1 3 2 2 0 0 1-4 0 3.5 3.5 0 0 0-1-3'/%3E%3Cpath d='M9.7 17h4.6'/%3E%3C/svg%3E"); }
.ic-pausa { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E"); }
.ic-sem-sinal { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M9.172 15.172a4 4 0 0 1 5.656 0'/%3E%3Cpath d='M6.343 12.343a7.963 7.963 0 0 1 3.864-2.14m4.163.155a7.965 7.965 0 0 1 3.287 2'/%3E%3Cpath d='M3.515 9.515A12 12 0 0 1 7.059 7.06m3.101-.92a12 12 0 0 1 10.325 3.374'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E"); }
.ic-predio { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l8-4v18'/%3E%3Cpath d='M19 21V11l-6-4'/%3E%3Cpath d='M9 9v.01M9 12v.01M9 15v.01M9 18v.01'/%3E%3C/svg%3E"); }
.ic-chevron { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.ic-play { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16l13-8z'/%3E%3C/svg%3E"); }
.ic-relogio { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E"); }
.ic-estrela { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z'/%3E%3C/svg%3E"); }
.ic-estrela-cheia { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='black' d='M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z'/%3E%3C/svg%3E"); }
.ic-equipamento { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9l-8 4.5l-8 -4.5v-9l8 -4.5'/%3E%3Cpath d='M12 12l8 -4.5'/%3E%3Cpath d='M12 12v9'/%3E%3Cpath d='M12 12l-8 -4.5'/%3E%3C/svg%3E"); }
.ic-sino { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6'/%3E%3Cpath d='M9 17v1a3 3 0 0 0 6 0v-1'/%3E%3C/svg%3E"); }

/* Campo de busca: lupa desenhada no próprio campo (antes era um 🔎 dentro
   do placeholder, que sumia ao digitar e mudava de cor por aparelho). */
input.campo-busca.campo-busca {
  padding-left: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b919a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M21 21l-6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 16px 16px;
}

/* Linhas de informação (telefone, e-mail, endereço, login): ícone na cor
   secundária, o texto continua com a cor normal. */
.admin-item-info .ic { color: var(--text-muted); }

/* Receita/custo no Financeiro e legenda do gráfico -- pontos e amostras em
   CSS no lugar de 🟢🔴🟩🟥, nas mesmas cores das barras do gráfico. */
.ponto-financeiro { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; margin-inline-end: 0.45em; vertical-align: 0.08em; }
.ponto-financeiro--receita { background: #2fa84f; }
.ponto-financeiro--custo { background: #d64545; }
.legenda-grafico { display: inline-flex; align-items: center; gap: 6px; }
.legenda-cor { display: inline-block; width: 0.75em; height: 0.75em; border-radius: 3px; }

/* Página pública do orçamento (orcamento-publico.html): resultado da
   decisão e "Pague com Pix" depois de aprovado. */
.orc-pub-resultado { text-align: center; padding: 24px 0 8px; }
.orc-pub-resultado p { margin: 12px 0 0; }
.orc-pub-resultado-icone {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 26px;
  color: var(--text-muted);
  background: var(--bg-elevated);
}
.orc-pub-resultado-icone--ok { color: var(--badge-success-text); background: var(--badge-success-bg); }

.pix-publico {
  margin-top: 20px;
  padding: 20px 16px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: 12px;
  background: var(--card);
  text-align: center;
}
.pix-publico h2 { margin: 0; font-size: 1.05rem; }
.pix-publico-valor { margin: 6px 0 16px; font-size: 1.6rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pix-publico-copiar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0;
}
.pix-publico-copiar .ic { margin: 0; }
.pix-publico-copiar.copiado { background: var(--success); }
.pix-publico-ajuda { margin: 8px 0 18px; color: var(--text-muted); font-size: 0.82rem; }
.pix-publico-rotulo { margin: 0 0 6px; text-align: left; color: var(--text-muted); font-size: 0.75rem; font-weight: 600; }
.pix-publico-codigo {
  width: 100%;
  resize: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.4;
  word-break: break-all;
}
.pix-publico-qr { margin: 18px 0 0; }
.pix-publico-qr img { display: block; width: 200px; height: 200px; margin: 0 auto; padding: 8px; border-radius: 10px; background: #fff; }
.pix-publico-qr figcaption { margin-top: 8px; color: var(--text-muted); font-size: 0.78rem; }
.pix-publico-recebedor { margin: 14px 0 0; color: var(--text-muted); font-size: 0.78rem; line-height: 1.5; white-space: pre-line; }

/* Pesquisa de satisfação (avaliacao.html): 5 estrelas que são radios de
   verdade (setas do teclado e leitor de tela funcionam), acesas até a
   escolhida na cor da marca. */
.aval-form { margin-top: 4px; }
.aval-notas { min-width: 0; margin: 0; padding: 0; border: 0; }
.aval-notas legend { margin: 0 0 10px; padding: 0; color: var(--text); font-size: 0.95rem; font-weight: 650; }
.aval-estrelas { display: flex; gap: 4px; margin-inline-start: -6px; }
.aval-estrela {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.aval-estrela input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.aval-estrela svg {
  width: 42px;
  height: 42px;
  fill: transparent;
  stroke: var(--text-muted);
  stroke-width: 1.5;
  stroke-linejoin: round;
  transition: fill 0.15s, stroke 0.15s, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.aval-estrela.acesa svg { fill: var(--primary); stroke: var(--primary); }
.aval-estrela.escolhida svg { transform: scale(1.14); }
.aval-estrela input:focus-visible + svg { outline: 2px solid var(--primary); outline-offset: 5px; border-radius: 6px; }
.aval-nota-texto { min-height: 1.4em; margin: 8px 0 0; color: var(--text-muted); font-size: 0.9rem; }
.aval-nota-texto strong { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .aval-estrela svg { transition: none; } }

/* Nota do cliente na janela da OS (admin). */
.avaliacao-nota { display: flex; align-items: center; gap: 2px; color: var(--primary); font-size: 1.05rem; }
.avaliacao-nota .ic-estrela { color: var(--text-muted); }
.avaliacao-nota strong { margin-inline-start: 8px; color: var(--text); font-size: 0.9rem; }
.avaliacao-comentario { margin: 8px 0 4px; color: var(--text); font-size: 0.9rem; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }

/* Equipamentos atendidos na OS (painel do técnico, só leitura). */
.os-equipamentos { display: flex; gap: 8px; margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: var(--bg-elevated); color: var(--text-muted); font-size: 0.85rem; line-height: 1.4; }
.os-equipamentos > .ic { margin: 0.1em 0 0; color: var(--text-muted); }
.os-equipamentos strong { color: var(--text); font-weight: 600; }

/* Link da agenda pro Google Agenda/iPhone (painel do técnico, aba Agenda). */
.agenda-externa { margin-top: 24px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.agenda-externa[hidden] { display: none; }
.agenda-externa h2 { margin: 0; color: var(--text); font-size: 1rem; }
.agenda-externa-texto { margin: 6px 0 12px; color: var(--text-muted); font-size: 0.85rem; line-height: 1.45; }
.agenda-externa button, .agenda-externa-botao { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 0; }
.agenda-externa .ic { margin: 0; }
.agenda-externa-rotulo { margin: 0 0 6px; }
#agenda-externa-link { font-size: 0.8rem; }
.agenda-externa-botoes { display: grid; gap: 8px; margin-top: 10px; }
.agenda-externa-botao { padding: 12px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-size: 0.95rem; font-weight: 600; text-decoration: none; }
.agenda-externa-botao:hover { background: var(--bg-elevated); }
.agenda-externa-ajuda { margin: 12px 0 0; color: var(--text-muted); font-size: 0.78rem; line-height: 1.45; }
.agenda-externa-botoes--fim { grid-template-columns: 1fr 1fr; margin-top: 14px; }
.agenda-externa-botoes--fim button { padding: 10px; font-size: 0.85rem; }

/* Avisos (sino): painel administrativo e painel do técnico (avisos.js). */
.avisos-botao { position:relative; display:grid; place-items:center; width:36px; height:36px; flex:none; margin:0; padding:0; border:1px solid var(--border); border-radius:10px; background:var(--card); color:var(--text); cursor:pointer; }
.avisos-botao:hover { background:var(--bg-elevated); }
.avisos-botao .ic { font-size:1.1rem; }
.avisos-contador { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; border:2px solid var(--bg); border-radius:999px; background:var(--primary); color:#fff; font-size:.66rem; font-weight:800; line-height:14px; text-align:center; font-variant-numeric:tabular-nums; }
.avisos-contador[hidden] { display:none; }
.avisos-fundo { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.4); } /* acima do botão do suporte (9999) */
.avisos-fundo[hidden] { display:none; }
.avisos-painel { position:absolute; top:0; right:0; bottom:0; display:flex; flex-direction:column; width:min(420px,100%); background:var(--bg); box-shadow:-18px 0 55px rgba(0,0,0,.22); }
.avisos-cabecalho { display:flex; align-items:center; gap:8px; padding:18px 18px 12px; border-bottom:1px solid var(--border); }
.avisos-cabecalho h2 { flex:1; margin:0; color:var(--text); font-size:1.05rem; }
.avisos-cabecalho .modal-fechar { margin:0; }
.avisos-marcar { width:auto; margin:0; padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:transparent; color:var(--text); font-size:.76rem; font-weight:600; cursor:pointer; }
.avisos-marcar:hover { background:var(--bg-elevated); }
.avisos-marcar[hidden] { display:none; }
.avisos-lista { flex:1; overflow-y:auto; margin:0; padding:4px 10px calc(24px + env(safe-area-inset-bottom, 0px)); list-style:none; }
.aviso-item { display:grid; grid-template-columns:34px 1fr auto; align-items:start; gap:12px; width:100%; margin:0; padding:12px 8px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; color:var(--text-muted); font-weight:400; text-align:left; cursor:pointer; }
.avisos-lista li:last-child .aviso-item { border-bottom:0; }
.aviso-item:hover { background:var(--bg-elevated); }
.aviso-item:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
.aviso-icone { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--bg-elevated); color:var(--text-muted); }
.aviso-item--nao-lido .aviso-icone { background:color-mix(in srgb,var(--primary) 14%,var(--card)); color:var(--primary); }
.aviso-texto { display:flex; flex-direction:column; gap:2px; min-width:0; }
.aviso-texto strong { color:var(--text); font-size:.88rem; font-weight:600; }
.aviso-item--nao-lido .aviso-texto strong { font-weight:750; }
.aviso-texto span { font-size:.8rem; line-height:1.4; overflow-wrap:anywhere; }
.aviso-texto small { margin-top:2px; font-size:.72rem; }
.aviso-ponto { width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--primary); }
.avisos-vazio { padding:40px 20px; color:var(--text-muted); font-size:.88rem; line-height:1.5; text-align:center; }
.avisos-so-leitor { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.painel-topo-acoes { display:flex; align-items:center; gap:12px; }

/* Página de avaliação: convite pro Google depois de nota 4 ou 5. */
.aval-google { margin: 22px auto 0; max-width: 360px; padding-top: 20px; border-top: 1px solid var(--border); }
.aval-google[hidden] { display: none; }
.aval-google p { margin: 0 0 14px; color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }
.aval-google-botao { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 10px; background: var(--primary); color: #fff; font-weight: 700; text-decoration: none; }
.aval-google-botao:hover { filter: brightness(1.05); }
.aval-google-botao:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Painel do técnico: conferência antes de concluir a OS. */
.conferir-os { max-width: 420px; }
.conferir-os > p { margin: 0 0 8px; color: var(--text-muted); font-size: 0.9rem; }
.conferir-os-lista { margin: 0 0 18px; padding: 0; list-style: none; }
.conferir-os-lista li { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); color: var(--text); font-size: 0.95rem; }
.conferir-os-lista li:last-child { border-bottom: 0; }
.conferir-os-lista .ic { color: var(--warning); }
.conferir-os-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.conferir-os-acoes button { width: 100%; min-height: 46px; margin: 0; }
.btn-conferir-concluir { border: 0; border-radius: 10px; background: var(--primary); color: #fff; font-weight: 700; }
.btn-secundario-tecnico { border: 1px solid var(--border); background: transparent; color: var(--text); font-weight: 600; border-radius: 10px; }
.btn-secundario-tecnico:hover { background: var(--bg-elevated); }

/* Página da etiqueta QR do equipamento (equipamento.html): primeiro o
   pedido de atendimento, depois os dados. */
.equip-pub-contato { display: grid; gap: 10px; margin: 0 0 28px; }
.equip-pub-contato p { margin: 0 0 4px; color: var(--text); font-size: 0.95rem; line-height: 1.5; }
.equip-pub-botao { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 18px; border: 1px solid var(--primary); border-radius: 10px; background: var(--primary); color: #fff; font-weight: 700; text-decoration: none; }
.equip-pub-botao[hidden] { display: none; }
.equip-pub-botao:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.equip-pub-botao:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.equip-pub-botao--secundario { border-color: var(--border); background: transparent; color: var(--text); font-weight: 600; }
.equip-pub-botao--secundario:hover { border-color: var(--border); background: var(--bg-elevated); }
.equip-pub-dados { display: grid; grid-template-columns: auto 1fr; margin: 0 0 28px; border-top: 1px solid var(--border); }
.equip-pub-dados[hidden] { display: none; }
.equip-pub-dados dt, .equip-pub-dados dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.equip-pub-dados dt { padding-inline-end: 16px; color: var(--text-muted); }
.equip-pub-dados dd { color: var(--text); text-align: end; font-variant-numeric: tabular-nums; }
.equip-pub-dados .equip-pub-garantia--ok { color: var(--badge-success-text); font-weight: 600; }
.equip-pub-dados .equip-pub-garantia--vencida { color: var(--badge-danger-text); font-weight: 600; }
.equip-pub-historico h2 { margin: 0 0 8px; font-size: 0.95rem; }
.equip-pub-historico ul { margin: 0; padding: 0; list-style: none; }
.equip-pub-historico li { padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--text); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.equip-pub-historico li:last-child { border-bottom: 0; }
.equip-pub-historico .equip-pub-vazio { color: var(--text-muted); }
.equip-pub-equipe { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 0.85rem; }
.equip-pub-equipe[hidden] { display: none; }
.equip-pub-equipe a { color: var(--text-muted); text-underline-offset: 3px; }