/* ==========================================================================
   estilo.css — painel Zela
   Local no servidor: /var/www/html/easyface-zela/web/assets/estilo.css

   Cores da marca:
     verde escuro  #0E5C54   ouro  #E0922E
     creme         #F4F1EA   menu  #0B1F1C
   ========================================================================== */

:root {
  --verde:        #0E5C54;
  --verde-claro:  #12776C;
  --verde-fraco:  #E6F0EE;
  --ouro:         #E0922E;
  --creme:        #F4F1EA;
  --menu:         #0B1F1C;
  --menu-hover:   #143430;

  --texto:        #1C2523;
  --texto-fraco:  #6B7A77;
  --linha:        #DDD9D0;
  --fundo:        #F7F6F2;
  --branco:       #FFFFFF;

  --ok:           #1B7F4B;
  --ok-fundo:     #E4F3EA;
  --espera:       #B37A12;
  --espera-fundo: #FBF0DA;
  --erro:         #B3281E;
  --erro-fundo:   #FBE6E4;
  --info:         #1F5C9E;
  --info-fundo:   #E5EFF9;
  --alerta:       #8A5A00;
  --alerta-fundo: #FAEFD8;

  --raio:   10px;
  --lateral-largura: 232px;
  --sombra: 0 1px 2px rgba(16,32,30,.06), 0 4px 12px rgba(16,32,30,.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--verde); }

/* ============================ FAIXA DE SUPORTE ============================
   Aparece no topo de toda tela enquanto o dono da plataforma esta dentro da
   conta de um cliente. Vermelha e larga por escolha: o dia em que ela passar
   despercebida e o dia em que alguem edita a rotina do cliente achando que
   era a propria. */

.faixa-suporte {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 24px;
  background: var(--erro); color: #fff;
  font-size: 14px; line-height: 1.4;
}
.faixa-suporte strong { font-weight: 700; }
.faixa-suporte form { margin: 0 0 0 auto; }
.faixa-suporte .botao {
  background: rgba(255,255,255,.16); color: #fff;
  border: 1px solid rgba(255,255,255,.55);
}
.faixa-suporte .botao:hover { background: rgba(255,255,255,.28); }

@media print { .faixa-suporte { display: none; } }

/* ============================ MENU LATERAL ============================ */

.alternar-menu { display: none; }

.lateral {
  position: fixed; inset: 0 auto 0 0;
  width: var(--lateral-largura);
  background: var(--menu);
  color: #CFE0DC;
  display: flex; flex-direction: column;
  z-index: 30;
}

.marca {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.marca-logo { width: 34px; height: 34px; object-fit: contain; border-radius: 6px; background: #fff; }
.marca strong { display: block; color: #fff; font-size: 17px; letter-spacing: .3px; }
.marca small  { display: block; color: #8FA9A4; font-size: 11px; margin-top: 1px; }

.lateral nav { flex: 1; padding: 10px 8px; overflow-y: auto; }

.lateral nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 2px;
  color: #CFE0DC; text-decoration: none;
  border-radius: 8px; font-size: 14px;
}
.lateral nav a:hover { background: var(--menu-hover); color: #fff; }
.lateral nav a.atual { background: var(--verde); color: #fff; font-weight: 600; }
.lateral nav .icone { width: 18px; text-align: center; opacity: .85; }

.rodape-lateral {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.quem-sou strong { display: block; color: #fff; font-size: 13px; }
.quem-sou small  { display: block; color: #8FA9A4; font-size: 11px; }
.sair { color: var(--ouro); font-size: 12px; text-decoration: none; white-space: nowrap; }
.sair:hover { text-decoration: underline; }

.cortina { display: none; }

/* ============================== CONTEUDO ============================== */

.conteudo { margin-left: var(--lateral-largura); min-height: 100vh;
            display: flex; flex-direction: column; }

.topo {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 24px;
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 20;
}
.topo h1 { flex: 1; margin: 0; font-size: 19px; font-weight: 600; }
.acoes-topo { display: flex; gap: 8px; flex-wrap: wrap; }

.botao-menu { display: none; font-size: 22px; cursor: pointer; line-height: 1; }

.area { flex: 1; padding: 24px; max-width: 1400px; width: 100%; }

.rodape { padding: 16px 24px; color: var(--texto-fraco); font-size: 12px; }

/* =============================== RECADOS ============================== */

.recado {
  margin: 16px 24px -8px;
  padding: 12px 16px;
  border-radius: var(--raio);
  border-left: 4px solid;
  font-size: 14px;
}
.recado-ok    { background: var(--ok-fundo);     border-color: var(--ok);     color: #145F38; }
.recado-erro  { background: var(--erro-fundo);   border-color: var(--erro);   color: #8C1F17; }
.recado-aviso { background: var(--espera-fundo); border-color: var(--espera); color: #7A520C; }
.recado-info  { background: var(--info-fundo);   border-color: var(--info);   color: #17456F; }

/* ============================== CARTOES =============================== */

.cartao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  margin-bottom: 20px;
  overflow: hidden;
}
.cartao > h2 {
  margin: 0; padding: 14px 18px;
  font-size: 15px; font-weight: 600;
  border-bottom: 1px solid var(--linha);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.cartao > h2 small { font-weight: 400; color: var(--texto-fraco); font-size: 12px; }
.cartao .corpo { padding: 18px; }

.grade { display: grid; gap: 16px; margin-bottom: 20px; }
.grade-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grade-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.cartao-numero {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--verde);
  border-radius: var(--raio);
  padding: 14px 16px;
  box-shadow: var(--sombra);
}
.cartao-numero .rotulo { display: block; font-size: 12px; color: var(--texto-fraco);
                         text-transform: uppercase; letter-spacing: .4px; }
.cartao-numero .valor  { display: block; font-size: 28px; line-height: 1.2; margin-top: 4px; }
.cartao-numero small   { display: block; color: var(--texto-fraco); font-size: 12px; margin-top: 2px; }

.cor-ok     { border-left-color: var(--ok); }
.cor-erro   { border-left-color: var(--erro); }
.cor-espera { border-left-color: var(--espera); }
.cor-info   { border-left-color: var(--info); }
.cor-alerta { border-left-color: var(--alerta); }

/* =============================== TABELAS ============================== */

.rolagem { overflow-x: auto; }

table.lista { width: 100%; border-collapse: collapse; font-size: 14px; }
table.lista th {
  text-align: left; padding: 10px 14px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-fraco); background: #FAF9F6;
  border-bottom: 1px solid var(--linha); white-space: nowrap;
}
table.lista td { padding: 11px 14px; border-bottom: 1px solid #EFEDE7; vertical-align: middle; }
table.lista tbody tr:hover { background: #FBFAF7; }
table.lista tbody tr:last-child td { border-bottom: none; }
table.lista .num { text-align: right; font-variant-numeric: tabular-nums; }
table.lista .acoes { text-align: right; white-space: nowrap; }

/* ================================ SELOS =============================== */

.selo {
  display: inline-block; padding: 3px 9px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.selo-ok     { background: var(--ok-fundo);     color: var(--ok); }
.selo-erro   { background: var(--erro-fundo);   color: var(--erro); }
.selo-espera { background: var(--espera-fundo); color: var(--espera); }
.selo-info   { background: var(--info-fundo);   color: var(--info); }
.selo-alerta { background: var(--alerta-fundo); color: var(--alerta); }
.selo-neutro { background: #EEECE6;             color: var(--texto-fraco); }

/* =============================== BARRAS =============================== */

.barra {
  position: relative; height: 20px; min-width: 110px;
  background: #EEECE6; border-radius: 99px; overflow: hidden;
}
.barra-cheia { height: 100%; border-radius: 99px; }
.barra-cheia.cor-ok     { background: var(--ok); }
.barra-cheia.cor-espera { background: var(--espera); }
.barra-cheia.cor-erro   { background: var(--erro); }
.barra span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--texto);
}

/* =============================== BOTOES =============================== */

.botao, button.botao, input[type=submit].botao {
  display: inline-block; padding: 8px 16px;
  background: var(--verde); color: #fff;
  border: 1px solid var(--verde); border-radius: 8px;
  font-size: 14px; font-weight: 500; text-decoration: none;
  cursor: pointer; line-height: 1.4;
}
.botao:hover { background: var(--verde-claro); border-color: var(--verde-claro); }
/* AS VARIANTES REPETEM O button/input DA REGRA DE CIMA, e isso nao e' enfeite.

   A regra base e' ".botao, button.botao, input[type=submit].botao". Para um
   <button class="botao botao-perigo">, "button.botao" pesa 0-1-1 e
   ".botao-perigo" pesava 0-1-0: o verde do fundo ganhava do vermelho, e TODO
   botao de acao destrutiva do painel — Desativar, Remover, Suspender,
   Recusar, Apagar — saia verde, com a mesma cara do botao principal. Em <a>
   funcionava, porque ali as duas regras empatam e vence a de baixo. Era por
   isso que a mesma classe dava dois resultados na mesma linha da tabela. */
.botao-vazado, button.botao-vazado, input[type=submit].botao-vazado {
  background: transparent; color: var(--verde);
}
.botao-vazado:hover, button.botao-vazado:hover {
  background: var(--verde-fraco); color: var(--verde);
}
.botao-perigo, button.botao-perigo, input[type=submit].botao-perigo {
  background: var(--erro); color: #fff; border-color: var(--erro);
}
.botao-perigo:hover, button.botao-perigo:hover {
  background: #97211A; border-color: #97211A;
}

/* Vazado + perigo: contorno vermelho, sem preencher. E' o "Apagar" de
   Cargos — acao rara, que nao precisa de peso de bloco solido. */
.botao-vazado.botao-perigo, button.botao-vazado.botao-perigo {
  background: transparent; color: var(--erro); border-color: var(--erro);
}
.botao-vazado.botao-perigo:hover, button.botao-vazado.botao-perigo:hover {
  background: var(--erro-fundo); color: var(--erro);
}

/* Dois botoes lado a lado numa celula de tabela nao podem ficar colados.
   O seletor e' "irmao depois de irmao" porque a acao destrutiva vem dentro de
   um <form> (precisa do CSRF), e o primeiro elemento da celula nao pode
   ganhar margem — senao a coluna inteira desalinha da vizinha. */
td.acoes > * + * { margin-left: 6px; }
td.acoes form    { display: inline; }
.botao-pequeno { padding: 5px 11px; font-size: 12.5px; }
.botao[disabled], .botao.desligado { opacity: .5; pointer-events: none; }

/* ============================= FORMULARIOS ============================ */

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

label.campo { display: block; font-size: 13px; font-weight: 500; }
label.campo > span { display: block; margin-bottom: 5px; color: var(--texto-fraco); }
label.campo .dica { font-weight: 400; font-size: 11.5px; color: var(--texto-fraco); margin-top: 4px; display: block; }

/* A lista por type deixava de fora o <input> SEM type — que e' text por
   padrao no HTML e sai com a largura de fabrica do navegador, uns 180px.
   Numa .linha-campos isso vira um campo curtinho ao lado de um campo inteiro,
   e a tela parece torta sem ninguem achar o motivo. O :not() cobre o que
   realmente nao deve esticar: caixa de marcar, radio e arquivo. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]):not([type=color]),
select, textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--linha); border-radius: 8px;
  font: inherit; font-size: 14px; background: var(--branco); color: var(--texto);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(14,92,84,.12);
}
textarea { min-height: 88px; resize: vertical; }

.filtros {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  padding: 14px 18px; background: var(--branco);
  border: 1px solid var(--linha); border-radius: var(--raio);
  margin-bottom: 18px;
}
.filtros label.campo { min-width: 160px; }

.marcavel { display: flex; align-items: center; gap: 8px; font-size: 14px; }

/* ==================== LISTA PRONTA (ambientes) =======================
   Uma linha por ambiente: marcar, escolher o tipo, escrever o andar. Em grade
   e nao em tabela porque no celular as tres partes precisam empilhar, e
   tabela nao empilha. */
.lista-pronta {
  border: 1px solid var(--linha); border-radius: 10px;
  padding: 6px 14px 14px; margin-bottom: 4px;
}
.lista-pronta .titulo-grupo {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-fraco); margin: 16px 0 6px;
  border-bottom: 1px solid var(--linha); padding-bottom: 5px;
}
.lista-pronta .titulo-grupo:first-child { margin-top: 8px; }

.lista-pronta .linha-pronta {
  display: grid; align-items: center; gap: 10px; padding: 4px 0;
  grid-template-columns: minmax(200px, 1fr) 150px 110px;
}
.lista-pronta .linha-pronta .marcavel { font-size: 14px; }
.lista-pronta .linha-pronta select,
.lista-pronta .linha-pronta input[type=text] {
  padding: 5px 9px; font-size: 13px; width: 100%;
}

/* O "por andar" fica na PRIMEIRA coluna, ao lado do nome — a grade continua
   com tres colunas, como sempre foi.

   Ja foi uma quarta coluna, e quebrou: sem este arquivo atualizado no
   servidor, a grade ficava com tres colunas, o quarto elemento caia para a
   linha de baixo e o campo "andar" virava uma caixa larga atravessada. Dentro
   da primeira coluna, o pior caso de CSS velho e' a caixinha aparecer inline
   — feio, nao quebrado. */
.lista-pronta .linha-pronta .nome-e-andar {
  display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap;
  min-width: 0;
}
.lista-pronta .linha-pronta .nome-e-andar > .marcavel:first-child {
  flex: 1 1 auto; min-width: 140px;
}

/* A caixinha nasce fora da tela e entra quando a faixa de andares e'
   preenchida (a classe vem do JS). Cinquenta e duas caixinhas a mais na
   abertura seriam ruido para uma decisao que a maioria dos predios nao toma;
   e esconder por CSS, e nao removendo do HTML, mantem a marcacao da pessoa
   caso ela apague os andares e preencha de novo. */
.lista-pronta .linha-pronta .por-andar { display: none; }
.lista-pronta.com-andares .linha-pronta .por-andar {
  display: flex; align-items: center; gap: 5px;
  flex: none; font-size: 12.5px;
  color: var(--texto-fraco); white-space: nowrap;
  padding: 2px 8px; border-radius: 20px; background: var(--fundo-suave, #F1F5F3);
}

.dica-andares {
  margin: 10px 0 16px; font-size: 12.5px; color: var(--texto-fraco);
  max-width: 78ch;
}

/* O contador do que sera criado. Verde enquanto cabe, vermelho quando passa
   do teto — e ai ele deixa de ser informacao e vira aviso. */
.conta-ambientes {
  margin: 10px 0 2px; padding: 9px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  background: var(--fundo-suave, #F1F5F3); color: var(--verde, #0E5C54);
  border-left: 3px solid var(--verde, #0E5C54);
}
.conta-ambientes.demais {
  background: #FDF1EF; color: #A33A28; border-left-color: #C9472F;
}

@media (max-width: 720px) {
  .lista-pronta .linha-pronta { grid-template-columns: 1fr; gap: 6px; }
  .lista-pronta .linha-pronta select,
  .lista-pronta .linha-pronta input[type=text] { max-width: 220px; }
}

/* ===================== BANCO DE ITENS (rotinas) ======================
   As caixinhas de "marcar da lista pronta". Fechado por padrao: sao mais de
   cem opcoes, e abertas de uma vez elas empurrariam o botao de salvar para
   fora da tela — quem so quer digitar tres passos nem precisa ver a lista.
   As colunas se ajustam sozinhas, entao no celular vira uma coluna so. */
details.banco-de-itens {
  border: 1px solid var(--linha); border-radius: 10px;
  background: var(--branco); margin: -6px 0 4px;
}
details.banco-de-itens > summary {
  padding: 10px 14px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--verde);
  list-style: none;
}
details.banco-de-itens > summary::-webkit-details-marker { display: none; }
details.banco-de-itens > summary::before { content: '+ '; font-weight: 700; }
details.banco-de-itens[open] > summary::before { content: '− '; }
details.banco-de-itens[open] > summary { border-bottom: 1px solid var(--linha); }

details.banco-de-itens .grupos {
  display: grid; gap: 18px 24px; padding: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
details.banco-de-itens .grupo strong {
  display: block; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--texto-fraco); margin-bottom: 7px;
}
details.banco-de-itens .grupo .marcavel {
  font-size: 13.5px; padding: 3px 0; align-items: flex-start; line-height: 1.35;
}
details.banco-de-itens .grupo .marcavel input { margin-top: 2px; }
.marcavel input { width: auto; }

/* ============================== VAZIO/ERRO ============================ */

.vazio { padding: 44px 20px; text-align: center; color: var(--texto-fraco); }
.vazio p { margin: 0 0 14px; }

.tela-simples {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px; background: var(--creme);
}
.cartao-simples {
  background: var(--branco); border-radius: 14px; padding: 34px;
  max-width: 400px; width: 100%; box-shadow: var(--sombra); text-align: center;
}
.cartao-simples h1 { margin: 0 0 8px; font-size: 20px; }
.cartao-simples p  { color: var(--texto-fraco); margin: 0 0 20px; }
.erro-codigo { font-size: 46px; font-weight: 700; color: var(--ouro); line-height: 1; }

/* ================================ LOGIN =============================== */

.login-marca { text-align: center; margin-bottom: 22px; }
.login-marca img { max-width: 130px; max-height: 64px; object-fit: contain; }
.login-marca h1 { font-size: 26px; color: var(--verde); margin: 6px 0 2px; letter-spacing: .5px; }
.login-marca p  { color: var(--texto-fraco); font-size: 13px; margin: 0; }
.cartao-simples form { text-align: left; }
.cartao-simples .botao { width: 100%; text-align: center; margin-top: 6px; }
.link-discreto { display: block; text-align: center; margin-top: 16px;
                 font-size: 13px; color: var(--texto-fraco); }

/* ============================== ETIQUETAS ============================= */

.folha-etiquetas {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8mm;
}
.etiqueta {
  border: 1px dashed #B9B4A8; border-radius: 8px;
  padding: 6mm 4mm; text-align: center;
  page-break-inside: avoid; break-inside: avoid;
  background: #fff;
}
.etiqueta canvas, .etiqueta img { width: 38mm; height: 38mm; display: block; margin: 0 auto 3mm; }
.etiqueta .nome     { font-size: 13px; font-weight: 700; line-height: 1.25; }
.etiqueta .local    { font-size: 10.5px; color: #5A6462; margin-top: 1mm; }
.etiqueta .condo    { font-size: 10px; color: #5A6462; margin-top: 2mm;
                      border-top: 1px solid #E6E2D8; padding-top: 2mm; }
.etiqueta .empresa  { font-size: 9px; color: #8A918F; margin-top: 1mm; }

@media print {
  .lateral, .topo, .rodape, .filtros, .recado, .nao-imprime { display: none !important; }
  .conteudo { margin-left: 0; }
  .area { padding: 0; max-width: none; }
  body { background: #fff; }
  .folha-etiquetas { gap: 6mm; }
  @page { margin: 10mm; }
}

/* ============================== CELULAR =============================== */

@media (max-width: 900px) {
  .lateral {
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.3);
  }
  .alternar-menu:checked ~ .lateral { transform: translateX(0); }
  .alternar-menu:checked ~ .cortina {
    display: block; position: fixed; inset: 0;
    background: rgba(11,31,28,.5); z-index: 25;
  }
  .conteudo { margin-left: 0; }
  .botao-menu { display: block; }
  .area, .topo { padding: 16px; }
  .recado { margin: 12px 16px -4px; }
  .folha-etiquetas { grid-template-columns: repeat(2, 1fr); }
  table.lista { font-size: 13px; }
  table.lista th, table.lista td { padding: 9px 10px; }
}

@media (max-width: 520px) {
  .grade-4, .grade-3, .grade-2 { grid-template-columns: 1fr; }
  .folha-etiquetas { grid-template-columns: 1fr; }
}

/* ============================ PLAQUINHA 10x8 ==========================
   Medidas em mm de proposito: a plaquinha e' um objeto fisico, 100 x 80 mm.
   Em pixel ela sairia de tamanho diferente em cada impressora.

   A grade nao usa repeat(auto-fill): com largura fixa em mm, deixar o
   navegador decidir quantas cabem por linha e' o que faz a plaquinha sair
   esticada ou cortada ao mudar de impressora.

   O DESENHO
   A placa tem tres faixas horizontais e uma unica hierarquia:

     topo    condominio (pequeno, maiusculo, apagado) + marca da empresa
     meio    QR num cartao branco  +  NOME DO AMBIENTE (o heroi) + codigo
     rodape  o que fazer, com um icone de camera

   O nome do ambiente e' o maior elemento porque e' o que a pessoa confere
   antes de ler o QR — "estou no lugar certo?". O condominio vem em corpo
   pequeno: quem esta dentro do predio ja sabe em qual predio esta; aquele
   texto serve para conferir na hora de colar a placa e para nao trocar
   plaquinhas entre dois condominios na mesma impressao.

   A versao ESCURA e' o padrao. Contrasta melhor para o leitor do celular
   (cartao branco sobre fundo escuro delimita o codigo), e nao tem cara de
   aviso de obra no hall. A CLARA existe para garagem, lixeira e casa de
   maquinas: ali a placa e' consumivel e nao vale gastar tinta.
====================================================================== */

.folha-placas {
  display: flex; flex-wrap: wrap; gap: 6mm;
}

.placa {
  --cor-placa: #0E5C54;                 /* sobrescrita por style na propria placa */
  --cor-placa-fundo: #0A4340;

  width: 100mm; height: 80mm;
  box-sizing: border-box;
  border-radius: 2.5mm;
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: 6mm;
  page-break-inside: avoid; break-inside: avoid;

  /* O degrade usa a cor da empresa, nao um verde fixo: empresa com marca azul
     ou vinho recebe a placa na cor dela sem nenhuma outra troca. */
  background: linear-gradient(155deg, var(--cor-placa) 0%, var(--cor-placa-fundo) 62%, #0B1F1C 100%);
  font-family: Poppins, -apple-system, 'Segoe UI', sans-serif;

  /* Sem isto o navegador imprime o fundo em branco por economia de tinta — e
     a placa inteira, que e' texto claro, some. E' o erro classico de peca
     colorida: na tela fica lindo, no papel sai uma folha vazia. */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Versao clara: o mesmo desenho, so trocando quem e' fundo e quem e' tinta.
   Nenhuma regra de posicao e' repetida aqui de proposito — se o layout mudar,
   muda nos dois ao mesmo tempo. */
.placa.clara {
  background: #fff;
  box-shadow: inset 0 0 0 .3mm #D8D4CA;
}

/* Em pe: mesma placa girada. Nao e' rotacao por CSS de proposito — texto
   rotacionado sai serrilhado em muitas impressoras. E' outra proporcao. */
.folha-placas.em-pe .placa { width: 80mm; height: 100mm; }

/* ALTA — 14 x 8 cm em pe. E' o padrao de producao em metal: a grafica corta
   nesta medida sem sobra, e a proporcao estreita cabe em pilar de garagem,
   que e' onde a 10 x 8 deitada nao entra.

   Os 40 mm a mais que a 8 x 10 nao viraram ar: viraram QR maior (46 mm le de
   mais longe, que e' o que a garagem pede) e espaco para a linha do
   responsavel sem apertar o nome do ambiente. */
.folha-placas.alta .placa { width: 80mm; height: 140mm; padding: 7mm 6mm; }

/* ------------------------------------------------------------------ topo */
.placa-topo {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 4mm;
  min-height: 5mm;
}
.placa-condo-topo {
  font-size: 7.5pt; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #8FA8A2;
  line-height: 1.2; overflow-wrap: break-word; min-width: 0;
}
.placa.clara .placa-condo-topo { color: #8A918F; }

.placa-empresa {
  flex: none; font-size: 7pt; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(244,241,234,.82);
  white-space: nowrap;
}
.placa.clara .placa-empresa { color: var(--cor-placa); }
.placa-logo { flex: none; height: 6mm; width: auto; max-width: 24mm; object-fit: contain; }

/* ------------------------------------------------------------------ meio */
.placa-meio {
  flex: 1;
  display: flex; align-items: center; gap: 6mm;
  padding: 4mm 0;
  min-height: 0;                        /* sem isto o flex nao deixa o miolo encolher */
  overflow: hidden;                     /* nome gigante empurrava o rodape para fora */
}
.folha-placas.em-pe .placa-meio,
.folha-placas.alta  .placa-meio {
  flex-direction: column; text-align: center; gap: 4mm; justify-content: center;
}
.folha-placas.alta .placa-meio { gap: 6mm; padding: 6mm 0; }

/* O cartao branco do QR. A moldura nao e' enfeite: a "zona de silencio" clara
   ao redor do codigo e' o que o leitor usa para encontrar as bordas. Sobre
   fundo escuro ela precisa ser desenhada; sobre papel branco ela seria
   herdada, e por isso a placa clara fica so com um fio cinza. */
.placa-qr {
  flex: none;
  background: #fff;
  border-radius: 2mm;
  padding: 2.4mm;
  box-shadow: 0 1.5mm 4mm rgba(0,0,0,.35);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.placa.clara .placa-qr {
  box-shadow: 0 0 0 .3mm #E0DCD2;
}
.placa-qr canvas {
  display: block;
  width: 32mm; height: 32mm;
  /* O QR fica SEMPRE preto no branco. Tingir codigo de barras com a cor da
     marca e' bonito na tela e reprova no leitor: contraste baixo e leitura
     falha justamente na garagem, que e' onde a luz e' pior. */
  background: #fff;
}
/* 32mm e nao 38: os milimetros devolvidos ao texto sao o que faz
   "Estacionamento" caber numa linha em vez de partir ao meio.
   32mm le a um braco de distancia sem esforco. */
.folha-placas.em-pe .placa-qr canvas { width: 38mm; height: 38mm; }
.folha-placas.alta  .placa-qr canvas { width: 46mm; height: 46mm; }
.folha-placas.alta  .placa-qr { padding: 3mm; }

.placa-texto { min-width: 0; }

.placa-area {
  font-size: 19pt; font-weight: 700; line-height: 1.05; color: #F4F1EA;
  letter-spacing: -.01em;

  /* break-word, nao "anywhere": o anywhere partia "Estacionamento" ao meio
     ("Estacioname / nto"), que e' pior de ler de longe do que uma linha
     curta. Assim a palavra so quebra quando sozinha nao cabe. */
  overflow-wrap: break-word;
  hyphens: none;
}
.placa.clara .placa-area { color: #0B1F1C; }

/* O tamanho da fonte acompanha o tamanho do nome. Um "Hall" e um
   "Area de Lazer e Churrasqueira Coletiva" nao cabem na mesma medida, e
   encolher tudo para o pior caso deixaria a placa curta ilegivel de longe. */
.placa-area.medio  { font-size: 15pt; }
.placa-area.longo  { font-size: 12pt; line-height: 1.15; }

.folha-placas.em-pe .placa-area        { font-size: 17pt; }
.folha-placas.em-pe .placa-area.medio  { font-size: 13.5pt; }
.folha-placas.em-pe .placa-area.longo  { font-size: 11pt; }

/* Na alta o nome pode crescer: a largura e' a mesma da 8 x 10, mas sobra
   altura para a palavra quebrar em duas linhas sem empurrar o rodape. */
.folha-placas.alta .placa-area        { font-size: 20pt; }
.folha-placas.alta .placa-area.medio  { font-size: 16pt; }
.folha-placas.alta .placa-area.longo  { font-size: 12.5pt; line-height: 1.12; }

/* O codigo da placa em monoespacada, na cor de destaque. Monoespacada porque
   este texto e' conferido caractere a caractere quando alguem digita o codigo
   manualmente no app (o caminho alternativo quando a camera falha), e ali
   confundir 0 com O custa uma tentativa perdida. */
.placa-local {
  margin-top: 2.5mm;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 8pt; font-weight: 600; letter-spacing: .06em;
  color: #E0922E;
}
.placa.clara .placa-local { color: var(--cor-placa); }
.folha-placas.em-pe .placa-local { font-size: 7.5pt; }
.folha-placas.alta  .placa-local { font-size: 8.5pt; margin-top: 3mm; }

/* -------------------------------------------------------- quem responde
   A faixa de identificacao: nome do sindico e/ou da empresa, logo acima do
   fio do rodape. Sai da pagina inteira quando nenhuma das duas foi pedida —
   nao e' uma linha vazia reservada, e' markup que nem existe. */
.placa-quem {
  flex: none;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 3mm; padding-bottom: 2mm;
  font-size: 7pt; line-height: 1.3;
}
.placa-responsavel {
  color: rgba(244,241,234,.74);
  min-width: 0; overflow-wrap: break-word;
}
.placa-responsavel strong { font-weight: 600; color: #F4F1EA; }
.placa.clara .placa-responsavel        { color: #6B7471; }
.placa.clara .placa-responsavel strong { color: #0B1F1C; }

.folha-placas.em-pe .placa-quem,
.folha-placas.alta  .placa-quem { justify-content: center; gap: 2mm; flex-wrap: wrap; }
.folha-placas.alta  .placa-quem { font-size: 7.5pt; }

/* A logo do condominio no canto de cima. Mais alta que a da empresa porque
   na 14 x 8 ela e' o unico elemento daquele canto, e logo de predio costuma
   ser desenho com detalhe fino — 6 mm vira borrao impresso. */
.placa-logo-condo { height: 9mm; max-width: 30mm; }
.folha-placas.alta .placa-logo-condo { height: 11mm; max-width: 34mm; }

/* ---------------------------------------------------------------- rodape */
.placa-rodape {
  flex: none;
  border-top: .4mm solid rgba(244,241,234,.2);
  padding-top: 3mm;
  display: flex; align-items: center; justify-content: space-between; gap: 3mm;
}
.placa.clara .placa-rodape { border-top-color: #E6E2D8; }

.placa-diga {
  display: flex; align-items: center; gap: 2mm; min-width: 0;
  font-size: 7.5pt; font-weight: 500; line-height: 1.25; color: #C7D4D1;
}
.placa.clara .placa-diga { color: #5A6462; }

.placa-zela { flex: none; display: flex; align-items: center; }

.folha-placas.em-pe .placa-rodape { font-size: 7pt; }
.folha-placas.alta  .placa-rodape { font-size: 7.5pt; }

@media print {
  .folha-placas { gap: 0; }
  .placa { margin: 0 auto 4mm; }

  /* A alta sai DUAS POR FOLHA, lado a lado: 80 + 6 + 80 = 166 mm cabem nos
     190 mm uteis do A4. Em pe nao cabe segunda fileira (140 x 2 = 280 mm
     contra 277 mm uteis), entao cada folha leva exatamente duas.

     O break-inside: avoid de .placa e' o que impede o navegador de cortar a
     terceira ao meio e jogar o resto na folha seguinte — defeito que so'
     aparece no papel, depois de a grafica ja ter cortado errado. */
  .folha-placas.alta { gap: 6mm; align-content: flex-start; }
}

@media (max-width: 560px) {
  /* Na tela do celular a placa em mm estoura a largura; aqui ela so
     precisa ser conferida, nao impressa. */
  .placa { width: 100%; height: auto; min-height: 62mm; }
  .folha-placas.em-pe .placa,
  .folha-placas.alta  .placa { width: 100%; height: auto; }
}

/* A logo atual na ficha do condominio. O xadrez nao e' enfeite: ele mostra
   se o PNG tem fundo transparente de verdade. Sobre branco, logo com fundo
   branco e logo com alfa sao identicas — e a diferenca so' apareceria
   depois, impressa na placa escura. */
.logo-atual {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 8px; padding: 10px;
  border: 1px solid var(--linha); border-radius: 8px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #EDEAE3 25%, transparent 25%, transparent 75%, #EDEAE3 75%),
    linear-gradient(45deg, #EDEAE3 25%, transparent 25%, transparent 75%, #EDEAE3 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}
.logo-atual img { height: 46px; width: auto; max-width: 180px; object-fit: contain; }
.logo-atual .marcavel { background: #fff; padding: 2px 8px; border-radius: 6px; }


/* ============================== MARCA ================================= */

.marca-simbolo {
  width: 30px; height: 30px; flex: none;
}

/* Assinatura empilhada, desenhada em PHP (web/_marca.php). O nome vem como
   texto de proposito: na tela ele fica nitido em qualquer densidade, e a
   versao em curvas — que nao depende de fonte instalada — e' a dos arquivos
   de assets/marca/, para impressao. */
.marca-empilhada { text-align: center; margin: 0 auto 18px; }
.marca-empilhada svg { margin: 0 auto 10px; }
.marca-nome {
  font-size: 27px; font-weight: 700; letter-spacing: -.02em; line-height: 1;
}
.marca-apoio {
  font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  margin-top: 6px;
}

/* ======================= PLACA GRANDE — 2 POR FOLHA A4 ====================
   192 x 131 mm. A4 e' 210 x 297; tirando 9 mm de margem de cada lado sobram
   192 de largura, e a altura e' o que resta dividido por dois, menos o vao.

   Duas por folha nao e' economia de papel: e' o tamanho em que o nome do
   ambiente se le do outro lado do corredor, que e' o ponto da placa.
========================================================================= */

.folha-a4 { display: flex; flex-direction: column; gap: 7mm; }

.placa-a4 {
  --cor: #0E5C54;
  --cor-fundo: #0A4239;

  width: 192mm; height: 131mm;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  border: 0.4mm solid #DCDAD0; border-radius: 3mm;
  overflow: hidden; background: #fff;
  page-break-inside: avoid; break-inside: avoid;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, sans-serif;

  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ------------------------------------------------------------------ topo */
.pa-topo {
  flex: none;
  background: linear-gradient(135deg, var(--cor), var(--cor-fundo));
  padding: 4.5mm 7mm;
  display: flex; align-items: center; justify-content: space-between; gap: 5mm;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pa-condo {
  color: #F0EEE6; font-size: 3.4mm; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  overflow-wrap: break-word;
}
.pa-selo {
  flex: none;
  color: #F4B559; font-size: 2.7mm; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  border: 0.3mm solid rgba(255,255,255,.35); border-radius: 99px;
  padding: 1.4mm 3.5mm; white-space: nowrap;
}

/* ------------------------------------------------------------------ meio */
.pa-meio {
  flex: 1; min-height: 0;
  display: flex; align-items: center; gap: 8mm; padding: 7mm;
}
/* 58 mm: o maior QR que cabe sem espremer o texto. Sobra espaco vertical na
   placa de qualquer forma, e QR maior le de mais longe e com menos luz — que
   e' a condicao real de garagem e area de servico. */
.pa-qr {
  flex: none; width: 58mm; height: 58mm;
  box-sizing: border-box; padding: 3mm;
  border: 0.3mm solid #E4E2D8; border-radius: 2mm; background: #fff;
}
/* O QR e' SEMPRE preto no branco. Tingir com a cor da marca reprova no
   leitor, e a falha aparece na garagem — onde a luz e' pior. */
.pa-qr canvas { width: 100%; height: 100%; display: block; }

.pa-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4mm; }

.pa-area {
  font-size: 11mm; font-weight: 700; color: var(--cor);
  line-height: 1.02; letter-spacing: -.02em;
  overflow-wrap: break-word; hyphens: none;
}
.pa-area.medio { font-size: 9mm; }
.pa-area.longo { font-size: 7mm; line-height: 1.08; }

.pa-pastilhas { display: flex; flex-wrap: wrap; gap: 2mm; }
.pa-pastilha {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 3mm; letter-spacing: .08em; color: #4B5A56;
  background: #F0EEE6; border-radius: 99px; padding: 1.6mm 3.4mm;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

.pa-instrucao { display: flex; align-items: center; gap: 3mm; }
.pa-barra {
  flex: none; width: 1.2mm; height: 9mm;
  background: #DE8F2F; border-radius: 99px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pa-instrucao span:last-child {
  font-size: 3.6mm; font-weight: 500; color: #3C4A46; line-height: 1.35;
}

/* --------------------------------------------------------------- rodape */
.pa-rodape {
  flex: none;
  border-top: 0.3mm solid #E4E2D8;
  padding: 4mm 7mm;
  display: flex; align-items: center; justify-content: space-between; gap: 5mm;
}
.pa-aviso {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 2.6mm; letter-spacing: .1em; text-transform: uppercase; color: #8A9491;
}
.pa-marca { flex: none; display: flex; align-items: center; gap: 2.5mm; }
.pa-marca strong {
  font-size: 3.4mm; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cor);
}

/* ----------------------------------------------------- versao escura ---- */
.placa-a4.escura { background: var(--cor); border-color: var(--cor-fundo); }
.placa-a4.escura .pa-topo { background: none; padding-bottom: 0; }
.placa-a4.escura .pa-condo { color: #9FBDB6; }
.placa-a4.escura .pa-selo  { border-color: rgba(255,255,255,.3); }
.placa-a4.escura .pa-area  { color: #F0EEE6; }
.placa-a4.escura .pa-pastilha {
  background: none; border: 0.3mm solid rgba(255,255,255,.3); color: #CFE0DB;
}
.placa-a4.escura .pa-instrucao span:last-child { color: #E3EAE7; }
.placa-a4.escura .pa-rodape { border-top-color: rgba(255,255,255,.22); }
.placa-a4.escura .pa-aviso { color: #8FA8A2; }
.placa-a4.escura .pa-marca strong { color: #F0EEE6; }
.placa-a4.escura .pa-qr { border: none; }

@media print {
  @page { size: A4; margin: 9mm; }
  .folha-a4 { gap: 7mm; }
  .placa-a4 { border-color: #DCDAD0; }
}

@media (max-width: 820px) {
  /* Na tela pequena a placa em mm estoura a largura. Aqui ela so precisa
     ser conferida — impressao continua saindo nos 192 mm. */
  .placa-a4 { width: 100%; height: auto; }
  .pa-meio { flex-wrap: wrap; gap: 5mm; }
  .pa-qr { width: 42mm; height: 42mm; }
  .pa-area { font-size: 8mm; }
}


/* Faixa de fatura em aberto. Mesmo desenho da faixa de suporte, cor de aviso
   em vez de perigo: a empresa esta atrasada, nao banida, e o tom do aviso e'
   o que decide se o cliente liga irritado ou liga para resolver. */
.faixa-atraso {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 20px;
  background: #8A5A12; color: #FFF6E8;
  font-size: 14px; line-height: 1.4;
}
.faixa-atraso strong { color: #fff; }


/* ====================== IMPRESSAO DE RELATORIO ======================

   POR QUE ISTO E' FOLHA DE ESTILO E NAO BIBLIOTECA DE PDF

   "Imprimir > Salvar como PDF" ja produz um PDF de verdade, com texto
   selecionavel e busca funcionando. Uma biblioteca de PDF em PHP, num servidor
   sem Composer e so com FTP, seria vendor/ inteiro subido a mao para chegar no
   mesmo resultado — e dai em diante todo ajuste de layout viraria codigo em
   vez de CSS.

   O que faltava nao era o PDF. Era o acabamento.
=================================================================== */
@media print {

  /* ---- 1. A folha 2 nao pode ser orfa.
     O relatorio vai impresso para a reuniao de condominio, e folha solta sem
     identificacao nao serve de nada. Fixo no topo, o cabecalho repete em toda
     pagina — e' o unico jeito de identificar as folhas seguintes, porque
     numero de pagina por CSS o Chrome nao imprime. */
  /* CABECALHO REPETIDO: NAO DA, E O CAMINHO CERTO E' OUTRO

     Tentei duas vezes. position:fixed com padding no conteudo reserva espaco
     so na primeira pagina — da segunda em diante o cabecalho passa por cima do
     conteudo. Movido para a margem do papel com top negativo, ele sai da area
     imprimivel do Chrome e simplesmente nao aparece.

     Cabecalho repetido por CSS, em Chrome, so funciona com o conteudo inteiro
     dentro de uma <table> e o cabecalho num <thead> — o que significaria
     envolver o relatorio numa tabela de mentira so para imprimir.

     O Chrome ja resolve isso sozinho: a opcao "Cabecalhos e rodapes" da caixa
     de impressao escreve o TITULO DA PAGINA e o NUMERO DA PAGINA em toda folha.
     Numero de pagina, inclusive, que por CSS nao ha como obter.

     Entao a peca que faltava nao era CSS: era o <title> da pagina carregar o
     condominio e o mes. Isso esta em relatorio-mensal.php. */
  @page { size: A4; margin: 12mm 9mm; }

  .rodape-impressao {
    display: block !important;
    margin-top: 8mm; padding-top: 3mm;
    border-top: 1px solid #C9D0CE;
    font-size: 8pt; color: #8A918F;
  }

  /* ---- 2. Nada de titulo orfao.
     O cartao "Ocorrencias do periodo" quebrava com o titulo numa folha e a
     tabela na outra. */
  .cartao, .cartao-numero { break-inside: avoid; page-break-inside: avoid; }
  .cartao h2 { break-after: avoid; page-break-after: avoid; }

  /* Linha de tabela partida ao meio e' ilegivel; a tabela inteira nao cabe
     numa folha e nem deve caber, entao a quebra acontece ENTRE linhas. */
  .tabela tr  { break-inside: avoid; page-break-inside: avoid; }

  /* ---- 3. Cabecalho de tabela repete na continuacao.
     E' o que o navegador faz sozinho com thead — desde que ele esteja
     declarado como grupo de cabecalho. */
  .tabela thead { display: table-header-group; }
  .tabela tfoot { display: table-footer-group; }

  /* ---- 4. Tinta.
     Sombra nao existe no papel: sai como uma mancha cinza em volta de cada
     caixa. Borda arredondada some na impressao de qualquer forma. */
  .cartao, .cartao-numero {
    box-shadow: none !important;
    border-radius: 0 !important;
    border-color: #C9D0CE !important;
  }
  .cartao { margin-bottom: 6mm; }
  .cartao .corpo, .cartao h2 { padding: 8px 10px; }

  /* A tarja colorida na lateral do cartao de numero FICA: e' informacao
     (verde = em dia, vermelho = fora), nao enfeite. */

  /* ---- 5. Largura.
     Na tela o conteudo tem largura maxima para o texto nao virar linha longa
     demais. No papel A4 isso deixa um terco da folha vazio. */
  .conteudo { max-width: none !important; width: 100% !important;
              margin: 0 !important; padding: 0 !important; }

  /* A folga do topo vem AQUI, depois do reset de largura, e nao antes dele.
     Declarada antes, o "padding: 0 !important" do reset a anulava — e o
     cabecalho fixo passava por cima do primeiro cartao de cada pagina.
     Elemento com position:fixed nao reserva espaco no fluxo: quem reserva e'
     esta margem, e ela precisa sobreviver a tudo que vem depois. */
  /* Sem folga aqui: quem afasta o conteudo do cabecalho agora e' a margem do
     @page acima, e ela vale para todas as paginas. */
  .area { max-width: none !important; width: 100% !important;
          margin: 0 !important; padding: 0 !important; }
  .grade { gap: 4mm !important; }

  /* Fonte um pouco menor: cabe mais ambiente por folha, e relatorio de
     condominio com 40 ambientes vira tres folhas em vez de cinco. */
  body { font-size: 10pt; }
  .tabela { font-size: 9pt; }
  .tabela td, .tabela th { padding: 4px 6px; }
}

/* Fora da impressao, o rodape de papel nao existe. */
.rodape-impressao { display: none; }