/* =====================================================================
   Portal Imobipop — o que o plugin precisa além do portal.css do design.
   O portal.css vem pronto do pacote de design (Site Imobipop/portal-imobipop) e
   não é editado aqui: quando vier versão nova, é só trocar o arquivo.
   Aqui só entram peças que o design não cobre (modo de teste, campos do chamado,
   tela Equipe, paginação) usando as mesmas variáveis do design.
   ===================================================================== */

/* "hidden" vence o display dos componentes (.portal-campo é flex) */
.portal [hidden] { display: none !important; }

/* pular para o conteúdo (teclado) */
.portal .portal-pular { position: absolute; left: -9999px; }
.portal .portal-pular:focus { left: var(--esp-4); top: var(--esp-2); z-index: 10; padding: var(--esp-2) var(--esp-3); border-radius: var(--raio); background: var(--cor-superficie); }

/* ---------- modo de teste (só no computador) ---------- */
.portal-faixa-teste { padding: 6px var(--esp-4); background: #fff1c2; color: #5c4200; font-size: 13px; font-weight: 600; text-align: center; }
.portal-codigo-teste { padding: var(--esp-3) var(--esp-4); border-radius: var(--raio); background: #fff1c2; color: #5c4200; font-size: 14px; }
.portal-codigo-teste strong { font-family: var(--fonte-mono); font-size: 18px; letter-spacing: .1em; }

/* ---------- formulários: tipos que o portal.css não lista ---------- */
.portal-form input[type="search"], .portal-form input[type="date"], .portal-form input[type="datetime-local"], .portal-form input[type="url"], .portal-form input:not([type]) {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1.5px solid var(--cor-borda-forte); border-radius: var(--raio);
  background: var(--cor-superficie); color: var(--cor-titulo);
  font: inherit; font-size: 16px;
}
.portal-form textarea { min-height: 96px; }
.portal-caixas { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.portal .portal-caixa { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: 44px; padding: 0 var(--esp-3); border: 1.5px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-superficie); color: var(--cor-titulo); font-size: 14px; font-weight: 600; cursor: pointer; }
.portal .portal-caixa input { width: 18px; height: 18px; margin: 0; accent-color: var(--cor-acao); }
.portal .portal-caixa:has(input:checked) { border-color: var(--cor-acao); background: var(--cor-campo); }

/* ---------- fila da equipe ---------- */
/* filas da equipe: uma linha só; no celular rola para o lado */
.portal-subtopo .portal-abas { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.portal .portal-subtopo .portal-abas a { flex: none; white-space: nowrap; }
.portal-visoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.portal .portal-visoes a { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: 40px; padding: 0 var(--esp-3); border: 1px solid var(--cor-borda); border-radius: 999px; background: var(--cor-superficie); color: var(--cor-titulo); font-size: 14px; font-weight: 600; text-decoration: none; }
.portal .portal-visoes a[aria-current="page"] { border-color: var(--cor-titulo); background: var(--cor-titulo); color: var(--cor-superficie); }
.portal .portal-visoes a[aria-current="page"] .portal-contagem { background: var(--cor-superficie); }
.portal-filtros-busca { grid-column: 1 / -1; }
.portal-filtros-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.portal-fila-total { font-size: 14px; color: var(--cor-suave); }
.portal-fila-resumo strong { overflow-wrap: anywhere; }
.portal-fila-sem-resp { font-style: italic; }
.portal-paginas { display: flex; justify-content: space-between; gap: var(--esp-3); }

/* ---------- um chamado ---------- */
.portal-titulo-pagina .portal-selos { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-1); }
.portal-coluna { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.portal-campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--esp-5); }
.portal-campos > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--cor-borda); min-width: 0; }
.portal-campos dt { font-size: 12px; color: var(--cor-suave); }
.portal-campos dd { font-weight: 600; color: var(--cor-titulo); overflow-wrap: anywhere; }
.portal-campos .portal-campo-largo dd { font-weight: 400; color: var(--cor-texto); }
.portal-campos-edicao { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4) var(--esp-5); }
/* o portal.css zera padding/borda de todo fieldset: o fieldset que é cartão recupera os do cartão */
.portal fieldset.portal-cartao { padding: var(--esp-5); border: 1px solid var(--cor-borda); }
/* legenda dentro do cartão (sem o float ela fica em cima da borda do fieldset) */
.portal-secao-edicao > legend { float: left; width: 100%; margin-bottom: 0; font-family: var(--fonte-titulo); font-size: 20px; font-weight: 700; color: var(--cor-titulo); }
.portal-secao-edicao > legend + * { clear: both; }
.portal-valor-fixo { font-weight: 600; color: var(--cor-titulo); overflow-wrap: anywhere; }
.portal-barra-salvar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: var(--esp-4); padding: var(--esp-3) 0; background: var(--cor-fundo); }
.portal-historico-texto { white-space: pre-line; overflow-wrap: anywhere; }
.portal-historico li.portal-do-sistema { text-align: left; }

/* ---------- morador: lista de chamados ---------- */
.portal-chamados-morador ul > li { border-top: 1px solid var(--cor-borda); }
.portal-chamados-morador ul summary { display: flex; align-items: center; gap: var(--esp-3); min-height: 64px; padding: var(--esp-3) 0; cursor: pointer; list-style: none; }
.portal-chamados-morador ul summary::-webkit-details-marker { display: none; }
.portal-chamados-morador ul summary > span:first-child { flex: 1; display: flex; flex-direction: column; gap: var(--esp-1); min-width: 0; }
.portal-chamados-morador ul summary svg { flex: none; color: var(--cor-suave); transition: transform .15s; }
.portal-chamados-morador details[open] summary svg { transform: rotate(90deg); }
.portal-chamados-morador .portal-campos { padding-bottom: var(--esp-3); }

/* ---------- tela Equipe ---------- */
.portal-tabela-rolagem { overflow-x: auto; }
.portal-tabela-equipe { width: 100%; border-collapse: collapse; }
.portal-tabela-equipe th { padding: var(--esp-2); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-suave); text-align: left; }
.portal-tabela-equipe td { padding: var(--esp-2); border-top: 1px solid var(--cor-borda); vertical-align: middle; }
.portal-tabela-equipe td:first-child input { min-width: 180px; }
.portal-tabela-equipe td:nth-child(2) input { min-width: 220px; }
.portal-tabela-equipe input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--cor-acao); }

@container portal (min-width: 760px) {
  .portal fieldset.portal-cartao { padding: var(--esp-6); }
  .portal-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-campos .portal-campo-largo { grid-column: 1 / -1; }
  .portal-campos-edicao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-campos-edicao .portal-campo-largo { grid-column: 1 / -1; }
  .portal-filtros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .portal-filtros-acoes { grid-column: 1 / -1; }
}

/* ---------- 2ª via do boleto (tela e impressão) ---------- */
.portal-sem-js [data-portal-imprimir] { display: none !important; }
.bol-barra-ferramentas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.bol-folha { position: relative; background: #fff; color: #000; border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); padding: var(--esp-5); font-family: Arial, Helvetica, sans-serif; font-size: 12px; overflow-x: auto; }
.bol-cancelado::after { content: "CANCELADO"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 72px; font-weight: 700; color: rgba(180, 35, 24, .18); transform: rotate(-18deg); pointer-events: none; }
.bol-parte { min-width: 640px; }
.bol-cabeca { display: flex; align-items: flex-end; gap: 0; border-bottom: 2px solid #000; padding-bottom: 4px; }
.bol-banco { font-size: 20px; font-weight: 700; padding-right: 12px; }
.bol-codbanco { font-size: 20px; font-weight: 700; padding: 0 12px; border-left: 2px solid #000; border-right: 2px solid #000; }
.bol-linha { flex: 1; text-align: right; font-family: var(--fonte-mono); font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.bol-tabela { width: 100%; border-collapse: collapse; }
.bol-tabela td { border: 1px solid #000; border-top: 0; padding: 2px 6px 4px; vertical-align: top; font-size: 12px; line-height: 1.35; }
.bol-tabela small { display: block; font-size: 9px; color: #333; text-transform: none; }
.bol-direita { width: 26%; text-align: right; }
.bol-instrucoes span { display: block; }
.bol-miudo { font-size: 10px; }
.bol-demonstrativo { width: 100%; margin-top: 2px; border-collapse: collapse; font-size: 11px; }
.bol-tabela .bol-demonstrativo td { border: 0; padding: 1px 0; }
.bol-tabela .bol-demonstrativo td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; }
.bol-demonstrativo .bol-total td { border-top: 1px solid #000; font-weight: 700; padding-top: 3px; }
.bol-legenda { margin: 4px 0 0; text-align: right; font-size: 9px; color: #333; }
.bol-corte { margin: var(--esp-5) 0; border-top: 1px dashed #000; text-align: right; font-size: 9px; color: #333; }
.bol-rodape { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--esp-3); margin-top: var(--esp-3); }
.bol-codigo .portal-barras { display: block; width: 103mm; height: 13mm; }
@media print {
  @page { size: A4; margin: 10mm; }
  body { background: #fff !important; }
  .portal { min-height: 0; background: #fff; }
  .portal-topo, .portal-rodape, .portal-faixa-teste, .portal-pular, .bol-barra-ferramentas, .portal-aviso { display: none !important; }
  .portal-principal.bol-pagina { padding: 0; max-width: none; }
  .bol-folha { border: 0; padding: 0; overflow: visible; }
  .bol-parte { min-width: 0; }
}

/* ---------- abrir chamado: cada categoria mostra só as perguntas dela (sem JavaScript) ---------- */
.ch-grupo { display: none; flex-direction: column; gap: var(--esp-4); }
.ch-form:has(#ch-cat-manutencao-apartamento:checked) .ch-grupo-manutencao-apartamento,
.ch-form:has(#ch-cat-manutencao-condominio:checked) .ch-grupo-manutencao-condominio,
.ch-form:has(#ch-cat-problemas-condominio:checked) .ch-grupo-problemas-condominio,
.ch-form:has(#ch-cat-saida:checked) .ch-grupo-saida,
.ch-form:has(#ch-cat-financeiro:checked) .ch-grupo-financeiro,
.ch-form:has(#ch-cat-outros:checked) .ch-grupo-outros { display: flex; }
/* navegador sem :has — mostra tudo (o servidor só lê as perguntas da categoria escolhida) */
@supports not selector(:has(*)) { .ch-grupo { display: flex; } }
.ch-form:has(#ch-cat-manutencao-apartamento:checked) .ch-fotos,
.ch-form:has(#ch-cat-manutencao-condominio:checked) .ch-fotos,
.ch-form:has(#ch-cat-problemas-condominio:checked) .ch-fotos,
.ch-form:has(#ch-cat-outros:checked) .ch-fotos { display: flex; }
.ch-fotos { display: none; }
@supports not selector(:has(*)) { .ch-fotos { display: flex; } }
.ch-datahora { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-2); }
.ch-form:has(#ch-local-pc-outro-apartamento:checked) .ch-outro-apto { display: flex; }
.ch-outro-apto { display: none; }
@supports not selector(:has(*)) { .ch-outro-apto { display: flex; } }
.portal-fotos-lista { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.portal .portal-fotos-lista a { display: block; width: 88px; height: 88px; border-radius: var(--raio); overflow: hidden; background: var(--cor-trilho); }
.portal-fotos-lista img { width: 100%; height: 100%; object-fit: cover; }

.portal-estado-icone.portal-estado-ok { background: var(--ok-fundo); color: var(--ok-texto); }

/* ---------- Portal do prédio (conteúdo trazido do Notion; class-predio-tela.php) ---------- */
.pc-topo { position: relative; margin-bottom: 44px; }
.pc-capa { border-radius: var(--raio-cartao); overflow: hidden; background: var(--cor-trilho); aspect-ratio: 4 / 1; min-height: 120px; max-height: 260px; }
.pc-capa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pc-capa-secao { margin: calc(-1 * var(--esp-5)) calc(-1 * var(--esp-5)) 0; border-radius: var(--raio-cartao) var(--raio-cartao) 0 0; aspect-ratio: 5 / 1; }
.pc-avatar { position: absolute; left: var(--esp-5); bottom: -36px; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: var(--cor-superficie); border: 4px solid var(--cor-superficie); box-shadow: var(--sombra); }
span.pc-avatar { display: grid; place-items: center; font-size: 44px; }
.pc-topo-sem-capa { min-height: 60px; }
.pc-topo-sem-capa .pc-avatar { position: static; }
.pc-conteudo { gap: var(--esp-3); line-height: 1.55; color: var(--cor-texto); overflow-wrap: anywhere; }
.pc-conteudo p { margin: 0; }
.pc-conteudo .pc-vazio { height: 4px; }
.pc-conteudo a { color: var(--cor-link); }
.pc-conteudo h2, .pc-conteudo h3, .pc-conteudo h4 { margin: var(--esp-3) 0 0; font-family: var(--fonte-titulo); color: var(--cor-titulo); line-height: 1.25; }
.pc-h1 { font-size: 24px; }
.pc-h2 { font-size: 20px; display: flex; align-items: center; gap: var(--esp-2); }
.pc-h3 { font-size: 17px; }
.pc-lista { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 4px; }
.pc-lista .pc-lista { margin-top: 4px; }
.pc-filhos { padding-left: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-2); }
.pc-todo.pc-feito { color: var(--cor-suave); text-decoration: line-through; }
.pc-citacao { margin: 0; padding: var(--esp-2) var(--esp-4); border-left: 3px solid var(--cor-borda-forte); color: var(--cor-texto); }
.pc-linha { border: 0; border-top: 1px solid var(--cor-borda); margin: var(--esp-2) 0; width: 100%; }
.pc-aviso { display: flex; gap: var(--esp-3); padding: var(--esp-4); border-radius: var(--raio); background: var(--neutro-fundo); }
.pc-aviso-icone { flex: none; width: 24px; height: 24px; font-size: 20px; line-height: 24px; text-align: center; object-fit: contain; }
.pc-aviso-texto { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.pc-colunas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); }
.pc-coluna { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.pc-tabela-rolagem { overflow-x: auto; border: 1px solid var(--cor-borda); border-radius: var(--raio); }
.pc-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.pc-tabela th, .pc-tabela td { padding: 8px 12px; border-bottom: 1px solid var(--cor-borda); text-align: left; vertical-align: top; white-space: nowrap; }
.pc-tabela th { background: var(--cor-campo); color: var(--cor-titulo); font-weight: 700; }
.pc-tabela tr:last-child td { border-bottom: 0; }
.pc-nota { font-size: 13px; color: var(--cor-suave); }
.pc-imagem { margin: 0; }
.pc-imagem img { display: block; max-width: 100%; height: auto; border-radius: var(--raio); }
.pc-imagem figcaption { margin-top: 6px; font-size: 13px; color: var(--cor-suave); }
.portal .pc-documento, .portal .pc-link { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-campo); color: var(--cor-titulo); text-decoration: none; }
.pc-documento svg, .pc-link svg { flex: none; color: var(--cor-marca-texto); }
.pc-documento span, .pc-link span { display: flex; flex-direction: column; min-width: 0; }
.pc-documento strong, .pc-link strong { font-size: 15px; line-height: 1.3; }
.pc-documento small, .pc-link small { font-size: 12px; color: var(--cor-suave); }
.portal .pc-documento:hover, .portal .pc-link:hover { border-color: var(--cor-borda-forte); }
.pc-toggle summary { cursor: pointer; font-weight: 600; color: var(--cor-titulo); display: flex; align-items: center; gap: var(--esp-2); }
.pc-toggle[open] summary { margin-bottom: var(--esp-2); }
.pc-titulo-secao { display: flex; align-items: center; gap: var(--esp-3); }
.pc-titulo-secao h2 { margin: 0; font-size: 26px; }
.pc-icone-grande { width: 40px; height: 40px; font-size: 34px; line-height: 40px; object-fit: contain; flex: none; }
.pc-icone { width: 22px; height: 22px; font-size: 19px; line-height: 22px; object-fit: contain; flex: none; display: inline-block; text-align: center; }
.pc-subpagina { display: flex; flex-direction: column; gap: var(--esp-3); padding-top: var(--esp-3); border-top: 1px solid var(--cor-borda); }
.pc-chamado { box-shadow: none; background: var(--cor-campo); }
.pc-chamado h3 { margin: 0; }
.pc-grade-titulo { margin: var(--esp-6) 0 var(--esp-3); font-family: var(--fonte-titulo); font-size: 20px; color: var(--cor-titulo); }
.pc-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-2); margin-bottom: var(--esp-6); }
.portal .pc-bloco-secao { display: flex; align-items: center; gap: var(--esp-3); min-height: 56px; padding: var(--esp-3) var(--esp-4); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); color: var(--cor-titulo); font-weight: 600; text-decoration: none; box-shadow: var(--sombra); }
.portal .pc-bloco-secao:hover { border-color: var(--cor-borda-forte); }
.pc-bloco-icone { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; }
.pc-bloco-icone .pc-icone { width: 26px; height: 26px; font-size: 22px; line-height: 26px; }
.pc-bloco-titulo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pc-bloco-titulo small { font-size: 12px; font-weight: 500; color: var(--cor-suave); }
.pc-bloco-secao > svg { flex: none; color: var(--cor-suave); }
.portal .portal-indice a[aria-current="page"] { color: var(--cor-marca-texto); }
@media (min-width: 720px) {
  .pc-colunas { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .pc-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-avatar { width: 104px; height: 104px; bottom: -44px; left: var(--esp-6); }
  .pc-topo { margin-bottom: 56px; }
  .pc-capa-secao { margin: calc(-1 * var(--esp-6)) calc(-1 * var(--esp-6)) 0; }
}
@media (min-width: 1024px) {
  .pc-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portal .portal-indice a[aria-current="page"] { background: var(--cor-superficie); box-shadow: var(--sombra); }
}