/* ==========================================================================
   Gestor.Pro - MOBILE UI (aparência de app nativo)
   --------------------------------------------------------------------------
   REGRA DE OURO: todas as regras ficam dentro de @media (max-width: 768px).
   A versão desktop (>= 769px) NÃO é afetada - este arquivo é carregado por
   último em index.html apenas para sobrescrever os módulos quando for mobile.
   ========================================================================== */

/* Elementos injetados pelo mobile.js dentro do menu: fora do mobile ficam
   ocultos, senão viram divs sem estilo e quebram a barra de menus. */
.m-drawer-head,
.m-drawer-foot {
    display: none;
}

/* Botão cancelar do PDV: só existe na versão mobile, abaixo do FINALIZAR
   (desktop usa F10; fora do mobile fica oculto) */
.pdv-cancelar-venda {
    display: none;
}

/* --- Segurança: os elementos mobile nunca aparecem em tela grande --- */
@media (min-width: 769px) {
    .m-topbar,
    .m-bottomnav,
    .m-backdrop,
    .m-home { display: none !important; }
}

@media (max-width: 768px) {

    /* ====================== BASE ====================== */
    html {
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }

    body {
        font-size: 14px;
        line-height: 1.45;
        /* dvh acompanha a barra de endereço do navegador mobile */
        height: 100vh;
        height: 100dvh;
    }

    /* 16px impede o zoom automático do iOS ao focar um campo */
    input,
    select,
    textarea {
        font-size: 16px;
    }

    .btn {
        min-height: 38px;
    }

    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    ::-webkit-scrollbar-thumb {
        background: #c9ced6;
        border-radius: 3px;
        border: none;
    }

    /* ================== TOPO (app bar) ================== */
    .m-topbar {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 54px;
        padding: 0 6px;
        padding-top: env(safe-area-inset-top, 0px);
        background: linear-gradient(135deg, #0052a3 0%, #004578 100%);
        color: #fff;
        box-shadow: 0 2px 10px rgba(0, 45, 95, .32);
        flex-shrink: 0;
        position: relative;
        z-index: 1000000;
    }

    .m-topbar .m-brand {
        flex: 1;
        text-align: center;
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -.5px;
        /* compensa o menu à esquerda e o sino à direita => marca centrada */
        padding: 0 44px;
        pointer-events: none;
        color: #fff;
    }

    .m-topbar .m-brand span {
        color: #ffd54a;
    }

    .m-btn-icon {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, .16);
        border: none;
        border-radius: 13px;
        color: #fff;
        font-size: 21px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .m-btn-icon:active {
        background: rgba(255, 255, 255, .34);
    }

    .m-btn-icon[hidden] {
        display: none !important;
    }

    /* Sino de notificações entra na app bar */
    #notificacao-bell {
        top: calc(env(safe-area-inset-top, 0px) + 6px) !important;
        right: 6px !important;
        z-index: 1000001 !important;
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, .16);
        border-radius: 13px;
    }

    #notificacao-bell>i {
        color: #fff !important;
        font-size: 19px !important;
    }

    /* Botão de tema também entra na app bar, ao lado do sino */
    #btn-theme {
        top: calc(env(safe-area-inset-top, 0px) + 6px) !important;
        right: 52px !important;
        z-index: 1000001 !important;
        width: 42px;
        height: 42px;
        background: rgba(255, 255, 255, .16);
        border-radius: 13px;
    }

    #btn-theme>i {
        color: #fff !important;
        font-size: 19px !important;
    }

    .notificacao-dropdown {
        width: calc(100vw - 12px);
        max-width: 360px;
        right: 6px;
        left: auto;
    }

    /* ================== DRAWER (menu) ================== */
    /* O menu desktop vira um painel deslizante — sem duplicar markup,
       toda a lógica de permissões continua valendo. */
    #html-menu-bar,
    .menu-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 84vw;
        max-width: 330px;
        height: 100%;
        height: 100dvh;
        flex-direction: column;
        align-items: stretch;
        background: #fff;
        border-right: 1px solid #e3e7ee;
        border-bottom: none;
        box-shadow: 6px 0 26px rgba(15, 23, 42, .28);
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .25s ease, visibility .25s ease;
        z-index: 1500001;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    #html-menu-bar.open,
    .menu-bar.open {
        transform: translateX(0);
        visibility: visible;
    }

    /* Cabeçalho do drawer (injetado pelo mobile.js) */
    .m-drawer-head {
        display: block;
        position: sticky;
        top: 0;
        z-index: 3;
        background: linear-gradient(135deg, #0074e0 0%, #0058b5 100%);
        color: #fff;
        padding: 18px 16px 16px;
        box-shadow: 0 2px 8px rgba(0, 60, 140, .25);
    }

    .m-drawer-brand {
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -.6px;
        margin-bottom: 8px;
    }

    .m-drawer-brand span {
        color: #ffd54a;
    }

    .m-drawer-user {
        font-size: 12.5px;
        line-height: 1.7;
        opacity: .95;
    }

    .m-drawer-user div {
        display: flex;
        align-items: center;
        gap: 7px;
        overflow: hidden;
    }

    .m-drawer-user i {
        font-size: 14px;
        opacity: .85;
        flex-shrink: 0;
    }

    .m-drawer-user strong {
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Rodapé do drawer (Trocar usuário / Sair) */
    .m-drawer-foot {
        display: flex;
        position: sticky;
        bottom: 0;
        background: #f7f9fc;
        border-top: 1px solid #e6eaf0;
        padding: 8px;
        gap: 8px;
        z-index: 3;
    }

    .m-drawer-foot button {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 9px 4px;
        border: 1px solid #e0e6ee;
        border-radius: 12px;
        background: #fff;
        color: #334155;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
    }

    .m-drawer-foot button i {
        font-size: 19px;
        color: #0066cc;
    }

    .m-drawer-foot button:active {
        background: #eef4fb;
    }

    .m-drawer-foot button[hidden] {
        display: none !important;
    }

    /* Itens do menu empilhados na vertical */
    .menu-bar .menu-item {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        height: auto;
        width: 100%;
        padding: 0;
        flex-shrink: 0;
        border-bottom: 1px solid #f0f2f6;
        background: transparent;
    }

    .menu-bar .menu-item:hover,
    .menu-bar .menu-item.active {
        background: transparent;
        border: none;
        border-bottom: 1px solid #f0f2f6;
    }

    .menu-bar .menu-item>span {
        display: block;
        width: 100%;
        padding: 14px 16px;
        font-size: 14.5px;
        font-weight: 800;
        color: #0b2c4d;
        letter-spacing: .2px;
    }

    /* Dropdowns sempre expandidos (padrão "Ajustes" do celular) */
    #html-menu-bar .dropdown-menu,
    .menu-bar .dropdown-menu {
        position: static;
        display: block;
        min-width: 0;
        border: none;
        box-shadow: none;
        background: #fff;
        padding: 0 0 6px;
        z-index: auto;
    }

    #html-menu-bar .dropdown-submenu-items,
    .menu-bar .dropdown-submenu-items {
        position: static;
        display: block;
        left: auto;
        top: auto;
        min-width: 0;
        border: none;
        box-shadow: none;
        background: #f6f9fd;
        z-index: auto;
    }

    .menu-bar .dropdown-submenu::after {
        display: none;
    }

    .menu-bar .dropdown-item {
        padding: 12px 16px 12px 22px;
        font-size: 13.5px;
        min-height: 44px;
        color: #1f2937;
        border-radius: 0;
    }

    .menu-bar .dropdown-item i {
        font-size: 16px;
        opacity: .8;
        color: #0066cc;
    }

    .menu-bar .dropdown-item:active {
        background: #e8f1fc;
        color: #0052a3;
    }

    .menu-bar .dropdown-item:hover {
        background: #eef4fb;
        color: #0066cc;
    }

    .menu-bar .dropdown-submenu .dropdown-item,
    .menu-bar .dropdown-submenu-items .dropdown-item {
        padding-left: 34px;
        font-size: 13px;
        background: #f6f9fd;
    }

    .menu-bar .dropdown-divider {
        margin: 5px 14px;
        background: #eceff4;
    }

    /* ================== BACKDROP ================== */
    .m-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
        z-index: 1500000;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }

    .m-backdrop.show {
        opacity: 1;
        visibility: visible;
    }

    /* ============ SOME O CHROME DE DESKTOP ============ */
    .tool-bar,
    .app-taskbar,
    .status-bar,
    .logo-corner {
        display: none !important;
    }

    /* Durante o login a chrome mobile também some (igual ao desktop) */
    body.not-logged-in .m-topbar,
    body.not-logged-in .m-bottomnav,
    body.not-logged-in .m-backdrop {
        display: none !important;
    }

    /* ================== BOTTOM NAV ================== */
    .m-bottomnav {
        display: flex;
        align-items: stretch;
        min-height: 60px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: #fff;
        border-top: 1px solid #e6eaf0;
        box-shadow: 0 -3px 14px rgba(16, 24, 40, .08);
        flex-shrink: 0;
        z-index: 999999;
    }

    .m-tab {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 8px 2px;
        border: none;
        background: transparent;
        color: #7a879b;
        font-size: 10.5px;
        font-weight: 700;
        line-height: 1.1;
        cursor: pointer;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }

    .m-tab i {
        font-size: 23px;
        line-height: 1;
    }

    .m-tab span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .m-tab:active {
        background: #f2f7fd;
    }

    .m-tab.active {
        color: #0066cc;
    }

    .m-tab.active i {
        filter: drop-shadow(0 2px 5px rgba(0, 102, 204, .35));
    }

    .m-tab.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 24%;
        right: 24%;
        height: 3px;
        border-radius: 0 0 4px 4px;
        background: #0066cc;
    }

    .m-tab[hidden] {
        display: none !important;
    }

    /* ================== HOME ================== */
    .m-home {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 20px 16px 26px;
        background:
            radial-gradient(120% 60% at 50% 0%, #dcebfd 0%, rgba(220, 235, 253, 0) 60%),
            #f5f8fc;
    }

    .m-home-head {
        margin-bottom: 18px;
    }

    .m-home-hello {
        font-size: 13px;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: .6px;
    }

    .m-home-empresa {
        font-size: 22px;
        font-weight: 800;
        color: #0f2540;
        letter-spacing: -.6px;
        margin-top: 3px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .m-home-title {
        font-size: 12px;
        font-weight: 800;
        color: #8592a6;
        text-transform: uppercase;
        letter-spacing: .8px;
        margin: 4px 0 12px;
    }

    .m-home-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
        gap: 12px;
    }

    .m-home-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 96px;
        padding: 14px 6px 12px;
        background: #fff;
        border: 1px solid #e7ecf3;
        border-radius: 18px;
        box-shadow: 0 2px 6px rgba(16, 24, 40, .05);
        cursor: pointer;
        transition: transform .08s ease, background .08s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .m-home-card i {
        font-size: 26px;
        color: #0066cc;
    }

    .m-home-card span {
        font-size: 11.5px;
        font-weight: 700;
        color: #334155;
        text-align: center;
        line-height: 1.2;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-word;
    }

    .m-home-card:active {
        transform: scale(.95);
        background: #eef4fb;
    }

    .m-home-card[hidden] {
        display: none !important;
    }

    /* ============ JANELAS (MDI) EM TELA CHEIA ============ */
    .win-window {
        min-width: 0 !important;
        min-height: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    .win-window.active {
        border: none !important;
        box-shadow: none !important;
    }

    .win-header {
        height: 50px;
        padding: 0 4px 0 12px;
        background: linear-gradient(135deg, #0052a3 0%, #004578 100%);
        border-bottom: none;
    }

    .win-window.active .win-header {
        background: linear-gradient(135deg, #0052a3 0%, #004578 100%);
    }

    .win-title {
        color: #fff;
        font-size: 15.5px;
        font-weight: 700;
        letter-spacing: -.2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .win-title i {
        font-size: 18px;
    }

    .win-controls {
        gap: 4px;
    }

    .win-btn {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        color: #fff;
        font-size: 22px;
        font-weight: 400;
    }

    .win-btn:hover {
        background: rgba(255, 255, 255, .18);
    }

    .win-btn-min {
        display: none !important;
    }

    .win-btn-close:hover {
        background: rgba(255, 255, 255, .3) !important;
        color: #fff !important;
    }

    .win-body {
        font-size: 14px;
        -webkit-overflow-scrolling: touch;
    }

    /* ================== TABELAS ================== */
    /* Cada tabela rola na horizontal dentro da tela do celular */
    .win-body table,
    .modal-body table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    th {
        font-size: 12px;
        padding: 7px 8px !important;
        white-space: nowrap;
    }

    td {
        font-size: 13px;
        padding: 7px 8px !important;
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ================== MODAIS ================== */
    .modal-overlay {
        /* Deixa a barra do app + cabeçalho da janela livres: senão o
           botão "voltar" (ícone de seta no win-header) fica escondido
           atrás do modal. */
        top: calc(54px + 50px + env(safe-area-inset-top, 0px));
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
        z-index: 2000000;
    }

    .modal-content {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border: none;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
    }

    .modal-header {
        padding: 14px 16px;
        flex-shrink: 0;
        min-height: 54px;
    }

    .modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px;
    }

    .modal-footer {
        flex-shrink: 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #e6eaf0;
    }

    /* ================== SWEETALERT ================== */
    .swal2-container {
        z-index: 2500000 !important;
    }

    .swal2-popup {
        width: 92vw !important;
        max-width: 420px;
        border-radius: 18px !important;
        padding: 22px 18px !important;
        font-size: 14px !important;
    }

    .swal2-html-container {
        font-size: 14px !important;
    }

    .swal2-confirm,
    .swal2-cancel,
    .swal2-denied {
        min-height: 44px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
    }

    /* ============ PREVIEW DE IMPRESSÃO ============ */
    .print-preview-overlay {
        z-index: 3000000 !important;
        padding: 0 !important;
    }

    .print-preview-container {
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
    }

    .print-preview-body {
        padding: 10px !important;
    }

    .print-preview-paper,
    #print-preview-iframe {
        max-width: 100% !important;
    }

    /* ============================================================
       MÓDULO: VENDER (PDV)
       ============================================================ */

    /* Ordem pedida no celular: cliente → busca → itens → total → finalizar.
       display:contents dissolve a sidebar e libera os filhos para serem
       reordenados com order dentro do .pdv-container. */
    .pdv-container {
        flex-direction: column;
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .pdv-sidebar {
        display: contents;
    }

    .pdv-product-preview {
        display: none;
    }

    .pdv-cliente-box {
        order: 1;
        margin: 12px 12px 0;
    }

    .pdv-input-group {
        order: 2;
        margin: 14px 12px 0;
    }

    .pdv-input-group label {
        font-size: 12px;
    }

    .pdv-main {
        order: 3;
        flex: 1 1 auto;
        min-width: 0;
        padding: 16px 12px 0;
        overflow: visible;
    }

    /* Total, FINALIZAR e CANCELAR rolam com a tela (fluxo normal) */
    .pdv-total-box {
        order: 4;
        margin: 16px 12px 0;
        padding: 12px 14px;
    }

    .pdv-total-value {
        font-size: 34px;
    }

    .pdv-finalizar {
        order: 5;
        margin: 8px 12px 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .pdv-cancelar-venda {
        display: block;
    }

    .pdv-cart-table-wrapper {
        flex: none;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }

    /* A tabela deixa de ser ela própria o scroller (evita scroll duplicado)
       e o wrapper passa a rolar na horizontal, mantendo o th sticky */
    .win-body .pdv-cart-table-wrapper table {
        display: table;
        width: 100%;
        min-width: 640px;
        overflow: visible;
    }

    /* Régua de atalhos vira botões em 2 colunas, mesmo lugar e visual */
    .pdv-footer-shortcuts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
        height: auto;
        padding: 10px 12px;
        line-height: 1.5;
    }

    .pdv-footer-shortcuts .pdv-shortcut {
        white-space: normal;
        text-align: left;
    }

    /* No celular não há F1/F4: esconde esses dois botões da régua */
    .pdv-footer-shortcuts .sc-f1,
    .pdv-footer-shortcuts .sc-f4 {
        display: none;
    }

    .pdv-footer-shortcuts #pdv-obs-indicator,
    .pdv-footer-shortcuts #pdv-vendedor-indicator {
        grid-column: 1 / -1;
    }

    .pdv-cart-header {
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .pdv-cart-header > div {
        min-width: 0;
    }

    /* Controles de linha com alvo de toque decente (min-width/min-height
       vencem o width/height inline de 22px) */
    .pdv-table .btn-sm {
        min-width: 40px;
        min-height: 40px;
        font-size: 15px !important;
    }

    #pdv-items-table input {
        height: 40px !important;
        font-size: 16px !important;
    }

    #pdv-items-table input[inputmode="numeric"] {
        min-width: 58px;
    }

    /* ---------- Modal de pagamento ---------- */
    .pdv-pay-body {
        flex-direction: column;
        gap: 14px;
    }

    .pdv-pay-col-esq {
        flex: none !important;
        width: 100%;
    }

    .pdv-pay-col-dir {
        width: 100% !important;
        flex: none !important;
    }

    .pdv-pay-resumo {
        flex-wrap: wrap;
    }

    .pdv-pay-resumo-card {
        flex: 1 1 110px;
        min-width: 0;
    }

    .pdv-pay-row-desconto,
    .pdv-pay-row-forma,
    .pdv-pay-row-parcelas {
        flex-wrap: wrap;
    }

    .pdv-pay-row-desconto > div,
    .pdv-pay-row-forma > div,
    .pdv-pay-row-parcelas > div {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: 0;
    }

    .pdv-pay-row-parcelas > button {
        width: 100%;
    }

    .pdv-pay-header .modal-close {
        width: 44px;
        height: 44px;
        font-size: 26px;
    }

    .pdv-pay-footer {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px;
    }

    .pdv-pay-btn-cancelar,
    .pdv-pay-btn-confirmar {
        flex: 1 1 130px;
        padding: 0 10px;
        font-size: 14px;
    }

    /* ---------- Modais de produto / cliente ---------- */
    /* .form-control não tem estilo em nenhum CSS do projeto */
    .form-control {
        width: 100%;
        height: 46px;
        box-sizing: border-box;
        padding: 0 12px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        outline: none;
    }

    .form-control:focus {
        border-color: var(--accent-color, #0066cc);
        box-shadow: 0 0 0 2px rgba(0, 102, 204, .18);
    }

    .pdv-produtos-search {
        grid-template-columns: 1fr !important;
    }

    #pdv-produtos-lista,
    #pdv-clientes-lista {
        min-height: 0 !important;
        max-height: none !important;
    }

    /* ============================================================
       MÓDULO: COBRAR
       ============================================================ */
    .cobrar-container {
        padding: 0;
    }

    /* Busca de cliente empilhada (input em cima, vendedor embaixo) */
    .cobrar-search-box {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    .cobrar-search-box > div:first-child {
        flex: none !important;
        width: 100%;
    }

    .cobrar-search-box > div:last-child {
        width: 100%;
    }

    .cobrar-search-box > div:last-child .btn {
        width: 100%;
        min-height: 44px;
    }

    #cobrar-cliente-nome {
        height: 44px;
        box-sizing: border-box;
        font-size: 16px !important;
    }

    /* Uma coluna só: OS em cima, resumo/recebimento embaixo */
    .cobrar-content {
        flex-direction: column;
        padding: 12px !important;
        gap: 14px !important;
        align-items: stretch !important;
    }

    .cob-os-card,
    .cob-resumo-col {
        flex: none !important;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .cobrar-card {
        padding: 14px !important;
    }

    /* OS pendentes viram cartões: sem scroll lateral, tudo legível */
    .cob-mobile-tools {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 2px 10px;
        font-size: 13px;
    }

    .cob-mobile-tools label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        min-height: 44px;
        cursor: pointer;
    }

    .cob-mobile-tools input {
        width: 22px;
        height: 22px;
    }

    .win-body .cobrar-table-wrapper {
        overflow: visible !important;
        max-height: none !important;
    }

    .win-body .cobrar-table-wrapper table {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .win-body .cobrar-table-wrapper thead {
        display: none;
    }

    .win-body #cobrar-os-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Linha de estado (carregando / vazia / erro) vira um cartão simples */
    .win-body #cobrar-os-body tr:not(.cob-os-row):not(.cob-conc-row) {
        display: block;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 10px;
        padding: 6px;
    }

    .win-body #cobrar-os-body tr:not(.cob-os-row):not(.cob-conc-row) td {
        display: block;
        border: 0;
    }

    .win-body #cobrar-os-body tr.cob-os-row {
        display: grid;
        grid-template-columns: 34px 1fr;
        grid-template-areas:
            "sel tipo"
            "sel os"
            "sel cli"
            "sel placa"
            "sel cond"
            "sel gar"
            "valor valor";
        gap: 3px 10px;
        background: #fff;
        border: 1px solid #e3e3e3;
        border-radius: 10px;
        padding: 12px;
        cursor: pointer;
    }

    .win-body #cobrar-os-body tr.cob-os-row:has(.cob-chk:checked) {
        border-color: var(--accent-color, #0066cc);
        background: #f0f7ff;
    }

    .win-body #cobrar-os-body tr.cob-os-row td,
    .win-body #cobrar-os-body tr.cob-conc-row td {
        border: 0 !important;
        padding: 0 !important;
        font-size: 13px;
        min-width: 0;
    }

    .win-body #cobrar-os-body .cob-c-sel { grid-area: sel; padding-top: 2px !important; }
    .win-body #cobrar-os-body .cob-c-tipo { grid-area: tipo; }
    .win-body #cobrar-os-body .cob-c-os { grid-area: os; font-size: 15px; }
    .win-body #cobrar-os-body .cob-c-cli { grid-area: cli; }
    .win-body #cobrar-os-body .cob-c-placa { grid-area: placa; }
    .win-body #cobrar-os-body .cob-c-cond { grid-area: cond; }
    .win-body #cobrar-os-body .cob-c-gar { grid-area: gar; }
    .win-body #cobrar-os-body .cob-c-valor { grid-area: valor; margin-top: 6px; }

    .win-body #cobrar-os-body .cob-empty { display: none !important; }

    /* Rótulos das linhas de detalhe */
    .win-body #cobrar-os-body .cob-c-cli::before { content: "Cliente"; }
    .win-body #cobrar-os-body .cob-c-placa::before { content: "Placa"; }
    .win-body #cobrar-os-body .cob-c-cond::before { content: "Condição"; }
    .win-body #cobrar-os-body .cob-c-gar::before { content: "Garantia"; }

    .win-body #cobrar-os-body .cob-c-cli::before,
    .win-body #cobrar-os-body .cob-c-placa::before,
    .win-body #cobrar-os-body .cob-c-cond::before,
    .win-body #cobrar-os-body .cob-c-gar::before {
        display: block;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #999;
    }

    .win-body #cobrar-os-body .cob-c-valor input {
        width: 100% !important;
        box-sizing: border-box;
        height: 44px !important;
        font-size: 16px !important;
    }

    /* Concertos vinculados: sub-cartão rosa, recuado */
    .win-body #cobrar-os-body tr.cob-conc-row {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "tipo"
            "os"
            "gar"
            "valor";
        gap: 3px;
        margin-left: 22px;
        background: #fdf2f8;
        border: 1px solid #fbcfe8;
        border-radius: 10px;
        padding: 10px 12px;
    }

    #cob-select-all,
    .cob-chk {
        width: 24px !important;
        height: 24px !important;
    }

    /* Campos do recebimento com alvo de toque */
    #cob-desconto-input,
    #cobrar-forma-select,
    #cobrar-valor-input,
    #cobrar-parcelas-select,
    #cobrar-prazo-input {
        font-size: 16px !important;
        height: 44px;
        box-sizing: border-box;
    }

    #cob-desconto-input {
        width: 150px !important;
    }

    .cobrar-doc-fiscal-option input {
        width: 22px !important;
        height: 22px !important;
    }

    /* Parcelas + prazo + Add empilham em três linhas */
    .cob-add-row {
        flex-wrap: wrap;
        gap: 8px !important;
        align-items: stretch !important;
    }

    #cobrar-parcelas-row,
    #cobrar-prazo-row {
        flex: 1 1 100% !important;
        min-width: 0;
    }

    .cob-add-row > button {
        width: 100%;
    }

    /* Pagamentos adicionados: nome, valor e X em duas linhas */
    #cobrar-lista-pagamentos > div {
        flex-wrap: wrap;
        gap: 6px;
    }

    #cobrar-lista-pagamentos input {
        width: 130px !important;
        height: 40px !important;
        font-size: 16px !important;
    }

    #cobrar-lista-pagamentos .btn-danger {
        min-width: 44px;
        min-height: 44px;
    }

    /* OBSERVAÇÕES + CONFIRMAR empilhados, largura total */
    .cob-actions-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .cob-actions-row .btn {
        width: 100%;
        flex: none !important;
    }

    /* ============================================================
       MÓDULO: ORÇAMENTOS / LISTAGENS (fin-toolbar + tabelas de venda)
       ============================================================ */
    /* A toolbar fixa em 40px estourava por cima da tabela; no celular
       ela empilha e ganha altura automática (serve pra todos os
       módulos que usam .fin-toolbar / .fin-actions). */
    .fin-toolbar {
        height: auto;
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px !important;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 8px;
    }

    .fin-module-info {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        margin-right: 0 !important;
    }

    .fin-actions {
        display: flex !important;
        flex-wrap: wrap;
        align-items: stretch;
        width: 100% !important;
        margin-left: 0 !important;
        gap: 8px !important;
    }

    .fin-actions > * {
        min-height: 42px;
    }

    /* Ação principal (NOVO ORÇAMENTO) vem primeiro e ocupa a linha toda */
    .fin-actions > .btn-primary {
        order: -1;
        flex: 1 1 100%;
        justify-content: center;
    }

    /* Exportações esticam e o refresh (ou botão de texto) entra na
       mesma linha; se não couber, o flex-wrap resolve */
    .fin-actions > .relat-btn {
        flex: 1 1 auto;
        justify-content: center;
        min-width: max-content;
    }

    .fin-actions > .btn:not(.btn-primary) {
        flex: 0 0 auto;
        min-width: 44px;
        padding: 0 12px;
    }

    .fin-wrapper {
        padding: 12px;
    }

    /* Linhas da listagem viram cartões: sem rolagem horizontal */
    .win-body #vendas-table,
    .win-body #vendas-listing-table {
        display: block;
        width: 100%;
        min-width: 0;
        overflow: visible;
    }

    .win-body #vendas-table thead,
    .win-body #vendas-listing-table thead {
        display: none;
    }

    .win-body #vendas-table tbody,
    .win-body #vendas-listing-table tbody {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Linha de estado (carregando / vazia / erro) vira cartão simples */
    .win-body #vendas-table tbody tr:not(.v-row),
    .win-body #vendas-listing-table tbody tr:not(.v-row) {
        display: block;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 10px;
        padding: 6px;
    }

    .win-body #vendas-table tbody tr:not(.v-row) td,
    .win-body #vendas-listing-table tbody tr:not(.v-row) td {
        display: block;
        border: 0;
        text-align: center;
    }

    .win-body tr.v-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 10px;
        background: #fff;
        border: 1px solid #e3e3e3;
        border-radius: 10px;
        padding: 12px;
        cursor: pointer;
    }

    .win-body tr.v-row td {
        border: 0 !important;
        padding: 0 !important;
        font-size: 14px;
        min-width: 0;
    }

    .win-body tr.v-row .v-cod {
        grid-column: 1;
        grid-row: 1;
        font-weight: 700;
        font-size: 16px;
    }

    .win-body tr.v-row .v-status {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .win-body tr.v-row .v-data,
    .win-body tr.v-row .v-cli,
    .win-body tr.v-row .v-parc,
    .win-body tr.v-row .v-total,
    .win-body tr.v-row .v-transf,
    .win-body tr.v-row .v-acoes {
        grid-column: 1 / -1;
    }

    .win-body tr.v-row .v-data {
        color: #666;
        font-size: 13px;
    }

    .win-body tr.v-row .v-total {
        font-size: 17px !important;
        text-align: right;
        margin-top: 2px;
    }

    .win-body tr.v-row .v-transf {
        text-align: left !important;
    }

    .win-body tr.v-row .v-acoes {
        margin-top: 4px;
        padding-top: 8px !important;
        border-top: 1px dashed #eee !important;
    }

    .win-body tr.v-row .v-acoes > div {
        gap: 8px !important;
    }

    .win-body tr.v-row .v-acoes .btn {
        min-width: 44px;
        min-height: 44px;
    }

    .win-body tr.v-row .v-empty {
        display: none !important;
    }

    /* Rótulo das linhas de detalhe (data-lbl) */
    .win-body tr.v-row .v-cli::before,
    .win-body tr.v-row .v-parc::before {
        content: attr(data-lbl);
        display: block;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #999;
    }

    /* ============================================================
       MÓDULO: NOVO ORÇAMENTO / PEDIDO (form + itens)
       ============================================================ */
    #vendas-novo-wrapper .venda-form-body {
        padding: 12px !important;
    }

    /* Grids do form empilham em 1 coluna (vale pro modal também) */
    #vendas-novo-wrapper .config-grid,
    #modal-venda .config-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Inputs nunca estouram a linha e têm alvo de toque */
    #vendas-novo-wrapper input,
    #vendas-novo-wrapper select,
    #vendas-novo-wrapper textarea,
    #modal-venda input,
    #modal-venda select,
    #modal-venda textarea {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px;
    }

    #vendas-novo-wrapper .config-form-group input,
    #vendas-novo-wrapper .config-form-group select,
    #modal-venda .config-form-group input,
    #modal-venda .config-form-group select {
        min-height: 44px;
    }

    /* Botões ao lado dos inputs (buscar/limpar) não encolhem */
    #vendas-novo-wrapper .btn-sm,
    #modal-venda .btn-sm {
        min-width: 44px;
        min-height: 44px;
        flex-shrink: 0;
    }

    /* Botão ADD ocupa a linha toda */
    #vendas-novo-wrapper .venda-add-item-btn,
    #modal-venda .venda-add-item-btn {
        align-self: stretch !important;
        width: 100%;
    }

    #vendas-novo-wrapper button.venda-add-item-btn,
    #modal-venda button.venda-add-item-btn {
        width: 100%;
        min-height: 44px;
    }

    #vendas-novo-wrapper .venda-add-item-btn .btn,
    #modal-venda .venda-add-item-btn .btn {
        width: 100% !important;
        min-height: 44px;
    }

    /* Totais quebram de linha */
    #vendas-novo-wrapper .venda-totais,
    #modal-venda .venda-totais {
        flex-wrap: wrap;
        gap: 12px 20px !important;
        padding: 14px !important;
    }

    /* Salvar em largura total */
    #vendas-novo-wrapper .venda-save-row {
        text-align: center !important;
    }

    #vendas-novo-wrapper .venda-save-row .btn {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
    }

    #modal-venda .modal-footer .btn {
        min-height: 44px;
    }

    /* Itens do orçamento viram cartões */
    #vendas-novo-wrapper #venda-itens-body,
    #modal-venda #venda-itens-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    #vendas-novo-wrapper table:has(#venda-itens-body),
    #modal-venda table:has(#venda-itens-body) {
        display: block;
        width: 100%;
        min-width: 0;
        overflow: visible;
    }

    #vendas-novo-wrapper table:has(#venda-itens-body) thead,
    #modal-venda table:has(#venda-itens-body) thead {
        display: none;
    }

    #vendas-novo-wrapper #venda-itens-body tr:not(.vi-row),
    #modal-venda #venda-itens-body tr:not(.vi-row) {
        display: block;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 10px;
        padding: 6px;
    }

    #vendas-novo-wrapper #venda-itens-body tr:not(.vi-row) td,
    #modal-venda #venda-itens-body tr:not(.vi-row) td {
        display: block;
        border: 0;
        text-align: center;
    }

    #vendas-novo-wrapper #venda-itens-body tr.vi-row,
    #modal-venda #venda-itens-body tr.vi-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "tipo desc del"
            "qtd unit sub"
            "obs obs obs";
        gap: 4px 10px;
        background: #fff;
        border: 1px solid #e3e3e3;
        border-radius: 10px;
        padding: 10px 12px;
    }

    #vendas-novo-wrapper #venda-itens-body tr.vi-row td,
    #modal-venda #venda-itens-body tr.vi-row td {
        border: 0 !important;
        padding: 0 !important;
        font-size: 14px;
        min-width: 0;
    }

    #vendas-novo-wrapper #venda-itens-body .vi-tipo,
    #modal-venda #venda-itens-body .vi-tipo {
        grid-area: tipo;
        font-size: 11px;
        text-transform: uppercase;
        align-self: center;
    }

    #vendas-novo-wrapper #venda-itens-body .vi-desc,
    #modal-venda #venda-itens-body .vi-desc {
        grid-area: desc;
        font-weight: 700;
    }

    #vendas-novo-wrapper #venda-itens-body .vi-del,
    #modal-venda #venda-itens-body .vi-del {
        grid-area: del;
        justify-self: end;
    }

    #vendas-novo-wrapper #venda-itens-body .vi-qtd,
    #modal-venda #venda-itens-body .vi-qtd {
        grid-area: qtd;
    }

    #vendas-novo-wrapper #venda-itens-body .vi-unit,
    #modal-venda #venda-itens-body .vi-unit {
        grid-area: unit;
    }

    #vendas-novo-wrapper #venda-itens-body .vi-sub,
    #modal-venda #venda-itens-body .vi-sub {
        grid-area: sub;
        justify-self: end;
        font-size: 15px !important;
    }

    #vendas-novo-wrapper #venda-itens-body .vi-obs,
    #modal-venda #venda-itens-body .vi-obs {
        grid-area: obs;
        font-size: 12px;
    }

    #vendas-novo-wrapper #venda-itens-body .vi-qtd::before,
    #modal-venda #venda-itens-body .vi-qtd::before {
        content: "Qtd: ";
        color: #999;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
    }

    #vendas-novo-wrapper #venda-itens-body .vi-unit::before,
    #modal-venda #venda-itens-body .vi-unit::before {
        content: "Unit: ";
        color: #999;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
    }

    #vendas-novo-wrapper #venda-itens-body .v-empty,
    #modal-venda #venda-itens-body .v-empty {
        display: none !important;
    }

    #vendas-novo-wrapper #venda-itens-body .vi-del .btn,
    #modal-venda #venda-itens-body .vi-del .btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* ============================================================
       MÓDULO: FISCAL NFS-e / NF-e (filtros + listagem)
       ============================================================ */
    /* Filtros empilhados em card (vale pros outros módulos que usam
       .fin-filters com o mesmo padrão) */
    .fin-filters {
        padding: 12px !important;
        gap: 8px !important;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 8px;
    }

    .fin-filters > input[type="text"] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        min-height: 44px;
        font-size: 16px !important;
        box-sizing: border-box;
    }

    .fin-filters > select,
    .fin-filters > input[type="date"] {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        min-height: 44px;
        font-size: 16px !important;
        box-sizing: border-box;
    }

    .fin-filters > .btn {
        flex: 1 1 100%;
        min-height: 44px;
        justify-content: center;
        font-size: 15px;
    }

    .fin-filters > label {
        flex: 1 1 100%;
    }

    /* Linhas da listagem fiscal viram cartões */
    .win-body #fiscal-listing-table-nfse,
    .win-body #fiscal-listing-table-nfe {
        display: block;
        width: 100%;
        min-width: 0;
        overflow: visible;
    }

    .win-body #fiscal-listing-table-nfse thead,
    .win-body #fiscal-listing-table-nfe thead {
        display: none;
    }

    .win-body #fiscal-listing-table-nfse tbody,
    .win-body #fiscal-listing-table-nfe tbody {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Linha de estado (carregando / vazia / erro) */
    .win-body #fiscal-listing-table-nfse tbody tr:not(.f-row),
    .win-body #fiscal-listing-table-nfe tbody tr:not(.f-row) {
        display: block;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 10px;
        padding: 6px;
    }

    .win-body #fiscal-listing-table-nfse tbody tr:not(.f-row) td,
    .win-body #fiscal-listing-table-nfe tbody tr:not(.f-row) td {
        display: block;
        border: 0;
        text-align: center;
    }

    .win-body tr.f-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "num status"
            "emis emis"
            "cli cli"
            "valor valor"
            "acoes acoes";
        gap: 4px 10px;
        background: #fff;
        border: 1px solid #e3e3e3;
        border-radius: 10px;
        padding: 12px;
    }

    .win-body tr.f-row td {
        border: 0 !important;
        padding: 0 !important;
        font-size: 14px;
        min-width: 0;
    }

    .win-body tr.f-row .f-num {
        grid-area: num;
        font-weight: 700;
        font-size: 16px;
    }

    .win-body tr.f-row .f-status {
        grid-area: status;
        justify-self: end;
    }

    .win-body tr.f-row .f-emis {
        grid-area: emis;
        color: #666;
        font-size: 13px;
    }

    .win-body tr.f-row .f-cli {
        grid-area: cli;
        font-size: 15px;
    }

    .win-body tr.f-row .f-valor {
        grid-area: valor;
        font-size: 17px !important;
        text-align: right;
        margin-top: 2px;
    }

    .win-body tr.f-row .f-acoes {
        grid-area: acoes;
        margin-top: 4px;
        padding-top: 8px !important;
        border-top: 1px dashed #eee !important;
    }

    .win-body tr.f-row .f-acoes > div {
        display: flex;
        flex-wrap: wrap;
        gap: 8px !important;
    }

    .win-body tr.f-row .f-acoes .btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Rótulo da linha de cliente (data-lbl) */
    .win-body tr.f-row .f-cli::before {
        content: attr(data-lbl);
        display: block;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #999;
    }
}