/*
    responsivo.css - ajustes para telas pequenas (celular/tablet).

    Carregado DEPOIS do <style> de cada página (Pesquisa.aspx, Catalogo.aspx).
    Quase todas as regras ficam dentro de @media, então em telas grandes o
    visual do computador continua o mesmo. Exceção: o alinhamento do campo
    de busca com os botões BUSCAR/LIMPAR (abaixo), que vale para todos os
    tamanhos.

    Vários elementos têm largura/posição definidas inline (atributo style,
    Width="..." dos controles ASP.NET ou via JavaScript). Por isso algumas
    regras usam !important - é a única forma de sobrepor um style inline.
*/

/* =====================================================================
   PESQUISA - campo de busca + botões BUSCAR / LIMPAR (todos os tamanhos)
   ===================================================================== */

/* O campo tinha 200px fixos dentro de uma célula de 17% da largura
   (a tabela usa table-layout:fixed). Em telas menores que ~1200px a
   célula fica mais estreita que o campo e os botões sobem por cima dele.
   Com max-width o campo continua com 200px no computador e encolhe
   junto com a célula quando falta espaço. */
#TextBox1 {
    width: calc(100% - 8px) !important;
    max-width: 200px;
    box-sizing: border-box;
}

/* campo (32px) e botões (29px) com a mesma altura e alinhados pelo meio */
#TextBox1,
#Button1,
#Button11 {
    height: 32px !important;
    vertical-align: middle;
}

/* =====================================================================
   CONFIRMAÇÃO DO PEDIDO (todos os tamanhos) - correção de defeito
   ===================================================================== */

/* As caixas "Confirma o Pedido ?" usavam top:20%/40% da altura da tela,
   enquanto o carrinho e a barra do frete ficam em pixels fixos (o frete em
   top:571px). Em telas altas a caixa caía em cima do pé do carrinho e a
   barra do frete (z-index 1010) cobria os botões. Agora a caixa fica
   centralizada na tela e acima do frete e das Regras de Faturamento. */
.meuConfirma,
.meuConfirmaPrazo {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1012 !important;
}

/* =====================================================================
   PESQUISA - telas intermediárias (tablet / janela estreita no computador)
   ===================================================================== */
@media (min-width: 769px) and (max-width: 1199px) {

    /* nomes do menu menores e sem os recuos negativos, para não encostarem */
    #myForm > .row > .cell {
        padding-left: 2px;
        padding-right: 2px;
        text-align: center;
    }

    #myForm > .row > .cell h5 span {
        font-size: 14px !important;
        margin-left: 0 !important;
    }

    /* filtros quebram para a linha de baixo em vez de sair da tela */
    #myForm > div[data-role="scrollbox"] {
        flex-wrap: wrap;
        column-gap: 8px;
    }

    /* lista de resultados e ficha da peça ficam em top:245px fixo (altura
       do cabeçalho no computador); aqui o cabeçalho é mais alto e elas
       cobririam a barra de busca, então voltam ao fluxo da página */
    .filtro,
    #minhaDiv.escondida {
        position: static;
        height: auto;
    }
}

/* =====================================================================
   PAINÉIS LARGOS - telas intermediárias
   Pedidos de Compra (1245px), resumo para impressão (1205px), retirada
   (1005px) e carrinho/frete/avisos (905-925px) têm largura fixa. Numa tela
   menor que eles, ficam limitados à largura da tela e as tabelas de dentro
   rolam na horizontal. Em telas maiores que o painel, nada muda.
   ===================================================================== */
@media (min-width: 769px) and (max-width: 1279px) {

    .carrinho,
    .frete,
    .pedidos,
    .resumoPedido,
    .resumoPedidoGer,
    #aviso,
    #mensagem {
        /* 100% (e não 100vw) para descontar a barra de rolagem */
        max-width: calc(100% - 8px);
        box-sizing: border-box;
    }

    .carrinho,
    .pedidos,
    .resumoPedido,
    .resumoPedidoGer {
        overflow-x: auto !important;
    }

    .resumoPedidoGer {
        margin-left: 0;
    }

    /* Regras de Faturamento (310px à esquerda) + carrinho (905px no centro)
       não cabem lado a lado: as regras ficam no topo, o carrinho logo abaixo
       ocupando a altura disponível e a barra do frete presa no pé da tela. */
    .carrinho {
        top: 4px !important;
        bottom: 52px;
        height: auto !important;
    }

    body:has(.regras[style*="block"]) .carrinho {
        top: 164px !important;
    }

    .frete {
        top: auto !important;
        bottom: 4px;
    }

    .regras {
        top: 4px !important;
        left: 50% !important;
        transform: translateX(-50%);
        width: 905px !important;
        max-width: calc(100% - 8px);
        height: 156px !important;
        overflow-y: auto !important;
        box-sizing: border-box;
    }

    .regras p {
        line-height: 1.35 !important;
        margin: 0;
        padding: 4px 6px;
    }

    /* avisos no topo da tela (o JavaScript os coloca em top 612/642px,
       que agora cairia em cima do carrinho) */
    #aviso,
    #mensagem {
        top: 8px !important;
    }
}

/* =====================================================================
   PESQUISA - tela principal (cabeçalho, busca, filtros, resultados)
   ===================================================================== */
@media (max-width: 768px) {

    /* ---------- Cabeçalho: logo + menu de ícones ---------- */
    #myForm > .row {
        margin-left: 0;
        margin-right: 0;
        padding-top: 8px;
        justify-content: center;
    }

    /* a página usa .cell { top: 20px } (position:relative) para descer os
       ícones; com várias linhas isso empurra a última para fora da faixa */
    #myForm > .row > .cell,
    #myForm > .row > .cell1 {
        top: 0;
    }

    #myForm > .row > .cell1 {
        flex: 0 0 100%;
        max-width: 100%;
        width: auto;
        text-align: center;
    }

    #myForm > .row > .cell1 h2 {
        margin: 0;
    }

    #myForm > .row > .cell1 img {
        width: 64px !important;
        height: 64px !important;
    }

    /* itens do menu: 4 por linha */
    #myForm > .row > .cell {
        flex: 0 0 25%;
        max-width: 25%;
        padding: 0 2px;
        text-align: center;
    }

    #myForm > .row > .cell > p {
        display: none; /* espaçador de 2px usado no desktop */
    }

    #myForm > .row > .cell h5 {
        margin-top: 2px !important;
        margin-bottom: 6px;
    }

    #myForm > .row > .cell h5 span {
        font-size: 13px !important;
        margin-left: 0 !important;
    }

    #myForm > .row > .cell img {
        width: 36px;
        height: 36px;
    }

    /* "Usuário: ..." ocupa a linha inteira no fim do cabeçalho */
    #myForm > .row > .cell:last-child {
        flex: 0 0 100%;
        max-width: 100%;
        margin: 0 !important; /* inline tem margin:auto, que joga a célula para fora da linha */
        padding: 2px 0 6px 0 !important;
    }

    #myForm > .row > .cell:last-child h6 {
        margin: 0;
    }

    /* ---------- Barra de busca + ícones (carrinho, pedidos...) ---------- */
    #myForm .row {
        margin-left: 0;
        margin-right: 0;
    }

    #myForm .input-group,
    #myForm .col-\.5 {
        width: 100%;
    }

    /* A barra é uma tabela de 2 linhas (campos em cima, legendas embaixo).
       No celular as células viram itens de um flex, reordenados:
       título > campo > botões > ícones > legendas dos ícones. */
    #myForm .col-\.5 > table {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        width: 100%;
        padding: 4px;
        box-sizing: border-box;
    }

    #myForm .col-\.5 > table > tbody,
    #myForm .col-\.5 > table > tbody > tr {
        display: contents;
    }

    #myForm .col-\.5 > table td {
        display: block;
        box-sizing: border-box;
        width: auto !important;
        text-align: center !important;
    }

    /* células vazias (ex.: botão "Novo" quando escondido) não ocupam espaço */
    #myForm .col-\.5 > table td:not(:has(*)) {
        display: none;
    }

    /* título "PESQUISA POR CÓDIGO" */
    #myForm .col-\.5 > table tr:nth-child(2) > td:nth-child(1) {
        order: 1;
        flex: 0 0 100%;
        text-align: left !important;
    }

    #myForm .col-\.5 > table tr:nth-child(2) > td:nth-child(1) label {
        margin: 0 !important;
        font-size: 16px !important;
    }

    /* campo de código */
    #myForm .col-\.5 > table tr:nth-child(1) > td:nth-child(1) {
        order: 2;
        flex: 0 0 100%;
    }

    #TextBox1 {
        width: 100% !important;
        max-width: none;
        margin-left: 0 !important;
        box-sizing: border-box;
    }

    /* botões BUSCAR / LIMPAR lado a lado */
    #myForm .col-\.5 > table tr:nth-child(1) > td:nth-child(2) {
        order: 3;
        flex: 0 0 100%;
        display: flex;
        gap: 6px;
        margin: 6px 0 8px 0;
    }

    #Button1, #Button11 {
        flex: 1 1 0;
        width: auto !important;
        height: 36px !important;
    }

    /* ícones: dividem a linha igualmente */
    #myForm .col-\.5 > table tr:nth-child(1) > td:nth-child(n+3) {
        order: 4;
        flex: 1 1 0;
    }

    /* quebra de linha entre os ícones e as legendas */
    #myForm .col-\.5 > table::after {
        content: "";
        order: 5;
        flex: 0 0 100%;
        height: 0;
    }

    /* legendas dos ícones */
    #myForm .col-\.5 > table tr:nth-child(2) > td:nth-child(n+3) {
        order: 6;
        flex: 1 1 0;
        line-height: 1.1;
    }

    #myForm .col-\.5 > table tr:nth-child(2) > td:nth-child(n+3) span {
        font-size: 11px !important;
    }

    /* ---------- Filtros (Linha / Departamento / Subtipo / Montadora) ---------- */
    #myForm > div[data-role="scrollbox"] {
        flex-wrap: wrap;
        padding: 0 4px 8px 4px;
        box-sizing: border-box;
    }

    #myForm > div[data-role="scrollbox"] > div {
        flex: 1 1 45%;
        min-width: 0;
        margin-top: 8px !important;
        padding: 0 2px;
        box-sizing: border-box;
    }

    #myForm > div[data-role="scrollbox"] .heading {
        width: auto !important;
        font-size: 14px !important;
    }

    #myForm > div[data-role="scrollbox"] .p-1 {
        padding: 0 !important;
    }

    #myForm > div[data-role="scrollbox"] select {
        width: 100% !important;
        max-width: 100%;
        height: 32px;
    }

    /* ---------- Lista de resultados ---------- */
    /* No desktop a lista fica em position:absolute com top fixo de 245px
       (altura do cabeçalho). No celular o cabeçalho é mais alto, então a
       lista volta ao fluxo normal da página, logo abaixo dos filtros. */
    .filtro {
        position: static;
        height: auto;
        padding: 0 4px 8px 4px;
    }

    #DtlImagens {
        width: 100% !important;
    }

    /* cada resultado: código + fornecedor na 1ª linha, aplicação embaixo */
    #DtlImagens table,
    #DtlImagens table tbody {
        display: block;
        width: 100%;
    }

    #DtlImagens table tr {
        display: flex;
        flex-wrap: wrap;
    }

    #DtlImagens table td {
        display: block;
        box-sizing: border-box;
        white-space: normal;
    }

    #DtlImagens table td:nth-child(1),
    #DtlImagens table td:nth-child(2) {
        flex: 1 1 50%;
    }

    #DtlImagens table td:nth-child(3) {
        flex: 0 0 100%;
    }

    #DtlImagens table td input[type="submit"],
    #DtlImagens table td span {
        width: 100% !important;
        white-space: normal;
        overflow-wrap: anywhere; /* aplicações com texto longo sem espaços */
        box-sizing: border-box;
    }

    #DtlImagens table td {
        min-width: 0;
    }

    #DtlImagens table td input[type="submit"] {
        font-size: 16px !important;
    }
}

/* =====================================================================
   DETALHES DA PEÇA
   - janela .meuDiv (preço, estoque, imagem, conversões + ações)
     usada na Pesquisa e no Catálogo
   - ficha #minhaDiv (código, fornecedor, montadora...) da Pesquisa
   ===================================================================== */
@media (max-width: 768px) {

    /* ---------- Janela .meuDiv ---------- */
    /* No desktop: coluna de 407px com o botão "Voltar" pendurado à esquerda
       (left:-160px) e as ações à direita (left:410px). No celular tudo fica
       empilhado dentro da tela: Voltar > dados > ações. */
    .meuDiv {
        width: calc(100% - 8px);
        height: auto;
        max-height: calc(100vh - 8px);
        max-height: calc(100dvh - 8px);
        top: 4px;
        left: 50%;
        overflow-y: auto;
        box-sizing: border-box;
    }

    .meuDiv .coluna-esquerda {
        position: static;
        width: auto;
        height: auto;
        padding: 6px;
        text-align: left;
    }

    .meuDiv .coluna-esquerda button {
        position: static;
        border-radius: 20px;
        padding: 8px 18px;
    }

    .meuDiv .coluna-direita {
        float: none;
        width: 100%;
    }

    .meuDiv .coluna-direita > table {
        width: 100% !important;
        table-layout: fixed;
    }

    .meuDiv .coluna-direita > table td {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .meuDiv [id$="imgPeca"] {
        max-width: 100%;
    }

    /* ações: os 4 ícones lado a lado, legenda embaixo de cada um */
    .meuDiv .coluna-direitao {
        position: static;
        width: auto;
        height: auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto auto;
        grid-auto-flow: column;
        align-items: start;
        justify-items: center;
        row-gap: 2px;
        padding: 8px 2px;
        border: none;
        border-top: 2px solid black;
    }

    .meuDiv .coluna-direitao br {
        display: none;
    }

    .meuDiv .coluna-direitao span {
        font-size: 11px !important;
        text-align: center;
        line-height: 1.1;
    }

    /* ---------- Ficha #minhaDiv (Pesquisa) ---------- */
    /* No desktop é uma tabela de 9 colunas em position:absolute (top 245px).
       No celular vira uma ficha vertical no fluxo da página, entre os
       filtros e a lista: nome do campo à esquerda, valor à direita.
       Os títulos (th) e os valores (td) estão em linhas diferentes da
       tabela; o grid com fluxo em coluna coloca os 9 títulos na 1ª coluna
       e os 9 valores na 2ª, cada um ao lado do seu título. */
    #minhaDiv.escondida {
        position: static;
        width: auto;
        height: auto;
        padding: 4px;
        box-sizing: border-box;
    }

    #tabelas {
        display: grid !important;
        grid-template-columns: max-content 1fr;
        grid-template-rows: repeat(9, auto);
        grid-auto-flow: column;
        width: 100% !important;
        max-height: none;
        border: 1px solid black;
    }

    #tabelas thead,
    #tabelas tr {
        display: contents;
    }

    #tabelas th,
    #tabelas td {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        padding: 4px 6px;
        white-space: normal;
        overflow-wrap: anywhere;
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    }

    #tabelas td input[type="submit"] {
        white-space: normal;
        text-align: left;
    }
}

/* =====================================================================
   CARRINHO E FECHAMENTO DO PEDIDO (Pesquisa e Catálogo)
   - .carrinho (itens + prazo/entrega + botões), .frete, .regras
   - .meuConfirma / .meuConfirmaPrazo (confirmação)
   - .pedidos (Pedidos de Compra), .resumoPedido (retirada),
     .resumoPedidoGer (resumo para impressão)
   - avisos #aviso e #mensagem
   ===================================================================== */
@media (max-width: 768px) {

    /* ---------- Painéis em tela cheia ---------- */
    .carrinho,
    .pedidos,
    .resumoPedido,
    .resumoPedidoGer {
        width: calc(100% - 8px) !important;
        height: auto !important;
        top: 4px !important;
        bottom: 4px;
        left: 50% !important;
        margin-left: 0 !important;
        padding: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
    }

    /* o carrinho deixa espaço embaixo para a barra do frete */
    .carrinho {
        bottom: 52px;
    }

    /* com as Regras de Faturamento visíveis (cliente "Único"), o carrinho
       começa abaixo delas */
    body:has(.regras[style*="block"]) .carrinho {
        top: 164px !important;
    }

    /* tabelas com largura fixa inline dentro dos painéis */
    .carrinho > table,
    .pedidos > table,
    .resumoPedido > table,
    .resumoPedidoGer > table {
        width: 100% !important;
        table-layout: auto !important;
        max-height: none;
    }

    /* título do painel (1ª tabela: "Carrinho de Compras", "Pedidos de
       Compra"...) - as demais tabelas do painel têm regras próprias */
    .carrinho > table:first-of-type td,
    .pedidos > table:first-of-type td,
    .resumoPedido > table:first-of-type td,
    .resumoPedidoGer > table:first-of-type td {
        white-space: normal;
        font-size: 20px !important;
    }

    .resumoPedidoGer > table:first-of-type td[colspan] {
        font-size: 16px !important;
        padding-left: 6px;
    }

    .carrinho > table:first-of-type img,
    .pedidos > table:first-of-type img,
    .resumoPedido > table:first-of-type img {
        width: 40px;
        height: 40px;
    }

    /* ---------- Barra do frete ---------- */
    .frete {
        top: auto !important;
        bottom: 4px;
        width: calc(100% - 8px) !important;
        height: auto !important;
        padding: 6px 0 !important;
        box-sizing: border-box;
    }

    /* ---------- Regras de Faturamento ---------- */
    .regras {
        top: 4px !important;
        left: 4px !important;
        width: calc(100% - 8px) !important;
        height: 156px !important;
        overflow-y: auto !important;
        box-sizing: border-box;
    }

    .regras p {
        line-height: 1.35 !important;
        margin: 0;
        padding: 4px 6px;
    }

    .regras input[type="submit"],
    .regras label {
        font-size: 15px !important;
    }

    /* ---------- Itens do carrinho: cada linha vira um cartão ---------- */
    /* colunas: 1 PRODUTO, 2 DESCRIÇÃO, 3 PREÇO UN., 4 QTDE., 5 OBS,
       6 AÇÃO (+ - excluir), 7 ESTQ. A ordem das células não muda
       (o JavaScript lê preço e quantidade pela posição). */
    .carrinho .grid-view,
    .carrinho .grid-view > tbody {
        display: block;
        width: 100% !important;
        max-height: none;
    }

    .carrinho .grid-view tr:has(> th) {
        display: none;
    }

    .carrinho .grid-view tr {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "prod  prod  prod"
            "desc  desc  desc"
            "preco qtde  estq"
            "acao  acao  obs";
        border-bottom: 2px solid #37517e;
        padding: 4px 6px;
    }

    .carrinho .grid-view td {
        width: auto !important;
        height: auto !important;
        padding: 2px 0 !important;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 15px;
    }

    .carrinho .grid-view td:nth-child(1) { grid-area: prod; font-size: 18px; }
    .carrinho .grid-view td:nth-child(2) { grid-area: desc; }
    .carrinho .grid-view td:nth-child(3) { grid-area: preco; }
    .carrinho .grid-view td:nth-child(4) { grid-area: qtde; }
    .carrinho .grid-view td:nth-child(5) { grid-area: obs; text-align: right; }
    .carrinho .grid-view td:nth-child(6) { grid-area: acao; }
    .carrinho .grid-view td:nth-child(7) { grid-area: estq; }

    /* rótulo pequeno em cima do valor */
    .carrinho .grid-view td:nth-child(3)::before,
    .carrinho .grid-view td:nth-child(4)::before,
    .carrinho .grid-view td:nth-child(7)::before {
        display: block;
        font-size: 12px;
        font-weight: normal;
    }

    .carrinho .grid-view td:nth-child(3)::before { content: "Preço un."; }
    .carrinho .grid-view td:nth-child(4)::before { content: "Qtde."; }
    .carrinho .grid-view td:nth-child(7)::before { content: "Estq."; }

    /* botões + / - / excluir maiores para o dedo */
    .carrinho .grid-view td:nth-child(6) input[type="image"] {
        width: 34px !important;
        height: 34px !important;
        margin-right: 8px;
    }

    /* balão com o aviso da peça: não pode passar da largura da tela */
    .carrinho .tooltip {
        width: 70vw;
        left: auto;
        right: 0;
        margin-left: 0;
        bottom: 110%;
    }

    /* ---------- Rodapé do carrinho: prazo, entrega e botões ---------- */
    .carrinho .footer {
        position: sticky;
        width: 100% !important;
        height: auto !important;
        padding: 6px;
        box-sizing: border-box;
    }

    .carrinho .footer table,
    .carrinho .footer tbody {
        display: block;
        width: 100%;
        max-height: none;
    }

    .carrinho .footer tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
    }

    .carrinho .footer td {
        display: block;
        width: auto !important;
        white-space: nowrap;
    }

    /* 1ª célula (Prazo + lista) ocupa a linha toda */
    .carrinho .footer td:nth-child(1) {
        flex: 0 0 100%;
        display: flex;
        align-items: center;
    }

    .carrinho .footer td:nth-child(1) select {
        flex: 1 1 auto;
        width: auto !important;
        height: 32px;
    }

    /* botões Continuar Comprando / Gerar Pedido lado a lado */
    .carrinho .footer td:has(input[type="submit"]) {
        flex: 1 1 40%;
        display: flex;
        gap: 6px;
    }

    .carrinho .footer input[type="submit"] {
        flex: 1 1 0;
        width: auto !important;
        height: auto !important;
        min-height: 40px;
        margin-top: 0;
        padding: 4px !important;
        white-space: normal;
        line-height: 1.2;
    }

    /* ---------- Confirmação do pedido ---------- */
    .meuConfirma,
    .meuConfirmaPrazo {
        width: calc(100% - 16px) !important;
        height: auto !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        padding: 8px !important;
        box-sizing: border-box;
    }

    .meuConfirma label,
    .meuConfirmaPrazo label {
        display: block;
        margin-bottom: 10px;
    }

    .meuConfirma-esquerda,
    .meuConfirma-direita {
        position: static !important;
        display: inline-block;
        width: 48% !important;
        height: auto !important;
        vertical-align: top;
    }

    .meuConfirma-esquerda input[type="submit"],
    .meuConfirma-direita input[type="submit"] {
        width: 100% !important;
        height: auto !important;
        min-height: 44px;
        padding: 4px !important;
        white-space: normal;
        line-height: 1.2;
    }

    /* ---------- Pedidos de Compra: cada pedido vira um cartão ---------- */
    /* colunas: 1 #(ver), 2 PEDIDO, 3 CLIENTE, 4 DATA, 5 STATUS,
       6 VALOR PEDIDO, 7 VALOR FATURADO, 8 PRAZO, 9 ENTREGA, 10 No. PEDIDO */
    .pedidos .grid-view,
    .pedidos .grid-view > tbody {
        display: block;
        width: 100% !important;
        max-height: none;
    }

    .pedidos .grid-view tr:has(> th) {
        display: none;
    }

    .pedidos .grid-view tr {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 6px;
        border-bottom: 2px solid #37517e;
        padding: 4px 6px;
    }

    .pedidos .grid-view td {
        width: auto !important;
        height: auto !important;
        padding: 1px 0 !important;
        white-space: normal;
        overflow-wrap: anywhere;
        grid-column: 2;
    }

    /* botão "ver pedido" à esquerda, ocupando a altura do cartão */
    .pedidos .grid-view td:nth-child(1) {
        grid-column: 1;
        grid-row: 1 / span 9;
        align-self: center;
    }

    .pedidos .grid-view td:nth-child(1) input[type="image"] {
        width: 36px !important;
        height: 36px !important;
    }

    .pedidos .grid-view td:nth-child(2)::before  { content: "Pedido: ";         font-weight: normal; }
    .pedidos .grid-view td:nth-child(3)::before  { content: "Cliente: ";        font-weight: normal; }
    .pedidos .grid-view td:nth-child(4)::before  { content: "Data: ";           font-weight: normal; }
    .pedidos .grid-view td:nth-child(5)::before  { content: "Status: ";         font-weight: normal; }
    .pedidos .grid-view td:nth-child(6)::before  { content: "Valor pedido: ";   font-weight: normal; }
    .pedidos .grid-view td:nth-child(7)::before  { content: "Valor faturado: "; font-weight: normal; }
    .pedidos .grid-view td:nth-child(8)::before  { content: "Prazo: ";          font-weight: normal; }
    .pedidos .grid-view td:nth-child(9)::before  { content: "Entrega: ";        font-weight: normal; }
    .pedidos .grid-view td:nth-child(10)::before { content: "No. pedido: ";     font-weight: normal; }

    /* ---------- Resumos (retirada / impressão) ---------- */
    [id$="tabRetirada"],
    [id$="tabGerada"] {
        width: 100% !important;
        table-layout: auto !important;
        max-height: none;
    }

    [id$="tabRetirada"] th,
    [id$="tabRetirada"] td,
    [id$="tabGerada"] th,
    [id$="tabGerada"] td {
        width: auto !important;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 13px !important;
        padding: 2px 3px;
    }

    /* colunas numéricas (qtde, valores) não quebram no meio do número */
    [id$="tabRetirada"] td:nth-child(4),
    [id$="tabGerada"] td:nth-child(n+3) {
        white-space: nowrap;
        overflow-wrap: normal;
    }

    /* rodapés com o botão Sair / Imprimir */
    .footer2 {
        width: 100% !important;
        height: auto !important;
        position: sticky;
        bottom: 0;
        padding: 4px 0 8px 0;
    }

    .footer2 table {
        max-height: none;
    }

    /* ---------- Avisos ("Produto adicionado...", "Pedido gerado...") ---------- */
    /* O JavaScript define top/left/width em pixels a cada aviso; no
       celular eles ficam sempre no topo da tela, na largura dela (embaixo
       cobririam os botões do carrinho). */
    #aviso,
    #mensagem {
        top: 8px !important;
        bottom: auto !important;
        left: 50% !important;
        width: calc(100% - 16px) !important;
        transform: translateX(-50%) !important;
        box-sizing: border-box;
        font-size: 17px !important;
    }
}

/* =====================================================================
   CADASTRO DE CLIENTE (.clientes, Pesquisa - usuário THOR)
   ===================================================================== */
@media (min-width: 769px) and (max-width: 1279px) {
    .clientes {
        max-width: calc(100% - 8px);
        box-sizing: border-box;
        overflow-x: auto !important;
    }
}

@media (max-width: 768px) {
    .clientes {
        width: calc(100% - 8px) !important;
        height: auto !important;
        max-height: calc(100vh - 8px);
        max-height: calc(100dvh - 8px);
        top: 4px !important;
        flex-direction: column;
        gap: 0;
        overflow-y: auto !important;
        box-sizing: border-box;
    }

    .clientes > div {
        width: 100%;
    }

    [id$="Table4"] {
        width: 100% !important;
        table-layout: auto !important;
    }

    [id$="Table4"] td {
        font-size: 20px !important;
        white-space: normal;
    }

    [id$="Table4"] img {
        width: 40px;
        height: 40px;
    }

    /* campos um embaixo do outro, na largura da tela */
    .cadastro-cliente-campos {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px 10px 4px 10px;
    }

    .cadastro-cliente-campos input[type="text"] {
        font-size: 16px; /* 16px evita o zoom automático do iPhone ao tocar no campo */
    }

    .clientes .footerc2 {
        display: flex;
        gap: 8px;
        padding: 8px 10px 12px 10px;
    }

    .clientes .footerc2 input[type="submit"] {
        flex: 1 1 0;
        width: auto !important;
        min-height: 44px;
    }

    .cliente-sucesso {
        padding: 12px 10px;
    }
}