/* =============================================================
   SEMOG · Admin Tahoe — páginas públicas de assembleia (.asbp-*)

   USE: depois de tokens.css, pills.css e tahoe.css. As páginas que se
   abrem no celular, sem menu: o link único do condômino (identifica →
   código por e-mail → voto), o redirecionamento do antigo check-in, a
   revisão da ata pelo presidente da mesa e a procuração prévia (esta, só
   proposta para a F4d: não existe no app). Comportamento em
   assembleia-publica.js; regras em assembleia-publica-core.js.

   As páginas são montadas com os componentes do kit (.tk-*, em
   componentes.css), que este arquivo IMPORTA, como onboarding.css faz.
   Tudo vive sob `.tahoe-shell` — e sob `.tahoe-portal` —, como o resto
   do kit. O contêiner da página é `.tahoe-shell.asbp`: tira a grade com
   sidebar e o fundo azul do shell interno e põe a coluna estreita de
   leitura no celular.

   Mobile-first e de toque: alvo de 44px em qualquer largura (o --prest-alvo
   escrito no próprio shell, que é onde ele alcança os componentes), campo
   com 16px em qualquer largura (abaixo disso o iOS dá zoom ao focar),
   safe-area no rodapé e nas laterais, prefers-reduced-motion.

   As mesmas regras de componentes.css: tipografia só pelos papéis
   --type-*, cor só por token semântico, sem literal nenhum. Nada de
   caixa-alta com tracking, numeral decorativo ou serifa.

   Prefixo .asbp-*: não existe no tahoe.css nem em componentes.css, e não
   colide com o .asb-* das telas da equipe. As classes antigas das páginas
   públicas (.pauta, .ata-*, .unit-*, .opt…) não são usadas aqui.

   CLASSE DOBRADA (`.asbp-cartao.asbp-cartao`): componentes.css pode ser
   importado mais de uma vez; regra daqui que sobrescreve um componente
   vence por especificidade, nunca pela ordem
   (tests/camadas-especificidade.test.js).
   ============================================================= */
@import "./componentes.css";

/* ─────────── Página ─────────── */
.tahoe-shell.asbp{
  display:block;min-height:100vh;min-height:100dvh;
  background:var(--bg-soft);color:var(--fg);
  --prest-alvo:44px;  /* toque em qualquer largura; --tk-alvo acompanha */
}
.tahoe-shell.asbp.asbp-com-proto{position:relative;--tk-rodape:76px;}
.tahoe-shell.asbp.asbp-com-proto:has(.asbp-proto.recolhida){--tk-rodape:0px;}

/* Sprite: sem caixa, mas renderizável para o <use>. */
:is(.tahoe-shell,.tahoe-portal) .asbp-sprite{position:absolute;width:0;height:0;overflow:hidden;}

:is(.tahoe-shell,.tahoe-portal) .asbp-pg{
  max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:var(--tk-v-bloco);
  padding:0 max(var(--space-4), env(safe-area-inset-right)) calc(var(--space-6) + env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
}
.tahoe-shell.asbp.asbp-com-proto .asbp-pg{padding-bottom:calc(var(--space-6) + 72px + env(safe-area-inset-bottom));}

/* Topo: marca da Semog e o selo de demonstração. */
:is(.tahoe-shell,.tahoe-portal) .asbp-topo{
  display:flex;align-items:center;gap:var(--space-2);min-height:56px;
  padding-top:max(var(--space-2), env(safe-area-inset-top));
}
:is(.tahoe-shell,.tahoe-portal) .asbp-marca{
  width:32px;height:32px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);background:var(--link);color:var(--fg-inverse);
}
:is(.tahoe-shell,.tahoe-portal) .asbp-marca svg{width:16px;height:auto;}
:is(.tahoe-shell,.tahoe-portal) .asbp-org{
  flex:1;min-width:0;font-family:var(--type-title-font);font-size:var(--type-title-size);
  line-height:var(--type-title-leading);font-weight:600;color:var(--fg);
}

/* Qual assembleia: título e quando, acima do cartão. */
:is(.tahoe-shell,.tahoe-portal) .asbp-assemb{display:flex;flex-direction:column;gap:2px;padding:0 var(--space-1);min-width:0;}
:is(.tahoe-shell,.tahoe-portal) .asbp-assemb[hidden]{display:none;}

/* O cartão da tela: um por estado, só o atual à vista. */
:is(.tahoe-shell,.tahoe-portal) .asbp-cartao.asbp-cartao{padding:var(--space-5);}
:is(.tahoe-shell,.tahoe-portal) .asbp-cartao[hidden]{display:none;}
:is(.tahoe-shell,.tahoe-portal) .asbp-cartao > h1:focus{outline:none;}
:is(.tahoe-shell,.tahoe-portal) .asbp-cartao > h1:focus-visible{outline:2px solid var(--link);outline-offset:4px;border-radius:var(--radius-sm);}
/* Botão solto no cartão (terciário "no eixo") fica à esquerda, não estica. */
:is(.tahoe-shell,.tahoe-portal) .asbp-cartao > .tk-btn{align-self:flex-start;}
:is(.tahoe-shell,.tahoe-portal) .asbp-form{display:flex;flex-direction:column;gap:var(--tk-v-bloco);min-width:0;}

/* Título e meta de um item da pauta, juntos pela entrelinha. */
:is(.tahoe-shell,.tahoe-portal) .asbp-item{display:flex;flex-direction:column;gap:2px;min-width:0;}
:is(.tahoe-shell,.tahoe-portal) .asbp-item > *{margin:0;}

/* Ícone de estado na coluna .ic da linha: a cor é o estado. */
:is(.tahoe-shell,.tahoe-portal) .tk-linha > .ic[data-asbp-tom="sucesso"]{color:var(--success);}
:is(.tahoe-shell,.tahoe-portal) .tk-linha > .ic[data-asbp-tom="aviso"]{color:var(--warning-fg);}
:is(.tahoe-shell,.tahoe-portal) .tk-linha > .ic[data-asbp-tom="info"]{color:var(--info-fg);}

/* Rodapé da página: quem procurar e para que servem os dados. */
:is(.tahoe-shell,.tahoe-portal) .asbp-rodape{text-align:center;padding:0 var(--space-2);}  /* a cor vem do .tk-t-meta */

/* ─────────── Campos ───────────
   16px em qualquer largura e rótulo no papel do corpo: o campo é a tela. */
.tahoe-shell.asbp .tk-input{font-size:var(--type-title-size);}
.tahoe-shell.asbp .tk-campo > label,
.tahoe-shell.asbp .tk-campo > .rotulo{font-size:var(--type-body-size);color:var(--fg);}
.tahoe-shell.asbp .tk-input.asbp-codigo{
  min-height:56px;text-align:center;letter-spacing:0.3em;
  font-family:var(--type-num-font);font-size:var(--type-page-size);font-variant-numeric:var(--type-num-variant);
}
/* Erro à vista no celular: o contorno do campo vira a cor de perigo (o
   halo claro do kit some na luz do sol). */
.tahoe-shell.asbp .tk-input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--danger);}
.tahoe-shell.asbp .tk-area.asbp-area{min-height:120px;width:100%;padding:var(--space-3);}

/* ─────────── Escolha em cartão (rádio/checkbox) ─────────── */
:is(.tahoe-shell,.tahoe-portal) .asbp-opcoes{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--tk-v-item);min-width:0;}
:is(.tahoe-shell,.tahoe-portal) .asbp-opcoes > legend{padding:0;margin-bottom:var(--space-2);}
:is(.tahoe-shell,.tahoe-portal) .asbp-opcoes[hidden]{display:none;}
:is(.tahoe-shell,.tahoe-portal) .asbp-opcao{
  display:flex;align-items:flex-start;gap:var(--space-3);min-height:56px;padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-md);background:var(--bg);box-shadow:inset 0 0 0 1px var(--border-strong);cursor:pointer;
  font-size:var(--type-body-size);line-height:var(--type-body-leading);
  transition:box-shadow 120ms ease, background-color 120ms ease;-webkit-tap-highlight-color:transparent;
}
:is(.tahoe-shell,.tahoe-portal) .asbp-opcao:hover{background:var(--bg-soft);}
:is(.tahoe-shell,.tahoe-portal) .asbp-opcao:active{background:var(--tk-lavado-forte);}
:is(.tahoe-shell,.tahoe-portal) .asbp-opcao:has(input:checked){box-shadow:inset 0 0 0 2px var(--link);background:var(--info-soft);}
:is(.tahoe-shell,.tahoe-portal) .asbp-opcoes[aria-invalid="true"] .asbp-opcao{box-shadow:inset 0 0 0 1px var(--danger);}
:is(.tahoe-shell,.tahoe-portal) .asbp-opcao:has(input:focus-visible){outline:2px solid var(--link);outline-offset:2px;}
:is(.tahoe-shell,.tahoe-portal) .asbp-opcao input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--link);}
:is(.tahoe-shell,.tahoe-portal) .asbp-opcao > span{display:flex;flex-direction:column;gap:2px;min-width:0;}
:is(.tahoe-shell,.tahoe-portal) .asbp-opcao b{font-weight:600;}
/* Unidade com débito na lista do voto: aparece (sumir gera ligação para a
   administradora), sem caixa de marcar e com o motivo — no tom de aviso. */
:is(.tahoe-shell,.tahoe-portal) .asbp-opcao.asbp-bloqueada{
  cursor:default;background:var(--warning-soft);color:var(--warning-fg);box-shadow:inset 0 0 0 1px var(--warning-border);
}
:is(.tahoe-shell,.tahoe-portal) .asbp-opcao.asbp-bloqueada .tk-t-meta{color:inherit;}

/* ─────────── Passo 3: as unidades da pessoa e a presença ─────────── */
:is(.tahoe-shell,.tahoe-portal) .asbp-contexto{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--bg-soft);min-width:0;
}
:is(.tahoe-shell,.tahoe-portal) .asbp-contexto > p{margin:0;min-width:0;}

/* ─────────── Ata ───────────
   O documento em leitura: papel claro sobre o cartão, cabeçalho com a
   versão, uma seção por parte da ata. */
:is(.tahoe-shell,.tahoe-portal) .asbp-ata{
  display:flex;flex-direction:column;gap:var(--tk-v-secao);min-width:0;
  padding:var(--space-4);border-radius:var(--radius-md);background:var(--bg-soft);
}
:is(.tahoe-shell,.tahoe-portal) .asbp-ata-h{display:flex;align-items:center;gap:var(--space-2);min-width:0;}
:is(.tahoe-shell,.tahoe-portal) .asbp-ata-h > h2{flex:1;min-width:0;margin:0;}
:is(.tahoe-shell,.tahoe-portal) .asbp-ata-h > svg{width:18px;height:18px;flex:none;color:var(--fg-muted);}
:is(.tahoe-shell,.tahoe-portal) .asbp-ata-sec{display:flex;flex-direction:column;gap:var(--tk-v-item);min-width:0;}
:is(.tahoe-shell,.tahoe-portal) .asbp-ata-sec > *{margin:0;}

/* ─────────── Barra de estados do protótipo ───────────
   NÃO é produto: faixa escura rotulada "Protótipo · estado", presa embaixo,
   montada pelo assembleia-publica.js. Mesmo contrato da barra da
   Prestação e do Onboarding, com o mesmo recolher (TahoeKit.recolheBarra):
   recolhida, vira um botão que mora no respiro do fim da página. */
:is(.tahoe-shell,.tahoe-portal) .asbp-proto{
  position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;transform:translateX(-50%);
  display:flex;align-items:center;gap:var(--space-2);max-width:calc(100vw - 32px);
  padding:6px 6px 6px var(--space-4);border-radius:var(--radius-pill);
  background:var(--bg-inverse);color:var(--fg-inverse);
  box-shadow:var(--shadow-4), 0 0 0 1px var(--tk-veu);
  font-size:var(--type-meta-size);line-height:var(--type-meta-leading);
}
:is(.tahoe-shell,.tahoe-portal) .asbp-proto .lbl{font-weight:600;white-space:nowrap;}
:is(.tahoe-shell,.tahoe-portal) .asbp-proto select{
  min-height:44px;min-width:0;flex:0 1 auto;max-width:100%;padding:0 var(--space-3);border:0;border-radius:var(--radius-pill);
  background:var(--bg);color:var(--link);cursor:pointer;
  font-family:var(--type-label-font);font-size:var(--type-title-size);font-weight:var(--type-label-weight);
}
:is(.tahoe-shell,.tahoe-portal) .asbp-proto select:focus-visible{outline:2px solid var(--link-soft);outline-offset:2px;}
:is(.tahoe-shell,.tahoe-portal) .asbp-proto .erro{color:var(--danger-soft);font-weight:600;}
:is(.tahoe-shell,.tahoe-portal) .asbp-proto .recolhe{
  width:44px;height:44px;flex:none;padding:0;border:0;border-radius:var(--radius-pill);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;background:transparent;color:inherit;
}
:is(.tahoe-shell,.tahoe-portal) .asbp-proto .recolhe:hover{background:var(--tk-lavado-forte);}
:is(.tahoe-shell,.tahoe-portal) .asbp-proto .recolhe:focus-visible{outline:2px solid var(--link-soft);outline-offset:1px;}
:is(.tahoe-shell,.tahoe-portal) .asbp-proto .recolhe svg{width:16px;height:16px;}
:is(.tahoe-shell,.tahoe-portal) .asbp-proto.recolhida{
  position:absolute;left:auto;right:max(16px, env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));transform:none;padding:0;
}
:is(.tahoe-shell,.tahoe-portal) .asbp-proto.recolhida .lbl,
:is(.tahoe-shell,.tahoe-portal) .asbp-proto.recolhida select{display:none;}
/* Abaixo de 400px o rótulo sai: o select diz o que é (aria-label). */
@media (max-width:399.98px){
  :is(.tahoe-shell,.tahoe-portal) .asbp-proto .lbl{display:none;}
  :is(.tahoe-shell,.tahoe-portal) .asbp-proto{padding-left:6px;}
}

/* ─────────── Celular ─────────── */
@media (max-width:767.98px){
  :is(.tahoe-shell,.tahoe-portal) .asbp-cartao.asbp-cartao{padding:var(--space-4);}
}
/* Desktop: a coluna desce um pouco do topo e respira. */
@media (min-width:768px){
  :is(.tahoe-shell,.tahoe-portal) .asbp-pg{padding-top:var(--space-5);}
}
@media (prefers-reduced-motion:reduce){
  :is(.tahoe-shell,.tahoe-portal) .asbp-opcao{transition:none;}
}
@media (forced-colors:active){
  :is(.tahoe-shell,.tahoe-portal) .asbp-opcao,
  :is(.tahoe-shell,.tahoe-portal) .asbp-proto{border:1px solid CanvasText;}
  :is(.tahoe-shell,.tahoe-portal) .asbp-opcao:has(input:checked){outline:2px solid Highlight;outline-offset:-2px;}
}

/* `hidden` ganha de qualquer display declarado nesta camada (mesmo contrato
   de assembleias.css e componentes.css); tests/assembleias-hidden.test.js trava. */
:is(.tahoe-shell,.tahoe-portal) [class*="asbp-"][hidden]{display:none !important;}