/* Mesa do Arauto. Um arquivo de estilo, sem etapa de build.
   Primeiro os tokens, depois a base, a estrutura e os componentes (docs/interface.md, seção 16). */

/* 1. Tokens */
:root {
  /* Marca (seção 5.1) */
  --tinta: #0D382E;
  --verde: #0E6B48;
  --verde-vivo: #13B95B;
  --papel: #FCFCFA;
  --superficie: #FFFFFF;
  --superficie-2: #F4F6F3;
  --linha: #E3E7E2;
  --linha-forte: #C9D1CB;
  --texto: #15231C;
  --texto-2: #56665E;
  --texto-3: #7C8A83;
  --sobre-tinta: #FFFFFF;
  --sobre-tinta-2: #CFE0D7;
  --ambar: #F2A93B;
  --sobre-ambar: #3A2200;
  --verde-escuro: #0A5538;
  --verde-claro: #8FE3AE;
  --linha-suave: #EEF1EE;
  --perigo-linha: #E9B5AD;
  --selecionada: #F1F8F4;
  --desativado: #E9EDEA;
  /* Cores das marcas dos canais, só nos logotipos (E3 da Sprint 10). */
  --canal-facebook: #1877F2;
  --canal-instagram: #C13584;
  --canal-linkedin: #0A66C2;
  --canal-meta: #0866FF;
  --canal-google: #1A73E8;
  --canal-buffer: #231F20;
  /* Estados (seção 5.2). Um par de texto e fundo por estado visual. */
  --aguardando: #8A4B00;
  --aguardando-fundo: #FFF1D6;
  --andamento: #1E4FA3;
  --andamento-fundo: #E6EEFB;
  --aprovado: #0E6B48;
  --aprovado-fundo: #E2F3E9;
  --publicado: #FFFFFF;
  --publicado-fundo: #0D382E;
  --atencao: #A12A1C;
  --atencao-fundo: #FCE8E5;
  --inativo: #56665E;
  --inativo-fundo: #EEF1EE;
  /* Tipografia (seção 5.4) */
  --fonte: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Espaço, forma e profundidade (seção 5.5) */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  --raio-controle: 8px;
  --raio-cartao: 12px;
  --raio-popup: 16px;
  --sombra-1: 0 8px 24px rgb(13 56 46 / 0.20);
  --sombra-2: -24px 0 48px rgb(13 56 46 / 0.18);
  --linha-lista: 64px;
  --alvo: 44px;
  --botao: 44px;
  --botao-pequeno: 30px;
  --largura: 1320px;
  --leitura: 72ch;
  --menu: 236px;
  --menu-recolhido: 68px;
}
@media (min-width: 900px) {
  :root { --linha-lista: 56px; --botao: 36px; }
}

/* 2. Fontes servidas pela própria Mesa */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/static/fontes/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/static/fontes/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("/static/fontes/jetbrains-mono-latin.woff2") format("woff2");
}

/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--texto); font: 400 15px/1.5 var(--fonte); overflow-wrap: break-word; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1 { font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: 18px; font-weight: 800; line-height: 1.25; }
h3 { font-size: 15px; font-weight: 700; }
@media (min-width: 900px) { h1 { font-size: 28px; } }
a { color: var(--verde); text-underline-offset: 0.15em; }
a:hover { color: var(--verde-escuro); }
small, .auxiliar { font-size: 13px; font-weight: 500; color: var(--texto-2); }
.rotulo { font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto-2); }
.mono { font: 500 12.5px/1.4 var(--fonte-mono); font-variant-numeric: tabular-nums; }
.suave { color: var(--texto-2); }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: 4px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: var(--e4); top: -100px; z-index: 30; background: var(--superficie); padding: var(--e2) var(--e3); border-radius: var(--raio-controle); }
.pular:focus { top: var(--e2); }
.icone { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.icone.p { width: 14px; height: 14px; vertical-align: -2px; }
.icone.g { width: 20px; height: 20px; }
.pilha { display: flex; flex-direction: column; gap: 20px; }
.pilha > * { min-width: 0; }
.em-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) 10px; }
.so-celular { display: flex; }
@media (min-width: 900px) { .so-celular, .abas.so-celular { display: none; } }

/* 4. Estrutura (seção 3.1). Menu lateral, topo, faixa de modo e barra inferior no celular. */
.aplicacao { min-height: 100vh; min-height: 100dvh; }
.menu { display: none; background: var(--tinta); color: var(--sobre-tinta-2); padding: 20px 14px; gap: var(--e1); }
.menu-marca { display: flex; align-items: center; gap: 10px; padding: 4px 10px 20px; font-size: 18px; font-weight: 800; color: var(--sobre-tinta); text-decoration: none; }
.menu-marca:hover { color: var(--sobre-tinta); }
.marca-sinal { width: 30px; height: 30px; border-radius: 8px; background: var(--verde-vivo); color: var(--tinta); display: flex; align-items: center; justify-content: center; flex: none; }
.menu-lista { display: flex; flex-direction: column; gap: var(--e1); flex: 1; }
.menu-lista .no-fim { margin-top: auto; }
.menu-item { display: flex; align-items: center; gap: var(--e3); min-height: 42px; padding: 10px 12px; border-radius: var(--raio-controle); color: var(--sobre-tinta-2); text-decoration: none; font-weight: 600; font-size: 14px; }
.menu-item:hover { color: var(--sobre-tinta); background: rgb(255 255 255 / 0.07); }
.menu-item.ativo { color: var(--tinta); background: var(--superficie); }
.menu-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 var(--e2) 22px; padding-left: var(--e2); border-left: 1px solid rgb(255 255 255 / 0.16); }
.menu-sub .menu-item { min-height: 34px; padding: 6px 10px; font-size: 13px; }
.menu-sub .menu-item[aria-current] { color: var(--sobre-tinta); background: rgb(255 255 255 / 0.12); }
.contador { margin-left: auto; min-width: 22px; padding: 1px 8px; border-radius: 999px; text-align: center; background: var(--ambar); color: var(--sobre-ambar); font: 800 12px/1.5 var(--fonte); font-variant-numeric: tabular-nums; }
.contador:empty { display: none; }
.menu .botao.icone-so { color: var(--sobre-tinta-2); align-self: flex-start; }
.menu .botao.icone-so:hover { color: var(--sobre-tinta); background: rgb(255 255 255 / 0.07); border-color: transparent; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: 10px var(--e4); background: var(--superficie); border-bottom: 1px solid var(--linha); min-height: 61px; }
.topo-marca { display: flex; align-items: center; gap: var(--e2); font-size: 17px; font-weight: 800; color: var(--tinta); text-decoration: none; }
.topo-conta { display: flex; align-items: center; gap: var(--e3); min-width: 0; flex: 1; justify-content: flex-end; }
.topo-empresa, .topo select { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border: 1px solid var(--linha); border-radius: var(--raio-controle); background: var(--superficie); font: 700 14px/1 var(--fonte); color: var(--texto); min-height: 0; width: auto; max-width: 46vw; }
/* Atalhos da faixa do topo, com o contador de cada um (E2 da Sprint 10). */
.topo-atalhos { display: flex; align-items: center; gap: var(--e2); margin-left: auto; padding-left: var(--e4); }
.topo-atalho { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--linha); border-radius: var(--raio-controle); background: var(--superficie); color: var(--texto-2); text-decoration: none; }
.topo-atalho:hover { color: var(--tinta); border-color: var(--linha-forte); }
.topo-contador { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ambar); color: var(--sobre-ambar); font: 800 11px/18px var(--fonte); text-align: center; }
.topo-contador:empty { display: none; }
.topo-contador.atencao { background: var(--atencao); color: var(--superficie); }
.topo-contador.informacao { background: var(--verde); color: var(--superficie); }
.topo-pedidos:not(.sem-pedidos) { color: var(--verde); }
.topo-pedidos:not(.sem-pedidos) .icone { animation: girar 2.4s linear infinite; }
/* Os painéis que os atalhos abrem. */
.painel-grupo + .painel-grupo { margin-top: var(--e4); }
.painel-grupo h3 { display: flex; align-items: center; gap: var(--e2); margin: 0 0 var(--e2); font-size: 15px; }
.painel-grupo h3 .contador { margin-left: 0; }
.painel-linhas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.painel-linhas li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.pedidos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.pedido { display: flex; flex-direction: column; gap: 6px; padding-bottom: var(--e3); border-bottom: 1px solid var(--linha); }
.pedido:last-child { border-bottom: 0; padding-bottom: 0; }
.pedido-agora { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.pedido-etapas { margin: 0; padding-left: 20px; font-size: 13px; color: var(--texto-2); }
.pedido-etapas .feita { color: var(--texto-2); }
.pedido-etapas .atual { color: var(--texto); font-weight: 600; }
.pedido-etapas .falhou { color: var(--atencao); }
.busca { display: none; align-items: center; gap: var(--e2); height: 36px; padding: 0 10px; border: 1px solid var(--linha); border-radius: var(--raio-controle); background: var(--superficie-2); color: var(--texto-2); flex: 0 1 340px; min-width: 0; }
.busca input { flex: 1; min-width: 0; min-height: 0; height: 34px; padding: 0; border: 0; background: transparent; font-size: 14px; box-shadow: none; }
.busca input:focus { outline: 0; }
.busca:focus-within { border-color: var(--verde); background: var(--superficie); }
.busca.grande { display: flex; flex: none; height: 44px; background: var(--superficie); padding-right: 4px; }
.busca.grande input { height: 42px; font-size: 15px; }
.topo-pessoa { display: none; flex-direction: column; line-height: 1.25; text-align: right; font-size: 13px; font-weight: 700; margin-left: auto; }
.topo-pessoa small { font-weight: 500; }
.faixa-modo { display: flex; gap: var(--e2); align-items: center; background: var(--aguardando-fundo); color: var(--aguardando); font-size: 13px; font-weight: 600; padding: 7px var(--e4); }
.conteudo { padding: 20px var(--e4) calc(64px + var(--e6)); max-width: var(--largura); width: 100%; }
.barra-inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; background: var(--superficie); border-top: 1px solid var(--linha); padding-bottom: env(safe-area-inset-bottom); }
.barra-inferior a { flex: 1 1 0; min-width: 0; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 700 11px/1 var(--fonte); letter-spacing: -0.01em; color: var(--texto-2); text-decoration: none; position: relative; }
.barra-inferior [aria-current] { color: var(--verde); }
.barra-inferior .contador { position: absolute; top: 6px; left: 50%; margin-left: 6px; }
@media (min-width: 900px) {
  .aplicacao { display: grid; grid-template-columns: var(--menu) minmax(0, 1fr); }
  .menu { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
  .coluna { min-width: 0; }
  .topo-marca, .barra-inferior { display: none; }
  .topo .busca { display: flex; }
  .topo-conta { justify-content: flex-start; }
  .topo-pessoa { display: flex; }
  .topo { padding: 12px var(--e6); }
  .faixa-modo { padding: 7px var(--e6); }
  .conteudo { padding: 28px var(--e6) var(--e7); }
  .menu-recolhido .aplicacao { grid-template-columns: var(--menu-recolhido) minmax(0, 1fr); }
  .menu-recolhido .menu { padding: 20px 10px; }
  .menu-recolhido .menu-texto, .menu-recolhido .menu-sub, .menu-recolhido .menu .contador { display: none; }
  .menu-recolhido .menu-item, .menu-recolhido .menu-marca { justify-content: center; padding-left: 0; padding-right: 0; }
}
.sem-menu .aplicacao { display: block; }
.sem-menu .conteudo { margin: 0 auto; }

/* 5. Anatomia da página (seção 4) */
.trilha { font: 500 12.5px/1.4 var(--fonte-mono); color: var(--texto-2); }
.trilha a { text-decoration: none; }
.cabecalho { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--e3) var(--e4); }
.cabecalho-titulo { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; flex: 1 1 320px; }
.cabecalho-texto { color: var(--texto-2); max-width: var(--leitura); }
.cabecalho-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) 10px; }
.cabecalho-meta:empty, .cabecalho-acoes:empty { display: none; }
.cabecalho-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.cabecalho-acoes form { display: inline-flex; }
.resumo { display: flex; flex-wrap: wrap; gap: var(--e3); }
.resumo > * { flex: 1 1 220px; min-width: 0; }
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-cartao); padding: var(--e4); display: flex; flex-direction: column; gap: 14px; }
.cartao > * { min-width: 0; }
@media (min-width: 900px) { .cartao { padding: 20px; } }
.dados { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.dados dt { font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto-2); margin-bottom: 2px; }
.dados.aninhado { gap: var(--e2); padding-left: var(--e3); border-left: 2px solid var(--linha); }
.texto-longo { max-width: var(--leitura); }
.texto-longo > * + * { margin-top: var(--e3); }
.texto-longo h1 { font-size: 20px; } .texto-longo h2 { font-size: 17px; margin-top: var(--e5); }
.texto-longo ul, .texto-longo ol { padding-left: var(--e5); list-style: revert; }
.texto-longo code { font: 500 13px var(--fonte-mono); background: var(--superficie-2); padding: 1px 5px; border-radius: 4px; }
.rolagem { overflow-x: auto; }
.texto-longo table { border-collapse: collapse; width: 100%; font-size: 14px; }
.texto-longo th, .texto-longo td { text-align: left; padding: var(--e2) var(--e3); border-bottom: 1px solid var(--linha-suave); vertical-align: top; }
.texto-longo th { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-2); background: var(--superficie-2); }
.lado-a-lado { display: flex; flex-wrap: wrap; gap: var(--e4); }
.lado-a-lado > * { flex: 1 1 320px; }
.exemplo { border-left: 4px solid var(--linha-forte); }
.citacao { border-left: 4px solid var(--linha-forte); padding-left: var(--e4); max-width: var(--leitura); }
.exemplo.ruim { border-left-color: var(--atencao); }
.exemplo.bom { border-left-color: var(--aprovado); }
.exemplo p { white-space: pre-line; }

/* 6. Botão (seção 6) */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); height: var(--botao); padding: 0 14px; border-radius: var(--raio-controle); font: 700 14px/1 var(--fonte); text-decoration: none; cursor: pointer; white-space: nowrap; max-width: 100%; border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--texto); }
.botao:hover { background: var(--superficie-2); color: var(--texto); }
.botao.primario { background: var(--verde); border-color: transparent; color: #FFFFFF; }
.botao.primario:hover { background: var(--verde-escuro); color: #FFFFFF; }
.botao.terciario { border-color: transparent; background: transparent; color: var(--verde); padding: 0 4px; }
.botao.terciario:hover { color: var(--verde-escuro); text-decoration: underline; }
.botao.perigo { border-color: var(--perigo-linha); color: var(--atencao); }
.botao.perigo:hover { background: var(--atencao-fundo); color: var(--atencao); }
.botao.perigo.solido { background: var(--atencao); border-color: transparent; color: #FFFFFF; }
.botao.icone-so { width: var(--botao); padding: 0; border-color: transparent; background: transparent; color: var(--texto-2); }
.botao.icone-so:hover { border-color: var(--linha); color: var(--texto); background: var(--superficie); }
.botao.icone-so.contorno { border-color: var(--linha); }
.botao.grande { height: var(--alvo); font-size: 15px; padding: 0 18px; }
.botao.pequeno { height: var(--botao-pequeno); padding: 0 10px; font-size: 13px; }
.botao.icone-so.pequeno { width: var(--botao-pequeno); padding: 0; }
.botao.largo { width: 100%; }
.botao[disabled] { background: var(--desativado); border-color: transparent; color: var(--texto-3); cursor: not-allowed; }
.botao .icone.gira { display: none; }
.htmx-request.botao .icone.gira, .htmx-request .botao[type="submit"] .icone.gira, .enviando .botao[type="submit"] .icone.gira { display: inline; animation: girar 0.9s linear infinite; }
.htmx-request.botao .icone:not(.gira), .htmx-request .botao[type="submit"] .icone:not(.gira), .enviando .botao[type="submit"] .icone:not(.gira) { display: none; }
.htmx-request.botao, .htmx-request .botao[type="submit"], .enviando .botao[type="submit"] { pointer-events: none; opacity: 0.85; }
@keyframes girar { to { transform: rotate(360deg); } }

/* 7. Selo, etiqueta e com a vez (seções 5.2 e 5.3) */
.selo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 700 12px/1.3 var(--fonte); white-space: nowrap; }
.selo.aguardando { color: var(--aguardando); background: var(--aguardando-fundo); }
.selo.andamento { color: var(--andamento); background: var(--andamento-fundo); }
.selo.aprovado { color: var(--aprovado); background: var(--aprovado-fundo); }
.selo.publicado { color: var(--publicado); background: var(--publicado-fundo); }
.selo.atencao { color: var(--atencao); background: var(--atencao-fundo); }
.selo.inativo { color: var(--inativo); background: var(--inativo-fundo); }
.etiqueta { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--linha); background: var(--superficie); color: var(--texto-2); font: 700 12px/1.3 var(--fonte); white-space: nowrap; }
.vez { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--texto-2); }
.vez.atrasado { color: var(--atencao); }
.prazo { font-weight: 700; color: var(--aguardando); }
.prazo.vencido { color: var(--atencao); }

/* 8. Abas (seção 7.1) */
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--linha); overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.aba { flex: none; display: inline-flex; align-items: center; gap: var(--e2); padding: 10px 12px; min-height: var(--alvo); color: var(--texto-2); font-weight: 700; font-size: 14px; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.aba:hover { color: var(--texto); }
.aba[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--verde); }
.aba-ponto { padding: 0 7px; border-radius: 999px; background: var(--ambar); color: var(--sobre-ambar); font: 800 11px/1.5 var(--fonte); }
@media (min-width: 900px) { .aba { padding: 10px 14px; min-height: 0; } }

/* 9. Lista (seção 7.2). Tabela no computador e cartões no celular. */
.lista { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-cartao); overflow: hidden; }
.lista-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e4); padding: 14px; border-bottom: 1px solid var(--linha); }
.lista-titulo { display: flex; align-items: baseline; gap: var(--e2); }
.lista-colunas { display: none; }
.lista-grupo { display: flex; align-items: center; gap: var(--e2); min-height: 36px; padding: 6px 14px; background: var(--papel); border-bottom: 1px solid var(--linha-suave); position: sticky; top: 0; z-index: 1; }
.lista-linha { display: grid; gap: 6px var(--e3); padding: 12px 14px; border-bottom: 1px solid var(--linha-suave); min-height: var(--linha-lista); align-items: center; grid-template-columns: minmax(0, 1fr) auto; position: relative; font-size: 14px; }
.lista ul:last-child > .lista-linha:last-child { border-bottom: 0; }
.lista-linha:hover { background: var(--selecionada); }
.lista-linha.apagada .celula:not(.acoes) { opacity: 0.6; }
.lista-linha.destaque { box-shadow: inset 3px 0 0 var(--atencao); }
.celula { min-width: 0; }
.celula.principal { grid-column: 1; display: grid; gap: 1px; }
.celula.acoes { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: var(--e2); align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.linha-celulas { grid-column: 1; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13px; }
.linha-celulas .celula { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.celula-rotulo { font-size: 12px; font-weight: 700; color: var(--texto-2); }
.celula-rotulo:empty { display: none; }
.linha-sobre { font: 500 12.5px/1.4 var(--fonte-mono); color: var(--texto-2); }
.linha-titulo { display: block; font-weight: 700; color: var(--texto); text-decoration: none; overflow-wrap: anywhere; }
/* Nome sem espaço, como o de uma campanha, quebra dentro da coluna e nunca passa da vizinha. */
.linha-sub, .linha-celulas .celula { overflow-wrap: anywhere; }
a.linha-titulo::after { content: ""; position: absolute; inset: 0; }
.lista-linha .acoes, .lista-linha .celula form { position: relative; z-index: 1; }
.linha-sub { display: block; font-size: 13px; color: var(--texto-2); }
.linha-nota { display: block; font-size: 13px; font-weight: 600; color: var(--atencao); }
.lista-rodape { padding: 10px 14px; text-align: center; border-top: 1px solid var(--linha-suave); }
.celula.selecao { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; margin: -6px 0 -6px -10px; position: relative; z-index: 1; cursor: pointer; }
.celula.selecao input { width: 20px; height: 20px; accent-color: var(--verde); }
.lista.com-selecao .lista-linha { grid-template-columns: 34px minmax(0, 1fr); }
.lista.com-selecao .celula.principal, .lista.com-selecao .linha-celulas { grid-column: 2; }
.lista.com-selecao .celula.acoes { grid-column: 2; grid-row: auto; justify-content: flex-start; margin-top: 4px; }
.lista.com-selecao .lista-linha:has([data-selecao]:checked) { background: var(--selecionada); }
.barra-lote { display: none; position: fixed; z-index: 30; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); align-items: center; justify-content: space-between; gap: var(--e3); padding: 10px 14px; background: var(--superficie); border-top: 1px solid var(--linha); box-shadow: 0 -8px 20px rgb(13 56 46 / 0.06); font-size: 14px; }
[data-lote-area]:has([data-selecao]:checked) .barra-lote { display: flex; }
.celula .mono { overflow-wrap: anywhere; }
.celula select { min-height: 36px; height: 36px; padding: 0 10px; font-size: 14px; font-weight: 600; }
/* A escolha encolhe com a coluna, em vez de passar da borda da lista. */
.celula form { min-width: 0; max-width: 100%; flex: 1 1 auto; }
.celula form select { width: 100%; text-overflow: ellipsis; }
@media (min-width: 900px) {
  .lista-colunas, .lista-linha { grid-template-columns: var(--colunas); }
  .lista.com-selecao .lista-colunas, .lista.com-selecao .lista-linha { grid-template-columns: 34px var(--colunas); }
  .lista.com-selecao .lista-colunas::before { content: ""; }
  .barra-lote { left: 50%; right: auto; bottom: var(--e5); transform: translateX(-50%); width: min(560px, 90vw); border: 1px solid var(--linha); border-radius: var(--raio-cartao); box-shadow: var(--sombra-1); }
  .lista-colunas { display: grid; gap: var(--e3); padding: 10px 14px; border-bottom: 1px solid var(--linha); background: var(--superficie-2); }
  .lista-colunas .rotulo { letter-spacing: 0.04em; }
  .lista-colunas .num { text-align: right; }
  .lista-linha { min-height: 58px; }
  .linha-celulas { display: contents; }
  .lista-linha .celula, .lista-linha .celula.acoes, .lista-linha .celula.principal { grid-column: auto; grid-row: auto; font-size: 14px; }
  .celula-rotulo { display: none; }
  .celula.num { justify-content: flex-end; text-align: right; }
}
.lista.c2 { --colunas: minmax(0, 3fr) minmax(0, 2fr); }
.lista.c3 { --colunas: minmax(0, 3fr) minmax(0, 1.4fr) 150px; }
.lista.c4 { --colunas: minmax(0, 3fr) minmax(0, 1.2fr) minmax(0, 1.2fr) 150px; }
.lista.c5 { --colunas: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.3fr) 150px; }
.lista.c6 { --colunas: minmax(0, 3fr) repeat(4, minmax(0, 1fr)) 150px; }
.lista.c3.acoes-largas { --colunas: minmax(0, 3fr) minmax(0, 1.4fr) 280px; }
.lista.c4.acoes-largas { --colunas: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1.2fr) 280px; }
.lista.c5.acoes-largas { --colunas: minmax(0, 2.4fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 200px; }
.lista.c3.sem-acoes { --colunas: minmax(0, 3fr) minmax(0, 1.6fr) minmax(0, 1.2fr); }
.lista.c4.sem-acoes { --colunas: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
/* Os posts do período, com o post, a data e três números (ajuste 9). */
.lista.c5.sem-acoes { --colunas: minmax(0, 2.6fr) minmax(88px, 0.8fr) repeat(3, minmax(112px, 0.8fr)); }
/* Com uma escolha na última coluna, ela ganha espaço para o nome da linha caber inteiro. */
.lista.c4.sem-acoes:has(.celula form select) { --colunas: minmax(0, 2fr) minmax(0, 0.7fr) minmax(0, 0.8fr) minmax(0, 2.2fr); }

/* 10. Filtros e visões (seção 7.5) */
.filtros { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.filtros-linha { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); align-items: center; }
.filtros-divisa { width: 1px; height: 24px; background: var(--linha); }
.ficha { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linha); background: var(--superficie); color: var(--texto); font: 700 13px/1 var(--fonte); text-decoration: none; white-space: nowrap; }
.ficha:hover { border-color: var(--linha-forte); color: var(--texto); }
.ficha[aria-current], .ficha.ativa { background: var(--tinta); border-color: var(--tinta); color: var(--sobre-tinta); }
.filtros select { height: 32px; min-height: 0; border-radius: 999px; border-color: var(--linha); padding: 0 12px; font: 700 13px/1 var(--fonte); width: auto; }
@media (max-width: 899px) { .ficha, .filtros select { height: 36px; } }

/* 11. Pop-up (seção 7.3) */
.popup { position: fixed; inset: 0; border: 0; padding: 0; background: var(--superficie); color: var(--texto); max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; overflow: hidden; }
.popup[open] { display: block; }
.popup::backdrop { background: rgb(13 56 46 / 0.32); }
.popup-dentro { display: flex; flex-direction: column; height: 100%; max-height: inherit; min-height: 0; }
.popup-cabecalho { display: flex; flex-direction: column; gap: var(--e2); padding: 10px 8px 0; border-bottom: 1px solid var(--linha); flex: none; }
.popup-cabecalho > :not(.popup-linha):not(.abas) { padding: 0 10px; }
.popup-cabecalho .abas { border-bottom: 0; margin-top: 2px; }
.popup-linha { display: flex; align-items: center; gap: var(--e1); }
.popup-linha .rotulo { flex: 1; min-width: 0; }
.popup-linha [data-fechar-popup] { order: -1; }
.popup-cabecalho h2 { font-size: 20px; line-height: 1.25; }
.popup-cabecalho h2:focus { outline: none; }
.popup-corpo { flex: 1; overflow-y: auto; padding: 14px; background: var(--superficie-2); display: flex; flex-direction: column; gap: var(--e3); overscroll-behavior: contain; }
.popup-corpo > * { flex: none; }
.popup.pequeno { height: auto; max-height: 90dvh; inset: auto 0 0 0; border-radius: var(--raio-popup) var(--raio-popup) 0 0; }
@media (min-width: 900px) {
  .popup.pequeno { width: 480px; height: auto; max-height: 86vh; inset: 0; margin: auto; border-radius: var(--raio-popup); box-shadow: var(--sombra-1); }
  .popup.medio { width: 720px; height: auto; max-height: 86vh; margin: auto; border-radius: var(--raio-popup); box-shadow: var(--sombra-1); }
  .popup.painel { width: min(900px, 100vw); height: 100vh; inset: 0 0 0 auto; box-shadow: var(--sombra-2); }
  .popup-cabecalho { padding: 18px var(--e5) 0; gap: 10px; }
  .popup-cabecalho > :not(.popup-linha):not(.abas) { padding: 0; }
  .popup-cabecalho .abas { margin-top: 4px; }
  .popup-cabecalho h2 { font-size: 22px; letter-spacing: -0.01em; }
  .popup-linha { gap: var(--e2); }
  .popup-linha [data-fechar-popup] { order: 0; }
  .popup-corpo { padding: 20px var(--e5); gap: var(--e4); }
}

/* 12. Barra de decisão (seção 7.4) */
.barra-decisao { flex: none; border-top: 1px solid var(--linha); background: var(--superficie); padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--e2); box-shadow: 0 -8px 20px rgb(13 56 46 / 0.06); }
.barra-evidencia { border: 1px solid var(--linha); border-radius: var(--raio-cartao); padding: 14px; background: var(--papel); }
.barra-evidencia:not(:has(.campo)) { display: none; }
/* A evidência longa, como os tipos da liberação da mídia, rola dentro da barra. Sem o limite, a
   barra toma o popup, os detalhes somem e os botões ficam fora da tela. */
.barra-evidencia, .barra-botoes > details[open] { max-height: 38vh; overflow-y: auto; overscroll-behavior: contain; }
.barra-evidencia fieldset.campo:has(> .opcao:nth-of-type(6)) { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: var(--e3); }
.barra-resumo { text-align: center; font-size: 13px; color: var(--texto-2); }
.barra-resumo strong { display: block; color: var(--texto); font-weight: 700; }
.barra-botoes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.barra-botoes > .botao { order: -1; flex: 1 1 100%; }
.barra-botoes > details { flex: 1 1 30%; min-width: 0; }
.barra-botoes > details > summary { width: 100%; list-style: none; }
.barra-botoes > details > summary::-webkit-details-marker { display: none; }
.barra-botoes > details[open] { flex: 1 1 100%; order: -2; border: 1px solid var(--linha); border-radius: var(--raio-cartao); padding: 14px; background: var(--papel); }
.barra-botoes > details[open] > summary { display: none; }
.cartao > .barra-decisao { border: 1px solid var(--linha); border-radius: var(--raio-cartao); box-shadow: none; }
@media (min-width: 900px) {
  .barra-decisao { padding: 14px var(--e5); gap: var(--e3); box-shadow: none; }
  .barra-principal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
  .barra-resumo { text-align: left; flex: 1 1 180px; font-size: 13.5px; }
  .barra-resumo strong { font-weight: 800; font-size: 15px; }
  .barra-botoes { justify-content: flex-end; gap: 10px; flex: 0 1 auto; margin-left: auto; }
  .barra-botoes > .botao { order: 9; flex: none; }
  .barra-botoes > details { flex: none; }
}

/* 13. Formulários (seção 8) */
.formulario { display: flex; flex-direction: column; gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; }
.campo small { font-weight: 500; }
input[type="text"], input[type="email"], input[type="url"], input[type="date"], textarea, select { font: 400 14px/1.4 var(--fonte); color: var(--texto); background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio-controle); padding: 0 12px; width: 100%; min-height: var(--alvo); }
textarea { padding: 10px 12px; resize: vertical; }
select { width: auto; max-width: 100%; }
input:user-invalid, textarea:user-invalid { border-color: var(--atencao); }
.opcao { display: flex; align-items: center; gap: var(--e2); min-height: var(--alvo); font-weight: 600; font-size: 14px; }
.opcao input { width: 20px; height: 20px; accent-color: var(--verde); flex: none; }
.acoes-finais { justify-content: flex-end; }
.dobra > summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--verde); display: flex; align-items: center; gap: var(--e2); list-style: none; }
.dobra > summary::-webkit-details-marker { display: none; }
.dobra:not([open]) { gap: 0; }
.cartao .dobra { border: 0; padding: 0; }

/* 14. Indicador (seção 7.6) */
.indicador { gap: 6px; padding: 18px; }
/* Quando falta espaço, o selo desce para a linha de baixo em vez de quebrar o título palavra por palavra. */
.indicador-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); }
.indicador-topo > span:first-child { display: inline-flex; align-items: center; gap: 2px; }
.indicador-valor { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.indicador-valor small { font-size: 13px; font-weight: 500; letter-spacing: 0; }
.indicador-valor a { color: inherit; text-decoration: none; }
progress { width: 100%; height: 8px; appearance: none; border: 0; border-radius: 999px; background: var(--linha-suave); overflow: hidden; margin: 4px 0; }
progress::-webkit-progress-bar { background: var(--linha-suave); }
progress::-webkit-progress-value { background: var(--verde-vivo); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--verde-vivo); border-radius: 999px; }

/* 15. Trilho de etapas (seção 9.1) */
.trilho { display: flex; flex-direction: column; }
.etapa { display: flex; gap: var(--e3); min-width: 0; }
.etapa-topo { display: flex; flex-direction: column; align-items: center; flex: none; }
.etapa-topo::after { content: ""; flex: 1; width: 2px; min-height: 14px; background: var(--linha); }
.etapa:last-child .etapa-topo::after { display: none; }
.etapa-marca { width: 30px; height: 30px; border-radius: 999px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; background: var(--linha-suave); color: var(--texto-2); }
.etapa.feita .etapa-marca { background: var(--verde); color: #FFFFFF; }
.etapa.feita .etapa-topo::after { background: var(--verde); }
.etapa.atual .etapa-marca { background: var(--superficie); color: var(--verde); border: 2px solid var(--verde-vivo); }
.etapa-texto { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; min-width: 0; }
.etapa-nome { font-weight: 800; font-size: 14px; }
.etapa.futura .etapa-nome { color: var(--texto-2); }
.etapa.atual .etapa-nome { color: var(--verde); }
.etapa-texto .auxiliar { font-size: 12.5px; }
@media (min-width: 900px) {
  .trilho { flex-direction: row; overflow-x: auto; }
  .etapa { flex: 1 1 0; min-width: 150px; flex-direction: column; gap: var(--e2); }
  .etapa-topo { flex-direction: row; }
  .etapa-topo::after { height: 2px; width: auto; min-height: 0; }
  .etapa-texto { padding: 0 12px 0 0; }
}

/* 16. Linha do tempo (seção 9.4) */
.linha-tempo { display: flex; flex-direction: column; }
.evento { display: flex; gap: var(--e3); }
.evento-lado { display: flex; flex-direction: column; align-items: center; flex: none; }
.evento-lado::after { content: ""; flex: 1; width: 2px; background: var(--linha); }
.evento:last-child .evento-lado::after { display: none; }
.evento-marca { width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--inativo-fundo); color: var(--inativo); }
.evento-marca.pessoa { background: var(--aprovado-fundo); color: var(--aprovado); }
.evento-marca.agente { background: var(--andamento-fundo); color: var(--andamento); }
.evento-texto { padding-bottom: 14px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.evento-texto strong { font-weight: 700; }

/* 17. Vazio, aviso e explicação (seções 7.8 a 7.10) */
.vazio { border: 1px dashed var(--linha-forte); border-radius: var(--raio-cartao); padding: var(--e5); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.vazio strong { font-weight: 800; }
.vazio p { color: var(--texto-2); font-size: 14px; max-width: var(--leitura); }
.lista > .vazio { border: 0; border-radius: 0; }
.avisos { position: fixed; z-index: 40; left: var(--e3); right: var(--e3); bottom: calc(64px + var(--e3)); display: flex; flex-direction: column; gap: var(--e2); pointer-events: none; }
.aviso { pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); padding: 12px 14px; border-radius: 10px; background: var(--tinta); color: var(--sobre-tinta); box-shadow: var(--sombra-1); font-size: 14px; }
/* O texto nunca encolhe abaixo de 12rem. Num cartão estreito, o botão desce para a linha de baixo. */
.aviso p { flex: 1 1 12rem; min-width: 0; }
.aviso .botao { background: transparent; border-color: transparent; color: var(--verde-claro); }
.aviso.erro { background: var(--atencao-fundo); color: var(--atencao); border: 1px solid var(--perigo-linha); font-weight: 600; }
.aviso.erro .botao { color: var(--atencao); }
.aviso.fixo { background: var(--aguardando-fundo); color: var(--aguardando); box-shadow: none; font-size: 13.5px; font-weight: 600; }
.aviso.fixo.erro { background: var(--atencao-fundo); color: var(--atencao); }
.aviso a { color: inherit; }
dialog[open] ~ .avisos { z-index: 2147483647; }
@media (min-width: 900px) { .avisos { left: auto; right: var(--e5); bottom: var(--e5); width: 420px; } }
.porque { display: inline-flex; }
.porque .balao { max-width: min(340px, 86vw); padding: 12px 14px; background: var(--superficie); color: var(--texto); border: 1px solid var(--linha); border-radius: 10px; box-shadow: var(--sombra-1); font-size: 13.5px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.porque .balao:popover-open { position: fixed; inset: auto var(--e4) calc(64px + var(--e4)) var(--e4); margin: 0 auto; }
@media (min-width: 900px) { .porque .balao:popover-open { inset: auto var(--e5) var(--e5) auto; margin: 0; } }

/* 17b. Comparação de versões e editor de texto */
.comparacao { border: 1px solid var(--linha); border-radius: var(--raio-cartao); background: var(--superficie); overflow: hidden; font-size: 14px; }
.comparacao-topo { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); padding: 10px 14px; background: var(--superficie-2); border-bottom: 1px solid var(--linha); color: var(--texto-2); }
.comparacao-linha { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--e2); padding: 3px 14px; min-height: 26px; white-space: pre-wrap; }
.comparacao-linha del, .comparacao-linha ins { text-decoration: none; }
.comparacao-linha.saiu { background: var(--atencao-fundo); color: var(--atencao); }
.comparacao-linha.saiu del { text-decoration: line-through; }
.comparacao-linha.entrou { background: var(--aprovado-fundo); color: var(--aprovado); }
.comparacao-pulo { padding: 4px 14px; background: var(--papel); color: var(--texto-2); font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; border-block: 1px solid var(--linha-suave); }
.editor { display: flex; flex-wrap: wrap; gap: var(--e4); align-items: flex-start; }
.editor > * { flex: 1 1 340px; min-width: 0; }
.editor textarea { font: 500 13px/1.6 var(--fonte-mono); min-height: 320px; }
.editor-previa { border: 1px solid var(--linha); border-radius: var(--raio-controle); padding: 12px 14px; background: var(--papel); font-weight: 400; font-size: 15px; min-height: 120px; max-height: 70vh; overflow-y: auto; }

/* 18. Entrada */
.entrada { max-width: 420px; margin: var(--e6) auto; display: flex; flex-direction: column; gap: 20px; }

/* 19. Movimento */
@media (prefers-reduced-motion: no-preference) {
  .botao, .menu-item, .ficha, .aba { transition: background-color 0.12s, border-color 0.12s, color 0.12s; }
  .aviso:not(.fixo) { animation: subir 0.18s ease-out; }
}
@keyframes subir { from { transform: translateY(8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .icone.gira { animation: none !important; } }
/* Galeria de imagens e artes (E8). */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--e3); align-items: start; }
.galeria.larga { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.galeria figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.galeria a { display: block; border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; background: var(--linha); }
.galeria img { display: block; width: 100%; height: auto; }
.galeria figcaption { font-size: 12.5px; color: var(--texto-2); }
/* Sequência de cartões do carrossel. Rola na horizontal no celular. */
.cartoes { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: var(--e3); overflow-x: auto; }
.cartao-do-carrossel { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--linha); border-radius: 8px; padding: var(--e2); }
.cartao-do-carrossel img { display: block; width: 100%; height: auto; border-radius: 6px; }
.cartao-numero { font-size: 12.5px; color: var(--texto-2); }
.cartao-titulo { font-weight: 600; }
.cartao-texto { font-size: 14px; }
.cartao-apontado { font-size: 13px; color: var(--atencao); }
/* Texto para copiar, como o HTML de um artigo (E10). */
.codigo { display: flex; flex-direction: column; gap: var(--e3); }
.codigo textarea { width: 100%; font: 12.5px/1.5 var(--fonte-mono, ui-monospace, monospace); border: 1px solid var(--linha-forte); border-radius: var(--raio-controle); padding: var(--e3); background: var(--superficie); color: var(--texto); resize: vertical; }


/* Calendário de publicações (seção 9.3). Grade no computador, lista por dia no celular. */
.calendario { display: none; }
.calendario-lista { display: flex; flex-direction: column; gap: var(--e3); }
.calendario-dia-lista { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-cartao); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.calendario-dia-lista h3 { margin: 0; font: 800 14px/1.3 var(--fonte); text-transform: capitalize; }
.calendario-dia-lista.hoje { border-color: var(--verde); }
.calendario-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.calendario-item { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.35; min-width: 0; }
.calendario-item a, .calendario-item > span { overflow-wrap: anywhere; }
.calendario-hora { font: 700 12px/1.2 var(--fonte); color: var(--texto-2); }
.esteira { display: flex; flex-direction: column; gap: var(--e3); }
.esteira-coluna { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--raio-cartao); min-width: 0; }
.esteira-coluna.destaque { border-color: var(--aguardando); }
.esteira-coluna > summary { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; cursor: pointer; list-style: none; min-height: 44px; }
.esteira-coluna > summary::-webkit-details-marker { display: none; }
.esteira-titulo { font: 800 14px/1.3 var(--fonte); display: flex; justify-content: space-between; gap: var(--e2); }
.esteira-coluna > .auxiliar { padding: 0 14px 12px; }
.esteira-cartoes { list-style: none; margin: 0; padding: 0 10px 10px; display: flex; flex-direction: column; gap: var(--e2); }
.esteira-cartao { position: relative; background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; display: grid; gap: 3px; font-size: 13.5px; min-width: 0; }
.esteira-cartao:has([data-selecao]) { padding-right: 46px; }
.esteira-cartao:has([data-selecao]:checked) { border-color: var(--verde); background: var(--selecionada); }
.esteira-cartao .linha-titulo { overflow-wrap: anywhere; }
.esteira-selecao { position: absolute; top: 0; right: 0; z-index: 1; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.esteira-selecao input { width: 20px; height: 20px; accent-color: var(--verde); }
@media (min-width: 900px) {
  .esteira { flex-direction: row; align-items: flex-start; overflow-x: auto; padding-bottom: var(--e2); }
  .esteira-coluna { flex: 1 0 190px; }
  .esteira-coluna > summary { cursor: default; }
}
.calendario-evento { display: block; margin-top: 4px; padding: 2px 6px; border-radius: 6px; background: var(--superficie-2); color: var(--texto-2); font: 600 11.5px/1.35 var(--fonte); text-transform: none; overflow-wrap: anywhere; }
.calendario-lacuna { display: block; margin-top: 4px; font: 600 12px/1.35 var(--fonte); color: var(--aguardando); text-transform: none; }
.calendario-mes { display: flex; flex-direction: column; gap: var(--e3); }
.calendario-mes-linha { display: contents; }
.calendario-mes .calendario-topo, .calendario-mes-dia.sem-nada, .so-computador { display: none; }
.calendario-mes-dia { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-cartao); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.calendario-mes-dia.hoje { border-color: var(--verde); }
.calendario-mes-numero { font: 800 14px/1.3 var(--fonte); text-transform: capitalize; }
.calendario-item .selo { white-space: normal; max-width: 100%; }
@media (min-width: 900px) {
  .calendario-lista { display: none; }
  .calendario { display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-cartao); overflow: hidden; }
  .calendario-linha { display: grid; grid-template-columns: 110px repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--linha-suave); }
  .calendario-linha:last-child { border-bottom: 0; }
  .calendario-topo { background: var(--superficie-2); font: 800 12px/1.3 var(--fonte); text-transform: capitalize; }
  .calendario-dia, .calendario-faixa, .calendario-celula { padding: 10px; border-left: 1px solid var(--linha-suave); min-width: 0; }
  .calendario-faixa { border-left: 0; font: 800 13px/1.3 var(--fonte); }
  .calendario-celula { min-height: 72px; }
  .calendario-campanha { align-items: center; }
  .calendario-barra { margin: 6px 4px; padding: 6px 10px; border-radius: 8px; background: var(--superficie-2); border: 1px solid var(--linha); color: var(--texto); font: 700 12.5px/1.3 var(--fonte); display: flex; gap: 8px; align-items: center; justify-content: space-between; min-width: 0; text-decoration: none; overflow-wrap: anywhere; }
  .calendario-barra.no_ar { background: var(--selecionada); border-color: var(--verde); }
  .calendario-barra.pausada { border-style: dashed; }
  .calendario-barra.comeca-1 { grid-column-start: 2; }
  .calendario-barra.termina-1 { grid-column-end: 3; }
  .calendario-barra.comeca-2 { grid-column-start: 3; }
  .calendario-barra.termina-2 { grid-column-end: 4; }
  .calendario-barra.comeca-3 { grid-column-start: 4; }
  .calendario-barra.termina-3 { grid-column-end: 5; }
  .calendario-barra.comeca-4 { grid-column-start: 5; }
  .calendario-barra.termina-4 { grid-column-end: 6; }
  .calendario-barra.comeca-5 { grid-column-start: 6; }
  .calendario-barra.termina-5 { grid-column-end: 7; }
  .calendario-barra.comeca-6 { grid-column-start: 7; }
  .calendario-barra.termina-6 { grid-column-end: 8; }
  .calendario-barra.comeca-7 { grid-column-start: 8; }
  .calendario-barra.termina-7 { grid-column-end: 9; }
  .calendario-dia.hoje, .calendario-celula.hoje { background: var(--selecionada); }
  .so-celular { display: none; }
  .so-computador { display: inline; }
  .calendario-mes { gap: 0; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-cartao); overflow: hidden; }
  .calendario-mes-linha, .calendario-mes .calendario-topo { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--linha-suave); }
  .calendario-mes-linha:last-child { border-bottom: 0; }
  .calendario-mes .calendario-topo span { padding: 8px 10px; }
  .calendario-mes-dia, .calendario-mes-dia.sem-nada { display: flex; border: 0; border-left: 1px solid var(--linha-suave); border-radius: 0; padding: 8px 10px; min-height: 96px; }
  .calendario-mes-dia:first-child { border-left: 0; }
  .calendario-mes-dia.fora { background: var(--superficie-2); }
  .calendario-mes-dia.fora > * { opacity: 0.6; }
  .calendario-mes-dia.hoje { background: var(--selecionada); }
  .calendario-mes-numero { font-size: 13px; }
}

/* Diário dos agentes */
.evento.atencao .evento-marca { background: var(--atencao-fundo); color: var(--atencao); }
.diario-rotulo { font-weight: 700; color: var(--texto-2); margin-right: 4px; }
.carta-partes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e4); }
.carta-partes h3 { font-size: 13px; margin: 0 0 4px; color: var(--texto-2); }
.carta-partes ul { margin: 0; padding-left: 18px; }

/* Página Configurar, com os ambientes (Ajuste 5) */
.ambientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--e4); }
.ambiente { display: grid; gap: var(--e2); align-content: start; }
.ambiente h2 { font-size: 16px; line-height: 1.3; }
.ambiente .selo { white-space: normal; }
.ambiente-links { flex-wrap: wrap; gap: var(--e1) var(--e2); }
/* Início em grade (E2 da Sprint 10). Hoje ao lado das ações rápidas, e os indicadores numa linha. */
.grade-inicio, .grade-indicadores { display: grid; gap: var(--e4); grid-template-columns: minmax(0, 1fr); align-items: start; }
.grade-inicio > .pilha > .cartao, .grade-indicadores > .pilha > .cartao, .grade-indicadores > .cartao { height: 100%; }
@media (min-width: 900px) {
  .grade-inicio { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .grade-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1400px) { .grade-indicadores { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* O cartão Operação, único bloco vivo da grade, ocupa a linha inteira para os indicadores ficarem lado a lado. */
.grade-indicadores > .pilha { grid-column: 1 / -1; }
.atalhos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.atalhos form { margin: 0; }
.atalho { display: flex; align-items: center; gap: var(--e2); width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--linha); border-radius: var(--raio-controle); background: var(--superficie); color: var(--texto); font: 600 14px/1.3 var(--fonte); text-align: left; text-decoration: none; cursor: pointer; }
.atalho:hover { border-color: var(--linha-forte); background: var(--superficie-2); }
.atalho .icone { flex: none; color: var(--verde); }
.atalho.perigo { color: var(--atencao); border-color: var(--perigo-linha); }
.atalho.perigo .icone { color: var(--atencao); }
.hoje { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); }
.hoje li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.agentes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.agente { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--linha); border-radius: var(--raio-controle); }
.agente a { display: inline-flex; align-items: center; gap: 6px; color: var(--texto); text-decoration: none; }
.agente.trabalhando { border-color: var(--verde); }
.agente-agora { margin: 0; font-weight: 600; }
.agente.trabalhando .agente-agora { color: var(--verde-escuro); }
.agente p { margin: 0; }
.auxiliar.atencao { color: var(--atencao); }
/* Paginação das listas (E3 da Sprint 10). */
.paginacao { display: flex; align-items: center; justify-content: flex-end; gap: var(--e2); padding-top: var(--e3); }
.paginacao .auxiliar { margin-right: auto; }
/* Logotipo do canal ao lado do nome (E3 da Sprint 10). */
.canal { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.canal .icone { width: 16px; height: 16px; }
/* Dentro de uma lista ou de um gráfico, o nome do canal quebra na coluna, e o logotipo fica no topo. */
.linha-celulas .canal, .grafico-rotulo .canal { white-space: normal; align-items: flex-start; min-width: 0; }
.linha-celulas .canal .icone, .grafico-rotulo .canal .icone { flex: none; margin-top: 2px; }
.canal.facebook .icone { color: var(--canal-facebook); }
.canal.instagram .icone { color: var(--canal-instagram); }
.canal.linkedin .icone { color: var(--canal-linkedin); }
.canal.meta .icone { color: var(--canal-meta); }
.canal.google .icone { color: var(--canal-google); }
.canal.buffer .icone { color: var(--canal-buffer); }
.canal.documento .icone { color: var(--verde); }
/* Visão geral de Resultados e gráficos (E4 da Sprint 10). */
.resumo-5 > * { flex: 1 1 180px; }
.periodo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); }
.periodo .formulario { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.periodo .campo { flex-direction: row; align-items: center; gap: var(--e2); font-size: 14px; }
.periodo .campo input { width: auto; min-height: 0; height: 36px; padding: 0 10px; }
.periodo .acoes-finais { margin: 0; }
.grade-resultados { display: grid; gap: var(--e4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .grade-resultados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grade-resultados > .cartao, .grade-resultados > .lista { height: 100%; }
/* As linhas dividem as mesmas três colunas, para as barras começarem e medirem igual. O rótulo
   ocupa o que precisa até 16rem, ou até 45% no celular, e quebra depois disso. O valor fica
   alinhado à direita. */
.grafico-barras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: fit-content(min(16rem, 45%)) minmax(0, 1fr) auto; gap: var(--e2) var(--e3); align-items: center; }
.grafico-barras li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
.grafico-rotulo { overflow-wrap: anywhere; font-size: 14px; line-height: 1.3; }
.grafico-barra { width: 100%; height: 12px; }
.grafico-valor { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.grafico-barras .serie, .grafico-linha .serie { fill: var(--verde); stroke: var(--verde); }
.grafico-linha svg { width: 100%; height: 180px; display: block; }
.grafico-linha .serie { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.grafico-base { stroke: var(--linha); stroke-width: 1; }
.serie.facebook { fill: var(--canal-facebook); stroke: var(--canal-facebook); }
.serie.instagram { fill: var(--canal-instagram); stroke: var(--canal-instagram); }
.serie.linkedin { fill: var(--canal-linkedin); stroke: var(--canal-linkedin); }
.serie.meta { fill: var(--canal-meta); stroke: var(--canal-meta); }
.serie.google { fill: var(--canal-google); stroke: var(--canal-google); }
.grafico-linha .serie.facebook, .grafico-linha .serie.instagram, .grafico-linha .serie.linkedin, .grafico-linha .serie.meta, .grafico-linha .serie.google { fill: none; }
.grafico-linha figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e2); padding-top: var(--e2); }
.grafico-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e3); }
.grafico-legenda li { display: inline-flex; align-items: center; gap: 6px; }
.funcionou { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.funcionou li { display: flex; flex-direction: column; gap: 4px; padding-bottom: var(--e3); border-bottom: 1px solid var(--linha); }
.funcionou li:last-child { border-bottom: 0; padding-bottom: 0; }
.funcionou-sim { font-weight: 700; color: var(--aprovado); }
.funcionou-nao { font-weight: 700; color: var(--atencao); }
/* Divisa entre os grupos de abas e período da aba (E6 da Sprint 10). */
.abas-divisa { flex: none; align-self: center; width: 1px; height: 20px; margin: 0 10px; background: var(--linha-forte); }
.periodo-da-aba { margin: 0; font-size: 15px; font-weight: 700; color: var(--texto); }
.periodo-da-aba small { font-weight: 500; color: var(--texto-2); }
/* Escala, grade e faixas de valor do gráfico de linha (Sprint 10). */
.grafico-linha-area { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e2); }
.grafico-escala { list-style: none; margin: 0; padding: 0; height: 180px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; color: var(--texto-2); text-align: right; font-variant-numeric: tabular-nums; }
.grafico-grade { stroke: var(--linha); stroke-width: 1; }
.grafico-faixa { fill: transparent; }
.grafico-faixa:hover { fill: var(--linha-suave); fill-opacity: .6; }
/* Faixa de ajuda, fina e em cor própria, que leva à explicação em outra aba. */
.faixa-de-ajuda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); padding: 8px 12px; border: 1px solid var(--andamento-fundo); border-left: 4px solid var(--andamento); border-radius: 0; background: var(--andamento-fundo); color: var(--andamento); font-size: 13.5px; }
.faixa-de-ajuda p { flex: 1 1 260px; margin: 0; }
.faixa-de-ajuda-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--raio-controle); background: var(--andamento); color: var(--superficie); font-weight: 700; text-decoration: none; white-space: nowrap; }
.faixa-de-ajuda-link:hover { filter: brightness(1.1); }
.faixa-de-ajuda-link .icone { width: 14px; height: 14px; }