/* Regras compartilhadas de toque, navegação e leitura em telas pequenas.
 * Carregado após os estilos de cada área; links dentro de textos seguem links. */
@media screen and (max-width: 700px) {
    body .botao,
    body .menu a,
    body .menu-alternar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 44px;
        text-align: center;
        line-height: 1.35;
        white-space: normal;
    }

    body .botao[hidden], body .menu-alternar[hidden] { display: none; }

    a.acao-mobile,
    button.acao-mobile,
    a.navegacao-mobile,
    .navegacao-mobile a,
    .migalha a,
    .usuario .botao-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 44px;
        min-height: 44px;
        max-width: 100%;
        padding: 10px 14px;
        border: 1px solid currentColor;
        border-radius: 12px;
        text-align: center;
        text-decoration: none;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .navegacao-mobile { display: flex; flex-wrap: wrap; gap: 8px; }
    .usuario { min-width: 0; }
    .usuario .nome { min-width: 0; overflow-wrap: anywhere; }
    .usuario form { flex-shrink: 0; }
    .usuario .botao-link { white-space: nowrap; overflow-wrap: normal; }
    .painel .topo { flex-wrap: wrap; }
    .painel .topo .marca { margin-inline: auto; }
    .painel .usuario { flex: 1 1 230px; justify-content: space-between; }
    .painel .menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .painel .menu[hidden] { display: none; }
    .painel .menu a { border: 1px solid var(--borda); background: var(--superficie); }
    .navegacao-mobile a { flex: 1 1 115px; }
    .migalha { margin-bottom: 16px; }
    body summary {
        min-height: 44px;
        padding-block: 10px;
        line-height: 1.4;
        cursor: pointer;
    }
    body .campo input:not([type="checkbox"]):not([type="radio"]),
    body .campo select,
    body .campo textarea,
    body .filtros input,
    body .filtros select {
        min-height: 44px;
        min-width: 0;
        max-width: 100%;
        font-size: 16px;
    }
    body :is(.campo, .filtros .campo, .portal-filtros) :is(input, select, textarea) { font-size: 16px; }
    body input[type="file"] { min-height: 44px; max-width: 100%; font-size: 16px; }
    body input[type="file"]::file-selector-button {
        min-height: 44px; padding: 10px 12px; border: 1px solid var(--borda);
        border-radius: 10px; background: var(--superficie); color: var(--destaque); font: inherit;
    }
    .campo label:has(input[type="checkbox"]),
    .campo label:has(input[type="radio"]) {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding-block: 8px;
    }
    .qr svg { max-width: 100%; height: auto; }
    .segredo code, .endereco-placa { overflow-wrap: anywhere; }
    .cabecalho-pagina { flex-wrap: wrap; }
    .filtros .campo, .grade > *, .botoes > * { min-width: 0; }
    .botoes { flex-wrap: wrap; gap: 8px; }
    .botoes > a, .botoes > button { max-width: 100%; }

    /* Cada registro vira um cartão; o cabeçalho continua disponível à leitura assistida. */
    body .tabela-rolavel .tabela.tabela-mobile,
    body .tabela.tabela-mobile { display: block; min-width: 0; width: 100%; }
    .tabela-mobile thead {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
    }
    .tabela-mobile tbody { display: grid; gap: 14px; }
    .tabela-mobile tr { display: block; padding: 12px; border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie); }
    body .tabela-mobile td, body .tabela-mobile th[scope="row"] {
        display: block; padding: 9px 4px; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere;
    }
    body .tabela-mobile td.numero { text-align: left; }
    .tabela-mobile [data-rotulo]::before {
        content: attr(data-rotulo); display: block; margin-bottom: 4px;
        color: var(--suave); font-size: 0.8rem; font-weight: 600;
    }
    .tabela-mobile td:empty { display: none; }
    .tabela-mobile td > .acao-mobile + .acao-mobile { margin-top: 6px; }
    .tabela-mobile a { max-width: 100%; }
    .dica-rolagem { display: block; margin: 8px 0; color: var(--suave); font-size: 0.85rem; }
}
@media screen and (min-width: 701px) { .dica-rolagem { display: none; } }