/*
 * Diário de obras.
 *
 * A folha do dia é desenhada como documento desde a tela: as mesmas seções,
 * na mesma ordem, com a mesma hierarquia que sai na impressão. Assim o que a
 * pessoa vê preenchendo é o que ela recebe em PDF — sem a surpresa de imprimir
 * e sair outra coisa.
 */

.barra-filtros {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.diario-navegacao { display: flex; align-items: center; gap: 4px; }
.diario-navegacao input[type='date'] { min-width: 150px; }

.diario-folha { max-width: 900px; }

.diario-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--linha-forte);
  margin-bottom: 6px;
}
.diario-topo h2 { margin: 0 0 3px; font-size: var(--t-xl); }
.diario-acoes-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* "Salvo" em cinza é confirmação; em vermelho é o que ainda não foi. */
.diario-salvo { color: var(--texto-3); }
.diario-salvo[data-erro='1'] { color: var(--tijolo); font-weight: 500; }

.diario-secao { padding: 16px 0; border-bottom: 1px solid var(--linha); }
.diario-secao:last-child { border-bottom: none; }
.diario-secao h3 {
  margin: 0 0 10px;
  font-family: var(--fonte-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--texto-2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.diario-ajuda { margin: -4px 0 10px; font-size: var(--t-sm); color: var(--texto-3); line-height: 1.45; }

.diario-secao textarea {
  width: 100%;
  resize: vertical;
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--cartao);
  color: inherit;
}

/* ── Clima ───────────────────────────────────────────────────────────────── */

.diario-clima { display: flex; gap: 12px; flex-wrap: wrap; }
.diario-campo { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.diario-campo > span { font-size: var(--t-sm); color: var(--texto-3); }

.diario-clima-leitura {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 0 4px;
  font-size: var(--t-md);
  color: var(--texto-2);
}

.diario-condicao {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--verde-suave);
  color: var(--verde-escuro);
  font-weight: 500;
}
.diario-condicao[data-condicao='parcial'] { background: var(--ambar-suave); color: var(--texto); }
.diario-condicao[data-condicao='impraticavel'] { background: var(--tijolo-suave); color: var(--tijolo); }

/* ── Linhas editáveis ────────────────────────────────────────────────────── */

.diario-linhas { display: flex; flex-direction: column; gap: 6px; margin-bottom: 9px; }

.diario-linha {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.diario-linha input[type='text'],
.diario-linha input[type='number'],
.diario-linha select {
  font: inherit;
  padding: 7px 9px;
  border: 1px solid var(--linha);
  border-radius: var(--r-sm);
  background: var(--cartao);
  color: inherit;
  min-width: 0;
}
.diario-cresce { flex: 1; min-width: 180px; }
.diario-qtd { width: 68px; text-align: center; }
/* Nome de pessoa: cresce menos que a descrição, porque nome é curto e roubar
   a largura do "o que aconteceu" pioraria o campo que mais se escreve. */
.diario-nome { flex: 0 1 190px; min-width: 130px; }
/* Quantidade travada em 1 porque a linha tem nome. Não é campo desabilitado —
   continua legível e copiável —, só não aceita outro número. */
.diario-qtd[readonly] { background: var(--cinza-suave); color: var(--texto-3); cursor: not-allowed; }

.diario-check {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--t-xs);
  color: var(--texto-3);
  white-space: nowrap;
}

/* ── Leitura ─────────────────────────────────────────────────────────────── */

.diario-efetivo-leitura { display: flex; gap: 7px; flex-wrap: wrap; }

.diario-tag {
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--cinza-suave);
  font-size: var(--t-sm);
}
.diario-tag strong { font-variant-numeric: tabular-nums; }

.diario-lista-leitura { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.diario-lista-leitura li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 11px;
  border-left: 3px solid var(--linha-forte);
  background: var(--cartao-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.diario-lista-leitura li[data-tom='atencao'] { border-left-color: var(--ambar); background: var(--ambar-suave); }

.diario-item-titulo { font-size: var(--t-md); }
.diario-item-sub { font-size: var(--t-sm); color: var(--texto-3); }
.diario-item-marca {
  font-size: var(--t-xs);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--verde-suave);
  color: var(--verde-escuro);
}

.diario-observacao { margin: 0; font-size: var(--t-md); line-height: 1.55; white-space: pre-wrap; }

.diario-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.diario-foto {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--linha);
}
.diario-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── O que o ERP já sabe ─────────────────────────────────────────────────── */

.diario-contexto {
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: var(--r-md);
  background: var(--navy-3);
  border: 1px solid var(--navy-2);
  color: var(--texto-2);
}
.diario-contexto h3 {
  margin: 0 0 7px;
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--navy);
}
.diario-contexto p { margin: 0 0 5px; font-size: var(--t-sm); line-height: 1.5; }
.diario-contexto p:last-child { margin-bottom: 0; }

.diario-vazio { text-align: center; padding: 34px 20px; }
.diario-vazio h2 { margin: 0 0 6px; font-size: var(--t-lg); }
.diario-vazio p { margin: 0 auto 16px; max-width: 420px; line-height: 1.5; }

/* ── Fita dos últimos dias ───────────────────────────────────────────────── */

.diario-fita { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }

.diario-fita-item {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 62px;
  padding: 8px 6px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--cartao-2);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: var(--transicao);
}
.diario-fita-item:hover { border-color: var(--linha-forte); }
.diario-fita-item[data-atual='1'] { border-color: var(--navy); background: var(--navy-3); }
.diario-fita-item[data-status='rascunho'] { border-style: dashed; }

.fita-dia { font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.fita-clima { font-size: var(--t-base); line-height: 1; }
.fita-efetivo { font-size: var(--t-xs); color: var(--texto-3); font-variant-numeric: tabular-nums; }
.fita-marca { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ambar); }
.fita-marca[data-tom='verde'] { color: var(--verde-escuro); }
.fita-marca[data-tom='ambar'] { color: var(--ambar); }
.fita-marca[data-tom='tijolo'] { color: var(--tijolo); }

/* O motivo da recusa, em cima do formulário de quem vai corrigir. Tijolo
   porque é reprovação — e não âmbar, que nesta tela já quer dizer "esperando
   a administração". */
.diario-recusa {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--tijolo);
  background: var(--tijolo-suave);
}
.diario-recusa strong { display: block; font-size: var(--t-sm); color: var(--tijolo); }
.diario-recusa p { margin: 5px 0 0; font-size: var(--t-md); line-height: 1.55; color: var(--texto); }
.diario-recusa .nota { display: block; margin-top: 7px; font-size: var(--t-sm); color: var(--texto-3); }

.diario-buraco[data-tom='ambar'] { background: var(--ambar-suave); }
.diario-buraco {
  margin: 12px 0 0;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: var(--ambar-suave);
  font-size: var(--t-sm);
  line-height: 1.45;
}

/* ── Engenheiro responsável pela obra ───────────────────────────────────────
   O nome de quem assina fica no topo do dia, antes de qualquer campo: é a
   primeira pergunta de quem abre o diário — "esse dia é meu?". */

.diario-responsavel {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 2px;
  padding: 10px 13px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--cartao-2);
}
.diario-responsavel .corpo { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 1px; }
.diario-responsavel .rotulo {
  font-size: var(--t-xs);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--texto-3);
  font-weight: 600;
}
.diario-responsavel .nome { font-size: var(--t-base); font-weight: 600; }
.diario-responsavel .nota { font-size: var(--t-sm); color: var(--texto-2); }
/* Obra sem engenheiro vinculado se anuncia: é um buraco na cadeia de assinatura. */
.diario-responsavel[data-vazio] { border-style: dashed; border-color: var(--linha-forte); }
.diario-responsavel[data-vazio] .nome { color: var(--texto-3); font-weight: 500; }

/* A nota que substitui o botão de fechar para quem não responde pela obra. */
.diario-nota-topo { font-size: var(--t-sm); color: var(--texto-2); align-self: center; }

/* ── Complementos ──────────────────────────────────────────────────────────
 *
 * O acréscimo tem de parecer acréscimo. A barra à esquerda é o que faz a
 * diferença ser vista de longe: sem ela, um complemento com a mesma cara do
 * corpo do diário viraria, aos olhos de quem lê depois, texto assinado pelo
 * engenheiro — que é justamente o que não é.
 */
.diario-complementos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.diario-complemento {
  padding: 10px 12px;
  border-left: 3px solid var(--navy-4);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--cartao-2);
}

.diario-complemento-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.diario-complemento-autor { font-weight: 600; }

/* O botão de apagar empurra para a direita e só aparece no administrador. */
.diario-complemento-topo .btn { margin-left: auto; }

.diario-complemento-texto {
  margin: 0;
  white-space: pre-wrap;
  color: var(--texto-2);
}

/*
 * ── Impressão ─────────────────────────────────────────────────────────────
 *
 * "Salvar como PDF" na caixa de impressão do navegador é o exportador — sem
 * biblioteca, sem servidor gerando arquivo, e com a vantagem de sair sempre
 * igual ao que a pessoa acabou de conferir na tela. O que a folha precisa é
 * apenas ficar sozinha no papel.
 */
@media print {
  .barra-lateral,
  .topo,
  .avisos,
  .painel-notificacoes,
  .cabecalho-pagina,
  .barra-filtros,
  .diario-historico,
  .diario-acoes-topo,
  .diario-contexto,
  .bloco-anexos { display: none !important; }

  body { background: var(--cartao); }

  .limite { max-width: none; padding: 0; }

  .diario-folha {
    max-width: none;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .diario-secao { break-inside: avoid; }

  /* O responsável técnico sai impresso — é ele que dá valor à folha. Os
     botões de vincular, não: no papel não se clica em nada. */
  .diario-responsavel { border: none; padding: 8px 0; background: none; break-inside: avoid; }
  .diario-responsavel .btn { display: none !important; }

  /* O complemento é parte do documento e vai para o papel — é ele que explica
     por que existe informação datada depois da assinatura. O botão de apagar
     fica na tela. */
  .diario-complemento { break-inside: avoid; background: none; }
  .diario-complemento-topo .btn { display: none !important; }

  /* A galeria vira contato de fotos, três por linha, e não some do documento. */
  .diario-galeria { grid-template-columns: repeat(3, 1fr); }
  .diario-foto { break-inside: avoid; }

  a { text-decoration: none; color: inherit; }
}