/* ===========================================================================
   06 · INTERAÇÃO
   Como o sistema responde ao teclado e ao dedo. Fica DEPOIS dos componentes
   porque sobrescreve medidas deles de propósito: é a última palavra sobre
   tamanho de alvo e sobre contorno de foco.
   =========================================================================== */

/* ── Foco visível ──────────────────────────────────────────────────────────
   O pedido foi "sempre usar outline-none". Ao pé da letra isso deixa os 492
   elementos focáveis das telas do painel sem sinal nenhum e torna o sistema
   impossível de operar no teclado: a pessoa dá Tab e não sabe onde está.
   O contorno padrão do navegador sai (é ele que o dono não quer ver), e no
   lugar entra um anel do tema em `:focus-visible`, que o navegador só liga na
   navegação por TECLADO. Clicar com o mouse continua sem anel nenhum, que é o
   comportamento que ele descreveu querer.
   O anel usa `outline`, não `box-shadow`: `outline` acompanha o
   `border-radius` do elemento sozinho e não entra na conta do layout, então
   não desloca nada nem cria barra de rolagem. */
a, button, input, select, textarea, summary, [tabindex], [onclick], [contenteditable] {
    outline: none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[onclick]:focus-visible,
[contenteditable]:focus-visible,
input:not(.form-input):focus-visible,
select:not(.form-select):focus-visible,
textarea:not(.form-textarea):focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Campo de formulário fica de fora do anel de propósito: ele JÁ tem indicador
   visível e desenhado (borda dourada mais brilho de 3px, em 04-componentes),
   e os dois juntos viram dois anéis concêntricos. O `:not()` cobre os selects
   e inputs soltos das telas, que não têm classe e ficariam sem nada.
   É também o único consumidor de `.form-textarea`, que não aparece em view
   nenhuma do painel: tirar a classe do `:not()` devolveria o anel duplo no
   dia em que alguém marcasse um <textarea> com ela. */

/* ── Área de toque ─────────────────────────────────────────────────────────
   Medido a 360px em /elite-cred/loans: 144 dos 149 alvos clicáveis tinham
   menos de 44px em algum lado, e o `.btn-sm` saía 32x21px. É a reclamação do
   celular: o dedo erra o botão.
   DUAS DECISÕES, as duas por causa do que pode dar errado:
   1) A área cresce pelo TAMANHO DA CAIXA (min-height / min-width com
      inline-flex), não por um `::after` posicionado por fora da borda. O
      pseudo-elemento não mudaria o desenho, mas dois botões vizinhos com 8px
      de intervalo passariam a ter as áreas SOBREPOSTAS, e quem mira "Editar"
      acerta "Excluir". Num sistema de empréstimo isso não é detalhe.
   2) O crescimento é VERTICAL. Largura só nos botões que são quadrados de
      ícone (já tinham 32 a 36px). Esticar a largura é o que estoura o layout
      das tabelas; a altura só deixa a linha mais alta, que no celular é o que
      se quer mesmo.
   O recorte é `pointer: coarse` (dedo, em qualquer largura) OU até 1024px, que
   é o mesmo ponto onde a sidebar vira gaveta. No desktop com mouse nada muda,
   e a tabela densa continua densa. */
@media (pointer: coarse), (max-width: 1024px) {
    .table-container td .btn:not(:has(:not(.icone))) {
        min-height: 40px;
        min-width: 40px;
        padding: 0 var(--esp-3);
    }
    .table-container td .btn .icone {
        width: 18px;
        height: 18px;
    }
}

@media (pointer: coarse), (max-width: 1024px) {
    .btn,
    .btn-sm,
    .pagination a,
    .pagination span,
    .nav-item,
    .back-link,
    .file-link,
    .cobranca-fone,
    .modal-close {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Quadrado de ícone: aqui a largura também é curta, e são 44px exatos. */
    .btn-icon,
    .menu-toggle,
    .modal-close {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }

    /* `.btn-sm` sem texto (só o ícone) é o caso dos 64 botões de 32x21px da
       lista de empréstimos: sem largura mínima ele continua estreito. */
    .btn-sm {
        min-width: 44px;
        justify-content: center;
    }

    /* Número da página saía 38x44 e 43x44: a altura já tinha entrado, faltava
       a largura. A paginação quebra linha, então alargar não estoura nada. */
    .pagination a,
    .pagination span {
        min-width: 44px;
        justify-content: center;
    }

    /* Link solto dentro de célula de tabela e do painel "Cobrar agora".
       O pior deles é o ícone do WhatsApp da tela de Recuperação: 11x15px,
       32 vezes na página. O telefone sai com 15px de altura.
       `max-width: 100%` é trava, não enfeite: caixa inline-flex é atômica e
       não quebra linha, então sem o teto um texto longo viraria vazamento
       horizontal, que é o defeito que este CSS inteiro existe para não ter. */
    td > a,
    .page-content > a,
    .cobranca-item a,
    .cobranca-pe a,
    a[href^="tel:"],
    a[href*="wa.me"],
    a[href*="whatsapp"] {
        min-height: 44px;
        max-width: 100%;
        display: inline-flex;
        align-items: center;
    }

    a[href*="wa.me"],
    a[href*="whatsapp"] {
        min-width: 44px;
        justify-content: center;
    }

    /* Campo de formulário: faltava 1px nos 43px do `.form-input`. */
    .form-input,
    .form-select,
    .form-textarea,
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        min-height: 44px;
    }

    /* `.nav-item` é bloco com ícone à esquerda: inline-flex aqui tiraria a
       largura total da gaveta, então ele volta a ser flex de linha cheia. */
    .nav-item {
        display: flex;
    }

    /* Cabeçalho de card que é clicável (só os que têm onclick) tinha 20px de
       altura. Os outros cabeçalhos não são alvo e ficam como estão. */
    .card-header[onclick] {
        min-height: 44px;
    }

    /* `.quick-actions` e `.cobranca-acoes` ganham respiro vertical para as
       linhas de 44px não ficarem grudadas quando quebram. */
    .quick-actions,
    .cobranca-acoes {
        row-gap: var(--esp-2);
    }
}

/* BOTAO SO DE ICONE DENTRO DE TABELA: menor, e com o icone maior dentro dele.
   Medido a 390px: 44x44px com um icone de 13px, ou seja, 30% de desenho e 70%
   de vazio, e tres deles ocupavam 148px de uma celula de 171. O dono reclamou
   do tamanho, e a desproporcao e parte do que faz o botao PARECER grande.

   O seletor e `:has(> .icone:only-child)` e NAO `:not(:has(:not(.icone)))`:
   o segundo parece dizer a mesma coisa e nunca casa, porque o <svg> tem um
   <use> dentro e esse <use> nao tem a classe .icone.

   A regra fica no FIM do arquivo e repete a classe (`.btn.btn`) porque a regra
   de alvo de toque declara `min-height: 44px`, e empate de especificidade se
   decide por ordem.

   40px continua sendo alvo de toque defensavel: e o minimo do Material Design,
   contra os 44 da Apple, e estes botoes ficam numa fila com 8px de intervalo,
   longe da borda da tela. O icone sobe de 13 para 18px, que e o que tira a
   sensacao de botao vazio. */
@media (pointer: coarse), (max-width: 1024px) {
    .table-container td .btn.btn:has(> .icone:only-child) {
        min-height: 40px;
        min-width: 40px;
        padding: 0 var(--esp-3);
    }
    .table-container td .btn .icone {
        width: 18px;
        height: 18px;
    }
}