/* Moradores e veículos: fichas dos moradores, placa Mercosul, chaveiro da tag (Minha conta, Administração, Portaria) */
:root {
  --placa-azul: #003399;
  --placa-tinta: #16181b;
  --placa-borda: #2c3136;
  --tag-ambar: #a8590a;
  --tag-ambar-fundo: #fdf1dc;
  --tag-agua: var(--etiqueta-agua);
  --tag-agua-fundo: #e2f5f1;
}
:root[data-modo="escuro"] {
  --tag-ambar: #f5b85a;
  --tag-ambar-fundo: rgba(245, 184, 90, .12);
  --tag-agua: var(--agua-viva);
  --tag-agua-fundo: rgba(111, 216, 200, .12);
}

/* ---------- a placa ---------- */
.placa {
  --pw: 168px;
  flex: none; display: inline-flex; flex-direction: column; width: var(--pw); aspect-ratio: 400 / 130; overflow: hidden;
  border-radius: calc(var(--pw) * .045); background: #fff; color: var(--placa-tinta);
  box-shadow: inset 0 0 0 calc(var(--pw) * .012) var(--placa-borda), 0 1px 0 rgba(0, 0, 0, .08), 0 3px 8px rgba(15, 23, 42, .12);
  font-family: "Saira Condensed", "Arial Narrow", sans-serif; user-select: all;
}
.placa-faixa {
  position: relative; display: flex; align-items: center; justify-content: center; height: 27%; background: var(--placa-azul); color: #fff;
  font-family: var(--fonte); font-size: calc(var(--pw) * .068); font-weight: 700; letter-spacing: .32em; padding-left: .32em;
}
.placa-bandeira { position: absolute; right: 6%; top: 50%; width: 9%; transform: translateY(-50%); }
.placa-texto {
  flex: 1; display: grid; place-items: center; font-size: calc(var(--pw) * .245); font-weight: 700; line-height: 1;
  letter-spacing: .07em; padding-left: .07em; font-variant-numeric: tabular-nums;
}
.placa-destaque { box-shadow: inset 0 0 0 calc(var(--pw) * .012) var(--placa-borda), 0 0 0 3px var(--ouro), 0 6px 18px rgba(var(--ouro-luz-rgb, 217, 180, 90), .45); }

/* ---------- o chaveiro da tag ---------- */
.selo-tag {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 8px; border-radius: 999px;
  font-size: .82rem; font-weight: 600; white-space: nowrap; border: 1.5px solid transparent;
}
.selo-tag svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.selo-tag.s-cadastrado { color: var(--texto-2); border: 1.5px dashed var(--linha); }
.selo-tag.s-solicitado { color: var(--tag-ambar); background: var(--tag-ambar-fundo); border-color: rgba(168, 89, 10, .25); animation: pulso-tag 1.4s ease-out 1; }
.selo-tag.s-ativo { color: var(--tag-agua); background: var(--tag-agua-fundo); border-color: rgba(14, 116, 104, .22); }
.selo-tag.s-inativo { color: var(--texto-2); background: var(--superficie-2); }
.selo-tag.s-inativo span { text-decoration: line-through; text-decoration-thickness: 1.5px; }
@keyframes pulso-tag { 0% { box-shadow: 0 0 0 0 rgba(168, 89, 10, .35); } 100% { box-shadow: 0 0 0 10px rgba(168, 89, 10, 0); } }
@media (prefers-reduced-motion: reduce) { .selo-tag.s-solicitado { animation: none; } }

/* ---------- seção da unidade (Minha conta) ---------- */
.secao-unidade { margin-top: 30px; }
.cabeca-unidade { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; }
.titulo-unidade { font-family: var(--serifa); font-weight: 600; font-size: clamp(1.35rem, 2.6vw, 1.7rem); letter-spacing: -.01em; color: var(--destaque); margin: 0 0 4px; }
.cabeca-unidade .mudo { max-width: 62ch; margin: 0; }
.cabeca-unidade .btn svg, .unidade-vazia .btn svg { width: 18px; height: 18px; }
.fichas { display: grid; gap: 14px; }

/* ---------- a ficha de um morador ---------- */
.ficha-morador, .em-edicao.ficha-nova, .fichas > .em-edicao {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-g); padding: 18px 20px; box-shadow: var(--sombra);
}
.ficha-topo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.iniciais {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--superficie-2); color: var(--destaque);
  font-weight: 700; font-size: .95rem; letter-spacing: .02em; box-shadow: inset 0 0 0 1.5px var(--linha);
  /* sempre redondo: ao lado de um nome comprido, não encolhe nem vira oval */
  flex: none; aspect-ratio: 1;
}
.ficha-morador.titular .iniciais { background: rgba(217, 180, 90, .16); color: #8a6512; box-shadow: inset 0 0 0 2.5px var(--ouro); }
:root[data-modo="escuro"] .ficha-morador.titular .iniciais { color: var(--ouro); }
.nome-morador { margin: 0; font-size: 1.06rem; font-weight: 700; line-height: 1.25; }
.ficha-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 4px 0 0; font-size: .88rem; color: var(--texto-2); }
.parentesco { font-weight: 600; }
.parentesco.e-titular { padding: 1px 9px; border-radius: 999px; background: var(--ouro); color: #3b2c06; font-size: .78rem; font-weight: 700; }
.contato { display: inline-flex; align-items: center; gap: 5px; color: inherit; }
a.contato { color: var(--destaque); text-decoration: none; font-weight: 600; }
a.contato:hover { text-decoration: underline; }
.contato svg { opacity: .7; }
.ficha-acoes { display: flex; gap: 14px; }

/* ---------- veículos ---------- */
.lista-veiculos { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.lista-veiculos:empty { display: none; }
.veiculo {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px 18px;
  padding: 12px 14px; border-radius: var(--raio); background: var(--superficie-2); border: 1px solid var(--linha);
}
.veiculo.achado { border-color: var(--ouro); background: rgba(217, 180, 90, .08); }
.veiculo-dados { display: grid; gap: 2px; min-width: 0; }
.veiculo-dados b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.veiculo-dados .mudo { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; }
.bolinha-cor { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22); }
.c-branco { background: #f4f5f2; } .c-prata { background: #c4c9cc; } .c-cinza { background: #7b8287; } .c-preto { background: #22262a; }
.c-vermelho { background: #c0392b; } .c-azul { background: #2f5fa8; } .c-verde { background: #2f7d4f; } .c-bege { background: #d8c7a3; }
.c-marrom { background: #6e4a2f; } .c-amarelo { background: #e8b923; } .c-outra { background: conic-gradient(#c0392b, #e8b923, #2f7d4f, #2f5fa8, #c0392b); }
.veiculo-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px; }
.veiculo-acoes .btn svg { width: 15px; height: 15px; }
.aviso-travado { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--texto-2); }
.aviso-semtag { font-size: .84rem; font-weight: 600; color: var(--perigo); }
.incluir-veiculo { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; }

/* ---------- formulários na própria ficha ---------- */
.em-edicao { list-style: none; }
.lista-veiculos > .em-edicao { padding: 14px; border-radius: var(--raio); background: var(--superficie-2); border: 1.5px solid var(--agua); }
.grade-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; }
.grade-form .largo { grid-column: span 2; }
.form-morador .acoes, .form-veiculo .acoes, .form-tag .acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.form-veiculo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 20px; align-items: start; }
.form-veiculo .acoes { grid-column: 1 / -1; }
.previa-placa { padding-top: 22px; }
.previa-placa .placa { --pw: 200px; }
.form-tag { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 16px; }
.form-tag .campo { flex: 1 1 200px; margin-bottom: 0; }
.form-tag .acoes { margin-left: auto; }
.caixa { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; font-weight: 600; cursor: pointer; }
.caixa input { width: 18px; height: 18px; accent-color: var(--agua); }
[aria-invalid="true"] { border-color: var(--perigo) !important; }
.unidade-vazia .btn { margin-top: 6px; }

@media (max-width: 860px) {
  .veiculo { grid-template-columns: auto minmax(0, 1fr); }
  .veiculo .selo-tag { justify-self: start; }
  .veiculo-acoes { justify-content: flex-start; }
  .grade-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ficha-morador, .fichas > .em-edicao { padding: 16px 14px; }
  .ficha-topo { grid-template-columns: auto minmax(0, 1fr); }
  .ficha-acoes { grid-column: 1 / -1; justify-content: flex-start; }
  .placa { --pw: 132px; }
  .veiculo { grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; padding: 12px; }
  .veiculo .selo-tag, .veiculo-acoes { grid-column: 1 / -1; }
  .grade-form { grid-template-columns: minmax(0, 1fr); }
  .grade-form .largo { grid-column: auto; }
  .form-veiculo { grid-template-columns: minmax(0, 1fr); }
  .previa-placa { padding-top: 0; margin-bottom: 12px; }
  .cabeca-unidade .btn { width: 100%; }
}

/* ---------- Administração: painel de botões (uma área por botão) ---------- */
.painel-adm { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 4px 0 22px; }
.botao-adm {
  /* compacto: ícone à esquerda, nome (e a pendência, quando há) à direita */
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; row-gap: 0; min-height: 0; padding: 9px 12px;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); color: var(--texto); text-align: left; cursor: pointer;
  font: inherit; transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.botao-adm:hover { border-color: var(--agua); }
.botao-adm:active { transform: scale(.98); }
.botao-adm:focus-visible { outline: 3px solid rgba(var(--agua-rgb), .55); outline-offset: 2px; }
.botao-adm-icone { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(var(--agua-rgb), .14); color: var(--destaque); }
.botao-adm-icone svg { width: 18px; height: 18px; }
.botao-adm-nome { font-weight: 500; line-height: 1.2; font-size: .875rem; }
.botao-adm-pendencia { grid-column: 2; font-size: .75rem; font-weight: 500; }
.botao-adm-pendencia:empty { display: none; }
.botao-adm .selo { position: absolute; top: 6px; right: 6px; box-shadow: 0 0 0 2px #fff; }


.area-adm:focus { outline: none; }

@media (max-width: 860px) {
  /* no celular, uma fileira que rola para o lado */
  .painel-adm { display: flex; overflow-x: auto; gap: 8px; margin: 0 -16px 16px; padding: 2px 16px 8px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .painel-adm::-webkit-scrollbar { display: none; }
  .botao-adm { flex: none; grid-template-rows: none; grid-template-columns: auto auto; align-items: center; min-height: 0; padding: 8px 14px 8px 8px; border-radius: 999px; scroll-snap-align: start; gap: 8px; }
  .botao-adm-icone { grid-row: auto; width: 32px; height: 32px; }
  .botao-adm-icone svg { width: 17px; height: 17px; }
  .botao-adm-nome { font-size: .88rem; white-space: nowrap; }
  .botao-adm-pendencia { display: none; }
  .botao-adm .selo { position: static; grid-column: 3; }
}

/* ---------- pedidos de tag ---------- */
.pedidos-tag > h2 { margin-bottom: 12px; }
.lista-pedidos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pedido {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; padding: 14px 16px;
  border-radius: var(--raio); background: var(--tag-ambar-fundo); border: 1px solid rgba(168, 89, 10, .2);
  transition: opacity .25s ease, transform .25s ease;
}
.pedido.saindo { opacity: 0; transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) { .pedido { transition: none; } }
.pedido-quem { display: grid; gap: 2px; min-width: 0; }
.form-ativar { display: flex; align-items: flex-end; gap: 12px; }
.form-ativar .campo { margin: 0; width: 170px; }
.aviso-config { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--superficie-2); font-size: .88rem; color: var(--texto-2); }

/* ---------- unidades na administração ---------- */
.unidades-adm { display: grid; gap: 22px; }
.rotulo-unidade { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-family: var(--serifa); font-weight: 600; font-size: 1.3rem; color: var(--destaque); }
.rotulo-unidade span { font-family: var(--fonte); font-size: .85rem; font-weight: 700; color: var(--texto-2); }
.unidade-adm .ficha-morador { box-shadow: none; }

/* ---------- relatório: tags a cobrar ---------- */
.placa-mini { font-family: "Saira Condensed", "Arial Narrow", sans-serif; font-weight: 700; font-size: 1.02rem; letter-spacing: .06em; padding: 1px 7px;
  border-radius: 4px; border: 1.5px solid var(--placa-borda); border-top: 4px solid var(--placa-azul); background: #fff; color: var(--placa-tinta); }

@media (max-width: 860px) {
  .pedido { grid-template-columns: auto minmax(0, 1fr); }
  .form-ativar { grid-column: 1 / -1; flex-wrap: wrap; }
  .form-ativar .campo { flex: 1 1 160px; width: auto; }
}
#busca-adm { width: min(300px, 100%); }

/* ---------- Portaria: abas e consulta de moradores ---------- */
/* com muitas abas, a barra rola de lado: os nomes ficam sempre numa linha */
.abas-portaria { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 20px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--linha); max-width: 100%; box-sizing: border-box; overflow-x: auto; scrollbar-width: none; }
.abas-portaria::-webkit-scrollbar { display: none; }
.abas-portaria button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--raio-p); background: none;
  font: inherit; font-weight: 500; color: var(--texto-2); cursor: pointer; flex: none; white-space: nowrap;
  transition: background-color var(--rapido) ease, color var(--rapido) ease;
}
.abas-portaria button svg { width: 20px; height: 20px; }
.abas-portaria button:hover { color: var(--texto); background: var(--superficie-2); }
.abas-portaria button[aria-selected="true"] { background: var(--primaria); color: var(--sobre-primaria); }
.abas-portaria button:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.filtros-portaria { display: flex; flex-wrap: wrap; gap: 0 14px; margin-bottom: 4px; }
.filtros-portaria .campo { min-width: 220px; }
.busca-portaria {
  display: flex; align-items: center; gap: 12px; max-width: 640px; padding: 0 20px; border-radius: var(--raio); background: var(--superficie);
  border: 1.5px solid var(--linha); box-shadow: var(--sombra); transition: border-color .15s ease, box-shadow .15s ease;
}
.busca-portaria:focus-within { border-color: var(--agua); box-shadow: 0 0 0 4px rgba(var(--agua-rgb), .18), var(--sombra); }
.busca-portaria > svg { width: 24px; height: 24px; flex: none; color: var(--texto-2); }
.busca-portaria input[type=search] { flex: 1; min-width: 0; height: 64px; border: 0 !important; box-shadow: none !important; background: none; font-size: 1.25rem; padding: 0; }
.instrucao-portaria { margin: 18px 4px; color: var(--texto-2); }
.cartoes-portaria { display: grid; gap: 18px; margin-top: 22px; }
.cartao-unidade { padding: 18px 20px 20px; border-radius: var(--raio-g); background: var(--superficie); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.apto-grande { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; font-family: var(--serifa); font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.2rem); line-height: 1.1; color: var(--destaque); letter-spacing: -.01em; }
.apto-grande span { font-family: var(--fonte); font-size: .95rem; font-weight: 700; color: var(--texto-2); letter-spacing: 0; }
.cartao-unidade .ficha-morador { box-shadow: none; padding: 14px 16px; }
@media (max-width: 560px) {
  .abas-portaria { display: flex; }
  .busca-portaria input[type=search] { height: 56px; font-size: 1.08rem; }
  .cartao-unidade { padding: 14px; }
}

/* ---------- síndico: incluir morador (escolha da unidade) ---------- */
#novo-adm:not(:empty) { margin: 0 0 18px; }
.campo-unidade { max-width: 320px; }
.cabecalho-tela .acoes .btn svg { width: 18px; height: 18px; }

/* ---------- Aprovações: link de cadastro dos moradores ---------- */
.faixa-link {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, 340px) auto; align-items: center; gap: 12px 16px;
  margin-bottom: 18px; padding: 16px 18px; border-radius: var(--raio-g); background: var(--superficie); border: 1px solid var(--linha); box-shadow: var(--sombra);
}
.faixa-link-icone { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(var(--agua-rgb), .14); color: var(--destaque); }
.faixa-link-icone svg { width: 20px; height: 20px; }
.faixa-link-texto h2 { margin: 0 0 2px; font-size: 1.02rem; }
.faixa-link-texto p { margin: 0; font-size: .86rem; }
.faixa-link-endereco { font-size: .9rem; color: var(--destaque); font-weight: 600; }
@media (max-width: 860px) {
  .faixa-link { grid-template-columns: auto minmax(0, 1fr); }
  .faixa-link-endereco, .faixa-link .btn { grid-column: 1 / -1; }
}

/* ================= página Moradores: quadro do prédio, apartamento e morador ================= */
/* a página usa a largura do monitor (as outras telas continuam com 1180 px): três colunas sem apertar os nomes */
.conteudo:has(.pagina-moradores) { max-width: 1640px; }
.pagina-moradores { display: grid; grid-template-columns: minmax(280px, 330px) minmax(290px, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
.voltar-col { display: none; }

/* ---------- o quadro do hall, claro e tipo placa ----------
   Cada bloco com a sua cor (--cor-bloco): faixa no título e a plaquinha do número; a cor é misturada com o texto do
   tema, então funciona no claro e no escuro. O quadro rola sozinho; o apartamento e o morador ficam à vista. */
.col-quadro {
  position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 32px); padding: 16px 0 0;
  border-radius: var(--raio-g); background: var(--superficie); border: 1px solid var(--linha); box-shadow: var(--sombra); overflow: hidden;
}
.busca-quadro { display: flex; align-items: center; gap: 8px; margin: 0 16px; padding: 0 12px; border-radius: var(--raio); background: var(--superficie-2); border: 1px solid var(--linha); color: var(--texto-2); transition: border-color var(--rapido) ease; }
.busca-quadro:focus-within { border-color: var(--destaque); box-shadow: 0 0 0 3px rgba(var(--agua-rgb), .18); }
.busca-quadro > svg { width: 18px; height: 18px; flex: none; }
.busca-quadro input[type=search] { flex: 1; min-width: 0; height: 44px !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; color: var(--texto) !important; font-size: .9375rem; }
.busca-quadro input::placeholder { color: var(--texto-2); }
/* o síndico inclui um apartamento vazio (para cadastrar os moradores depois) */
.incluir-apto { margin: 0 16px; }
.incluir-apto summary {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--raio-p); cursor: pointer; list-style: none;
  font-size: .875rem; font-weight: 500; color: var(--destaque); border: 1px dashed color-mix(in srgb, var(--destaque) 45%, transparent);
  transition: background-color var(--rapido) ease, border-color var(--rapido) ease;
}
.incluir-apto summary::-webkit-details-marker { display: none; }
.incluir-apto summary:hover, .incluir-apto[open] summary { border-style: solid; border-color: var(--destaque); background: rgba(var(--agua-rgb), .08); }
.form-incluir-apto { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) auto; gap: 8px; margin-top: 10px; }
.form-incluir-apto input, .form-incluir-apto select { min-height: 40px; min-width: 0; }
.quadro-predio { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 12px; scrollbar-width: thin; scrollbar-gutter: stable; border-top: 1px solid var(--linha); }
/* botões de bloco, presos no alto do quadro */
.saltos-bloco { position: sticky; top: 0; z-index: 2; display: flex; gap: 6px; height: 48px; align-items: center; padding: 0 6px; background: var(--superficie); }
.saltos-bloco button {
  flex: 1; min-height: 32px; padding: 0 10px; border-radius: 999px; font: inherit; font-size: .8125rem; font-weight: 500; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--cor-bloco) 70%, var(--linha)); color: color-mix(in srgb, var(--cor-bloco) 32%, var(--texto));
  background: color-mix(in srgb, var(--cor-bloco) 14%, var(--superficie)); transition: background-color var(--rapido) ease;
}
.saltos-bloco button:hover { background: color-mix(in srgb, var(--cor-bloco) 30%, var(--superficie)); }
.saltos-bloco button:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.quadro-bloco + .quadro-bloco { margin-top: 10px; }
/* título do bloco: faixa na cor do bloco, presa embaixo dos botões enquanto o bloco rola */
.quadro-bloco-nome {
  position: sticky; top: 48px; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 0 0 4px; padding: 8px 12px; border-radius: var(--raio-p); font-family: var(--fonte); font-weight: 500; font-size: 1rem;
  color: color-mix(in srgb, var(--cor-bloco) 30%, var(--texto));
  background: linear-gradient(90deg, color-mix(in srgb, var(--cor-bloco) 26%, var(--superficie)), color-mix(in srgb, var(--cor-bloco) 8%, var(--superficie)));
  box-shadow: inset 4px 0 0 var(--cor-bloco);
}
.quadro-predio > .quadro-bloco:first-child .quadro-bloco-nome { top: 0; }
.quadro-predio > .quadro-bloco:first-child { margin-top: 10px; }
.quadro-bloco-nome span { font-size: .75rem; font-weight: 400; color: var(--texto-2); }
.quadro-lista { list-style: none; margin: 0; padding: 0; }
.quadro-lista li + li { border-top: 1px solid color-mix(in srgb, var(--linha) 70%, transparent); }
.quadro-linha {
  position: relative; display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 7px 8px;
  border: 0; border-radius: var(--raio-p); background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--rapido) ease;
}
.quadro-linha:hover { background: var(--superficie-2); }
.quadro-linha:focus-visible { outline: 2px solid var(--destaque); outline-offset: -2px; }
/* o número na plaquinha do bloco */
.quadro-apto {
  display: grid; place-items: center; height: 34px; border-radius: var(--raio-p); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em;
  font-variant-numeric: lining-nums tabular-nums; color: color-mix(in srgb, var(--cor-bloco) 28%, var(--texto));
  background: color-mix(in srgb, var(--cor-bloco) 22%, var(--superficie)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor-bloco) 55%, transparent);
}
.quadro-texto { display: grid; min-width: 0; gap: 1px; }
.quadro-nome { font-size: .9375rem; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quadro-nome.sem { font-weight: 400; font-style: italic; color: var(--texto-2); }
.quadro-qtd { font-size: .75rem; color: var(--texto-2); }
/* a unidade aberta: faixa cheia, como o morador escolhido na coluna do apartamento */
.quadro-linha.escolhida { background: var(--petroleo-2); color: #fff; box-shadow: var(--sombra); }
.quadro-linha.escolhida .quadro-apto { background: #fff; color: var(--petroleo-2); box-shadow: none; }
.quadro-linha.escolhida .quadro-qtd { color: rgba(255, 255, 255, .78); }
:root[data-modo="escuro"] .quadro-linha.escolhida { background: var(--petroleo-luz); }
/* cada bloco numa cor, na mesma ordem do cartão de acesso da Portaria */
.quadro-bloco, .saltos-bloco button { --cor-bloco: #4cc9b8; }
.quadro-bloco.cor-bloco-1, .saltos-bloco .cor-bloco-1 { --cor-bloco: #e9b04a; }
.quadro-bloco.cor-bloco-2, .saltos-bloco .cor-bloco-2 { --cor-bloco: #7c9cf5; }
.quadro-bloco.cor-bloco-3, .saltos-bloco .cor-bloco-3 { --cor-bloco: #ee8aa2; }
/* cartão de acesso da Portaria: as cores claras de antes (fundo da etiqueta com a tinta escura da placa) */
.cartao-acesso .acesso-apto { --cor-bloco: #7ee0d3; }
.cartao-acesso .acesso-apto.cor-bloco-1 { --cor-bloco: #f2c46d; }
.cartao-acesso .acesso-apto.cor-bloco-2 { --cor-bloco: #9ab8ff; }
.cartao-acesso .acesso-apto.cor-bloco-3 { --cor-bloco: #f4a3b5; }
.quadro-minha { width: 9px; height: 9px; border-radius: 50%; background: var(--ouro); box-shadow: 0 0 0 3px rgba(217, 180, 90, .25); align-self: center; }
.quadro-vazio { margin: 14px 10px; font-size: .9rem; color: var(--texto-2); }

/* colunas claras: o apartamento e o morador */
.col-morador { container-type: inline-size; }
.col-apto, .col-morador { min-height: 320px; padding: 18px; border-radius: var(--raio-g); background: var(--superficie); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.col-vazia { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 280px; text-align: center; color: var(--texto-2); }
.col-vazia svg { width: 40px; height: 40px; opacity: .45; }
.apto-cab h2 { display: flex; align-items: baseline; gap: 10px; margin: 0; font-family: inherit; font-weight: 700; font-size: 1.75rem; line-height: 1.1; color: var(--destaque); letter-spacing: -.01em; }
.apto-cab h2 span { font-family: var(--fonte); font-size: .9rem; font-weight: 700; color: var(--texto-2); letter-spacing: 0; }
.apto-cab p { margin: 4px 0 14px; font-size: .88rem; }
.lista-moradores { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.item-morador {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 12px;
  border: 1px solid transparent; border-radius: var(--raio); background: var(--superficie-2); color: var(--texto); font: inherit; text-align: left; cursor: pointer;
}
.item-morador:hover { border-color: var(--linha); }
.item-morador:focus-visible { outline: 3px solid rgba(var(--agua-rgb), .45); outline-offset: 1px; }
.item-morador.escolhido { border-color: var(--agua); background: rgba(var(--agua-rgb), .08); }
.item-morador .iniciais { width: 46px; height: 46px; font-size: .9rem; }
.item-morador.titular .iniciais { background: rgba(217, 180, 90, .16); color: #8a6512; box-shadow: inset 0 0 0 2.5px var(--ouro); }
:root[data-modo="escuro"] .item-morador.titular .iniciais { color: var(--ouro); }
.item-texto { display: grid; min-width: 0; }
.item-texto b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-texto span { font-size: .82rem; color: var(--texto-2); }
.item-morador .seta { transform: rotate(180deg); opacity: .45; }
.incluir-morador, .excluir-apto { margin-top: 14px; }
.incluir-morador svg, .excluir-apto svg { width: 18px; height: 18px; }
.incluir-morador + .excluir-apto { margin-left: 8px; }
#novo-morador:not(:empty) { margin-bottom: 12px; }
.col-apto .em-edicao { padding: 14px; border-radius: var(--raio); border: 1.5px solid var(--agua); background: var(--superficie-2); }
.col-apto .grade-form { grid-template-columns: minmax(0, 1fr); }
.col-apto .grade-form .largo { grid-column: auto; }

/* o morador: cabeçalho e as abas Dados, Veículos e Portões */
.detalhe-cab { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.iniciais.grande { width: 64px; height: 64px; font-size: 1.3rem; }
.detalhe-morador.titular .iniciais.grande { background: rgba(217, 180, 90, .16); color: #8a6512; box-shadow: inset 0 0 0 3px var(--ouro); }
:root[data-modo="escuro"] .detalhe-morador.titular .iniciais.grande { color: var(--ouro); }
.detalhe-cab h2 { margin: 0; font-family: var(--serifa); font-weight: 600; font-size: 1.55rem; line-height: 1.15; letter-spacing: -.01em; }
.detalhe-cab p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 5px 0 0; font-size: .88rem; }
/* as abas ocupam a largura do painel, em partes iguais: nada sai para fora */
.abas-morador { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--linha); width: 100%; box-sizing: border-box; }
.abas-morador button {
  flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 8px; border: 0; border-radius: 999px; background: none;
  font: inherit; font-weight: 700; font-size: .9rem; color: var(--texto-2); cursor: pointer;
}
.abas-morador button:hover { color: var(--texto); }
.abas-morador button[aria-selected="true"] { background: var(--primaria); color: var(--sobre-primaria); }
.abas-morador button:focus-visible { outline: 3px solid rgba(var(--agua-rgb), .55); outline-offset: 2px; }
.abas-morador .qtd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(var(--agua-rgb), .16); font-size: .75rem; }
.abas-morador button[aria-selected="true"] .qtd { background: rgba(255, 255, 255, .2); }
.dados-morador { display: grid; margin: 0; }
.dados-morador > div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--linha); }
.dados-morador dt { color: var(--texto-2); font-size: .88rem; font-weight: 600; }
.dados-morador dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.acoes-morador { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.acoes-morador .btn svg { width: 16px; height: 16px; }
.aba-vazia { margin: 4px 2px 0; }
.col-morador .lista-veiculos { margin-top: 0; }

/* cartões dos portões */
.lista-portoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.portao { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px 16px; padding: 12px 14px; border-radius: var(--raio); background: var(--superficie-2); border: 1px solid var(--linha); }
.portao-codigo {
  display: grid; place-items: center; min-width: 3.3em; padding: 4px 10px; border-radius: 10px; border: 1.5px solid rgba(14, 116, 104, .3);
  background: var(--tag-agua-fundo); color: var(--tag-agua); font-family: "Saira Condensed", "Arial Narrow", sans-serif; font-weight: 700; font-size: 1.45rem; letter-spacing: .04em; line-height: 1.15;
}
.portao.inativo .portao-codigo { filter: grayscale(1); opacity: .6; }
.portao-dados { display: grid; min-width: 0; }
.portao-dados span { font-size: .86rem; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.lista-portoes > .em-edicao { padding: 14px; border-radius: var(--raio); border: 1.5px solid var(--agua); background: var(--superficie-2); }
.form-portao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.form-portao .acoes { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; }

/* pedidos de tag (síndico), acima do quadro */
.faixa-pedidos { margin-bottom: 18px; padding: 16px 18px; border-radius: var(--raio-g); background: var(--tag-ambar-fundo); border: 1px solid rgba(168, 89, 10, .22); }
.faixa-pedidos > h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1.02rem; color: var(--tag-ambar); }
.faixa-pedidos .pedido { background: var(--superficie); }

/* Minha conta: atalho para a unidade */
.atalho-unidade {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--raio-g);
  background: var(--superficie); border: 1px solid var(--linha); box-shadow: var(--sombra); color: var(--texto); text-decoration: none;
}
.atalho-unidade:hover { border-color: var(--agua); }
.atalho-unidade > span:nth-child(2) { display: grid; gap: 2px; }
.atalho-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--agua-rgb), .14); color: var(--destaque); }
.atalho-icone svg { width: 22px; height: 22px; }

/* telas menores: uma janela de cada vez, com Voltar */
@media (max-width: 1099px) {
  .pagina-moradores { grid-template-columns: minmax(0, 1fr); }
  .pagina-moradores[data-nivel="quadro"] .col-apto, .pagina-moradores[data-nivel="quadro"] .col-morador,
  .pagina-moradores[data-nivel="apto"] .col-quadro, .pagina-moradores[data-nivel="apto"] .col-morador,
  .pagina-moradores[data-nivel="morador"] .col-quadro, .pagina-moradores[data-nivel="morador"] .col-apto { display: none; }
  .col-quadro { position: static; max-height: none; }
  .voltar-col { display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 12px; padding: 6px 4px; border: 0; background: none; color: var(--destaque); font: inherit; font-weight: 700; cursor: pointer; }
  .col-apto, .col-morador { min-height: 0; }
}
@media (max-width: 560px) {
  .col-apto, .col-morador { padding: 14px; }
  .portao { grid-template-columns: auto minmax(0, 1fr); }
  .portao .selo-tag, .portao .veiculo-acoes { grid-column: 1 / -1; justify-self: start; }
  .dados-morador > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .form-portao { grid-template-columns: minmax(0, 1fr); }
  .atalho-unidade { grid-template-columns: auto minmax(0, 1fr); }
  .atalho-unidade .btn { grid-column: 1 / -1; }
  .abas-morador { width: 100%; }
  .abas-morador button { flex: 1; justify-content: center; padding: 0 8px; }
}

/* a coluna do morador se arruma pela própria largura: estreita, a placa e o modelo em cima, a situação e os botões embaixo */
@container (max-width: 560px) {
  .col-morador .veiculo, .col-morador .portao { grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; }
  .col-morador .veiculo .selo-tag, .col-morador .veiculo-acoes, .col-morador .portao .selo-tag { grid-column: 1 / -1; justify-self: start; }
  .col-morador .veiculo-acoes { justify-content: flex-start; }
  .col-morador .placa { --pw: 140px; }
  .col-morador .form-veiculo { grid-template-columns: minmax(0, 1fr); }
  .col-morador .grade-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col-morador .grade-form .largo { grid-column: 1 / -1; }
  .col-morador .previa-placa { padding-top: 0; margin-bottom: 10px; }
  .dados-morador > div { grid-template-columns: 7.5em minmax(0, 1fr); }
}

/* ---------- Administração: cada área com a sua cor cheia (tom forte da paleta cor-N, texto branco) ---------- */
.botao-adm { overflow: hidden; background: var(--cat-forte, var(--destaque)); border-color: transparent; color: #fff;
  transition: background-color var(--rapido) ease, box-shadow var(--rapido) ease, transform var(--rapido) ease; }
.botao-adm .botao-adm-icone { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }
.botao-adm .botao-adm-pendencia { color: #fff; opacity: .9; }
.botao-adm:hover { border-color: transparent; background: color-mix(in srgb, var(--cat-forte, var(--destaque)) 88%, #000); }
.botao-adm:focus-visible { outline: 2px solid var(--cat-forte, var(--destaque)); outline-offset: 3px; }
/* escolhido: anel na cor da área, separado do botão pelo fundo da página */
.botao-adm[aria-selected="true"] { box-shadow: 0 0 0 3px var(--fundo, var(--superficie)), 0 0 0 5px var(--cat-forte, var(--destaque)); font-weight: 600; }
/* cabeçalho da área aberta */
.area-adm-cab { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px solid var(--linha); font-weight: 500; font-size: 1.25rem; color: var(--texto); }
.area-adm-cab:empty { display: none; }
.area-adm-icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--raio-p); background: var(--cat-fundo); color: var(--cat); }
.area-adm-icone svg { width: 21px; height: 21px; }
@media (max-width: 860px) {
  .area-adm-cab { font-size: 1.125rem; }
}

/* no quadro do morador, as outras unidades aparecem só com o titular (não abrem) */
.quadro-linha.fixa { cursor: default; }
.quadro-linha.fixa:hover { background: none; }

/* ---------- foto do rosto ---------- */
.iniciais.com-foto { padding: 0; overflow: hidden; background: var(--superficie-2); }
.iniciais.com-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-morador { margin: 0 0 18px; padding: 14px 16px; border-radius: var(--raio); background: var(--superficie-2); border: 1px solid var(--linha); }
.foto-morador h3 { margin: 0 0 2px; font-size: .98rem; }
.foto-morador > p { margin: 0 0 12px; font-size: .86rem; max-width: 60ch; }
.foto-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.foto-acoes label.btn { position: relative; overflow: hidden; }
.foto-acoes .btn svg { width: 16px; height: 16px; }
.previa-foto { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--linha); }
.previa-foto img { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--superficie), 0 0 0 6px var(--agua); }
.consentimento { align-items: flex-start; min-height: 0; font-weight: 500; font-size: .9rem; line-height: 1.4; }
.consentimento input { margin-top: 2px; flex: none; }
/* a autorização fica ao lado da foto; os botões, numa linha inteira embaixo */
.previa-foto > div { display: contents; }
.previa-foto .acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
@media (max-width: 560px) {
  .previa-foto { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: left; }
  .previa-foto img { width: 160px; height: 160px; }
}
/* na Portaria o rosto é maior: é por ele que o porteiro confere quem chega */
.cartao-unidade .ficha-topo .iniciais { width: 68px; height: 68px; font-size: 1.15rem; }

/* ---------- painel do apartamento: fundo próprio e o morador escolhido em destaque ---------- */
.col-apto { background: var(--superficie-2); border-color: var(--linha); }
.col-apto .item-morador { background: var(--superficie); border-color: rgba(15, 23, 42, .08); }
.col-apto .item-morador.escolhido { background: var(--petroleo-2); border-color: transparent; color: #fff; box-shadow: var(--sombra); }
.col-apto .item-morador.escolhido .item-texto span { color: rgba(255, 255, 255, .78); }
.col-apto .item-morador.escolhido .seta { opacity: .85; color: #fff; }
.col-apto .item-morador.escolhido .iniciais { background: #fff; color: var(--petroleo-2); box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.col-apto .item-morador.escolhido.titular .iniciais { background: #fdf3d6; color: #7a560c; box-shadow: 0 0 0 2.5px var(--ouro); }
:root[data-modo="escuro"] .col-apto .item-morador.escolhido { background: var(--petroleo-luz); }

/* ---------- foto ampliada ---------- */
.iniciais.com-foto.ampliavel { cursor: zoom-in; }
.iniciais.com-foto.ampliavel:focus-visible { outline: 3px solid var(--agua); outline-offset: 2px; }
dialog.foto-grande, dialog.foto-grande .corpo { padding: 0 !important; }
dialog.foto-grande { width: auto; border: 0; border-radius: var(--raio); overflow: hidden; background: var(--superficie); max-width: min(92vw, 560px); }
dialog.foto-grande .corpo { padding: 0; }
dialog.foto-grande img { display: block; width: min(92vw, 560px); height: auto; aspect-ratio: 1; object-fit: cover; }
dialog.foto-grande figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font-weight: 700; }

/* ---------- ajustes do painel do morador: botões lado a lado, valores à direita, letras um pouco menores ---------- */
.detalhe-cab h2 { font-size: 1.3rem; }
.iniciais.grande { width: 72px; height: 72px; font-size: 1.35rem; }
.col-morador .btn { min-height: 40px; padding: 0 14px; font-size: .88rem; gap: 6px; }
.foto-acoes, .acoes-morador { flex-wrap: nowrap; }
.foto-acoes .btn, .acoes-morador .btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }
.foto-acoes, .acoes-morador { max-width: 420px; }
.dados-morador dd { text-align: right; }
.dados-morador dd .contato { justify-content: flex-end; }
@media (max-width: 380px) {
  .col-morador .btn { padding: 0 10px; font-size: .84rem; }
}
/* no celular, rótulo e valor na mesma linha (o valor à direita) */
@media (max-width: 560px) { .dados-morador > div { grid-template-columns: auto minmax(0, 1fr); gap: 12px; } }

/* ================= avisos por WhatsApp (Administração e Minha conta) ================= */
.faixa-whatsapp-off { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 16px; border-radius: var(--raio); background: var(--tag-ambar-fundo); color: var(--tag-ambar); font-size: .9rem; line-height: 1.45; }
.faixa-whatsapp-off svg { flex: none; margin-top: 2px; }
.grade-whatsapp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; align-items: stretch; margin-bottom: 18px; }
.grade-whatsapp > .painel + .painel { margin-top: 0; }
.cartao-whatsapp { display: flex; flex-direction: column; }
.cartao-whatsapp > p.mudo { margin: 0 0 12px; font-size: .88rem; }
.cartao-whatsapp .acoes { margin-top: auto; padding-top: 12px; }
.chaves { display: grid; gap: 4px; }
.chave-aviso { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--cat-linha, var(--linha)); cursor: pointer; font-weight: 600; font-size: .92rem; line-height: 1.3; }
.chave-aviso:last-child { border-bottom: 0; }
.chave-aviso input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chave-aviso .trilho { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--linha); transition: background-color .15s ease; }
.chave-aviso .trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s ease; }
.chave-aviso input:checked + .trilho { background: var(--cat, var(--agua)); }
.chave-aviso input:checked + .trilho::after { transform: translateX(18px); }
.chave-aviso input:focus-visible + .trilho { outline: 3px solid rgba(var(--agua-rgb), .5); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .chave-aviso .trilho, .chave-aviso .trilho::after { transition: none; } }
.tabela-avisos td { vertical-align: top; }
.cab-ultimos { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cab-ultimos h2 { margin: 0; }
.resultado { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.resultado.r-ok { background: var(--tag-agua-fundo); color: var(--tag-agua); }
.resultado.r-alerta { background: var(--tag-ambar-fundo); color: var(--tag-ambar); }
.resultado.r-erro { background: rgba(194, 65, 12, .1); color: var(--perigo); }
.resultado.r-neutro { background: var(--superficie-2); color: var(--texto-2); }
.avisos-unidade { margin-top: 18px; }
.avisos-unidade h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 1.05rem; }
.avisos-unidade > p { margin: 0 0 10px; font-size: .88rem; }

/* ================= Portaria → Acessos ao vivo ================= */
.estado-ao-vivo { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 4px 12px; border-radius: 999px; font-size: .84rem; font-weight: 700; background: var(--superficie-2); color: var(--texto-2); }
.estado-ao-vivo::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.estado-ao-vivo.ligado { background: var(--tag-agua-fundo); color: var(--tag-agua); }
.estado-ao-vivo.ligado::before { animation: pulso-vivo 2s ease-in-out infinite; }
.estado-ao-vivo.caiu { background: var(--tag-ambar-fundo); color: var(--tag-ambar); }
/* o estado da conexão e, ao lado, o botão da voz (liga só neste aparelho) */
.barra-ao-vivo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 14px; }
.barra-ao-vivo .estado-ao-vivo { margin: 0; }
.ajustes-voz { min-width: min(420px, 80vw); }
.ajustes-voz select, .ajustes-voz input[type="range"] { width: 100%; }
.ajustes-voz input[type="range"] { min-height: 32px; accent-color: var(--primaria); }
.botao-voz[aria-pressed="true"] { background: var(--tag-agua-fundo); color: var(--tag-agua); border-color: var(--tag-agua); }
@keyframes pulso-vivo { 50% { opacity: .35; } }
.abas-colunas { display: none; }
.acessos-ao-vivo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.coluna-acessos { padding: 14px; border-radius: var(--raio-g); background: var(--superficie); border: 1px solid var(--linha); box-shadow: var(--sombra); min-height: 260px; }
/* cada coluna com uma marca fina no topo: entrada em verde, pedestres em azul-claro, saída na cor principal */
.coluna-acessos h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 12px; font-weight: 500; font-size: 1rem; }
.coluna-acessos h2 span { font-size: .75rem; font-weight: 500; color: var(--texto-2); }
/* cada coluna dá a cor das suas fichas (--cor-sentido) e o lado de onde a ficha nova entra (exceção do manual, seção 20) */
.c-entrada { --cor-sentido: var(--ok); --de: -28px 0; --origem: 0 50%; border-top: 3px solid var(--ok); }
.c-pedestre { --cor-sentido: var(--info); --de: 0 -20px; --origem: 50% 0; border-top: 3px solid var(--info); }
.c-saida { --cor-sentido: var(--destaque); --de: 28px 0; --origem: 100% 50%; border-top: 3px solid var(--destaque); }
.c-entrada h2, .c-pedestre h2, .c-saida h2 { color: var(--cor-sentido); }
.lista-acessos { display: grid; gap: 10px; }
.vazio-col { margin: 12px 4px; font-size: .9rem; }
/* a ficha: fundo tingido com a cor da coluna e uma faixa de 4 px na lateral */
.cartao-acesso {
  --tinta: 7%;
  position: relative; overflow: hidden; padding: 12px 12px 12px 16px; border-radius: var(--raio);
  background: color-mix(in srgb, var(--cor-sentido) var(--tinta), var(--superficie));
  border: 1px solid color-mix(in srgb, var(--cor-sentido) 25%, var(--linha));
  transition: opacity var(--estado);
}
:root[data-modo="escuro"] .cartao-acesso { --tinta: 12%; }
.cartao-acesso::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--cor-sentido); }
.cartao-acesso header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: .8rem; color: var(--texto-2); }
.acesso-hora { font-weight: 700; font-size: .95rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.acesso-leitor { padding: 1px 8px; border-radius: 6px; background: var(--superficie); border: 1px solid var(--linha); font-weight: 700; }
.acesso-quem { display: flex; align-items: center; gap: 12px; }
.acesso-quem .nome-morador { margin: 0; font-size: 1rem; }
/* o apartamento em destaque no cartão (entrada, saída e pedestre); nos acessos ao vivo, na cor do bloco */
.acesso-apto { display: inline-flex; align-items: baseline; gap: 6px; margin-bottom: 4px; padding: 2px 10px; border-radius: 999px; background: var(--petroleo-2); color: #fff; font-size: .8rem; }
.acesso-apto b { font-size: 1rem; font-weight: 700; }
.cartao-acesso .acesso-apto { background: var(--cor-bloco); color: var(--placa-tinta); }
/* a foto do morador bem visível também nas entradas e saídas (o último acesso maior) */
.c-entrada .lista-acessos > .cartao-acesso:first-child .iniciais.grande, .c-saida .lista-acessos > .cartao-acesso:first-child .iniciais.grande { width: 84px; height: 84px; font-size: 1.4rem; }
.acesso-quem p { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 3px 0 0; font-size: .82rem; }
.acesso-veiculo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; margin-top: 10px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--cor-sentido) 30%, var(--linha)); }
.acesso-veiculo .placa { --pw: 116px; }
.acesso-carro { display: grid; min-width: 0; font-size: .86rem; }
.acesso-veiculo .selo-tag { grid-column: 1 / -1; justify-self: start; }
.acesso-alerta { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: var(--tag-ambar); }
/* sem cadastro: âmbar, borda tracejada e o cadeado (o texto diz o que houve; a cor só reforça) */
.cartao-acesso.desconhecido { --cor-sentido: var(--tag-ambar); background: var(--tag-ambar-fundo); border: 1px dashed var(--tag-ambar); }
/* o cartão mais recente de cada coluna: cor mais forte, borda na cor da coluna, hora maior; no centro (facial), a foto é a maior de todas */
.lista-acessos > .cartao-acesso:first-child { --tinta: 15%; padding: 14px 14px 14px 18px; border-color: var(--cor-sentido); box-shadow: var(--sombra); }
:root[data-modo="escuro"] .lista-acessos > .cartao-acesso:first-child { --tinta: 22%; }
.lista-acessos > .cartao-acesso:first-child::before { width: 6px; }
.lista-acessos > .cartao-acesso:first-child .acesso-hora { font-size: 1.25rem; }
.lista-acessos > .cartao-acesso:not(:first-child) .iniciais.grande { width: 56px; height: 56px; font-size: .95rem; }
/* as mais antigas ficam mais leves, para o olho ir direto à última */
.lista-acessos > .cartao-acesso:nth-child(n+4) { opacity: .8; }
.c-pedestre .lista-acessos > .cartao-acesso:first-child .acesso-quem { flex-direction: column; text-align: center; }
.c-pedestre .lista-acessos > .cartao-acesso:first-child .acesso-quem p { justify-content: center; }
.c-pedestre .lista-acessos > .cartao-acesso:first-child .iniciais.grande { width: 132px; height: 132px; font-size: 2rem; }
.c-pedestre .lista-acessos > .cartao-acesso:first-child .nome-morador { font-size: 1.2rem; }
/* chegada (uma vez): a ficha entra pelo lado do portão e uma onda da cor da coluna se espalha e some */
.cartao-acesso.novo { animation: chegar 420ms cubic-bezier(.2, .8, .2, 1) both; }
.cartao-acesso.novo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--cor-sentido); animation: onda 1.1s ease-out both; }
.cartao-acesso.desconhecido.novo { animation: chegar 420ms cubic-bezier(.2, .8, .2, 1) both, alerta-acesso 650ms ease-out 420ms 2; }
@keyframes chegar { from { opacity: 0; translate: var(--de); } }
@keyframes onda { from { clip-path: circle(0 at var(--origem)); opacity: .45; } to { clip-path: circle(150% at var(--origem)); opacity: 0; } }
@keyframes alerta-acesso { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tag-ambar) 55%, transparent); } to { box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) {
  .cartao-acesso.novo, .cartao-acesso.desconhecido.novo, .estado-ao-vivo.ligado::before { animation: none; }
  .cartao-acesso.novo::after { display: none; }
}

@media (max-width: 900px) {
  .abas-colunas { display: flex; gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--linha); }
  .abas-colunas button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border: 0; border-radius: 999px; background: none; font: inherit; font-weight: 700; font-size: .9rem; color: var(--texto-2); cursor: pointer; }
  .abas-colunas button[aria-selected="true"] { background: var(--primaria); color: var(--sobre-primaria); }
  .abas-colunas .qtd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(var(--agua-rgb), .16); font-size: .75rem; }
  .acessos-ao-vivo { grid-template-columns: minmax(0, 1fr); }
  .acessos-ao-vivo[data-coluna-ativa="entrada"] .coluna-acessos:not(.c-entrada),
  .acessos-ao-vivo[data-coluna-ativa="pedestre"] .coluna-acessos:not(.c-pedestre),
  .acessos-ao-vivo[data-coluna-ativa="saida"] .coluna-acessos:not(.c-saida) { display: none; }
}
/* Portaria no celular: abas mais compactas, sem ícone; o que não cabe rola de lado */
@media (max-width: 560px) {
  .abas-portaria { width: 100%; }
  .abas-portaria button { padding: 0 12px; font-size: .86rem; }
  .abas-portaria button svg { display: none; }
}

/* Botões dos portões, no alto de cada coluna dos acessos ao vivo (js/telas/portoes-portaria.js). Um painel compacto por
   coluna, uma linha por lado do portão: o nome à esquerda e os botões à direita, o último comando embaixo, miúdo.
   Abrir (texto) na cor da coluna (.cor-0 entrada, .cor-3 pedestres, .cor-1 saída); Travar aberto em vermelho e Destravar
   em grafite, só com o ícone quando a coluna é estreita e com o nome quando há espaço (consulta de contêiner).
   Fundo cheio com texto branco, igual nos dois temas (contraste de 5:1 ou mais). Prefixo cp- (não confundir com .portao
   do cadastro de Moradores). */
.comandos-portao {
  flex: none; container-type: inline-size; margin: 0 0 12px; padding: 2px 12px; border-radius: var(--raio);
  background: color-mix(in srgb, var(--cat) 6%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--cat) 28%, var(--linha));
}
.comandos-portao:empty { display: none; }
.cp-lado {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome botoes" "linha linha";
  align-items: center; gap: 2px 10px; padding: 8px 0;
}
.cp-lado + .cp-lado { border-top: 1px solid color-mix(in srgb, var(--cat) 20%, var(--linha)); }
.cp-nome { grid-area: nome; display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: .9375rem; color: var(--texto); }
/* portão principal (G06 na entrada, G08 na saída): o próprio botão Abrir leva uma estrela no lugar do escudo e uma moldura dupla
   (um anel de respiro e outro mais escuro, na cor da coluna), para o porteiro achar de longe o que abre sozinho o escravo (carro sem tag) */
.cp-btn.principal { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 5px color-mix(in srgb, var(--cat-forte) 62%, var(--texto)), inset 0 -2px 0 rgba(0, 0, 0, .18); margin: 0 4px 0 4px; }
.cp-nome small { font-size: .75rem; font-weight: 700; color: var(--texto-2); }
.cp-botoes { grid-area: botoes; display: flex; gap: 6px; }
.cp-linha { grid-area: linha; min-width: 0; font-size: .75rem; color: var(--texto-2); }
.cp-estado { display: inline-flex; align-items: center; gap: 4px; }
/* deixado travado aberto: âmbar (o texto diz o que houve; a cor só reforça) */
.cp-estado.travado { padding: 1px 8px; border-radius: 999px; background: var(--tag-ambar-fundo); color: var(--tag-ambar); font-weight: 700; }

.cp-btn {
  --fundo: var(--cat-forte);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 42px; height: 42px; padding: 0 11px;
  border: 0; border-radius: 10px; background: var(--fundo); color: #fff; font: inherit; font-size: .875rem; font-weight: 700;
  white-space: nowrap; cursor: pointer; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
  transition: filter var(--rapido) ease, transform var(--rapido) ease;
}
.cp-btn svg { flex: none; fill: currentColor; }
.cp-btn:hover:not(:disabled) { filter: brightness(1.12); }
.cp-btn:active:not(:disabled) { transform: scale(.96); }
.cp-btn:focus-visible { outline: 3px solid var(--texto); outline-offset: 2px; }
/* esperando (os 3 s ou a resposta): a cor continua cheia, com listras diagonais leves; o texto mantém o contraste */
.cp-btn:disabled { cursor: progress; background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .16) 0 6px, transparent 6px 12px); }
.cp-abrir { min-width: 104px; padding: 0 16px; }
.cp-travar { --fundo: var(--perigo-forte); }
.cp-destravar { --fundo: var(--grafite-forte); }
/* coluna estreita: Travar aberto e Destravar só com o ícone */
.cp-travar .cp-rotulo, .cp-destravar .cp-rotulo { display: none; }
@container (min-width: 400px) {
  .cp-travar .cp-rotulo, .cp-destravar .cp-rotulo { display: inline; }
}
/* coluna bem estreita (monitor 1366 com o menu aberto, celular): o nome e o código um embaixo do outro e Abrir mais curto */
@container (max-width: 330px) {
  .cp-nome { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.2; }
  .cp-abrir { min-width: 88px; padding: 0 12px; }
}
/* coluna estreitíssima (computador de 1100 px): o nome numa linha e os botões em outra, Abrir esticado */
@container (max-width: 250px) {
  .cp-lado { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nome" "botoes" "linha"; gap: 6px; }
  .cp-nome { flex-direction: row; align-items: baseline; gap: 6px; }
  .cp-abrir { flex: 1; min-width: 0; }
}
/* contando os 3 s depois do toque: o número no lugar do ícone */
.cp-btn.contando svg { display: none; }
.cp-btn.contando .cp-rotulo { display: inline; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .cp-btn { transition: none; } .cp-btn:active:not(:disabled) { transform: none; } }

/* ---------- Portaria → Entregas ---------- */
.entregas-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.entregas-topo .chips { display: flex; gap: 6px; }
.busca-entregas { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; max-width: 360px; padding: 0 12px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--linha); }
.busca-entregas input { border: 0 !important; box-shadow: none !important; padding: 0 !important; min-height: 40px; background: transparent; }
.entregas-topo #receber { margin-left: auto; }
/* até 3 cartões por linha: cada coluna tem 1/3 da largura (mínimo 280 px) e o conjunto fica centralizado,
   com o mesmo espaço dos dois lados mesmo quando há só 1 ou 2 cartões */
.grade-entregas {
  --col-entrega: calc((100% - 24px) / 3);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(max(280px, var(--col-entrega)), var(--col-entrega)));
  justify-content: center; gap: 12px;
}
/* cartão com fundo dourado suave (cor de encomenda), nos temas claro e escuro */
.cartao-entrega { --cor-entrega: var(--ouro); display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px 14px; padding: 12px; border-radius: var(--raio); background: color-mix(in srgb, var(--cor-entrega) 10%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--cor-entrega) 35%, var(--linha)); box-shadow: var(--sombra); }
.cartao-entrega .entrega-acoes { border-top-color: color-mix(in srgb, var(--cor-entrega) 40%, var(--linha)); }
.entrega-dados { display: grid; gap: 3px; align-content: start; min-width: 0; }
.entrega-dados .acesso-apto { justify-self: start; }
.entrega-tempo { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700; color: var(--destaque); }
.entrega-acoes { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px dashed var(--linha); }
.miniatura { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--linha); }
.miniatura.com-foto { cursor: zoom-in; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.fotos-retirada { white-space: nowrap; }
.fotos-retirada .miniatura { display: inline-flex; vertical-align: top; margin-right: 6px; }
.fotos-retirada .miniatura, .lista-entregas-un .miniatura { width: 48px; height: 48px; border-radius: 9px; }
.tabela-retiradas td { vertical-align: top; }
/* diálogo de receber e de dar baixa */
dialog.dialogo-entrega { max-width: 560px; }
.foto-entrega { position: relative; display: block; margin-bottom: 12px; border-radius: var(--raio); border: 2px dashed var(--linha); background: var(--superficie-2); overflow: hidden; cursor: pointer; }
.foto-entrega:hover, .foto-entrega:focus-within { border-color: var(--agua); }
.foto-entrega-previa { display: grid; place-items: center; gap: 6px; min-height: 130px; padding: 12px; text-align: center; font-weight: 700; color: var(--texto-2); }
.foto-entrega-previa img { max-width: 100%; max-height: 220px; border-radius: 10px; }
/* resultado da leitura automática da etiqueta, logo abaixo da foto */
.leitura-etiqueta { margin: -4px 0 12px; padding: 8px 12px; border-radius: 10px; font-size: .92rem; font-weight: 600; color: var(--texto-2); background: var(--superficie-2); }
.leitura-etiqueta[hidden] { display: none; }
.leitura-etiqueta.lendo { color: var(--agua); }
.leitura-etiqueta.lido { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--superficie)); }
.opcoes-unidade { display: grid; gap: 4px; margin-top: 6px; }
.opcoes-unidade button { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--superficie); text-align: left; cursor: pointer; font: inherit; }
.opcoes-unidade button:hover, .opcoes-unidade button:focus-visible { border-color: var(--agua); background: rgba(var(--agua-rgb), .08); }
.opcoes-unidade small { margin-left: auto; color: var(--texto-2); }
.quem-retira { display: grid; gap: 6px; }
.opcao-morador { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--linha); cursor: pointer; }
.opcao-morador:has(input:checked) { border-color: var(--agua); background: rgba(var(--agua-rgb), .1); box-shadow: inset 4px 0 0 var(--agua); }
.opcao-morador input { accent-color: var(--agua); }
.opcao-morador .iniciais { width: 38px; height: 38px; font-size: .8rem; }
/* Minha conta: as entregas da unidade */
.entregas-alerta { margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; font-weight: 700; background: rgba(var(--agua-rgb), .12); color: var(--destaque); }
.lista-entregas-un { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.lista-entregas-un li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.lista-entregas-un li span { display: grid; }
.entregas-unidade h3 { margin: 10px 0 4px; font-size: .95rem; }
@media (max-width: 640px) {
  .entregas-topo #receber { margin-left: 0; width: 100%; }
  .busca-entregas { max-width: none; }
  .grade-entregas { grid-template-columns: minmax(0, 1fr); }
  .cartao-entrega { grid-template-columns: 64px minmax(0, 1fr); }
  .cartao-entrega .miniatura { width: 64px; height: 64px; }
}
.secao-unidade .entregas-unidade { margin-top: 16px; }

/* ---------- entregas: botões de escolha, código da caixa, painel colorido e o campo em foco destacado ---------- */
dialog.dialogo-entrega { background: linear-gradient(180deg, rgba(var(--agua-rgb), .22), rgba(var(--agua-rgb), .12)), var(--superficie); }
.form-entrega .campo > span { font-weight: 700; color: var(--destaque); }
.form-entrega input:not([type=file]):not([type=hidden]), .form-entrega select, .form-entrega textarea { background: #fff; }
.form-entrega input:focus, .dialogo-entrega input:focus {
  background: #fffbe6 !important; border-color: #e0a526 !important; box-shadow: 0 0 0 4px rgba(224, 165, 38, .25) !important;
}
:root[data-modo="escuro"] .form-entrega input:not([type=file]):not([type=hidden]) { background: var(--superficie-2); }
:root[data-modo="escuro"] .form-entrega input:focus, :root[data-modo="escuro"] .dialogo-entrega input:focus { background: #3a3218 !important; }
#busca-unidade.escolhido { border-color: var(--agua); background: rgba(var(--agua-rgb), .08); font-weight: 700; }
.escolhas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.escolhas [role=radio] {
  min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--linha); background: var(--superficie);
  font: inherit; font-size: .88rem; font-weight: 700; color: var(--texto); cursor: pointer;
}
.escolhas [role=radio]:hover { border-color: var(--agua); }
.escolhas [role=radio][aria-checked="true"] { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); }
.escolhas [data-outra] { border-style: dashed; }
.mais-entrega { margin: 4px 0 8px; }
.mais-entrega summary { cursor: pointer; font-size: .86rem; font-weight: 700; color: var(--texto-2); padding: 4px 0; }
/* o código da caixa (o que o porteiro escreve com caneta) e o local */
.codigo-caixa { display: inline-flex; align-items: baseline; gap: 8px; }
.codigo-caixa b { font-size: 1.2rem; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--texto); background: #fff3c4; border: 1.5px solid #e0a526; border-radius: 8px; padding: 0 8px; }
.codigo-caixa span { font-size: .84rem; font-weight: 700; color: #9a6b0a; }
:root[data-modo="escuro"] .codigo-caixa b { background: #3a3218; color: #ffe08a; }
:root[data-modo="escuro"] .codigo-caixa span { color: #ffd166; }
dialog.dialogo-codigo { max-width: 380px; }
.codigo-gravado { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 6px 4px 2px; }
.codigo-grande { margin: 4px 0 0; font-size: 4.2rem; font-weight: 700; line-height: 1; letter-spacing: .06em; font-variant-numeric: tabular-nums;
  padding: 10px 22px; border-radius: var(--raio); background: #fff3c4; border: 3px solid #e0a526; color: #3d2c00; }
.local-grande { margin: 0; font-size: 1.5rem; font-weight: 700; color: #9a6b0a; }
.codigo-gravado .btn { margin-top: 10px; min-width: 160px; }

/* ---------- retirada: a comprovação (senha, QR, assinatura, foto ou sem comprovação) ---------- */
.comprovacao { margin: 4px 0 6px; }
.senha-retirada { font-size: 1.35rem !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center; max-width: 320px; }
.leitor-qr { display: grid; gap: 6px; justify-items: center; text-align: center; }
.leitor-qr video { width: 100%; max-height: 260px; border-radius: 12px; background: #000; object-fit: cover; }
.leitor-qr .qr-lido { color: #1b7a4a; font-weight: 700; }
.acoes-qr { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
canvas.assinatura { display: block; width: 100%; height: 180px; background: #fff; border: 2px dashed var(--linha); border-radius: 12px; touch-action: none; cursor: crosshair; }
.acoes-assinatura { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.comprovacao .escolhas [data-motivo] { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1.5px dashed var(--linha); background: var(--superficie); font: inherit; font-size: .84rem; font-weight: 700; color: var(--texto-2); cursor: pointer; }
.selo-comprovacao { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgba(var(--agua-rgb), .12); color: var(--petroleo-2); }
.selo-comprovacao.nenhuma { background: #fdecd2; color: #8a4b00; }
.selo-comprovacao.antiga { background: none; color: var(--texto-2); }
:root[data-modo="escuro"] .selo-comprovacao { color: var(--agua-claro); }
:root[data-modo="escuro"] .selo-comprovacao.nenhuma { background: #3d2a10; color: #ffc46b; }
/* Minha conta: a senha de retirada ao lado de cada entrega */
.senha-unidade { display: grid; justify-items: end; gap: 2px; margin-left: auto; text-align: right; }
.senha-unidade small { font-size: .75rem; color: var(--texto-2); }
.senha-unidade b { font-size: 1.15rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; color: var(--texto); }
img.qr-retirada { width: min(280px, 72vw); height: auto; image-rendering: pixelated; border-radius: 12px; background: #fff; padding: 6px; }

/* Portaria: os botões no lugar do título (Portaria e as páginas do IoT); o painel abre logo abaixo */
.cabecalho-paineis { margin-bottom: 16px; }
/* no celular os botões rolam de lado dentro da largura da tela, sem alargar a página */
.cabecalho-paineis > div { min-width: 0; max-width: 100%; }
.paineis-portaria { display: inline-flex; gap: 6px; max-width: 100%; box-sizing: border-box; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.paineis-portaria::-webkit-scrollbar { display: none; }
/* cada botão com a cor da sua parte, as mesmas das abas do IoT; o aberto fica preenchido */
.paineis-portaria button { --cor: var(--primaria); flex: none; white-space: nowrap; min-height: 40px; padding: 0 16px; border-radius: var(--raio-p);
  border: 1px solid color-mix(in srgb, var(--cor) 50%, transparent);
  background: color-mix(in srgb, var(--cor) 10%, var(--superficie)); color: var(--texto);
  font: inherit; font-size: .9375rem; font-weight: 500; cursor: pointer; transition: background-color var(--rapido) ease, border-color var(--rapido) ease; }
.paineis-portaria button:hover { background: color-mix(in srgb, var(--cor) 22%, var(--superficie)); }
.paineis-portaria button[aria-selected="true"] { background: var(--cor); border-color: var(--cor); color: #fff; }
.paineis-portaria [data-painel="portaria"][aria-selected="true"] { color: var(--sobre-primaria); }
.paineis-portaria button:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.iot-na-portaria { height: calc(100svh - 150px); border-radius: var(--raio-g); }
@media (max-width: 860px) {
  .iot-na-portaria { height: calc(100svh - 63px - 76px - 110px - env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
  .paineis-portaria button { min-height: 40px; padding: 0 14px; font-size: 1rem; }
}

/* ---------- Moradores: tipografia única (Roboto 500 nos títulos e nomes, 700 só nos números) e colunas à vista ---------- */
@media (min-width: 1100px) {
  /* o apartamento e o morador acompanham a rolagem da página, ao lado do quadro */
  .col-apto, .col-morador { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; }
}
.col-apto, .col-morador { padding: 20px 22px; }
.apto-cab h2 { font-size: 2rem; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.apto-cab h2 span { font-size: .875rem; font-weight: 500; }
.apto-cab p { font-size: .875rem; }
.item-texto b { font-weight: 500; font-size: .9375rem; }
.item-texto span { font-size: .8125rem; }
.detalhe-cab h2 { font-family: var(--fonte); font-weight: 500; font-size: 1.375rem; letter-spacing: -.01em; }
.foto-morador h3 { font-weight: 500; font-size: 1rem; }
/* o modelo do carro tem sempre espaço para aparecer inteiro; se faltar, quem quebra de linha são os botões */
.col-morador .veiculo { grid-template-columns: auto minmax(9em, 1fr) auto auto; }
.veiculo-dados b { font-weight: 500; }
/* no celular a página inteira rola: o quadro não prende os botões nem os títulos, e o bloco para abaixo da barra do topo */
@media (max-width: 1099px) {
  .col-quadro { overflow: visible; }
  .quadro-predio { overflow: visible; }
  .saltos-bloco, .quadro-bloco-nome { position: static; }
  .quadro-bloco { scroll-margin-top: 76px; }
}

/* ================= Portaria → Acessos ao vivo como painel (fica aberto o dia todo no micro da portaria) =================
   No computador: a tela ocupa a altura da janela sem rolar; cada coluna rola sozinha. O último acesso de cada coluna
   é grande (para ler de longe); os anteriores viram linhas compactas (hora, rosto, apto, nome e placa). */
.relogio-portaria { font-size: 1.75rem; font-weight: 500; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--texto); }
.barra-ao-vivo-acoes { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.botao-tela-cheia svg { width: 16px; height: 16px; }
.barra-ao-vivo { justify-content: flex-start; gap: 8px 16px; }

@media (min-width: 901px) {
  /* a página da Portaria com os acessos ao vivo: título e abas na mesma linha, o painel no resto da altura */
  .conteudo:has(.acessos-ao-vivo) {
    max-width: none; height: 100vh; height: 100dvh; box-sizing: border-box; padding-top: 18px; padding-bottom: 18px;
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 24px; align-items: center;
  }
  .conteudo:has(.acessos-ao-vivo) > .cabecalho-tela { margin: 0 0 14px; }
  .conteudo:has(.acessos-ao-vivo) > .abas-portaria { margin: 0 0 14px; justify-self: start; }
  .conteudo:has(.acessos-ao-vivo) > #area-portaria { grid-column: 1 / -1; align-self: stretch; display: flex; flex-direction: column; min-height: 0; }
  .acessos-ao-vivo { flex: 1; min-height: 0; align-items: stretch; gap: 18px; }
  .coluna-acessos { display: flex; flex-direction: column; min-height: 0; padding: 14px 12px 0 14px; }
  .lista-acessos { flex: 1; min-height: 0; overflow-y: auto; align-content: start; grid-auto-rows: max-content; gap: 6px; padding: 2px 4px 14px 2px; scrollbar-width: thin; scrollbar-gutter: stable; }
  .coluna-acessos h2 { font-size: 1.125rem; }
  .coluna-acessos h2 span { font-size: .8125rem; }

  /* o último acesso: grande */
  .lista-acessos > .cartao-acesso:first-child { margin-bottom: 8px; padding: 16px 16px 16px 20px; }
  .lista-acessos > .cartao-acesso:first-child .acesso-hora { font-size: 1.625rem; font-weight: 500; }
  .lista-acessos > .cartao-acesso:first-child .acesso-leitor { font-size: .875rem; }
  .lista-acessos > .cartao-acesso:first-child .acesso-quem { gap: 16px; }
  .lista-acessos > .cartao-acesso:first-child .acesso-apto { padding: 3px 12px; font-size: .9375rem; }
  .lista-acessos > .cartao-acesso:first-child .acesso-apto b { font-size: 1.375rem; }
  .lista-acessos > .cartao-acesso:first-child .nome-morador { font-size: 1.375rem; font-weight: 500; line-height: 1.2; }
  .lista-acessos > .cartao-acesso:first-child .acesso-quem p { font-size: .9375rem; }
  .c-entrada .lista-acessos > .cartao-acesso:first-child .iniciais.grande, .c-saida .lista-acessos > .cartao-acesso:first-child .iniciais.grande { --t: clamp(64px, calc(100dvh - 700px), 104px); width: var(--t); height: var(--t); font-size: calc(var(--t) * .26); }
  .c-pedestre .lista-acessos > .cartao-acesso:first-child .iniciais.grande { --t: clamp(76px, calc(100dvh - 560px), 148px); width: var(--t); height: var(--t); font-size: calc(var(--t) * .26); }
  .c-pedestre .lista-acessos > .cartao-acesso:first-child .nome-morador { font-size: 1.5rem; }
  .lista-acessos > .cartao-acesso:first-child .acesso-veiculo .placa { --pw: 136px; }
  .lista-acessos > .cartao-acesso:first-child .acesso-carro { font-size: 1rem; }
  .lista-acessos > .cartao-acesso:first-child .acesso-alerta { font-size: 1.125rem; }

  /* os anteriores: uma linha cada (hora | rosto | apto e nome | placa) */
  .lista-acessos > .cartao-acesso:not(:first-child) {
    display: grid; grid-template-columns: 4.6em auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 7px 10px 7px 14px;
  }
  .lista-acessos > .cartao-acesso:not(:first-child) :is(header, .acesso-quem, .acesso-veiculo) { display: contents; }
  .lista-acessos > .cartao-acesso:not(:first-child) :is(.acesso-leitor, .acesso-quem p, .acesso-carro, .selo-tag) { display: none; }
  .lista-acessos > .cartao-acesso:not(:first-child) .acesso-hora { font-size: .9375rem; font-weight: 500; color: var(--texto-2); }
  .lista-acessos > .cartao-acesso:not(:first-child) .iniciais.grande { width: 36px; height: 36px; font-size: .75rem; }
  .lista-acessos > .cartao-acesso:not(:first-child) .acesso-quem > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .lista-acessos > .cartao-acesso:not(:first-child) .acesso-apto { flex: none; margin: 0; padding: 1px 8px; font-size: .75rem; }
  .lista-acessos > .cartao-acesso:not(:first-child) .acesso-apto b { font-size: .9375rem; }
  .lista-acessos > .cartao-acesso:not(:first-child) .nome-morador { min-width: 0; font-size: .9375rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lista-acessos > .cartao-acesso:not(:first-child) .placa { --pw: 82px; }
  .lista-acessos > .cartao-acesso:not(:first-child) .acesso-alerta { grid-column: 2 / -1; font-size: .875rem; }

  /* Tela cheia (modo painel): sem menu, sem título e sem abas; só o relógio, o estado e as três colunas */
  body.modo-painel .casca { grid-template-columns: minmax(0, 1fr); }
  body.modo-painel .menu, body.modo-painel .topo-movel,
  body.modo-painel .conteudo:has(.acessos-ao-vivo) > :is(.cabecalho-tela, .abas-portaria) { display: none; }
  body.modo-painel .conteudo:has(.acessos-ao-vivo) { padding: 14px 18px; grid-template-rows: minmax(0, 1fr); }
  body.modo-painel .relogio-portaria { font-size: 2.25rem; }
}

/* cada coluna se arruma pela própria largura (monitor 1366 com o menu aberto deixa a coluna estreita) */
.acesso-apto { white-space: nowrap; }
@media (min-width: 901px) {
  .coluna-acessos { container-type: inline-size; }
  @container (max-width: 400px) {
    .lista-acessos > .cartao-acesso:first-child .acesso-quem { gap: 12px; }
    .c-entrada .lista-acessos > .cartao-acesso:first-child .iniciais.grande, .c-saida .lista-acessos > .cartao-acesso:first-child .iniciais.grande { --t: clamp(56px, calc(100dvh - 640px), 72px); width: var(--t); height: var(--t); font-size: calc(var(--t) * .28); }
    .c-pedestre .lista-acessos > .cartao-acesso:first-child .iniciais.grande { --t: clamp(64px, calc(100dvh - 560px), 120px); width: var(--t); height: var(--t); font-size: calc(var(--t) * .26); }
    .lista-acessos > .cartao-acesso:first-child .acesso-apto b { font-size: 1.25rem; }
    .lista-acessos > .cartao-acesso:first-child .nome-morador { font-size: 1.25rem; }
    .lista-acessos > .cartao-acesso:first-child .acesso-veiculo .placa { --pw: 116px; }
    /* linha compacta: hora, apto e nome (o rosto e a placa saem para o nome caber) */
    .lista-acessos > .cartao-acesso:not(:first-child) { grid-template-columns: 4.6em minmax(0, 1fr); }
    .lista-acessos > .cartao-acesso:not(:first-child) :is(.iniciais, .placa) { display: none; }
    .lista-acessos > .cartao-acesso:not(:first-child) .acesso-apto span, .lista-acessos > .cartao-acesso:not(:first-child) .acesso-apto { gap: 4px; }
  }
}