/* =========================================================================
   Celular e tablet.

   Tudo aqui fica dentro de @media screen and (max-width: 991.98px), o mesmo corte em
   que o tema esconde o menu lateral: no computador nada muda.

   No computador a página não rola; quem rola é a caixa .main-content, de
   altura fixa (100vh). No celular isso escondia o fim das telas atrás da
   barra do navegador e criava rolagem dentro de rolagem. Aqui a própria
   página rola, como qualquer site de celular.
   ========================================================================= */

@media screen and (max-width: 991.98px) {

    /* ---------- estrutura ---------- */

    html {
        overflow-x: hidden;
    }

    body {
        overflow: visible !important;
        height: auto !important;
        min-height: 100vh;
        min-height: 100dvh;
    }

    /* manchas de luz do fundo: com 1200px de largura, alargavam a página e
       empurravam o cabeçalho (notificações, sair) para fora da tela */
    .light-point-1,
    .light-point-2,
    .light-point-3 {
        display: none !important;
    }

    .main-content {
        max-height: none !important;
        min-height: calc(100vh - 53px) !important;
        min-height: calc(100dvh - 53px) !important;
        overflow: visible !important;
        margin-top: 53px !important;
        padding: 16px 12px 28px !important;
        /* sem camada própria: os popups abertos daqui de dentro precisam
           ficar acima do cabeçalho fixo (senão o topo deles some atrás dele) */
        z-index: auto !important;
    }

    /* ---------- cabeçalho ---------- */

    .main-header-container {
        padding-left: 8px !important;
        padding-right: 4px !important;
    }

    .main-header-container .header-link {
        padding: 1rem 0.45rem;
    }

    /* tela cheia não existe no iPhone e no celular só atrapalha */
    .header-fullscreen {
        display: none !important;
    }

    .main-header-container .notifications-dropdown .main-header-dropdown {
        width: min(22rem, calc(100vw - 16px));
    }

    /* avisos do topo (recurso temporário, plano...): mais compactos */
    .main-content > .alert {
        font-size: 0.8rem;
        line-height: 1.45;
        padding: 10px 40px 10px 12px;
        margin-bottom: 12px;
    }

    .main-content > .alert > svg {
        width: 1.2rem;
        height: 1.2rem;
    }

    .main-content > .alert .btn-close {
        padding: 12px;
    }

    /* avisos (toasts) não podem passar da largura da tela */
    #my-toast-container {
        max-width: 100vw;
    }

    #my-toast-container .toast {
        max-width: calc(100vw - 2rem);
    }
}

/* =========================================================================
   Listas de clientes (.client-table: clientes, atualizações, recurso,
   autossuspensivas, multas recentes, senhas incorretas, erros, lixeira).

   No celular cada linha vira um cartão: nome em cima, os demais campos em
   duas colunas com o nome da coluna acima do valor (data-label, posto pelo
   mobile.js), e o olho no canto. A lista cresce com a página, sem caixa de
   rolagem própria e sem rolar para o lado.
   ========================================================================= */
@media screen and (max-width: 767.98px) {

    .table-itens {
        height: auto !important;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 10px;
    }

    .table-itens .left-itens {
        margin-top: 8px;
    }

    .search-input-area {
        width: 100% !important;
        height: 46px;
    }

    /* filtros + busca (multas recentes): uma linha só não cabia */
    .table-itens > div:not(.left-itens):not(.search-input-area) {
        flex-wrap: wrap;
        width: 100%;
        gap: 10px !important;
    }

    .filter-buttons {
        flex-wrap: wrap;
        width: 100%;
        gap: 8px !important;
    }

    .filter-buttons .btn {
        white-space: nowrap;
    }

    .session-subtitle {
        margin-bottom: 8px !important;
    }

    .customSearchInput {
        font-size: 16px !important;  /* menos de 16px faz o iPhone dar zoom ao focar */
    }

    /* (.main-content na frente: algumas telas carregam o datatable.css
       dentro da página, depois deste arquivo, com !important) */
    .main-content .table-card {
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .main-content .table-card-content {
        overflow: visible !important;
        padding-right: 0 !important;
    }

    .main-content .client-table,
    .main-content .client-table tbody {
        display: block;
        width: 100% !important;
    }

    .main-content .client-table thead {
        display: none;
    }

    .main-content .client-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 14px;
        position: relative;
        background: #fff !important;
        border-radius: 14px;
        box-shadow: 0 1px 4px rgba(16, 24, 40, .08);
        padding: 14px 58px 14px 16px;
        margin-bottom: 10px;
        cursor: pointer;
    }

    /* "visto" (linha marcada): mantém o verde do computador */
    .main-content .client-table tbody tr.marked {
        background: #e0f7e9 !important;
    }

    .main-content .client-table tbody td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        white-space: normal !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
        overflow-wrap: anywhere;
        font-size: 14px !important;
        line-height: 1.35;
    }

    .main-content .client-table tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-family: "Poppins", sans-serif;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: .04em;
        word-spacing: 0;
        text-transform: uppercase;
        color: #9446E0;
        margin-bottom: 2px;
    }

    /* nome em destaque, ocupando a linha toda, sem rótulo */
    .main-content .client-table tbody td.nome-column {
        grid-column: 1 / -1;
        order: -3;
        font-family: "Poppins", sans-serif !important;
        font-size: 15.5px !important;
        letter-spacing: 0 !important;
        word-spacing: 0 !important;
        padding-top: 4px !important;
    }

    .main-content .client-table tbody td.nome-column::before {
        display: none !important;
    }

    .main-content .client-table tbody td.cpf-column { order: -2; }
    .main-content .client-table tbody td.cnh-column { order: -1; }
    .main-content .client-table tbody td[data-label="CADASTRO"] { order: 1; }

    /* olho: canto de cima, à direita; a caixa de "visto" (atualizações,
       recurso, autossuspensivas, multas recentes) logo abaixo dele */
    .main-content .client-table tbody td:has(.see-client) {
        position: absolute !important;
        top: 12px;
        right: 12px;
    }

    .main-content .client-table tbody td:has(.vizualizado-checkbox) {
        position: absolute !important;
        top: 60px;
        right: 16px;
    }

    .main-content .client-table tbody td:has(.vizualizado-checkbox) .vizualizado-checkbox {
        margin: 0;
    }

    .main-content .client-table tbody td:has(.see-client)::before,
    .main-content .client-table tbody td:has(.vizualizado-checkbox)::before {
        display: none !important;
    }

    /* senhas incorretas: campo da nova senha + Atualizar na linha toda (em
       meia largura o botão cobria o campo) */
    .main-content .client-table tbody td.nova-senha-column {
        grid-column: 1 / -1;
    }

    .main-content .client-table tbody td.nova-senha-column .input-button {
        width: 100% !important;
        display: flex !important;
    }

    .main-content .client-table tbody td.nova-senha-column .input-button > input {
        flex: 1;
        min-width: 0;
        width: auto !important;
        padding-right: 130px;
        font-size: 16px;
    }

    /* células sem valor (status ainda não consultado etc.) não ocupam espaço */
    .main-content .client-table tbody td[data-label]:empty {
        display: none;
    }

    /* "Nenhum cliente encontrado..." */
    .main-content .client-table tbody td.dataTables_empty {
        position: static !important;
        grid-column: 1 / -1;
        text-align: center;
    }

    .main-content .client-table tbody tr:has(td.dataTables_empty) {
        padding: 18px 16px;
        cursor: default;
    }

    .main-content .table-footer-itens {
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
}

/* Tablet em pé (768–991px): as listas continuam tabelas, mas crescem com a
   página em vez de ficar numa caixa de altura fixa com rolagem própria (rolar
   dentro de uma caixa que está dentro da página é ruim no toque). Só sobra a
   rolagem para o lado quando as colunas não cabem. */
@media screen and (min-width: 768px) and (max-width: 991.98px) {

    .main-content .table-card {
        max-height: none !important;
    }

    .main-content .table-card-content {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .tab-content .table-responsive {
        max-height: none !important;
        overflow-y: hidden !important;
        overflow-x: auto !important;
    }

    /* com a página rolando, as subabas não precisam grudar no topo */
    .sticky-row {
        position: relative !important;
        top: auto !important;
    }

    .sticky-row .col-12::after {
        display: none !important;
    }
}

/* =========================================================================
   Página do cliente (single_client).

   No computador o nome e as abas (Visão geral, Multas, ...) ficam dentro do
   cabeçalho do sistema. No celular/tablet o single_client.js deixa esse
   bloco no topo do conteúdo: aqui ele vira uma barra presa ao topo, com as
   abas roláveis para o lado.
   ========================================================================= */
@media screen and (max-width: 991.98px) {

    #client-header.simple-header {
        position: sticky;
        top: 53px;
        z-index: 60;
        flex-wrap: wrap;
        height: auto;
        margin: -16px -12px 14px;
        padding: 10px 12px 10px;
        border-radius: 0;
        box-shadow: 0 2px 8px rgba(16, 24, 40, .08);
    }

    #client-header.simple-header > button {
        width: 36px;
        height: 36px;
        justify-content: center;
        margin-left: -6px;
    }

    #client-header .material-symbols-outlined {
        margin-right: 0;
    }

    #client-header .client-name {
        flex: 1 1 0;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.05rem;
        margin-left: 4px;
    }

    #client-header .line-separator {
        display: none;
    }

    #client-header .buttons {
        flex: 0 0 100%;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 6px;
        padding-top: 8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        /* esmaece a ponta direita: indica que dá para arrastar para o lado */
        -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
        mask-image: linear-gradient(to right, #000 88%, transparent);
    }

    #client-header .buttons::-webkit-scrollbar {
        display: none;
    }

    #client-header .buttons button {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 0.92rem;
        padding: 7px 13px;
        border-radius: 99px;
        background-color: #f1effd;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    #client-header .buttons button.selected {
        background-color: #5b28e9;
        color: #fff;
    }

    /* "Em breve" / "Novo": dentro do botão, não flutuando por cima */
    #client-header .buttons .badge {
        position: static !important;
        margin: 0 !important;
        font-size: 0.6rem;
        padding: 2px 6px;
    }

    /* subabas (Visão geral, Atuais, Removidas, Todas, Histórico...): uma
       linha que arrasta para o lado. No computador elas grudam no topo da
       caixa de rolagem; no celular quem gruda é a barra do cliente, então
       aqui elas rolam com a página. */
    .sticky-row {
        position: relative !important;
        top: auto !important;
        z-index: auto !important;
    }

    .sticky-row .col-12::after {
        display: none !important;
    }

    .page-header {
        height: auto !important;
        padding: 4px 6px !important;
        overflow: hidden;
    }

    .page-header .buttons {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px 2px 8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
        mask-image: linear-gradient(to right, #000 88%, transparent);
    }

    .page-header .buttons::-webkit-scrollbar {
        display: none;
    }

    .page-header .buttons button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .page-header-button-text {
        font-size: 15px !important;
    }

    /* captura de tela ampliada: no computador ela fica dentro da caixa de
       rolagem, na altura da rolagem dela; no celular quem rola é a página,
       então ela cobre a tela inteira (acima do cabeçalho) */
    #customModal.custom-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        z-index: 2000 !important;
    }

    #customModal .custom-modal-content {
        transform: translate(-50%, -50%);
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        padding: 14px;
    }

    #customModal .custom-modal-image {
        max-width: calc(100vw - 52px);
        max-height: calc(100dvh - 52px);
    }

    #customModal .custom-modal-close {
        position: absolute;
        top: 2px;
        right: 8px;
        font-size: 28px;
        line-height: 1;
        padding: 4px;
        z-index: 1;
    }

    /* ---------- Visão geral: informações do cliente ---------- */

    #informacoes-do-cliente > .card-header {
        flex-wrap: wrap;
        gap: 12px;
    }

    #informacoes-do-cliente .client-actions {
        width: 100%;
        flex-wrap: wrap;
        align-items: stretch !important;
    }

    #informacoes-do-cliente .client-actions .btn {
        flex: 1 1 calc(50% - 5px);
        min-width: 0 !important;
        white-space: normal;
        justify-content: center;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 0.55rem 0.6rem;
    }

    #informacoes-do-cliente .client-actions #data-exclusao-info {
        max-width: none;
        width: 100%;
    }

    .info-client-left {
        width: 100% !important;
        padding-right: 0 !important;
        padding-bottom: 16px;
        margin-bottom: 16px;
        border-bottom: 1px solid #0000001a;
    }

    .info-client-left::after {
        display: none;
    }

    .info-client-name {
        white-space: normal !important;
        text-align: center;
        font-size: 1.25rem !important;
        line-height: 1.3;
    }

    .info-left-value-stats {
        margin-top: 18px !important;
    }

    /* as duas linhas (Nascimento/Idade/Senha e CPF/CNH/RG) viram uma grade
       só de duas colunas; a senha, que tem o botão Atualizar, vai para o fim */
    .info-client-left + .col {
        width: 100% !important;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 14px;
    }

    .info-client-left + .col > .row {
        display: contents;
    }

    .info-client-left + .col .info-group {
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
    }

    .info-client-left + .col .info-group:has(#cliente-senha) {
        order: 1;
    }

    .info-client-left + .col > .row .info-group::after {
        display: none !important;
    }

    .info-content {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .btn-atualizar-senha {
        position: static !important;
        display: inline-block;
        transform: none !important;
        margin-top: 8px;
        padding: 4px 10px !important;
    }
}

/* Tabelas das abas do cliente (multas, processos, veículos, multas
   recentes, histórico): cada linha vira um bloco com os campos rotulados.
   A seta de detalhes fica à esquerda; os detalhes abrem logo abaixo. */
@media screen and (max-width: 767.98px) {

    /* sem altura máxima: no computador cada tabela rola dentro do cartão */
    .tab-content .table-responsive {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        padding-right: 0 !important;
    }

    /* o single_client.js põe display:table/none direto no elemento */
    .tab-content .table-responsive > table:not([style*="none"]) {
        display: block !important;
        white-space: normal !important;
        margin-bottom: 0;
    }

    .tab-content .table-responsive > table > thead {
        display: none;
    }

    .tab-content .table-responsive > table > tbody {
        display: block;
    }

    .tab-content .table-responsive > table > tbody > tr:not(.details-row) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 14px;
        position: relative;
        padding: 12px 8px 12px 44px;
        border-bottom: 1px solid #ececf4;
    }

    .tab-content .table-responsive > table > tbody > tr:not(.details-row) > td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        white-space: normal !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow-wrap: anywhere;
        background: transparent !important;
        font-size: 14px;
    }

    .tab-content .table-responsive > table > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #9446E0;
        margin-bottom: 2px;
    }

    /* textos longos ocupam a linha toda */
    .tab-content .table-responsive > table > tbody > tr > td[data-label="INFRAÇÃO"],
    .tab-content .table-responsive > table > tbody > tr > td[data-label="DESCRIÇÃO"],
    .tab-content .table-responsive > table > tbody > tr > td[data-label="TIPO"],
    .tab-content .table-responsive > table > tbody > tr > td[data-label="MARCA/MODELO"],
    .tab-content .table-responsive > table > tbody > tr > td[data-label="LOCAL"] {
        grid-column: 1 / -1;
    }

    /* seta de detalhes: canto esquerdo, com área de toque de verdade (o
       cartão inteiro também abre os detalhes: mobile.js) */
    .tab-content .table-responsive > table > tbody > tr:not(.details-row) {
        cursor: pointer;
    }

    .tab-content .table-responsive > table > tbody > tr:not(.details-row) > td:first-child:has(.toggle-details) {
        position: absolute !important;
        left: 4px;
        top: 8px;
        width: 36px;
    }

    .tab-content .toggle-details {
        width: 36px;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50%;
    }

    /* bolinha verde de "não visto": no canto da seta (a classe vai na linha
       ou na célula da seta, conforme a tabela) */
    .tab-content .table-responsive > table > tbody > tr.not-visualized::after,
    .tab-content .table-responsive > table > tbody > tr > td.not-visualized::after {
        left: 4px !important;
        top: 10px !important;
        transform: none !important;
        width: 9px;
        height: 9px;
    }

    .tab-content .table-responsive > table > tbody > tr > td.not-visualized::after {
        left: 0 !important;
        top: 2px !important;
    }

    /* coluna sem título (selo "Novidade"/"atualizada"): só aparece se tiver selo */
    .tab-content .table-responsive > table > tbody > tr:not(.details-row) > td:not([data-label]):not(:has(.toggle-details)):not(:has(.badge)) {
        display: none;
    }

    .tab-content .table-responsive > table > tbody > tr:not(.details-row) > td:not([data-label]):has(.badge) {
        grid-column: 1 / -1;
    }

    .tab-content .table-responsive > table > tbody > tr.details-row,
    .tab-content .table-responsive > table > tbody > tr.details-row > td {
        display: block;
        width: 100%;
    }

    .tab-content .table-responsive > table > tbody > tr.details-row > td {
        padding: 0 !important;
        max-width: none !important;
        border: 0 !important;
    }

    /* processos: o tema limita as células a 250px com !important e ID */
    #processos-page .table-responsive > table > tbody > tr > td {
        max-width: none !important;
    }

    /* linha do tempo do processo (Detran → Jari → Cetran): no computador é
       horizontal, com 345px por etapa; aqui as etapas ficam uma embaixo da
       outra */
    .tab-content .timeline-container:has(.timeline) {
        padding-right: 0 !important;
    }

    .tab-content .timeline-container.show-info {
        padding: 14px !important;
        overflow: visible !important;
    }

    .tab-content .timeline {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
        max-height: none !important;
    }

    .tab-content .timeline::before,
    .tab-content .timeline > :nth-last-child(1)::before {
        display: none !important;
    }

    .tab-content .timeline-item,
    .tab-content .timeline .timeline-item:first-child:not(.timeline-empty) {
        min-width: 0 !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .tab-content .timeline-empty {
        width: 100% !important;
    }

    .tab-content .timeline-button {
        position: static !important;
    }

    .tab-content .timeline-button::before {
        display: none;
    }

    /* detalhes da linha: uma coluna de "campo: valor" (eram duas) */
    .tab-content .info-container {
        white-space: normal;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .tab-content .info-container.show-info {
        margin: 0 0 12px !important;
    }

    .tab-content .info-container div {
        gap: 12px;
    }

    .tab-content .info-container div:nth-last-child(2) {
        border-bottom: 1px solid #ddd !important;
        padding-bottom: 8px !important;
    }

    .tab-content .info-k {
        min-width: 0 !important;
        flex-shrink: 0;
    }

    .tab-content .info-v {
        min-width: 0;
        overflow-wrap: anywhere;
        justify-content: flex-end;
    }
}

/* =========================================================================
   Pagamento (QR Code / Pix copia e cola).

   No computador a tela cabe inteira na altura da janela (altura travada e
   cartões com overflow hidden). Abaixo de 1100px os cartões ficam um embaixo
   do outro e, espremidos nessa altura, cortavam o QR, o código e o resumo:
   aqui cada cartão tem a altura do seu conteúdo.
   ========================================================================= */
@media screen and (max-width: 1100px) {

    .pix-pay:not(.choose-pay) {
        max-height: none !important;
        height: auto !important;
    }

    .pix-pay:not(.choose-pay) .pix-grid-3 {
        flex: none !important;
    }

    .pix-pay .pix-summary-card,
    .pix-pay .pix-copy-card,
    .pix-pay .pix-qr-card {
        height: auto !important;
    }

    .pix-pay .pix-summary-total {
        height: auto !important;
    }

    .pix-pay textarea#emv {
        height: 112px !important;
        min-height: 112px !important;
        font-size: 13px;
    }

    .pix-pay .pix-qr-stage {
        display: flex;
        justify-content: center;
    }

    .pix-pay .qrWhite {
        width: min(300px, 100%) !important;
        max-height: none !important;
    }
}

@media screen and (max-width: 575.98px) {

    /* no celular o caminho é copiar o código (não dá para escanear a própria
       tela): copia e cola primeiro, depois o QR (para pagar de outro aparelho)
       e o resumo */
    .pix-pay .pix-grid-3 {
        grid-template-areas:
            "copy"
            "qr"
            "summary" !important;
        gap: 12px !important;
    }

    .pix-pay .pix-h1 {
        font-size: 24px;
        line-height: 1.25;
    }

    .pix-pay .pix-card {
        padding: 14px;
        border-radius: 14px;
    }

    .pix-pay .pix-copy-card .actions button {
        flex: 1 1 100%;
        padding: 14px;
        font-size: 16px;
    }

    .pix-pay .pix-total-value {
        text-align: left;
        font-size: 28px;
    }

    .pix-pay .pill {
        width: 100%;
    }
}

/* =========================================================================
   Tabelas simples em blocos empilhados, cada valor com o nome da coluna
   (data-label, do mobile.js): históricos do Meu plano, alterações de plano
   em aberto e histórico do plano (admin).
   ========================================================================= */
@media screen and (max-width: 575.98px) {

    .plano-wrap {
        padding: 4px 0 !important;
    }

    .plano-historico {
        padding: 12px 14px !important;
    }

    .plano-historico-tabela thead,
    .recob-tabela thead,
    .hist-plano thead {
        display: none;
    }

    .plano-historico-tabela,
    .plano-historico-tabela tbody,
    .recob-tabela,
    .recob-tabela tbody,
    .hist-plano,
    .hist-plano tbody {
        display: block;
        width: 100% !important;
    }

    .plano-historico-tabela tr,
    .recob-tabela tr,
    .hist-plano tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
        padding: 12px 0;
        border-bottom: 1px solid #f1f2f6;
        text-align: left;
    }

    .plano-historico-tabela tr:last-child,
    .recob-tabela tr:last-child,
    .hist-plano tr:last-child {
        border-bottom: 0;
    }

    .plano-historico-tabela td,
    .recob-tabela td,
    .hist-plano td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        min-width: 0;
        width: auto !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-align: left !important;
    }

    .plano-historico-tabela td[data-label]::before,
    .recob-tabela td[data-label]::before,
    .hist-plano td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #6b7280;
        margin-bottom: 2px;
    }

    /* linha de "nenhum registro" (colspan) e a empresa ocupam a linha toda */
    .plano-historico-tabela td[colspan],
    .recob-tabela td[colspan],
    .hist-plano td[colspan],
    .recob-tabela td[data-label="Empresa"],
    .recob-tabela td[data-label="Situação"],
    .recob-tabela td[data-label="Último erro"] {
        grid-column: 1 / -1;
    }

    .recob-tabela td[data-label="Empresa"] {
        font-weight: 600;
    }

    /* empresas (admin): título + botões de exportar quebram linha */
    .table-itens .left-itens {
        flex-wrap: wrap;
        gap: 10px !important;
    }

    .export-buttons {
        flex-wrap: wrap;
    }
}

/* =========================================================================
   Página que o cliente final abre pelo link de acesso
   (visualizar-dados-cliente). As tabelas largas (9 colunas de multas)
   deixavam a página com mais de 1000px: viram blocos com o nome de cada
   campo. A impressão/PDF não é afetada (papel é mais largo que 767px).
   ========================================================================= */
@media screen and (max-width: 767.98px) {

    .container-dados {
        max-width: 100% !important;
        min-width: 0;
        padding: 12px !important;
    }

    /* (body > div: o logo do cabeçalho do sistema também é .header-logo) */
    body > div.header-logo {
        padding: 12px 4px !important;
    }

    body > div.header-logo .container-dados > div {
        flex-wrap: wrap;
        gap: 8px;
    }

    body > div.header-logo .container-dados > div > div {
        align-items: flex-start !important;
    }

    .card-section {
        padding: 18px 14px !important;
        margin-bottom: 14px;
    }

    .container-dados .info-item {
        gap: 10px;
    }

    .container-dados .info-label {
        min-width: 140px !important;
        flex-shrink: 0;
    }

    .container-dados .table-responsive {
        overflow: visible;
    }

    .tabela-dados thead {
        display: none;
    }

    .tabela-dados,
    .tabela-dados tbody {
        display: block;
        width: 100% !important;
    }

    .tabela-dados tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
        padding: 14px 0;
        border-bottom: 1px solid #ececf4;
    }

    .tabela-dados tr:last-child {
        border-bottom: 0;
    }

    .tabela-dados td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        min-width: 0;
        white-space: normal !important;
        overflow-wrap: anywhere;
        font-size: 14px;
    }

    .tabela-dados td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #9446E0;
        margin-bottom: 2px;
    }

    .tabela-dados td[data-label="Infração"],
    .tabela-dados td[data-label="Local"],
    .tabela-dados td[data-label="Tipo"],
    .tabela-dados td[data-label="Marca/Modelo"] {
        grid-column: 1 / -1;
    }

    .tabela-dados tr:hover {
        background: transparent;
    }
}

/* =========================================================================
   Popups do sistema (popup-confirm.html: confirmar, informar, digitar,
   excluir com motivo). Margem lateral de 48px e botões pequenos demais
   para o dedo.
   ========================================================================= */
@media screen and (max-width: 575.98px) {

    #popup-container .px-5,
    #input-popup-container .px-5,
    #exclusao-motivo-popup-container .px-5 {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #popup-container .modal-title,
    #input-popup-container .modal-title,
    #exclusao-motivo-popup-container .modal-title {
        font-size: 1.25rem;
    }

    #popup-container .btn,
    #input-popup-container .btn,
    #exclusao-motivo-popup-container .btn {
        padding: 10px 18px;
        font-size: 15px;
        min-width: 120px;
    }

    #input-popup-field {
        font-size: 16px;  /* menos de 16px faz o iPhone dar zoom ao focar */
    }
}

/* =========================================================================
   Popups próprios (.modal-overlay: adicionar cliente, nova senha...).
   Alinhados ao topo e roláveis: centralizados, um popup mais alto que a
   tela perdia o começo e o botão do fim.
   ========================================================================= */
@media screen and (max-width: 575.98px) {

    .modal-overlay {
        overflow-y: auto;
        align-items: flex-start !important;
        padding: 12px;
        width: 100% !important;
        height: 100% !important;
    }

    .modal-overlay > * {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .add-client-modal {
        min-width: 0 !important;
        width: 100%;
        max-width: 100% !important;
        padding: 30px 20px 24px !important;
        gap: 16px !important;
    }

    .add-client-modal .session-title {
        margin-bottom: 8px !important;
        padding-right: 36px;
    }

    .modal-close-btn {
        top: 8px !important;
        right: 10px !important;
        width: 44px;
        height: 44px;
    }

    /* Sem senha / Detran / Gov / Ambas: em linha não cabiam (Ambas sumia) */
    .add-client-modal .radio-group {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 12px;
        width: 100%;
        padding-top: 6px;
    }

    .add-client-modal .input-label {
        margin-top: 12px !important;
    }
}

@media screen and (max-width: 575.98px) {

    /* "Bem-vindo! Consulte o movimento..." não cabe ao lado dos ícones */
    #area-to-use {
        display: none !important;
    }

    /* o tema escondia o sino no celular: as notificações sumiam */
    .main-header-container .notifications-dropdown {
        display: flex !important;
    }

    /* ---------- início (index) ---------- */

    /* rosca em cima e legenda embaixo, em duas colunas: lado a lado, a
       rosca ficava cortada */
    #card-clientes-status-consulta {
        height: auto !important;
    }

    .status-consulta-corpo {
        flex-direction: column;
    }

    #sessions-footer {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0 !important;
        padding: 0 16px 16px;
    }

    #sessions-footer > .col {
        padding: 0;
    }
}