/*
 * Corumba · Painel — estilos do CORE (v0.2.0)
 *
 * Identidade visual oficial: https://assets.cdn.corumba.app.br/clientes/corumba/corumba.md
 * Azul escuro var(--azul-escuro) (texto e fundos escuros) · Azul var(--azul) (ação: botões, links, item ativo)
 * Ciano var(--ciano) (apoio: hover, realce, indicador de "no ar"). Nenhuma outra cor de marca.
 * Tipografia Ubuntu (Regular no corpo, Bold em títulos e rótulos), auto-hospedada em
 * CORE/assets/fontes. Primetime é exclusiva da logomarca e não aparece na interface.
 *
 * Módulos NÃO criam CSS global. Se um módulo precisar de estilo próprio, usa
 * classes prefixadas com o código dele (ex.: .frota-placa) em MODULOS/<codigo>/modulo.css.
 */

@font-face {
  font-family: "Ubuntu";
  src: url("../assets/fontes/Ubuntu-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../assets/fontes/Ubuntu-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* As cores e medidas (marinho, tinta, papel, linha, ok, alerta, crítico, raio, lateral, fonte)
     vêm do tema-material.css, que mistura só os tokens da marca (consolidação de 19/10/2026). */
  --fonte: "Ubuntu", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--azul-texto); }
:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.carregando { padding: 2rem; color: var(--tinta-3); }

/* ---------- casca ---------- */
.shell { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; }

.lateral {
  background: var(--marinho);
  color: var(--marinho-texto);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
/* Logomarca: versão negativa sobre o azul escuro, com respiro igual à altura do símbolo */
.marca { display: block; padding: 2.2rem 1.5rem; }
.marca img { display: block; width: 156px; height: auto; }
.marca + .menu { padding-top: 0; }

.menu { padding: .25rem .75rem .75rem; display: flex; flex-direction: column; gap: 1px; }
.menu-grupo { margin-top: .9rem; display: flex; flex-direction: column; gap: 1px; }
.menu-grupo > span:not(.menu-bloqueado) { padding: 0 .55rem .3rem; font-size: .76rem; color: var(--marinho-mudo); }
.menu a {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  padding: .44rem .55rem;
  border-radius: var(--raio);
  color: var(--marinho-texto);
  text-decoration: none;
  font-size: .92rem;
}
.menu a:hover { background: var(--marinho-claro); color: var(--branco); }
.menu a[aria-current="page"] { background: var(--azul); color: var(--branco); }
.menu svg { width: 18px; height: 18px; }
.lateral-rodape { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: .75rem; }

.led { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--neutro); flex: none; }
.led.ok { background: var(--ok); }
.led.alerta { background: var(--alerta); }
.led.critico { background: var(--critico); }
.led.info { background: var(--azul); }
.lateral .led { box-shadow: 0 0 0 2px rgba(0, 0, 0, .2); }
.lateral .led.ok { background: var(--ciano); }
.lateral .led.neutro { background: var(--neutro); }

.area { min-width: 0; display: flex; flex-direction: column; }
.topo {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .65rem 1.75rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  position: sticky;
  top: 0;
  z-index: 5;
}
.topo-contexto { flex: 1; min-width: 0; font-size: .88rem; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-contexto b { color: var(--tinta); font-weight: 500; }
.demo {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8rem;
  background: var(--alerta-fundo); border: 1px solid var(--alerta-borda); color: var(--alerta-texto);
  padding: .2rem .25rem .2rem .75rem; border-radius: 999px;
}
.demo select { border: 0; background: var(--superficie); border-radius: 999px; padding: .2rem .5rem; font-size: .8rem; }
.usuario { display: flex; align-items: center; gap: .6rem; font-size: .88rem; line-height: 1.25; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--marinho); color: var(--branco); display: grid; place-items: center; font-weight: 600; font-size: .78rem; flex: none; }

main { padding: 1.75rem; width: 100%; max-width: 1320px; }
main:focus { outline: none; }

/* ---------- cabeçalho de tela ---------- */
.cab { display: flex; gap: 1rem; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1.25rem; }
.cab h1 { margin: 0; font-size: 1.6rem; line-height: 1.2; letter-spacing: -.01em; font-weight: 700; }
.cab p { margin: .3rem 0 0; color: var(--tinta-2); max-width: 72ch; }
.cab-meta { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .55rem; font-size: .8rem; color: var(--tinta-3); }
.acoes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }

.aviso-estado { display: flex; gap: .6rem; align-items: center; padding: .55rem .9rem; margin-bottom: 1rem; border-radius: var(--raio); font-size: .86rem; background: var(--alerta-fundo); border: 1px solid var(--alerta-borda); color: var(--alerta-texto); }

/* ---------- controles ---------- */
.btn {
  font: inherit; font-size: .88rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .8rem;
  border-radius: var(--raio);
  border: 1px solid var(--linha-forte);
  background: var(--superficie);
  color: var(--tinta);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { border-color: var(--tinta-3); }
.btn.primario { background: var(--azul); border-color: var(--azul); color: var(--branco); }
.btn.primario:hover { background: var(--ciano); border-color: var(--ciano); }
.btn.perigo { color: var(--critico); }
.btn.pequeno { padding: .22rem .55rem; font-size: .8rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.menu-botao { display: none; }

.campo { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; color: var(--tinta-2); }
input, select, textarea {
  font: inherit; font-size: .9rem;
  padding: .4rem .6rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--tinta);
}

/* ---------- painéis ---------- */
.painel { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-painel); min-width: 0; }
.pilha > * + * { margin-top: 1.25rem; }
.painel-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--linha); }
.painel-cab h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.painel-cab p { margin: 0; font-size: .82rem; color: var(--tinta-3); }
.painel-corpo { padding: 1rem 1.1rem; }
.colunas { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.filtros { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; padding: .8rem 1.1rem; border-bottom: 1px solid var(--linha); background: var(--superficie-2); }

.faixa { display: flex; flex-wrap: wrap; margin: 0 0 1.25rem; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-painel); }
.faixa > div { padding: .75rem 1.1rem; border-right: 1px solid var(--linha); flex: 1 1 150px; }
.faixa > div:last-child { border-right: 0; }
.faixa dt { font-size: .8rem; color: var(--tinta-2); }
.faixa dd { margin: .1rem 0 0; font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.faixa small { display: block; font-size: .76rem; color: var(--tinta-3); font-weight: 400; }

/* ---------- tabelas ---------- */
.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; font-weight: 500; font-size: .8rem; color: var(--tinta-2); padding: .5rem .75rem; border-bottom: 1px solid var(--linha); background: var(--superficie-2); white-space: nowrap; }
td { padding: .58rem .75rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .84em; letter-spacing: -.01em; }
.sub { display: block; color: var(--tinta-3); font-size: .8rem; }

.selo {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .76rem; font-weight: 500;
  padding: .08rem .5rem; border-radius: 999px;
  background: var(--superficie-2); border: 1px solid var(--linha); color: var(--tinta-2);
  white-space: nowrap; vertical-align: middle;
}
.selo.ok { color: var(--marinho); background: var(--superficie); border-color: var(--linha-forte); }
.selo.alerta { color: var(--alerta-texto); background: var(--alerta-fundo); border-color: var(--alerta-borda); }
.selo.critico { color: var(--critico-texto); background: var(--critico-fundo); border-color: var(--critico-borda); }
.selo.info { color: var(--azul-texto); background: var(--superficie); border-color: var(--linha-forte); }

.prazo { font-size: .78rem; }
.prazo.critico { color: var(--critico); font-weight: 500; }
.prazo.alerta { color: var(--alerta); font-weight: 500; }

/* ---------- fila de atenção (início) ---------- */
.fila { list-style: none; margin: 0; padding: 0; }
.fila li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: .8rem; padding: .7rem 1.1rem; border-bottom: 1px solid var(--linha); }
.fila li:last-child { border-bottom: 0; }
.fila .led { margin-top: .5rem; }
.fila strong { font-weight: 500; }
.fila .quando { font-size: .8rem; color: var(--tinta-3); text-align: right; white-space: nowrap; }
.fila .quando a { display: block; }
.vazio { padding: 2rem 1.1rem; text-align: center; color: var(--tinta-2); }
.vazio p { margin: 0 0 .75rem; }

/* ---------- monitoramento ---------- */
.batidas { display: inline-flex; gap: 2px; align-items: stretch; height: 20px; vertical-align: middle; }
.batidas i { width: 5px; border-radius: 2px; background: var(--ok); }
.batidas i.f { background: var(--critico); }
.batidas i.p { background: var(--alerta); }
.batidas i.n { background: var(--linha-forte); }

/* ---------- quadro de tarefas ---------- */
.quadro { display: grid; grid-template-columns: repeat(4, minmax(232px, 1fr)); gap: 1rem; align-items: start; overflow-x: auto; padding-bottom: .5rem; }
.coluna { background: var(--papel-2); border-radius: var(--raio-painel); padding: .6rem; min-height: 120px; }
.coluna h2 { font-size: .88rem; margin: .15rem .35rem .6rem; display: flex; justify-content: space-between; font-weight: 700; }
.coluna h2 span { color: var(--tinta-3); font-weight: 500; }
.coluna-vazia { margin: .5rem .35rem; font-size: .82rem; color: var(--tinta-3); }
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-left: 3px solid var(--neutro); border-radius: 8px; padding: .65rem .75rem; margin-bottom: .5rem; }
/* Arrastar e soltar. O cursor de mão só aparece em quem pode mover, porque
   convidar para uma ação que vai ser recusada é pior que não convidar. */
.cartao[draggable="true"] { cursor: grab; }
.cartao[draggable="true"]:active { cursor: grabbing; }
.cartao.arrastando { opacity: .45; transform: rotate(1.5deg); }
.coluna.recebendo { background: var(--azul-borda); outline: 2px dashed var(--azul); outline-offset: -4px; }
.coluna.recebendo .coluna-vazia { color: var(--azul-texto); }
@media (prefers-reduced-motion: reduce) { .cartao.arrastando { transform: none; } }
.cartao.p1 { border-left-color: var(--critico); }
.cartao.p2 { border-left-color: var(--azul); }
.cartao.p3 { border-left-color: var(--info); }
.cartao h3 { margin: 0 0 .25rem; font-size: .9rem; font-weight: 500; line-height: 1.35; }
.cartao .rodape { display: flex; justify-content: space-between; gap: .5rem; font-size: .78rem; color: var(--tinta-3); margin-top: .45rem; }
.cartao .acoes-cartao { margin-top: .5rem; display: flex; gap: .4rem; }

/* ---------- frota ---------- */
.veiculos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.veiculo .painel-corpo { display: grid; gap: .55rem; }
.placa {
  display: inline-block; font-family: var(--mono); font-weight: 600; font-size: .86rem; letter-spacing: .05em;
  background: #fff; color: #111; border: 1.5px solid #1f2a2c; border-top: 5px solid #1e4fa0; border-radius: 4px; padding: 0 .45rem;
}
.dados { display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; margin: 0; font-size: .86rem; }
.dados dt { color: var(--tinta-3); }
.dados dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- ajuda ---------- */
.ajuda { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ajuda-indice { position: sticky; top: 4.5rem; display: flex; flex-direction: column; gap: 2px; }
.ajuda-indice span { font-size: .78rem; color: var(--tinta-3); padding: .8rem .7rem .3rem; }
.ajuda-indice a { display: flex; justify-content: space-between; gap: .5rem; align-items: center; padding: .42rem .7rem; border-radius: var(--raio); text-decoration: none; color: var(--tinta); font-size: .9rem; }
.ajuda-indice a:hover { background: var(--superficie); }
.ajuda-indice a[aria-current="page"] { background: var(--superficie); box-shadow: inset 2px 0 0 var(--azul); font-weight: 500; }
.doc { padding: 1.6rem 2rem 2rem; }
.doc > * { max-width: 76ch; }
.doc h2 { font-size: 1.4rem; margin: 0 0 .6rem; letter-spacing: -.01em; font-weight: 700; }
.doc h3 { font-size: 1.08rem; margin: 1.8rem 0 .45rem; }
.doc h4 { font-size: .96rem; margin: 1.3rem 0 .35rem; }
.doc p, .doc li { color: var(--tinta); }
.doc li + li { margin-top: .25rem; }
.doc code { font-family: var(--mono); font-size: .84em; background: var(--superficie-2); border: 1px solid var(--linha); padding: .02rem .3rem; border-radius: 4px; }
.doc pre { background: var(--marinho); color: var(--marinho-texto); padding: .85rem 1rem; border-radius: 8px; overflow-x: auto; max-width: 100%; }
.doc pre code { background: none; border: 0; color: inherit; padding: 0; }
.doc table { margin: .75rem 0; }
.doc .tabela-rolagem { max-width: 100%; }
.nota { border-left: 3px solid var(--ciano); background: var(--alerta-fundo); padding: .6rem .9rem; margin: 1rem 0; border-radius: 0 6px 6px 0; color: var(--alerta-texto); }

/* ---------- matriz de permissões ---------- */
.matriz td, .matriz th { text-align: center; }
.matriz td:first-child, .matriz th:first-child { text-align: left; }
.matriz select { padding: .2rem .35rem; font-size: .8rem; }

/* ---------- toast e entrada ---------- */
.toast { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; background: var(--marinho); color: var(--branco); padding: .7rem 1rem; border-radius: 8px; font-size: .9rem; max-width: min(420px, 90vw); box-shadow: 0 10px 30px rgba(15, 46, 51, .3); }
.toast.critico { background: var(--critico); }

/* ---------- responsivo ---------- */
@media (max-width: 1080px) {
  .colunas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; inset: 0 auto 0 0; width: min(280px, 86vw); transform: translateX(-100%); transition: transform .18s ease-out; z-index: 40; }
  .shell.menu-aberto .lateral { transform: none; box-shadow: 0 0 0 100vmax rgba(15, 46, 51, .35); }
  .menu-botao { display: inline-flex; }
  .ajuda { grid-template-columns: minmax(0, 1fr); }
  .ajuda-indice { position: static; }
  main { padding: 1.1rem; }
  .topo { padding: .55rem 1rem; }
  .ocultar-estreito { display: none; }
  .doc { padding: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* --------------------------------------------------------------- carregando
   Os quadrinhos são os mesmos que formam o "C" da marca. Pulsam em sequência,
   no sentido da leitura, para dar a sensação de progresso sem prometer
   percentual nenhum — não sabemos quanto falta, e barra que mente é pior que
   barra nenhuma.

   Quem pediu menos animação vê os pontos parados, em tom fixo: a tela continua
   dizendo "estou carregando", sem movimento. */
.carregando { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 3rem 1rem; color: var(--tinta-3); font-size: .9rem; }
.carregando .marca-carregando { width: 92px; height: auto; }
/* A animação vive dentro do próprio SVG, para valer também por <img>. */


/* --------------------------------------------------------------- liberação
   Módulo ainda não liberado: aparece no menu e na página inicial, mas não
   abre. O tom é apagado, sem parecer erro — é "ainda não", não "proibido". */
/* Mesma grade e mesmo tamanho do item normal: bloqueado muda o tom, não a forma. */
.menu-bloqueado { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: .65rem;
  align-items: center; padding: .44rem .55rem; border-radius: var(--raio); font-size: .92rem;
  color: rgba(255,255,255,.42); cursor: default; }
.menu-bloqueado svg { opacity: .55; }
.em-breve { font-size: .66rem; letter-spacing: .03em; text-transform: uppercase;
  padding: .1rem .4rem; border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.5); }

/* --------------------------------------------------------------- início */
.inicio-cab { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.inicio-cab h1 { font-size: 2rem; margin: 0; letter-spacing: -.01em; }
.inicio-cab p { margin: .25rem 0 0; color: var(--tinta-2); }
.inicio-data { color: var(--tinta-3); font-size: .9rem; }
.inicio-data::first-letter { text-transform: uppercase; }

.atencao .painel-cab, .roteiro .painel-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.ver-todas { display: inline-flex; align-items: center; gap: .25rem; font-size: .9rem; white-space: nowrap; }
.ver-todas svg, .atencao-ir svg, .mod > svg:last-child { width: 16px; height: 16px; }
.atencao-lista { list-style: none; margin: 0; padding: 0; }
.atencao-lista li { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem;
  align-items: start; padding: .85rem 1.1rem; border-top: 1px solid var(--linha); }
.atencao-texto { display: grid; gap: .15rem; }
.atencao-detalhe { font-size: .85rem; color: var(--tinta-2); font-style: italic; }
.atencao-ir { display: inline-flex; align-items: center; gap: .2rem; font-size: .9rem; white-space: nowrap; }

.roteiro { margin-top: 1.25rem; }
.roteiro-corpo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  gap: 1.5rem; padding: 1rem 1.1rem 1.25rem; }
.roteiro-linha { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.roteiro-linha li { display: grid; grid-template-columns: 28px 1fr; gap: .75rem;
  padding: .4rem 0; position: relative; }
.roteiro-linha li:not(:last-child)::before { content: ''; position: absolute; left: 13px;
  top: 32px; bottom: -6px; width: 2px; background: var(--linha); }
.rot-marco { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: .78rem; font-weight: 700; background: var(--fundo); color: var(--tinta-3);
  border: 2px solid var(--linha); position: relative; z-index: 1; }
.rot-ativo .rot-marco { background: var(--azul); border-color: var(--azul); color: var(--branco); }
.rot-ativo strong { color: var(--azul-texto); }
.roteiro-linha li > div { display: grid; gap: .1rem; padding-top: .2rem; }
.rot-proximo strong { color: var(--tinta-2); font-weight: 500; }
.rot-nota { font-size: .85rem; color: var(--tinta-2); margin-top: .15rem; }
.roteiro-suporte { background: var(--azul-fundo); border: 1px solid var(--azul-borda); border-radius: 10px;
  padding: 1rem 1.1rem; align-self: start; }
.roteiro-suporte h3 { margin: 0 0 .45rem; font-size: .95rem; }
.roteiro-suporte p { margin: 0 0 .55rem; font-size: .9rem; line-height: 1.45; }
.roteiro-suporte p:last-child { margin-bottom: 0; }

.areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; margin-top: 1.75rem; }
.area-mod h2 { font-size: 1.25rem; margin: 0; }
.area-mod > .sub { margin: .15rem 0 .6rem; }
.mods { display: grid; border-top: 1px solid var(--linha); }
.mod { display: grid; grid-template-columns: 40px 1fr auto auto; gap: .8rem; align-items: center;
  padding: .75rem .25rem; border-bottom: 1px solid var(--linha); color: inherit; text-decoration: none; }
a.mod:hover { background: var(--azul-fundo); }
a.mod:hover strong { color: var(--azul-texto); }
.mod > svg:first-child { width: 40px; height: 40px; padding: 9px; border-radius: 10px;
  background: var(--azul-fundo); color: var(--azul-texto); }
.mod-texto { display: grid; gap: .1rem; }
.mod-texto .sub { font-size: .85rem; }
.mod-bloqueado { opacity: .62; }
.mod-bloqueado > svg:first-child { background: var(--fundo); color: var(--tinta-3); }
.selo-ativo, .selo-breve { font-size: .75rem; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
.selo-ativo { background: var(--ok-fundo); color: var(--ok-forte); }
.selo-breve { background: var(--fundo); color: var(--tinta-3); border: 1px solid var(--linha); }

@media (max-width: 900px) {
  .roteiro-corpo, .areas { grid-template-columns: 1fr; }
  .inicio-cab h1 { font-size: 1.6rem; }
}

/* --------------------------------------------------------------- tarefas */
.abas { display: flex; gap: .25rem; border-bottom: 1px solid var(--linha); margin: -.25rem 0 1.1rem; }
.abas a { padding: .55rem .9rem; color: var(--tinta-2); text-decoration: none; font-size: .92rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas a:hover { color: var(--tinta); }
.abas a.ativa { color: var(--azul-texto); border-bottom-color: var(--azul); font-weight: 500; }

.tlista { list-style: none; margin: 0; padding: 0; }
.tlista .tl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center;
  padding: .7rem .2rem .7rem .75rem; border-bottom: 1px solid var(--linha); border-left: 3px solid var(--neutro); }
.tlista .tl:last-child { border-bottom: 0; }
.tlista .tl.p1 { border-left-color: var(--critico); }
.tlista .tl.p2 { border-left-color: var(--alerta); }
.tlista .tl.p3 { border-left-color: var(--azul); }
.tl-corpo { display: grid; gap: .2rem; min-width: 0; }
.tl-titulo { color: var(--tinta); font-weight: 500; text-decoration: none; }
.tl-titulo:hover { color: var(--azul-texto); text-decoration: underline; }
.tl-meta { font-size: .8rem; color: var(--tinta-3); display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.tl .acoes-cartao { margin: 0; flex-wrap: wrap; justify-content: flex-end; }
.tlista-compacta .tl { padding: .45rem .2rem .45rem .75rem; }
.prazo-critico { color: var(--critico); font-weight: 600; }
.prazo-alerta { color: var(--alerta); font-weight: 600; }

.formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.1rem; }
.formulario .campo-largo, .novo-comentario .campo-largo { grid-column: 1 / -1; }
.formulario-acoes { grid-column: 1 / -1; display: flex; gap: .75rem; align-items: center; }
.campo textarea { font: inherit; font-size: .92rem; color: var(--tinta); padding: .5rem .6rem; border: 1px solid var(--linha-forte);
  border-radius: var(--raio); background: var(--superficie); resize: vertical; }
.campo textarea:focus, .campo input:focus, .campo select:focus { outline: 2px solid var(--azul); outline-offset: 1px; }
.descricao-tarefa { white-space: pre-wrap; margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--linha); }
.comentarios { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .9rem; }
.comentarios li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; }
.comentarios p { margin: .2rem 0 0; white-space: pre-wrap; }
.avatar.pequeno { width: 28px; height: 28px; font-size: .7rem; }
.novo-comentario { display: grid; gap: .5rem; justify-items: start; border-top: 1px solid var(--linha); padding-top: .9rem; }
.novo-comentario .campo { width: 100%; }
@media (max-width: 700px) { .formulario { grid-template-columns: 1fr; } .tlista .tl { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- modo TV
   Para a parede: lido de longe, sem interação. Fundo escuro para não cansar a
   vista em tela ligada o dia inteiro; tamanho em vw para caber em qualquer TV.
   O vermelho fica reservado para o que está atrasado ou esquecido. */
body.modo-tv { background: #0f1726; overflow: hidden; }
body.modo-tv .lateral, body.modo-tv .topo { display: none; }
body.modo-tv .shell { display: block; }
body.modo-tv main { padding: 0; max-width: none; }

/* --------------------------------------------------------------- modo ficha
   #/ver/<módulo>/<tela>: um cartão centralizado, sem menu nem topo, para o celular
   (o QR da etiqueta abre aqui). Mesmo desenho da orientação de impressão. */
body.modo-ficha { background: var(--papel-2); }
body.modo-ficha .lateral, body.modo-ficha .topo, body.modo-ficha .aviso-estado { display: none; }
body.modo-ficha .shell { display: block; }
body.modo-ficha main { padding: 16px; max-width: 460px; margin: 0 auto; }
.tv { --tv-fundo: #0f1726; --tv-cartao: rgba(255,255,255,.055); --tv-borda: rgba(255,255,255,.09);
  --tv-texto: #e9eef6; --tv-mudo: #8fa0ba; --tv-ok: #2fbf8f; --tv-alerta: #f0ad3a; --tv-critico: #ff5d4d;
  min-height: 100vh; color: var(--tv-texto); font-family: var(--fonte);
  background: radial-gradient(1200px 600px at 85% -10%, rgba(0,158,224,.18), transparent 60%),
              radial-gradient(900px 500px at -10% 110%, rgba(34,93,180,.22), transparent 60%), var(--tv-fundo);
  padding: 1.6vw 2vw; display: grid; grid-template-rows: auto auto 1fr; gap: 1.2vw; position: relative; }
.tv-topo { display: flex; justify-content: space-between; align-items: flex-end; }
.tv-marca { display: grid; gap: .2vw; }
.tv-titulo { font-size: 2.3vw; font-weight: 700; letter-spacing: -.01em; }
.tv-data { font-size: 1.05vw; color: var(--tv-mudo); }
.tv-data::first-letter { text-transform: uppercase; }
.tv-relogio { font-size: 3.6vw; font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1; }

.tv-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1vw; }
.tv-numero { background: var(--tv-cartao); border: 1px solid var(--tv-borda); border-radius: 1vw;
  padding: .9vw 1.2vw; display: flex; align-items: baseline; gap: .8vw; backdrop-filter: blur(6px); }
.tv-numero strong { font-size: 3.2vw; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tv-numero span { font-size: 1.05vw; color: var(--tv-mudo); }
.tv-numero.tv-destaque strong { color: var(--ciano); }
.tv-numero.tv-alarme { border-color: rgba(255,93,77,.5); box-shadow: 0 0 2vw rgba(255,93,77,.15) inset; }
.tv-numero.tv-alarme strong { color: var(--tv-critico); }
.tv-numero.tv-bom strong { color: var(--tv-ok); }

.tv-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 24vw; gap: 1.2vw; min-height: 0; }
.tv-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: min-content; gap: 1vw; align-content: start; }
.tv-cartao { position: relative; background: var(--tv-cartao); border: 1px solid var(--tv-borda); border-radius: 1vw;
  padding: 1vw 1.1vw .9vw 1.35vw; display: grid; gap: .45vw; overflow: hidden; }
.tv-cartao::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: .35vw; background: var(--tv-mudo); }
.tv-cartao.pri-1::before { background: var(--tv-critico); }
.tv-cartao.pri-2::before { background: var(--tv-alerta); }
.tv-cartao.pri-3::before { background: var(--ciano); }
.tv-cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: .5vw; }
.tv-pri { font-size: .82vw; text-transform: uppercase; letter-spacing: .08em; color: var(--tv-mudo); font-weight: 600; }
.tv-cartao.pri-1 .tv-pri { color: var(--tv-critico); }
.tv-status { font-size: .8vw; padding: .15vw .6vw; border-radius: 99px; background: rgba(255,255,255,.08); color: var(--tv-mudo); white-space: nowrap; }
.tv-status.st-em_andamento { background: rgba(0,158,224,.18); color: #7fd3ff; }
.tv-status.st-aguardando { background: rgba(240,173,58,.16); color: #ffd28a; }
.tv-cartao h3 { margin: 0; font-size: 1.25vw; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.tv-cliente { margin: 0; font-size: .95vw; color: var(--tv-mudo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-atrasada { color: var(--tv-critico); }
.tv-cartao-base { display: flex; justify-content: space-between; align-items: flex-end; margin-top: .2vw; }
.tv-dono { display: flex; align-items: center; gap: .5vw; font-size: .95vw; }
.tv-sem-dono { color: var(--ciano); font-weight: 600; }
.tv-avatar { width: 1.9vw; height: 1.9vw; border-radius: 50%; display: grid; place-items: center; font-size: .72vw; font-weight: 700;
  background: linear-gradient(135deg, var(--azul), var(--ciano)); color: var(--branco); flex: none; }
.tv-espera { display: grid; justify-items: end; line-height: 1.05; }
.tv-espera-rotulo { font-size: .7vw; text-transform: uppercase; letter-spacing: .08em; color: var(--tv-mudo); }
.tv-espera strong { font-size: 1.7vw; font-weight: 700; font-variant-numeric: tabular-nums; }
.tv-cartao.espera-ok .tv-espera strong { color: var(--tv-ok); }
.tv-cartao.espera-alerta .tv-espera strong { color: var(--tv-alerta); }
.tv-cartao.espera-critico .tv-espera strong { color: var(--tv-critico); }
.tv-cartao.espera-critico { border-color: rgba(255,93,77,.35); animation: tv-pulso 3.5s ease-in-out infinite; }
@keyframes tv-pulso { 0%, 100% { box-shadow: 0 0 0 rgba(255,93,77,0); } 50% { box-shadow: 0 0 1.6vw rgba(255,93,77,.22); } }
.tv-mais, .tv-vazio { grid-column: 1 / -1; text-align: center; color: var(--tv-mudo); font-size: 1.1vw; padding: .6vw; }
.tv-vazio { display: grid; gap: .4vw; padding: 4vw; }
.tv-vazio strong { font-size: 2vw; color: var(--tv-ok); }

.tv-lado { display: grid; gap: 1vw; align-content: start; }
.tv-bloco { background: var(--tv-cartao); border: 1px solid var(--tv-borda); border-radius: 1vw; padding: 1vw 1.2vw; }
.tv-bloco h2 { margin: 0 0 .8vw; font-size: .95vw; text-transform: uppercase; letter-spacing: .08em; color: var(--tv-mudo); font-weight: 600; }
.tv-carga { list-style: none; margin: 0; padding: 0; display: grid; gap: .75vw; }
.tv-carga li { display: grid; grid-template-columns: auto 1fr; gap: .7vw; align-items: center; }
.tv-carga-corpo { display: grid; gap: .3vw; }
.tv-carga-nome { display: flex; justify-content: space-between; font-size: 1vw; }
.tv-carga-nome em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.tv-barra { display: flex; height: .55vw; width: var(--p); min-width: 1vw; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.06); }
.tv-barra i, .tv-legenda i { display: block; }
.b-and { background: var(--ciano); } .b-faz { background: #5b77a8; } .b-agu { background: var(--tv-alerta); }
.tv-legenda { margin: .8vw 0 0; font-size: .75vw; color: var(--tv-mudo); display: flex; align-items: center; gap: .35vw; flex-wrap: wrap; }
.tv-legenda i { width: .7vw; height: .7vw; border-radius: 50%; margin-left: .5vw; }
.tv-legenda i:first-child { margin-left: 0; }
.tv-feitas { list-style: none; margin: 0; padding: 0; display: grid; gap: .65vw; }
.tv-feitas li { display: grid; grid-template-columns: auto 1fr; gap: .6vw; align-items: start; font-size: .95vw; }
.tv-feitas li span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.tv-feitas em { display: block; font-style: normal; font-size: .8vw; color: var(--tv-mudo); }
.tv-check { width: 1.5vw; height: 1.5vw; border-radius: 50%; display: grid; place-items: center; font-size: .8vw;
  background: rgba(47,191,143,.18); color: var(--tv-ok); font-weight: 700; }
.tv-nada { margin: 0; color: var(--tv-mudo); font-size: .95vw; }
/* Discreto: só aparece quando alguém passa o mouse, para não poluir a parede. */
.tv-sair { position: absolute; right: 1vw; bottom: .8vw; font-size: .8vw; color: var(--tv-mudo); opacity: 0; transition: opacity .2s; }
.tv:hover .tv-sair, .tv-sair:focus { opacity: .85; }
@media (prefers-reduced-motion: reduce) { .tv-cartao.espera-critico { animation: none; } }

/* --------------------------------------------------------------- tarefas 0.3: quadro */
.alternar { display: inline-flex; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 8px; padding: 2px; }
.alternar a { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .7rem; border-radius: 6px;
  color: var(--tinta-2); text-decoration: none; font-size: .85rem; }
.alternar a svg { width: 15px; height: 15px; }
.alternar a.ativo { background: var(--superficie); color: var(--tinta); box-shadow: 0 1px 2px rgba(34,48,71,.12); font-weight: 500; }

.quadro.kanban { gap: 1.1rem; }
.quadro.kanban .coluna { background: var(--papel-2); border-radius: 12px; padding: .7rem; position: relative; }
.quadro.kanban .coluna h2 { display: flex; align-items: center; justify-content: flex-start; gap: .45rem; margin: .2rem .3rem .6rem; font-size: .88rem; }
.quadro.kanban .coluna h2 .qtd { color: var(--tinta-3); font-weight: 500; margin-left: .1rem; }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--neutro); flex: none; }
.ponto.st-em_andamento { background: var(--ciano); } .ponto.st-aguardando { background: var(--alerta); }
.ponto.st-concluida { background: var(--ok-forte); } .ponto.st-a_fazer { background: var(--critico); }
.kmais { width: 100%; display: grid; place-items: center; height: 34px; margin-bottom: .6rem; border: 1px solid var(--linha);
  background: var(--superficie); border-radius: 9px; color: var(--tinta-2); cursor: pointer; }
.kmais:hover { color: var(--azul-texto); border-color: var(--azul); }
.kmais svg { width: 16px; height: 16px; }
input.rapido { width: 100%; margin: -.2rem 0 .6rem; }

.kcartao { position: relative; background: var(--superficie); border-radius: 12px; padding: .8rem .85rem .7rem;
  margin-bottom: .6rem; box-shadow: 0 1px 2px rgba(34,48,71,.06), 0 1px 1px rgba(34,48,71,.04); border: 1px solid transparent;
  display: grid; gap: .45rem; transition: box-shadow .15s, border-color .15s; }
.kcartao:hover { box-shadow: 0 6px 18px rgba(34,48,71,.10); }
.kcartao.selecionado { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(34,93,180,.12); }
.kcartao-alvo { position: absolute; inset: 0; border-radius: 12px; z-index: 0; }
.kcartao > *:not(.kcartao-alvo) { position: relative; z-index: 1; pointer-events: none; }
.kcartao h3 { margin: 0; font-size: .93rem; font-weight: 600; line-height: 1.3; color: var(--tinta); }
.kcartao-desc { margin: 0; font-size: .82rem; color: var(--tinta-3); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kcartao-subs { list-style: none; margin: 0; padding: 0; display: grid; gap: .22rem; font-size: .82rem; color: var(--tinta-2); }
.kcartao-subs li { display: flex; align-items: center; gap: .45rem; }
.kcartao-subs li.feita { color: var(--tinta-3); text-decoration: line-through; }
.kcartao-subs li.mais { color: var(--tinta-3); padding-left: 1.2rem; }
.bolinha { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--linha-forte); flex: none; }
.feita .bolinha { background: var(--ciano); border-color: var(--ciano); }
.kcartao footer { display: flex; justify-content: space-between; align-items: center; padding-top: .5rem; margin-top: .1rem;
  border-top: 1px solid var(--linha); font-size: .78rem; color: var(--tinta-3); }
.kdono { display: inline-flex; align-items: center; gap: .35rem; color: var(--tinta-2); }
.ksem { color: var(--azul-texto); font-weight: 500; }
.kinfo { display: inline-flex; gap: .6rem; align-items: center; }
.kinfo span { display: inline-flex; align-items: center; gap: .2rem; }
.kinfo svg, .tl-meta svg { width: 14px; height: 14px; }
.kinfo .completo { color: var(--ok-forte); }
.avatar.mini { width: 22px; height: 22px; font-size: .62rem; background: linear-gradient(135deg, var(--azul), var(--ciano)); }

.etiquetas { display: flex; flex-wrap: wrap; gap: .3rem; }
.etq { font-size: .7rem; font-weight: 600; padding: .12rem .5rem; border-radius: 99px; line-height: 1.5; }
.etq-cliente { background: var(--marinho); color: var(--branco); }
.et-0 { background: #e0ecff; color: #1f4f9c; } .et-1 { background: #dcf5e8; color: #1c7148; }
.et-2 { background: #fff0d6; color: #8a5a00; } .et-3 { background: #fbe1ec; color: #9b2c5c; }
.et-4 { background: #ece4ff; color: #5b3aa8; } .et-5 { background: #dff4f8; color: #0f6b80; }
.tl .etiquetas { margin-top: .25rem; }

/* ---------- painel lateral */
.gaveta-fundo { position: fixed; inset: 0; background: rgba(15,23,38,.28); z-index: 40; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--superficie); z-index: 41;
  box-shadow: -12px 0 32px rgba(15,23,38,.18); overflow-y: auto; padding: 1.4rem 1.5rem 2rem; animation: gaveta-entra .18s ease-out; }
@keyframes gaveta-entra { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.gaveta-fechar { position: absolute; top: 1rem; right: 1rem; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; color: var(--tinta-2); background: var(--superficie-2); border: 1px solid var(--linha); }
.gaveta-fechar svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .gaveta { animation: none; } }

.detalhe { display: grid; gap: 1.1rem; }
.detalhe-cab { display: grid; gap: .55rem; padding-right: 2.5rem; }
.detalhe-cab h1 { margin: 0; font-size: 1.35rem; line-height: 1.25; }
.detalhe-selos { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.detalhe-selos .sub { margin-left: auto; font-size: .8rem; }
.detalhe-dados { background: var(--superficie-2); border-radius: 10px; padding: .8rem 1rem; }
.detalhe .descricao-tarefa { margin: 0; padding: 0; border: 0; }
.editar-etiquetas { display: flex; gap: .5rem; align-items: flex-end; }
.editar-etiquetas .campo { flex: 1; }
.detalhe-bloco h2 { font-size: .95rem; margin: 0 0 .55rem; display: flex; gap: .5rem; align-items: baseline; }
.progresso { height: 6px; background: var(--linha); border-radius: 99px; overflow: hidden; margin-bottom: .6rem; }
.progresso i { display: block; height: 100%; background: var(--ciano); border-radius: 99px; }
.subtarefas { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .15rem; }
.subtarefas li { display: flex; align-items: center; gap: .6rem; padding: .35rem .2rem; border-radius: 6px; }
.subtarefas li:hover { background: var(--superficie-2); }
.subtarefas li.feita > span { color: var(--tinta-3); text-decoration: line-through; }
.subtarefas li em { margin-left: auto; font-style: normal; font-size: .75rem; }
.caixa-sub { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--linha-forte); background: var(--superficie);
  flex: none; cursor: pointer; display: grid; place-items: center; padding: 0; }
span.caixa-sub { cursor: default; }
.feita .caixa-sub { background: var(--ciano); border-color: var(--ciano); }
.feita .caixa-sub::after { content: ''; width: 5px; height: 9px; border: solid var(--branco); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.nova-sub { display: flex; gap: .5rem; }
.nova-sub input { flex: 1; }
.sub-acoes { display: flex; gap: .2rem; margin-left: auto; }
.subtarefas li em + .sub-acoes { margin-left: .4rem; }
.sub-acoes .btn { padding: .15rem .3rem; }
.tarefa-mais { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.tarefa-mais > details { flex: 1 1 100%; }
.tarefa-mais > details:not([open]) { flex: 0 0 auto; }
.form-editar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem; margin-top: .6rem; }
.form-editar .campo-largo, .form-editar .linha-acoes { grid-column: 1 / -1; }
.form-editar textarea { width: 100%; }

.baloes { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .6rem; }
.baloes li { display: flex; gap: .5rem; align-items: flex-end; max-width: 88%; }
.baloes li.meu { margin-left: auto; flex-direction: row-reverse; }
.balao { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 12px 12px 12px 4px; padding: .5rem .75rem; }
.meu .balao { background: var(--azul); border-color: var(--azul); color: var(--branco); border-radius: 12px 12px 4px 12px; }
.balao p { margin: .15rem 0 0; white-space: pre-wrap; font-size: .9rem; }
.balao-autor { font-size: .72rem; color: var(--tinta-3); }
.meu .balao-autor { color: rgba(255,255,255,.75); }
.escrever { display: flex; gap: .5rem; align-items: flex-end; border: 1px solid var(--linha-forte); border-radius: 12px; padding: .4rem .4rem .4rem .7rem; }
.escrever textarea { flex: 1; border: 0; padding: .3rem 0; resize: none; background: transparent; }
.escrever textarea:focus { outline: none; }
.escrever:focus-within { outline: 2px solid var(--azul); outline-offset: 1px; }
.tarefa-pagina { max-width: 760px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-painel); padding: 1.4rem 1.5rem; }

/* --------------------------------------------------------------- assets */
code.endereco { font-family: var(--mono); font-size: .8rem; word-break: break-all; color: var(--tinta-2); }
.lista-regras { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; }

/* --------------------------------------------------------------- assets 0.2 */
.busca-marcas { width: 220px; }
.marcas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.marca-cartao { display: grid; grid-template-rows: 150px auto; background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 12px; overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .15s, border-color .15s; }
.marca-cartao:hover { box-shadow: 0 6px 18px rgba(34,48,71,.10); border-color: var(--linha-forte); }
.marca-cartao.nossa { grid-column: span 2; border-color: var(--azul); }
.marca-cartao[hidden] { display: none; }
/* Xadrez claro: logomarca com fundo transparente aparece como é. */
.marca-vitrine, .marca-destaque, .arq-mini { display: grid; place-items: center;
  background: var(--branco) repeating-conic-gradient(var(--superficie-2) 0% 25%, var(--branco) 0% 50%) 50% / 18px 18px; }
.marca-vitrine { padding: 1.2rem; border-bottom: 1px solid var(--linha); }
.marca-vitrine img { max-width: 100%; max-height: 110px; object-fit: contain; }
.marca-vitrine em, .hotlink-falhou { font-size: .78rem; color: var(--tinta-3); font-style: normal; }
.hotlink-falhou { color: var(--critico); text-align: center; }
.marca-rodape { display: grid; gap: .2rem; padding: .75rem .9rem .85rem; }
.marca-selos { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.marcas-nada { margin-top: 1rem; }
.marcas-nada[hidden] { display: none; }
.colunas.ficha-marca { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.marca-destaque { min-height: 240px; padding: 2rem; }
.marca-destaque img { max-width: 100%; max-height: 220px; object-fit: contain; }
.cores { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.cor { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: .6rem; align-items: center; text-align: left;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; padding: .5rem; cursor: pointer; font: inherit; }
.cor:hover { border-color: var(--azul); }
.cor-amostra { grid-row: span 2; width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(0,0,0,.08); }
.cor strong { font-size: .82rem; font-weight: 500; } .cor code { font-size: .78rem; color: var(--tinta-3); }
.lista-regras.proibidos li::marker { content: '✕  '; color: var(--critico); }
.lista-regras.pendencias li::marker { content: '!  '; color: var(--alerta); font-weight: 700; }
.arquivos-marca { list-style: none; margin: 0; padding: 0; }
.arquivos-marca li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: .75rem; align-items: center;
  padding: .7rem 1rem; border-top: 1px solid var(--linha); }
.arquivos-marca li:first-child { border-top: 0; }
.arq-mini { width: 64px; height: 48px; border-radius: 8px; border: 1px solid var(--linha); overflow: hidden; }
.arq-mini img { max-width: 56px; max-height: 40px; object-fit: contain; }
.arq-mini em { font-size: .68rem; font-style: normal; font-weight: 700; color: var(--tinta-3); }
.arq-mini .hotlink-falhou { font-size: .6rem; line-height: 1.1; padding: .2rem; }
.arq-texto { display: grid; gap: .15rem; min-width: 0; }
.arq-texto code { font-size: .82rem; overflow-wrap: anywhere; }
.arq-texto .etq { justify-self: start; }
.arq-acoes { display: flex; gap: .35rem; }
@media (max-width: 700px) { .marca-cartao.nossa { grid-column: auto; } .arquivos-marca li { grid-template-columns: 64px 1fr; } .arq-acoes { grid-column: 1 / -1; } }

/* --------------------------------------------------------------- tarefas 0.4: nova tarefa por assunto */
.assunto { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.assunto .campo { min-width: 190px; }
.caminho-assunto { flex-basis: 100%; margin: 0; font-size: .8rem; color: var(--tinta-3); }
.campos-tipo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem 1rem;
  padding: 1rem; background: var(--fundo); border: 1px solid var(--linha); border-radius: 10px; }
.ajuda-campo { font-size: .74rem; color: var(--tinta-3); font-weight: 400; }
.campos-tipo .invalido { border-color: var(--critico); box-shadow: 0 0 0 3px rgba(180,67,58,.12); }
.texto-gerado { margin: .35rem 0 0; padding: .9rem 1rem; background: var(--azul-escuro); color: var(--marinho-texto); border-radius: 10px;
  font-family: var(--mono); font-size: .82rem; line-height: 1.55; white-space: pre-wrap; overflow-x: auto; }
.linha-acoes { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
.etq-pessoal { background: var(--papel-2); color: var(--tinta-2); font-size: .66rem; vertical-align: 2px; }
.aviso-repetido { color: var(--critico); font-weight: 600; }

/* --------------------------------------------------------------- marca d'água (BASE-05, 17/10/2026)
   Logo pequena da Corumba no canto inferior direito, discreta; com o mouse ou o foco do teclado
   escurece e amplia. Não intercepta o clique fora da própria logo. Some na impressão, no modo TV
   e no modo ficha do celular (o cartão já tem a logo). */
.marca-dagua { position: fixed; right: 14px; bottom: 12px; z-index: 30; display: block; line-height: 0;
  opacity: .3; transform-origin: 100% 100%; transition: opacity .2s ease, transform .2s ease; border-radius: 6px; }
.marca-dagua img { display: block; width: 92px; height: auto; }
.marca-dagua:hover, .marca-dagua:focus-visible { opacity: 1; transform: scale(1.35); }
.marca-dagua:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
#conteudo { padding-bottom: 56px; }

/* --------------------------------------------------------------- interação (CORE 0031, 17/10/2026) */
.sino-caixa { position: relative; }
.sino { position: relative; }
.sino-n { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--critico); color: var(--branco); font-size: .7rem; line-height: 18px; text-align: center; font-weight: 700; }
.sino-lista { position: absolute; right: 0; top: calc(100% + 6px); width: min(360px, 90vw); max-height: 70vh; overflow: auto; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-painel, 10px); box-shadow: 0 10px 30px rgba(15, 46, 51, .2); z-index: 70; }
.sino-topo { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid var(--linha); }
.sino-lista ul { list-style: none; margin: 0; padding: 0; }
.sino-item { display: flex; flex-direction: column; gap: .15rem; width: 100%; text-align: left; padding: .6rem .9rem; border: 0; border-bottom: 1px solid var(--linha); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.sino-item.nova { background: color-mix(in srgb, var(--azul) 8%, transparent); font-weight: 600; }
.sino-item:hover, .sino-item:focus-visible { background: color-mix(in srgb, var(--azul) 14%, transparent); }
.sino-vazio { padding: .9rem; margin: 0; }
.bloqueio { position: fixed; inset: 0; z-index: 300; background: rgba(15, 23, 38, .55); display: flex; justify-content: center; align-items: flex-start; overflow: auto; padding: 4vh 16px; }
.bloqueio-caixa { width: min(680px, 100%); background: var(--superficie); border-top: 5px solid var(--azul); border-radius: 10px; padding: 22px 22px 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.bloqueio-logo { display: block; width: 160px; height: auto; margin: 0 auto 10px; }
.bloqueio-caixa h1 { text-align: center; margin: 0 0 .3rem; font-size: 1.3rem; }
.bloqueio-caixa > .sub { text-align: center; }
.bloqueio-item { border: 1px solid var(--linha); border-radius: 8px; padding: .8rem 1rem; margin: .8rem 0; }
.bloqueio-item h2 { font-size: 1.05rem; margin: 0 0 .2rem; }
.bloqueio-corpo { white-space: pre-wrap; margin: .6rem 0; }
.bloqueio-votos { display: flex; gap: .6rem; flex-wrap: wrap; }
/* Pendência de módulo no bloqueio (lista de itens, cada um com suas ações; V00.70) */
.bloqueio-lista { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.bloqueio-linha { display: flex; flex-direction: column; gap: .5rem; padding: .7rem .8rem; border-radius: 8px; background: var(--superficie-2); }
.bloqueio-linha-info strong { display: block; }
.bloqueio-linha-info .sub { display: block; font-size: .82rem; }
.bloqueio-acoes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
.bloqueio-mais > summary { list-style: none; cursor: pointer; }
.bloqueio-mais > summary::-webkit-details-marker { display: none; }
.bloqueio-mais[open] > summary { border-color: var(--azul); }
.bloqueio-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; margin-top: .5rem; }
.bloqueio-form .campo { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; }
.bloqueio-form input { min-height: 40px; padding: .4rem .6rem; border: 1px solid var(--linha-forte); }
.sug-lista { display: flex; flex-direction: column; gap: .7rem; }
.sug { display: grid; grid-template-columns: 4.2rem 1fr; gap: .8rem; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-painel, 10px); padding: .8rem 1rem; }
.sug-votos { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.sug-votos button { display: inline-flex; align-items: center; gap: .25rem; border: 1px solid var(--linha); background: transparent; color: inherit; border-radius: 6px; padding: .2rem .45rem; cursor: pointer; font: inherit; font-size: .85rem; }
.sug-votos .voto-sim[aria-pressed="true"] { background: var(--ok-forte); border-color: var(--ok-forte); color: var(--branco); }
.sug-votos .voto-nao[aria-pressed="true"] { background: var(--critico); border-color: var(--critico); color: var(--branco); }
.sug-saldo { font-size: 1.1rem; }
.sug h2 { font-size: 1.05rem; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sug-resposta { background: color-mix(in srgb, var(--azul) 8%, transparent); padding: .5rem .7rem; border-radius: 6px; }
.sug-coms summary { cursor: pointer; color: var(--azul-texto); font-size: .9rem; }
.sug-com { margin: .5rem 0; }
.sug-tratar { border-top: 1px dashed var(--linha); margin-top: .6rem; padding-top: .6rem; }
.aviso-corpo { white-space: pre-wrap; margin-top: .3rem; }
.aviso-rel { margin: .3rem 0 0; padding-left: 1.1rem; }
.uso-barra { display: block; height: 4px; margin-top: .25rem; border-radius: 2px; background: linear-gradient(90deg, var(--azul) var(--p), var(--linha) var(--p)); }
@media (max-width: 600px) { .sug { grid-template-columns: 1fr; } .sug-votos { flex-direction: row; justify-content: flex-start; } }   /* a última linha da tela não fica sob a marca d'água */
body.modo-tv .marca-dagua, body.modo-ficha .marca-dagua { display: none; }
@media (prefers-reduced-motion: reduce) { .marca-dagua { transition: opacity .2s ease; } .marca-dagua:hover, .marca-dagua:focus-visible { transform: none; } }
@media print { .marca-dagua { display: none !important; } }

/* --------------------------------------------------------------- página inicial (17/10/2026) */
.ini-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin: 0 0 1.25rem; }
.ini-num { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; border-radius: var(--raio-painel, 10px); background: var(--superficie); border: 1px solid var(--linha); color: inherit; text-decoration: none; border-left-width: 5px; }
.ini-num strong { font-size: 1.8rem; line-height: 1; }
.ini-num:hover, .ini-num:focus-visible { box-shadow: 0 4px 14px rgba(15, 46, 51, .12); }
.ini-ok { border-left-color: var(--ok-forte); }
.ini-alerta { border-left-color: var(--alerta); }
.ini-critico { border-left-color: var(--critico); }
.ini-grupos { display: flex; flex-direction: column; }
.ini-grupo { border-top: 1px solid var(--linha); }
.ini-grupo > summary { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; cursor: pointer; list-style: none; }
.ini-grupo > summary::-webkit-details-marker { display: none; }
.ini-contagem { display: inline-flex; gap: .35rem; }
.ini-abrir { margin-left: auto; font-size: .85rem; display: inline-flex; align-items: center; gap: .2rem; }
.ini-grupo .atencao-lista { padding: 0 .5rem .5rem 2.2rem; }
.ini-modulos { margin-top: 1.25rem; }
.ini-areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.5rem; padding: .5rem 1rem 1rem; }
.ini-area h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); margin: .4rem 0; }
.ini-area ul { list-style: none; margin: 0; padding: 0; }
.ini-area li > a, .ini-area li > .ini-sem { display: grid; grid-template-columns: 22px 1fr auto; gap: .45rem; align-items: center; padding: .38rem .3rem; border-radius: 6px; color: inherit; text-decoration: none; font-size: .9rem; }
.ini-area li > a:hover, .ini-area li > a:focus-visible { background: color-mix(in srgb, var(--azul) 8%, transparent); }
.ini-area .mi { font-size: 1.05rem; color: var(--tinta-3); }
.ini-sem { opacity: .6; }
.ini-sit { font-size: .68rem; padding: .1rem .45rem; border-radius: 999px; white-space: nowrap; border: 1px solid var(--linha); }
.ini-sit-ativo { background: var(--ok-fundo); border-color: var(--ok-borda); color: var(--ok-forte); }
.ini-sit-homologacao { background: var(--alerta-fundo); border-color: var(--alerta-borda); color: var(--alerta-texto); }
.ini-sit-rascunho, .ini-sit-previa { background: var(--papel-2); border-color: var(--linha); color: var(--tinta-2); }
.ini-sit-breve { color: var(--tinta-3); }
@media (max-width: 1100px) { .ini-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ini-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ini-areas { grid-template-columns: 1fr; } }
.sug-dica { background: var(--alerta-fundo); border: 1px solid var(--alerta-borda); color: var(--alerta-texto); padding: .5rem .7rem; border-radius: 6px; margin: 0; }
.sug-anexos { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0; }
.sug-anexos img { width: 140px; height: 100px; object-fit: cover; border-radius: 6px; border: 1px solid var(--linha); }
.sug-links { margin: .3rem 0; padding-left: 1.1rem; font-size: .9rem; overflow-wrap: anywhere; }
/* Bloqueio no celular e em telas de toque: botões e campos com 44 px (auditoria da V00.70). */
@media (max-width: 900px), (pointer: coarse) {
  .bloqueio .btn, .bloqueio-mais > summary.btn { min-height: 44px; }
  .bloqueio-form input { min-height: 44px; }
}