/*
 * Módulo FuelPump — interatividade dos botões e layout de celular.
 *
 * 🚨 Tudo aqui é escopado por `.fp-modulo` (na <section class="content"> de cada tela do
 * módulo) ou por `.fp-lista` / `.fp-grade` (nas tabelas dele). O arquivo é carregado no
 * layout global, então uma regra solta afetaria o sistema inteiro — nunca escrever seletor
 * sem um desses prefixos.
 *
 * O cartão no celular segue a técnica que já deu certo em `lista-cartao.css`: a PRÓPRIA
 * <table> muda de display, com as mesmas <tr>/<td>, os mesmos ids e os mesmos botões.
 * Nada de DOM paralelo — foi o que evitou duplicar ids e quebrar handlers ligados por
 * seletor. O rótulo de cada campo vem do atributo `data-rotulo` do próprio <td>, escrito
 * na view; se ele faltar, a linha continua legível, só sem o nome do campo.
 */

/* ============================================================ botões */

/* Transição e resposta ao toque/mouse. O daisyUI já muda a cor no hover; o que faltava era
   o retorno físico — sem isso o botão parecia estático, principalmente no celular. */
.fp-modulo .tw-dw-btn {
    transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease,
                border-color .15s ease, color .15s ease;
}

.fp-modulo .tw-dw-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

/* Afunda ao clicar: no toque é o único retorno que existe, já que não há hover. */
.fp-modulo .tw-dw-btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* Foco por teclado visível — o :focus do tema some no contorno claro. */
.fp-modulo .tw-dw-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.fp-modulo .tw-dw-btn[disabled],
.fp-modulo .tw-dw-btn.tw-dw-btn-disabled {
    transform: none;
    box-shadow: none;
}

/*
 * Os botões com papel semântico (salvar, editar, excluir…) recebem o MESMO acabamento dos
 * atalhos do painel: preenchimento em degradê e o mesmo peso.
 *
 * Está aqui, sobre a classe do tema, e não espalhado em 41 botões nas views, por dois
 * motivos: a marcação continua dizendo o PAPEL de cada botão (`primary` para a ação
 * principal, `error` para excluir), que é o que ela deve dizer; e um botão novo criado
 * amanhã já nasce no padrão, sem ninguém lembrar de aplicar classe nenhuma.
 *
 * Os tons são os mesmos da paleta dos atalhos — profundos o bastante para o texto branco
 * passar dos 4.5 de contraste. O `warning` é a exceção: amarelo só parece amarelo em tom
 * vivo, então ali o texto é escuro.
 */
.fp-modulo .tw-dw-btn-primary,
.fp-modulo .tw-dw-btn-info,
.fp-modulo .tw-dw-btn-success,
.fp-modulo .tw-dw-btn-error,
.fp-modulo .tw-dw-btn-accent,
.fp-modulo .tw-dw-btn-secondary {
    border: 0;
    color: #fff;
    font-weight: 600;
}

.fp-modulo .tw-dw-btn-primary { background: linear-gradient(135deg, #4338ca, #4f46e5); }
.fp-modulo .tw-dw-btn-primary:hover { background: linear-gradient(135deg, #4f46e5, #4338ca); color: #fff; }

.fp-modulo .tw-dw-btn-info { background: linear-gradient(135deg, #075985, #0369a1); }
.fp-modulo .tw-dw-btn-info:hover { background: linear-gradient(135deg, #0369a1, #075985); color: #fff; }

.fp-modulo .tw-dw-btn-success { background: linear-gradient(135deg, #166534, #15803d); }
.fp-modulo .tw-dw-btn-success:hover { background: linear-gradient(135deg, #15803d, #166534); color: #fff; }

.fp-modulo .tw-dw-btn-error { background: linear-gradient(135deg, #991b1b, #b91c1c); }
.fp-modulo .tw-dw-btn-error:hover { background: linear-gradient(135deg, #b91c1c, #991b1b); color: #fff; }

.fp-modulo .tw-dw-btn-accent { background: linear-gradient(135deg, #155e75, #0e7490); }
.fp-modulo .tw-dw-btn-accent:hover { background: linear-gradient(135deg, #0e7490, #155e75); color: #fff; }

.fp-modulo .tw-dw-btn-secondary { background: linear-gradient(135deg, #86198f, #a21caf); }
.fp-modulo .tw-dw-btn-secondary:hover { background: linear-gradient(135deg, #a21caf, #86198f); color: #fff; }

/* Amarelo: vivo, com texto escuro — escurecê-lo até sustentar branco viraria ocre. */
.fp-modulo .tw-dw-btn-warning,
.fp-modulo .tw-dw-btn-warning:hover {
    border: 0;
    color: #1c1917;
    font-weight: 600;
}

.fp-modulo .tw-dw-btn-warning { background: linear-gradient(135deg, #eab308, #facc15); }
.fp-modulo .tw-dw-btn-warning:hover { background: linear-gradient(135deg, #facc15, #eab308); }

/*
 * Botão de contorno (Voltar, Limpar, Fechar) com presença.
 *
 * O `outline` do tema desenha borda e texto num cinza muito claro — na tela some, e foi o
 * que fez o "Voltar" parecer desabilitado. Aqui ele ganha borda e texto escuros, e preenche
 * ao passar o mouse: continua secundário sem virar um fantasma.
 *
 * O `neutral` entra junto: no tema ele é quase preto e é o "Fechar" do modal de cliente,
 * que vem da view do núcleo (`contact/create`, a mesma do PDV). Aqui dentro ele veste o
 * mesmo secundário dos outros; fora do módulo segue como está.
 */
.fp-modulo .tw-dw-btn-outline,
.fp-modulo .tw-dw-btn-neutral {
    border: 1px solid #94a3b8;
    color: #334155;
    background: #fff;
    font-weight: 600;
}

.fp-modulo .tw-dw-btn-outline:hover,
.fp-modulo .tw-dw-btn-outline:focus,
.fp-modulo .tw-dw-btn-neutral:hover,
.fp-modulo .tw-dw-btn-neutral:focus {
    border-color: #475569;
    background: #475569;
    color: #fff;
}

/*
 * Rótulo vazio que reserva a linha do label, para um botão alinhar com os campos ao lado.
 *
 * `label` é `inline-block` no Bootstrap e o `tw-dw-btn` é `inline-flex`: os dois são de
 * nível inline e ficam LADO A LADO. O `&nbsp;` não empurrava nada, e o botão subia uma
 * linha inteira — 23,8px acima do campo vizinho, medido. Com `display: block` ele volta a
 * ocupar a linha de cima, como faz com um `.form-control`, que é bloco.
 *
 * No celular some: as colunas empilham e a linha reservada viraria buraco.
 */
.fp-modulo .fp-rotulo-vazio {
    display: block;
    margin-bottom: 5px;
}

/*
 * Botão do tema DENTRO de um grupo de campo acompanha a altura do campo.
 *
 * O `tw-dw-btn` tem altura própria (46px) e o `.form-control` do Bootstrap tem 34px: num
 * `input-group` isso estufava a linha inteira, e o campo ficava boiando dentro de uma
 * moldura alta demais. Aqui ele encaixa, e o canto esquerdo fica reto para o conjunto ler
 * como uma peça só.
 */
.fp-modulo .input-group-btn > .tw-dw-btn {
    height: 34px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 0 4px 4px 0;
}

/*
 * O "+" ao lado do campo de cliente é um botão de grupo de campo, não uma ação da tela:
 * seguir o cinza do núcleo aqui é o certo — colorido, competiria com o campo. Só faltava
 * dar sinal de que responde ao mouse.
 */
.fp-modulo .input-group-btn > .btn-default {
    transition: background-color .15s ease, border-color .15s ease;
}

.fp-modulo .input-group-btn > .btn-default:hover,
.fp-modulo .input-group-btn > .btn-default:focus {
    background-color: #e2e8f0;
    border-color: #94a3b8;
}

/* Coluna de ações: os botões vêm soltos no <td>, alguns dentro de <form> (excluir,
   inativar). Sem isto ficavam colados e o <form> quebrava a linha. */
.fp-modulo .fp-lista td.fp-td-acoes {
    white-space: nowrap;
}

.fp-modulo .fp-lista td.fp-td-acoes form {
    display: inline-block;
    margin: 0;
}

.fp-modulo .fp-lista td.fp-td-acoes > *,
.fp-modulo .fp-lista td.fp-td-acoes form {
    margin-left: 3px;
}

/* ---------------------------------------------- atalhos do painel */

/*
 * Cada atalho com a sua cor, preenchida.
 *
 * Eram sete botões de contorno, que na tela viravam sete retângulos brancos iguais — dava
 * para ler, mas não dava para achar nada de relance. Aqui a cor é o que distingue: o olho
 * memoriza a posição pela cor antes de ler o rótulo.
 *
 * A paleta é do módulo, e não as cores semânticas do tema, de propósito: `warning` e
 * `error` num botão de navegação sugeririam alerta e erro onde não há nenhum.
 *
 * O degradê é sutil (dois tons da mesma cor). No hover ele inverte e o botão sobe — é o que
 * dá o movimento sem precisar de JS.
 */
.fp-modulo .fp-atalho {
    border: 0;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    /* Centragem explícita nos dois eixos: não depender do flex que a classe base traz,
       porque qualquer regra que mude o `display` do botão joga o conteúdo para o canto. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.fp-modulo .fp-atalho i {
    /* Ícone um pouco mais claro que o texto: dá hierarquia dentro do próprio botão. */
    opacity: .9;
}

.fp-modulo .fp-atalho:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .22);
}

.fp-modulo .fp-atalho:hover i {
    opacity: 1;
}

.fp-modulo .fp-atalho:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

/*
 * A cor de cada atalho segue o SENTIDO do destino, não a ordem na tela:
 *
 *   verde   criar        — Nova OS
 *   violeta equipamento  — Bombas/Bicos
 *   azul    cadastro     — Clientes/Postos
 *   laranja a oficina    — Empresa de Manutenção
 *   ocre    pessoas      — Técnicos
 *   ciano   assinatura   — Meu RG
 *   fúcsia  análise      — Relatórios
 *
 * Todos os tons são profundos de propósito: o texto é branco em 14px, que exige contraste
 * 4.5. Um amarelo ou verde vivos ficariam em 2,5 — ilegíveis sob sol, que é onde o técnico
 * usa o celular. O amarelo virou ocre pela mesma razão.
 */

/*
 * Texto claro OU escuro conforme o fundo, como o próprio daisyUI faz.
 *
 * Laranja e amarelo só são reconhecíveis como laranja e amarelo em tons VIVOS; escurecê-los
 * até sustentarem texto branco os transforma em marrom e ocre — foi o que aconteceu na
 * primeira tentativa. Nesses dois o texto vira escuro, e aí o tom vivo passa dos 4.5 com
 * folga.
 */
.fp-modulo .fp-atalho-claro,
.fp-modulo .fp-atalho-claro:hover {
    color: #1c1917;
}

.fp-modulo .fp-atalho-claro i {
    opacity: .75;
}

/* Nova OS é a ação principal da tela: verde de criar, com um anel discreto. */
.fp-modulo .fp-atalho-1 {
    background: linear-gradient(135deg, #166534, #15803d);
    box-shadow: 0 0 0 3px rgba(21, 128, 61, .25), 0 1px 2px rgba(0, 0, 0, .12);
}

.fp-modulo .fp-atalho-1:hover {
    background: linear-gradient(135deg, #15803d, #166534);
}

/* Bombas/Bicos — violeta */
.fp-modulo .fp-atalho-2 { background: linear-gradient(135deg, #5b21b6, #6d28d9); }
.fp-modulo .fp-atalho-2:hover { background: linear-gradient(135deg, #6d28d9, #5b21b6); }

/* Clientes/Postos — azul */
.fp-modulo .fp-atalho-3 { background: linear-gradient(135deg, #075985, #0369a1); }
.fp-modulo .fp-atalho-3:hover { background: linear-gradient(135deg, #0369a1, #075985); }

/* Empresa de Manutenção — laranja vivo, texto escuro */
.fp-modulo .fp-atalho-4 { background: linear-gradient(135deg, #f97316, #fb923c); }
.fp-modulo .fp-atalho-4:hover { background: linear-gradient(135deg, #fb923c, #f97316); }

/* Técnicos — amarelo, texto escuro */
.fp-modulo .fp-atalho-5 { background: linear-gradient(135deg, #eab308, #facc15); }
.fp-modulo .fp-atalho-5:hover { background: linear-gradient(135deg, #facc15, #eab308); }

/* Meu RG / Assinatura — ciano */
.fp-modulo .fp-atalho-6 { background: linear-gradient(135deg, #155e75, #0e7490); }
.fp-modulo .fp-atalho-6:hover { background: linear-gradient(135deg, #0e7490, #155e75); }

/* Relatórios — fúcsia */
.fp-modulo .fp-atalho-7 { background: linear-gradient(135deg, #86198f, #a21caf); }
.fp-modulo .fp-atalho-7:hover { background: linear-gradient(135deg, #a21caf, #86198f); }

/* Espaço entre eles: no desktop ficavam colados e a fila virava um bloco só. */
.fp-modulo .fp-atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ============================================================ nunca estourar */

/*
 * Conteúdo largo quebra em vez de vazar pela borda.
 *
 * 🚨 O seletor é longo de propósito. O Bootstrap traz
 *
 *     .table-responsive > .table > tbody > tr > td { white-space: nowrap }
 *
 * com especificidade (0,2,3) — mais alta que um `.fp-modulo .fp-lista td` (0,2,1). Com o
 * seletor curto, o `overflow-wrap` desta mesma regra pegava (o Bootstrap não o define) mas
 * o `white-space` não, e uma razão social longa saía cortada na borda do cartão em vez de
 * passar para a linha de baixo. Foi exatamente o sintoma relatado.
 *
 * Incluir `.table` no seletor leva a (0,3,3) e resolve sem precisar de `!important`.
 */
.fp-modulo .fp-lista.table > tbody > tr > td,
.fp-modulo .fp-lista.table > thead > tr > th,
.fp-modulo .fp-grade.table > tbody > tr > td {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* A rolagem horizontal é do invólucro, nunca do <body>. */
.fp-modulo .table-responsive {
    -webkit-overflow-scrolling: touch;
}

.fp-modulo img {
    max-width: 100%;
    height: auto;
}

/*
 * Rótulo que existe só no celular.
 *
 * Na grade de bicos o `<thead>` nomeia as colunas — no desktop repetir o texto em cada
 * uma das linhas seria ruído. Abaixo de 767px a linha vira um cartão empilhado e o
 * cabeçalho é ocultado; sem isto sobravam o ícone e o placeholder, e o campo já
 * preenchido não mostrava nem o placeholder.
 */
.fp-modulo .fp-rotulo-celular {
    display: none;
}

/*
 * Campo só de leitura (o cinza que vem do cadastro da empresa) cresce com o texto.
 *
 * A view empilha `form-control-static` e `form-control` na mesma tag para o campo ficar
 * com a mesma moldura dos editáveis ao lado. O efeito colateral é que o `height: 34px`
 * fixo do `form-control` vence o `min-height` do `form-control-static`: numa razão social
 * de duas linhas o conteúdo media 47px e os 13px de sobra caíam POR BAIXO da borda.
 *
 * `height: auto` com `min-height` preservado resolve os dois lados: o campo de uma linha
 * continua com 34px, alinhado com os vizinhos, e o de duas cresce em vez de vazar.
 */
.fp-modulo .form-control-static.form-control {
    box-sizing: border-box;
    height: auto;
    min-height: 34px;
    /* 6px, não os 7px do `form-control-static`: com 7 a caixa fica com 36px de altura
       (20 de linha + 14 de recuo + 2 de borda) e destoa dos 34px dos campos
       editáveis ao lado, que usam 6. O `min-height` não resolvia — a altura natural
       já passava dele. */
    padding-top: 6px;
    padding-bottom: 6px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ============================================================ celular */

@media (max-width: 767px) {
    /* -------- listagens viram cartão -------- */

    /* O <thead> sai do fluxo em vez de `display:none`: leitor de tela continua achando o
       cabeçalho, e é de lá que os rótulos vêm conceitualmente. */
    .fp-modulo .fp-lista thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .fp-modulo .fp-lista,
    .fp-modulo .fp-lista tbody,
    .fp-modulo .fp-lista tr,
    .fp-modulo .fp-lista td {
        display: block;
        width: 100%;
    }

    .fp-modulo .fp-lista {
        border: 0;
    }

    .fp-modulo .fp-lista tbody tr {
        border: 1px solid #ddd;
        border-radius: 6px;
        margin-bottom: 10px;
        padding: 6px 8px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
    }

    /* Zebra do Bootstrap não faz sentido em cartão: some, senão um cartão sim outro não. */
    .fp-modulo .fp-lista.table-striped tbody tr:nth-of-type(odd) {
        background: #fff;
    }

    /*
     * Rótulo à esquerda por POSICIONAMENTO, não por flex.
     *
     * 🚨 Com `display: flex` no <td>, todo filho inline vira item flex e é blocado — a
     * lista de bicos, que são vários <span class="label">, virava uma fila de itens numa
     * única linha, sem quebrar, vazando para fora do cartão. O `flex-wrap: wrap` resolveria
     * só pela metade: cada etiqueta cairia numa linha própria, alinhada à margem em vez de
     * sob o valor.
     *
     * Reservando o espaço do rótulo com `padding-left` e colocando o `::before` em absoluto,
     * o conteúdo do <td> continua sendo fluxo normal: texto quebra, etiquetas quebram, e
     * qualquer célula futura com conteúdo inline se comporta como esperado.
     */
    .fp-modulo .fp-lista tbody td {
        position: relative;
        display: block;
        border: 0;
        border-bottom: 1px dotted #e5e5e5;
        padding: 5px 0;
    }

    .fp-modulo .fp-lista tbody td[data-rotulo] {
        padding-left: 42%;
    }

    .fp-modulo .fp-lista tbody td:last-child {
        border-bottom: 0;
    }

    /* O rótulo do campo, tirado do próprio <td>. Sem `data-rotulo` o ::before não aparece
       e a linha vira só o valor — degrada, não quebra. */
    .fp-modulo .fp-lista tbody td[data-rotulo]::before {
        content: attr(data-rotulo);
        position: absolute;
        left: 0;
        top: 5px;
        width: 39%;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.4;
        text-transform: uppercase;
        letter-spacing: .3px;
        color: #777;
        overflow-wrap: anywhere;
    }

    /* Etiqueta (bico, situação) quebra a linha junto com o resto em vez de esticar a
       célula: o `.label` do tema é `white-space: nowrap`. */
    .fp-modulo .fp-lista tbody td .label {
        display: inline-block;
        margin: 1px 2px 1px 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Célula vazia sumiria e deixaria buraco no cartão: mostra um travessão. */
    .fp-modulo .fp-lista tbody td[data-rotulo]:empty::after {
        content: '—';
        color: #aaa;
    }

    /* A coluna de ações ocupa a largura toda, com os botões alinhados à esquerda. Aqui o
       flex é intencional: os filhos SÃO botões, não texto corrido. */
    .fp-modulo .fp-lista tbody td.fp-td-acoes {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 10px 0 0;
        white-space: normal;
    }

    .fp-modulo .fp-lista tbody td.fp-td-acoes::before {
        display: none;
    }

    .fp-modulo .fp-lista tbody td.fp-td-acoes > *,
    .fp-modulo .fp-lista tbody td.fp-td-acoes form {
        margin-left: 0;
    }

    /* Alvo de toque: os botões da listagem são `xs` (23px de altura), pequenos demais para
       o dedo. No celular crescem — a densidade que faz sentido no desktop atrapalha aqui. */
    .fp-modulo .fp-lista tbody td.fp-td-acoes .tw-dw-btn {
        min-height: 38px;
        height: auto;
        padding: 0 16px;
        font-size: 13px;
    }

    /* Linha de "nenhum registro": ocupa o cartão inteiro, sem rótulo. */
    .fp-modulo .fp-lista tbody td[colspan]::before {
        display: none;
    }

    /* -------- grades de digitação (bicos da bomba, itens da OS) -------- */

    /* Aqui cada <tr> é um formulário inteiro. Em vez de rolar 11 colunas na horizontal, a
       linha vira um bloco e os campos empilham — cada um já tem rótulo próprio na view. */
    .fp-modulo .fp-grade thead {
        display: none;
    }

    .fp-modulo .fp-grade,
    .fp-modulo .fp-grade tbody,
    .fp-modulo .fp-grade tr,
    .fp-modulo .fp-grade td {
        display: block;
        width: 100%;
    }

    .fp-modulo .fp-grade tbody tr {
        border: 1px solid #ccc;
        border-radius: 6px;
        margin-bottom: 10px;
        padding: 8px;
        background: #fbfbfb;
    }

    /* A segunda <tr> (descrição do serviço / continuação) cola na anterior. */
    .fp-modulo .fp-grade tbody tr.fuelpump-item-desc-row {
        margin-top: -10px;
        border-top: 0;
        border-radius: 0 0 6px 6px;
    }

    .fp-modulo .fp-grade tbody td {
        border: 0;
        padding: 4px 0;
        min-width: 0 !important;
    }

    /* Sem largura fixa: no celular tudo ocupa a linha inteira. */
    .fp-modulo .fp-grade tbody td .input-group,
    .fp-modulo .fp-grade tbody td select,
    .fp-modulo .fp-grade tbody td input,
    .fp-modulo .fp-grade tbody td textarea {
        min-width: 0 !important;
        max-width: 100%;
    }

    .fp-modulo .fp-rotulo-vazio {
        display: none;
    }

    .fp-modulo .fp-rotulo-celular {
        display: block;
        margin-bottom: 3px;
        font-size: 12px;
        font-weight: 700;
        color: #334155;
        text-align: left;
    }

    /* Dentro do botão de remover ele é um item do flex, ao lado do ícone — não uma linha
       própria. O `gap` do botão já separa os dois. */
    .fp-modulo .tw-dw-btn > .fp-rotulo-celular {
        margin-bottom: 0;
        font-size: inherit;
    }

    /* "Ativo" e a caixa de marcar acompanham o alinhamento dos demais campos do cartão;
       centrados, ficariam soltos no meio do bloco. O escopo é a tabela de bicos: a grade
       de itens da OS divide a classe `fp-grade` e lá o centro é proposital. */
    .fp-modulo #fuelpump-nozzles-table tbody td.text-center {
        text-align: left;
    }

    /* Botão de remover a linha ganha largura e nome, em vez de um ícone perdido. */
    .fp-modulo .fp-grade tbody td.text-center:last-child .tw-dw-btn {
        width: 100%;
    }

    /*
     * Linha de lacre: SEGUE em três colunas no celular, encolhendo.
     *
     * A versão anterior empilhava os campos, e aí o cabeçalho de três colunas logo acima
     * (Local / Nº Anterior / Nº Posterior) não alinhava com nada — pior, o vão de 30px que
     * reserva o lugar do botão de remover empurrava a linha 32px para fora do cartão.
     * Empilhar também custaria três linhas por lacre numa tela onde o espaço é o recurso
     * escasso. Os números de lacre são curtos e cabem lado a lado.
     */
    .fp-modulo .fuelpump-lacre-linha {
        flex-wrap: nowrap;
        gap: 3px;
    }

    .fp-modulo .fuelpump-lacre-linha select {
        flex: 0 0 74px !important;
        width: 74px !important;
        padding-left: 4px;
        padding-right: 4px;
    }

    .fp-modulo .fuelpump-lacre-linha input {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    /* Cabeçalho da mini-tabela acompanha as mesmas medidas, senão os rótulos deixam de
       ficar sobre os campos que nomeiam. */
    .fp-modulo .fp-grade label {
        white-space: normal;
        gap: 3px;
    }

    .fp-modulo .fp-grade label > span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .fp-modulo .fp-grade label > span:first-child {
        flex: 0 0 74px !important;
        width: 74px !important;
    }

    .fp-modulo .fp-grade label > span:last-child {
        flex: 0 0 26px !important;
        width: 26px !important;
    }

    /* -------- resto do módulo -------- */

    /* Barra de ações no topo da caixa: empilha em vez de espremer. */
    .fp-modulo .box-tools .tw-dw-btn {
        width: 100%;
        margin-bottom: 6px;
    }

    /* Botão de largura total, com ícone e texto CENTRADOS.
       `display: block` (que estava aqui) tira do botão o flex do daisyUI, e o conteúdo cai
       no canto superior esquerdo da caixa de 46px em vez de ficar no meio. Por isso flex
       explícito nos dois eixos, em vez de confiar no que a classe base traz. */
    .fp-modulo .fp-rodape-acoes .tw-dw-btn,
    .fp-modulo .fp-atalhos .tw-dw-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-align: center;
    }

    .fp-modulo .fp-rodape-acoes .tw-dw-btn {
        margin-bottom: 8px;
    }

    /* Cartões de número do painel: 2 por linha em vez de 4 espremidos. */
    .fp-modulo .fp-indicadores > [class*='col-'] {
        width: 50%;
        float: left;
    }
}

/* Telas bem estreitas: o rótulo do cartão vai para cima do valor. */
@media (max-width: 419px) {
    /* Tela estreita: o rótulo sai da coluna lateral e vai para cima do valor — 39% de uma
       tela de 320px não sobra espaço para nenhum dos dois. */
    .fp-modulo .fp-lista tbody td[data-rotulo] {
        padding-left: 0;
    }

    .fp-modulo .fp-lista tbody td[data-rotulo]::before {
        position: static;
        display: block;
        width: 100%;
        margin-bottom: 1px;
    }

    .fp-modulo .fp-indicadores > [class*='col-'] {
        width: 100%;
        float: none;
    }
}