/* =========================================================================
   Zelaria — assets/css/zelaria.css
   Sistema visual da plataforma. Carregado em toda tela, clara ou escura.

   Direção estética: "zeladoria moderna". Campo azul-gelo com textura de planta
   baixa, superfícies brancas de borda nítida, títulos em serifa quente
   (referência ao documento impresso de condomínio: convenção, ata, balancete)
   e interface em sans humanista. O roxo da marca é acento afiado de ação —
   nunca gradiente lavado sobre branco.

   Fontes auto-hospedadas de propósito: CDN do Google entregaria o IP de cada
   morador ao Google a cada carregamento, o que briga com a regra 14 (LGPD).

   Contraste verificado: texto principal e secundário acima de 4.5:1 nos dois
   temas; alvo de toque mínimo de 44x44px; foco sempre visível.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Fontes
   ---------------------------------------------------------------------- */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../fonts/fraunces-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
   2. Tokens — tema claro (padrão)
   ---------------------------------------------------------------------- */
:root {
    /* Superfícies */
    --fundo:            #f2f9fc;
    --superficie:       #ffffff;
    --superficie-2:     #eaf4f8;
    --superficie-3:     #dceef4;

    /* Traços */
    --borda:            #cde2ea;
    --borda-forte:      #a4c8d7;

    /* Tinta */
    --tinta:            #12212e;
    --tinta-2:          #4a6577;
    --tinta-3:          #5e7889;

    /* Marca e ação */
    --gelo:             #d7ebf1;
    --marca:            #c77dff;
    --acao:             #7b2cbf;
    --acao-forte:       #63229b;
    --acao-texto:       #ffffff;
    --acao-suave:       #f4e6ff;
    --acao-borda:       #dcb8f7;

    /* Estados */
    --sucesso:          #0d6f56;
    --sucesso-suave:    #dcf3ec;
    --alerta:           #8a5100;
    --alerta-suave:     #ffefd8;
    --erro:             #ad2018;
    --erro-suave:       #fde8e6;

    /* Elevação */
    --sombra-1:  0 1px 2px rgba(18, 33, 46, .06);
    --sombra-2:  0 4px 12px -4px rgba(18, 33, 46, .14);
    --sombra-3:  0 18px 40px -22px rgba(18, 33, 46, .40);

    /* Métrica */
    --r-1: 8px;
    --r-2: 12px;
    --r-3: 18px;
    --r-max: 999px;

    --fonte-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
    --fonte-corpo:  'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;

    /* Textura de planta baixa das telas públicas */
    --grade: rgba(18, 33, 46, .045);

    color-scheme: light;
}

/* -------------------------------------------------------------------------
   3. Tokens — tema escuro (inversão coerente da mesma identidade)
   ---------------------------------------------------------------------- */
[data-tema='escuro'] {
    --fundo:            #0b161f;
    --superficie:       #13222d;
    --superficie-2:     #1a2f3d;
    --superficie-3:     #23404f;

    --borda:            #26404f;
    --borda-forte:      #3a6076;

    --tinta:            #e4f1f6;
    --tinta-2:          #a6c0cd;
    --tinta-3:          #90aab8;

    --gelo:             #2b4a5b;
    --marca:            #c77dff;
    --acao:             #c77dff;
    --acao-forte:       #d9a3ff;
    --acao-texto:       #1a0f26;
    --acao-suave:       #2c1c3d;
    --acao-borda:       #5b3a7a;

    --sucesso:          #5fd8b4;
    --sucesso-suave:    #10332b;
    --alerta:           #f0b45f;
    --alerta-suave:     #3a2a10;
    --erro:             #ff938c;
    --erro-suave:       #3d1a17;

    --sombra-1:  0 1px 2px rgba(0, 0, 0, .40);
    --sombra-2:  0 4px 12px -4px rgba(0, 0, 0, .55);
    --sombra-3:  0 18px 40px -22px rgba(0, 0, 0, .85);

    --grade: rgba(215, 235, 241, .05);

    color-scheme: dark;
}

/* -------------------------------------------------------------------------
   4. Base
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--fundo);
    color: var(--tinta);
    font-family: var(--fonte-corpo);
    font-size: 1rem;
    font-weight: 450;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.015em;
    margin: 0 0 .5rem;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; font-family: var(--fonte-corpo); font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--acao);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
a:hover { color: var(--acao-forte); }

small, .sutil {
    font-size: .8125rem;
    color: var(--tinta-2);
    line-height: 1.5;
}

.icone { flex: none; vertical-align: -.15em; }

/* Foco visível em tudo que é interativo — nunca removido. */
:focus-visible {
    outline: 3px solid var(--acao);
    outline-offset: 2px;
    border-radius: 4px;
}
[data-tema='escuro'] :focus-visible { outline-color: var(--marca); }

.so-leitor-tela {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Pular para o conteúdo (navegação por teclado) */
.pular-para-conteudo {
    position: absolute;
    left: .5rem; top: -4rem;
    z-index: 100;
    padding: .75rem 1rem;
    background: var(--superficie);
    color: var(--tinta);
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-1);
    transition: top .15s ease;
}
.pular-para-conteudo:focus { top: .5rem; }

/* -------------------------------------------------------------------------
   5. Camada pública (login, cadastro, convite)
   Textura de planta baixa: grade fina + duas manchas de luz frias.
   ---------------------------------------------------------------------- */
.tela-publica {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
    background-color: var(--fundo);
    background-image:
        radial-gradient(90% 60% at 15% -10%, var(--superficie) 0%, transparent 60%),
        radial-gradient(70% 50% at 95% 0%, var(--gelo) 0%, transparent 55%),
        linear-gradient(var(--grade) 1px, transparent 1px),
        linear-gradient(90deg, var(--grade) 1px, transparent 1px);
    background-size: auto, auto, 28px 28px, 28px 28px;
}

.cartao-publico {
    width: 100%;
    max-width: 25rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-3);
    box-shadow: var(--sombra-3);
    padding: 1.75rem 1.5rem;
}

.cartao-publico--largo { max-width: 34rem; }

.marca {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--fonte-titulo);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--tinta);
    text-decoration: none;
}
.marca__simbolo {
    display: grid;
    place-items: center;
    width: 2.125rem; height: 2.125rem;
    border-radius: 10px;
    background: var(--acao-suave);
    border: 1px solid var(--acao-borda);
    color: var(--acao);
}
[data-tema='escuro'] .marca__simbolo { color: var(--marca); }

.cabecalho-publico { margin-bottom: 1.5rem; }
.cabecalho-publico h1 { margin: 1.25rem 0 .25rem; font-size: 1.45rem; }
.cabecalho-publico p { color: var(--tinta-2); font-size: .9375rem; margin: 0; }

.rodape-publico {
    margin-top: 1.25rem;
    text-align: center;
    font-size: .8125rem;
    color: var(--tinta-2);
}

/* -------------------------------------------------------------------------
   6. Camada autenticada — casca do app
   ---------------------------------------------------------------------- */
.app {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.topo {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    padding: .625rem 1rem;
    padding-top: calc(.625rem + env(safe-area-inset-top));
}

.topo__linha {
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: 72rem;
    margin: 0 auto;
}

.topo__acoes {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .375rem;
}

/* Assinatura visual do produto: o seletor de portfólio.
   Cada condomínio ganha uma etiqueta de cor, como chave num chaveiro. */
.portfolio { position: relative; }

.portfolio__botao {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-height: 44px;
    padding: .375rem .625rem;
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    border-radius: var(--r-2);
    color: var(--tinta);
    font: inherit;
    font-weight: 600;
    font-size: .9375rem;
    cursor: pointer;
    max-width: min(58vw, 20rem);
    transition: border-color .15s ease, background .15s ease;
}
.portfolio__botao:hover { border-color: var(--borda-forte); }
.portfolio__botao[aria-expanded='true'] {
    border-color: var(--acao);
    background: var(--acao-suave);
}

.portfolio__etiqueta {
    width: .375rem;
    align-self: stretch;
    min-height: 1.75rem;
    border-radius: var(--r-max);
    background: var(--marca);
    flex: none;
}

.portfolio__nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portfolio__lista {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    z-index: 30;
    min-width: min(20rem, 88vw);
    max-height: 60vh;
    overflow-y: auto;
    padding: .375rem;
    margin: 0;
    list-style: none;
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-2);
    box-shadow: var(--sombra-3);
}
.portfolio__lista[hidden] { display: none; }

.portfolio__item {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    min-height: 44px;
    padding: .5rem .625rem;
    border: 0;
    border-radius: var(--r-1);
    background: transparent;
    color: var(--tinta);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.portfolio__item:hover { background: var(--superficie-2); }
.portfolio__item[aria-current='true'] {
    background: var(--acao-suave);
    color: var(--acao);
    font-weight: 700;
}
[data-tema='escuro'] .portfolio__item[aria-current='true'] { color: var(--marca); }

/* Navegação principal — rola na horizontal no celular */
.nav {
    border-bottom: 1px solid var(--borda);
    background: var(--superficie);
    overflow-x: auto;
    scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav__lista {
    display: flex;
    gap: .25rem;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 .5rem;
    list-style: none;
}

.nav__link {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 46px;
    padding: 0 .75rem;
    white-space: nowrap;
    color: var(--tinta-2);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--tinta); }
.nav__link[aria-current='page'] {
    color: var(--acao);
    border-bottom-color: var(--acao);
}
[data-tema='escuro'] .nav__link[aria-current='page'] {
    color: var(--marca);
    border-bottom-color: var(--marca);
}

.conteudo {
    flex: 1;
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.25rem 1rem calc(2.5rem + env(safe-area-inset-bottom));
}

.pagina-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    margin-bottom: 1.25rem;
}
.pagina-cabecalho > div:first-child { flex: 1 1 16rem; }
.pagina-cabecalho h1 { margin-bottom: .125rem; }
.pagina-cabecalho p { color: var(--tinta-2); font-size: .9375rem; margin: 0; }

/* -------------------------------------------------------------------------
   7. Cartões, grades e listas
   ---------------------------------------------------------------------- */
.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-2);
    box-shadow: var(--sombra-1);
    padding: 1.125rem;
}
.cartao + .cartao { margin-top: 1rem; }
.cartao__titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .875rem;
    font-size: 1rem;
    font-weight: 700;
}

.grade {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.lista-limpa { list-style: none; margin: 0; padding: 0; }

.linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: .875rem 0;
    border-bottom: 1px solid var(--borda);
}
.linha:last-child { border-bottom: 0; padding-bottom: 0; }
.linha:first-child { padding-top: 0; }
.linha__principal { flex: 1 1 12rem; min-width: 0; }
.linha__titulo { font-weight: 650; }
.linha__acoes { display: flex; gap: .5rem; flex-wrap: wrap; }

.vazio {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--tinta-2);
    border: 1px dashed var(--borda-forte);
    border-radius: var(--r-2);
}
.vazio .icone { color: var(--tinta-3); margin-bottom: .5rem; }

/* -------------------------------------------------------------------------
   8. Formulários
   ---------------------------------------------------------------------- */
.campo { margin-bottom: 1rem; }

.campo__rotulo {
    display: block;
    margin-bottom: .375rem;
    font-size: .875rem;
    font-weight: 650;
    color: var(--tinta);
}

.campo__dica {
    display: block;
    margin-top: .375rem;
    font-size: .8125rem;
    color: var(--tinta-2);
}

.campo__erro {
    display: flex;
    align-items: flex-start;
    gap: .375rem;
    margin-top: .375rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--erro);
}

.entrada,
.selecao {
    width: 100%;
    min-height: 46px;
    padding: .625rem .75rem;
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-1);
    color: var(--tinta);
    font: inherit;
    font-size: 1rem; /* 16px evita o zoom automático do iOS */
    transition: border-color .15s ease, box-shadow .15s ease;
}
.entrada::placeholder { color: var(--tinta-3); }
.entrada:hover, .selecao:hover { border-color: var(--acao-borda); }
.entrada:focus, .selecao:focus {
    outline: none;
    border-color: var(--acao);
    box-shadow: 0 0 0 3px var(--acao-suave);
}
.entrada[aria-invalid='true'] { border-color: var(--erro); }
.entrada:disabled, .selecao:disabled {
    background: var(--superficie-2);
    color: var(--tinta-3);
    cursor: not-allowed;
}

.selecao {
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235e7889' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .625rem center;
}
[data-tema='escuro'] .selecao {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2390aab8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
}

/* Campo de senha com botão de revelar */
.campo-senha { position: relative; }
.campo-senha .entrada { padding-right: 3rem; }
.campo-senha__olho {
    position: absolute;
    right: 1px; top: 1px; bottom: 1px;
    width: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0 var(--r-1) var(--r-1) 0;
    background: transparent;
    color: var(--tinta-2);
    cursor: pointer;
}
.campo-senha__olho:hover { color: var(--acao); }

.opcao {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    min-height: 44px;
    padding: .75rem;
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-1);
    cursor: pointer;
}
.opcao + .opcao { margin-top: .5rem; }
.opcao:hover { border-color: var(--acao-borda); background: var(--superficie-2); }
.opcao:has(input:checked) {
    border-color: var(--acao);
    background: var(--acao-suave);
}
.opcao input { margin-top: .2rem; width: 1.125rem; height: 1.125rem; accent-color: var(--acao); }
.opcao__texto { font-weight: 600; font-size: .9375rem; }
.opcao__texto span { display: block; font-weight: 450; font-size: .8125rem; color: var(--tinta-2); }

fieldset { margin: 0 0 1rem; padding: 0; border: 0; }
legend {
    padding: 0;
    margin-bottom: .5rem;
    font-size: .875rem;
    font-weight: 650;
}

/* Campo que só faz sentido para morador. Sem :has() (navegador antigo) ele
   aparece sempre — o que é o comportamento correto de degradação: o servidor
   é quem decide se a unidade é obrigatória. */
form:has(#papel-funcionario:checked) .se-morador { display: none; }

/* Alternância dos dois modos de cadastro de unidade. Sem :has(), os dois
   aparecem — e o servidor decide pelo campo "modo", então nada quebra. */
form:has(#modo-lista:checked) .se-faixa { display: none; }
form:has(#modo-faixa:checked) .se-lista { display: none; }

textarea.entrada { min-height: 7rem; resize: vertical; line-height: 1.5; }


/* -------------------------------------------------------------------------
   9. Botões
   ---------------------------------------------------------------------- */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 46px;
    min-width: 44px;
    padding: .625rem 1.125rem;
    border: 1px solid transparent;
    border-radius: var(--r-1);
    font: inherit;
    font-size: .9375rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.botao:active { transform: translateY(1px); }
.botao--bloco { width: 100%; }

.botao--primario {
    background: var(--acao);
    color: var(--acao-texto);
}
.botao--primario:hover { background: var(--acao-forte); color: var(--acao-texto); }

.botao--secundario {
    background: var(--superficie);
    border-color: var(--borda-forte);
    color: var(--tinta);
}
.botao--secundario:hover { border-color: var(--acao); color: var(--acao); }
[data-tema='escuro'] .botao--secundario:hover { color: var(--marca); }

.botao--fantasma {
    background: transparent;
    color: var(--tinta-2);
    padding: .5rem .75rem;
}
.botao--fantasma:hover { background: var(--superficie-2); color: var(--tinta); }

.botao--perigo {
    background: var(--superficie);
    border-color: var(--erro);
    color: var(--erro);
}
.botao--perigo:hover { background: var(--erro-suave); }

.botao--pequeno { min-height: 40px; padding: .375rem .75rem; font-size: .875rem; }

.botao--icone {
    padding: 0;
    width: 44px; height: 44px;
    min-height: 44px;
    background: transparent;
    color: var(--tinta-2);
    border-radius: var(--r-1);
}
.botao--icone:hover { background: var(--superficie-2); color: var(--tinta); }

.botao:disabled, .botao[aria-disabled='true'] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

.acoes-formulario {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    margin-top: 1.25rem;
}
.acoes-formulario .botao { flex: 1 1 10rem; }

/* -------------------------------------------------------------------------
   10. Avisos, selos e mensagens
   ---------------------------------------------------------------------- */
.aviso {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .875rem 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid;
    border-radius: var(--r-1);
    font-size: .9375rem;
    line-height: 1.5;
}
.aviso .icone { margin-top: .1rem; }
.aviso strong { display: block; }

.aviso--sucesso { color: var(--sucesso); background: var(--sucesso-suave); border-color: currentColor; }
.aviso--erro    { color: var(--erro);    background: var(--erro-suave);    border-color: currentColor; }
.aviso--alerta  { color: var(--alerta);  background: var(--alerta-suave);  border-color: currentColor; }
.aviso--info    { color: var(--tinta-2); background: var(--superficie-2);  border-color: var(--borda-forte); }

.selo {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    padding: .1875rem .5rem;
    border-radius: var(--r-max);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}
.selo--pendente { color: var(--alerta);  background: var(--alerta-suave); }
.selo--ativo    { color: var(--sucesso); background: var(--sucesso-suave); }
.selo--inativo  { color: var(--tinta-2); background: var(--superficie-2); }
.selo--recusado { color: var(--erro);    background: var(--erro-suave); }
.selo--papel    { color: var(--acao);    background: var(--acao-suave); }
[data-tema='escuro'] .selo--papel { color: var(--marca); }

.contador {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .3125rem;
    border-radius: var(--r-max);
    background: var(--acao);
    color: var(--acao-texto);
    font-size: .75rem;
    font-weight: 800;
}

/* Caixa de link de convite */
.link-convite {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    padding: .75rem;
    background: var(--superficie-2);
    border: 1px dashed var(--borda-forte);
    border-radius: var(--r-1);
}
.link-convite code {
    flex: 1 1 14rem;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: .8125rem;
    color: var(--tinta);
}

/* -------------------------------------------------------------------------
   11. Telas grandes
   ---------------------------------------------------------------------- */
@media (min-width: 48rem) {
    h1 { font-size: 1.9rem; }
    .cartao { padding: 1.5rem; }
    .cartao-publico { padding: 2.25rem 2rem; }
    .conteudo { padding: 2rem 1.5rem 3rem; }
    .topo { padding-inline: 1.5rem; }
    .acoes-formulario .botao { flex: 0 0 auto; }
}

@media (min-width: 64rem) {
    .cabecalho-publico h1 { font-size: 1.65rem; }
}

/* -------------------------------------------------------------------------
   12. Preferências do sistema
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .topo, .nav, .acoes-formulario, .pular-para-conteudo { display: none !important; }
    body { background: #fff; color: #000; }
}

/* -------------------------------------------------------------------------
   13. Utilitários de composição
   Existem porque a CSP do projeto proíbe 'unsafe-inline' em style-src, e nonce
   não vale para atributo style="" — só para elemento <style>. Ou seja: nenhum
   estilo inline pode existir nos templates. Estas classes cobrem os arranjos
   pontuais que antes seriam feitos com style inline.
   ---------------------------------------------------------------------- */
.pilha         { display: flex; align-items: center; gap: .5rem; }
.pilha--topo   { align-items: flex-start; }
.pilha--quebra { flex-wrap: wrap; }
.pilha--fina   { gap: .375rem; }
.empurra       { margin-left: auto; }
.cresce        { flex: 1 1 12rem; min-width: 0; }
.centro        { text-align: center; }

.mt-1 { margin-top: .375rem; }
.mt-2 { margin-top: .75rem; }
.mt-3 { margin-top: 1.25rem; }
.mb-3 { margin-bottom: 1.25rem; }
.sem-margem { margin: 0; }

.numero-grande {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
}

.nome-cartao { margin: 0; font-size: 1.15rem; }
.rotulo-secao { margin: 1.25rem 0 .5rem; font-size: .875rem; }
.estreito     { max-width: 12rem; }
.estreito--uf { max-width: 6rem; }

.campos-lado { display: flex; gap: .75rem; flex-wrap: wrap; }
.campos-lado > .campo { flex: 1 1 7rem; }

/* Paleta de cor do condomínio */
.paleta { display: flex; flex-wrap: wrap; gap: .5rem; }
.paleta label { cursor: pointer; }
.paleta__amostra {
    display: block;
    width: 44px; height: 44px;
    border-radius: 12px;
    border: 3px solid transparent;
    box-shadow: 0 0 0 1px var(--borda);
}
.paleta input:checked + .paleta__amostra { border-color: var(--tinta); }
.paleta input:focus-visible + .paleta__amostra {
    outline: 3px solid var(--acao);
    outline-offset: 2px;
}

/* Cores de etiqueta de condomínio. São classes fixas, e não style inline com o
   hex vindo do banco, justamente por causa da CSP. O mapa hex -> classe está
   em includes/ui.php (classe_cor). */
.cor-1 { background: #c77dff; }
.cor-2 { background: #5aa9c9; }
.cor-3 { background: #3fa87e; }
.cor-4 { background: #d98a3f; }
.cor-5 { background: #c95f7a; }
.cor-6 { background: #7b8ed8; }
.cor-7 { background: #63229b; }
.cor-8 { background: #4a6577; }

.portfolio__etiqueta--alta { min-height: 2.5rem; }

/* Valores monetários. Cor NUNCA é o único indicador: receita leva "+" e
   despesa leva "−" no texto, para quem não distingue as duas cores. */
.valor--receita { color: var(--sucesso); }
.valor--despesa { color: var(--erro); }
strong.valor--receita, strong.valor--despesa { white-space: nowrap; font-variant-numeric: tabular-nums; }
.numero-grande.valor--receita, .numero-grande.valor--despesa { font-variant-numeric: tabular-nums; }

/* Campo de arquivo: o seletor nativo é feio e desalinhado em todo navegador. */
input[type='file'].entrada {
    padding: .5rem;
    line-height: 1.4;
    cursor: pointer;
}
input[type='file'].entrada::file-selector-button {
    margin-right: .75rem;
    padding: .5rem .875rem;
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-1);
    background: var(--superficie-2);
    color: var(--tinta);
    font: inherit;
    font-size: .875rem;
    font-weight: 650;
    cursor: pointer;
}
input[type='file'].entrada::file-selector-button:hover {
    border-color: var(--acao);
    color: var(--acao);
}

/* -------------------------------------------------------------------------
   Abas (controle segmentado)
   Feito com radio + :has() em vez de JavaScript: a CSP proíbe script inline e
   uma troca de aba não merece um arquivo de script. Sem :has() os dois painéis
   aparecem empilhados — degradação aceitável, nada some da tela.
   ---------------------------------------------------------------------- */
.abas__controle {
    display: inline-flex;
    gap: .25rem;
    padding: .25rem;
    margin-bottom: 1rem;
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    border-radius: var(--r-2);
}
.abas__controle label { cursor: pointer; }
.abas__controle span {
    display: flex;
    align-items: center;
    gap: .375rem;
    min-height: 40px;
    padding: 0 .875rem;
    border-radius: var(--r-1);
    color: var(--tinta-2);
    font-size: .875rem;
    font-weight: 650;
    white-space: nowrap;
}
.abas__controle input:checked + span {
    background: var(--superficie);
    color: var(--acao);
    box-shadow: var(--sombra-1);
}
[data-tema='escuro'] .abas__controle input:checked + span { color: var(--marca); }
.abas__controle input:focus-visible + span {
    outline: 3px solid var(--acao);
    outline-offset: 2px;
}

.abas:has(#aba-geral:checked)    .aba-painel--unidades { display: none; }
.abas:has(#aba-unidades:checked) .aba-painel--geral    { display: none; }

/* Tabela por unidade: rola na horizontal no celular sem quebrar o layout */
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.tabela th, .tabela td {
    padding: .625rem .5rem;
    text-align: left;
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
}
.tabela th {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--tinta-2);
}
.tabela td.numero, .tabela th.numero { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela td.envolve { white-space: normal; min-width: 14rem; }