/*
  A área do síndico (§8). Só o que o Ant Design não dá pronto: a barra do topo, a largura do
  conteúdo e o espaçamento entre os cartões. Servido do próprio site, como tudo — a CSP não
  permite CDN.

  Não herda nada de morador.css: lá a coluna tem 480 px porque o morador está num celular;
  aqui a tela é o computador da administração, e a tabela precisa de largura.
*/

.admin {
    min-height: 100vh;
    background: #f0f2f5;
}

.admin-topo {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
}

.admin-marca {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
}

.admin-menu {
    display: flex;
    gap: 20px;
    flex: 1;
    overflow-x: auto;
}

.admin-link {
    color: rgba(255, 255, 255, .65);
    white-space: nowrap;
}

.admin-link:hover {
    color: #fff;
}

.admin-link-ativo {
    color: #fff;
    font-weight: 600;
    border-bottom: 2px solid #1890ff;
}

.admin-sair {
    color: rgba(255, 255, 255, .65);
}

.admin-corpo {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

/* A coluna de cartões de cada área. */
.admin-pilha {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* A linha de filtros acima de cada tabela. */
.admin-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/*
 * A busca das listagens. A largura mora aqui, e nao no Style do <Search>: o Ant poe o Style
 * no <input> de dentro e deixa o wrapper (que segura o botao) com a largura do flex, o que
 * separa o botao do campo. Limitando o conteiner, o grupo inteiro encolhe junto.
 */
.admin-busca {
    flex: 0 1 280px;
    min-width: 200px;
}

.admin-busca-larga {
    flex-basis: 420px;
}

.admin-busca .ant-input-search {
    width: 100%;
}

.admin-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-titulo {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 4px;
}

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

/* O aviso dentro das confirmações que invalidam papel impresso. */
.admin-aviso-forte {
    border: 1px solid #ffa39e;
    background: #fff1f0;
    border-radius: 2px;
    padding: 12px;
    margin-bottom: 12px;
}

/* A foto da ficha: aparece só depois do motivo, e some ao fechar. */
.admin-foto {
    display: block;
    max-width: 240px;
    border: 1px solid #d9d9d9;
}

/* Os dezoito limiares do laudo, em duas colunas no desktop e uma no notebook pequeno. */
.admin-limiares {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0 16px;
}

/* Rótulo de campo fora de formulário — nas confirmações e nos limiares. */
.admin-campo {
    margin-bottom: 12px;
}

.admin-rotulo {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
}

.admin-obrigatorio {
    color: #ff4d4f;
}

/*
 * A tela de notificações (tela C): a lista de modelos à esquerda, o editor no meio, a prévia
 * à direita. Em tela estreita as três colunas empilham.
 */
.admin-notificacoes {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.admin-notificacoes-lista {
    flex: 1 1 260px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-notificacoes-editor {
    flex: 3 1 420px;
}

.admin-notificacoes-previa {
    flex: 2 1 300px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Um modelo na lista. É um botão sem cara de botão: a linha inteira seleciona. */
.admin-modelo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 2px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font: inherit;
}

.admin-modelo:hover {
    border-color: #91d5ff;
}

.admin-modelo-ativo {
    border-color: #1890ff;
    background: #e6f7ff;
}

.admin-modelo-nome {
    font-weight: 500;
}

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

/* As fichas dos campos do evento. Clicar insere o campo no corpo. */
.admin-fichas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 12px;
}

.admin-ficha {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    padding: 2px 8px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    background: #fafafa;
    cursor: pointer;
    font-weight: normal;
}

.admin-ficha:hover {
    border-color: #1890ff;
    color: #1890ff;
}

/* O e-mail como o morador o recebe. */
.admin-previa {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 2px;
    padding: 12px 16px;
    font-size: 13px;
}

.admin-previa-cabecalho {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
    color: rgba(0, 0, 0, .65);
}

.admin-previa-corpo {
    white-space: pre-wrap;
    margin: 0;
    font: inherit;
}

/* O erro do servidor sob um campo que está fora de Form (o cartão do SMTP). */
.admin-erro-do-campo {
    color: #ff4d4f;
    font-size: 13px;
    margin: 4px 0 0;
}

/*
 * A aba de avisos (tela I): a lista à esquerda e o cartão do aviso à direita, com 360 px.
 * Em tela estreita o cartão desce para baixo da lista em vez de espremer a tabela.
 */
.admin-avisos {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.admin-avisos-lista {
    flex: 1 1 560px;
    min-width: 0;
}

.admin-avisos-cartao {
    flex: 0 1 360px;
    min-width: 280px;
}

/* De e Até lado a lado, cada um com metade do cartão. */
.admin-avisos-periodo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/*
 * A aba de procedimentos (tela N): a lista à esquerda e o editor à direita, com 470 px.
 * Em tela estreita o editor desce para baixo da lista, como na aba de avisos.
 */
.admin-procedimentos {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.admin-procedimentos-lista {
    flex: 1 1 520px;
    min-width: 0;
}

.admin-procedimentos-cartao {
    flex: 0 1 470px;
    min-width: 280px;
}

.admin-procedimentos-lista .ant-table-row {
    cursor: pointer;
}

.admin-linha-selecionada > td {
    background: #e6f7ff;
}

/* Título e categoria, tela e veja também: dois campos por linha, como no desenho. */
.admin-procedimento-duas {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 10px;
}

.admin-procedimento-contatos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 24px;
}

/* Quem, telefone, quando ligar e o botão de tirar. */
.admin-procedimento-contato {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 130px) minmax(0, 1.3fr) 24px;
    gap: 6px;
    align-items: center;
}

.admin-procedimento-veja {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

/* O "tirar" das linhas de contato e das fichas do veja também. */
.admin-tirar {
    border: 0;
    background: transparent;
    color: rgba(0, 0, 0, .45);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.admin-tirar:hover {
    color: #ff4d4f;
}

/*
 * A aba de rotinas (tela O): o mesmo arranjo de procedimentos, com o editor de 420 px.
 */
.admin-rotinas-cartao {
    flex-basis: 420px;
}

/*
 * Os quadradinhos dos últimos sete dias. As quatro situações da legenda diferem também em
 * luminosidade, para quem não separa verde de vermelho e para a impressão em cinza: a que
 * ficou sem marcar é a mais escura, a feita é média, a que não deu é clara, e o dia que não
 * era da rotina é vazado, só com a borda. Hoje, ainda pendente, é vazado com borda tracejada.
 */
.rotina-dias {
    display: inline-flex;
    gap: 3px;
    vertical-align: middle;
}

.rotina-dia {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    box-sizing: border-box;
}

.rotina-dia-feita {
    background: #389e0d;
}

.rotina-dia-nao-deu {
    background: #ffd666;
}

.rotina-dia-sem-marcar {
    background: #a8071a;
}

.rotina-dia-nao-era-dia {
    background: #fff;
    border: 1px solid #bfbfbf;
}

.rotina-dia-pendente {
    background: #fff;
    border: 1px dashed #595959;
}

.rotina-legenda {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    font-size: 12px;
    color: rgba(0, 0, 0, .45);
}

.rotina-legenda > span {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.rotina-quando-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.rotina-quando-editor .admin-rotulo {
    margin: 0;
}

.rotina-recorrencia {
    align-self: flex-start;
}

.rotina-semana {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dia-da-semana {
    width: 44px;
    height: 32px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    background: #fff;
    color: rgba(0, 0, 0, .85);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.dia-da-semana:hover {
    border-color: #40a9ff;
    color: #40a9ff;
}

.dia-da-semana.on {
    background: #1890ff;
    border-color: #1890ff;
    color: #fff;
}

.rotina-dia-do-mes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.rotina-dia-do-mes select {
    width: 72px;
}

/*
 * A aba de demandas (tela P): o mesmo arranjo de procedimentos, com o cartão de 380 px do
 * desenho — a nova demanda para a portaria, ou a demanda clicada na lista.
 */
.admin-demandas-cartao {
    flex-basis: 380px;
}

/* A última anotação (ou a saída da encerrada) embaixo do título, como no desenho. */
.demanda-nota {
    font-size: 13px;
    color: rgba(0, 0, 0, .65);
    margin-top: 4px;
}

/* Apartamento e prazo lado a lado, cada um com metade do cartão. */
.demanda-duas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.demanda-detalhe {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.demanda-detalhe-texto {
    white-space: pre-wrap;
    margin: 0;
}

.demanda-ficha {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 12px;
    margin: 0;
    font-size: 13px;
}

.demanda-ficha dt {
    color: rgba(0, 0, 0, .45);
}

.demanda-ficha dd {
    margin: 0;
}

.demanda-detalhe .admin-rotulo {
    margin: 8px 0 0;
}

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

.demanda-anotacao {
    border-left: 2px solid #f0f0f0;
    padding-left: 8px;
}

.demanda-anotacao > div {
    white-space: pre-wrap;
}

.demanda-anotacao .admin-ajuda {
    font-size: 12px;
}

/* O código de habilitação do celular (P24, tela V): grande, em dois grupos, para ditar e digitar. */
.codigo-de-habilitacao {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 44px;
    font-weight: 600;
    letter-spacing: .22em;
    color: rgba(0, 0, 0, .85);
    text-align: center;
    padding: 18px 0;
    background: #fafafa;
    border: 1px dashed #d9d9d9;
    border-radius: 2px;
}

/* A escala 12/36 (P33, ADR-0040): rótulo à esquerda, início e fim lado a lado. */
.escala-grade { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; }

/* A conferência do plantão (P37): o não conforme em âmbar, como no desenho Z2. */
.conferencia-nao-conforme { color: #d46b08; font-size: 13px; }

/*
 * A aba de manutenções (tela W5): a grade à esquerda e o editor de 380 px, no arranjo de
 * Rotinas. As cores são as do desenho; o «em parte» difere também pela borda tracejada, para
 * quem não separa verde de amarelo e para a impressão em cinza.
 */
/* 380 px, como o desenho: mais largo, a grade espremia o nome do plano em quatro linhas. */
.admin-manutencoes-cartao {
    flex-basis: 380px;
}

/* O segmento da frequência cabe numa linha nos 380 px só com o respiro menor. */
.plano-modo .ant-radio-button-wrapper {
    padding: 0 10px;
}

/* O rótulo do FormItem é inline-flex, e o flex engole o espaço entre «Local» e «(opcional)». */
.ant-form-item-label > label .admin-ajuda {
    margin-left: 4px;
}

.grade-das-manutencoes .ant-table-row {
    cursor: pointer;
}

.grade-das-manutencoes td.plano-mes {
    padding-left: 3px !important;
    padding-right: 3px !important;
}

.plano-celula {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 22px;
    border-radius: 3px;
    box-sizing: border-box;
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
}

.manutencoes-legenda .plano-celula {
    width: 14px;
    height: 14px;
}

.plano-cumprido {
    background: #b7eb8f;
    color: #135200;
}

.plano-em-parte {
    background: #fff1b8;
    color: #874d00;
    border: 1px dashed #d4b106;
}

.plano-nao-cumprido {
    background: #ffa39e;
    color: #820014;
}

.plano-em-aberto {
    background: #fff;
    color: #0050b3;
    border: 1px solid #91d5ff;
}

.plano-fora {
    background: #fafafa;
    color: #bfbfbf;
    border: 1px solid #f0f0f0;
}

.plano-tracejado {
    border: 1px dashed currentColor;
}

.plano-cota,
.plano-prazo {
    display: flex;
    gap: 8px;
    align-items: center;
}

.plano-desativado {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-top: 1px solid #f0f0f0;
}

/* ---- Texto legal em folha A4 (/admin/textos/{id}) ----------------------------------------
   Na tela, uma folha de 210 mm sobre fundo cinza; na impressão, a própria página A4, sem o
   botão e sem o fundo. */
.leitura-fundo {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 24px 16px;
    background: #f0f2f5;
}

.leitura-acoes {
    width: 210mm;
    max-width: 100%;
    margin-bottom: 12px;
    text-align: right;
}

/* A folha: as medidas do A4 (210 × 297 mm), centralizada; as margens internas são as da
   impressão, então o que se lê aqui é o que sai no papel. */
.folha-a4 {
    box-sizing: border-box;
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    padding: 20mm;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.folha-a4-cabecalho {
    margin-bottom: 8mm;
    padding-bottom: 4mm;
    border-bottom: 1px solid #d9d9d9;
}

.folha-a4-cabecalho h1 {
    margin: 0 0 4px;
    font-size: 18pt;
}

.folha-a4-cabecalho p {
    margin: 0;
    color: rgba(0, 0, 0, .55);
    font-size: 9pt;
}

.folha-a4 .texto-legal {
    font-size: 11pt;
    line-height: 1.6;
    color: rgba(0, 0, 0, .85);
    text-align: justify;
}

.folha-a4 .texto-legal-titulo {
    margin: 6mm 0 2mm;
    font-size: 12pt;
    break-after: avoid;
}

@page {
    size: A4;
    margin: 20mm;
}

@media print {
    .leitura-fundo {
        display: block;
        padding: 0;
        background: none;
    }

    .leitura-acoes {
        display: none;
    }

    .folha-a4 {
        width: auto;
        min-height: 0;
        padding: 0;
        box-shadow: none;
    }
}

@media (max-width: 600px) {
    .folha-a4 {
        min-height: 0;
        padding: 16px;
    }
}

/* Início e fim de um andar, lado a lado, no modal «Gerar apartamentos por padrão». */
.admin-padrao {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}