/* ==========================================================================
   Identidade visual motivetech ERP
   Fonte Inter (hospedada em ~/lib/inter, licença OFL) e cores da marca.
   Carregado por último em _AdminLayout e _Layout: é a base das demais telas.
   ========================================================================== */

/* Inter: subconjunto latin (português) e latin-ext, pesos 400 a 800 */
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url('../lib/inter/inter-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url('../lib/inter/inter-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url('../lib/inter/inter-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url('../lib/inter/inter-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 800; src: url('../lib/inter/inter-800.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url('../lib/inter/inter-ext-400.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url('../lib/inter/inter-ext-500.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url('../lib/inter/inter-ext-600.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url('../lib/inter/inter-ext-700.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 800; src: url('../lib/inter/inter-ext-800.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    /* Cores da marca */
    --mt-teal: #01a5b1;
    --mt-teal-dark: #087985;
    --mt-slate: #aabcd0;
    --mt-navy: #131c2b;
    --mt-ink: #111827;

    --mt-font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Tipografia única. Os controles de formulário e o Semantic UI não herdam a fonte
   do body, por isso entram na lista; ícones (<i>, .icon) ficam de fora. */
body,
button, input, select, textarea, optgroup,
table, .btn, .dropdown-menu, .navbar, .nav-link, .page-title, .card-title,
h1, h2, h3, h4, h5, h6,
.ui:not(i):not(.icon), .ui.header, .ui.menu .item,
.popover, .tooltip, .modal-content, .swal2-popup {
    font-family: var(--mt-font-sans) !important;
}

/* A regra acima pega botões que são o próprio ícone (ex.: <button class="fas fa-file-pdf">
   nos botões de exportação do DataTables); devolve a fonte dos ícones. */
.fa, .fas, .far, .fal, .fad {
    font-family: 'Font Awesome 5 Free' !important;
}

.fab {
    font-family: 'Font Awesome 5 Brands' !important;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.navbar-brand, .login-brand__eyebrow, .login-card__eyebrow {
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

/* Navbar: navy da marca no lugar do degradê azul do template */
.navbar.bg-primary {
    background: var(--mt-navy) !important;
}

/* site.css tem ".navbar .navbar-brand img { height: auto }", por isso a especificidade maior */
.navbar .navbar-brand img.navbar-logo {
    display: block;
    height: 34px;
    width: auto;
    max-height: none;
}

/* Itens do menu não quebram em duas linhas (ícone em cima, texto embaixo) */
.app-shell .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 0.92rem;
    font-weight: 500;
}

/* ==========================================================================
   Moldura das telas internas (_AdminLayout): fundo claro contínuo, sem a
   borda navy em volta do conteúdo.
   ========================================================================== */
/* Sem min-height no body: a margem superior de .page-wrapper (50px) "vaza" para o body
   e somaria à altura da tela, criando rolagem mesmo com pouco conteúdo. */
body.app-shell {
    height: auto;
    background: #f4f7fb;
}

/* style.css ainda reserva 60px à esquerda para a antiga barra lateral, que não existe mais */
@media (max-width: 1023px) {
    .app-shell .page-wrapper {
        margin-left: 0;
        min-height: 0 !important; /* aqui o conteúdo já desce 60px (site.css); a altura mínima gerava rolagem */
    }
}

.app-shell .page-wrapper {
    background: #f4f7fb;
    padding: 0;
    /* O layout fixa min-height: 866px inline, o que cria rolagem em telas mais baixas */
    min-height: calc(100vh - 50px) !important;
}

.app-shell .page-wrapper > div.container-fluid {
    background: #f4f7fb;
    box-shadow: none !important;
}


/* ==========================================================================
   Menus suspensos da navbar
   O style.css deixa todo .dropdown-menu cinza (#6c757d) com texto branco e
   sem espaçamento nos itens; aqui os menus da navbar viram um painel claro.
   ========================================================================== */
.navbar-conta {
    flex: 0 0 auto;
}

.app-shell .dropdown-menu {
    min-width: 200px;
    margin-top: 4px;
    padding: 6px;
    border: 1px solid #e5ebf2;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.06);
}

.app-shell .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: #1e293b;
    font-size: 0.9rem;
    font-weight: 500;
}

    .app-shell .dropdown-item i {
        width: 16px;
        color: #64748b;
        text-align: center;
    }

    .app-shell .dropdown-item:hover,
    .app-shell .dropdown-item:focus {
        background: rgba(1, 165, 177, 0.1);
        color: var(--mt-teal-dark);
        outline: none;
    }

        .app-shell .dropdown-item:hover i,
        .app-shell .dropdown-item:focus i {
            color: var(--mt-teal-dark);
        }

    .app-shell .dropdown-item:active {
        background: rgba(1, 165, 177, 0.18);
    }

.app-shell .dropdown-divider {
    margin: 6px 4px;
    border-top-color: #eef2f7;
}

.app-shell .dropdown-header {
    padding: 8px 12px 4px;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Itens dentro de <li> (padrão antigo das listagens): o style.css dá padding e hover cinza ao <li> */
.app-shell .dropdown-menu li {
    padding: 0;
    font-size: inherit;
}

    .app-shell .dropdown-menu li:hover {
        background: transparent;
    }

.app-shell .dropdown-item.text-danger,
.app-shell .dropdown-item.text-danger i {
    color: #b91c1c !important;
}

    .app-shell .dropdown-item.text-danger:hover,
    .app-shell .dropdown-item.text-danger:focus {
        background: #fdecec;
    }

/* Menu da conta: usuário no topo, "Sair" em vermelho discreto */
.menu-conta {
    min-width: 260px !important;
}

.menu-conta__usuario {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
}

.menu-conta__avatar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(1, 165, 177, 0.14);
    color: var(--mt-teal-dark);
    font-size: 0.9rem;
    font-weight: 800;
}

.menu-conta__dados {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .menu-conta__dados strong {
        color: var(--mt-ink);
        font-size: 0.92rem;
        font-weight: 700;
    }

    .menu-conta__dados small {
        overflow: hidden;
        color: #64748b;
        font-size: 0.8rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.app-shell .menu-conta__sair,
.app-shell .menu-conta__sair i {
    color: #b91c1c;
}

    .app-shell .menu-conta__sair:hover,
    .app-shell .menu-conta__sair:focus,
    .app-shell .menu-conta__sair:hover i {
        background: #fdecec;
        color: #991b1b;
    }

/* Navbar recolhida (celular/tablet): o menu aberto rola se for maior que a tela */
@media (max-width: 991px) {
    .app-shell .navbar-collapse {
        max-height: calc(100vh - 61px);
        overflow-y: auto;
        padding-bottom: 12px;
    }

    .app-shell .navbar .dropdown-menu {
        margin: 4px 0 8px;
        box-shadow: none;
    }
}

/* ==========================================================================
   Componentes das telas internas (listagens e cadastros)
   Tudo sob .app-shell para não mexer nas telas públicas.
   ========================================================================== */

/* Título da página: a faixa branca de 45px do template vira um cabeçalho limpo */
.app-shell .page-wrapper > div > div.container-fluid {
    height: auto;
    padding: 16px 0 0;
    background: transparent;
}

    .app-shell .page-wrapper > div > div.container-fluid h2 {
        margin: 0;
        color: var(--mt-ink);
        font-size: clamp(1.4rem, 2.2vw, 1.75rem);
        font-weight: 800;
        letter-spacing: -0.02em;
    }

        .app-shell .page-wrapper > div > div.container-fluid h2 b {
            font-weight: inherit;
        }

/* Cabeçalho das listagens: título, filtros e ações numa linha só */
.lista-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}

.lista-cabecalho__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.lista-conteudo {
    margin-top: 16px;
}

/* site.css dá altura fixa e borda a todo <header> (pensado para o topo antigo); nos cartões não */
.lista-conteudo header,
.form-card header {
    height: auto;
    border-bottom: 0;
}

/* Botões: primário em teal (o template usava verde com hover roxo) */
.app-shell .btn {
    border-radius: 8px;
    font-weight: 600;
}

.app-shell .btn-primary {
    border: 1px solid var(--mt-teal);
    background: var(--mt-teal);
    color: #ffffff;
    box-shadow: none;
}

    .app-shell .btn-primary:hover,
    .app-shell .btn-primary:focus,
    .app-shell .btn-primary:active,
    .app-shell .btn-primary:not(:disabled):not(.disabled):active {
        border-color: var(--mt-teal-dark);
        background: var(--mt-teal-dark);
        color: #ffffff;
        box-shadow: none;
    }

    .app-shell .btn-primary:focus-visible {
        box-shadow: 0 0 0 4px rgba(1, 165, 177, 0.25);
    }

.app-shell .btn-outline-primary {
    border-color: var(--mt-teal);
    background: #ffffff;
    color: var(--mt-teal-dark);
}

    .app-shell .btn-outline-primary:hover,
    .app-shell .btn-outline-primary:focus,
    .app-shell .btn-outline-primary:not(:disabled):not(.disabled):active {
        border-color: var(--mt-teal-dark);
        background: rgba(1, 165, 177, 0.1);
        color: var(--mt-teal-dark);
        box-shadow: none;
    }

/* Selos (ex.: tipos de pessoa): pílula suave em vez de bloco azul */
.app-shell .label.badge-info,
.app-shell .label-info {
    display: inline-block;
    margin: 1px 4px 1px 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(1, 165, 177, 0.12);
    color: var(--mt-teal-dark);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}

/* ---- DataTables ---------------------------------------------------------- */
.app-shell .dataTables_wrapper {
    padding: 14px 20px 10px;
    border: 1px solid #d9e2ee;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Botões de exportação: quadrados neutros com ícone */
.app-shell .dt-buttons {
    margin: 0 12px 12px 0;
    padding: 0;
}

    .app-shell .dt-buttons .dt-button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 0 4px 0 0 !important;
        padding: 0 !important;
        border: 1px solid #d9e2ee !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        color: #475569 !important;
        font-size: 0.95rem;
        box-shadow: none !important;
    }

        .app-shell .dt-buttons .dt-button:hover,
        .app-shell .dt-buttons .dt-button:focus {
            border-color: var(--mt-teal) !important;
            background: rgba(1, 165, 177, 0.08) !important;
            color: var(--mt-teal-dark) !important;
        }

.app-shell .dataTables_length,
.app-shell .dataTables_filter,
.app-shell .dataTables_info {
    color: #64748b;
    font-size: 0.875rem;
}

.app-shell .dataTables_length {
    margin: 0 0 12px;
}

.app-shell .dataTables_filter {
    margin: 0 0 12px;
}

    .app-shell .dataTables_length select,
    .app-shell .dataTables_filter input {
        height: 36px;
        padding: 0 10px;
        border: 1px solid #d9e2ee;
        border-radius: 8px;
        background: #ffffff;
        color: #1e293b;
        font-size: 0.875rem;
        transition: border-color 160ms ease, box-shadow 160ms ease;
    }

    .app-shell .dataTables_filter input {
        width: 260px;
        max-width: 100%;
        margin-left: 8px;
    }

        .app-shell .dataTables_length select:focus,
        .app-shell .dataTables_filter input:focus {
            border-color: var(--mt-teal);
            box-shadow: 0 0 0 3px rgba(1, 165, 177, 0.15);
            outline: none;
        }

.app-shell table.dataTable {
    margin-top: 4px !important;
    border-collapse: collapse !important;
    color: #1e293b;
}

    .app-shell table.dataTable thead th {
        padding: 8px 12px;
        border-top: 0;
        border-bottom: 1px solid #d9e2ee !important;
        color: #64748b;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    /* Com rolagem vertical (scrollY) o DataTables desenha o cabeçalho numa tabela e o corpo em
       outra, que leva uma cópia invisível do cabeçalho. A borda acima (com !important) pintava
       essa cópia também, e o margin-top abria um vão: aparecia uma linha dupla sob o cabeçalho. */
    .app-shell .dataTables_scrollBody table.dataTable {
        margin-top: 0 !important;
    }

        .app-shell .dataTables_scrollBody table.dataTable thead th {
            border-bottom: 0 !important;
        }

        /* As setas de ordenação dessa cópia vazavam para baixo do cabeçalho */
        .app-shell .dataTables_scrollBody table.dataTable thead th::before,
        .app-shell .dataTables_scrollBody table.dataTable thead th::after {
            display: none;
        }

        .app-shell .dataTables_scrollBody table.dataTable tbody tr:first-child td {
            border-top: 0;
        }

    .app-shell table.dataTable tbody td {
        box-shadow: none !important; /* DataTables 1.13 pinta listras e coluna ordenada com box-shadow */
        padding: 7px 12px;
        border-top: 1px solid #eef2f7;
        line-height: 1.4; /* o template deixava 32px, o que afastava linhas de texto dentro da célula */
        vertical-align: middle;
        font-size: 0.9rem;
    }

    /* Listras bem leves e sem o cinza da coluna ordenada */
    .app-shell table.dataTable tbody tr,
    .app-shell table.dataTable.table-striped tbody tr:nth-of-type(odd),
    .app-shell table.dataTable.stripe tbody tr.odd,
    .app-shell table.dataTable.display tbody tr.odd {
        background: #ffffff;
    }

    .app-shell table.dataTable.table-striped tbody tr:nth-of-type(even),
    .app-shell table.dataTable.display tbody tr.even {
        background: #fafbfd;
    }

    .app-shell table.dataTable tbody tr > .sorting_1,
    .app-shell table.dataTable.display tbody tr > .sorting_1,
    .app-shell table.dataTable.order-column tbody tr > .sorting_1 {
        background: transparent !important;
    }

    .app-shell table.dataTable.table-hover tbody tr:hover,
    .app-shell table.dataTable.display tbody tr:hover {
        background: rgba(1, 165, 177, 0.05);
    }

/* Ações de linha (links "btn-sm btn-primary" / "btn-sm btn-danger"): botões suaves */
.app-shell table.dataTable td a.btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 0;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    box-shadow: none;
    transition: background-color 160ms ease, color 160ms ease;
}

.app-shell table.dataTable td a.btn-sm.btn-primary {
    background: rgba(1, 165, 177, 0.1);
    color: var(--mt-teal-dark);
}

    .app-shell table.dataTable td a.btn-sm.btn-primary:hover,
    .app-shell table.dataTable td a.btn-sm.btn-primary:focus {
        background: var(--mt-teal);
        color: #ffffff;
    }

.app-shell table.dataTable td a.btn-sm.btn-danger {
    background: transparent;
    color: #b91c1c;
}

    .app-shell table.dataTable td a.btn-sm.btn-danger:hover,
    .app-shell table.dataTable td a.btn-sm.btn-danger:focus {
        background: #fdecec;
        color: #991b1b;
    }

/* Paginação */
.app-shell .dataTables_wrapper .dataTables_paginate {
    padding-top: 10px;
}

    .app-shell .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 34px;
        height: 34px;
        margin-left: 4px;
        padding: 0 10px !important;
        border: 1px solid #d9e2ee !important;
        border-radius: 8px;
        background: #ffffff !important;
        color: #334155 !important;
        font-size: 0.85rem;
        line-height: 32px;
    }

        .app-shell .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            border-color: var(--mt-teal) !important;
            background: rgba(1, 165, 177, 0.08) !important;
            color: var(--mt-teal-dark) !important;
        }

        .app-shell .dataTables_wrapper .dataTables_paginate .paginate_button.current,
        .app-shell .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
            border-color: var(--mt-teal) !important;
            background: var(--mt-teal) !important;
            color: #ffffff !important;
        }

        .app-shell .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
        .app-shell .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
            border-color: #eef2f7 !important;
            background: #ffffff !important;
            color: #94a3b8 !important;
        }

.app-shell .dataTables_wrapper .dataTables_info {
    padding-top: 16px;
}

/* A tabela rola de lado dentro do cartão, sem estourar a página, em qualquer largura. Quem
   rola é o contêiner .dt-rolagem (criado no preInit do DataTables, em js/app/navegacao.js);
   a tabela fica display:table e ocupa a largura toda. O 100% !important vence a largura em px
   que o DataTables grava no style e não refaz sozinho ao redimensionar a janela. */
.app-shell .dt-rolagem {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.app-shell table.dataTable {
    width: 100% !important;
}

/* Barra do topo em uma linha só: exportar | "25 por página" ... busca.
   O <div class="clear"> do dom 'B<"clear">lfrtip' jogava o "por página" para a linha de baixo. */
.app-shell .dataTables_wrapper > .clear {
    display: none;
}

.app-shell .dataTables_wrapper .dt-buttons {
    float: left;
    margin: 0 12px 12px 0;
    padding: 0 12px 0 0;
    border-right: 1px solid #eef2f7;
}

/* "25 por página" num botão só: o select vai sem borda dentro da moldura */
.app-shell .dataTables_wrapper .dataTables_length {
    float: left;
    margin: 0 0 12px;
}

    .app-shell .dataTables_wrapper .dataTables_length label {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        height: 36px;
        margin: 0;
        padding: 0 12px 0 4px;
        border: 1px solid #d9e2ee;
        border-radius: 8px;
        background: #ffffff;
        color: #64748b;
        font-size: 0.8125rem;
        white-space: nowrap;
        cursor: pointer;
        transition: border-color 160ms ease, box-shadow 160ms ease;
    }

        .app-shell .dataTables_wrapper .dataTables_length label:hover {
            border-color: var(--mt-teal);
        }

        .app-shell .dataTables_wrapper .dataTables_length label:focus-within {
            border-color: var(--mt-teal);
            box-shadow: 0 0 0 3px rgba(1, 165, 177, 0.15);
        }

    .app-shell .dataTables_wrapper .dataTables_length select {
        -webkit-appearance: none;
        appearance: none;
        width: auto;
        height: 34px;
        margin: 0;
        padding: 0 22px 0 8px;
        border: 0;
        border-radius: 6px;
        background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center;
        color: #1e293b;
        font-weight: 600;
        box-shadow: none;
        cursor: pointer;
    }

        .app-shell .dataTables_wrapper .dataTables_length select:focus {
            box-shadow: none;
            outline: none;
        }

/* Busca com lupa dentro do campo */
.app-shell .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--mt-teal);
}

/* Sem o texto "Pesquisar": a lupa e o placeholder já dizem o que é. O texto continua no
   label (só some da tela), então leitores de tela ainda o anunciam. */
.app-shell .dataTables_wrapper .dataTables_filter label {
    margin: 0;
    font-size: 0;
}

    .app-shell .dataTables_wrapper .dataTables_filter label input {
        margin-left: 0;
    }

.app-shell .dataTables_wrapper .dataTables_filter input {
    padding-left: 34px;
    border: 1px solid #d9e2ee;
    border-radius: 8px;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center;
}

/* Linha "Nenhum registro encontrado": à esquerda e presa na lateral, para não sumir
   quando a tabela é mais larga que a tela */
.app-shell table.dataTable td.dataTables_empty {
    position: sticky;
    left: 0;
    padding: 28px 12px;
    color: #94a3b8;
    text-align: left;
}

/* O DataTables põe uma borda escura embaixo da tabela sem rodapé */
.app-shell table.dataTable.no-footer,
.app-shell .dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: 1px solid #eef2f7 !important;
}

/* Rodapé: "Mostrando X até Y" e páginas alinhados na mesma linha */
.app-shell .dataTables_wrapper .dataTables_info {
    font-size: 0.8125rem;
}

.app-shell .dataTables_wrapper .dataTables_paginate .ellipsis {
    padding: 0 6px;
    color: #94a3b8;
}

/* Celular. Seletores com .dataTables_wrapper para vencer o CSS do DataTables, que carrega
   depois e centraliza tudo em uma coluna abaixo de 640px. */
@media (max-width: 767px) {
    .app-shell .dataTables_wrapper {
        padding: 12px;
    }

    /* Topo: exportar à esquerda e "25 por página" à direita, na mesma linha; busca embaixo */
    .app-shell .dataTables_wrapper .dt-buttons {
        margin: 0 8px 10px 0;
        padding: 0;
        border-right: 0;
    }

    .app-shell .dataTables_wrapper .dataTables_length {
        float: right;
        margin: 0 0 10px;
    }

        /* 16px no select evita o zoom automático do iPhone */
        .app-shell .dataTables_wrapper .dataTables_length select {
            font-size: 16px;
        }

    .app-shell .dataTables_wrapper .dataTables_filter {
        clear: both;
        float: none;
        width: 100%;
        margin: 0 0 10px;
        text-align: left;
    }

        .app-shell .dataTables_wrapper .dataTables_filter label {
            display: block;
            width: 100%;
        }

        /* 16px evita o zoom automático do iPhone ao tocar no campo */
        .app-shell .dataTables_wrapper .dataTables_filter input {
            width: 100%;
            height: 40px;
            margin: 0;
            font-size: 16px;
        }

    /* Rodapé: total centralizado e botões de página largos, fáceis de tocar */
    .app-shell .dataTables_wrapper .dataTables_info {
        display: block;
        float: none;
        padding-top: 14px;
        text-align: center;
    }

    .app-shell .dataTables_wrapper .dataTables_paginate {
        float: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 4px;
        margin-top: 8px;
        padding-top: 0;
        text-align: center;
    }

        .app-shell .dataTables_wrapper .dataTables_paginate > span {
            display: inline-flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 4px;
        }

        .app-shell .dataTables_wrapper .dataTables_paginate .paginate_button {
            margin: 0;
            min-width: 36px;
            height: 40px;
            padding: 0 8px !important;
            line-height: 38px;
        }

            /* "Anterior" e "Próximo" viram setas para caber junto dos números */
            .app-shell .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
            .app-shell .dataTables_wrapper .dataTables_paginate .paginate_button.next {
                width: 40px;
                font-size: 0;
            }

                .app-shell .dataTables_wrapper .dataTables_paginate .paginate_button.previous::before,
                .app-shell .dataTables_wrapper .dataTables_paginate .paginate_button.next::before {
                    content: "\2039";
                    font-size: 1.4rem;
                    line-height: 36px;
                }

                .app-shell .dataTables_wrapper .dataTables_paginate .paginate_button.next::before {
                    content: "\203A";
                }
}

/* ---- Select2 (filtros) --------------------------------------------------- */
.app-shell .select2-container--default .select2-selection--multiple,
.app-shell span.select2-selection {
    min-height: 40px;
    border: 1px solid #d9e2ee !important;
    border-radius: 8px !important;
}

.app-shell .select2-container--default .select2-selection--multiple {
    display: flex;
    align-items: center;
    padding: 2px 8px;
}

    .app-shell .select2-container--default .select2-selection--multiple .select2-search__field {
        height: 24px;
        margin-top: 0;
        font-family: var(--mt-font-sans);
    }

.app-shell .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--mt-teal) !important;
    box-shadow: 0 0 0 3px rgba(1, 165, 177, 0.15);
}

.app-shell .select2-container--default .select2-results__option--highlighted[aria-selected],
.app-shell .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--mt-teal);
}

/* ---- Formulários ---------------------------------------------------------- */

/* Cabeçalho: link de volta acima do título */
.form-cabecalho__voltar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

    .form-cabecalho__voltar:hover,
    .form-cabecalho__voltar:focus {
        color: var(--mt-teal-dark);
        text-decoration: none;
    }

/* Cartão que envolve o formulário: dá a margem e o contorno que faltavam */
.app-shell .form-card {
    margin: 16px 0 32px;
    padding: 8px 28px 0;
    border: 1px solid #d9e2ee;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

    /* Algumas telas põem o <form> direto dentro de .row, sem coluna: alinha com o título */
    .app-shell .row > .form-card {
        flex: 1 1 auto;
        margin-right: 15px;
        margin-left: 15px;
    }

    .app-shell .form-card .tab-content > .tab-pane {
        padding: 24px 0 8px !important;
    }

/* Rodapé com as ações, separado do conteúdo */
.app-shell .form-card__rodape {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 8px -28px 0;
    padding: 16px 28px;
    border-top: 1px solid #eef2f7;
    border-radius: 0 0 12px 12px;
    background: #fafbfd;
}

    .app-shell .form-card__rodape .btn {
        min-width: 120px;
    }

/* Abas sublinhadas (no lugar do bloco navy) */
.app-shell .nav-tabs {
    gap: 4px;
    border-bottom: 1px solid #e5ebf2;
}

    .app-shell .nav-tabs .nav-link {
        margin-bottom: -1px;
        padding: 12px 14px;
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        background: transparent;
        color: #64748b;
        font-size: 0.9rem;
        font-weight: 600;
    }

        .app-shell .nav-tabs .nav-link:hover {
            border-bottom-color: #cbd5e1;
            color: #334155;
        }

        .app-shell .nav-tabs .nav-link.active,
        .app-shell .nav-tabs .nav-item.show .nav-link {
            border-bottom-color: var(--mt-teal);
            background: transparent;
            color: var(--mt-teal-dark);
        }

/* Rótulos e campos */
.app-shell .form-group label,
.app-shell label.control-label {
    margin-bottom: 6px;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 600;
}

.app-shell .form-check-label,
.app-shell .custom-control-label {
    color: #334155;
    font-size: 0.9rem;
    font-weight: 400 !important;
}

.app-shell .form-control {
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d9e2ee;
    border-radius: 8px;
    color: #1e293b;
    font-size: 0.925rem;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.app-shell textarea.form-control {
    height: auto;
    padding: 10px 12px;
}

.app-shell select.form-control[multiple] {
    height: auto;
}

    .app-shell .form-control:hover {
        border-color: #cbd5e1;
    }

    .app-shell .form-control:focus,
    .app-shell .form-control.active {
        border-color: var(--mt-teal) !important;
        box-shadow: 0 0 0 3px rgba(1, 165, 177, 0.15);
    }

    .app-shell .form-control:disabled,
    .app-shell .form-control[readonly] {
        background: #f4f7fb;
        color: #64748b;
    }

/* Select2 de seleção única com a mesma altura dos campos */
.app-shell .select2-container--default .select2-selection--single {
    height: 40px !important;
}

    .app-shell .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 38px;
    }

/* Radios, checkboxes e switch em teal */
.app-shell input[type="radio"],
.app-shell input[type="checkbox"] {
    accent-color: var(--mt-teal);
}

.app-shell .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--mt-teal);
    background-color: var(--mt-teal);
}

.app-shell .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(1, 165, 177, 0.2);
}

.app-shell .text-danger.field-validation-error,
.app-shell span.text-danger {
    font-size: 0.8rem;
}

/* Botão secundário neutro (Cancelar) */
.app-shell .btn-light {
    border: 1px solid #d9e2ee;
    background: #ffffff;
    color: #334155;
}

    .app-shell .btn-light:hover,
    .app-shell .btn-light:focus {
        border-color: #cbd5e1;
        background: #f1f5f9;
        color: #1e293b;
    }

@media (max-width: 767px) {
    .app-shell .form-card {
        padding: 4px 16px 0;
    }

    .app-shell .form-card__rodape {
        margin: 8px -16px 0;
        padding: 12px 16px;
    }

        .app-shell .form-card__rodape .btn {
            flex: 1 1 0;
            min-width: 0;
        }

    /* Abas roláveis de lado quando não cabem */
    .app-shell .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

        .app-shell .nav-tabs .nav-link {
            white-space: nowrap;
        }
}

/* Barra de rolagem clara nas telas internas (site.css usa navy) */
body.app-shell {
    scrollbar-color: #cbd5e1 #f4f7fb;
}

    body.app-shell::-webkit-scrollbar-track {
        background: #f4f7fb;
    }

    body.app-shell::-webkit-scrollbar-thumb {
        background-color: #cbd5e1;
    }

        body.app-shell::-webkit-scrollbar-thumb:hover {
            background-color: #94a3b8;
        }

/* ---- Status em pílula ------------------------------------------------------ */
.status-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.status-pill--aberto { background: #fef3c7; color: #92400e; }
.status-pill--faturado { background: #e7f6ec; color: #15803d; }
.status-pill--cancelado { background: #fdecec; color: #b91c1c; }

/* Selos antigos (label-warning/-danger/-success) no mesmo estilo suave */
.app-shell .label.label-warning,
.app-shell .label.label-danger,
.app-shell .label.label-success {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
}

.app-shell .label.label-warning { background: #fef3c7; color: #92400e; }
.app-shell .label.label-danger { background: #fdecec; color: #b91c1c; }
.app-shell .label.label-success { background: #e7f6ec; color: #15803d; }

/* ---- Campos com prefixo (R$, lupa) ------------------------------------------ */
.app-shell .input-group-text {
    min-width: 40px;
    justify-content: center;
    border: 1px solid #d9e2ee;
    border-radius: 8px;
    background: #f4f7fb;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 600;
}

.app-shell .input-group > .input-group-prepend > .input-group-text {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.app-shell .input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.app-shell div.totais .input-group-prepend,
.app-shell div.totais input.form-control {
    height: 40px;
    border: 0;
}

.app-shell div.totais .input-group-prepend {
    border-radius: 8px 0 0 8px;
}

.app-shell div.totais input.form-control {
    border: 1px solid #d9e2ee;
    border-radius: 0 8px 8px 0;
}

/* ---- Janelas de seleção (sdwOverlay: cliente, produto, pagamento...) -------- */
.app-shell div.sdwOverlay {
    padding: 24px 16px;
    background-color: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}

    .app-shell div.sdwOverlay > div.sdwOverlayBlock {
        width: min(960px, 100%) !important;
        min-width: 0;
        min-height: 0;
        max-height: calc(100vh - 48px);
        padding: 20px 24px 16px;
        overflow-y: auto;
        border-radius: 16px;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
    }

        /* Dentro da janela a tabela não precisa de outro cartão em volta */
        .app-shell div.sdwOverlay .dataTables_wrapper {
            padding: 0;
            border: 0;
            box-shadow: none;
        }

        .app-shell div.sdwOverlay .table-responsive {
            padding: 0;
        }

.sdw-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

    .sdw-cabecalho h3 {
        margin: 0;
        color: var(--mt-ink);
        font-size: 1.15rem;
        font-weight: 800;
    }

.sdw-fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: #64748b;
    font-size: 1.1rem;
    text-decoration: none;
}

    .sdw-fechar:hover,
    .sdw-fechar:focus {
        background: #f1f5f9;
        color: #1e293b;
        text-decoration: none;
    }

/* Linhas clicáveis nas janelas de seleção */
.app-shell div.sdwOverlay table.dataTable tbody tr {
    cursor: pointer;
}

/* ---- Produto: nome + código e estoque em pílula (listagem e seleção na venda) ---- */
.produto-nome {
    display: block;
    color: #1e293b;
    font-weight: 600;
}

.produto-meta {
    display: block;
    color: #64748b;
    font-size: 0.8rem;
}

/* Estoque em pílula: vermelho sem estoque, âmbar no mínimo ou abaixo, verde normal */
.estoque-pill {
    display: inline-block;
    min-width: 44px;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.estoque-pill--ok {
    background: #e7f6ec;
    color: #15803d;
}

.estoque-pill--baixo {
    background: #fef3c7;
    color: #92400e;
}

.estoque-pill--zerado {
    background: #fdecec;
    color: #b91c1c;
}

/* Botões de texto do DataTables (ex.: "Baixa agrupada" em outras telas): largura pelo texto,
   não o quadrado de 36px dos botões de ícone */
.app-shell .dt-buttons .dt-button:not(.fa):not(.fas):not(.far) {
    width: auto;
    padding: 0 12px !important;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Período no cabeçalho das listagens (tipo de data + de/até + filtrar) */
.lista-periodo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

    .lista-periodo label {
        margin: 0;
        color: #475569;
        font-size: 0.875rem;
        font-weight: 600;
    }

    .lista-periodo input.form-control {
        width: 160px;
    }

    .lista-periodo .lista-periodo__tipo {
        width: auto;
        font-weight: 600;
    }

    .lista-periodo__campo {
        display: flex;
        align-items: center;
        gap: 8px;
    }

/* Tablet: o cabeçalho ainda cabe numa linha, só com menos espaço entre os grupos */
@media (max-width: 991px) {
    .lista-cabecalho {
        gap: 12px 16px;
    }

    .lista-periodo input.form-control {
        width: 140px;
    }
}

/* Celular: título, filtro e ação empilham, cada um ocupando a linha toda */
@media (max-width: 767px) {
    .lista-cabecalho {
        flex-direction: column;
        align-items: stretch;
    }

    .lista-periodo {
        width: 100%;
    }

        .lista-periodo .lista-periodo__tipo {
            flex: 1 1 100%;
            width: 100%;
        }

        .lista-periodo__campo {
            flex: 1 1 auto;
        }

            .lista-periodo__campo input.form-control {
                flex: 1 1 auto;
                width: auto;
            }

        .lista-periodo > .btn {
            flex: 1 1 100%;
            width: 100%;
        }

    .lista-cabecalho__acoes {
        width: 100%;
        margin-left: 0;
    }

        .lista-cabecalho__acoes .btn {
            flex: 1 1 auto;
            width: 100%;
        }
}

.status-pill--parcial { background: #e0f2fe; color: #075985; }
.status-pill--neutro { background: #eef2f7; color: #475569; }

/* ---- Financeiro: listagem de contas ------------------------------------------ */
.fin-resumo {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.fin-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 18px;
    border: 1px solid #d9e2ee;
    border-radius: 12px;
    background: #ffffff;
    color: inherit;
    text-align: left;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

    .fin-card small {
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .fin-card strong {
        margin-top: 4px;
        color: #111827;
        font-size: 1.3rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }

    .fin-card span {
        color: #64748b;
        font-size: 0.82rem;
    }

    .fin-card:hover {
        border-color: var(--mt-teal);
    }

    .fin-card.ativo {
        border-color: var(--mt-teal);
        box-shadow: 0 0 0 3px rgba(1, 165, 177, 0.18);
    }

    .fin-card:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(1, 165, 177, 0.3);
    }

.fin-card--alerta {
    border-color: #fecaca;
    background: #fff7f7;
}

    .fin-card--alerta strong {
        color: #b91c1c;
    }

.fin-card--ok strong {
    color: #15803d;
}

.fin-aviso {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-bottom: 12px;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(1, 165, 177, 0.08);
    color: #0f5f66;
    font-size: 0.88rem;
}

    .fin-aviso .btn-link {
        padding: 0;
        color: var(--mt-teal-dark);
        font-weight: 600;
    }

.fin-selecao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #111827;
    color: #ffffff;
    font-size: 0.9rem;
}

    .fin-selecao .fin-selecao__limpar {
        padding: 0;
        color: #cbd5e1;
    }

    .fin-selecao #fin-baixar-selecionadas {
        margin-left: auto;
    }

.fin-col-check {
    width: 28px;
}

    .fin-col-check input {
        width: 16px;
        height: 16px;
        vertical-align: middle;
    }

.fin-venc {
    display: block;
}

.fin-prazo {
    display: block;
    color: #64748b;
    font-size: 0.78rem;
}

.fin-vencida {
    color: #b91c1c !important;
    font-weight: 600;
}

/* Atalhos de período da listagem financeira */
.fin-periodos .lista-chip {
    white-space: nowrap;
}

.fin-periodo-texto {
    color: #64748b;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

/* Título aberto por último: realçado ao voltar para a lista */
#documento-table tbody tr.fin-linha-destaque > td {
    background: rgba(1, 165, 177, 0.12) !important;
    box-shadow: none;
}

    #documento-table tbody tr.fin-linha-destaque > td:first-child {
        box-shadow: inset 4px 0 0 var(--mt-teal);
    }

#documento-table tbody tr.fin-linha-destaque {
    animation: fin-destaque 1.6s ease-out 1;
}

@keyframes fin-destaque {
    0%, 30% { outline: 2px solid var(--mt-teal); outline-offset: -2px; }
    100% { outline: 2px solid transparent; outline-offset: -2px; }
}

@media (max-width: 767px) {
    /* Celular: os quatro atalhos em duas linhas, sem cortar nenhum */
    .lista-periodo .fin-periodos {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        border-radius: 18px;
    }

    .fin-periodo-texto {
        flex: 1 1 100%;
    }
}

@media (max-width: 991px) {
    .fin-resumo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =============================================================================
   Padrão de pagamento do sistema
   Formas em botões, campo em R$, barra de progresso, estado vazio e editor de
   parcelas. Usado na venda e no financeiro (js/componentes/pagamento.js).
   ============================================================================= */

.aba-contador {
    display: inline-block;
    min-width: 20px;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(1, 165, 177, 0.14);
    color: var(--mt-teal-dark);
    font-size: 0.72rem;
    line-height: 18px;
    text-align: center;
}

.itens-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 32px 16px;
    border: 1px dashed #d9e2ee;
    border-radius: 12px;
    color: #64748b;
    text-align: center;
}

    .itens-vazio i {
        margin-bottom: 6px;
        color: #94a3b8;
        font-size: 1.6rem;
    }

    .itens-vazio strong {
        color: #334155;
    }

.campo-rs {
    display: flex;
    align-items: stretch;
    height: 36px;
    overflow: hidden;
    border: 1px solid #d9e2ee;
    border-radius: 8px;
    background: #ffffff;
}

    .campo-rs span {
        display: flex;
        align-items: center;
        padding: 0 8px;
        background: #f4f7fb;
        color: #64748b;
        font-size: 0.78rem;
    }

    .campo-rs input {
        width: 100%;
        min-width: 0;
        padding: 0 8px;
        border: 0;
        text-align: right;
        outline: none;
    }

.item-remover {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #94a3b8;
}

    .item-remover:hover,
    .item-remover:focus {
        background: #fdecec;
        color: #b91c1c;
    }

.pag-progresso {
    margin-bottom: 20px;
}

.pag-progresso__texto {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    margin-bottom: 6px;
    color: #475569;
    font-size: 0.9rem;
}

    .pag-progresso__texto strong {
        color: #1e293b;
    }

.pag-progresso__status {
    font-weight: 700;
}

    .pag-progresso__status.falta { color: #b91c1c; }
    .pag-progresso__status.pago { color: #15803d; }
    .pag-progresso__status.troco { color: #15803d; }

.pag-progresso__barra {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f7;
}

    .pag-progresso__barra div {
        width: 0;
        height: 100%;
        border-radius: 999px;
        background: var(--mt-teal);
        transition: width 240ms ease;
    }

    .pag-progresso__barra div.completo {
        background: #16a34a;
    }

.pag-rotulo {
    margin-bottom: 8px;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 600;
}

.pag-busca {
    position: relative;
    max-width: 360px;
    margin-bottom: 10px;
}

    .pag-busca i {
        position: absolute;
        top: 12px;
        left: 12px;
        color: #64748b;
    }

    .pag-busca input {
        width: 100%;
        height: 38px;
        padding: 0 12px 0 34px;
        border: 1px solid #d9e2ee;
        border-radius: 8px;
        outline: none;
    }

        .pag-busca input:focus {
            border-color: var(--mt-teal);
            box-shadow: 0 0 0 3px rgba(1, 165, 177, 0.15);
        }

.pag-formas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.pag-carregando {
    color: #64748b;
    font-size: 0.9rem;
}

.pag-forma {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #d9e2ee;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 600;
    transition: border-color 160ms ease, background-color 160ms ease;
}

    .pag-forma i {
        color: #64748b;
    }

    .pag-forma:hover {
        border-color: var(--mt-teal);
    }

    .pag-forma.selecionada {
        border-color: var(--mt-teal);
        background: rgba(1, 165, 177, 0.1);
        color: var(--mt-teal-dark);
        box-shadow: 0 0 0 3px rgba(1, 165, 177, 0.15);
    }

        .pag-forma.selecionada i {
            color: var(--mt-teal-dark);
        }

.pag-valor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.campo-rs--grande {
    width: 200px;
    height: 44px;
}

    .campo-rs--grande input {
        font-size: 1rem;
        font-weight: 700;
    }

.pag-valor__info {
    flex: 1 1 200px;
    color: #64748b;
    font-size: 0.88rem;
}

.pag-valor .btn {
    height: 44px;
}

    .pag-valor .btn kbd {
        margin-left: 6px;
        background: rgba(255, 255, 255, 0.25);
        font-size: 0.7rem;
        box-shadow: none;
    }

@media (max-width: 767px) {
    .campo-rs--grande {
        width: 100%;
    }

    .pag-valor .btn {
        width: 100%;
    }
}

.campo-rs:focus-within {
    border-color: var(--mt-teal);
    box-shadow: 0 0 0 3px rgba(1, 165, 177, 0.15);
}

.campo-rs input[readonly] {
    background: #f8fafc;
    color: #475569;
}

.pag-forma small {
    padding: 0 6px;
    border-radius: 999px;
    background: #eef2f7;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
}

.pag-forma:disabled {
    cursor: default;
    opacity: 0.6;
}

/* ---- Financeiro: lançamento e edição de contas ---------------------------- */
.fin-secao {
    padding: 20px 0 8px;
}

    .fin-secao + .fin-secao {
        border-top: 1px solid #eef2f7;
    }

.fin-secao__titulo {
    margin: 0 0 14px;
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0;
}

.fin-opcional {
    margin-left: 4px;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 500;
}

.fin-form label {
    color: #334155;
    font-size: 0.85rem;
    font-weight: 600;
}

.fin-form .campo-rs {
    height: 40px;
}

    .fin-form .campo-rs--grande,
    .fin-form .baixa-campos .campo-rs {
        height: 44px;
    }

.fin-valores {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px 24px;
}

.fin-valores__campos {
    display: grid;
    flex: 1 1 520px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 12px;
}

.fin-valores__campos--datas {
    flex-basis: 100%;
    grid-template-columns: repeat(2, minmax(0, 260px));
}

.fin-total {
    display: flex;
    flex: 0 0 220px;
    flex-direction: column;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(1, 165, 177, 0.08);
}

    .fin-total small {
        color: #475569;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .fin-total strong {
        color: var(--mt-teal-dark);
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 1.3;
    }

    .fin-total span {
        color: #64748b;
        font-size: 0.72rem;
    }

.fin-parcelas-info {
    margin: 0 0 1rem;
    color: #64748b;
    font-size: 0.88rem;
}

.fin-parcelas {
    max-width: 560px;
}

table.parc-tabela {
    width: 100%;
    border-collapse: collapse;
}

    table.parc-tabela th {
        padding: 8px 10px;
        border-bottom: 1px solid #d9e2ee;
        color: #64748b;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    table.parc-tabela td {
        padding: 6px 10px;
        border-bottom: 1px solid #eef2f7;
        vertical-align: middle;
    }

    table.parc-tabela input[type=date] {
        height: 36px;
    }

    table.parc-tabela .parc-num {
        width: 90px;
        color: #475569;
        font-weight: 600;
        white-space: nowrap;
    }

    table.parc-tabela .parc-acao {
        width: 48px;
        text-align: right;
    }

.parc-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px;
    font-size: 0.88rem;
    font-weight: 600;
}

    .parc-status.ok {
        color: #15803d;
    }

    .parc-status.erro {
        color: #b91c1c;
    }

    .parc-status .btn-link {
        padding: 0 4px;
        font-weight: 600;
    }

/* Edição: resumo total / pago / saldo */
.fin-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 4px 0 0;
    color: #64748b;
    font-size: 0.85rem;
}

.fin-meta a {
    color: var(--mt-teal-dark);
    font-weight: 600;
}

.fin-saldo {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 8px;
}

    .fin-saldo > div {
        display: flex;
        flex-direction: column;
        padding: 10px 14px;
        border: 1px solid #e5ebf2;
        border-radius: 10px;
        background: #fafbfd;
    }

    .fin-saldo small {
        color: #64748b;
        font-size: 0.78rem;
        font-weight: 600;
    }

    .fin-saldo strong {
        color: #1e293b;
        font-size: 1.1rem;
        font-weight: 700;
    }

    .fin-saldo .fin-saldo__destaque {
        border-color: rgba(1, 165, 177, 0.35);
        background: rgba(1, 165, 177, 0.08);
    }

        .fin-saldo .fin-saldo__destaque strong {
            color: var(--mt-teal-dark);
            font-size: 1.3rem;
            font-weight: 800;
        }

        .fin-saldo strong.negativo {
            color: #b91c1c;
        }

.fin-aviso--cancelada {
    margin-top: 16px;
    border-color: #f5c2c7;
    background: #fdf2f2;
    color: #7f1d1d;
}

.fin-comprovante {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

    .fin-comprovante img {
        max-width: 240px;
        max-height: 160px;
        border: 1px solid #e5ebf2;
        border-radius: 8px;
    }

.fin-comprovante__nome {
    color: #64748b;
    font-size: 0.85rem;
}

/* Lançamento de baixa */
.baixa-campos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 12px;
}

    .baixa-campos .form-group {
        margin-bottom: 8px;
    }

    .baixa-campos input[type=date] {
        width: 170px;
        height: 44px;
    }

    .baixa-campos .baixa-ajuste .campo-rs {
        width: 140px;
    }

    .baixa-campos__acao .btn {
        height: 44px;
    }

        .baixa-campos__acao .btn kbd {
            margin-left: 6px;
            background: rgba(255, 255, 255, 0.25);
            font-size: 0.7rem;
            box-shadow: none;
        }

.baixa-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-bottom: 20px;
}

    .baixa-rodape .btn-link {
        padding-left: 0;
        font-weight: 600;
    }

#list-baixas .item-total {
    color: #111827;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 991px) {
    .fin-valores__campos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fin-saldo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .fin-valores__campos,
    .fin-valores__campos--datas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fin-total {
        flex-basis: 100%;
    }

    .baixa-campos > .form-group,
    .baixa-campos input[type=date],
    .baixa-campos .campo-rs,
    .baixa-campos__acao .btn {
        width: 100%;
    }
}

.fin-form .tab-pane > .fin-secao:first-child {
    padding-top: 0;
}

@media (max-width: 575px) {
    #list-baixas .baixa-col-ajuste {
        display: none;
    }

    table.parc-tabela th,
    table.parc-tabela td {
        padding-right: 6px;
        padding-left: 6px;
    }
}

/* =============================================================================
   Listagens: subtítulo e filtros em "chips"
   ============================================================================= */
.lista-subtitulo {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 0.88rem;
}

.lista-chips {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid #d9e2ee;
    border-radius: 999px;
    background: #ffffff;
}

.lista-chip {
    height: 30px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 600;
}

    .lista-chip:hover {
        color: var(--mt-teal-dark);
    }

    .lista-chip.ativo {
        background: rgba(1, 165, 177, 0.12);
        color: var(--mt-teal-dark);
    }

/* Tipo de categoria: despesa x receita */
.tipo-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.tipo-pill--pagar {
    background: #fef3e2;
    color: #9a4d06;
}

.tipo-pill--receber {
    background: rgba(1, 165, 177, 0.12);
    color: var(--mt-teal-dark);
}

/* =============================================================================
   Formas de pagamento
   ============================================================================= */
.fp-lista-nome {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .fp-lista-nome > i {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        border-radius: 8px;
        background: #f1f5f9;
        color: #475569;
        line-height: 32px;
        text-align: center;
    }

    .fp-lista-nome .produto-nome,
    .fp-lista-nome .produto-meta,
    #formas-table td > .produto-meta {
        display: block;
    }

.fp-lista-receb {
    display: block;
    color: #1e293b;
    font-size: 0.9rem;
}

.fp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
}

.fp-dica {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 0.8rem;
}

.fp-opcoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.fp-opcao {
    display: flex;
    gap: 12px;
    padding: 14px;
    border: 1px solid #d9e2ee;
    border-radius: 10px;
    background: #ffffff;
    text-align: left;
    transition: border-color 160ms ease, background-color 160ms ease;
}

    .fp-opcao > i {
        margin-top: 3px;
        color: #64748b;
        font-size: 1.05rem;
    }

    .fp-opcao strong {
        display: block;
        color: #1e293b;
        font-size: 0.92rem;
    }

    .fp-opcao span span {
        display: block;
        color: #64748b;
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .fp-opcao:hover:not(:disabled) {
        border-color: var(--mt-teal);
    }

    .fp-opcao.sel {
        border-color: var(--mt-teal);
        background: rgba(1, 165, 177, 0.08);
        box-shadow: 0 0 0 3px rgba(1, 165, 177, 0.15);
    }

        .fp-opcao.sel > i {
            color: var(--mt-teal-dark);
        }

    .fp-opcao:disabled {
        cursor: default;
        opacity: 0.7;
    }

.fp-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
    color: #334155;
    font-size: 0.92rem;
}

    .fp-linha > span,
    .fp-linha #fp-intervalo,
    .fp-linha #fp-dias-grupo {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
    }

    .fp-linha select.form-control {
        width: auto;
        min-width: 180px;
        height: 40px;
    }

    .fp-linha .fp-num {
        width: 80px;
        height: 40px;
    }

.fp-alerta {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff7e6;
    color: #7c4a03;
    font-size: 0.85rem;
}

.fp-sw {
    padding-top: 6px;
    padding-bottom: 6px;
}

    .fp-sw .custom-control-label b {
        display: block;
        color: #1e293b;
        font-size: 0.9rem;
    }

    .fp-sw .custom-control-label span {
        display: block;
        color: #64748b;
        font-size: 0.8rem;
        font-weight: 400;
    }

.app-shell .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--mt-teal);
    background-color: var(--mt-teal);
}

.app-shell .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(1, 165, 177, 0.2);
}

.fp-previa {
    position: sticky;
    top: 16px;
    margin-top: 20px;
    padding: 16px;
    border: 1px solid rgba(1, 165, 177, 0.35);
    border-radius: 12px;
    background: rgba(1, 165, 177, 0.06);
}

    .fp-previa h4 {
        margin: 0 0 10px;
        color: var(--mt-teal-dark);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    .fp-previa ul {
        margin: 0 0 12px;
        padding-left: 18px;
        color: #334155;
        font-size: 0.86rem;
    }

        .fp-previa ul li + li {
            margin-top: 4px;
        }

    .fp-previa table {
        width: 100%;
        font-size: 0.84rem;
    }

    .fp-previa td {
        padding: 4px 0;
        border-top: 1px solid #d9e2ee;
    }

@media (max-width: 991px) {
    .fp-grid {
        grid-template-columns: 1fr;
    }

    .fp-previa {
        position: static;
    }
}

@media (max-width: 575px) {
    .fp-opcoes {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   Fiscal
   ============================================================================= */
.fis-resumo {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fis-serie {
    color: #64748b;
    font-size: 0.95rem;
    font-weight: 600;
}

.fis-homolog {
    color: #9a4d06;
    font-weight: 700;
}

.fis-chave-curta {
    padding: 2px 8px;
    border: 1px solid #e5ebf2;
    border-radius: 6px;
    background: #f8fafc;
    color: #475569;
    font-family: SFMono-Regular, Consolas, monospace;
    font-size: 0.8rem;
}

    .fis-chave-curta:hover {
        border-color: var(--mt-teal);
        color: var(--mt-teal-dark);
    }

.fis-chave {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

    .fis-chave code {
        padding: 8px 12px;
        border-radius: 8px;
        background: #f1f5f9;
        color: #1e293b;
        font-size: 0.95rem;
        letter-spacing: 0.03em;
        word-break: break-all;
    }

.fis-cancelar-aviso {
    margin: 0 0 12px;
    color: #475569;
    font-size: 0.9rem;
    text-align: left;
}

.fis-cancelar-rotulo {
    display: block;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
}

.swal2-textarea.fis-justificativa {
    width: 100%;
    margin: 6px 0 0;
    font-size: 0.95rem;
}

.fis-contador {
    margin-top: 4px;
    color: #15803d;
    font-size: 0.8rem;
    text-align: right;
}

    .fis-contador.curto {
        color: #b91c1c;
    }

@media (max-width: 575px) {
    .fis-resumo {
        grid-template-columns: 1fr;
    }
}

.cfop-codigo {
    color: #0f172a;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}

.cfop-descricao {
    max-width: 420px;
    white-space: normal;
}

.cfop-alerta {
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff7e6;
    color: #7c4a03;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: help;
}

.cfop-campo-codigo {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* Perfis de tributação */
.perfil-cst {
    display: block;
    color: #1e293b;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
}

#perfis-table td > .produto-meta {
    display: block;
}

.perfil-campos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0 16px;
}

.perfil-campos--2 {
    grid-template-columns: minmax(0, 2fr) minmax(160px, 1fr);
}

.perfil-st {
    margin-top: 8px;
    padding: 14px 16px 6px;
    border: 1px dashed #d9e2ee;
    border-radius: 10px;
}

.perfil-st__titulo {
    margin-bottom: 10px;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 700;
}

.perfil-aplicar-resumo {
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(1, 165, 177, 0.08);
    color: #334155;
    font-size: 0.9rem;
}

@media (max-width: 575px) {
    .perfil-campos--2 {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   PDV — frente de caixa (Views/Venda/CadastroPDV.cshtml, js/venda/pdv.js)
   ============================================================================= */
.pdv {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 16px;
    height: calc(100vh - 50px - 44px - 32px);
    min-height: 480px;
    margin: 16px 0 60px;
}

.pdv-painel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid #d9e2ee;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Busca */
.pdv-busca {
    position: relative;
    padding: 16px 16px 8px;
}

.pdv-busca__campo {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 16px;
    border: 2px solid var(--mt-teal);
    border-radius: 12px;
    box-shadow: 0 0 0 4px rgba(1, 165, 177, 0.12);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

    .pdv-busca__campo.erro {
        border-color: #dc2626;
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);
    }

    .pdv-busca__campo > i {
        color: var(--mt-teal-dark);
        font-size: 1.25rem;
    }

    .pdv-busca__campo input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: none;
        color: #0f172a;
        font-size: 1.25rem;
        font-weight: 600;
    }

    .pdv-busca__campo kbd,
    .pdv-nf kbd {
        background: #f1f5f9;
        color: #475569;
        font-size: 0.72rem;
        box-shadow: none;
    }

.pdv-sugestoes {
    position: absolute;
    z-index: 20;
    top: 76px;
    right: 16px;
    left: 16px;
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid #d9e2ee;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.pdv-sugestao {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    color: #1e293b;
    cursor: pointer;
}

    .pdv-sugestao small {
        color: #64748b;
    }

    .pdv-sugestao.ativa,
    .pdv-sugestao:hover {
        background: rgba(1, 165, 177, 0.1);
    }

.pdv-dica {
    min-height: 26px;
    padding: 0 18px 8px;
    color: #64748b;
    font-size: 0.84rem;
}

    .pdv-dica.ok {
        color: #0f766e;
    }

    .pdv-dica.erro {
        color: #b91c1c;
        font-weight: 600;
    }

/* Itens */
.pdv-carrinho {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px;
}

    .pdv-carrinho .itens-vazio {
        margin-top: 8px;
    }

table.pdv-tabela {
    width: 100%;
    border-collapse: collapse;
}

    table.pdv-tabela th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 8px;
        border-bottom: 1px solid #e5ebf2;
        background: #ffffff;
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    table.pdv-tabela td {
        padding: 8px;
        border-bottom: 1px solid #eef2f7;
        vertical-align: middle;
    }

    table.pdv-tabela .produto-nome,
    table.pdv-tabela .produto-meta {
        display: block;
    }

    table.pdv-tabela tr.pdv-ultimo td {
        background: rgba(1, 165, 177, 0.08);
    }

.pdv-col-num {
    width: 36px;
    color: #94a3b8;
}

.pdv-col-qtd {
    width: 150px;
}

.pdv-col-acao {
    width: 44px;
    text-align: right;
}

.pdv-qtd {
    display: inline-flex;
    height: 34px;
    overflow: hidden;
    border: 1px solid #d9e2ee;
    border-radius: 8px;
    background: #ffffff;
}

    .pdv-qtd button {
        width: 30px;
        border: 0;
        background: #f4f7fb;
        color: #334155;
        font-weight: 700;
    }

        .pdv-qtd button:hover {
            background: rgba(1, 165, 177, 0.12);
            color: var(--mt-teal-dark);
        }

    .pdv-qtd input {
        width: 60px;
        border: 0;
        font-weight: 700;
        text-align: center;
        outline: none;
    }

.pdv-itens__rodape {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid #e5ebf2;
    color: #475569;
    font-size: 0.9rem;
}

    .pdv-itens__rodape .btn-link {
        padding: 0 0 0 6px;
        font-weight: 600;
    }

/* Fechamento */
.pdv-fechamento {
    overflow-y: auto;
}

.pdv-total {
    padding: 18px 20px;
    border-bottom: 1px solid #e5ebf2;
}

    .pdv-total small {
        color: #64748b;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    .pdv-total strong {
        display: block;
        color: var(--mt-teal-dark);
        font-size: 2.6rem;
        font-weight: 800;
        line-height: 1.1;
        font-variant-numeric: tabular-nums;
    }

    .pdv-total span {
        color: #64748b;
        font-size: 0.88rem;
    }

.pdv-bloco {
    padding: 14px 20px;
    border-bottom: 1px solid #eef2f7;
}

    .pdv-bloco h6 {
        margin-bottom: 8px;
        color: #334155;
        font-size: 0.82rem;
        font-weight: 700;
    }

.pdv-opcional {
    color: #94a3b8;
    font-weight: 500;
}

.pdv-cliente {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 6px 6px 12px;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 0.9rem;
}

    .pdv-cliente small {
        color: #64748b;
    }

.pdv-formas {
    margin-bottom: 10px;
}

.pdv-pag-valor {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

    .pdv-pag-valor .campo-rs--grande {
        flex: 1;
        width: auto;
    }

    .pdv-pag-valor .btn {
        height: 44px;
    }

/* Parcelas do pagamento no PDV: só aparece em forma que parcela */
.pdv-parcelas {
    display: flex;
    flex-direction: column;
    margin: 0;
    width: 76px;
    font-size: 0.7rem;
    color: #64748b;
}

    .pdv-parcelas input {
        height: 44px;
        text-align: center;
        font-size: 1.1rem;
        font-weight: 600;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
    }

.pdv-pagamento {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-top: 1px dashed #e5ebf2;
    font-size: 0.92rem;
}

    .pdv-pagamento:first-child {
        margin-top: 10px;
    }

    .pdv-pagamento small {
        color: #64748b;
    }

    .pdv-pagamento .item-remover {
        width: 28px;
        height: 28px;
    }

.pdv-troco {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #ecfdf5;
    color: #15803d;
    font-size: 1.15rem;
    font-weight: 800;
}

.pdv-nf {
    color: #475569;
    font-size: 0.88rem;
}

.pdv-finalizar {
    margin-top: auto;
    padding: 16px 20px;
}

    .pdv-finalizar .btn {
        width: 100%;
        height: 56px;
        font-size: 1.15rem;
    }

        .pdv-finalizar .btn kbd {
            margin-left: 6px;
            background: rgba(255, 255, 255, 0.25);
            box-shadow: none;
        }

/* Barra de atalhos */
.pdv-atalhos {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px 14px;
    min-height: 44px;
    padding: 6px 20px;
    border-top: 1px solid #d9e2ee;
    background: #ffffff;
    color: #475569;
    font-size: 0.8rem;
}

    .pdv-atalhos kbd {
        margin-right: 4px;
        background: #0f172a;
        box-shadow: none;
    }

.pdv-atalhos__lista {
    display: flex;
    flex: 1;
    gap: 4px 14px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

    .pdv-atalhos__lista > span { flex-shrink: 0; }

.pdv-atalhos__operador,
.pdv-atalhos__tela,
.pdv-atalhos__caixa {
    flex-shrink: 0;
    white-space: nowrap;
}

.pdv-atalhos__operador { color: #64748b; }

/* Em tela menor o operador sai da barra (o turno já diz quem abriu o caixa) */
@media (max-width: 1500px) {
    .pdv-atalhos__operador { display: none; }
}

/* Janelas do PDV */
.pdv-res-troco {
    margin: 0 auto 12px;
    padding: 12px;
    border-radius: 12px;
    background: #ecfdf5;
    color: #15803d;
}

    .pdv-res-troco small {
        display: block;
        font-weight: 700;
        text-transform: uppercase;
    }

    .pdv-res-troco strong {
        font-size: 2.2rem;
        font-weight: 800;
    }

.pdv-res-texto {
    margin: 0 0 8px;
    color: #334155;
    font-size: 0.95rem;
}

.pdv-desc-tipo {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.pdv-desc-info {
    color: #64748b;
    font-size: 0.85rem;
}

.pdv-ajuda {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    color: #334155;
    font-size: 0.9rem;
    text-align: left;
}

/* Publicidade no carrinho vazio (~/js/venda/pdv-vitrine.js) */
.pdv-vitrine {
    position: relative;
    flex: 1;
    min-height: 160px;
    margin: 4px 0 16px;
    overflow: hidden;
    border-radius: 12px;
    background: #f1f5f9;
}

    .pdv-vitrine[hidden] { display: none; }

    .pdv-vitrine img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0;
        transition: opacity 700ms ease;
    }

        .pdv-vitrine img.ativa { opacity: 1; }

.pdv-carrinho--vitrine {
    display: flex;
    flex-direction: column;
}

    .pdv-carrinho--vitrine .itens-vazio {
        padding-top: 12px;
        padding-bottom: 12px;
    }

/* Consulta de preço (F5) */
.pdv-consulta {
    max-height: 320px;
    overflow-y: auto;
    text-align: left;
}

.pdv-consulta__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid #eef2f7;
}

    .pdv-consulta__item b,
    .pdv-consulta__item small { display: block; }
    .pdv-consulta__item small { color: #64748b; font-size: 0.8rem; }
    .pdv-consulta__item strong { color: var(--mt-teal-dark); font-size: 1.2rem; white-space: nowrap; }

.pdv-atalhos__tela {
    padding: 2px 10px;
    border: 1px solid #d9e2ee;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 0.8rem;
}

    .pdv-atalhos__tela:hover { border-color: var(--mt-teal); color: var(--mt-teal-dark); }

@media (max-width: 1100px) {
    .pdv {
        grid-template-columns: minmax(0, 1fr) 340px;
    }
}

@media (max-width: 900px) {
    .pdv {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }

    .pdv-carrinho {
        max-height: 50vh;
    }

    .pdv-atalhos {
        display: none;
    }

    .pdv-col-num,
    table.pdv-tabela td:nth-child(4),
    table.pdv-tabela th:nth-child(4) {
        display: none;
    }
}

/* Vendas do PDV */
.fin-card--info {
    cursor: default;
}

.vpdv-formas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid #e5ebf2;
    border-radius: 12px;
    background: #ffffff;
}

.vpdv-formas__titulo {
    margin-right: 8px;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 700;
}

#vpdv-formas-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vpdv-forma {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #f1f5f9;
}

    .vpdv-forma small {
        color: #64748b;
        font-size: 0.8rem;
    }

    .vpdv-forma b {
        color: #0f172a;
        font-size: 0.92rem;
    }

#vendas-pdv-table td > .produto-nome,
#vendas-pdv-table td > .produto-meta {
    display: block;
}

.vpdv-riscado {
    color: #94a3b8;
    text-decoration: line-through;
}

/* ---- Tipos de operação (Views/TipoOperacao) ---------------------------------------------- */
.to-pdv {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid rgba(1, 165, 177, 0.35);
    border-radius: 12px;
    background: rgba(1, 165, 177, 0.06);
    color: #334155;
    font-size: 0.9rem;
}

    .to-pdv > i {
        margin-top: 3px;
        color: var(--mt-teal-dark);
    }

    .to-pdv small {
        display: block;
        margin-top: 2px;
        color: #64748b;
    }

.to-pdv--alerta {
    border-color: #f5c46b;
    background: #fff7e6;
    color: #7c4a03;
}

    .to-pdv--alerta > i {
        color: #b45309;
    }

#tipos-table td > .produto-nome,
#tipos-table td > .produto-meta {
    display: block;
}

#tipos-table .produto-nome .status-pill {
    margin-left: 6px;
    vertical-align: 1px;
}

.to-efeitos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.to-efeito {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef2f7;
    color: #334155;
    font-size: 0.8rem;
    white-space: nowrap;
}

    .to-efeito > i {
        color: #64748b;
        font-size: 0.75rem;
    }

.to-efeito--nota {
    background: rgba(1, 165, 177, 0.1);
    color: var(--mt-teal-dark);
}

    .to-efeito--nota > i {
        color: var(--mt-teal-dark);
    }

.to-efeito--off {
    background: transparent;
    border: 1px dashed #cbd5e1;
    color: #64748b;
}

/* ---- Perfis e acessos (Views/PerfilUsuario) e "Sem permissão" ------------------------------ */
.perfis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.perfil-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}

    .perfil-card header {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: flex-start;
    }

    .perfil-card h3 {
        margin: 0 0 4px;
        color: #1e293b;
        font-size: 1.02rem;
        font-weight: 700;
    }

        .perfil-card h3 .status-pill {
            margin-left: 4px;
            vertical-align: 2px;
        }

    .perfil-card footer {
        display: flex;
        gap: 8px;
        align-items: baseline;
        margin-top: auto;
        padding-top: 10px;
        border-top: 1px solid #f1f5f9;
        color: #475569;
        font-size: 0.84rem;
    }

        .perfil-card footer > i {
            color: #94a3b8;
        }

.perfil-nivel {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: #64748b;
    font-size: 0.82rem;
}

.perfil-nivel--total {
    color: var(--mt-teal-dark);
    font-weight: 600;
}

.perfil-areas {
    margin: 0;
    color: #334155;
    font-size: 0.86rem;
    line-height: 1.5;
}

.perfil-modelos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 12px;
    color: #64748b;
    font-size: 0.84rem;
}

    .perfil-modelos > span {
        margin-right: 4px;
    }

.perfil-tabela {
    width: 100%;
    border-collapse: collapse;
}

    .perfil-tabela thead th {
        padding: 8px 10px;
        border-bottom: 1px solid #e2e8f0;
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .perfil-tabela td {
        padding: 9px 10px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

        .perfil-tabela td .produto-nome,
        .perfil-tabela td .produto-meta {
            display: block;
        }

    .perfil-tabela input[type=checkbox] {
        width: 18px;
        height: 18px;
        accent-color: var(--mt-teal);
        cursor: pointer;
    }

.perfil-grupo th {
    padding: 14px 10px 6px;
    color: var(--mt-teal-dark);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.perfil-linha--on td:first-child {
    box-shadow: inset 3px 0 0 var(--mt-teal);
}

@media (max-width: 575px) {
    .perfil-tabela td .produto-meta {
        display: none;
    }

    .perfil-tabela thead th {
        font-size: 0.64rem;
        letter-spacing: 0;
    }
}

.sem-permissao {
    max-width: 560px;
    margin: 40px auto;
    padding: 32px;
    text-align: center;
}

    .sem-permissao > i {
        color: #94a3b8;
        font-size: 2.2rem;
    }

    .sem-permissao h2 {
        margin: 12px 0 8px;
        color: #1e293b;
        font-size: 1.3rem;
    }

    .sem-permissao p {
        color: #475569;
    }

.sem-permissao__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 18px;
}

.acesso__vazio {
    padding: 24px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    color: #475569;
    text-align: center;
}

/* ---- Parâmetros de nota fiscal (Views/ParametrosNFe) --------------------------------------- */
.pn-prontidao {
    margin-bottom: 18px;
    padding: 14px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}

    .pn-prontidao h3 {
        margin: 0 0 8px;
        color: #334155;
        font-size: 0.95rem;
        font-weight: 600;
    }

    .pn-prontidao ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .pn-prontidao li {
        display: flex;
        gap: 10px;
        align-items: baseline;
        padding: 7px 0;
        border-top: 1px solid #f1f5f9;
        color: #334155;
        font-size: 0.88rem;
    }

        .pn-prontidao li > span {
            flex: 1;
        }

        .pn-prontidao li small {
            color: #64748b;
        }

        .pn-prontidao li.ok > i { color: #16a34a; }
        .pn-prontidao li.pendente > i { color: #dc2626; }
        .pn-prontidao li.alerta > i { color: #d97706; }
        .pn-prontidao li.info > i { color: #0284c7; }

        .pn-prontidao li > a {
            white-space: nowrap;
            font-weight: 600;
            color: var(--mt-teal-dark);
        }

.perfil-card .to-efeito + .status-pill,
.perfil-card .status-pill + .status-pill {
    margin-left: 4px;
}

.pn-numeros {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0;
}

    .pn-numeros dt {
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    .pn-numeros dd {
        margin: 0;
        color: #1e293b;
        font-size: 1rem;
        font-weight: 700;
    }

.pn-alerta {
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fdecec;
    color: #991b1b;
    font-size: 0.82rem;
}

.fp-linha .pn-num {
    width: 140px;
    height: 40px;
}

.pn-avancado {
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
}

    .pn-avancado > summary {
        color: #334155;
        font-weight: 600;
        cursor: pointer;
    }

        .pn-avancado > summary .fp-dica {
            margin-left: 8px;
            font-weight: 400;
        }

.pn-versoes-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    color: #334155;
    font-size: 0.88rem;
}

.pn-versoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px 14px;
    margin-top: 6px;
}

    .pn-versoes label {
        display: flex;
        gap: 8px;
        justify-content: space-between;
        align-items: center;
        margin: 0;
        color: #475569;
        font-size: 0.8rem;
    }

    .pn-versoes select {
        width: 84px;
        flex: none;
    }

.perfil-modelos .lista-chip {
    padding: 4px 12px;
    border: 1px solid #d9e2ee;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 0.82rem;
}

    .perfil-modelos .lista-chip:hover:not(:disabled) {
        border-color: var(--mt-teal);
        color: var(--mt-teal-dark);
    }

.pn-avancado .form-row {
    margin-right: 0;
    margin-left: 0;
}

/* ---- Pedido (venda e compra): formulário com abas, itens e pagamento ----------------------
   Veio de Views/Venda/Cadastro.cshtml para ser usado também em Views/Compra/Cadastro.cshtml */

        
        #cliente-table tbody tr {
            cursor: pointer;
        }


       /* .page-wrapper > div.container-fluid {
            height: 100%;
            min-height: 88vh;
     
        }*/

        /*.container {
            min-height: 47vh;
        }*/

        form[data-pedido] #nav-tabContent {
            min-height: 240px;
        }

        /* Campos de seleção (cliente, pagamento) parecem clicáveis, não desabilitados */
        #cliente-label,
        #fornecedor-label,
        #pagamento-label {
            background: #ffffff;
        }

        /* Resumo de valores: faixa própria, "Total final" em destaque */
        .pedido-totais {
            margin: 8px -28px 0 !important;
            padding: 16px 28px 0;
            border-top: 1px solid #eef2f7;
        }

            .pedido-totais label {
                color: #64748b !important;
                font-size: 0.8rem !important;
            }

        #total-final {
            color: var(--mt-teal-dark);
            font-size: 1.05rem;
            font-weight: 800;
        }

        /* ---- Aba Itens -------------------------------------------------- */
        .busca-item {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
        }

        .busca-item__campo {
            position: relative;
            flex: 1 1 auto;
        }

            .busca-item__campo > i {
                position: absolute;
                top: 15px;
                left: 14px;
                color: #64748b;
                pointer-events: none;
            }

            .busca-item__campo input {
                width: 100%;
                height: 44px;
                padding: 0 72px 0 40px;
                border: 1px solid #d9e2ee;
                border-radius: 10px;
                font-size: 0.95rem;
                outline: none;
                transition: border-color 160ms ease, box-shadow 160ms ease;
            }

                .busca-item__campo input:focus {
                    border-color: var(--mt-teal);
                    box-shadow: 0 0 0 3px rgba(1, 165, 177, 0.15);
                }

            .busca-item__campo kbd {
                position: absolute;
                top: 11px;
                right: 10px;
                border: 1px solid #d9e2ee;
                background: #f1f5f9;
                color: #64748b;
                font-size: 0.7rem;
                box-shadow: none;
            }

        .busca-item .btn {
            height: 44px;
        }

        .busca-item__sugestoes {
            position: absolute;
            top: 50px;
            right: 0;
            left: 0;
            z-index: 20;
            max-height: 360px;
            padding: 6px;
            overflow-y: auto;
            border: 1px solid #e5ebf2;
            border-radius: 12px;
            background: #ffffff;
            box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
        }

        .sugestao {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 10px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.9rem;
        }

            .sugestao.ativa {
                background: rgba(1, 165, 177, 0.1);
            }

        .sugestao__texto {
            flex: 1 1 auto;
            min-width: 0;
        }

        .sugestao__preco {
            width: 100px;
            color: #1e293b;
            font-weight: 600;
            text-align: right;
        }

        .sugestao-vazia {
            padding: 10px;
            color: #64748b;
            font-size: 0.9rem;
        }

        table.itens-venda {
            width: 100%;
            border-collapse: collapse;
        }

            table.itens-venda th {
                padding: 8px 10px;
                border-bottom: 1px solid #d9e2ee;
                color: #64748b;
                font-size: 0.72rem;
                font-weight: 700;
                letter-spacing: 0.06em;
                text-transform: uppercase;
            }

            table.itens-venda td {
                padding: 10px;
                border-top: 1px solid #eef2f7;
                vertical-align: middle;
                font-size: 0.9rem;
            }

        .itens-venda__qtd { width: 132px; }
        .itens-venda__valor { width: 150px; }
        .itens-venda__total { width: 120px; }
        .itens-venda__acao { width: 48px; }

        tr.item-destaque > td {
            animation: item-destaque 1.6s ease-out;
        }

        @keyframes item-destaque {
            from { background: rgba(1, 165, 177, 0.18); }
            to { background: transparent; }
        }

        tr.item-extra > td {
            padding-top: 0;
            border-top: 0;
            background: #fafbfd;
        }

        .item-extra__campos {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
            padding: 8px 0 4px;
        }

            .item-extra__campos label {
                margin: 0;
                color: #64748b;
                font-size: 0.78rem;
                font-weight: 600;
            }

        .item-mais {
            margin-top: 2px;
            padding: 0;
            border: 0;
            background: none;
            color: var(--mt-teal-dark);
            font-size: 0.78rem;
            font-weight: 600;
        }

            .item-mais:hover {
                text-decoration: underline;
            }

        form[data-pedido] .qtd {
            display: flex;
            height: 36px;
            overflow: hidden;
            border: 1px solid #d9e2ee;
            border-radius: 8px;
            background: #ffffff;
        }

            form[data-pedido] .qtd button {
                width: 32px;
                flex: 0 0 auto;
                border: 0;
                background: #f4f7fb;
                color: #334155;
                font-weight: 700;
            }

                form[data-pedido] .qtd button:hover {
                    background: rgba(1, 165, 177, 0.12);
                    color: var(--mt-teal-dark);
                }

            form[data-pedido] .qtd input {
                width: 100%;
                min-width: 0;
                border: 0;
                font-weight: 600;
                text-align: center;
                outline: none;
            }

            form[data-pedido] .qtd:focus-within {
                border-color: var(--mt-teal);
                box-shadow: 0 0 0 3px rgba(1, 165, 177, 0.15);
            }

        .item-total {
            color: #111827;
            font-weight: 700;
            white-space: nowrap;
        }

        .itens-resumo {
            padding: 10px;
            color: #64748b;
            font-size: 0.85rem;
        }

        /* Resumo de valores como texto: sem cara de campo editável */
        .pedido-totais .input-group-text {
            min-width: 0;
            padding: 0 4px 0 0;
            border: 0 !important;
            background: transparent !important;
            color: #64748b;
            font-weight: 700;
        }

        .pedido-totais .input-group-prepend {
            border: 0 !important;
        }

        .pedido-totais input.form-control {
            padding: 0;
            border: 0 !important;
            background: transparent !important;
            color: #1e293b;
            font-size: 1.05rem;
            font-weight: 700;
            box-shadow: none !important;
        }

        .pedido-totais #total-final {
            color: var(--mt-teal-dark);
            font-size: 1.4rem;
            font-weight: 800;
        }

        .pedido-totais #total-diferenca.valor-falta {
            color: #b91c1c;
        }

        .pedido-totais #total-diferenca.valor-troco {
            color: #15803d;
        }

        @media (max-width: 767px) {
            table.itens-venda thead {
                display: none;
            }

            table.itens-venda,
            table.itens-venda tbody,
            table.itens-venda tr,
            table.itens-venda td {
                display: block;
                width: 100%;
            }

            table.itens-venda tr.item-linha {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px;
                padding: 12px 0;
                border-top: 1px solid #eef2f7;
            }

            table.itens-venda td {
                padding: 0;
                border: 0;
            }

                table.itens-venda td:first-child {
                    grid-column: 1 / -1;
                }

            .item-extra__campos {
                grid-template-columns: 1fr 1fr;
            }

            .busca-item {
                flex-direction: column;
            }
        }

        #list-pagamentos {
            margin-top: 20px;
        }

        #pag-vazio {
            margin-top: 20px;
        }

        .pag-col-parcela { width: 110px; }
        .pag-col-venc { width: 190px; }
        .pag-col-valor { width: 140px; }

        .pag-venc {
            max-width: 170px;
            height: 34px !important;
        }

        .form-cabecalho h2 .status-pill {
            margin-left: 8px;
            font-size: 0.8rem;
            vertical-align: middle;
        }

        #produto-group,
        #pagamento-group,
        #cliente-group,
        #fornecedor-group {
            cursor: pointer;
        }

            #produto-group input,
            #pagamento-group input,
            #cliente-group input,
            #fornecedor-group input {
                cursor: pointer;
            }

            #produto-group:hover,
            #pagamento-group:hover,
            #cliente-group:hover,
            #fornecedor-group:hover {
                opacity: 0.8;
            }



        #list-pagamentos tr th,
        #list-pagamentos tr td {
            height: 47px;
            /* background-color: #e4f7da !important;*/
        }


    

/* ---- Compras ------------------------------------------------------------------------------ */
.compras-fornecedores ol {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
}

    .compras-fornecedores ol li {
        display: flex;
        gap: 8px;
        justify-content: space-between;
        padding: 1px 0;
        color: #334155;
    }

        .compras-fornecedores ol li span {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

.pag-primeiro-venc {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin: 0;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 600;
}

    .pag-primeiro-venc input {
        width: 160px;
        height: 44px;
    }

/* Parcelas e intervalo escolhidos no lançamento (venda e compra) */
.pag-parcelamento {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

    .pag-primeiro-venc.pag-qtd input {
        width: 84px;
        text-align: center;
    }

.cp-custo {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-size: 0.9rem;
}

.cp-custo-escolha {
    max-width: 360px;
    margin: 4px auto 0;
}

#list-pagamentos .campo-rs {
    max-width: 150px;
    margin-left: auto;
}

/* ---- Saúde financeira (Views/SaudeFinanceira) --------------------------------------------- */
/* Par validado (CVD e contraste) para entradas × saídas */
#saude, .sf-dica {
    --sf-entrada: #0097a3;
    --sf-saida: #eb6834;
}

.sf-controles {
    display: grid;
    grid-template-columns: auto 180px;
    gap: 2px 10px;
    align-items: center;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 600;
}

    .sf-controles small {
        grid-column: 1 / -1;
        font-weight: 400;
    }

.sf-carregando {
    padding: 40px;
    color: #64748b;
    text-align: center;
}

.sf-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.sf-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    color: #475569;
    text-decoration: none !important;
}

a.sf-tile:hover {
    border-color: var(--mt-teal);
}

    .sf-tile small {
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .sf-tile strong {
        color: #0f172a;
        font-size: 1.45rem;
        font-weight: 800;
        line-height: 1.25;
    }

    .sf-tile span {
        font-size: 0.8rem;
    }

.sf-tile--alerta span { color: #b45309; }
.sf-tile--ok strong { color: #15803d; }
.sf-tile--ruim strong { color: #b91c1c; }

.sf-alertas {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.sf-alerta {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.88rem;
}

    .sf-alerta > span { flex: 1; }
    .sf-alerta > a { font-weight: 600; white-space: nowrap; }

.sf-alerta--ruim { background: #fdecec; color: #991b1b; }
.sf-alerta--alerta { background: #fff7e6; color: #7c4a03; }
.sf-alerta--info { background: #eef6ff; color: #1e40af; }
.sf-alerta--ok { background: #e7f6ec; color: #166534; }

.sf-cartao {
    margin-bottom: 14px;
    padding: 16px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}

    .sf-cartao > header {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
        justify-content: space-between;
        margin-bottom: 8px;
    }

    .sf-cartao h3 {
        margin: 0;
        color: #0f172a;
        font-size: 1rem;
        font-weight: 700;
    }

    .sf-cartao header p {
        margin: 2px 0 0;
        color: #64748b;
        font-size: 0.8rem;
    }

.sf-subtitulo {
    margin: 12px 0 0;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 600;
}

.sf-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    color: #334155;
    font-size: 0.8rem;
}

    .sf-legenda span {
        display: inline-flex;
        gap: 6px;
        align-items: center;
    }

.sf-cor {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.sf-cor--entrada, .sf-barra--entrada { background: var(--sf-entrada); fill: var(--sf-entrada); }
.sf-cor--saida, .sf-barra--saida { background: var(--sf-saida); fill: var(--sf-saida); }

.sf-grafico {
    width: 100%;
    min-height: 260px;
}

.sf-grafico--linha {
    min-height: 170px;
}

.sf-svg {
    display: block;
    overflow: visible;
}

    .sf-svg .sf-grade { stroke: #eef2f7; stroke-width: 1; }
    .sf-svg .sf-zero { stroke: #94a3b8; stroke-width: 1; }
    .sf-svg .sf-eixo { fill: #64748b; font-size: 11px; }
    .sf-svg .sf-rotulo { fill: #0f172a; font-size: 12px; font-weight: 700; }
    .sf-svg .sf-alvo { fill: transparent; cursor: default; }
    .sf-svg .sf-alvo:hover { fill: rgba(15, 23, 42, 0.04); }
    .sf-svg .sf-linha { fill: none; stroke: #334155; stroke-width: 2; }
    .sf-svg .sf-ponto { fill: #334155; stroke: #ffffff; stroke-width: 2; }
    .sf-svg .sf-ponto--negativo { fill: #b91c1c; }

.sf-dica {
    position: fixed;
    z-index: 2000;
    padding: 8px 10px;
    border-radius: 8px;
    background: #0f172a;
    color: #ffffff;
    font-size: 0.8rem;
    line-height: 1.45;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
}

.sf-tabela {
    margin-top: 10px;
    font-size: 0.85rem;
}

    .sf-tabela summary {
        color: var(--mt-teal-dark);
        font-weight: 600;
        cursor: pointer;
    }

.sf-duas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sf-faixas {
    display: grid;
    gap: 14px;
}

    .sf-faixas h4 {
        margin: 0 0 6px;
        color: #334155;
        font-size: 0.85rem;
        font-weight: 700;
    }

.sf-faixa {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 130px;
    gap: 10px;
    align-items: center;
    padding: 4px 0;
    font-size: 0.82rem;
}

.sf-faixa__nome { color: #475569; }

.sf-faixa__barra {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #f1f5f9;
}

    .sf-faixa__barra i {
        display: block;
        height: 100%;
        border-radius: 999px;
    }

.sf-faixa--avencer .sf-faixa__barra i { opacity: 0.45; }

.sf-faixa__valor {
    color: #0f172a;
    font-weight: 600;
    text-align: right;
}

    .sf-faixa__valor small {
        display: block;
        color: #64748b;
        font-weight: 400;
    }

.sf-lista td .produto-nome,
.sf-lista td .produto-meta {
    display: block;
}

.sf-lista .sf-vencida td { color: #991b1b; }

@media (max-width: 991px) {
    .sf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf-duas { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .sf-tiles { grid-template-columns: 1fr; }
    .sf-controles { grid-template-columns: 1fr; }
    .sf-faixa { grid-template-columns: 90px minmax(0, 1fr) 110px; }
}

.sf-vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    border: 1px dashed #e2e8f0;
    border-radius: 10px;
    color: #64748b;
    font-size: 0.88rem;
}

.sf-alerta > a { color: inherit; text-decoration: underline; }

/* ---- Relatórios gerenciais (Views/Relatorios) --------------------------------------------- */
.rl-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
    color: #475569;
    font-size: 0.85rem;
}

    .rl-filtros .form-control {
        width: auto;
        height: 36px;
    }

.rl-tabela {
    margin: 0;
    font-size: 0.85rem;
}

    /* style.css fixa 32px em toda célula de .table: com nome + detalhe em duas linhas vira um vão */
    .rl-tabela > tbody > tr > td { line-height: 1.4; }

    .rl-tabela thead th {
        border-top: 0;
        color: #64748b;
        font-size: 0.72rem;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .rl-tabela td .produto-nome,
    .rl-tabela td .produto-meta {
        display: block;
    }

    .rl-tabela .rl-grupo th {
        padding-top: 14px;
        border-top: 0;
        color: var(--mt-teal-dark);
        font-size: 0.75rem;
        text-transform: uppercase;
    }

    .rl-tabela .rl-total td {
        background: #f8fafc;
        font-weight: 600;
    }

    .rl-tabela .rl-resultado td {
        border-top: 2px solid #cbd5e1;
        background: #f1f5f9;
        font-weight: 700;
    }

.rl-neg { color: #b91c1c; }
.rl-pos { color: #15803d; }
.rl-atencao { color: #b45309; }

.rl-classe {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 800;
}

.rl-classe--A { background: #e7f6ec; color: #15803d; }
.rl-classe--B { background: #eef6ff; color: #1e40af; }
.rl-classe--C { background: #f1f5f9; color: #475569; }

/* Saldo em conta salvo (cabeçalho do painel Saúde financeira) */
.sf-saldo {
    max-width: 460px;
}

.sf-saldo__atual {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0 8px;
    align-items: center;
    justify-content: end;
    text-align: right;
}

    .sf-saldo__atual small {
        grid-column: 1 / -1;
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .sf-saldo__atual strong {
        color: #0f172a;
        font-size: 1.35rem;
        font-weight: 800;
    }

    .sf-saldo__atual .fp-dica {
        grid-column: 1 / -1;
        margin: 0;
    }

.sf-saldo__form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    align-items: center;
    justify-content: flex-end;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 600;
}

    .sf-saldo__form label { margin: 0; }
    .sf-saldo__form .campo-rs { width: 170px; }

    .sf-saldo__form small {
        flex-basis: 100%;
        font-weight: 400;
        text-align: right;
    }

@media (max-width: 767px) {
    .sf-saldo__atual { justify-content: start; text-align: left; }
    .sf-saldo__form { justify-content: flex-start; }
    .sf-saldo__form small { text-align: left; }
}

.sf-saldo__atual strong.rl-neg { color: #b91c1c; }

/* =============================================================================
   Usuários (Views/Usuarios)
   ============================================================================= */
.us-topo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.us-uso {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: center;
    color: #475569;
    font-size: 0.86rem;
}

    .us-uso b { color: #1e293b; }
    .us-uso small { flex-basis: 100%; color: #7c4a03; }

.us-uso__barra {
    width: 140px;
    height: 6px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

    .us-uso__barra i {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--mt-teal);
    }

.us-uso--cheio .us-uso__barra i { background: #d97706; }

.us-busca {
    max-width: 320px;
    height: 36px;
}

.us-cartao { padding: 4px 6px; }

.us-tabela > tbody > tr > td { vertical-align: middle; }

.us-quem {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 220px;
}

    .us-tabela .produto-nome,
    .us-tabela .produto-meta { display: block; }

    .us-tabela a.produto-nome { display: inline; color: #1e293b; }
    .us-tabela a.produto-nome:hover { color: var(--mt-teal-dark); }
    .us-tabela .us-nome .status-pill { margin-left: 4px; }

.us-avatar {
    display: inline-flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(1, 165, 177, 0.12);
    color: var(--mt-teal-dark);
    font-weight: 700;
}

.us-inativo td { color: #94a3b8; }
.us-inativo .us-avatar { background: #f1f5f9; color: #94a3b8; }
.us-inativo a.produto-nome { color: #64748b; }

.us-sem-resultado { margin: 8px; }

/* Cadastro */
.fp-opcional {
    margin-left: 4px;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 400;
}

.us-grupo {
    margin: 4px 0 8px;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.us-empresas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}

.fin-form .us-empresa {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    padding: 12px;
    border: 1px solid #d9e2ee;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;
}

    .us-empresa input { margin-top: 4px; accent-color: var(--mt-teal); }
    .us-empresa strong { display: block; color: #1e293b; font-size: 0.9rem; }
    .us-empresa small { display: block; color: #64748b; font-size: 0.78rem; font-weight: 400; }
    .us-empresa:hover { border-color: var(--mt-teal); }

    .us-empresa.sel {
        border-color: var(--mt-teal);
        background: rgba(1, 165, 177, 0.06);
    }

.us-perfil-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

    .us-perfil-linha select { max-width: 360px; }
    .us-perfil-linha .btn-link { color: var(--mt-teal-dark); }

.us-perfil-resumo {
    margin-top: 10px;
    color: #334155;
    font-size: 0.86rem;
    line-height: 1.5;
}

    .us-perfil-resumo:empty { display: none; }
    .us-perfil-resumo > i { color: var(--mt-teal-dark); }

.us-senha { position: relative; }

    .us-senha .form-control { padding-right: 44px; }

    .us-senha .btn {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        color: #64748b;
    }

.us-senha-gerada {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #1e293b;
    letter-spacing: 0.04em;
    user-select: all;
}

@media (max-width: 767px) {
    .us-busca { max-width: none; }
}

/* =============================================================================
   Assinatura (Views/Assinatura/Index)
   ============================================================================= */
.as-pagina .sf-alertas:empty { display: none; }
.as-pagina .sf-alerta form { display: inline; }

.as-topo {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 14px;
}

    .as-topo > .sf-cartao { margin-bottom: 14px; }

.as-plano__nome {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

    .as-plano__nome strong {
        color: #1e293b;
        font-size: 1.45rem;
        font-weight: 700;
        line-height: 1.2;
    }

.as-texto {
    margin: 0 0 12px;
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.5;
}

.as-limites {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
}

.as-limite {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    align-items: baseline;
    color: #475569;
    font-size: 0.86rem;
}

    .as-limite b { color: #1e293b; font-size: 0.95rem; }
    .as-limite b small { color: #64748b; font-size: 0.8rem; font-weight: 400; }
    .as-limite .as-barra { grid-column: 1 / -1; }

.as-barra {
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

    .as-barra i {
        display: block;
        height: 100%;
        min-width: 2px;
        border-radius: inherit;
        background: var(--mt-teal);
    }

.as-barra--alerta i { background: #d97706; }
.as-barra--cheia i { background: #dc2626; }

.as-dados {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
    font-size: 0.84rem;
}

    .as-dados dt { color: #64748b; font-weight: 400; }
    .as-dados dd { margin: 0; color: #1e293b; font-weight: 600; }

.as-cancelar { margin-top: 12px; }

.as-nota { margin-bottom: 14px; }

.as-nota__linha {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    color: #475569;
    font-size: 0.88rem;
}

    .as-nota__linha b { color: #1e293b; }
    .as-nota__linha span { white-space: nowrap; }
    .as-nota small { display: block; margin-top: 4px; }

.as-aviso { color: #b45309; }

.as-passos > summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
}

    .as-passos > summary::-webkit-details-marker { display: none; }
    .as-passos > summary h3 { margin: 0; }
    .as-passos > summary p { margin: 2px 0 0; color: #64748b; font-size: 0.82rem; }

.as-passos__conta {
    color: #b45309;
    font-size: 0.85rem;
    font-weight: 600;
}

    .as-passos__conta.ok { color: #15803d; }

    .as-passos__conta::after {
        content: "\f078";
        margin-left: 8px;
        color: #94a3b8;
        font-family: "Font Awesome 5 Free";
        font-size: 0.7rem;
        font-weight: 900;
    }

.as-passos[open] .as-passos__conta::after { content: "\f077"; }

.as-passos__lista {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

    .as-passos__lista li {
        display: flex;
        gap: 12px;
        align-items: center;
        padding: 10px 0;
        border-top: 1px solid #f1f5f9;
    }

        .as-passos__lista li > i { flex: 0 0 auto; font-size: 1.05rem; }
        .as-passos__lista li > div { flex: 1; }
        .as-passos__lista li b { display: block; color: #1e293b; font-size: 0.9rem; }
        .as-passos__lista li span { display: block; color: #64748b; font-size: 0.82rem; }
        .as-passos__lista li.ok > i { color: #16a34a; }
        .as-passos__lista li.pendente > i { color: #cbd5e1; }

.as-titulo {
    margin: 6px 0 10px;
    color: #1e293b;
    font-size: 1.05rem;
    font-weight: 700;
}

.as-planos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.as-plano-card {
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}

    .as-plano-card.atual {
        border-color: var(--mt-teal);
        box-shadow: 0 0 0 3px rgba(1, 165, 177, 0.15);
    }

    .as-plano-card header {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
        justify-content: space-between;
    }

    .as-plano-card h4 {
        margin: 0;
        color: #1e293b;
        font-size: 1rem;
        font-weight: 700;
    }

    .as-plano-card ul {
        display: grid;
        gap: 6px;
        margin: 10px 0 14px;
        padding: 0;
        list-style: none;
        color: #334155;
        font-size: 0.84rem;
    }

    .as-plano-card li {
        display: flex;
        gap: 8px;
        align-items: baseline;
    }

        .as-plano-card li > i { width: 14px; color: var(--mt-teal-dark); text-align: center; }
        .as-plano-card li.nao { color: #94a3b8; }
        .as-plano-card li.nao > i { color: #cbd5e1; }

    .as-plano-card footer { margin-top: auto; }

.as-preco {
    margin-top: 8px;
    white-space: nowrap;
}

    .as-preco strong {
        color: #1e293b;
        font-size: 1.5rem;
        font-weight: 700;
    }

    .as-preco small { margin-left: 2px; color: #64748b; font-size: 0.8rem; }

.as-preco__anual {
    min-height: 1.2em;
    margin: 0;
    color: #64748b;
    font-size: 0.8rem;
}

@media (max-width: 991px) {
    .as-topo { grid-template-columns: 1fr; gap: 0; }
}

/* =============================================================================
   Plataforma (Views/Plataforma)
   ============================================================================= */
.pl-pagina .sf-alertas:empty { display: none; }

.pl-busca .form-control {
    width: 240px;
    height: 38px;
}

.pl-semdono { display: block; }

    .pl-semdono > summary {
        display: flex;
        gap: 10px;
        align-items: baseline;
        list-style: none;
        cursor: pointer;
    }

        .pl-semdono > summary::-webkit-details-marker { display: none; }
        .pl-semdono > summary > span:nth-child(2) { flex: 1; }

    .pl-semdono__ver { font-weight: 600; text-decoration: underline; white-space: nowrap; }
    .pl-semdono[open] .pl-semdono__ver { visibility: hidden; }
    .pl-semdono p { margin: 10px 0; }

    .pl-semdono .rl-tabela {
        border-radius: 8px;
        background: #ffffff;
        color: #1e293b;
    }

.pl-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    margin-bottom: 12px;
}

    .pl-filtros .lista-chips { flex-wrap: wrap; border-radius: 18px; }
    .pl-filtros .lista-chip span { margin-left: 4px; color: #94a3b8; font-weight: 400; }
    .pl-filtros .lista-chip.ativo span { color: inherit; }

.pl-cartao { padding: 4px 6px; }

.pl-tabela > tbody > tr > td { vertical-align: middle; }
.pl-tabela .produto-nome, .pl-tabela .produto-meta { display: block; }
.pl-tabela a.produto-nome { color: #1e293b; }
.pl-tabela a.produto-nome:hover { color: var(--mt-teal-dark); }
.pl-tabela .status-pill + .produto-meta { margin-top: 2px; }
.pl-notas { min-width: 110px; }
.pl-notas .as-barra { height: 6px; margin-top: 4px; }
.pl-frio { color: #94a3b8; }

.pl-dados {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px 20px;
    margin: 0;
    font-size: 0.86rem;
}

    .pl-dados dt { color: #64748b; font-weight: 400; }
    .pl-dados dd { margin: 0; color: #1e293b; font-weight: 600; }

@media (max-width: 575px) {
    .pl-busca { width: 100%; }
    .pl-busca .form-control { flex: 1; width: auto; }
}

/* =============================================================================
   Painel de contas a receber / a pagar (Views/Home/PainelContas)
   ============================================================================= */
#painel-contas {
    --pc-baixado: #0097a3;
    --pc-vencido: #c0262d;
    --pc-avencer: #94a3b8;
}

.pc-cor--baixado, .pc-barra--baixado { background: var(--pc-baixado); fill: var(--pc-baixado); }
.pc-cor--vencido, .pc-barra--vencido { background: var(--pc-vencido); fill: var(--pc-vencido); }
.pc-cor--avencer, .pc-barra--avencer { background: var(--pc-avencer); fill: var(--pc-avencer); }

#painel-contas .sf-legenda { margin-bottom: 4px; }
.sf-svg .pc-mes-atual { fill: #0f172a; font-weight: 700; }

.pc-ano .form-control {
    width: auto;
    height: 34px;
}

.pc-cat {
    display: grid;
    grid-template-columns: minmax(90px, 34%) 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    font-size: 0.86rem;
}

.pc-cat__nome {
    overflow: hidden;
    color: #334155;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-cat__barra {
    height: 10px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
}

    .pc-cat__barra i {
        display: block;
        height: 100%;
        border-radius: inherit;
    }

.pc-cat__valor {
    color: #1e293b;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

    .pc-cat__valor small {
        display: inline-block;
        min-width: 38px;
        margin-left: 6px;
        color: #94a3b8;
        font-weight: 400;
    }

.pc-ok { color: #15803d; }
.pc-hoje { color: #b45309; font-weight: 600; }

#painel-contas .sf-cartao > header .lista-chips { align-self: flex-start; }

a.lista-chip {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
}

/* =============================================================================
   Navegação: barra de progresso no topo e animações de entrada (~/js/app/navegacao.js)
   ============================================================================= */
#mt-progresso {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--mt-teal) 0%, #3fd5e0 100%);
    box-shadow: 0 0 10px rgba(1, 165, 177, 0.6);
    opacity: 0;
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 200ms ease-out, opacity 300ms ease;
}

    #mt-progresso.mt-progresso--ativa { opacity: 1; }
    #mt-progresso.mt-progresso--fim { opacity: 0; transition: transform 150ms ease-out, opacity 300ms ease 120ms; }

/* Conteúdo entra com um leve deslize. "backwards" aplica o estado inicial só antes de começar:
   terminado, não sobra transform (que quebraria modais e elementos fixos dentro da página). */
@keyframes mt-entrar {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.app-shell .page-wrapper > .container-fluid {
    animation: mt-entrar 220ms ease-out backwards;
}

@keyframes mt-menu {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.app-shell .dropdown-menu.show {
    animation: mt-menu 140ms ease-out backwards;
    transform-origin: top center;
}

/* SweetAlert: sem o "pulo" elástico padrão */
@keyframes mt-modal {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

/* A saída precisa de keyframes com outro nome: repetir "mt-modal" invertido não reinicia a
   animação, o SweetAlert não recebe o animationend e o fundo fica por cima da tela */
@keyframes mt-modal-sair {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(4px) scale(0.98); }
}

.swal2-popup.swal2-show { animation: mt-modal 180ms ease-out; }
.swal2-popup.swal2-hide { animation: mt-modal-sair 120ms ease-in forwards; }
.swal2-container.swal2-backdrop-show { animation: none; transition: background-color 180ms ease; }

.app-shell .btn,
.app-shell .lista-chip,
.app-shell .sf-tile,
.app-shell .form-control {
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .app-shell .page-wrapper > .container-fluid,
    .app-shell .dropdown-menu.show,
    .swal2-popup.swal2-show,
    .swal2-popup.swal2-hide { animation: none; }
    #mt-progresso { transition: opacity 200ms ease; }
}

/* =============================================================================
   Peças dos painéis (~/js/painel/graficos.js) e painel de vendas/compras
   ============================================================================= */
.app-shell {
    --mg-a: #0097a3;
    --mg-b: #5b6ee1;
    --mg-anterior: #cbd5e1;
}

.mg-barra--a { background: var(--mg-a); fill: var(--mg-a); }
.mg-barra--b { background: var(--mg-b); fill: var(--mg-b); }
.mg-barra--anterior { background: var(--mg-anterior); fill: var(--mg-anterior); }
.sf-svg .mg-barra--destaque { fill: #087985; }
.pp-cor--atual { background: var(--mg-a); }
.pp-cor--anterior { background: var(--mg-anterior); }

.mg-var { font-weight: 700; white-space: nowrap; }
.mg-var--sobe { color: #15803d; }
.mg-var--desce { color: #b91c1c; }

.mg-linha {
    display: grid;
    grid-template-columns: 22px minmax(90px, 38%) 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    border-top: 1px solid #f1f5f9;
    font-size: 0.86rem;
}

    .mg-linha:first-child { border-top: 0; }

.mg-linha__pos {
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: right;
}

.mg-linha__nome {
    overflow: hidden;
    color: #1e293b;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .mg-linha__nome small {
        display: block;
        overflow: hidden;
        color: #64748b;
        font-size: 0.76rem;
        font-weight: 400;
        text-overflow: ellipsis;
    }

.mg-linha__barra {
    height: 8px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
}

    .mg-linha__barra i {
        display: block;
        height: 100%;
        border-radius: inherit;
    }

.mg-linha__valor {
    color: #1e293b;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

    .mg-linha__valor small {
        display: block;
        color: #94a3b8;
        font-size: 0.74rem;
        font-weight: 400;
    }

.pp-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    margin-bottom: 14px;
}

    .pp-filtros .lista-chips { flex-wrap: wrap; border-radius: 18px; }
    .pp-filtros select.form-control { width: auto; height: 36px; }

.pp-datas {
    display: flex;
    gap: 6px;
    align-items: center;
    color: #64748b;
    font-size: 0.85rem;
}

    .pp-datas .form-control { width: 150px; height: 36px; }

@media (max-width: 575px) {
    .mg-linha { grid-template-columns: 18px minmax(80px, 42%) 1fr auto; gap: 8px; }
    .pp-datas { width: 100%; }
    .pp-datas .form-control { flex: 1; width: auto; }
    .pp-filtros select.form-control { flex: 1; }
}

/* Painel de estoque (Views/Home/PainelEstoque) */
.app-shell {
    --pe-entrada: #0097a3;
    --pe-saida: #eb6834;
}

.pe-barra--entrada, .pe-cor--entrada { background: var(--pe-entrada); fill: var(--pe-entrada); }
.pe-barra--saida, .pe-cor--saida { background: var(--pe-saida); fill: var(--pe-saida); }

button.sf-tile {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    button.sf-tile:hover { border-color: var(--mt-teal); }

.pe-periodo { margin-top: 6px; }
.pe-periodo .as-titulo { margin-right: 6px; }

.pe-duas { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

.pe-mais { color: #087985; font-weight: 600; }
.pe-menos { color: #c2410c; font-weight: 600; }
#pe-tabela .estoque-pill { min-width: 0; margin-left: 4px; padding: 1px 8px; font-size: 0.7rem; vertical-align: 1px; }

.pe-dt-topo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

    .pe-dt-topo .dataTables_filter { float: none; text-align: left; }
    .pe-dt-topo .dataTables_filter input { width: 240px; margin-left: 6px; }
    .pe-dt-topo .dt-buttons { float: none; }

@media (max-width: 991px) {
    .pe-duas { grid-template-columns: minmax(0, 1fr); }
}

.sf-cartao > header .lista-chips { flex-wrap: wrap; border-radius: 18px; }

/* DataTables dentro de um cartão de painel: sem a moldura própria */
.app-shell .sf-cartao .dataTables_wrapper {
    padding: 0;
    border: 0;
    box-shadow: none;
}

/* Painel fiscal (Views/Home/PainelFiscal) */
.pf-barra--erro { background: #dc2626; }

.pf-plano {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    color: #475569;
    font-size: 0.86rem;
}

    .pf-plano .as-barra { flex: 1; min-width: 120px; max-width: 260px; }
    .pf-plano a { margin-left: auto; font-weight: 600; }

.pf-plano--alerta { border-color: #fcd34d; background: #fffbeb; }
.pf-plano--cheio { border-color: #fca5a5; background: #fef2f2; }

.pf-motivo {
    display: block;
    max-width: 380px;
    overflow: hidden;
    color: #b91c1c !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#pf-motivos .mg-linha { grid-template-columns: 22px minmax(0, 1fr) 90px auto; }
#pf-motivos .mg-linha__nome { white-space: normal; }

/* Caixas (Views/Caixas) */
.cx-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
}

.cx-card {
    padding: 16px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}

    .cx-card header {
        display: flex;
        gap: 12px;
        align-items: center;
        margin-bottom: 12px;
    }

    .cx-card h3 {
        margin: 0 0 2px;
        color: #1e293b;
        font-size: 1.05rem;
        font-weight: 700;
    }

    .cx-card dl {
        display: grid;
        gap: 6px;
        margin: 0;
        padding-top: 10px;
        border-top: 1px solid #f1f5f9;
        font-size: 0.85rem;
    }

        .cx-card dl > div { display: flex; justify-content: space-between; gap: 12px; }
        .cx-card dt { color: #64748b; font-weight: 400; }
        .cx-card dd { margin: 0; color: #1e293b; font-weight: 600; text-align: right; }

.cx-numero {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(1, 165, 177, 0.12);
    color: var(--mt-teal-dark);
    font-size: 1.1rem;
}

.cx-card--inativo { background: #f8fafc; }
.cx-card--inativo .cx-numero { background: #f1f5f9; color: #94a3b8; }
.cx-card--inativo h3 { color: #64748b; }

/* Publicidade do PDV (Views/PublicidadePDV) */
.pub-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.pub-card {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}

.pub-card__imagem {
    aspect-ratio: 16 / 9;
    background: #0f172a;
}

    .pub-card__imagem img { display: block; width: 100%; height: 100%; object-fit: contain; }

.pub-card__corpo { padding: 12px 16px 14px; }

    .pub-card__corpo header { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
    .pub-card__corpo h3 { margin: 0 0 4px; color: #1e293b; font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
    .pub-card__corpo dl { display: grid; gap: 4px; margin: 0; padding-top: 8px; border-top: 1px solid #f1f5f9; font-size: 0.85rem; }
    .pub-card__corpo dl > div { display: flex; justify-content: space-between; gap: 12px; }
    .pub-card__corpo dt { color: #64748b; font-weight: 400; }
    .pub-card__corpo dd { margin: 0; color: #1e293b; font-weight: 600; text-align: right; }

.pub-card--inativo .pub-card__imagem { opacity: 0.45; }
.pub-card--inativo h3 { color: #64748b; }

.pub-envio {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.pub-previa {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    color: #94a3b8;
}

    .pub-previa img { width: 100%; height: 100%; object-fit: contain; background: #0f172a; }

@media (max-width: 767px) {
    .pub-envio { grid-template-columns: minmax(0, 1fr); }
}

.cx-opcoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 767px) {
    .cx-opcoes { grid-template-columns: 1fr; }
}

/* Turnos de caixa (Views/Caixas/Turno, Turnos) */
.cx-turno {
    margin: -4px 0 10px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fff7e6;
    color: #7c4a03;
    font-size: 0.82rem;
}

.tc-ok { color: #15803d; font-weight: 600; }
.tc-sobra { color: #b45309; font-weight: 600; }
.tc-tabela tfoot th { border-top: 2px solid #e2e8f0; }
.so-print { display: none; }

.tc-assinaturas {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 60px;
}

    .tc-assinaturas span { padding-top: 6px; border-top: 1px solid #334155; text-align: center; }

@media print {
    .app-shell nav.navbar, .no-print, #mt-progresso { display: none !important; }
    .so-print { display: block; }
    .tc-assinaturas.so-print { display: grid; }
    .app-shell .page-wrapper { padding-top: 0 !important; }
    .tc-relatorio .sf-cartao { break-inside: avoid; box-shadow: none; }
    .tc-relatorio .sf-duas { grid-template-columns: 1fr 1fr; }
}

/* PDV: turno de caixa (~/js/venda/pdv-turno.js) */
.pdv-atalhos__caixa {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 3px 12px;
    border: 1px solid #d9e2ee;
    border-radius: 999px;
    background: #f8fafc;
    color: #1e293b;
    font: inherit;
    cursor: pointer;
}

    .pdv-atalhos__caixa:hover { border-color: var(--mt-teal); }

.pdv-turno {
    position: fixed;
    inset: 0;
    z-index: 1040;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 70px 16px 24px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    animation: mt-entrar 180ms ease-out;
}

body.pdv-turno-aberto { overflow: hidden; }

.pdv-turno-painel {
    width: 100%;
    max-width: 760px;
    padding: 24px 26px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35);
}

.pdv-turno-painel--largo { max-width: 820px; }

    .pdv-turno-painel h2 { margin: 0 0 4px; color: #0f172a; font-size: 1.4rem; font-weight: 800; }

.pdv-turno-sub { margin: 0 0 16px; color: #64748b; }

.pdv-turno-caixas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.pdv-turno-caixa {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

    .pdv-turno-caixa.preferido { border-color: var(--mt-teal); box-shadow: 0 0 0 3px rgba(1, 165, 177, 0.15); }
    .pdv-turno-caixa p { margin: 0; color: #475569; font-size: 0.86rem; }
    .pdv-turno-caixa label { margin: 0; color: #475569; font-size: 0.82rem; font-weight: 600; }
    .pdv-turno-caixa .campo-rs input { font-size: 1.1rem; font-weight: 700; }

.pdv-turno-caixa__topo {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #1e293b;
    font-size: 1.05rem;
}

    .pdv-turno-caixa__topo i { color: var(--mt-teal-dark); }
    .pdv-turno-caixa__topo .status-pill { margin-left: auto; }

.pdv-turno-rodape { margin: 16px 0 0; font-size: 0.84rem; }

.pdv-turno-menu { display: grid; gap: 8px; margin-top: 10px; }

    .pdv-turno-menu .btn {
        display: flex;
        gap: 12px;
        align-items: center;
        padding: 10px 14px;
        text-align: left;
    }

        .pdv-turno-menu .btn i { width: 20px; color: var(--mt-teal-dark); }
        .pdv-turno-menu .btn b { display: block; color: #1e293b; }
        .pdv-turno-menu .btn span { color: #64748b; font-size: 0.82rem; font-weight: 400; }

.pdv-turno-valor input { font-size: 1.4rem; font-weight: 700; }

.pdv-turno-movs {
    margin: 0 0 12px;
    padding: 8px 12px 8px 28px;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
    font-size: 0.84rem;
}

.pdv-turno-passo { margin: 12px 0 8px; color: #334155; }

.pdv-turno-contagem { display: grid; gap: 8px; }

.pdv-turno-forma {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 12px;
    align-items: center;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

    .pdv-turno-forma > span:first-child { color: #1e293b; font-weight: 600; }
    .pdv-turno-forma small { display: block; color: #64748b; font-size: 0.76rem; font-weight: 400; }
    .pdv-turno-forma.dinheiro { border-color: rgba(1, 165, 177, 0.5); background: rgba(1, 165, 177, 0.05); }
    .pdv-turno-forma input { font-weight: 700; text-align: right; }

.pdv-turno-tabela { margin-top: 14px; }
#pdv-turno-obs { margin-top: 6px; }

.pdv-turno-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 18px;
}

.pdv-turno-botoes { display: inline-flex; gap: 8px; }

@media (max-width: 575px) {
    .pdv-turno { padding-top: 16px; }
    .pdv-turno-painel { padding: 18px 16px; }
    .pdv-turno-forma { grid-template-columns: 1fr; }
}
.pl-dados dd.tc-ok, .rl-tabela .tc-ok { color: #15803d; }
.pl-dados dd.tc-sobra, .rl-tabela .tc-sobra { color: #b45309; }
.pl-dados dd.text-danger { color: #b91c1c; }

/* NFS-e nacional (Views/NotaServico, ServicoPrestado, ParametrosNFSe) */
.ns-checklist {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.ns-opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ns-opcoes .fp-opcao { cursor: pointer; margin: 0; }

.ns-filtro {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 14px;
}

    .ns-filtro label { display: flex; flex-direction: column; gap: 2px; margin: 0; color: #64748b; font-size: 0.8rem; }
    .ns-filtro__total { margin-left: auto; color: #475569; font-size: 0.9rem; }

.ns-descricao {
    display: -webkit-box;
    overflow: hidden;
    max-width: 340px;
    color: #1e293b;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ns-busca { position: relative; }

/* Cinco chips não cabem no celular: rola na horizontal em vez de alargar a página */
.ns-chips { max-width: 100%; overflow-x: auto; margin-bottom: 12px; }
    .ns-chips .lista-chip { flex: 0 0 auto; }

.ns-sugestoes {
    position: absolute;
    z-index: 20;
    top: 100%;
    right: 5px;
    left: 5px;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #d9e2ee;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

    .ns-sugestoes button {
        display: flex;
        width: 100%;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 12px;
        border: 0;
        border-bottom: 1px solid #eef2f7;
        background: none;
        text-align: left;
    }

    .ns-sugestoes button:hover, .ns-sugestoes button:focus { background: rgba(1, 165, 177, 0.07); }
    .ns-sugestoes button span { color: #64748b; font-size: 0.82rem; white-space: nowrap; }
    .ns-sugestoes__vazio { padding: 10px 12px; color: #64748b; font-size: 0.88rem; }

.ns-dados { display: grid; gap: 10px; margin: 0; }
    .ns-dados dt { color: #64748b; font-size: 0.8rem; font-weight: 400; }
    .ns-dados dd { margin: 0; color: #1e293b; }
.ns-chave { font-family: monospace; font-size: 0.82rem; word-break: break-all; }
.ns-quebra { white-space: pre-wrap; }
.ns-historico { margin: 0; padding-left: 18px; color: #475569; font-size: 0.86rem; }
    .ns-historico li + li { margin-top: 4px; }

@media (max-width: 767px) {
    .ns-opcoes { grid-template-columns: 1fr; }
    .ns-filtro__total { margin-left: 0; width: 100%; }
    .ns-descricao { max-width: 220px; }
}

/* ---- Empresas (em-) ----------------------------------------------------------- */
.em-cartao {
    padding: 14px 16px;
    margin-bottom: 12px;
}

.em-cartao__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

    .em-cartao__acoes .btn {
        flex: 1 1 auto;
    }

.em-logo {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

    .em-logo img {
        max-height: 96px;
        max-width: 220px;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        background: #fff;
        padding: 4px;
    }

    .em-logo img[src=""] {
        display: none;
    }

/* ---- Pessoas (pes-): cadastro --------------------------------------------- */
/* PF x PJ: o formulário guarda a natureza em data-natureza e esconde o que é do outro tipo */
.pes-form[data-natureza="Fisica"] .pj-only,
.pes-form[data-natureza="Juridica"] .pf-only {
    display: none !important;
}

.pes-natureza .lista-chip {
    display: inline-flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

    .pes-natureza .lista-chip input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .pes-natureza .lista-chip:focus-within {
        box-shadow: 0 0 0 3px rgba(1, 165, 177, 0.2);
    }

/* Tipos de pessoa como chips marcáveis (antes era um select múltiplo) */
.pes-tipos-escolha {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pes-tipo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 14px;
    border: 1px solid #d9e2ee;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: border-color 160ms ease, background-color 160ms ease;
}

    .pes-tipo input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .pes-tipo i {
        display: none;
        font-size: 0.75rem;
    }

    .pes-tipo:hover {
        border-color: var(--mt-teal);
    }

    .pes-tipo:focus-within {
        box-shadow: 0 0 0 3px rgba(1, 165, 177, 0.2);
    }

    .pes-tipo.sel {
        border-color: var(--mt-teal);
        background: rgba(1, 165, 177, 0.1);
        color: var(--mt-teal-dark);
    }

        .pes-tipo.sel i {
            display: inline;
        }

/* Documento com o botão "Buscar CNPJ" ao lado */
.pes-doc-linha {
    display: flex;
    gap: 8px;
}

    .pes-doc-linha .form-control {
        flex: 1 1 auto;
        min-width: 0;
    }

    .pes-doc-linha .btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

.pes-form .sf-alerta a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

/* ---- Produtos (prd-): lista e cadastro ---- */
.prd-tiles button.sf-tile {
    width: 100%;
    text-align: left;
    cursor: pointer;
}

    .prd-tiles button.sf-tile:hover {
        border-color: var(--mt-teal);
    }

.prd-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.prd-filtros__categoria {
    flex: 0 1 240px;
    min-width: 0;
    height: 38px;
    border-radius: 999px;
}

.prd-tabela td.produto-thumb {
    padding-right: 0;
}

    .prd-tabela td.produto-thumb img,
    .produto-thumb__vazio {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1px solid #e5ebf2;
        border-radius: 8px;
        background: #ffffff;
        object-fit: contain;
    }

.produto-thumb__vazio {
    background: #f4f7fb;
    color: #94a3b8;
    font-size: 0.9rem;
}

a.prd-link {
    display: inline;
    text-decoration: none;
}

    a.prd-link:hover {
        color: var(--mt-teal-dark);
        text-decoration: underline;
    }

.prd-tabela .status-pill {
    margin-left: 6px;
    font-size: 0.72rem;
}

.prd-tabela .estoque-pill small {
    font-weight: 600;
    opacity: 0.75;
}

.prd-acoes .btn {
    padding: 4px 9px;
}

    .prd-acoes .btn-light {
        border-color: transparent;
        background: transparent;
    }

        .prd-acoes .btn-light:hover {
            background: #eef2f7;
        }

/* Cadastro */
.prd-form .nav-link.prd-aba-erro {
    color: #b91c1c !important;
}

    .prd-form .nav-link.prd-aba-erro::after {
        content: " •";
    }

.prd-campo-mais {
    display: flex;
    gap: 6px;
}

    .prd-campo-mais .select2-container,
    .prd-campo-mais select {
        flex: 1 1 auto;
        min-width: 0;
    }

    .prd-campo-mais .prd-novo {
        flex: 0 0 auto;
        border: 1px solid #d9e2ee;
    }

.prd-secao-titulo {
    margin: 0 0 10px;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.prd-margem {
    min-height: 1.2em;
    color: #15803d;
    font-size: 0.88rem;
    font-weight: 600;
}

.prd-margem--ruim {
    color: #b91c1c;
}

.prd-imagem-botoes {
    display: flex;
    align-items: center;
    gap: 8px;
}

.prd-movimentos .status-pill {
    font-size: 0.75rem;
}

.produto-imagem {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #fafbfd;
}

    .produto-imagem img {
        max-width: 100%;
        max-height: 100%;
        padding: 12px;
        object-fit: contain;
    }

        /* Sem imagem: some a tag img (src vazio) e aparece o espaço reservado */
        .produto-imagem img[src=""] {
            display: none;
        }

.produto-imagem__vazio {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 0.85rem;
}

    .produto-imagem__vazio i {
        font-size: 1.8rem;
    }

.produto-imagem img[src=""] + .produto-imagem__vazio {
    display: flex;
}

label.produto-imagem__botao {
    margin: 0;
    cursor: pointer;
}

@media (max-width: 576px) {
    /* Os quatro números em duas colunas, menores, para a tabela aparecer logo */
    .prd-tiles.sf-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .prd-tiles .sf-tile {
        padding: 10px 12px;
    }

        .prd-tiles .sf-tile strong {
            font-size: 1.15rem;
        }

        .prd-tiles .sf-tile span {
            display: none;
        }

    .prd-filtros .lista-chips {
        flex-wrap: wrap;
    }

    .prd-filtros__categoria {
        flex: 1 1 100%;
    }
}

/* ---- Ajuste de estoque / inventário (aj-) ---- */
.aj-tipos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.aj-carregar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

    .aj-carregar select {
        flex: 0 1 260px;
        min-width: 0;
    }

.aj-form {
    min-width: 0;
    max-width: 100%;
}

#aj-tabela-caixa {
    position: relative; /* prende o texto .sr-only dos botões, que é absolute */
    max-width: 100%;
    overflow-x: auto;
}

.aj-itens.table td {
    vertical-align: middle;
}

.aj-itens .aj-qtd {
    width: 110px;
    margin-left: auto;
    text-align: right;
}

.aj-resumo {
    min-height: 1.2em;
    margin: 6px 0 0;
    color: #475569;
    font-size: 0.88rem;
    font-weight: 600;
}

.aj-cabecalho {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 20px;
    margin-bottom: 18px;
}

    .aj-cabecalho dt {
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .aj-cabecalho dd {
        margin: 2px 0 0;
        color: #0f172a;
    }

.aj-cabecalho__largo {
    grid-column: 1 / -1;
}

@media (max-width: 576px) {
    .aj-cabecalho {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aj-itens .aj-qtd {
        width: 76px;
    }

    /* No celular a diferença sai (o novo saldo já mostra o resultado) */
    .aj-itens .aj-col-dif {
        display: none;
    }
}

/* ---- Grupos de clientes e fornecedores (gp-) --------------------------------- */
.gp-novo {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

    .gp-novo .form-control {
        flex: 1 1 240px;
        min-width: 0;
    }

.gp-renomear {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

    .gp-renomear[hidden] {
        display: none;
    }

    .gp-renomear .form-control {
        flex: 1 1 180px;
        min-width: 0;
    }

/* ---- Importação de produtos (imp-) ---- */
.imp-passos {
    display: grid;
    gap: 22px;
    margin: 16px 0 8px;
    padding-left: 1.4rem;
}

    .imp-passos > li > strong {
        display: block;
        color: #0f172a;
    }

    .imp-passos > li > span {
        display: block;
        color: #64748b;
        font-size: 0.88rem;
    }

.imp-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.imp-arquivo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 0;
    padding: 18px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #fafbfd;
    color: #475569;
    cursor: pointer;
}

    .imp-arquivo i {
        color: #15803d;
        font-size: 1.6rem;
    }

.imp-arquivo--sobre {
    border-color: var(--mt-teal);
    background: rgba(1, 165, 177, 0.06);
}

.imp-arquivo--ok {
    border-style: solid;
    border-color: #86efac;
    color: #0f172a;
    font-weight: 600;
}

.imp-previa {
    padding-top: 18px;
}

.imp-tiles button.sf-tile {
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.imp-tabela-caixa {
    position: relative;
    max-height: 520px;
    overflow: auto;
}

.imp-tabela .imp-msg,
.imp-tabela th:last-child {
    text-align: left !important;
}

.imp-tabela .imp-msg {
    color: #475569;
    font-size: 0.85rem;
}

.imp-tabela tr.imp-linha--erro .imp-msg {
    color: #b91c1c;
}

@media (max-width: 576px) {
    .imp-tiles.sf-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .imp-tiles .sf-tile span {
        display: none;
    }

    #imp-filtro {
        flex-wrap: wrap;
        border-radius: 16px;
    }
}

/* ---- Etiquetas de produtos (et-) — a página de impressão tem CSS próprio ---- */
.et-tabela-caixa {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
}

.et-itens.table td {
    vertical-align: middle;
}

.et-itens .et-qtd {
    width: 90px;
    margin-left: auto;
    text-align: right;
}

.et-acoes-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 6px;
}

.et-campos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}

.et-ajuste {
    margin-top: 12px;
}

    .et-ajuste summary {
        color: #475569;
        font-size: 0.88rem;
        cursor: pointer;
    }

/* ---- Sugestão de compra (sc-) ---- */
.sc-filtros {
    margin-top: 0;
    padding-top: 16px;
    padding-bottom: 12px;
}

.sc-tabela-caixa {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}

.sc-tabela.table td {
    vertical-align: middle;
}

.sc-tabela .sc-check {
    width: 36px;
    text-align: center;
}

.sc-tabela .sc-qtd {
    width: 96px;
    margin-left: auto;
    text-align: right;
}

.sc-tabela tr.sc-fora td:not(.sc-check) {
    opacity: 0.45;
}

.sc-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 12px 0 32px;
}

    .sc-rodape .aj-resumo {
        flex: 1 1 220px;
        margin: 0;
    }

@media (max-width: 576px) {
    .sc-tiles.sf-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .sc-tiles .sf-tile span {
        display: none;
    }
}

/* Promoção no cadastro do produto */
.prd-promo-situacao {
    min-height: 1.2em;
    font-size: 0.88rem;
    font-weight: 600;
}

.prd-promo--ok { color: #15803d; }
.prd-promo--espera { color: #1e40af; }
.prd-promo--ruim { color: #b91c1c; }

/* Preço promocional na lista e nas buscas: normal riscado + promocional */
.prd-preco-de {
    display: block;
    color: #94a3b8;
    font-size: 0.78rem;
    text-decoration: line-through;
}

.prd-preco-por {
    color: #b45309;
    font-weight: 700;
}

/* Kit / composição no cadastro do produto */
.prd-kit-caixa {
    position: relative;
    overflow-x: auto;
}

.prd-kit-tabela .prd-kit-qtd {
    width: 96px;
    margin-left: auto;
    text-align: right;
}

.prd-kit-tabela td {
    vertical-align: middle;
}

.prd-kit-resumo {
    min-height: 1.2em;
    margin-top: 8px;
    font-size: 0.9rem;
}

/* Campos que trocam entre produto e kit (o d-flex do Bootstrap venceria o [hidden]) */
.prd-so-produto[hidden],
.prd-so-kit[hidden],
.prd-aba-kit[hidden] {
    display: none !important;
}

/* Grade (produto com variações): cadastro do modelo (aba Grade) e lista de produtos */
.prd-form:not(.prd-form--modelo) .prd-so-modelo,
.prd-form--modelo .prd-sem-modelo,
.prd-aba-grade[hidden] {
    display: none !important;
}

.prd-grade-caixa {
    position: relative;
    overflow-x: auto;
}

.prd-grade-matriz {
    width: auto;
    min-width: 260px;
}

.prd-grade-matriz th[scope="row"] {
    white-space: nowrap;
}

.prd-grade-matriz a.estoque-pill:hover {
    text-decoration: none;
    filter: brightness(0.95);
}

.prd-grade-total {
    font-weight: 600;
    color: #334155;
}

.prd-grade-inativa {
    opacity: 0.55;
}

.table.prd-grade-tabela td {
    vertical-align: middle;
}

.prd-grade-marca {
    width: 36px;
}

.prd-grade-col-ean {
    min-width: 170px;
}

.prd-grade-ean--alterado {
    border-color: var(--mt-teal);
    background: #f0fdfa;
}

.prd-grade-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.prd-grade-previa {
    color: #475569;
    font-size: 0.9rem;
}

.prd-grade-abrir {
    display: block;
    padding: 0;
    font-size: 0.8rem;
}

.prd-grade-filhos > td {
    padding: 0 0 8px 64px !important;
    background: #f8fafc;
    text-align: left !important;
}

.prd-grade-filhos ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.prd-grade-filhos li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 4px 16px;
    padding: 6px 12px 6px 0;
    border-bottom: 1px solid #e2e8f0;
}

.prd-grade-filhos li .produto-meta {
    grid-column: 1;
    grid-row: 2;
}

.prd-grade-filhos__preco {
    grid-row: 1 / span 2;
    font-size: 0.9rem;
    white-space: nowrap;
}

.prd-grade-filhos li .estoque-pill {
    grid-row: 1 / span 2;
}

@media (max-width: 575.98px) {
    .prd-grade-filhos > td {
        padding-left: 12px !important;
    }
}