/*
  As telas do morador, do design em docs/design/auto-cadastro (390 px, uma coluna).
  Servido pelo próprio site, como tudo: a CSP não permite CDN.

  Só o que o Ant Design não dá pronto: o espaçamento da coluna, os textos de apoio, o bloco
  destacado do consentimento e a altura de toque de 44 px dos botões principais.
*/

body {
    background: #f0f2f5;
}

/* Coluna única. Acima de 480 px a página continua uma coluna centrada — o celular é o caso
   de uso, o desktop é acidente. */
.pagina {
    max-width: 480px;
    margin: 0 auto;
    padding: 0;
    background: #f0f2f5;
    min-height: 100vh;
}

.conteudo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 12px 24px;
}

.titulo {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.subtitulo {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.muted {
    color: rgba(0, 0, 0, .45);
}

.ajuda {
    font-size: 12px;
    color: rgba(0, 0, 0, .45);
}

.erro {
    font-size: 13px;
    color: #ff4d4f;
}

.rodape {
    margin: 0;
    font-size: 13px;
    text-align: center;
    color: rgba(0, 0, 0, .45);
}

/*
 * O Ant reserva uma linha para o texto de ajuda do FormItem e compensa com um
 * .ant-form-item-margin-offset de -24px. Quando a ajuda quebra em DUAS linhas - o que no
 * celular e o caso comum, e acontece com "Familiar: dependente, parente ou agregado que mora
 * no apartamento" - a compensacao passa a faltar 24px e o elemento seguinte e desenhado por
 * cima da segunda linha. Na tela do morador isso punha o checkbox "Tambem e responsavel pela
 * unidade" em cima do texto.
 *
 * Zerar a compensacao devolve o fluxo. O preco e 24px a mais de respiro quando a ajuda cabe
 * numa linha so, o que nesta tela nao atrapalha: ela e uma coluna estreita, rolada.
 */
.conteudo .ant-form-item-margin-offset {
    margin-bottom: 0 !important;
}

/* A miniatura da foto ocupa o lugar do boneco cinza: 3x4, recortada pelo centro. */
.miniatura-foto {
    width: 48px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.miniatura-foto-pequena {
    width: 32px;
    height: 40px;
}

.linha-com-miniatura {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* As acoes da linha (Editar, Remover) empilham no celular estreito e nao grudam no nome. */
.linha-acoes {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

.linha-remover {
    color: #a8071a;
}

.marcar {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Consentimento de dado biométrico: o destaque é exigência do art. 11, II, "a" da LGPD. */
.destaque {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid #91d5ff;
    background: #e6f7ff;
    border-radius: 2px;
}

.destaque-titulo {
    font-weight: 600;
}

/* Alvo de toque de 44 px nos botões principais: o morador usa uma mão só, andando. */
.btn-toque {
    height: 44px;
    font-size: 16px;
}

/* O conteúdo de um Card do Ant vira coluna com respiro, como os .card do design. */
.pagina .ant-card-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Formulário em coluna: o espaçamento é o do .card, não o padrão do Ant. */
.pagina .ant-form-item {
    margin-bottom: 0;
}

.pagina .ant-form-vertical .ant-form-item-label {
    padding-bottom: 4px;
}

/* 16 px no campo evita o zoom automático do Safari iOS ao focar. */
.pagina .ant-input,
.pagina .ant-input-affix-wrapper > input.ant-input {
    font-size: 16px;
}

/* Três opções de vínculo em 390 px: cada uma ocupa um terço, sem rolagem horizontal. */
.pagina .ant-radio-group {
    display: flex;
    width: 100%;
}

.pagina .ant-radio-group .ant-radio-button-wrapper {
    flex: 1;
    text-align: center;
}

/* Lista de moradores (design Moradores.dc.html). */
.linha {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: flex-start;
}

.linha:last-child {
    border-bottom: 0;
}

.linha-dados {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.linha-nome {
    font-weight: 600;
}

.linha-marcas {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Miniatura 48x64: o lugar da foto, ainda vazio enquanto a foto não é gravada (tarefa 1.6). */
.miniatura {
    width: 48px;
    height: 64px;
    flex: none;
    border: 1px solid #f0f0f0;
    border-radius: 2px;
    background: #fafafa;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.centralizado {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

/* Ficha da revisão: rótulo e valor, um por linha. */
.ficha {
    display: flex;
    flex-direction: column;
}

.ficha-linha {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.ficha-linha:last-child {
    border-bottom: 0;
}

.ficha-rotulo {
    color: rgba(0, 0, 0, .45);
    flex: none;
}

.ficha-valor {
    text-align: right;
    word-break: break-word;
}

/* O link para copiar, na tela do navegador do WhatsApp. */
.link-copiavel {
    flex: 1;
    min-width: 0;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 11px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    background: #fafafa;
    font-family: "SF Mono", Menlo, Consolas, "Courier New", monospace;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lado-a-lado {
    display: flex;
    gap: 8px;
    align-items: center;
}

.lista-simples {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lista-simples li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.lista-numerada {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/*
  O campo de arquivo da captura fica escondido, não ausente: quem abre o seletor é o <label
  for=...>, e é assim que se faz um botão de upload sem uma linha de JavaScript e sem perder o
  acesso pelo teclado.

  Esta regra mora AQUI, e não no CapturaDeFoto.razor.css, e a diferença é visível na tela.
  Quem renderiza o <input type=file> é o componente <InputFile> do próprio Blazor, e o CSS
  isolado carimba o atributo de escopo (b-...) só nos elementos HTML escritos no .razor — nunca
  no elemento raiz de um componente filho. A regra escopada existia, era servida, e não casava
  com nada: o morador via o "Escolher arquivo / Nenhum arquivo escolhido" cru do navegador,
  embaixo do botão da galeria, na tela mais importante do fluxo. Achado da tarefa 1.11, olhando
  a tela renderizada — nenhum teste de unidade enxerga isto.
*/
.arquivo-escondido {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

/*
  O texto legal publicado pelo síndico (TextoLegal.razor). A caixa rola dentro de si mesma: os
  textos de consentimento têm algumas centenas de palavras e, soltos na página, empurrariam o
  botão de salvar para longe do polegar num aparelho de 390 px. O texto fica VISÍVEL — nada de
  consentimento escondido atrás de um "leia mais" (LGPD, art. 11, II, "a").
*/
.texto-legal {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(0, 0, 0, .75);
}

.texto-legal p {
    margin: 0 0 8px;
}

.texto-legal-titulo {
    margin: 8px 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, .85);
}

.texto-legal-lista {
    margin: 0 0 8px;
    padding-left: 18px;
}

.texto-legal-lista li {
    margin-bottom: 4px;
}

.texto-legal-rolagem {
    max-height: 40vh;
    overflow-y: auto;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    -webkit-overflow-scrolling: touch;
}