/* Painel do Escrevente Copiloto
   Pele "Conferência Inteligente" (tema Sneat, azul da marca #1273ea, fonte Public Sans),
   do kit de peles enviado em 10/11/2026 (conferencia-inteligente-skin.css). Substitui a
   pele do site público 26notas (teal e Roboto Condensed), usada por engano antes.

   Ajustes de acessibilidade (WCAG 2.2 AA) sobre os tokens do kit, só escurecendo o tom:
   - texto secundário #697a8d -> #617183 (4,4:1 -> 5,0:1 em branco; 4,6:1 no fundo);
   - links em texto #1273ea -> #116bd9 (4,14:1 -> 4,68:1 no fundo cinza). O botão
     azul #1273ea com texto branco fica como no kit (4,5:1);
   - textos das etiquetas: verde #0e7e44, azul-claro #06748d, vermelho #c2280f,
     amarelo #996200, cinza #5e6c7d (todos 4,6:1 ou mais sobre o fundo da etiqueta);
   - borda de campo #d9dee3 -> #8595a5 (1,35:1 -> 3,07:1; borda de controle pede 3:1). */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
  /* tokens do kit */
  --sn-primary: #1273ea;
  --sn-primary-hover: #0f5fc2;
  --sn-primary-050: #e8f1ff;
  --sn-text: #566a7f;
  --sn-ink: #44546a;
  --sn-bg: #f5f5f9;
  --sn-surface: #ffffff;
  --sn-line: #e4e6ec;
  --sn-line-soft: #eef0f3;
  --sn-radius: .5rem;
  --sn-radius-sm: .375rem;
  --sn-shadow: 0 2px 6px rgba(67, 89, 113, .08);
  --sn-font: "Public Sans", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;

  /* tons ajustados para contraste AA */
  --sn-muted: #617183;
  --sn-link: #116bd9;
  --sn-field: #8595a5;

  /* papéis usados pelo painel */
  --fundo: var(--sn-bg);
  --superficie: var(--sn-surface);
  --texto: var(--sn-text);
  --tinta: var(--sn-ink);
  --texto-suave: var(--sn-muted);
  --borda-leve: var(--sn-line);
  --realce: var(--sn-bg);
  --foco: var(--sn-primary-hover);
  --primaria: var(--sn-primary);

  --ok-fundo: #e8fadf;      --ok-texto: #0e7e44;
  --info-fundo: #d7f5fc;    --info-texto: #06748d;
  --alerta-fundo: #fff2d6;  --alerta-texto: #996200;
  --erro-fundo: #ffe0db;    --erro-texto: #c2280f;
  --marca-fundo: #e8f1ff;   --marca-texto: #0f63c9;
  --neutro-fundo: #ebeef0;  --neutro-texto: #5e6c7d;

  --raio: var(--sn-radius);
  --raio-sm: var(--sn-radius-sm);
  --sombra: var(--sn-shadow);
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  --fonte: var(--sn-font);
  --fonte-texto: var(--sn-font);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0;
  background-color: var(--fundo);
  color: var(--texto);
  font: 400 15px/1.55 var(--fonte);
  overflow-x: hidden;
}
h1, h2, h3, h4 { color: var(--tinta); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; margin: 0 0 var(--e3); }
h1 { font-size: 24px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
h4 { font-size: 14px; }
p { margin: 0 0 var(--e3); }
strong { color: var(--tinta); font-weight: 600; }
a { color: var(--sn-link); cursor: pointer; text-decoration: none; }
a:hover { color: var(--sn-primary-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 3px; }
.suave { color: var(--texto-suave); }
button.link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--sn-link); cursor: pointer; min-height: 24px; }
button.link:hover { color: var(--sn-primary-hover); text-decoration: underline; }
.estreito { max-width: 480px; margin: var(--e6) auto 0; }
.medio { max-width: 760px; }
.caixa-check { display: flex; gap: var(--e2); align-items: flex-start; }
.caixa-check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--primaria); flex: none; }
.caixa-check label { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; color: var(--texto); }
ol.passos { padding-left: 20px; margin: 0 0 var(--e3); }
ol.passos li { margin-bottom: var(--e2); }
.pequeno { font-size: 13px; line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Estrutura: barra superior branca e fixa (kit), largura 1180px */
.pular { position: absolute; left: -999px; top: 0; background: var(--superficie); padding: var(--e2) var(--e4); z-index: 60; }
.pular:focus { left: var(--e4); }
.topo { background: var(--superficie); border-bottom: 1px solid var(--sn-line); position: sticky; top: 0; z-index: 50; }
.topo-interno, .conteudo { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.topo-interno { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.marca { font-size: 18px; line-height: 1.2; color: var(--primaria); text-decoration: none; font-weight: 700; display: flex; align-items: center; gap: var(--e2); }
.marca:hover { text-decoration: none; color: var(--sn-primary-hover); }
.marca span { color: var(--texto-suave); font-weight: 500; font-size: 13px; }
.topo nav { display: flex; gap: var(--e2) 18px; align-items: center; flex-wrap: wrap; }
.topo nav a { font-weight: 600; color: var(--texto); font-size: 14px; }
.topo nav a:hover { color: var(--tinta); text-decoration: none; }
.topo nav .pequeno { font-size: 13px; }
.topo nav button.link { color: var(--texto); font-size: 14px; }
.conteudo { padding-top: 26px; padding-bottom: var(--e7); }
.aviso-topo { background: var(--sn-primary-050); color: var(--marca-texto); font-size: 13px; line-height: 1.5; text-align: center; padding: 6px var(--e4); font-weight: 500; }

/* Botões (kit: 38px, 13,5px, peso 600, raio .375rem, brilho azul no hover) */
.btnDefault {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; border: 1px solid transparent; font: 600 13.5px/1.2 var(--fonte);
  padding: 9px 16px; border-radius: var(--raio-sm); text-align: center; white-space: nowrap;
  text-decoration: none !important; color: #fff !important; background-color: var(--primaria); cursor: pointer;
  transition: box-shadow .18s ease, background-color .15s ease;
}
.btnDefault:hover { background-color: var(--sn-primary-hover); box-shadow: 0 8px 20px rgba(18, 115, 234, .28); }
.btnDefault.secundario { background: var(--superficie); color: var(--texto) !important; border-color: var(--sn-field); }
.btnDefault.secundario:hover { background: var(--fundo); color: var(--tinta) !important; box-shadow: none; }
.btnDefault.perigo { background: var(--superficie); color: var(--erro-texto) !important; border-color: var(--erro-texto); }
.btnDefault.perigo:hover { background: var(--erro-fundo); box-shadow: none; }
.btnDefault[disabled], .btnDefault[aria-disabled="true"] { opacity: .65; cursor: not-allowed; box-shadow: none; }
.btnDefault.pequeno { min-height: 32px; padding: 6px 12px; font-size: 13px; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }

/* Formulários (kit: rótulo 11px em maiúsculas, campo 38px, raio .375rem, foco azul) */
label { display: block; font-size: 11px; line-height: 1.6; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); margin-bottom: 4px; }
input[type=text], input[type=password], input[type=file], input[type=date], select, textarea {
  width: 100%; min-width: 0; min-height: 38px; padding: 8px 11px; border: 1px solid var(--sn-field); border-radius: var(--raio-sm);
  background-color: var(--superficie); font: 400 14px/1.4 var(--fonte); color: var(--texto);
}
input[type=file] { padding: 6px 8px; }
textarea { resize: vertical; }
textarea.rascunho { font-size: 14.5px; line-height: 1.6; min-height: 480px; color: var(--tinta); }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--primaria); box-shadow: 0 0 0 3px rgba(18, 115, 234, .25); }
::placeholder { color: var(--texto-suave); opacity: 1; }
.campo { margin-bottom: var(--e4); }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--e3) var(--e4); }
.campos .campo { margin: 0; }

/* Cards (kit: fundo branco, raio .5rem, sombra leve) */
.card { background: var(--superficie); box-shadow: var(--sombra); border-radius: var(--raio); padding: 22px 24px; margin-bottom: 18px; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); flex-wrap: wrap; margin-bottom: 14px; }
.card-titulo h2, .card-titulo h3 { margin: 0; }

/* Etiquetas (badges suaves do kit, 11px em maiúsculas; sempre com texto, nunca só cor) */
.etiqueta { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1.4; text-transform: uppercase; padding: 4px 9px; border-radius: var(--raio-sm); background: var(--neutro-fundo); color: var(--neutro-texto); white-space: nowrap; }
.etiqueta.ok { background: var(--ok-fundo); color: var(--ok-texto); }
.etiqueta.alerta { background: var(--alerta-fundo); color: var(--alerta-texto); }
.etiqueta.erro { background: var(--erro-fundo); color: var(--erro-texto); }
.etiqueta.marca { background: var(--marca-fundo); color: var(--marca-texto); }

/* Avisos */
.aviso { background: var(--alerta-fundo); color: var(--alerta-texto); padding: var(--e3) var(--e4); border-radius: var(--raio-sm); margin-bottom: var(--e4); border-left: 3px solid currentColor; }
.aviso.ok { background: var(--ok-fundo); color: var(--ok-texto); }
.aviso.erro { background: var(--erro-fundo); color: var(--erro-texto); }
.aviso a { color: inherit; text-decoration: underline; }
.aviso strong { color: inherit; }
.aviso ul { margin: var(--e2) 0 0; padding-left: 20px; }

/* Fila (tabela do kit: cabeçalho 11px em maiúsculas, linhas 13,5px) */
.cabecalho-pagina { display: flex; justify-content: space-between; align-items: center; gap: var(--e4); flex-wrap: wrap; margin-bottom: 18px; }
.cabecalho-pagina h1 { margin: 0; }
.abas { display: flex; gap: var(--e1); flex-wrap: wrap; border-bottom: 1px solid var(--sn-line); margin-bottom: 18px; }
.abas a { padding: 10px 14px; text-decoration: none; color: var(--texto-suave); font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas a[aria-current="page"] { color: var(--primaria); border-color: var(--primaria); }
.abas a:hover { color: var(--tinta); text-decoration: none; }
.tabela { width: 100%; border-collapse: collapse; background: var(--superficie); box-shadow: var(--sombra); border-radius: var(--raio); overflow: hidden; }
.tabela th, .tabela td { text-align: left; padding: 13px 14px; vertical-align: top; font-size: 13.5px; }
.tabela thead th { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); border-bottom: 1px solid var(--sn-line); white-space: nowrap; background: var(--superficie); }
.tabela tbody td, .tabela tbody th { border-bottom: 1px solid var(--sn-line-soft); }
.tabela tbody tr:last-child td, .tabela tbody tr:last-child th { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--fundo); }
.tabela .assunto a { font-weight: 600; color: var(--tinta); }
.tabela .assunto a:hover { color: var(--primaria); }
.vazio { text-align: center; padding: var(--e7) var(--e4); }

/* Caso */
.grade-caso { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e5); align-items: start; }
.lateral .card { padding: var(--e4) var(--e5); }
dl.dados { display: grid; grid-template-columns: max-content 1fr; gap: var(--e1) var(--e4); margin: 0; }
dl.dados dt { color: var(--texto-suave); }
dl.dados dd { margin: 0; overflow-wrap: anywhere; }
.medidor { height: 8px; background: var(--borda-leve); border-radius: 4px; overflow: hidden; margin-top: var(--e1); }
.medidor > span { display: block; height: 100%; background: var(--primaria); }

.checklist-grupo { margin-bottom: var(--e5); }
.checklist-grupo h4 { margin-bottom: var(--e2); }
.item { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--e2) var(--e3); align-items: start; padding: var(--e2) 0; border-bottom: 1px solid var(--borda-leve); }
.item:last-child { border-bottom: 0; }
.item input[type=checkbox] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--sn-link); }
.item .nome { font-weight: 600; color: var(--tinta); text-transform: none; letter-spacing: 0; font-size: 14px; }
.item .obs { font-size: 14px; line-height: 20px; color: var(--texto-suave); }
details.confirmar { margin-top: var(--e2); }
details.confirmar summary { cursor: pointer; color: var(--sn-link); font-size: 14px; padding: var(--e1) 0; }
details.dados-caso > summary { cursor: pointer; list-style: none; }
details.dados-caso > summary::-webkit-details-marker { display: none; }
details.dados-caso > summary h3 { display: inline; }
details.dados-caso > summary::after { content: " (mostrar)"; color: var(--sn-link); font-size: 14px; }
details.dados-caso[open] > summary::after { content: " (ocultar)"; }
.resumo-checklist { display: flex; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e4); }

details.original summary { cursor: pointer; color: var(--sn-link); font-weight: 700; padding: var(--e1) 0; }
pre.email { white-space: pre-wrap; word-break: break-word; font-family: var(--fonte-texto); font-size: 14px; line-height: 22px; background: var(--fundo); padding: var(--e4); border-radius: var(--raio); margin: var(--e3) 0 0; max-height: 420px; overflow: auto; }
.historico { list-style: none; margin: 0; padding: 0; }
.historico li { padding: var(--e1) 0; border-bottom: 1px solid var(--borda-leve); font-size: 14px; line-height: 20px; }
.historico time { color: var(--texto-suave); margin-right: var(--e2); }
.parte-form { border: 1px solid var(--borda-leve); border-radius: var(--raio); padding: var(--e4); margin-bottom: var(--e4); }
.parte-form legend { padding: 0 var(--e2); font-weight: 600; color: var(--tinta); font-size: 14px; }
.carregando[aria-busy="true"]::after { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Larguras de quebra: 425 / 768 / 1024 */
@media (max-width: 1024px) {
  .grade-caso { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  h1 { font-size: 22px; }
  .card { padding: var(--e4); }
  .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { border-bottom: 1px solid var(--borda-leve); padding: var(--e2) 0; }
  .tabela td, .tabela tbody td, .tabela tbody th { border: 0; padding: var(--e1) var(--e4); }
  .tabela tbody tr:last-child { border-bottom: 0; }
  .topo { position: static; }  /* no celular a barra é alta: não fica fixa sobre o conteúdo */
  .tabela td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--texto-suave); font-size: 12px; font-weight: 600; }
  textarea.rascunho { min-height: 360px; }
}
@media (max-width: 425px) {
  .btnDefault { width: 100%; }
  .topo .btnDefault { width: auto; }
  .topo nav { flex-wrap: wrap; gap: var(--e2) var(--e4); }
  .marca span { display: none; }
  .topo nav a { white-space: nowrap; }
  .topo-interno { padding-top: var(--e2); padding-bottom: var(--e2); }
  .acoes { flex-direction: column; align-items: stretch; }
  .cabecalho-pagina .acoes, .cabecalho-pagina .acoes form { width: 100%; }
  .item { grid-template-columns: 28px 1fr; }
  .item .etiqueta { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Gerenciar conta (página Escreventes) */
details.gerenciar summary { cursor: pointer; color: var(--sn-link); font-weight: 700; min-height: 24px; }
.gerenciar-corpo { display: grid; gap: var(--e3); margin-top: var(--e3); }
.linha-form { display: grid; gap: var(--e1); }
.linha-form select { min-height: 34px; padding: 6px 8px; }
.linha-form .btnDefault { justify-self: start; }

/* Medição do piloto */
.periodo { display: flex; flex-wrap: wrap; gap: var(--e4); align-items: flex-end; padding: var(--e4) var(--e5); }
.periodo .campos { flex: 1 1 320px; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e4); margin-bottom: var(--e5); }
.numero { display: flex; flex-direction: column; gap: var(--e1); margin: 0; }
.numero .rotulo { color: var(--texto-suave); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.numero strong { font-size: 28px; line-height: 1.3; color: var(--tinta); font-weight: 700; }
.tabela th[scope=row] { font-weight: 600; color: var(--tinta); background: transparent; font-size: 13.5px; text-transform: none; letter-spacing: 0; }
.cronometro { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin-bottom: var(--e4); }
.cronometro .visor { font-size: 28px; line-height: 1.3; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tinta); min-width: 110px; }

/* Documentos anexos */
.tabela-compacta { box-shadow: none; border: 1px solid var(--borda-leve); margin-bottom: var(--e3); }
.tabela-compacta th, .tabela-compacta td { padding: var(--e2) var(--e3); }
.form-anexos { margin-top: var(--e4); }

/* Conversa com o cliente */
.linha-tempo { list-style: none; margin: 0 0 var(--e4); padding: 0 0 0 var(--e4); border-left: 2px solid var(--borda-leve); }
.linha-tempo > li { position: relative; padding: 0 0 var(--e4) var(--e3); }
.linha-tempo > li::before { content: ""; position: absolute; left: calc(-1 * var(--e4) - 7px); top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--primaria); }
.linha-tempo > li.do-cliente::before { background: var(--sn-link); }
.linha-tempo .lt-titulo { font-weight: 700; }
.linha-tempo .lt-titulo time { font-weight: 400; color: var(--texto-suave); margin-left: var(--e1); }
.linha-tempo ul { margin: var(--e1) 0 0; padding-left: 20px; }
.registrar-resposta > summary { cursor: pointer; color: var(--sn-link); font-weight: 700; }

/* Convite de escrevente */
.form-convite { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e4); align-items: flex-end; }
.form-convite .campo { flex: 1 1 320px; max-width: 480px; margin: 0; }
.form-convite .caixa-check { min-height: 38px; align-items: center; }