/* Idealle - Fluxo da Marcenaria
   Interface enxuta, pensada primeiro para o celular. */

/* Paleta tirada da marca: circulo preto, anel e "i" dourados, texto branco.
   Os neutros puxam para o quente para conversar com o dourado e com a madeira. */
:root {
  --preto-900: #000000;
  --preto: #0e0e0d;
  --grafite: #262421;
  --areia: #f2ece0;

  --ouro:        #c9a227;  /* dourado da marca */
  --ouro-claro:  #e3c66b;  /* sobre fundo escuro */
  --ouro-escuro: #7d6215;  /* texto dourado sobre fundo claro, com contraste */

  --tinta:      #1c1a16;
  --tinta-media:#6b6459;
  --tinta-fraca:#9a9286;
  --linha:      #e4ded1;
  --linha-forte:#b4aa97;
  --fundo:      #f6f4ef;
  --papel:      #ffffff;

  /* Largura util da tela. O sistema e de painel, nao de leitura corrida:
     a tabela e o quadro por etapa ganham em ter espaco. */
  --largura: 1480px;
  --folga: clamp(16px, 2.6vw, 40px);

  --ok:    #1a7f4b;
  --ok-bg: #e6f4ec;
  --erro:    #b3261e;
  --erro-bg: #fdecea;
  --atencao:    #8a6100;
  --atencao-bg: #fdf4e2;

  /* Uma cor por etapa, definida so aqui. Tons terrosos e fechados para conviver
     com o preto e o dourado da marca, e escuros o bastante para texto legivel. */
  --etapa-entrada:       #6b6459;
  --etapa-entrada-bg:    #edeae3;
  --etapa-medicao:       #2a5f7a;
  --etapa-medicao-bg:    #e2eef4;
  --etapa-projeto:       #58468c;
  --etapa-projeto-bg:    #ebe5f7;
  --etapa-material:      #1a6a62;
  --etapa-material-bg:   #dcefec;
  --etapa-fabricacao:    #8a5a10;
  --etapa-fabricacao-bg: #fbedcd;
  --etapa-instalacao:    #a53f14;
  --etapa-instalacao-bg: #fbe3d7;
  --etapa-concluido:     #146238;
  --etapa-concluido-bg:  #e2f0e6;

  --raio: 10px;
  --sombra: 0 1px 2px rgba(28, 26, 22, .07), 0 4px 14px rgba(28, 26, 22, .06);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fundo);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* ---------- Topo ---------- */

.topo {
  background: var(--preto);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}

.topo-interno {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 10px var(--folga);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Assinatura da marca: "i" dourado + "Dealle" branco, com a linha de apoio
   "Ambientes Planejados" embaixo, como no selo original. */
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
}

.marca-selo {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #000;
  border: 1px solid var(--ouro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.marca-nome {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.05;
}

.marca-i { color: var(--ouro-claro); }

.marca-apoio {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  margin-top: 1px;
}

/* ---------- Menu do topo ----------
   Tres blocos: navegacao (hamburguer no celular), a acao principal, e a
   engrenagem com o que quase nunca se abre. Os dois menus sao <details>,
   entao abrem e fecham sem depender de JavaScript. */

.nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.nav a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  padding: 8px 13px;
  border-radius: 8px;
  font-size: 15px;
  white-space: nowrap;
}

.nav a:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.nav a.ativo { background: var(--grafite); color: #fff; font-weight: 600; }

.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ''; }

.menu-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .20);
  color: rgba(255, 255, 255, .85);
  background: transparent;
}

.menu-botao:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.menu > summary:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 2px; }
.menu[open] > .menu-botao { background: rgba(255, 255, 255, .14); color: #fff; }
.menu-ajustes.ativo > .menu-botao { border-color: var(--ouro); color: var(--ouro-claro); }

/* Tres tracinhos do hamburguer, desenhados sem imagem. */
.icone-hamburguer,
.icone-hamburguer::before,
.icone-hamburguer::after {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.icone-hamburguer { position: relative; }
.icone-hamburguer::before,
.icone-hamburguer::after { content: ''; position: absolute; left: 0; }
.icone-hamburguer::before { top: -5px; }
.icone-hamburguer::after  { top: 5px; }

.topo-direita {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* A acao principal do sistema, a unica em destaque no topo. */
.acao-topo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--ouro);
  color: #1a1509;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.acao-topo:hover { background: var(--ouro-claro); }
.acao-topo.ativo { background: var(--ouro-claro); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .22); }

.menu-lista {
  position: absolute;
  right: 0;
  top: calc(100% + 9px);
  z-index: 60;
  min-width: 215px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--grafite);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}

.menu-lista a {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  font-size: 14.5px;
  padding: 9px 12px;
  border-radius: 8px;
  white-space: nowrap;
}

.menu-lista a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.menu-lista a.ativo { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; }

.menu-quem {
  padding: 8px 12px 9px;
  margin-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
}

.menu-quem small {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .52);
  margin-top: 2px;
}

.menu-sair {
  margin-top: 3px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  border-radius: 0 0 8px 8px !important;
  color: rgba(255, 255, 255, .68) !important;
}

.menu-sair:hover { color: #fff !important; }

/* No desktop a navegacao nao se esconde: o hamburguer some e a lista fica inteira. */
/* O painel do hamburguer so existe no celular; a barra so existe no desktop.
   Sao dois elementos em vez de um porque o Chrome esconde o conteudo de um
   <details> fechado por content-visibility, e nao so por display. */
.nav-painel {
  position: absolute;
  left: 0;
  top: calc(100% + 9px);
  z-index: 60;
  min-width: 205px;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--grafite);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}

@media (min-width: 861px) {
  .menu-nav { display: none; }
}

@media (max-width: 860px) {
  .nav-barra { display: none; }
}

/* ---------- Estrutura ---------- */

.pagina {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 24px var(--folga) 56px;
}

/* No desktop a gaveta do calendario fica presa na borda direita; o conteudo
   precisa desviar dela, senao passa por baixo da aba. */
@media (min-width: 861px) {
  .pagina { padding-right: max(var(--folga), 62px); }
}

.pagina-centrada {
  max-width: 440px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 48px;
}

.rodape {
  flex: 0 0 auto;
  text-align: center;
  padding: 20px 16px 28px;
  color: var(--tinta-fraca);
  font-size: 13px;
}

.cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* Mais de uma acao no cabecalho: alinhadas na mesma linha, sem esticar. */
.cabecalho-acao {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.cabecalho-acao .botao { width: auto; }

h1 { font-size: 24px; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 17px; margin: 0 0 4px; }
.sub { margin: 4px 0 0; color: var(--tinta-media); font-size: 14px; }

/* ---------- Cartoes e formularios ---------- */

.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 20px;
  margin-bottom: 18px;
}

.cartao-titulo {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta-media);
  font-weight: 700;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linha);
}

.campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 16px;
}

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo-largo { grid-column: 1 / -1; }

label {
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta);
}

label .opcional { font-weight: 400; color: var(--tinta-fraca); }
.obrigatorio { color: var(--erro); }

input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number],
input[type=date], input[type=url], select, textarea {
  width: 100%;
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  padding: 11px 12px;
  border: 1px solid #cfc7b8;
  border-radius: 8px;
}

textarea { min-height: 96px; resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--grafite);
  outline-offset: 1px;
  border-color: var(--grafite);
}

.dica { font-size: 13px; color: var(--tinta-media); margin: 2px 0 0; }

/* ---------- Campo de senha com botao de revelar ---------- */

.senha-caixa { position: relative; display: block; }

/* Abre espaco para o botao nao cobrir o que esta sendo digitado. */
.senha-caixa input[type=password],
.senha-caixa input[type=text] { padding-right: 46px; }

.senha-olho {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--tinta-media);
  cursor: pointer;
}

.senha-olho:hover { background: var(--areia); color: var(--grafite); }
.senha-olho:focus-visible { outline: 2px solid var(--grafite); outline-offset: -2px; }
.senha-olho svg { width: 20px; height: 20px; display: block; }

input[type=file] {
  width: 100%;
  font: inherit;
  padding: 10px;
  border: 1px dashed #c6bdac;
  border-radius: 8px;
  background: #faf8f3;
}

/* ---------- Blocos de anotacao ---------- */

.bloco {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  margin-bottom: 10px;
  background: #faf8f3;
  border: 1px solid var(--linha);
  border-radius: 8px;
}

.bloco:focus-within { border-color: var(--linha-forte); background: var(--papel); }

.bloco-topo { display: flex; gap: 8px; align-items: center; }

.bloco-topo .bloco-rotulo { flex: 1 1 240px; min-width: 0; font-weight: 600; }
.bloco-topo .bloco-outro { flex: 1 1 200px; min-width: 0; }

.bloco textarea { min-height: 74px; }

.bloco-remover {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  color: var(--tinta-fraca);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.bloco-remover:hover { background: var(--erro-bg); color: var(--erro); }
.bloco-remover:focus-visible { outline: 2px solid var(--grafite); outline-offset: 1px; }

/* ---------- Botoes ---------- */

.acoes {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  padding: 12px 20px;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  background: var(--preto);
  color: #fff;
}

.botao:hover  { background: var(--grafite); }
.botao:active { transform: translateY(1px); }
.botao[disabled] { opacity: .6; cursor: progress; }

.botao-secundario {
  background: var(--papel);
  color: var(--tinta);
  border-color: #cfc7b8;
}

.botao-secundario:hover { background: var(--areia); }

.botao-perigo { background: var(--erro); }
.botao-perigo:hover { background: #8f1e17; }

.botao-largo { width: 100%; }
.botao-pequeno { padding: 7px 13px; min-height: 0; font-size: 14px; font-weight: 600; }

/* ---------- Avisos ---------- */

.aviso {
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 15px;
  border: 1px solid transparent;
}

.aviso-ok      { background: var(--ok-bg);      color: var(--ok);      border-color: #b8e0cb; }
.aviso-erro    { background: var(--erro-bg);    color: var(--erro);    border-color: #f3c6c3; }
.aviso-atencao { background: var(--atencao-bg); color: var(--atencao); border-color: #ead9b4; }
.aviso a { color: inherit; }

/* ---------- Tabelas ---------- */

.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-media);
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}

td {
  padding: 12px;
  border-bottom: 1px solid var(--linha);
  vertical-align: top;
}

tr:last-child td { border-bottom: 0; }
td .principal { font-weight: 600; }
td .secundario { color: var(--tinta-media); font-size: 13px; }

.etiqueta {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--areia);
  color: var(--grafite);
  white-space: nowrap;
}

.etiqueta-cinza   { background: #ece7dc; color: var(--tinta-media); }
.etiqueta-neutra  { background: #ece7dc; color: var(--tinta-media); }
.etiqueta-ok      { background: var(--ok-bg); color: var(--ok); }
.etiqueta-atencao { background: var(--atencao-bg); color: var(--atencao); }
.etiqueta-erro    { background: var(--erro-bg); color: var(--erro); }
.etiqueta-info    { background: #e6ecf5; color: #2c4a73; }

/* Etiqueta de etapa: cor cheia com texto branco. Pálida ela sumia no meio do
   cartão; a etapa é a informação que a pessoa procura primeiro. */
.etiqueta-entrada,
.etiqueta-medicao,
.etiqueta-projeto,
.etiqueta-fabricacao,
.etiqueta-instalacao,
.etiqueta-concluido {
  color: #fff;
  font-weight: 700;
  letter-spacing: .05em;
}

.etiqueta-entrada    { background: var(--etapa-entrada); }
.etiqueta-medicao    { background: var(--etapa-medicao); }
.etiqueta-projeto    { background: var(--etapa-projeto); }
.etiqueta-material   { background: var(--etapa-material); }
.etiqueta-fabricacao { background: var(--etapa-fabricacao); }
.etiqueta-instalacao { background: var(--etapa-instalacao); }
.etiqueta-concluido  { background: var(--etapa-concluido); }

/* ---------- Calendário do mês ----------
   Responde "o que esta rolando" sem exigir conta de cabeca:
   cada dia mostra o que acontece nele. */

.calendario { padding: 0; }

/* A barra de abrir e fechar. Precisa parecer botao, nao titulo. */
.calendario-resumo {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
}

.calendario-resumo::-webkit-details-marker { display: none; }
.calendario-resumo::marker { content: ''; }
.calendario-resumo:hover { background: var(--fundo); }
.calendario-resumo:focus-visible { outline: 2px solid var(--ouro); outline-offset: -2px; }

.calendario-resumo-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.calendario-resumo-titulo {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--tinta);
}

/* Um icone de calendario desenhado com bordas, sem imagem nem fonte extra. */
.calendario-resumo-titulo::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 12px;
  margin-right: 8px;
  vertical-align: -1px;
  border: 2px solid var(--ouro-escuro);
  border-top-width: 5px;
  border-radius: 3px;
}

.calendario-resumo-nota {
  font-size: 13px;
  color: var(--tinta-fraca);
}

.calendario-resumo-acao {
  flex: 0 0 auto;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--grafite);
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  padding: 6px 15px;
}

.calendario-resumo:hover .calendario-resumo-acao { background: var(--papel); border-color: var(--grafite); }

/* Um rotulo de cada vez: "Abrir" quando fechado, "Fechar" quando aberto. */
.calendario .quando-aberto { display: none; }
.calendario[open] .quando-fechado { display: none; }
.calendario[open] .quando-aberto { display: inline; }

.calendario[open] .calendario-resumo { border-bottom: 1px solid var(--linha); border-radius: 12px 12px 0 0; }

/* O miolo so ganha respiro quando esta aberto. */
.calendario > *:not(summary) { margin-left: 18px; margin-right: 18px; }
.calendario > .calendario-legenda { margin-bottom: 14px; }
.calendario > .calendario-topo { margin-top: 14px; }

.calendario-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}

.calendario-navegar { display: flex; gap: 6px; }
.calendario-navegar .botao { width: auto; }

.calendario-ajuda {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--tinta-fraca);
}

.calendario-grade {
  display: grid;
  /* minmax(0, 1fr) e nao 1fr: sem isso o nome do cliente vira largura minima
     e a grade transborda no celular. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.calendario-cabecalho {
  padding: 4px 2px 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.calendario-dia {
  min-height: 78px;
  padding: 5px 6px 6px;
  border: 1px solid var(--linha);
  border-radius: 7px;
  background: var(--papel);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.calendario-fora { background: transparent; border-color: transparent; min-height: 0; }
.calendario-cheio { background: #fffdf7; }

.calendario-numero {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-media);
  line-height: 1.1;
}

.calendario-hoje { border-color: var(--ouro); box-shadow: inset 0 0 0 1px var(--ouro); }
.calendario-hoje .calendario-numero { color: var(--ouro-escuro); }

.calendario-numero small {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-left: 3px;
}

.calendario-marca {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  gap: 0 5px;
  padding: 3px 5px;
  border-radius: 5px;
  background: var(--fundo);
  border: 1px solid var(--linha);
  text-decoration: none;
  color: var(--tinta);
  font-size: 11.5px;
  line-height: 1.15;
  overflow: hidden;
}

.calendario-marca:hover { border-color: currentColor; filter: brightness(.97); }

.calendario-ponto {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--linha-forte);
}

.calendario-texto {
  flex: 1 1 auto;
  font-weight: 600;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A etapa vai para a linha de baixo, alinhada com o nome: assim o nome do
   cliente fica com a largura toda do balao em vez de truncar cedo. */
.calendario-etapa {
  flex: 1 0 100%;
  padding-left: 13px;
  font-size: 10px;
  color: var(--tinta-fraca);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Estimativa nao e compromisso: fundo branco e borda tracejada na cor da etapa. */
.calendario-marca.marca-estimada { background: var(--papel); border-style: dashed; }
.marca-estimada .calendario-ponto { background: var(--papel) !important; border: 2px solid currentColor; }

.marca-entrada.marca-estimada    { border-color: var(--etapa-entrada);    color: var(--etapa-entrada); }
.marca-medicao.marca-estimada    { border-color: var(--etapa-medicao);    color: var(--etapa-medicao); }
.marca-projeto.marca-estimada    { border-color: var(--etapa-projeto);    color: var(--etapa-projeto); }
.marca-material.marca-estimada   { border-color: var(--etapa-material);   color: var(--etapa-material); }
.marca-fabricacao.marca-estimada { border-color: var(--etapa-fabricacao); color: var(--etapa-fabricacao); }
.marca-instalacao.marca-estimada { border-color: var(--etapa-instalacao); color: var(--etapa-instalacao); }

/* O nome do cliente segue em tinta normal, mesmo quando a marca e estimativa. */
.marca-estimada .calendario-texto { color: var(--tinta); }

.marca-entrada    .calendario-ponto { background: var(--etapa-entrada); }
.marca-medicao    .calendario-ponto { background: var(--etapa-medicao); }
.marca-projeto    .calendario-ponto { background: var(--etapa-projeto); }
.marca-material    .calendario-ponto { background: var(--etapa-material); }
.marca-fabricacao .calendario-ponto { background: var(--etapa-fabricacao); }
.marca-instalacao .calendario-ponto { background: var(--etapa-instalacao); }

/* O balão inteiro puxa a cor da etapa, para o dia se ler de longe. */
.marca-entrada    { background: var(--etapa-entrada-bg);    border-color: var(--etapa-entrada-bg); }
.marca-medicao    { background: var(--etapa-medicao-bg);    border-color: var(--etapa-medicao-bg); }
.marca-projeto    { background: var(--etapa-projeto-bg);    border-color: var(--etapa-projeto-bg); }
.marca-material   { background: var(--etapa-material-bg);   border-color: var(--etapa-material-bg); }
.marca-fabricacao { background: var(--etapa-fabricacao-bg); border-color: var(--etapa-fabricacao-bg); }
.marca-instalacao { background: var(--etapa-instalacao-bg); border-color: var(--etapa-instalacao-bg); }

.marca-entrada    .calendario-etapa { color: var(--etapa-entrada); }
.marca-medicao    .calendario-etapa { color: var(--etapa-medicao); }
.marca-projeto    .calendario-etapa { color: var(--etapa-projeto); }
.marca-material   .calendario-etapa { color: var(--etapa-material); }
.marca-fabricacao .calendario-etapa { color: var(--etapa-fabricacao); }
.marca-instalacao .calendario-etapa { color: var(--etapa-instalacao); }

.calendario-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--linha);
  font-size: 12px;
  color: var(--tinta-media);
}

.calendario-legenda span { display: inline-flex; align-items: center; gap: 6px; }

.calendario-legenda i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.ponto-entrada    { background: var(--etapa-entrada); }
.ponto-medicao    { background: var(--etapa-medicao); }
.ponto-projeto    { background: var(--etapa-projeto); }
.ponto-material   { background: var(--etapa-material); }
.ponto-fabricacao { background: var(--etapa-fabricacao); }
.ponto-instalacao { background: var(--etapa-instalacao); }

@media (max-width: 760px) {
  .calendario-etapa { display: none; }
  .calendario-dia { min-height: 62px; padding: 4px; }
  .calendario-marca { padding: 2px 3px; font-size: 10.5px; }
}

/* No celular a versao curta nao existe: la o calendario e um cartao normal. */
.calendario-resumo-curto { display: none; }

/* ---------- Calendário como gaveta lateral (desktop) ----------
   A partir de 861px o calendário sai do meio da página e vira uma aba presa
   na direita, que abre por cima. No celular isso cobriria a tela inteira,
   entao la ele continua sendo o cartao recolhivel de sempre. */
@media (min-width: 861px) {
  .calendario {
    position: fixed;
    top: 78px;
    right: 0;
    z-index: 45;
    margin: 0;
    border-radius: 12px 0 0 12px;
    border-right: 0;
    box-shadow: -6px 0 28px rgba(28, 26, 22, .16);
    max-height: calc(100vh - 96px);
    display: flex;
    flex-direction: column;
  }

  /* Fechado, o <details> encolhe ate o tamanho do resumo — e o resumo esta
     fora do fluxo, entao sobra so a aba aparecendo na borda. */
  .calendario-resumo {
    position: absolute;
    right: 100%;
    top: 14px;
    padding: 14px 10px;
    border-radius: 10px 0 0 10px;
    background: var(--preto);
    color: #fff;
    box-shadow: -4px 0 14px rgba(28, 26, 22, .18);
    writing-mode: vertical-rl;
    gap: 10px;
  }

  .calendario-resumo:hover { background: var(--grafite); }
  .calendario[open] > .calendario-resumo { border-bottom: 0; border-radius: 10px 0 0 10px; }

  /* Na aba vertical cabe pouco: so "Calendário" e quantas datas o mês tem. */
  .calendario-resumo-texto,
  .calendario-resumo-acao { display: none; }

  .calendario-resumo-curto {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .calendario-resumo-conta {
    writing-mode: horizontal-tb;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ouro);
    color: #1a1509;
    letter-spacing: 0;
  }

  /* O miolo rola sozinho quando o mês nao cabe na altura da tela. */
  .calendario > *:not(summary) {
    margin-left: 16px;
    margin-right: 16px;
    flex: 0 0 auto;
  }

  .calendario[open] { width: min(600px, 52vw); }
  .calendario[open] > .calendario-grade { overflow-y: auto; flex: 1 1 auto; }
  .calendario:not([open]) { width: 0; overflow: visible; border: 0; box-shadow: none; }
}

/* ---------- Agenda do cronograma ----------
   A tela principal de quem opera. Nada de grafico: cada projeto e um
   cartao que diz quando instala e o que falta fazer. */

.painel-simples { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* scroll-margin: ao pular pelo link do numero, o titulo do grupo nao encosta no topo. */
.agenda { margin-bottom: 26px; scroll-margin-top: 16px; }

.agenda-titulo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 11px;
  font-size: 17px;
  font-weight: 700;
  color: var(--tinta);
}

.agenda-conta {
  font-size: 12.5px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--grafite);
  color: #fff;
}

.agenda-nota {
  font-size: 13px;
  font-weight: 400;
  color: var(--tinta-fraca);
}

.agenda-atrasado .agenda-titulo { color: var(--erro); }
.agenda-atrasado .agenda-conta { background: var(--erro); color: #fff; }

/* O grupo dos entregues e um <details>: o titulo vira o botao de abrir. */
.agenda-pronto > summary {
  color: var(--tinta-media);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}

.agenda-pronto > summary::-webkit-details-marker { display: none; }
.agenda-pronto > summary::marker { content: ''; }
.agenda-pronto > summary::before { content: '▸ '; color: var(--tinta-fraca); font-weight: 400; }
.agenda-pronto[open] > summary::before { content: '▾ '; }
.agenda-pronto > summary:hover { color: var(--tinta); }

.agenda-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

.projeto-cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 0 0 15px;
  overflow: hidden;
}

/* Tudo que nao e a capa respeita a margem interna do cartao. */
.projeto-cartao > *:not(.projeto-capa) { margin-left: 16px; margin-right: 16px; }

/* ---------- Capa do cartao ----------
   A foto e a primeira imagem anexada ao projeto, reduzida pelo servidor.
   Sem foto, entra um painel com o nome do ambiente. */

.projeto-capa {
  display: block;
  position: relative;
  aspect-ratio: 2 / 1;
  margin-bottom: 13px;
  background: var(--areia);
  border-bottom: 1px solid var(--linha);
  overflow: hidden;
  text-decoration: none;
}

.projeto-capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}

.projeto-capa:hover img { transform: scale(1.03); }

.capa-vazia {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  padding: 12px;
  /* Ripado, como a madeira. Desenhado em CSS, sem imagem para carregar. */
  background-image: repeating-linear-gradient(
    90deg,
    rgba(28, 26, 22, .05) 0 2px,
    transparent 2px 13px
  );
}

.capa-ambiente {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--tinta);
}

.capa-aviso {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* O painel vazio puxa o tom da etapa, para o cartao nao virar um bloco cinza. */
.capa-entrada    .capa-vazia { background-color: var(--etapa-entrada-bg); }
.capa-projeto    .capa-vazia { background-color: var(--etapa-projeto-bg); }
.capa-medicao    .capa-vazia { background-color: var(--etapa-medicao-bg); }
.capa-material   .capa-vazia { background-color: var(--etapa-material-bg); }
.capa-fabricacao .capa-vazia { background-color: var(--etapa-fabricacao-bg); }
.capa-instalacao .capa-vazia { background-color: var(--etapa-instalacao-bg); }
.capa-concluido  .capa-vazia { background-color: var(--etapa-concluido-bg); }

/* Sem tarja lateral: a urgencia ja esta no titulo do grupo e no texto do prazo. */
.agenda-pronto .projeto-cartao { opacity: .78; }

.projeto-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.projeto-topo h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.projeto-topo h3 a { color: var(--tinta); text-decoration: none; }
.projeto-topo h3 a:hover { text-decoration: underline; }

.projeto-ambiente {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--tinta-media);
}

.projeto-quando {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.7;
}

/* A contagem vira selo: é o que a pessoa procura no cartão. */
.projeto-faltam {
  display: inline-block;
  font-weight: 700;
  font-size: 13.5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--areia);
  color: var(--tinta);
  white-space: nowrap;
}

.agenda-atrasado .projeto-faltam { background: var(--erro); color: #fff; }
.agenda-semana .projeto-faltam   { background: var(--etapa-fabricacao); color: #fff; }

.projeto-passo {
  margin: 0 0 11px;
  padding: 10px 12px;
  border-radius: 7px;
  background: var(--areia);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta);
}

.projeto-passo-rotulo {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-media);
  margin-bottom: 3px;
}

.projeto-pecas { margin-bottom: 11px; }
.projeto-pecas p { margin: 5px 0 0; font-size: 13px; color: var(--tinta-media); }

.projeto-pecas-vazio {
  margin: 0 0 11px;
  font-size: 13px;
  color: var(--tinta-fraca);
}

/* Numeros de um projeto entregue: lado a lado, nao como lista de definicao. */
.historico-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 12px;
}

.historico-numeros div { display: flex; flex-direction: column; gap: 1px; }

.historico-numeros dt {
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.historico-numeros dd {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.projeto-acoes { display: flex; flex-wrap: wrap; gap: 7px; }
.projeto-acoes .botao { width: auto; }

/* O grafico antigo, agora guardado atras de um clique. */
.grafico { padding: 0; }

.grafico > summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 18px;
  border-radius: 12px;
}

.grafico > summary::-webkit-details-marker { display: none; }
.grafico > summary::marker { content: ''; }
.grafico > summary:hover { background: var(--fundo); }

.grafico-abrir {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
}

.grafico-abrir::before { content: '▸ '; color: var(--tinta-fraca); }
.grafico[open] .grafico-abrir::before { content: '▾ '; }

.grafico-nota {
  display: block;
  font-size: 13px;
  color: var(--tinta-fraca);
  margin-top: 2px;
}

.grafico > .cartao,
.grafico > section { border: 0; box-shadow: none; margin: 0; }

@media (max-width: 640px) {
  .agenda-lista { grid-template-columns: 1fr; }
  .projeto-acoes .botao { flex: 1 1 auto; text-align: center; }
}

/* ---------- Etapas do projeto ---------- */

/* Filtro por etapa, no topo da lista de projetos. */
.filtro-etapas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.filtro-etapas a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--linha);
  background: var(--papel);
  color: var(--tinta-media);
  font-size: 14px;
  text-decoration: none;
}

.filtro-etapas a:hover { border-color: var(--linha-forte); color: var(--tinta); }

.filtro-etapas a.ativo {
  background: var(--preto);
  border-color: var(--preto);
  color: #fff;
  font-weight: 600;
}

.filtro-etapas span {
  font-size: 12px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--areia);
  color: var(--tinta-media);
}

.filtro-etapas a.ativo span { background: rgba(255, 255, 255, .18); color: #fff; }

/* A mesma bolinha do calendario, para a cor querer dizer a mesma coisa aqui. */
.filtro-etapas i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}

/* Etapa concluida usa o verde do sistema; as demais vem dos tokens de etapa. */
.ponto-concluido { background: var(--etapa-concluido); }

/* Trilha do fluxo: onde o projeto esta e o que ja passou. */
.trilha {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  counter-reset: passo;
}

.trilha-passo {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 110px;
  padding: 7px 11px;
  border-radius: 7px;
  background: var(--fundo);
  border: 1px solid var(--linha);
  font-size: 13.5px;
  color: var(--tinta-fraca);
}

.trilha-marca {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--linha-forte);
  background: var(--papel);
}

.trilha-passou { color: var(--tinta-media); }

/* A etapa em que o projeto esta usa a cor dela; as que ja passaram ficam
   com a mesma cor, so que apagada. */
.trilha-agora { font-weight: 700; }

.trilha-agora { color: #fff; }

.trilha-cor-entrada.trilha-agora    { background: var(--etapa-entrada);    border-color: var(--etapa-entrada); }
.trilha-cor-projeto.trilha-agora    { background: var(--etapa-projeto);    border-color: var(--etapa-projeto); }
.trilha-cor-material.trilha-agora   { background: var(--etapa-material);   border-color: var(--etapa-material); }
.trilha-cor-fabricacao.trilha-agora { background: var(--etapa-fabricacao); border-color: var(--etapa-fabricacao); }
.trilha-cor-instalacao.trilha-agora { background: var(--etapa-instalacao); border-color: var(--etapa-instalacao); }
.trilha-cor-concluido.trilha-agora  { background: var(--etapa-concluido);  border-color: var(--etapa-concluido); }

.trilha-agora .trilha-marca { background: #fff; border-color: #fff; }

.trilha-cor-entrada.trilha-passou .trilha-marca    { background: var(--etapa-entrada);    border-color: var(--etapa-entrada); }
.trilha-cor-projeto.trilha-passou .trilha-marca    { background: var(--etapa-projeto);    border-color: var(--etapa-projeto); }
.trilha-cor-material.trilha-passou .trilha-marca   { background: var(--etapa-material);   border-color: var(--etapa-material); }
.trilha-cor-fabricacao.trilha-passou .trilha-marca { background: var(--etapa-fabricacao); border-color: var(--etapa-fabricacao); }
.trilha-cor-instalacao.trilha-passou .trilha-marca { background: var(--etapa-instalacao); border-color: var(--etapa-instalacao); }

/* ---------- Ficha do projeto ---------- */

.colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}

.ficha {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: 14px;
}

.ficha dt {
  color: var(--tinta-media);
  font-size: 12.5px;
  padding-top: 1px;
}

.ficha dd { margin: 0; }

/* Subtitulo dentro de um cartao, mais leve que o titulo principal. */
.sub-titulo {
  margin: 18px 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

/* Prazos na ficha: uma linha por etapa, em coluna estreita. */
.prazos-ficha {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

/* Colunas fixas: cada linha e uma grade propria, entao sem largura combinada
   uma nao se alinha com a outra. */
.prazos-ficha li {
  display: grid;
  grid-template-columns: 1fr 62px 132px 118px;
  align-items: center;
  gap: 10px;
  /* Toda linha tem uma unica altura: nada empilhado embaixo do campo. */
  min-height: 40px;
  padding: 0;
  border-bottom: 1px solid var(--linha);
  color: var(--tinta-fraca);
}

.prazos-ficha .prazo-etapa-nome {
  display: flex;
  align-items: center;
  gap: 7px;
}

.prazos-ficha i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* Campo de dias: pequeno, do tamanho do que cabe nele. */
.prazo-etapa-dias {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  justify-content: flex-end;
}

.prazo-etapa-dias input {
  width: 46px;
  padding: 3px 6px;
  font-size: 13.5px;
  text-align: right;
  border: 1px solid var(--linha-forte);
  border-radius: 6px;
  background: var(--papel);
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.prazo-etapa-dias input:focus { outline: 2px solid var(--ouro); outline-offset: 1px; }

/* Prazo que este projeto mudou fica marcado, para nao se confundir com o padrao. */
.prazo-etapa-dias input.prazo-proprio {
  border-color: var(--ouro);
  background: #fffdf5;
  font-weight: 700;
}

.prazo-unidade { font-size: 11.5px; color: var(--tinta-fraca); }

.prazos-ficha li:last-child { border-bottom: 0; }
.prazos-ficha .prazo-firme { color: var(--tinta); }

.prazo-etapa-nome { font-weight: 500; }

.prazo-etapa-data {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  display: block;
  text-align: left;
}

/* Data sem campo (a entrada) alinha com o texto que aparece dentro dos campos. */
.prazo-data-fixa { padding-left: 7px; }

/* Data ja combinada. Vazia = ninguem marcou nada e o sistema so estima. */
.prazo-etapa-data input {
  width: 100%;
  padding: 3px 6px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--linha-forte);
  border-radius: 6px;
  background: var(--papel);
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}

.prazo-etapa-data input:focus { outline: 2px solid var(--ouro); outline-offset: 1px; }

/* Preenchida, ela passa a mandar na conta: fica marcada como as outras ancoras. */
.prazo-firme .prazo-etapa-data input {
  border-color: var(--ouro);
  background: #fffdf5;
  color: var(--tinta);
  font-weight: 700;
}

.prazo-etapa-data input { display: block; }

/* Rotulo das colunas: sem ele nao se sabe o que e dia e o que e data. */
.prazos-cabecalho {
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  border-bottom: 1px solid var(--linha) !important;
  padding-bottom: 5px !important;
}

/* Cada rotulo em cima da sua coluna: dias termina onde o campo termina,
   data comeca onde o texto dentro do campo comeca. */
/* O "d" fica depois do campo; o rotulo desconta essa sobra para casar com ele. */
.prazos-cabecalho span:nth-child(2) { text-align: right; padding-right: 11px; }
.prazos-cabecalho span:nth-child(3) { padding-left: 7px; }

/* Ou a data ja combinada, ou o que o sistema preve — nunca as duas coisas. */
.prazo-etapa-tipo {
  font-size: 11.5px;
  color: var(--tinta-fraca);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.prazo-firme .prazo-etapa-tipo {
  color: var(--ouro-escuro);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Em tela estreita a coluna do nome ficaria sem espaco. O campo dourado ja diz
   que a data esta combinada, entao a palavra sai e as colunas encolhem. */
@media (max-width: 560px) {
  .prazos-ficha li {
    grid-template-columns: 1fr 52px 116px;
    gap: 8px;
    row-gap: 0;
    min-height: 46px;
  }
  /* A previsao desce para baixo do campo, mas em toda linha — a altura continua igual. */
  .prazo-etapa-tipo { grid-column: 3; justify-self: end; }
  .prazos-cabecalho span:nth-child(4) { display: none; }
  .prazo-etapa-data input { font-size: 12.5px; padding: 3px 4px; }
}

.prazo-resumo {
  margin: 9px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ouro-escuro);
}

/* ---------- Pronto para a obra ----------
   Nada aqui e clicavel: e leitura do que ja esta nas listas de material. */

.pronto-lista {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}

.pronto-linha {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linha);
}

.pronto-linha:last-child { border-bottom: 0; }

.pronto-marca {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}

.pronto-ok .pronto-marca     { background: var(--etapa-concluido); }
.pronto-falta .pronto-marca  { background: var(--atencao); }
.pronto-neutro .pronto-marca { background: var(--linha-forte); }

/* Visto e exclamacao desenhados na bolinha, para nao depender so da cor. */
.pronto-ok .pronto-marca::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.pronto-falta .pronto-marca::after {
  content: '!';
  position: absolute;
  inset: 0;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.pronto-texto { display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.pronto-texto strong { font-size: 13px; color: var(--tinta-media); font-weight: 600; }

.pronto-pendentes {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-size: 13.5px;
}

.pronto-pendentes li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--linha);
}

.pronto-pendentes li:last-child { border-bottom: 0; }
.pronto-peca small { display: block; font-size: 11.5px; color: var(--tinta-fraca); }
.pronto-onde { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Lembretes do projeto ---------- */

.oculto { display: none; }

.lembrete-remover {
  border: 0;
  background: transparent;
  color: var(--tinta-fraca);
  font-size: 19px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  border-radius: 6px;
}

.lembrete-remover:hover { background: var(--erro-bg); color: var(--erro); }

.lembrete-novo {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--linha);
}

.lembrete-novo input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 420px;
}

.lembrete-novo .botao { flex: 0 0 auto; width: auto; }

.checklist {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

/* A linha do lembrete tem o texto a esquerda e o remover na ponta. */
.checklist li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.checklist label { flex: 1 1 auto; }

.checklist li { border-bottom: 1px solid var(--linha); }
.checklist li:last-child { border-bottom: 0; }

.checklist label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 2px;
  cursor: pointer;
  font-size: 14px;
}

.checklist input { width: 16px; height: 16px; flex: 0 0 auto; }
.checklist input:checked + span { color: var(--tinta-fraca); text-decoration: line-through; }

.anotacao {
  padding: 11px 0;
  border-bottom: 1px solid var(--linha);
}

.anotacao:first-of-type { padding-top: 0; }

.anotacao h3 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

.anotacao p { margin: 0; font-size: 14px; }

.anotar { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); }

/* O titulo e curto: nao precisa da largura toda do cartao. */
.anotar input[type="text"] { max-width: 380px; }
.anotar textarea { max-width: 760px; }

/* ---------- Galeria de anexos ---------- */

.galeria {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}

.galeria-item {
  position: relative;
  border: 1px solid var(--linha);
  border-radius: 9px;
  overflow: hidden;
  background: var(--papel);
}

.galeria-abrir {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--areia);
}

.galeria-abrir img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.galeria-item:hover { border-color: var(--linha-forte); }

.galeria-pdf {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--tinta-media);
  background: repeating-linear-gradient(135deg, #efe9dd 0 8px, #e9e2d4 8px 16px);
}

.galeria-pe {
  padding: 7px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-top: 1px solid var(--linha);
}

.galeria-nome {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.galeria-tamanho { font-size: 11px; color: var(--tinta-fraca); }

/* O excluir so aparece quando o mouse chega; no toque fica sempre visivel. */
.galeria-remover {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(14, 14, 13, .72);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease;
}

.galeria-item:hover .galeria-remover,
.galeria-remover:focus-visible { opacity: 1; }
.galeria-remover:hover { background: var(--erro); }

/* Sem mouse nao existe "passar por cima": o botao precisa estar sempre la.
   A largura entra junto porque nem todo aparelho de toque se declara assim. */
@media (hover: none), (max-width: 760px) {
  .galeria-remover { opacity: 1; }
}

/* ---------- Arrastar e soltar ---------- */

.envio-anexo { margin-top: 14px; }

.solta-zona {
  border: 2px dashed var(--linha-forte);
  border-radius: 10px;
  padding: 14px;
  background: var(--fundo);
  text-align: center;
}

.solta-zona.solta-ativa {
  border-color: var(--ouro);
  background: #fffdf5;
}

.solta-texto {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--tinta-media);
}

.solta-zona kbd {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 5px;
  border: 1px solid var(--linha-forte);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--papel);
}

.solta-zona input[type=file] { max-width: 100%; font-size: 13px; }
.solta-zona .dica { margin: 8px 0 0; }

.anexos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.anexos li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 14px;
}

.anexos li:last-child { border-bottom: 0; }

.historico {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.historico li {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linha);
}

.historico li:last-child { border-bottom: 0; }
.historico-quando { color: var(--tinta-media); font-variant-numeric: tabular-nums; }

.em-linha { display: inline-block; margin: 0; }

@media (max-width: 640px) {
  .historico li { grid-template-columns: 1fr; gap: 2px; }
  .ficha { grid-template-columns: 1fr; gap: 2px 0; }
  .ficha dd { margin-bottom: 8px; }
}

/* ---------- Painel de numeros ---------- */

.painel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.painel-cartao {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 14px 16px 16px;
  color: inherit;
  text-decoration: none;
}

/* Quando leva a algum lugar, precisa parecer que leva. */
a.painel-cartao { cursor: pointer; }
a.painel-cartao:hover { border-color: var(--linha-forte); background: #fffdf7; }
a.painel-cartao:hover .painel-rotulo { text-decoration: underline; }
a.painel-cartao:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }

.painel-ir {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tinta-fraca);
}

a.painel-cartao:hover .painel-ir { color: var(--grafite); }

.painel-numero {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.painel-alerta .painel-numero,
.painel-alerta .painel-rotulo { color: var(--erro); }

.painel-destaque .painel-numero,
.painel-destaque .painel-rotulo { color: var(--etapa-fabricacao); }

.painel-rotulo { font-size: 14px; font-weight: 700; }
.painel-nota { font-size: 12px; color: var(--tinta-fraca); }

/* ---------- Cronograma (gantt) ---------- */

.legenda-etapas {
  float: right;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11.5px;
  font-weight: 500;
}

.legenda { display: inline-flex; align-items: center; gap: 5px; }

.legenda i {
  width: 14px;
  height: 8px;
  border-radius: 2px;
  display: block;
}

.gantt-rolagem { overflow-x: auto; }

.gantt {
  --gantt-nome: 190px;
  position: relative;
  min-width: 660px;
  padding-bottom: 4px;
}

.gantt-eixo, .gantt-linha { display: flex; align-items: stretch; }

.gantt-eixo-nome, .gantt-nome {
  flex: 0 0 var(--gantt-nome);
  width: var(--gantt-nome);
  padding-right: 14px;
  min-width: 0;
}

.gantt-eixo-area, .gantt-area { position: relative; flex: 1 1 auto; min-width: 0; }

.gantt-eixo { height: 26px; }

.gantt-mes {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  white-space: nowrap;
}

.gantt-linha { padding: 5px 0; border-top: 1px solid var(--linha); }
.gantt-linha:hover { background: #faf8f3; }

.gantt-nome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
}

.gantt-cliente {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gantt-ambiente {
  font-size: 12px;
  color: var(--tinta-media);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gantt-area { min-height: 40px; display: flex; align-items: center; }

.gantt-grade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--linha);
}

.gantt-faixa {
  position: absolute;
  height: 15px;
  border-radius: 3px;
  top: 50%;
  transform: translateY(-50%);
}

/* Etapa ainda estimada aparece listrada; confirmada fica sólida. */
.gantt-faixa.faixa-estimada {
  background-image: repeating-linear-gradient(
    45deg, rgba(255, 255, 255, .45) 0 3px, transparent 3px 6px
  );
}

.faixa-medicao    { background-color: var(--etapa-medicao); }
.faixa-projeto    { background-color: var(--etapa-projeto); }
.faixa-material   { background-color: var(--etapa-material); }
.faixa-fabricacao { background-color: var(--etapa-fabricacao); }
.faixa-instalacao { background-color: var(--etapa-instalacao); }

.gantt-fim {
  position: absolute;
  top: 50%;
  transform: translate(6px, -50%);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-media);
  white-space: nowrap;
}

.gantt-fim-vencido { color: var(--erro); }

.gantt-sem-data {
  font-size: 12.5px;
  font-style: italic;
  color: var(--tinta-fraca);
}

.gantt-hoje {
  position: absolute;
  top: 20px;
  bottom: 0;
  width: 2px;
  background: var(--erro);
  opacity: .75;
  pointer-events: none;
}

.gantt-hoje-rotulo {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--erro);
  background: var(--papel);
  padding: 0 4px;
}

/* ---------- Barra de progresso ---------- */

.barra-progresso {
  width: 100%;
  max-width: 130px;
  height: 7px;
  background: var(--areia);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 4px;
}

.barra-progresso span {
  display: block;
  height: 100%;
  background: var(--ouro);
  border-radius: 999px;
}

.etiqueta-erro { background: var(--erro-bg); color: var(--erro); }

.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num, td.num { text-align: right; }

/* ---------- Lista de material ---------- */

.tabela-itens td { padding: 5px 6px; vertical-align: middle; }

/* O texto do cabecalho alinha com o texto dentro do campo, nao com a borda
   da celula: 6px da celula + 9px do proprio campo. */
.tabela-itens th { padding: 0 15px 8px; }
.tabela-itens th.num { padding-right: 15px; }

.tabela-itens input[type=text],
.tabela-itens input[type=date],
.tabela-itens select {
  padding: 8px 9px;
  font-size: 15px;
}

/* Campos de data ocupam a coluna inteira, sem o icone empurrar o texto. */
.tabela-itens input[type=date] { min-width: 0; }

/* ---------- Barra de adicionar ---------- */

.barra-adicionar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.barra-adicionar-campo { flex: 1 1 300px; min-width: 0; }
.barra-adicionar .botao { flex: 0 0 auto; }

/* ---------- Prazo estimado ---------- */

.prazo-total {
  float: right;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--ouro-escuro);
}

.prazo {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 4px;
}

.prazo-etapa {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 10px 0;
}

/* A linha que costura as etapas. */
.prazo-etapa::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 12px;
  right: 0;
  height: 2px;
  background: var(--linha);
}

.prazo-etapa:last-child::after { display: none; }

.prazo-marca {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--papel);
  border: 2px solid var(--linha-forte);
  margin-bottom: 5px;
}

.prazo-confirmada .prazo-marca { background: var(--ouro); border-color: var(--ouro-escuro); }

.prazo-nome { font-size: 13px; font-weight: 600; }
.prazo-data { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

.prazo-tipo {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.prazo-confirmada .prazo-tipo { color: var(--ouro-escuro); }

@media (max-width: 640px) {
  .prazo { grid-template-columns: 1fr; gap: 0; }
  .prazo-etapa { flex-direction: row; align-items: baseline; gap: 10px; padding: 8px 0 8px 20px; }
  .prazo-etapa::after { top: 22px; bottom: -8px; left: 4px; right: auto; width: 2px; height: auto; }
  .prazo-marca { position: absolute; left: 0; top: 12px; margin: 0; }
  .prazo-nome { flex: 1 1 auto; }
  .prazo-tipo { flex: 0 0 auto; }
}

.tabela-itens input[type=checkbox] {
  width: 20px;
  height: 20px;
  accent-color: var(--ouro-escuro);
  cursor: pointer;
}

.tabela-itens .item-total { color: var(--tinta-media); white-space: nowrap; }

/* Item ja comprado sai do primeiro plano sem sumir da lista. */
.tabela-itens .item-ok td { opacity: .52; }
.tabela-itens .item-ok input[type=checkbox] { opacity: 1; }

.tabela-itens tfoot td {
  border-top: 2px solid var(--linha);
  border-bottom: 0;
  padding-top: 12px;
  font-size: 16px;
}

/* No celular a tabela vira cartoes empilhados, com o rotulo antes do campo. */
@media (max-width: 760px) {
  .tabela-itens thead { display: none; }

  .tabela-itens, .tabela-itens tbody, .tabela-itens tfoot,
  .tabela-itens tr, .tabela-itens td { display: block; width: 100%; }

  .tabela-itens tr.item {
    border: 1px solid var(--linha);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 12px;
    background: #faf8f3;
    position: relative;
  }

  .tabela-itens tr.item td {
    border: 0;
    padding: 5px 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .tabela-itens tr.item td::before {
    content: attr(data-rotulo);
    flex: 0 0 96px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tinta-media);
  }

  /* O botao de remover fica solto no canto do cartao, sem rotulo. */
  .tabela-itens .item-remover { position: absolute; top: 6px; right: 6px; }
  .tabela-itens tr.item td:last-child { padding: 0; }
  .tabela-itens tr.item td:last-child::before { content: none; }

  /* Abre espaco para o botao nao encostar no primeiro campo. */
  .tabela-itens tr.item td:first-child { padding-right: 44px; }

  .tabela-itens tfoot td { display: flex; justify-content: space-between; }
  .tabela-itens tfoot td[colspan] { border-top: 0; padding-bottom: 0; }
}

.vazio {
  text-align: center;
  padding: 44px 20px;
  color: var(--tinta-media);
}

.vazio p { margin: 0 0 16px; }

.link-card { color: var(--grafite); font-weight: 600; text-decoration: none; }
.link-card:hover { text-decoration: underline; }

/* Links dentro do conteudo das telas: sem o azul padrao do navegador. */
.anexos a,
.ficha a,
.historico a,
.anotacao a,
td .principal a {
  color: var(--grafite);
  font-weight: 600;
  text-decoration: none;
}

.anexos a:hover,
.ficha a:hover,
.historico a:hover,
.anotacao a:hover,
td .principal a:hover { text-decoration: underline; }

.anexos a.secundario { font-weight: 500; }

/* ---------- Login / instalacao ---------- */

.painel-entrada { text-align: center; margin-bottom: 22px; }

/* Selo circular da marca, como no perfil: fundo preto e anel dourado. */
.painel-entrada .simbolo {
  width: 92px;
  height: 92px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #000;
  border: 2px solid var(--ouro);
  box-shadow: 0 0 0 4px rgba(201, 162, 39, .10);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.painel-entrada .simbolo-nome {
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
}

.painel-entrada .simbolo-apoio {
  font-size: 6.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

.painel-entrada h1 { font-size: 21px; }
.painel-entrada .sub { margin-top: 6px; }

.entrada-campos { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Anexos escolhidos ---------- */

.arquivos-escolhidos {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.arquivos-escolhidos li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--tinta-media);
  background: #faf8f3;
  border: 1px solid var(--linha);
  padding: 8px 11px;
  border-radius: 6px;
}

@media (max-width: 640px) {
  .topo-interno { padding: 10px 12px; gap: 10px; flex-wrap: nowrap; }
  .marca-apoio { display: none; }
  .marca-nome { font-size: 17px; }
  .pagina { padding: 18px 12px 44px; }
  .cartao { padding: 16px; }
  h1 { font-size: 21px; }
  .botao { width: 100%; }
  .botao-pequeno { width: auto; }
}

/* Celular estreito: a acao principal fica so com o "+", para nada quebrar linha. */
@media (max-width: 430px) {
  .acao-topo-texto { display: none; }
  .acao-topo { width: 38px; height: 38px; padding: 0; justify-content: center; font-size: 21px; }
  .topo-direita { gap: 8px; }
}

/* ---------- Visitas de instalação ---------- */

/* Quanto da obra ja andou, pelo numero da ultima visita. */
.progresso { margin: 0 0 16px; }

.progresso-topo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.progresso-numero {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.progresso-texto { font-size: 13.5px; color: var(--tinta-fraca); }

.progresso-barra {
  height: 10px;
  border-radius: 999px;
  background: var(--fundo);
  border: 1px solid var(--linha);
  overflow: hidden;
}

.progresso-barra span {
  display: block;
  height: 100%;
  background: var(--etapa-instalacao);
  border-radius: 999px;
}

.visitas {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.visita {
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 11px 13px;
  background: var(--papel);
}

/* Pedido ou reclamacao sem resolver: o cartao inteiro fica em tom de atencao. */
.visita-aberta {
  background: var(--atencao-bg);
  border-color: #ead9b4;
}

.visita-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.visita-data { font-weight: 700; font-variant-numeric: tabular-nums; }

.visita-progresso {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--etapa-instalacao);
}

.visita-linha { margin: 3px 0; font-size: 14px; }
.visita-linha strong { color: var(--tinta-media); font-weight: 600; }

.visita-fala {
  margin: 7px 0 0;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 14px;
  background: var(--papel);
  border: 1px solid var(--linha);
}

.visita-pedido strong { color: var(--atencao); }
.visita-reclamacao strong { color: var(--erro); }

.visita-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 9px;
}

.visita-acoes { display: flex; align-items: center; gap: 8px; }

.visita-remover {
  border: 0;
  background: none;
  color: var(--tinta-fraca);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.visita-remover:hover { color: var(--erro); }

/* O formulario e longo; fica fechado ate alguem ter o que registrar. */
.visita-nova > summary {
  display: inline-block;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  padding: 7px 13px;
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  list-style: none;
}

.visita-nova > summary::-webkit-details-marker { display: none; }
.visita-nova > summary::marker { content: ''; }
.visita-nova > summary:hover { background: var(--fundo); }
.visita-nova > summary:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.visita-nova[open] > summary { margin-bottom: 14px; }

.campo-porcento { display: flex; align-items: center; gap: 6px; }
.campo-porcento input { width: 84px; }
.campo-porcento span { color: var(--tinta-fraca); }

/* Lista do que precisa resolver, dentro do cartao da visita. */
.resolver {
  margin-top: 9px;
  padding: 9px 12px 4px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 6px;
}

.resolver-titulo {
  margin: 0 0 4px;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tinta-media);
}

.resolver .checklist { margin-bottom: 6px; }
.resolver .acoes { margin: 0 0 8px; }
.resolver .lembrete-novo { margin-bottom: 6px; }

/* Complemento do rotulo, para a instrucao nao virar mais uma linha de texto. */
.rotulo-apoio {
  font-weight: 400;
  font-size: 12.5px;
  color: var(--tinta-fraca);
}

/* ---------- Paginação ---------- */

.paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
}

.paginacao-conta {
  font-size: 13px;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}

/* A ponta da lista mantem o botao no lugar, apagado, para nada saltar. */
.botao-inerte {
  opacity: .38;
  pointer-events: none;
}

/* ---------- Quadro por etapa (cronograma) ---------- */

.quadro {
  display: grid;
  /* As seis etapas lado a lado; auto-fit quebraria a ultima para outra linha
     e a coluna perderia o sentido de trilha. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1000px) {
  .quadro { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .quadro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

.quadro-coluna { min-width: 0; }

/* A cor da etapa e a mesma da etiqueta, do calendario e do grafico. */
.quadro-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 0;
  padding: 6px 9px;
  border-radius: 6px;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.quadro-conta {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.quadro-verbo {
  margin: 5px 0 7px;
  font-size: 11.5px;
  color: var(--tinta-fraca);
}

.quadro-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quadro-lista a {
  display: block;
  padding: 7px 9px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  background: var(--papel);
}

.quadro-lista a:hover { border-color: var(--linha-forte); background: var(--fundo); }

.quadro-cliente {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.25;
}

.quadro-ambiente {
  display: block;
  font-size: 12px;
  color: var(--tinta-fraca);
}

.quadro-data {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}

/* Data ja combinada pesa mais que estimativa; atrasada grita. */
.quadro-firme { color: var(--tinta-media); font-weight: 700; }
.quadro-atrasado { color: var(--erro); font-weight: 700; }

.quadro-vazio {
  margin: 0;
  font-size: 12px;
  color: var(--tinta-fraca);
  font-style: italic;
}

/* ---------- Lista de quando cada projeto instala ---------- */

/* Cada grupo e um painel proprio, com fundo que diz sozinho o quanto
   aquilo urge: vermelho passou, ambar e esta semana, bege e o resto. */
.lote {
  margin-bottom: 12px;
  padding: 12px 14px 4px;
  border-radius: 10px;
  border: 1px solid var(--linha);
  background: var(--fundo);
}

.lote:last-of-type { margin-bottom: 4px; }

.lote-atrasado { background: var(--erro-bg); border-color: #f3c6c3; }
.lote-quente { background: var(--atencao-bg); border-color: #ead9b4; }
.lote-neutro { background: var(--fundo); }
.lote-claro  { background: var(--papel); }
.lote-pronto   { background: var(--fundo); padding-bottom: 12px; }
.lote-pronto[open] { padding-bottom: 4px; }

.lote-titulo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  font-size: 14.5px;
  font-weight: 700;
}

.lote-conta {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 1px 8px;
}

.lote-nota { font-size: 12.5px; font-weight: 400; color: var(--tinta-fraca); }

/* O grupo dos atrasados e o unico que grita. */
.lote-atrasado .lote-titulo { color: var(--erro); }
.lote-atrasado .lote-conta { background: var(--erro-bg); border-color: #f3c6c3; color: var(--erro); }

.lote-pronto > summary { cursor: pointer; list-style: none; }
.lote-pronto > summary::-webkit-details-marker { display: none; }
.lote-pronto > summary::marker { content: ''; }
.lote-pronto > summary::before { content: '▸ '; color: var(--tinta-fraca); font-weight: 400; }
.lote-pronto[open] > summary::before { content: '▾ '; }

.filas { list-style: none; margin: 0; padding: 0; }

/* Uma linha por projeto: data, quem, etapa e quanto falta. */
.fila {
  display: grid;
  grid-template-columns: 128px 1fr 116px 132px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--linha);
}

.fila:last-child { border-bottom: 0; }

/* Dentro de um painel colorido, a linha divisoria e o realce precisam ser
   translucidos: cor fixa brigaria com o fundo do grupo. */
.fila { border-bottom-color: rgba(28, 26, 22, .09); }
.fila:hover { background: rgba(28, 26, 22, .035); }

.fila-data strong {
  display: block;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.fila-data small,
.fila-nome small {
  display: block;
  font-size: 11.5px;
  color: var(--tinta-fraca);
}

.fila-sem { font-weight: 500; color: var(--tinta-fraca); }

.fila-nome a {
  font-weight: 600;
  font-size: 14.5px;
  color: inherit;
  text-decoration: none;
}

.fila-nome a:hover { text-decoration: underline; }

.fila .etiqueta { justify-self: start; }

.fila-falta {
  font-size: 13px;
  color: var(--tinta-fraca);
  text-align: right;
}

.fila-atrasada .fila-data strong,
.fila-atrasada .fila-falta { color: var(--erro); font-weight: 700; }

@media (max-width: 720px) {
  .fila {
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    padding: 10px 6px;
  }
  .fila-data { grid-column: 1; }
  .fila .etiqueta { grid-column: 2; grid-row: 1; justify-self: end; }
  .fila-nome { grid-column: 1 / -1; }
  .fila-falta { grid-column: 1 / -1; text-align: left; }
}

/* ---------- Tela larga ---------- */

/* Texto corrido nao acompanha a largura do painel: linha comprida demais
   cansa de ler. Estes param antes. */
.sub,
.dica,
.cabecalho p.sub,
.projeto-passo,
.agenda-nota { max-width: 78ch; }

@media (min-width: 1180px) {
  /* Na ficha, a coluna principal fica maior que o painel lateral em vez de
     as duas dividirem a tela ao meio. */
  .colunas { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }

  /* Com mais espaco, os cartoes de projeto cabem tres por linha sem esticar. */
  .agenda-lista { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

  /* A tabela de prazos nao ganha nada em esticar: o campo de dias ficaria
     longe demais do nome da etapa. */
  .prazos-ficha { max-width: 640px; }

  /* A lista de instalacao ganha respiro nas pontas, nao no meio. */
  .fila { grid-template-columns: 150px 1fr 130px 150px; padding: 9px 14px; }
}

/* ---------- Zona de perigo (configurações) ---------- */

/* Fica fechada: ninguem abre Configuracoes para apagar tudo por acaso. */
.perigo {
  border-color: #f0c2be;
  background: #fffaf9;
}

.perigo-abrir {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--erro);
}

.perigo-abrir::-webkit-details-marker { display: none; }
.perigo-abrir::marker { content: ''; }
.perigo-abrir::before { content: '▸ '; }
.perigo[open] > .perigo-abrir::before { content: '▾ '; }
.perigo[open] > .perigo-abrir {
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid #f0c2be;
}

.perigo-nota {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta-fraca);
}

/* Escolha entre dois caminhos: o texto explica o que cada um leva embora. */
.escolhas {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.escolha {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--papel);
  cursor: pointer;
}

.escolha:hover { border-color: var(--linha-forte); }
.escolha input { margin-top: 3px; flex: 0 0 auto; }
.escolha strong { display: block; font-size: 14.5px; }

.escolha small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--tinta-fraca);
  line-height: 1.45;
}

.escolha:has(input:checked) {
  border-color: var(--erro);
  background: var(--erro-bg);
}

/* ---------- Instalação ---------- */

/* A instalacao nao cabe na largura da tela de login: sao listas e formulario. */
.pagina-instalacao { max-width: 720px; }

.passos {
  list-style: none;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 0;
}

.passo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--papel);
  font-size: 13px;
  color: var(--tinta-fraca);
}

.passo-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--fundo);
  border: 1px solid var(--linha-forte);
  font-size: 12px;
  font-weight: 700;
}

.passo-agora {
  border-color: var(--preto);
  color: var(--tinta);
  font-weight: 600;
}

.passo-agora .passo-numero { background: var(--preto); border-color: var(--preto); color: #fff; }

.passo-feito { color: var(--ok); border-color: #b8e0cb; }
.passo-feito .passo-numero { background: var(--ok-bg); border-color: #b8e0cb; color: var(--ok); }

/* Lista de conferencia do servidor: verde passa, vermelho trava, amarelo avisa. */
.requisitos { list-style: none; margin: 0; padding: 0; }

.requisito {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linha);
}

.requisito:last-child { border-bottom: 0; }

.requisito-marca {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.requisito-ok .requisito-marca    { background: var(--ok-bg);      color: var(--ok); }
.requisito-erro .requisito-marca  { background: var(--erro-bg);    color: var(--erro); }
.requisito-aviso .requisito-marca { background: var(--atencao-bg); color: var(--atencao); }

.requisito-texto strong { display: block; font-size: 14.5px; }

.requisito-texto small {
  display: block;
  font-size: 12.5px;
  color: var(--tinta-fraca);
  margin-top: 1px;
}

.cartao-titulo-meio { margin-top: 24px; }

.proximos { margin: 4px 0 0; padding-left: 18px; font-size: 14.5px; }
.proximos li { margin-bottom: 7px; }

/* ---------- Anotação: editar e apagar ---------- */

.anotacao-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.anotacao-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* O "Editar" so vira botao ao passar o mouse: em repouso e discreto, para o
   texto da anotacao continuar sendo o que se le primeiro. */
.anotacao-editar { margin-top: 4px; }

.anotacao-editar > summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--tinta-fraca);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
}

.anotacao-editar > summary::-webkit-details-marker { display: none; }
.anotacao-editar > summary::marker { content: ''; }
.anotacao-editar > summary:hover { color: var(--tinta); border-color: var(--linha); }
.anotacao-editar > summary:focus-visible { outline: 2px solid var(--ouro); outline-offset: 1px; }
.anotacao-editar[open] > summary { color: var(--tinta); border-color: var(--linha-forte); }

.anotacao-editar form {
  max-width: 760px;
  margin: 8px 0 4px;
  padding: 11px 12px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--fundo);
  display: grid;
  gap: 10px;
}

.anotacao-editar .acoes { margin: 0; }

/* O titulo da anotacao e curto: nao precisa da largura toda do cartao. */
.anotacao-editar input[type="text"] { max-width: 380px; }

/* ---------- Tabela de projetos no celular ----------
   Tabela de seis colunas nao cabe em 360px: cada linha vira um cartao, com
   o nome do campo na frente do valor onde ele nao e obvio. */

@media (max-width: 760px) {
  .tabela-cartoes,
  .tabela-cartoes tbody,
  .tabela-cartoes tr,
  .tabela-cartoes td { display: block; width: 100%; }

  .tabela-cartoes thead { display: none; }

  .tabela-cartoes tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 6px 12px;
    padding: 14px 12px;
    border-bottom: 1px solid var(--linha);
  }

  .tabela-cartoes tr:last-child { border-bottom: 0; }

  .tabela-cartoes td {
    padding: 0;
    border: 0;
    width: auto;
    font-size: 14px;
  }

  /* Nome e etapa dividem a primeira linha; o resto ocupa a largura toda. */
  .celula-projeto  { grid-column: 1; grid-row: 1; }
  .celula-etapa    { grid-column: 2; grid-row: 1; justify-self: end; }
  .celula-obra     { grid-column: 1 / -1; grid-row: 2; }
  .celula-instala  { grid-column: 1; grid-row: 3; align-self: center; }
  .celula-acao     { grid-column: 2; grid-row: 3; justify-self: end; }
  .celula-cadastro { grid-column: 1 / -1; grid-row: 4; }

  .tabela-cartoes .principal { font-size: 16px; }

  /* Sem o cabecalho da tabela, o valor sozinho nao diz o que e. */
  .tabela-cartoes td[data-rotulo]::before {
    content: attr(data-rotulo) ': ';
    color: var(--tinta-fraca);
    font-size: 12px;
  }

  .celula-cadastro { font-size: 12.5px; }
  .celula-cadastro .secundario { display: inline; }
  .celula-cadastro .secundario + .secundario::before { content: ' · '; }

  /* O telefone quebrava em quatro linhas dentro da coluna estreita. */
  .tabela-cartoes .secundario { white-space: normal; }
  .celula-projeto .secundario { display: block; }
}