/* =========================================================
   AJUSTES DE CELULAR — carregado por último, depois de todos
   =========================================================

   Este arquivo existe separado de propósito: ele só contém
   correções de layout em tela estreita, é o último a ser
   carregado (então vence empates sem precisar de !important)
   e pode ser removido inteiro se algo aqui atrapalhar.

   O que foi medido num navegador de verdade a 375px, antes:

     Agenda (mês) ...... 202px de rolagem horizontal; os dias
                         3, 4 e 5 de cada semana ficavam fora
                         da tela, inalcançáveis
     Pacientes ......... tabela de 727px dentro de um contêiner
                         com overflow:hidden — as colunas
                         Acompanhante, Atendimentos, Último e
                         Ações simplesmente não existiam no
                         celular, e não havia como rolar até elas
     Agenda (dia) ...... cabia, mas Realizado / Não veio /
                         Cancelar tinham 31px de altura

   ========================================================= */

/* ---------------------------------------------------------
   1. TABELAS — nada pode ficar inalcançável
   ---------------------------------------------------------
   `.tabela-padrao-wrap` tem overflow:hidden e o filho só rola
   na vertical. Numa tela larga isso nunca apareceu; numa
   estreita, some com metade das colunas sem nem deixar barra
   de rolagem.

   Esta regra vale para TODAS as tabelas do sistema — pacientes,
   usuários, auditoria, finanças, relatório. É a rede de
   segurança: mesmo numa tela que ninguém ajustou para celular,
   o conteúdo continua alcançável.
   --------------------------------------------------------- */

@media (max-width: 720px) {
    /* O WRAP passa a rolar de lado por conta própria.

       Onde existe um `.tabela-padrao-scroll` dentro dele (Pacientes,
       Auditoria, Finanças, Histórico, Relatório, Avaliações, Perímetro), é o
       filho que rola e o wrap não chega a ver estouro nenhum — não nasce
       barra dupla.

       Onde NÃO existe — Usuários, Configurações (inclusive a matriz de
       permissões), Contas, Administração da plataforma, Meu perfil — era
       exatamente aqui que a tabela vazava. `overflow: visible` tirava o
       recorte sem colocar nada no lugar: a tabela de 700px escapava do
       cartão, empurrava a página inteira para a direita e o
       `overflow-x: hidden` do body (seção 5) só escondia o resultado. A tela
       "passava de lado" e parte das colunas ficava inalcançável. */
    .tabela-padrao-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tabela-padrao-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tabela avulsa, sem wrap nenhum (ficha do paciente). O
       `.tabela-rolagem` é só o contêiner de rolagem, sem fundo nem sombra:
       essas tabelas já vivem dentro de um `.cartao`. */
    .tabela-rolagem {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Menos tabela precisando rolar. 16px+20px de respiro por célula, numa
       tela de 375px e cinco colunas, são ~160px gastos só em espaço vazio. */
    .tabela-padrao th,
    .tabela-padrao td {
        padding: 10px 12px;
        font-size: 0.88rem;
    }
}

/* ---------------------------------------------------------
   2. PACIENTES — a tabela vira cartões
   ---------------------------------------------------------
   Rolar uma tabela de lado com o dedo funciona, mas é ruim:
   perde-se o cabeçalho e não se sabe que coluna se está lendo.
   Esta é a tela mais aberta do sistema, então ela ganha o
   tratamento completo: cada linha vira um cartão, e cada campo
   carrega seu próprio rótulo (vindo do atributo data-rotulo do
   HTML, não de um texto repetido no CSS).
   --------------------------------------------------------- */

@media (max-width: 720px) {
    .tabela-cartoes thead { display: none; }

    .tabela-cartoes,
    .tabela-cartoes tbody,
    .tabela-cartoes tr,
    .tabela-cartoes td { display: block; width: 100%; }

    /* `flex` em vez de `block` só para poder reordenar: numa tabela como
       Recebimentos ou Auditoria a coluna que identifica a linha (o paciente,
       o profissional) não é a primeira, e um cartão que começa por "Data
       11/09/2026" não diz de quem ele é. `order` resolve isso sem mexer na
       ordem das colunas no computador. Empilhado, o resultado é idêntico ao
       `block` de antes. */
    .tabela-cartoes tr {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--pv-borda);
        border-radius: var(--pv-raio-campo);
        padding: 14px 16px;
        margin-bottom: 10px;
        background: var(--pv-branco);
    }

    .tabela-cartoes td.celula-titulo { order: -1; }
    .tabela-cartoes td.celula-acao { order: 99; }

    /* Variante para a célula que tem DUAS ou mais ações (Corrigir +
       Estornar, em Finanças). A `.celula-acao` normal transforma o único
       link num botão de largura inteira; aqui as ações convivem lado a
       lado, cada uma com 44px de altura, e o <button> fica igual ao <a>. */
    .tabela-cartoes td.celula-acao-pilulas {
        order: 99;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
        text-align: left !important;
        white-space: normal !important;
    }

    .tabela-cartoes td.celula-acao-pilulas::before { content: none; }
    /* `flex-basis: 0` para as duas ações dividirem a linha em vez de cada
       uma pedir 100% e empilhar. O mínimo é 96px porque a célula tem 235px
       de largura útil num aparelho de 375px: 96 + 96 + 8 de vão cabem, 120
       + 120 + 8 não cabiam e as duas desciam uma para cada linha. Abaixo
       disso elas descem mesmo, que é o certo numa tela mais estreita. */
    .tabela-cartoes td.celula-acao-pilulas > form,
    .tabela-cartoes td.celula-acao-pilulas > .btn-situacao,
    .tabela-cartoes td.celula-acao-pilulas > .botao-remover {
        flex: 1 1 0;
        min-width: 96px;
        margin: 0;
    }

    .tabela-cartoes td.celula-acao-pilulas .btn-situacao,
    .tabela-cartoes td.celula-acao-pilulas .botao-remover,
    .tabela-cartoes td.celula-acao-pilulas select {
        display: block;
        width: 100%;
        min-height: 44px;
    }

    /* Célula vazia (a coluna de ações sem conteúdo numa linha estornada, por
       exemplo) não vira uma linha em branco no meio do cartão. */
    .tabela-cartoes td:empty { display: none; }

    .tabela-cartoes td {
        border: 0;
        padding: 4px 0;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 14px;
        text-align: right;
    }

    /* O rótulo da coluna, à esquerda de cada valor. */
    .tabela-cartoes td::before {
        content: attr(data-rotulo);
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--pv-texto-suave);
        text-align: left;
        flex: none;
    }

    /* A primeira célula é o nome: vira o título do cartão,
       sem rótulo e ocupando a linha toda. */
    .tabela-cartoes td.celula-titulo {
        display: block;
        text-align: left;
        padding-bottom: 10px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--pv-borda);
    }

    .tabela-cartoes td.celula-titulo::before { content: none; }

    /* Em Pacientes o título é um link, e o tamanho vem da regra do <a>
       abaixo. Em Documentos, Auditoria e Faturas ele é texto puro — sem
       isto, o título do cartão sai do mesmo tamanho dos rótulos. */
    .tabela-cartoes td.celula-titulo {
        font-size: 1.06rem;
        font-weight: 700;
        line-height: 1.3;
        color: var(--pv-titulo);
    }

    .tabela-cartoes td.celula-titulo a {
        font-size: 1.06rem;
        font-weight: 700;
        line-height: 1.3;
    }

    /* A última célula costuma ser a ação: alvo largo, tocável. */
    .tabela-cartoes td.celula-acao {
        display: block;
        text-align: left;
        margin-top: 10px;
    }

    .tabela-cartoes td.celula-acao::before { content: none; }

    .tabela-cartoes td.celula-acao a {
        display: block;
        min-height: 44px;
        line-height: 44px;
        text-align: center;
        border: 1px solid var(--pv-ciano);
        border-radius: var(--pv-raio-pilula);
        font-weight: 700;
    }

    /* Sem a moldura da tabela em volta dos cartões. */
    .tabela-cartoes-solta .tabela-padrao-wrap {
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }
}

/* ---------------------------------------------------------
   3. CALENDÁRIO DO MÊS — a causa dos 202px
   ---------------------------------------------------------
   `repeat(7, 1fr)` parece dividir a largura em sete, mas `1fr`
   é `minmax(auto, 1fr)`: a coluna nunca encolhe abaixo do seu
   conteúdo. Bastava uma pílula "2 marcados" para empurrar a
   coluna, e sete colunas empurradas colocaram meia semana fora
   da tela.

   `minmax(0, 1fr)` é o que realmente divide em sete partes
   iguais e deixa o conteúdo se virar dentro do espaço.
   --------------------------------------------------------- */

.calendario { grid-template-columns: repeat(7, minmax(0, 1fr)); }

@media (max-width: 720px) {
    .calendario { gap: 3px; }

    /* A barra "‹ setembro de 2026 ›" tinha `min-width: 190px` no
       título e nenhum flex-wrap: em 360px — largura de Android
       comum — ela sozinha empurrava a página 5px para fora, e 45px
       em 320px. O calendário já cabia; era a barra acima dele.
       Medido, não deduzido: o teste aponta o elemento pelo nome. */
    .agenda-navegacao {
        flex-wrap: wrap;
        min-width: 0;
        row-gap: 6px;
    }

    .agenda-mes {
        min-width: 0;
        font-size: 1.12rem;
        flex: 1 1 auto;
        text-align: center;
    }

    .dia {
        min-height: 58px;
        padding: 4px 3px;
        gap: 2px;
        overflow: hidden;      /* nada escapa da célula */
    }

    .dia-numero { font-size: 0.9rem; }

    /* O "+" tinha 22x22 — metade do alvo que um dedo acerta, e
       encostado no link que abre o dia. Some no celular: tocar
       em qualquer parte do dia já abre a agenda dele, e de lá
       se agenda com um botão de tamanho decente. */
    .dia-agendar { display: none; }

    /* As pílulas viram só o número, colorido. A palavra
       ("marcado", "feito", "falta") está num <span> próprio no
       HTML justamente para poder sumir aqui sem levar o número
       junto. */
    .dia-pilulas {
        display: flex;
        flex-wrap: wrap;
        gap: 3px;
        align-items: center;
    }

    .pilula-contagem {
        font-size: 0.72rem;
        padding: 1px 6px;
        min-width: 20px;
        text-align: center;
        line-height: 1.5;
    }

    .pilula-contagem .rotulo-pilula { display: none; }
}

/* ---------------------------------------------------------
   4. AGENDA DO DIA — alvos que o dedo acerta
   ---------------------------------------------------------
   Realizado, Não veio e Cancelar tinham 31px de altura. O
   mínimo recomendado é 44px, e aqui não é preciosismo: um toque
   errado em "Não veio" grava falta no histórico de uma criança,
   e falta é sinal clínico de abandono.
   --------------------------------------------------------- */

@media (max-width: 620px) {
    .compromisso-acoes { gap: 8px; width: 100%; }

    .compromisso-acoes button,
    .compromisso-acoes .botao-acao,
    .compromisso-acoes a {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 0.92rem;
        flex: 1 1 auto;
    }

    /* "Lançar pagamento" e "✓ pago" ficavam em 11.8px. */
    .pilula-cobrar, .pilula-paga { font-size: 0.84rem; min-height: 32px; }

    .compromisso { padding: 14px; }

    /* O nome do paciente é o que se toca para abrir a ficha —
       e estava com 18px de altura, a altura da própria letra. */
    a.compromisso-nome {
        display: block;
        font-size: 1.02rem;
        min-height: 44px;
        padding: 8px 0;
        line-height: 1.35;
    }
}

/* ---------------------------------------------------------
   5. O MÍNIMO GERAL
   --------------------------------------------------------- */

@media (max-width: 720px) {
    /* Nenhuma tela do sistema deve rolar de lado. Se algo ainda
       estourar, é bug — e aparece como corte, não como rolagem
       infinita. */
    body { overflow-x: hidden; }

    /* `.link-tabela` é o link de texto usado em todo o sistema:
       nomes de paciente, "Abrir ficha", "Voltar ao calendário",
       "Ver o relatório". Media nessas telas: 15 a 19px de altura.
       Um dedo acerta confortavelmente a partir de ~44px, e errar
       aqui significa abrir a ficha da criança errada.

       O padding vertical resolve sem mexer no texto: a letra
       continua do mesmo tamanho, a área que responde ao toque é
       que cresce. `inline-flex` para o min-height valer num
       elemento que é inline por natureza. */
    .link-tabela {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding-block: 4px;
    }

    /* Dentro do cartão, o nome do paciente é o alvo principal:
       linha inteira, não só a largura do texto. */
    .tabela-cartoes td.celula-titulo a.link-tabela {
        display: block;
        width: 100%;
        min-height: 44px;
        padding: 8px 0;
        line-height: 1.35;
    }

    /* A marca no alto da barra tinha 30px. */
    .marca-topo {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Barras de ação que empurravam a largura. */
    .barra-acoes, .cabecalho-pagina {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* O número na pílula do calendário fica sozinho quando o
       rótulo some; 11.5px é pequeno demais para um dado que se
       lê de relance. */
    .pilula-contagem { font-size: 0.78rem; }
}

/* ---------------------------------------------------------
   6. GRADES QUE NÃO ENCOLHEM
   ---------------------------------------------------------
   Mesma armadilha da seção 3, em outros quatro lugares: `1fr` é
   `minmax(auto, 1fr)` e nunca fica menor que o conteúdo, e
   `minmax(320px, 1fr)` é 320px fixos quando só há 335px de tela.
   O resultado é sempre o mesmo — a grade fica mais larga que o
   celular e empurra a página inteira para o lado.
   --------------------------------------------------------- */

/* Agenda do dia: hora | dados | ações, tudo na mesma linha. A
   coluna `auto` das ações crescia até caber "Realizado", "Não
   veio" e "Cancelar série" lado a lado — uns 250px que não
   existem numa tela de 375. As ações passam para a linha de
   baixo, inteiras. */
@media (max-width: 620px) {
    .compromisso {
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 10px 12px;
    }

    .compromisso-acoes {
        grid-column: 1 / -1;
        flex-wrap: wrap;
    }
}

@media (max-width: 720px) {
    /* Marcos do desenvolvimento: quatro blocos de domínio. */
    .grade-dominios {
        grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    }

    /* Recibo: descrição | valor | remover. Dois campos de texto com
       largura natural mais o botão de 42px não cabem em 375px. */
    .sessao-linha {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        gap: 8px;
    }

    /* Nenhum campo de formulário pode ser mais largo que a tela —
       `size` e `min-width` de input têm largura própria e ignoram
       o contêiner. */
    .campo input,
    .campo select,
    .campo textarea {
        max-width: 100%;
        min-width: 0;
    }
}

/* ---------------------------------------------------------
   7. A REDE DE SEGURANÇA
   ---------------------------------------------------------
   `overflow-x: hidden` só no body não basta: em vários
   navegadores de celular quem rola é o elemento `html`, e a
   página continua deslizando de lado mesmo com o body cortado.
   Com `max-width: 100%` nos dois, o que estourar fica cortado —
   visível como corte, que é bug que se vê, e não como rolagem
   fantasma, que é bug que se sente e não se acha.
   --------------------------------------------------------- */

@media (max-width: 720px) {
    html {
        overflow-x: hidden;
        max-width: 100%;
    }

    body {
        max-width: 100%;
    }
}

/* ---------------------------------------------------------
   8. MATRIZ DE PERMISSÕES
   ---------------------------------------------------------
   Ela também vira cartão (um por recurso), como as demais: a
   versão anterior prendia a primeira coluna e pedia para
   arrastar, e arrastar deixa metade dos perfis fora da vista.
   O empilhamento repete o nome do perfil em cada cartão — é o
   preço de ver os cinco sem arrastar nada.

   Só falta desfazer o `text-align: center` que a matriz usa no
   computador: no cartão o valor fica à direita do rótulo, como
   em todas as outras tabelas.
   --------------------------------------------------------- */

@media (max-width: 720px) {
    .matriz-papeis.tabela-cartoes td { text-align: right; }
    .matriz-papeis.tabela-cartoes td.celula-titulo { text-align: left; }
}