/* Telas do sistema. Cores, medidas e fontes vêm do design system (design-system/). */

.topo {
  padding: 1rem;
  border-bottom: 1px solid var(--borda);
  background: var(--superficie);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 2rem;
}
.menu { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.menu a { color: var(--texto-suave); text-decoration: none; }
.menu a:hover { color: var(--cor-primaria-texto); }
.usuario { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; color: var(--texto-suave); font-size: 0.9rem; }
.usuario form { margin: 0; }
button.link { background: none; color: var(--cor-primaria-texto); padding: 0; text-decoration: underline; }

.marca {
  font-weight: 600;
  color: var(--texto);
  text-decoration: none;
}

.conteudo {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  overflow-x: auto;
}

.envio { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; }

button {
  background: var(--destaque);
  color: var(--cor-sobre-primaria);
  border: 0;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font: inherit;
  cursor: pointer;
}

.errorlist, .erro { color: var(--erro); }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; gap: 0.75rem; align-items: center; padding: 0.5rem 0; border-top: 1px solid var(--borda); }
.lista li:first-child { border-top: 0; }
.lista time { margin-left: auto; color: var(--texto-suave); font-size: 0.875rem; }

.etiqueta {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--borda);
  border-radius: 4px;
  color: var(--texto-suave);
  vertical-align: middle;
}

.vazio { color: var(--texto-suave); margin: 0; }

.visualizacao iframe { display: block; width: 100%; height: 75vh; border: 0; }

.colunas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-bottom: 1rem; }
.colunas .cartao { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--borda); }
th { color: var(--texto-suave); font-weight: 600; }

.suave { color: var(--texto-suave); font-size: 0.875rem; }
.cabecalho-arquivo h1 { margin-bottom: 0.25rem; overflow-wrap: anywhere; }
.cabecalho-arquivo p { margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.mensagem { padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid var(--borda); background: var(--info-fundo); }
.mensagem-warning { background: var(--aviso-fundo); }
.mensagem-error { background: var(--erro-fundo); color: var(--erro); }

.botao { display: inline-block; background: var(--destaque); color: var(--cor-sobre-primaria); border-radius: 6px; padding: 0.5rem 1rem; text-decoration: none; white-space: nowrap; }
button:disabled { opacity: 0.45; cursor: not-allowed; }

.verificacao-topo { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: start; }
.verificacao-topo p { margin: 0; }
.situacao-ok { color: var(--ok); font-weight: 600; }
.situacao-erro { color: var(--erro); font-weight: 600; }

.regras { list-style: none; margin: 1rem 0 0; padding: 0; }
.regra { display: flex; gap: 0.75rem; padding: 0.6rem 0; border-top: 1px solid var(--borda); }
.regra p { margin: 0.2rem 0 0; font-size: 0.9rem; }
.regra .icone { flex: 0 0 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.8rem; color: var(--cor-texto-inverso); }
.regra-ok .icone { background: var(--ok); }
.regra-aviso .icone { background: var(--aviso); }
.regra-erro .icone { background: var(--erro); }
.regra-ok strong { font-weight: 500; }
.correcao { color: var(--texto); }
.locais code { font-size: 0.8rem; background: var(--fundo); padding: 0.05rem 0.35rem; border-radius: 4px; margin-right: 0.25rem; white-space: nowrap; }

.metadados { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; margin: 0; }
.metadados dt { color: var(--texto-suave); font-size: 0.8rem; }
.metadados dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.rolagem { max-height: 420px; overflow: auto; }
.quebra { overflow-wrap: anywhere; }
.numero { text-align: right; font-variant-numeric: tabular-nums; }
.apagada td:first-child { color: var(--texto-suave); }
.lista-simples { margin: 0; padding-left: 1.2rem; }
.rolagem-alta { max-height: 70vh; }
.envio p { margin: 0; }

.visualizador { padding: 0; overflow: hidden; }
.visualizador-barra { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--borda); }
.visualizador-controles { display: flex; gap: 0.35rem; align-items: center; }
.visualizador-controles button { min-width: 2.25rem; padding: 0.3rem 0.6rem; font-size: 1rem; line-height: 1.2; }
.visualizador-controles .secundario { background: transparent; color: var(--cor-primaria-texto); border: 1px solid var(--borda); font-size: 0.875rem; }
.visualizador-nivel { min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; color: var(--texto-suave); font-size: 0.875rem; }
.visualizador-area { position: relative; height: 75vh; overflow: hidden; background: var(--cor-papel); cursor: grab; touch-action: none; }
.visualizador-area.arrastando { cursor: grabbing; }
.visualizador-area img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 0 0; user-select: none; }
.visualizador-aviso { display: none; position: absolute; inset: 0; margin: auto; height: fit-content; text-align: center; color: var(--cor-texto-no-papel); padding: 1rem; }
.visualizador.carregando .visualizador-aviso-carregando { display: block; }
.visualizador.falhou .visualizador-aviso-carregando { display: none; }
.visualizador.falhou .visualizador-aviso-falhou { display: block; color: var(--cor-erro-no-papel); }

.acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; margin-bottom: 1rem; }
.botao.secundario { background: transparent; color: var(--cor-primaria-texto); border: 1px solid var(--borda); }

.tabela-lotes td { white-space: nowrap; }
.tabela-lotes .medida { display: block; font-variant-numeric: tabular-nums; }
.tabela-lotes .confrontante { display: block; font-size: 0.78rem; color: var(--texto-suave); }
.tabela-lotes .tipo-lote { font-size: 0.85rem; }

.acoes-direita { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lista .editar { font-size: 0.85rem; }
.formulario-edicao { display: grid; gap: 1rem; max-width: 36rem; }
.formulario-edicao .helptext { display: block; font-size: 0.85rem; color: var(--texto-suave); }
.acoes-do-formulario { display: flex; gap: 0.5rem; }
.mensagem-success { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); }

.quadro .total td { font-weight: 600; border-top: 2px solid var(--borda); }

.celula-croqui { padding: 0.15rem 0.35rem; }
.croqui { display: block; background: var(--cor-papel); border-radius: 4px; }

/* ---- Avisos flutuantes (mensagens do Django e do sistema) ---- */
.avisos { position: fixed; top: 1rem; right: 1rem; z-index: 50; display: grid; gap: 0.6rem; width: min(24rem, calc(100vw - 2rem)); }
.aviso {
  display: flex; gap: 0.75rem; align-items: flex-start;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borda); border-left: 4px solid var(--cor-do-aviso, var(--cor-info));
  border-radius: 10px; padding: 0.75rem 0.75rem 0.75rem 0.9rem; box-shadow: var(--sombra);
  animation: aviso-entra 0.25s ease-out;
}
.aviso.saindo { animation: aviso-sai 0.2s ease-in forwards; }
.aviso-success { --cor-do-aviso: var(--ok); }
.aviso-error { --cor-do-aviso: var(--erro); }
.aviso-warning { --cor-do-aviso: var(--aviso); }
.aviso-info { --cor-do-aviso: var(--cor-info); }  /* avisos são do sistema: não seguem a marca */
.aviso-icone {
  flex: 0 0 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--cor-do-aviso, var(--cor-info)); color: var(--cor-texto-inverso); font-weight: 700; font-size: 0.85rem;
}
.aviso-texto { margin: 0.1rem 0 0; flex: 1; font-size: 0.92rem; }
.aviso-fechar { background: none; color: var(--texto-suave); padding: 0 0.25rem; font-size: 1.25rem; line-height: 1; }
.aviso-fechar:hover { color: var(--texto); }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes aviso-sai { to { opacity: 0; transform: translateX(16px); } }

/* ---- Pré-visualização do Memorial ---- */
.barra-da-previa { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; }
.barra-da-previa h2 { margin: 0 0 0.25rem; }
.barra-da-previa p { margin: 0; }
.opcoes-da-previa fieldset { border: 1px solid var(--borda); border-radius: 8px; padding: 0.4rem 0.8rem; display: flex; gap: 1rem; margin: 0; }
.opcoes-da-previa legend { font-size: 0.8rem; color: var(--texto-suave); padding: 0 0.3rem; }
.opcoes-da-previa label { display: flex; gap: 0.35rem; align-items: center; cursor: pointer; }
.previa-do-documento { width: 100%; height: 80vh; border: 1px solid var(--borda); border-radius: 8px; background: var(--cor-mesa); }
@media (prefers-reduced-motion: reduce) { .aviso, .aviso.saindo { animation: none; } }

/* ---- Coordenadas dos lotes ---- */
.filtro { display: grid; gap: 0.3rem; max-width: 22rem; margin-top: 0.75rem; }
.filtro span { font-size: 0.85rem; color: var(--texto-suave); }
.filtro input { font: inherit; padding: 0.5rem 0.65rem; border: 1px solid var(--borda); border-radius: 6px; background: var(--superficie); color: var(--texto); }
.titulo-da-quadra { font-size: 1.1rem; margin: 1.5rem 0 0.75rem; }
.grade-de-lotes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 44rem), 1fr)); }
.cartao-lote { margin: 0; }
.cartao-lote-topo { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; justify-content: space-between; margin-bottom: 0.5rem; }
.cartao-lote-topo h3 { margin: 0; font-size: 1rem; }
.tabela-vertices td, .tabela-vertices th { padding: 0.25rem 0.4rem; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.tabela-vertices td:not(:last-child), .tabela-vertices th { white-space: nowrap; }
.trecho-curva { color: var(--texto); font-weight: 600; }
.fim-de-curva { font-style: italic; }

.tabela-lotes .trecho { display: block; padding: 0.1rem 0; }
.tabela-lotes .trecho + .trecho { border-top: 1px dashed var(--borda); margin-top: 0.15rem; padding-top: 0.25rem; }
.tabela-lotes .tipo-de-trecho { font-size: 0.78rem; color: var(--cor-primaria-texto); }

/* Páginas com tabelas largas (lotes) usam a largura da tela */
.conteudo:has(.largura-total) { max-width: min(1700px, 100%); }

/* Edição na tela "Lotes e ruas": valor clicável, destaque do editado e alerta de confirmação */
.barra-de-edicao { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; }
.barra-de-edicao p { margin: 0; flex: 1 1 28rem; }
[data-alvo] { cursor: pointer; border-radius: 4px; }
[data-alvo]:hover { outline: 1px dashed var(--destaque); outline-offset: 1px; }
[data-editado] { background: var(--aviso-fundo); box-shadow: inset 0 -2px 0 var(--aviso); }
[data-editado]::after { content: " ✎"; color: var(--aviso); font-size: 0.8em; }
.campo-de-edicao { font: inherit; width: 100%; min-width: 6rem; box-sizing: border-box; padding: 0.15rem 0.3rem; }
.dialogo-edicao { border: 1px solid var(--borda); border-radius: 10px; padding: 1.25rem; width: min(28rem, calc(100vw - 2rem)); background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.dialogo-edicao::backdrop { background: var(--cor-cortina); }
.dialogo-edicao h2 { margin-top: 0; }
.dialogo-edicao label { display: grid; gap: 0.3rem; margin: 0.75rem 0; }
.dialogo-edicao textarea { font: inherit; }
.de-para { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 0.75rem 0; }
.de-para div { border: 1px solid var(--borda); border-radius: 6px; padding: 0.5rem; }
.de-para dt { color: var(--texto-suave); font-size: 0.8rem; }
.de-para dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.alerta-de-edicao { background: var(--aviso-fundo); border-left: 3px solid var(--aviso); padding: 0.5rem 0.75rem; margin: 0; font-size: 0.9rem; }
.botoes-do-dialogo { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* Projetos: lista, página do projeto, linha do tempo e diário de trabalho */
.migalhas { margin: 0 0 0.25rem; font-size: 0.875rem; color: var(--texto-suave); }
.migalhas a { text-decoration: none; }
.situacao { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--cor-primaria-suave); color: var(--cor-primaria-texto); }
.situacao-aprovado { background: var(--info-fundo); color: var(--ok); }
.situacao-arquivado { background: var(--fundo); color: var(--texto-suave); }
.tabela-projetos td { vertical-align: middle; }
.descricao-do-projeto { margin: 0.25rem 0 1rem; }
.titulo-com-acao { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.titulo-com-acao h2 { margin: 0; }
.etiqueta-principal { background: var(--destaque); color: var(--cor-sobre-primaria); border-color: var(--destaque); }
.acoes-da-linha { white-space: nowrap; display: flex; gap: 0.75rem; align-items: center; }
.acoes-da-linha form { margin: 0; }
.botao-ajuda {
  display: inline-grid; place-items: center; width: var(--altura-controle); height: var(--altura-controle); padding: 0;
  border-radius: var(--raio-total); background: transparent; color: var(--cor-primaria-texto);
}
.botao-ajuda:hover { background: var(--cor-bloco); }
.nomes-sugeridos { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--espaco-100) var(--espaco-200); margin: var(--espaco-150) 0 0; }
.nomes-sugeridos div { padding: var(--espaco-100) var(--espaco-150); border-radius: var(--raio-medio); background: var(--cor-bloco); }
.nomes-sugeridos dt { font: var(--fonte-texto-p); color: var(--cor-texto-suave); }
.nomes-sugeridos dd { margin: 0; font-weight: var(--peso-seminegrito); }
.envio-de-planta { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borda); }
.atalhos { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.trabalhando { color: var(--ok); font-weight: 600; margin: 0 0 0.5rem; }

.linha-do-tempo { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--borda); }
.evento { position: relative; padding: 0 0 1rem 0.75rem; }
.evento::before { content: ""; position: absolute; left: calc(-1rem - 6px); top: 0.35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--cor-do-evento, var(--destaque)); border: 2px solid var(--superficie); }
.evento-planta { --cor-do-evento: var(--destaque); }
.evento-edicao { --cor-do-evento: var(--aviso); }
.evento-documento { --cor-do-evento: var(--cor-secundaria); }
.evento-imovel { --cor-do-evento: var(--cor-terciaria); }
.evento-trabalho { --cor-do-evento: var(--ok); }
.evento-projeto { --cor-do-evento: var(--texto-suave); }
.evento-topo { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; font-size: 0.8rem; color: var(--texto-suave); }
.evento-usuario { font-weight: 600; }
.evento-titulo { margin: 0.1rem 0 0; }
.evento-titulo a { text-decoration: none; }
.evento-detalhe { margin: 0.1rem 0 0; font-size: 0.875rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.evento-anotacoes, .anotacoes { margin: 0.25rem 0 0; padding-left: 1.1rem; font-size: 0.875rem; }
.evento-anotacoes time, .anotacoes time { color: var(--texto-suave); font-variant-numeric: tabular-nums; }

.formulario-empilhado { display: grid; gap: 0.75rem; }
.formulario-empilhado label { display: grid; gap: 0.3rem; }
.formulario-empilhado textarea, .formulario-empilhado input, .formulario-empilhado select { font: inherit; }
.diario { max-width: 34rem; margin: 0 auto; }
.cronometro { font-size: 2.25rem; font-weight: 700; margin: 0 0 1rem; font-variant-numeric: tabular-nums; }
.botao-iniciar { width: 100%; font-size: 1.1rem; padding: 0.75rem; background: var(--ok); color: var(--cor-texto-inverso); }
.finalizar { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borda); }
.botao-finalizar { background: var(--erro); color: var(--cor-texto-inverso); }
.sessoes-anteriores { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.9rem; }

/* Lotes com valores alterados, marcados na planta */
.lotes-editados p { margin: 0; }
.marcador-de-edicao { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 50%; background: var(--cor-marcador-edicao); border: 2px solid var(--superficie); box-shadow: 0 0 0 1px var(--cor-marcador-edicao); vertical-align: -0.05em; }
.botao-pequeno { padding: 0.2rem 0.6rem; font-size: 0.85rem; }
.levar-alteracoes { border: 1px solid var(--borda); border-radius: 8px; padding: 0.75rem 1rem; background: var(--aviso-fundo); }
.levar-alteracoes .opcao { display: flex; gap: 0.5rem; align-items: baseline; font-weight: 600; }
.levar-alteracoes .suave { margin: 0.4rem 0; }
.lista-de-alteracoes { margin: 0; padding-left: 1.2rem; font-size: 0.875rem; max-height: 14rem; overflow: auto; }
.linha-principal td { background: var(--info-fundo); }
.metadados + .metadados, .metadados + .vazio { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borda); }

/* Atividades e prazo do projeto */
.painel-do-prazo { border: 1px solid var(--borda); border-left: 4px solid var(--cor-do-prazo, var(--destaque)); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1rem; }
.prazo-no_prazo, .prazo-concluido { --cor-do-prazo: var(--ok); }
.prazo-usando_a_folga { --cor-do-prazo: var(--aviso); }
.prazo-atrasado { --cor-do-prazo: var(--erro); }
.prazo-sem_prazo { --cor-do-prazo: var(--texto-suave); }
.prazo-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.selo-do-prazo { font-weight: 700; color: var(--cor-do-prazo); }
.barra-de-progresso { flex: 1 1 12rem; height: 0.6rem; background: var(--fundo); border-radius: 999px; overflow: hidden; }
.barra-de-progresso span { display: block; height: 100%; background: var(--cor-do-prazo); }
.tabela-atividades td { vertical-align: middle; }
.tabela-atividades form { display: inline; margin: 0; }
.atividade-feita td { color: var(--texto-suave); }
.atividade-feita td:nth-child(2) { text-decoration: line-through; }
.atividade-atrasada td { background: var(--erro-fundo); }
.etiqueta-atrasada { color: var(--erro); border-color: var(--erro); }
.nova-atividade { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borda); }
.link-perigo { color: var(--erro); }
button.link:disabled { color: var(--borda); cursor: default; text-decoration: none; }
.evento-atividade { --cor-do-evento: var(--ok); }
.selo-em-linha { margin: 0; padding: 0.2rem 0.75rem; }
.campo-da-atividade { display: grid; gap: 0.3rem; margin-bottom: 0.75rem; }
.campo-da-atividade select { font: inherit; padding: 0.4rem; }
.nova-atividade input[type="number"] { width: 5.5rem; }
.nova-atividade input[name="nome"] { width: min(24rem, 100%); }

/* Acesso ao sistema (cadastro do profissional) e Equipe e permissões */
.acesso-ao-sistema { margin-top: 1.5rem; border: 1px solid var(--borda); border-radius: 8px; padding: 1rem 1.25rem; }
.acesso-ao-sistema legend { font-weight: 700; color: var(--cor-primaria-texto); padding: 0 0.4rem; }
.acesso-ao-sistema .opcao { display: flex; gap: 0.5rem; align-items: center; font-weight: 600; }
.campos-de-acesso { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1rem; margin-top: 0.75rem; }
.lista-de-permissoes { margin: 0; padding-left: 1.1rem; font-size: 0.875rem; }
.permissoes-do-papel ul { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
.permissoes-do-papel label { display: flex; gap: 0.5rem; align-items: baseline; }

/* Gráfico das atividades (situações: cores validadas para daltonismo, sempre com ícone e nome) */
.grafico-das-atividades { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--borda); }
.titulo-do-grafico { font-weight: 700; margin-bottom: 0.6rem; }
.resumo-das-situacoes { display: flex; gap: 2px; height: 0.75rem; border-radius: 4px; overflow: hidden; background: var(--fundo); }
.fatia { display: block; min-width: 4px; }
.estado-atrasada { --cor-do-estado: var(--estado-atrasada); }
.estado-em_andamento { --cor-do-estado: var(--estado-em_andamento); }
.estado-feita { --cor-do-estado: var(--estado-feita); }
.estado-a_fazer { --cor-do-estado: var(--estado-a_fazer); }
.fatia { background: var(--cor-do-estado); }
.legenda-das-situacoes { list-style: none; margin: 0.5rem 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.85rem; color: var(--texto-suave); }
.legenda-das-situacoes li { display: flex; align-items: center; gap: 0.3rem; }
.legenda-das-situacoes b { color: var(--texto); }
.amostra { width: 0.7rem; height: 0.7rem; border-radius: 3px; background: var(--cor-do-estado); }
.estado-atrasada .icone-do-estado::before { content: "⚠"; }
.estado-em_andamento .icone-do-estado::before { content: "▶"; font-size: 0.7em; }
.estado-feita .icone-do-estado::before { content: "✓"; }
.estado-a_fazer .icone-do-estado::before { content: "○"; }
.cronograma-grafico { width: 100%; min-height: 6rem; }
.nota-do-grafico { margin: 0.25rem 0 0; }
.grafico-das-atividades + .metadados, .grafico-das-atividades + .vazio { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borda); }
.legenda-das-linhas { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: 0.85rem; color: var(--texto-suave); }
.legenda-das-linhas li { display: flex; align-items: center; gap: 0.4rem; }
.legenda-das-linhas b { color: var(--texto); }
.traco { width: 0; height: 1rem; border-left: 2px solid var(--texto); }
.traco-meta { border-left: 2px dotted var(--texto-suave); }
.traco-entrega { border-left: 2px dashed var(--texto); }
.grafico-das-atividades [data-abrir-grafico] { margin-top: 0.25rem; }
.janela-do-grafico { width: min(64rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); border: 1px solid var(--borda); border-radius: 10px; padding: 1.25rem; background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.janela-do-grafico::backdrop { background: var(--cor-cortina); }
.janela-do-grafico h2 { margin: 0; }
.janela-do-grafico form { margin: 0; }
.dica-historico { margin-top: 0.5rem; padding-top: 0.4rem; font-size: 12px; line-height: 1.4; }
.dica-historico ul { margin: 0.25rem 0 0; padding-left: 1rem; }
.dica-historico li + li { margin-top: 0.25rem; }
.acoes-da-janela { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.acoes-da-janela form { margin: 0; }
.janela-do-diario { width: min(40rem, calc(100vw - 2rem)); }
.trabalhando-agora { color: var(--ok); }

/* Cards recolhíveis (página do projeto) */
.alternar-cartao { all: unset; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font: inherit; font-weight: 700; color: var(--texto); border-radius: 4px; }
.alternar-cartao:focus-visible { outline: 2px solid var(--destaque); outline-offset: 3px; }
.seta { display: inline-block; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--texto-suave); border-bottom: 2px solid var(--texto-suave); transform: rotate(45deg); margin: 0 0.2rem 0.2rem; }
.acordeao-pronto .seta { transition: transform 0.15s ease; } /* só depois de montar: ao carregar, a seta não gira */
.recolhido .seta { transform: rotate(-45deg); margin-bottom: 0; }
.recolhido .titulo-com-acao { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .seta { transition: none; } }

/* Memorial descritivo do lote: prévia numa folha A4 (as mesmas margens do PDF e do Word) */
.mesa-da-folha { background: var(--cor-mesa); border-radius: 8px; padding: 1.5rem; overflow-x: auto; }
.folha-a4 { width: 210mm; min-height: 297mm; box-sizing: border-box; padding: 2.5cm; margin: 0 auto; background: var(--cor-papel); color: var(--cor-texto-no-papel); box-shadow: var(--sombra-sobreposta); }
.folha-a4 + .folha-a4 { margin-top: 1.5rem; }
.conferencia ul { margin: 0; padding-left: 1.2rem; }
.conferencia h2 { margin-bottom: 0.5rem; }
.conferencia-erro { border-left: 4px solid var(--erro); background: var(--erro-fundo); }
.conferencia-aviso { border-left: 4px solid var(--aviso); background: var(--aviso-fundo); }
.conferencia-ok { color: var(--ok); font-weight: 600; }

/* Tipo de pessoa e documento (clientes e profissionais) */
.tipo-de-pessoa { border: 1px solid var(--borda); border-radius: 8px; padding: 0.75rem 1rem; margin: 0 0 1rem; }
.tipo-de-pessoa legend { font-weight: 600; padding: 0 0.3rem; }
.opcoes-do-tipo { display: flex; gap: 1.5rem; margin-bottom: 0.5rem; }
.opcoes-do-tipo label { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; }

/* Formulário do cartório */
.formulario-do-cartorio h2 { margin: 0.5rem 0 0; color: var(--cor-primaria-texto); }
.formulario-do-cartorio input:not([type=checkbox]), .formulario-do-cartorio select { font: inherit; width: 100%; box-sizing: border-box; padding: 0.4rem; }
.linha-de-campos { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.linha-de-campos > .campo { flex: 1 1 10rem; }
.linha-de-campos > .campo-largo { flex: 3 1 16rem; }
.opcao-em-linha { display: flex; align-items: center; gap: 0.35rem; padding-bottom: 0.5rem; }
.formulario-empilhado .opcao-em-linha { display: flex; }
.logo-atual { display: block; max-width: 10rem; max-height: 5rem; object-fit: contain; border: 1px solid var(--borda); border-radius: 6px; padding: 0.25rem; background: var(--cor-papel); margin-bottom: 0.4rem; }
.com-logo { display: flex; align-items: center; gap: 0.75rem; }
.logo-na-lista { width: 2.5rem; height: 2.5rem; object-fit: contain; border: 1px solid var(--borda); border-radius: 4px; background: var(--cor-papel); }

/* Menu do topo com listas suspensas (Cadastros, Configurações) */
.menu { align-items: center; }
.menu-suspenso { position: relative; }
.menu-suspenso summary { list-style: none; cursor: pointer; color: var(--texto-suave); display: flex; align-items: center; gap: 0.35rem; border-radius: 4px; }
.menu-suspenso summary::-webkit-details-marker { display: none; }
.menu-suspenso summary::after { content: ""; width: 0.4rem; height: 0.4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -0.2rem; }
.menu-suspenso[open] summary::after { transform: rotate(-135deg); margin-top: 0.15rem; }
.menu-suspenso summary:hover, .menu-suspenso[open] summary { color: var(--cor-primaria-texto); }
.menu-suspenso summary:focus-visible { outline: 2px solid var(--destaque); outline-offset: 3px; }
.itens-do-menu { position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 60; min-width: 13rem; display: grid; padding: 0.35rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; box-shadow: var(--sombra); }
.itens-do-menu a { padding: 0.45rem 0.7rem; border-radius: 6px; color: var(--texto); text-decoration: none; }
.itens-do-menu a:hover, .itens-do-menu a:focus-visible { background: var(--fundo); color: var(--cor-primaria-texto); }

/* Listas dentro de um cadastro (contatos, endereços), com um item principal. */
.lista-de-itens { display: grid; gap: 0.75rem; }
.lista-de-itens:empty { display: none; }
.item-da-lista { border: 1px solid var(--borda); border-radius: 6px; padding: 0.75rem; margin: 0; display: grid; gap: 0.5rem; }
.rodape-do-item { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.opcao-em-linha.perigo { color: var(--erro); }

/* Prévia do memorial: o rodapé da empresa fica no pé da folha, como no PDF e no Word. */
.folha-a4 { position: relative; }
.folha-a4 > .rodape-empresa-na-tela { position: absolute; left: 2.5cm; right: 2.5cm; bottom: 0.8cm; margin: 0; }

/* Catálogo do design system (Configurações → Design system) */
.catalogo-cores { --coluna-minima: 12rem; }
.catalogo-cor { display: flex; align-items: center; gap: var(--espaco-100); }
.catalogo-amostra { flex: 0 0 2.5rem; height: 2.5rem; border-radius: var(--raio-medio); box-shadow: inset 0 0 0 1px var(--cor-borda); }
.catalogo-nome { min-width: 9rem; color: var(--cor-texto-suave); }
.catalogo-barra { height: var(--espaco-200); background: var(--cor-primaria); border-radius: var(--raio-pequeno); }
.catalogo-raio { width: 3rem; height: 3rem; background: var(--cor-primaria-suave); border: var(--borda-largura) solid var(--cor-primaria); }
.catalogo-elevacao { padding: var(--espaco-200); border-radius: var(--raio-grande); background: var(--cor-superficie-elevada); }
.catalogo-menu > summary { all: unset; cursor: pointer; }
.catalogo-uso { color: var(--cor-texto-suave); font: var(--fonte-texto-p); font-family: var(--familia-codigo); }

/* Botão dia/noite do topo: a lua no tema claro, o sol no escuro. */
.botao-tema { width: var(--altura-controle); padding: 0; }
.botao-tema .icone-sol { display: none; }
:root[data-tema="escuro"] .botao-tema .icone-sol { display: block; }
:root[data-tema="escuro"] .botao-tema .icone-lua { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .botao-tema .icone-sol { display: block; }
  :root:not([data-tema="claro"]) .botao-tema .icone-lua { display: none; }
}

/* Configurações → Aparência */
.cores-da-marca { display: grid; gap: var(--espaco-200); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.cores-da-marca input[type="color"] { width: 100%; height: 2.75rem; padding: var(--espaco-025); border: var(--borda-largura) solid var(--cor-borda-campo); border-radius: var(--raio-medio); background: var(--cor-superficie); cursor: pointer; }
.previa-da-marca { border: var(--borda-largura) dashed var(--cor-borda-forte); border-radius: var(--raio-grande); padding: var(--espaco-300); background: var(--cor-fundo); }
.amostra-terciaria { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: var(--raio-total); background: var(--cor-terciaria); }

/* Mensagens: lista de conversas à esquerda, conversa aberta à direita */
.mensageria { display: grid; grid-template-columns: minmax(15rem, 20rem) 1fr; gap: var(--espaco-200); height: calc(100vh - 8rem); min-height: 28rem; }
@media (max-width: 48rem) { .mensageria { grid-template-columns: 1fr; height: auto; } }
.lista-de-conversas, .conversa-aberta { background: var(--cor-superficie-elevada); border-radius: var(--raio-grande); box-shadow: var(--sombra-elevada); }
.lista-de-conversas { display: flex; flex-direction: column; overflow-y: auto; padding: var(--espaco-100) 0; }
.nova-conversa { display: grid; gap: var(--espaco-050); padding: var(--espaco-100) var(--espaco-200) var(--espaco-200); border-bottom: var(--borda-largura) solid var(--cor-borda); }
.nova-conversa select { flex: 1; min-width: 0; }
.conversa-na-lista { display: flex; align-items: center; gap: var(--espaco-150); padding: var(--espaco-150) var(--espaco-200); color: var(--cor-texto); text-decoration: none; border-left: var(--borda-largura-foco) solid transparent; }
.conversa-na-lista:hover { background: var(--cor-bloco); }
.conversa-na-lista[aria-current="page"] { background: var(--cor-selecionado-fundo); border-left-color: var(--cor-selecionado-texto); }
.icone-da-conversa { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: var(--raio-total); background: var(--cor-bloco); color: var(--cor-texto-suave); }
.resumo-da-conversa { display: grid; min-width: 0; flex: 1; }
.resumo-da-conversa small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-de-conversas .vazio { padding: var(--espaco-200); }
.conversa-aberta { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; overflow: hidden; }
.topo-da-conversa { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-200); padding: var(--espaco-200) var(--espaco-300); border-bottom: var(--borda-largura) solid var(--cor-borda); }
.nome-da-conversa { flex: 1; min-width: 0; }
.nome-da-conversa h2 { font: var(--fonte-titulo-m); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-das-mensagens { overflow-y: auto; padding: var(--espaco-200) var(--espaco-300); display: flex; flex-direction: column; gap: var(--espaco-150); background: var(--cor-fundo); }
.mensagem { max-width: min(38rem, 85%); padding: var(--espaco-100) var(--espaco-150); border-radius: var(--raio-grande); background: var(--cor-superficie); box-shadow: var(--sombra-elevada); align-self: flex-start; }
.mensagem-minha { align-self: flex-end; background: var(--cor-primaria-suave); }
.mensagem header { display: flex; gap: var(--espaco-100); align-items: baseline; font: var(--fonte-texto-p); color: var(--cor-texto-suave); margin-bottom: var(--espaco-025); }
.mensagem header strong { color: var(--cor-texto); }
.texto-da-mensagem { overflow-wrap: anywhere; }
.anexo-da-mensagem { display: inline-flex; gap: var(--espaco-050); align-items: center; margin-top: var(--espaco-050); }
.escrever-mensagem { display: grid; gap: var(--espaco-100); padding: var(--espaco-150) var(--espaco-300) var(--espaco-200); border-top: var(--borda-largura) solid var(--cor-borda); }
.escrever-mensagem textarea { width: 100%; min-height: 3rem; }
.anexar { display: inline-flex; align-items: center; gap: var(--espaco-050); color: var(--cor-texto-suave); cursor: pointer; }
.anexar input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Sino do topo */
.sino { position: relative; }
.sino > summary { list-style: none; position: relative; width: var(--altura-controle); padding: 0; }
.sino > summary::-webkit-details-marker { display: none; }
.contador-do-sino { position: absolute; top: -0.35rem; right: -0.45rem; min-width: 1.15rem; padding: 0 var(--espaco-050); }
.lista-do-sino { left: auto; right: 0; width: min(24rem, calc(100vw - 2rem)); max-height: 70vh; overflow-y: auto; }
.topo-do-sino { padding: var(--espaco-100) var(--espaco-200) var(--espaco-050); }
.item-do-sino { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-050) var(--espaco-100); }
.item-do-sino small { width: 100%; }
.item-do-sino.nao-lida { font-weight: var(--peso-seminegrito); }
p.item-do-sino { padding: var(--espaco-050) var(--espaco-200); margin: 0; }
.lista-de-membros ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--espaco-050); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.lista-de-membros label { display: flex; gap: var(--espaco-100); align-items: center; }
.acoes-do-cartao { margin-top: var(--espaco-200); }
.regras-de-notificacao select { min-width: 14rem; }

/* Botão flutuante de mensagens (canto inferior direito) e o painel que ele abre */
.mensageiro { position: fixed; right: var(--espaco-300); bottom: var(--espaco-300); z-index: var(--camada-menu); display: flex; flex-direction: column; align-items: flex-end; gap: var(--espaco-150); }
.botao-do-mensageiro {
  position: relative; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; padding: 0;
  border-radius: var(--raio-total); background: var(--cor-primaria); color: var(--cor-sobre-primaria);
  box-shadow: var(--sombra-sobreposta); transition: background-color 0.1s ease, transform 0.15s ease;
}
.botao-do-mensageiro:hover { background: var(--cor-primaria-hover); transform: scale(1.05); }
.mensageiro.aberto .botao-do-mensageiro { display: none; }  /* aberto, fecha pelo X do painel */
.contador-do-mensageiro { position: absolute; top: -0.2rem; right: -0.2rem; box-shadow: 0 0 0 2px var(--cor-fundo); }
.painel-do-mensageiro {
  display: flex; flex-direction: column; width: min(24rem, calc(100vw - 2rem)); height: min(36rem, calc(100vh - 8rem));
  overflow: hidden; border-radius: var(--raio-grande); background: var(--cor-sobreposicao); box-shadow: var(--sombra-sobreposta);
  animation: painel-entra 0.15s ease-out;
}
.painel-do-mensageiro[hidden] { display: none; }
.painel-do-mensageiro:has(> .nova-conversa) { overflow-y: auto; }
.painel-do-mensageiro .topo-da-conversa { padding: var(--espaco-150) var(--espaco-200); gap: var(--espaco-100); }
.painel-do-mensageiro .nome-da-conversa h2 { font: var(--fonte-titulo-p); }
.painel-do-mensageiro .linha-das-mensagens { flex: 1; padding: var(--espaco-150); }
.painel-do-mensageiro .mensagem { max-width: 90%; }
.painel-do-mensageiro .escrever-mensagem { padding: var(--espaco-100) var(--espaco-150) var(--espaco-150); }
@keyframes painel-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .painel-do-mensageiro, .botao-do-mensageiro { animation: none; transition: none; } }