/* Identidade visual Carvão + Violeta */
:root {
    --accent: #7c5cff;
    --accent-hover: #6a4af0;
    --accent-suave: rgba(124, 92, 255, 0.14);
    --accent-texto: #a996ff;
    --blue: #a996ff;
    --bg: #111114;
    --surface: #18181c;
    --surface-2: #1f1f24;
    --border: #2a2a31;
    --text: #ececf1;
    --muted: #9b9ba7;
    --raio: 12px;
}

:root[data-theme="light"] {
    --accent: #6d4aff;
    --accent-hover: #5a38ea;
    --accent-suave: rgba(109, 74, 255, 0.1);
    --accent-texto: #5a38ea;
    --blue: #5a38ea;
    --bg: #f5f5f7;
    --surface: #ffffff;
    --surface-2: #f0f0f3;
    --border: #e2e2e8;
    --text: #18181b;
    --muted: #6b6b76;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 0 25px;
    min-height: 70px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.logo {
    color: var(--text);
    font-size: 25px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.logo span {
    color: var(--accent);
}

.menu {
    display: flex;
    gap: 24px;
    flex: 1;
    align-items: center;
    flex-wrap: wrap;
}

.menu a {
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
}

.menu a:hover,
.menu a.active {
    color: var(--accent);
}

.user-area {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.user-name {
    font-size: 13px;
    color: var(--muted);
}

button,
select {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
}

.container {
    max-width: 1400px;
    margin: auto;
    padding: 30px;
}

h1 {
    margin-bottom: 5px;
}

.subtitle {
    color: var(--muted);
    margin-bottom: 30px;
}

.cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
}

.card h3 {
    margin-top: 0;
    font-size: 14px;
    color: var(--muted);
}

.card strong {
    font-size: 30px;
}

.notice {
    margin-top: 25px;
    color: var(--muted);
}

@media (max-width: 900px) {
    .topbar {
        flex-wrap: wrap;
        padding: 15px;
    }

    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.logo img {
    width: 170px;
    height: auto;
    display: block;
}

.logo-claro {
    display: none !important;
}

.logo-escuro {
    display: block !important;
}

:root[data-theme="light"] .logo-claro {
    display: block !important;
}

:root[data-theme="light"] .logo-escuro {
    display: none !important;
}

/* ==========================================
   PIPPEHUB - FORMULÁRIOS ADMINISTRATIVOS
========================================== */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field label {
    font-size: 14px;
    font-weight: 600;
}

.form-field input,
.form-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #64748b55;
    background: transparent;
    color: inherit;
    font-size: 14px;
}

.form-field select option {
    color: #111827;
    background: #ffffff;
}

.card h2 {
    font-size: 18px;
    margin-bottom: 20px;
}

.card form button {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
}

.card form button:hover {
    background: var(--accent-hover);
}

/* TABELAS */

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.data-table th,
.data-table td {
    padding: 14px;
    text-align: left;
    border-bottom: 1px solid #64748b33;
}

.data-table th {
    font-weight: 600;
    font-size: 13px;
}

.data-table td {
    font-size: 14px;
}

.data-table a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.data-table a:hover {
    text-decoration: underline;
}

/* RESPONSIVIDADE */

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================
   PIPPEHUB - PERMISSÕES DE LOJAS
========================================== */

.lista-permissoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.loja-permissao {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid #64748b55;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
}

.loja-permissao:hover {
    border-color: var(--accent);
}

.loja-permissao input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.loja-permissao span {
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .lista-permissoes {
        grid-template-columns: 1fr;
    }
}

/* Botões da tela de permissões */

.acoes-permissoes {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.acoes-permissoes .btn-salvar,
.acoes-permissoes .btn-voltar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    margin: 0;
}

.acoes-permissoes .btn-salvar {
    background: var(--accent);
    color: #ffffff;
    border: 1px solid var(--accent);
}

.acoes-permissoes .btn-voltar {
    background: transparent;
    color: inherit;
    border: 1px solid #64748b;
}

.acoes-permissoes .btn-voltar:hover {
    background: #64748b22;
}

/* ==========================================
   PIPPEHUB - LOGIN
========================================== */

:root[data-theme="light"] body.login-page,
body.login-page {
    background:
        radial-gradient(circle at top left, #dff7ef 0%, transparent 28%),
        radial-gradient(circle at bottom right, #dbeafe 0%, transparent 32%),
        linear-gradient(135deg, #f7fafc 0%, #eef6ff 100%);
    min-height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    color: #0f172a;
}

.login-wrapper {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 40px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px;
    box-sizing: border-box;
}

.login-brand-panel {
    padding: 30px 20px 30px 10px;
}

.login-logo {
    margin-bottom: 28px;
}

.login-logo img {
    width: 220px;
    height: auto;
    display: block;
}

.login-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffffcc;
    border: 1px solid #dbeafe;
    color: #2563eb;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 22px;
    box-shadow: 0 8px 20px #0f172a10;
    backdrop-filter: blur(10px);
}

.login-title {
    font-size: 48px;
    line-height: 1.05;
    margin: 0 0 18px;
    color: #0f172a;
    max-width: 560px;
}

.login-title .destaque {
    background: linear-gradient(90deg, #2563eb 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-description {
    max-width: 560px;
    font-size: 18px;
    line-height: 1.7;
    color: #475569;
    margin: 0 0 30px;
}

.login-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 620px;
}

.login-feature {
    background: #ffffffc9;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 10px 28px #0f172a0e;
    backdrop-filter: blur(10px);
}

.login-feature strong {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    color: #0f172a;
}

.login-feature span {
    font-size: 14px;
    line-height: 1.55;
    color: #64748b;
}

.login-card-area {
    display: flex;
    justify-content: center;
}

.login-card {
    width: 100%;
    max-width: 440px;
    background: #ffffffee;
    border: 1px solid #dbeafe;
    border-radius: 28px;
    padding: 34px;
    box-shadow: 0 22px 60px #0f172a18;
    backdrop-filter: blur(14px);
}

.login-card-top {
    margin-bottom: 26px;
}

.login-card-top h1 {
    margin: 0 0 8px;
    font-size: 30px;
    color: #0f172a;
}

.login-card-top p {
    margin: 0;
    color: #64748b;
    line-height: 1.6;
    font-size: 15px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.login-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-form-field label {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}

.login-form-field input {
    width: 100%;
    box-sizing: border-box;
    height: 52px;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    padding: 0 16px;
    font-size: 15px;
    background: #ffffff;
    color: #0f172a;
    outline: none;
    transition: 0.2s;
}

.login-form-field input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 4px #3b82f620;
}

.login-submit {
    height: 54px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(90deg, #2563eb 0%, var(--accent) 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    box-shadow: 0 14px 28px #2563eb30;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.login-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px #2563eb38;
}

.login-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
}

.login-error.login-ok {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.login-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 13px;
    text-align: center;
    line-height: 1.6;
}

.login-footer a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}

.selo-loja-principal {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-suave);
    color: var(--accent-texto);
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}

/* Faixa do suporte do PippeHub (topo do app) */
.faixa-suporte {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 8px 16px;
    background: #7c5cff;
    color: #ffffff;
    font-size: 13px;
    text-align: center;
}

.faixa-suporte a {
    color: #ffffff;
    font-weight: 700;
}

/* Faixa do teste grátis (topo do app) */
.faixa-teste {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 9px 16px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 13px;
    text-align: center;
}

.faixa-teste.faixa-teste-fim {
    background: #fef3c7;
    color: #92400e;
}

.faixa-teste.faixa-limite {
    background: #fee2e2;
    color: #991b1b;
}

.faixa-teste a {
    color: inherit;
    font-weight: 700;
}

@media (max-width: 980px) {
    .login-wrapper {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
    }

    .login-brand-panel {
        padding: 0;
    }

    .login-title {
        font-size: 36px;
        max-width: 100%;
    }

    .login-description {
        max-width: 100%;
    }

    .login-features {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .login-card {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .login-wrapper {
        padding: 18px;
    }

    .login-card {
        padding: 24px;
        border-radius: 22px;
    }

    .login-title {
        font-size: 30px;
    }
}

/* PIPPEHUB - FILTROS DE PEDIDOS */

.pedidos-acoes {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.btn-limpar-pedidos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border: 1px solid #64748b;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.btn-limpar-pedidos:hover {
    background: #64748b22;
}

/* PIPPEHUB - ALINHAMENTO DOS BOTOES DE FILTRO */

.pedidos-acoes {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pedidos-acoes button,
.pedidos-acoes .btn-limpar-pedidos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 48px;
    padding: 0 24px;
    margin: 0;
    line-height: 1;
    vertical-align: middle;
}

/* PIPPEHUB - ALINHAMENTO DEFINITIVO DOS BOTOES */

.pedidos-acoes {
    display: flex !important;
    flex-direction: row;
    align-items: center !important;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.pedidos-acoes > button,
.pedidos-acoes > a.btn-limpar-pedidos {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    height: 48px !important;
    min-height: 48px !important;

    padding: 0 24px !important;
    margin: 0 !important;

    line-height: 1 !important;
    vertical-align: middle !important;

    position: static !important;
    transform: none !important;
}

/* PIPPEHUB - ACOES DOS LOTES */

.acoes-lote {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.acoes-lote form {
    margin: 0;
}

.btn-visualizar-lote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--accent-hover);
    border-radius: 8px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.btn-visualizar-lote:hover {
    background: rgba(16, 185, 129, 0.10);
}

/* PIPPEHUB - PADRONIZACAO DOS BOTOES DE LOTES */

.acoes-lote {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.acoes-lote form {
    margin: 0 !important;
    padding: 0 !important;
}

.acoes-lote > a.btn-visualizar-lote,
.acoes-lote > form > button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    height: 48px !important;
    min-height: 48px !important;

    padding: 0 24px !important;
    margin: 0 !important;

    border-radius: 8px;
    line-height: 1 !important;
    vertical-align: middle !important;
    transform: none !important;
}

/* PIPPEHUB - RESUMO DE ETIQUETAS */

.resumo-etiquetas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.resumo-etiquetas > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border: 1px solid #334155;
    border-radius: 10px;
}

.resumo-etiquetas strong {
    font-size: 28px;
    color: var(--accent);
}

.resumo-etiquetas span {
    font-size: 14px;
    color: #94a3b8;
}

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

/* PIPPEHUB - ACOES DE IMPRESSAO */

.acoes-impressao {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.acoes-impressao form {
    margin: 0;
}

.acoes-impressao {
    flex-wrap: wrap;
}

.card .acoes-impressao form button {
    margin-top: 0;
}

.acoes-impressao button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* PippeHub - Campo de período de envio */

.prazo-periodo-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.prazo-periodo-icone {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    pointer-events: none;
    z-index: 1;
}

.prazo-periodo-icone svg {
    width: 20px;
    height: 20px;
}

.prazo-periodo-input {
    width: 100%;
    box-sizing: border-box;
    padding-left: 50px !important;
    cursor: pointer;
}

.resumo-operacional {
    margin-bottom: 24px;
}

.resumo-operacional h2 {
    margin: 0 0 18px 0;
}

.resumo-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 16px;
    padding-bottom: 4px;
}

.resumo-card {
    min-width: 0;
    min-height: 118px;
    padding: 20px 22px;
    border-radius: 18px;
    border: 1px solid rgba(77, 124, 174, 0.35);
    background: rgba(15, 37, 63, 0.95);
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.15s ease,
                border-color 0.15s ease,
                box-shadow 0.15s ease;
}

.resumo-card:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 197, 94, 0.60);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.resumo-card.ativo {
    border-color: #22c55e;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25) inset;
}

.resumo-card-titulo {
    font-size: 0.98rem;
    font-weight: 600;
    color: #9fb2c8;
    line-height: 1.3;
}

.resumo-card-valor {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    color: #f8fafc;
}

/* Popup de edicao de produtos */

.modal-produto-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
    background: rgba(0, 0, 0, 0.55);
}

.modal-produto-overlay[style*="display: none"] {
    display: none !important;
}

.modal-produto-conteudo {
    width: 100%;
    max-width: 650px;
    max-height: 90vh;
    overflow-y: auto;
}

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

.modal-produto-cabecalho h2 {
    margin: 0;
}

.modal-produto-fechar {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
}

/* Texto do popup de exclusao */

.modal-exclusao-pergunta {
    text-align: center;
    margin-bottom: 16px;
}

.modal-exclusao-nome {
    text-align: center;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 10px;
    background: rgba(128, 128, 128, 0.08);
}

.modal-exclusao-nome strong {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.modal-exclusao-aviso {
    text-align: center;
    margin-bottom: 24px;
}

/* Composicao dos kits - PippeHub */

.componente-anuncio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
}

.componente-anuncio > .form-field {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    margin: 0;
}

.componente-anuncio > .form-field label {
    margin-bottom: 8px;
}

.componente-anuncio > .form-field select,
.componente-anuncio > .form-field input {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    margin: 0;
}

@media (max-width: 650px) {
    .componente-anuncio {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px;
        gap: 8px;
    }
}

/* Icone de composicao dos anuncios */

.btn-composicao-anuncio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.8;
}

.btn-composicao-anuncio:hover {
    opacity: 1;
    background: rgba(128, 128, 128, 0.12);
}

.btn-composicao-anuncio svg {
    display: block;
}

/* Status dos anúncios */
.btn-status-anuncio.status-ativo {
    color: var(--accent);
}

.btn-status-anuncio.status-inativo {
    color: #94a3b8;
}

.btn-status-anuncio.status-ativo:hover {
    color: #fb7185;
}

/* Botão de exclusão dos anúncios */
.btn-excluir-anuncio {
    color: #ef4444;
    cursor: pointer;
}

.btn-excluir-anuncio:hover {
    color: #f87171;
}

/* Tela de integracoes */

.integracoes-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-conectar-conta {
    padding: 12px 22px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: #ffffff;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

.btn-conectar-conta:hover {
    background: var(--accent-hover);
}

.aviso-integracao {
    border-left: 4px solid var(--blue);
}

.aviso-integracao.aviso-sucesso {
    border-left-color: #22c55e;
}

.aviso-integracao.aviso-erro {
    border-left-color: #ef4444;
}

.tabela-integracoes td {
    vertical-align: middle;
}

.form-loja-integracao {
    display: flex;
    gap: 8px;
    align-items: center;
}

.form-loja-integracao select {
    min-width: 160px;
}

.card form.form-loja-integracao button,
.acoes-integracao form button {
    margin-top: 0;
}

.acoes-integracao {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.acoes-integracao form {
    margin: 0;
}

.card form button.btn-acao-integracao,
.data-table a.btn-acao-integracao,
.btn-acao-integracao {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.card form button.btn-acao-integracao:hover,
.btn-acao-integracao:hover {
    background: rgba(128, 128, 128, 0.12);
}

.data-table a.btn-acao-integracao.destaque,
.btn-acao-integracao.destaque {
    border-color: var(--accent);
    background: var(--accent);
    color: #ffffff;
}

.btn-acao-integracao.destaque:hover {
    background: var(--accent-hover);
}

.card form button.btn-acao-integracao.perigo {
    border-color: #ef4444;
    color: #ef4444;
}

.status-integracao {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(128, 128, 128, 0.15);
    color: var(--muted);
}

.status-integracao.status-conectada {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.status-integracao.status-expirada {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}

.status-integracao.status-erro {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.texto-indisponivel {
    color: var(--muted);
    font-size: 13px;
}

.marketplace-opcoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.marketplace-opcao {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
}

a.marketplace-opcao:hover {
    border-color: var(--accent);
}

.marketplace-opcao span {
    color: var(--muted);
    font-size: 13px;
}

.marketplace-opcao.indisponivel {
    opacity: 0.55;
    cursor: not-allowed;
}

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

    .btn-conectar-conta {
        width: 100%;
    }
}

/* Vinculo de anuncios com produtos internos */

.vinculo-anuncio {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vinculo-anuncio .btn-composicao-anuncio {
    width: auto;
    height: auto;
    padding: 6px 12px;
}

.cabecalho-vinculo-sku {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cabecalho-vinculo-sku h2 {
    margin-bottom: 4px;
}

.card .cabecalho-vinculo-sku form button {
    margin-top: 0;
}

.aviso-vinculo-sku {
    margin-top: 16px;
    padding: 10px 14px;
    border-left: 4px solid #22c55e;
    border-radius: 6px;
    background: rgba(34, 197, 94, 0.08);
}

.lista-skus-pendentes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lista-skus-pendentes span {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    color: var(--muted);
}

/* Pesquisa de produto interno nos filtros de pedidos */

.campo-pesquisa-produto {
    position: relative;
}

.campo-pesquisa-produto input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #64748b55;
    background: transparent;
    color: inherit;
    font-size: 14px;
}

.sugestoes-filtro-produto {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: 4px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Mais específico que .card form button, que pinta os botões de rosa */
.card form .sugestoes-filtro-produto button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.card form .sugestoes-filtro-produto button:hover,
.card form .sugestoes-filtro-produto button.destacado {
    background: rgba(128, 128, 128, 0.15);
    color: var(--text);
}

.sugestoes-filtro-produto .sem-resultado {
    padding: 10px 12px;
    color: var(--muted);
    font-size: 14px;
}

/* Altura única para os campos de formulário.
   O Safari ignora altura e espaçamento de select nativo,
   por isso a aparência nativa é removida. */

.form-field select,
.form-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    height: 48px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid #64748b55;
    border-radius: 8px;
    background-color: transparent;
    color: inherit;
    font-size: 15px;
}

.form-field select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    cursor: pointer;
}

/* Popup de detalhes do pedido */

.link-detalhes-pedido {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.link-detalhes-pedido:hover {
    text-decoration: underline;
}

.modal-produto-conteudo.modal-detalhes-pedido {
    max-width: 860px;
}

.detalhes-secao {
    padding: 16px 0;
    border-top: 1px solid var(--border);
}

.detalhes-secao:first-child {
    border-top: 0;
    padding-top: 0;
}

.detalhes-secao h3 {
    margin: 0 0 12px;
    font-size: 15px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.detalhes-campos {
    display: grid;
    grid-template-columns: minmax(140px, max-content) 1fr;
    gap: 6px 20px;
    margin: 0;
}

.detalhes-campos dt {
    color: var(--muted);
}

.detalhes-campos dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .detalhes-campos {
        grid-template-columns: 1fr;
    }

    .detalhes-campos dd {
        margin-bottom: 8px;
    }
}

/* Selos dos marketplaces (substituídos por logo, se houver) */

.selo-marketplace {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: var(--border);
    color: var(--text);
}

.selo-mercado_livre {
    background: #ffe600;
    color: #2d3277;
}

.selo-shopee {
    background: #ee4d2d;
    color: #ffffff;
}

.selo-tiktok_shop {
    background: #000000;
    color: #ffffff;
    box-shadow: inset 0 0 0 1px #25f4ee;
}

.selo-kwai {
    background: #ff7e00;
    color: #ffffff;
}

.logo-marketplace {
    display: block;
    height: 34px;
    width: auto;
    max-width: 90px;
    object-fit: contain;
}

.coluna-valor {
    text-align: right;
    white-space: nowrap;
}

#tabela-pedidos [hidden] {
    display: none;
}

/* Menu de colunas da tabela de pedidos */

.barra-colunas {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.btn-colunas {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.btn-colunas:hover,
.btn-colunas[aria-expanded="true"] {
    background: rgba(128, 128, 128, 0.12);
}

.menu-colunas {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    width: 300px;
    max-width: calc(100vw - 32px);
    margin-top: 6px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.item-coluna {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 6px;
}

.item-coluna:hover {
    background: rgba(128, 128, 128, 0.08);
}

.item-coluna label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.item-coluna input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #22c55e;
    cursor: pointer;
}

.seta-coluna {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--blue);
    font-size: 11px;
    cursor: pointer;
}

.seta-coluna:hover:not(:disabled) {
    background: rgba(128, 128, 128, 0.15);
}

.seta-coluna:disabled {
    visibility: hidden;
}

.restaurar-colunas {
    width: 100%;
    margin-top: 6px;
    padding: 8px;
    border: 0;
    border-top: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    cursor: pointer;
}

.restaurar-colunas:hover {
    color: var(--text);
}
/* Painel de listas de separação */

.acoes-lista-separacao {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.acoes-lista-separacao form {
    margin: 0;
}

.card .acoes-lista-separacao form button {
    margin-top: 0;
}

/* Filtros das telas de histórico da expedição */

.form-grid.filtros-historico {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 700px) {
    .form-grid.filtros-historico {
        grid-template-columns: 1fr;
    }
}

.pedidos-acoes {
    flex-wrap: wrap;
}

/* Pesquisa de pedidos */

.campo-busca-pedidos {
    margin-bottom: 18px;
}

/* Coluna Vínculo (só ícone) e menu de ações dos pedidos */

.coluna-icone {
    text-align: center;
    white-space: nowrap;
}

.icone-vinculo {
    font-size: 18px;
    text-decoration: none;
    cursor: default;
}

a.icone-vinculo {
    cursor: pointer;
}

.btn-mais-acoes {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.btn-mais-acoes:hover,
.btn-mais-acoes[aria-expanded="true"] {
    border-color: var(--border);
    background: rgba(128, 128, 128, 0.12);
}

.menu-acoes-pedido {
    position: fixed;
    z-index: 2000;
    min-width: 200px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.menu-acoes-pedido button {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.menu-acoes-pedido button:hover,
.menu-acoes-pedido button:focus {
    background: rgba(128, 128, 128, 0.15);
    outline: none;
}

/* Barra de filtros ativos da Gestão de Pedidos */

.filtros-ativos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

/* Um chip por filtro, compacto; cada valor tem o seu "x" */
.chip-filtro {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 100%;
    min-height: 28px;
    padding: 2px 4px 2px 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(128, 128, 128, 0.08);
    font-size: 12px;
    line-height: 1.3;
    color: var(--muted);
}

.chip-rotulo {
    font-weight: 600;
    white-space: nowrap;
}

.chip-valor {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 260px;
    padding-left: 6px;
    border-radius: 10px;
    background: rgba(128, 128, 128, 0.12);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.remover-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
}

.remover-chip:hover {
    background: var(--accent);
    color: #ffffff;
}

.limpar-chips {
    padding: 6px 10px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.limpar-chips:hover {
    text-decoration: underline;
}

/* Listas de filtro com seleção múltipla */

.multiselecao {
    position: relative;
}

.card form .multiselecao-botao {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 40px 0 14px;
    border: 1px solid #64748b55;
    border-radius: 8px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    color: inherit;
    font-size: 15px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}

.card form .multiselecao-botao:hover {
    background-color: rgba(128, 128, 128, 0.06);
}

.multiselecao-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.multiselecao-painel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 300px;
    margin-top: 4px;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.multiselecao-opcao {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

.multiselecao-opcao:hover {
    background: rgba(128, 128, 128, 0.1);
}

.multiselecao-opcao input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: none;
    accent-color: #22c55e;
    cursor: pointer;
}

.multiselecao-todos {
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
    border-radius: 6px 6px 0 0;
    font-weight: 600;
}

.multiselecao-vazia {
    margin: 0;
    padding: 9px 10px;
    color: var(--muted);
    font-size: 14px;
}

/* Resumo operacional: os 8 cartões numa linha no desktop */

@media (min-width: 1100px) {
    .resumo-cards {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 12px;
    }

    .resumo-cards .resumo-card {
        padding: 16px 14px;
    }
}

/* =========================================================
   Identidade Carvão + Violeta
   Bloco no fim do arquivo: tem prioridade sobre as regras antigas
   ========================================================= */

/* Cabeçalho e menu */

.topbar {
    gap: 28px;
    min-height: 60px;
    padding: 0 28px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.logo {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.logo span {
    color: var(--accent);
}

.menu {
    gap: 4px;
}

.menu a,
.menu > span {
    padding: 7px 12px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
}

.menu a:hover {
    color: var(--text);
    background: var(--surface-2);
}

.menu a.ativo {
    color: var(--accent-texto);
    background: var(--accent-suave);
    font-weight: 600;
}

.user-area select {
    height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13px;
}

.user-area form button {
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.user-area form button:hover {
    background: var(--surface-2);
}

/* Tipografia e cartões */

.container {
    padding: 32px 38px;
}

h1 {
    margin: 0 0 4px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.subtitle {
    margin-bottom: 24px;
    font-size: 14px;
}

.card {
    border-radius: var(--raio);
    padding: 20px;
}

.card h2 {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 700;
}

/* Botões: principal violeta, secundário com contorno */

.card form button,
.btn-principal {
    height: 40px;
    margin-top: 0;
    padding: 0 18px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--accent);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.card form button:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.card form button.btn-contorno-acento {
    background: transparent;
    color: var(--accent-texto);
}

.card form button.btn-contorno-acento:hover {
    background: var(--accent-suave);
}

.btn-limpar-pedidos,
.btn-visualizar-lote,
.btn-secundario,
.btn-colunas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-height: 0;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn-limpar-pedidos:hover,
.btn-visualizar-lote:hover,
.btn-secundario:hover,
.btn-colunas:hover {
    background: var(--surface-2);
}

.pedidos-acoes {
    gap: 10px;
    margin-top: 18px;
}

/* Campos de formulário */

.form-field label {
    font-size: 13px;
}

.form-field select,
.form-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.card form .multiselecao-botao {
    height: 40px;
    border-color: var(--border);
    background-color: var(--surface-2);
    font-size: 14px;
}

.form-field input:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--accent);
}

.form-grid.filtros-pedidos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

@media (max-width: 900px) {
    .form-grid.filtros-pedidos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .form-grid.filtros-pedidos {
        grid-template-columns: 1fr;
    }
}

.campo-busca-pedidos {
    margin-bottom: 0;
}

/* Resumo operacional */

.resumo-operacional h2 {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.resumo-cards .resumo-card,
.resumo-card {
    min-height: 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    gap: 8px;
}

.resumo-card:hover {
    border-color: var(--muted);
}

.resumo-card.ativo {
    border-color: var(--accent);
    background: var(--accent-suave);
    box-shadow: none;
}

.resumo-card-titulo {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.resumo-card.ativo .resumo-card-titulo {
    color: var(--accent-texto);
}

.resumo-card-valor {
    color: var(--text);
    font-size: 24px;
    font-weight: 700;
}

.resumo-operacional {
    margin-bottom: 18px;
}

/* Resultados: barra e tabela */

.resultados-pedidos {
    margin-top: 18px;
}

.barra-resultados {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.barra-resultados-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.barra-resultados .total-pedidos {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.selecionados-pedidos {
    margin-right: 6px;
    color: var(--muted);
    font-size: 14px;
}

.barra-resultados .btn-secundario {
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
}

.barra-resultados .barra-colunas {
    margin: 0;
}

.barra-resultados .btn-colunas {
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
}

.nota-limite {
    margin: -6px 0 12px;
    color: var(--muted);
    font-size: 13px;
}

.tabela-card {
    border: 1px solid var(--border);
    border-radius: var(--raio);
    background: var(--surface);
}

.tabela-card .data-table {
    margin-top: 0;
}

.data-table th {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.data-table th,
.data-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--border);
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table tbody tr:hover td {
    background: rgba(128, 128, 128, 0.04);
}

.texto-secundario {
    color: var(--muted);
}

.link-detalhes-pedido {
    color: var(--accent-texto);
    font-weight: 700;
}

/* Etiquetas de situação */

.etiqueta-situacao {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(155, 155, 167, 0.16);
    color: var(--muted);
}

.situacao-para_emitir { background: rgba(148, 163, 184, 0.16); color: #b6c2d2; }
.situacao-erro_fiscal { background: rgba(239, 68, 68, 0.16); color: #f87171; }
.situacao-para_enviar { background: rgba(59, 130, 246, 0.16); color: #7fb0ff; }
.situacao-envio_futuro { background: rgba(34, 211, 238, 0.14); color: #67e1f5; }
.situacao-programando_envio { background: rgba(167, 139, 250, 0.16); color: #c4b5fd; }
.situacao-para_imprimir { background: var(--accent-suave); color: var(--accent-texto); }
.situacao-para_retirada { background: rgba(245, 158, 11, 0.16); color: #f8b84e; }
.situacao-enviado { background: rgba(155, 155, 167, 0.16); color: #c4c4cf; }
.situacao-cancelado { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }

:root[data-theme="light"] .situacao-para_emitir { color: #475569; }
:root[data-theme="light"] .situacao-erro_fiscal { color: #b91c1c; }
:root[data-theme="light"] .situacao-para_enviar { color: #1d4ed8; }
:root[data-theme="light"] .situacao-envio_futuro { color: #0e7490; }
:root[data-theme="light"] .situacao-programando_envio { color: #6d28d9; }
:root[data-theme="light"] .situacao-para_retirada { color: #b45309; }
:root[data-theme="light"] .situacao-enviado { color: #52525b; }
:root[data-theme="light"] .situacao-cancelado { color: #b91c1c; }

/* Selos dos marketplaces: quadrados, como no layout */

.selo-marketplace {
    min-width: 28px;
    height: 24px;
    padding: 0 5px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
}

.selo-shopee {
    background: #e2482a;
}

/* Chips: um por filtro, um "x" cada */

.filtros-ativos {
    margin-bottom: 14px;
}

.chip-filtro {
    flex-wrap: nowrap;
    min-height: 30px;
    padding: 4px 6px 4px 12px;
    border-radius: 999px;
    background: var(--surface);
    font-size: 13px;
}

.chip-rotulo {
    color: var(--muted);
    font-weight: 500;
}

.chip-valor {
    max-width: 320px;
    padding: 0;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.limpar-chips {
    color: var(--accent-texto);
}

/* Anúncios: botão quadrado de vínculo (verde vinculado, âmbar sem vínculo) */

.vinculo-anuncio {
    flex-wrap: nowrap;
    gap: 12px;
}

.vinculo-anuncio .btn-vinculo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid;
    border-radius: 9px;
    cursor: pointer;
}

.btn-vinculo.vinculado {
    border-color: rgba(52, 211, 153, 0.45);
    background: rgba(52, 211, 153, 0.12);
    color: #34d399;
}

.btn-vinculo.sem-vinculo {
    border-color: rgba(251, 191, 36, 0.45);
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
}

.btn-vinculo:hover {
    filter: brightness(1.25);
}

.btn-vinculo:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.icone-quadrado {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 2px;
}

:root[data-theme="light"] .btn-vinculo.vinculado { color: #059669; }
:root[data-theme="light"] .btn-vinculo.sem-vinculo { color: #b45309; }

.legenda-vinculo {
    display: flex;
    gap: 20px;
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 13px;
}

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

.legenda-vinculo .icone-quadrado.vinculado { color: #34d399; }
.legenda-vinculo .icone-quadrado.sem-vinculo { color: #fbbf24; }

/* Ícones de elo no lugar do quadrado */

.btn-vinculo .icone-elo {
    width: 17px;
    height: 17px;
}

.legenda-vinculo .icone-elo {
    width: 14px;
    height: 14px;
}

.legenda-vinculado { color: #34d399; }
.legenda-sem-vinculo { color: #fbbf24; }

:root[data-theme="light"] .legenda-vinculado { color: #059669; }
:root[data-theme="light"] .legenda-sem-vinculo { color: #b45309; }

/* Coluna Vínculo dos pedidos: mesmos elos da tela de Anúncios */

.selo-vinculo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid;
    border-radius: 8px;
    text-decoration: none;
}

.selo-vinculo .icone-elo {
    width: 15px;
    height: 15px;
}

.selo-vinculo.vinculado {
    border-color: rgba(52, 211, 153, 0.45);
    background: rgba(52, 211, 153, 0.12);
    color: #34d399;
}

.selo-vinculo.sem-vinculo {
    border-color: rgba(251, 191, 36, 0.45);
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
}

.selo-vinculo.nao-encontrado {
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
}

a.selo-vinculo:hover {
    filter: brightness(1.25);
}

:root[data-theme="light"] .selo-vinculo.vinculado { color: #059669; }
:root[data-theme="light"] .selo-vinculo.sem-vinculo { color: #b45309; }
:root[data-theme="light"] .selo-vinculo.nao-encontrado { color: #b91c1c; }

/* Botão de colunas só com ícone */

.barra-resultados .btn-colunas.btn-icone-colunas {
    width: 38px;
    height: 34px;
    padding: 0;
    color: var(--accent-texto);
}

.btn-icone-colunas[aria-expanded="true"] {
    border-color: var(--accent);
    background: var(--accent-suave);
}

/* Dashboard */

.painel-secao {
    margin: 26px 0 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.painel-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 1000px) {
    .painel-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .painel-cards {
        grid-template-columns: 1fr;
    }
}

.painel-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--raio);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
}

a.painel-card:hover {
    border-color: var(--accent);
}

.painel-card-titulo {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.painel-card-valor {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}

.painel-card-detalhe {
    color: var(--muted);
    font-size: 12px;
}

.painel-card.alerta-vermelho {
    border-color: rgba(248, 113, 113, 0.5);
    background: rgba(248, 113, 113, 0.08);
}

.painel-card.alerta-vermelho .painel-card-valor { color: #f87171; }

.painel-card.alerta-ambar {
    border-color: rgba(251, 191, 36, 0.5);
    background: rgba(251, 191, 36, 0.08);
}

.painel-card.alerta-ambar .painel-card-valor { color: #fbbf24; }

:root[data-theme="light"] .painel-card.alerta-vermelho .painel-card-valor { color: #b91c1c; }
:root[data-theme="light"] .painel-card.alerta-ambar .painel-card-valor { color: #b45309; }

.painel-integracoes ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.painel-integracoes li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
}

.painel-conta-nome {
    font-weight: 600;
}

.painel-conta-ultima {
    flex-basis: 100%;
    color: var(--muted);
    font-size: 12px;
}

.painel-grafico {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
    height: 220px;
    padding: 20px 20px 14px;
}

.painel-barra {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.painel-barra-coluna {
    width: 100%;
    max-width: 46px;
    border-radius: 6px 6px 2px 2px;
    background: var(--accent);
    opacity: 0.85;
}

.painel-barra:hover .painel-barra-coluna {
    opacity: 1;
}

.painel-barra-valor {
    font-size: 13px;
    font-weight: 700;
}

.painel-barra-dia {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
}

.painel-barra-dia small {
    font-size: 11px;
}

/* Dashboard: cartões no estilo original (altos, título em cima,
   número grande embaixo) */

.painel-cards {
    gap: 22px;
}

.painel-card {
    min-height: 136px;
    padding: 22px 24px;
    border-radius: 14px;
    gap: 0;
}

.painel-card-titulo {
    color: var(--muted);
    font-size: 15px;
    font-weight: 600;
}

.painel-card-valor {
    margin-top: auto;
    padding-top: 22px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
}

.painel-card-detalhe {
    margin-top: 8px;
    font-size: 12px;
}

.painel-integracoes ul {
    margin-top: 14px;
}

/* Dashboard: área de vendas */

.painel-vendas {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 22px;
}

@media (max-width: 900px) {
    .painel-vendas {
        grid-template-columns: 1fr;
    }
}

.painel-card.vendas-hoje {
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--accent-suave), var(--surface) 70%);
}

.vendas-valor {
    margin-top: 14px;
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.vendas-quantidade {
    margin-top: 8px;
    color: var(--accent-texto);
    font-size: 17px;
    font-weight: 600;
}

.vendas-comparativo {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.vendas-comparativo > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vendas-comparativo small {
    color: var(--muted);
    font-size: 12px;
}

.variacao {
    font-size: 14px;
    font-weight: 700;
}

.variacao.alta { color: #34d399; }
.variacao.baixa { color: #f87171; }
.variacao.neutra { color: var(--muted); font-weight: 500; }

:root[data-theme="light"] .variacao.alta { color: #059669; }
:root[data-theme="light"] .variacao.baixa { color: #b91c1c; }

.vendas-valor-30 {
    margin-top: 14px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

.vendas-numeros {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.vendas-numeros dt {
    color: var(--muted);
    font-size: 12px;
}

.vendas-numeros dd {
    margin: 4px 0 0;
    font-size: 16px;
    font-weight: 700;
}

.painel-grafico-vendas {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 22px;
}

.painel-grafico-vendas .painel-grafico {
    grid-template-columns: repeat(30, minmax(0, 1fr));
    gap: 4px;
    height: 160px;
    padding: 0;
    border: 0;
    background: transparent;
}

.painel-grafico-vendas .painel-barra-coluna {
    max-width: none;
    border-radius: 3px 3px 1px 1px;
}

.painel-grafico-vendas .painel-barra:last-child .painel-barra-coluna {
    opacity: 1;
    background: var(--accent-texto);
}

.painel-grafico-vendas .painel-barra-dia {
    min-height: 14px;
    font-size: 11px;
}

/* Dashboard: filtros */

.form-field[hidden] {
    display: none;
}

.painel-filtros {
    margin-bottom: 4px;
}

.vendas-intervalo {
    margin-left: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

/* Dashboard: filtro em cada card (ícone de funil) */

.painel-card.com-filtro,
.painel-grafico-vendas {
    position: relative;
}

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

.painel-card-wrap {
    position: relative;
    display: flex;
    min-width: 0;
}

.painel-card-wrap > .painel-card {
    flex: 1;
}

.painel-card-wrap .painel-card-titulo {
    padding-right: 36px;
}

.filtro-card-canto {
    position: absolute;
    top: 14px;
    right: 14px;
}

.filtro-card {
    position: relative;
    flex-shrink: 0;
}

.filtro-card.aberto {
    z-index: 40;
}

.btn-filtro-card {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.btn-filtro-card:hover,
.btn-filtro-card[aria-expanded="true"] {
    border-color: var(--border);
    background: var(--surface-2);
    color: var(--text);
}

.btn-filtro-card.ativo {
    color: var(--accent-texto);
}

/* Ponto indicando que o card está filtrado */
.btn-filtro-card.ativo::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

.card.popover-filtro-card {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    width: 300px;
    max-width: calc(100vw - 32px);
    padding: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    text-align: left;
}

.card.popover-filtro-card[hidden] {
    display: none;
}

.popover-filtro-card form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.popover-filtro-card .form-field label {
    font-size: 12px;
}

.popover-filtro-card .acoes-popover {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.card .popover-filtro-card .acoes-popover button,
.popover-filtro-card .acoes-popover .btn-limpar-pedidos {
    height: 38px;
    margin: 0;
    padding: 0 16px;
}

.filtro-aplicado {
    display: block;
    margin-top: 4px;
    color: var(--accent-texto);
    font-size: 12px;
    font-weight: 500;
}

/* Fiscal: abas, blocos de regras e campos com erro */

.abas-fiscal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 18px;
    border-bottom: 1px solid var(--border);
}

.abas-fiscal a {
    padding: 10px 14px;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-weight: 600;
    text-decoration: none;
}

.abas-fiscal a:hover {
    color: var(--text);
}

.abas-fiscal a.ativa {
    border-bottom-color: var(--accent);
    color: var(--text);
}

.abas-fiscal.abas-cnpj {
    margin-top: -6px;
}

.abas-fiscal.abas-cnpj a {
    font-size: 13px;
}

.form-fiscal > .card,
.form-fiscal > .pedidos-acoes,
.abas-fiscal ~ .card + .card {
    margin-top: 18px;
}

.grade-fiscal {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 12px;
}

@media (max-width: 900px) {
    .grade-fiscal {
        grid-template-columns: 1fr;
    }
}

.bloco-fiscal {
    margin: 16px 0 0;
    padding: 14px 18px 18px;
    border: 1px solid var(--border);
    border-radius: var(--raio);
}

.bloco-fiscal legend {
    padding: 0 6px;
    font-weight: 700;
}

.bloco-fiscal > p {
    margin: 0;
    font-size: 13px;
}

.ajuda-campo {
    color: var(--muted);
    font-size: 12px;
}

.erro-campo {
    color: #f87171;
    font-size: 12px;
    font-weight: 600;
}

:root[data-theme="light"] .erro-campo { color: #b91c1c; }

.form-field.com-erro input,
.form-field.com-erro select {
    border-color: #ef4444;
}

.selo-fiscal {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.selo-fiscal.ok {
    background: #22c55e22;
    color: #4ade80;
}

.selo-fiscal.pendente {
    background: #f59e0b22;
    color: #fbbf24;
}

:root[data-theme="light"] .selo-fiscal.ok { color: #15803d; }
:root[data-theme="light"] .selo-fiscal.pendente { color: #b45309; }

.busca-fiscal {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.busca-fiscal .form-field {
    flex: 1;
    max-width: 420px;
}

.card .busca-fiscal button {
    height: 46px;
    margin: 0;
}

.cabecalho-fiscal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cabecalho-fiscal h2 small {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 400;
}

.copiar-fiscal {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.copiar-fiscal select {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: inherit;
}

.card form.copiar-fiscal button {
    height: 36px;
    margin: 0;
    padding: 0 14px;
}

.btn-limpar-pedidos.btn-fiscal-produto {
    padding: 6px 12px;
    font-size: 13px;
}

/* Fiscal: ICMS por estado de destino */

.explicacao-fiscal {
    margin: 10px 0 16px;
    padding-left: 18px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.tabela-icms-uf td {
    vertical-align: middle;
}

.tabela-icms-uf select,
.tabela-icms-uf input {
    width: 100%;
    max-width: 140px;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: inherit;
}

.tabela-icms-uf td.com-erro select,
.tabela-icms-uf td.com-erro input {
    border-color: #ef4444;
}

.tabela-icms-uf td small {
    display: block;
}

.tabela-icms-uf tr.uf-emitente td {
    opacity: 0.7;
}

.cabecalho-fiscal button.btn-limpar-pedidos,
.card form .cabecalho-fiscal button.btn-limpar-pedidos {
    margin: 0;
    padding: 8px 14px;
    background: transparent;
    color: inherit;
    font-size: 13px;
}

/* Fiscal: o negrito dos cards (.card strong) é grande; aqui é texto comum */
.card .explicacao-fiscal strong,
.card .tabela-icms-uf strong,
.card .ajuda-campo strong,
.card .texto-secundario strong {
    font-size: inherit;
    font-weight: 700;
    display: inline;
}

.card .tabela-icms-uf td:first-child strong {
    display: inline-block;
    min-width: 30px;
}

.tabela-icms-uf select,
.tabela-icms-uf input {
    height: 40px;
    font-size: 14px;
}

#status-cnpj {
    display: block;
    margin-top: -6px;
}

.abas-fiscal ~ .card .data-table strong {
    font-size: inherit;
}

/* Fiscal: certificado digital */

.selo-fiscal.vencido {
    background: #ef444422;
    color: #f87171;
}

:root[data-theme="light"] .selo-fiscal.vencido { color: #b91c1c; }

.dados-certificado {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px 24px;
    margin: 16px 0;
}

.dados-certificado dt {
    color: var(--muted);
    font-size: 12px;
}

.dados-certificado dd {
    margin: 4px 0 0;
    font-weight: 600;
}

.aviso-certificado {
    margin: 12px 0;
    padding: 12px 16px;
    border-radius: 8px;
    background: #ef444414;
}

.form-certificado .form-field input[type="file"] {
    padding: 9px;
}

.card form.form-remover-certificado button.btn-remover-certificado {
    margin: 0 0 8px;
    padding: 8px 14px;
    border: 1px solid #ef4444;
    background: transparent;
    color: #f87171;
}

/* Fiscal: certificado na lista de emitentes (janela) */

.celula-certificado {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.btn-certificado {
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--accent-texto);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-certificado:hover {
    border-color: var(--accent);
}

dialog.janela-certificado {
    width: 520px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow: auto;
    color: var(--text);
}

dialog.janela-certificado::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.janela-certificado .cabecalho-fiscal h2 {
    margin: 0;
}

.janela-certificado .form-certificado {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
}

.btn-fechar-janela {
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.card form .acoes-janela button {
    margin: 0;
}

.janela-certificado .dados-certificado {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.janela-certificado .form-remover-certificado {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

/* Botão Salvar do cadastro do emitente (fora de .card) */
.form-fiscal .pedidos-acoes > button {
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.form-fiscal .pedidos-acoes > button:hover {
    background: var(--accent-hover);
}

/* Fiscal: lojas associadas (⋮ na lista de emitentes) */

.btn-mais-opcoes {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* Dentro do formulário de status da loja (Gestão de Lojas) */
.card form button.btn-mais-opcoes {
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
}

.card form button.btn-mais-opcoes:hover,
.btn-mais-opcoes:hover {
    border-color: var(--accent);
    color: var(--text);
}

dialog.janela-lojas {
    width: 860px;
}

.tabela-lojas-associadas td {
    vertical-align: middle;
}

.opcao-frete {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.card form .tabela-lojas-associadas button.btn-acao-conta.perigo {
    margin: 0;
    padding: 6px 12px;
    border: 1px solid #ef4444;
    background: transparent;
    color: #f87171;
    font-size: 13px;
}

.adicionar-conta {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.adicionar-conta summary {
    color: var(--accent-texto);
    font-weight: 600;
    cursor: pointer;
}

.adicionar-conta form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.adicionar-conta select {
    flex: 1;
    min-width: 240px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: inherit;
}

.card .adicionar-conta form button {
    margin: 0;
}

/* Produtos: nome na NF-e ocupa a linha inteira do formulário */
.form-grid .campo-nome-nfe {
    grid-column: 1 / -1;
}

/* Gestão de Pedidos: chave da emissão automática de NF-e */

.chave-emissao-automatica {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    margin-right: 12px;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.chave-emissao-automatica.bloqueada {
    cursor: not-allowed;
    opacity: 0.7;
}

.chave-emissao-automatica input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chave-trilho {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--border);
    transition: background 0.15s;
}

.chave-trilho::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.15s;
}

.chave-emissao-automatica input:checked + .chave-trilho {
    background: var(--accent);
}

.chave-emissao-automatica input:checked + .chave-trilho::after {
    transform: translateX(18px);
}

.chave-emissao-automatica input:focus-visible + .chave-trilho {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.chaves-automaticas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-left: auto;
    margin-right: 12px;
}

.chaves-automaticas .chave-emissao-automatica {
    margin: 0;
}

/* Lotes: "Gerar etiquetas" é um botão com o visual do "Visualizar lote" */
button.btn-gerar-etiquetas-lote {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    font-family: inherit;
    cursor: pointer;
}

button.btn-gerar-etiquetas-lote:hover {
    background: var(--accent-hover);
}

button.btn-gerar-etiquetas-lote:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Lotes: pergunta "Etiquetas impressas?" ao gerar as etiquetas */
dialog.janela-impressao-lote {
    width: 460px;
    max-width: calc(100vw - 32px);
    color: var(--text);
}

dialog.janela-impressao-lote::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.janela-impressao-lote h2 {
    margin: 0 0 8px;
}

.acoes-janela-impressao {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.acoes-janela-impressao button {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.janela-impressao-lote p {
    margin: 0;
    color: var(--muted);
}

#impressao-sim {
    border: 0;
    background: var(--accent);
    color: #ffffff;
}

#impressao-nao {
    background: transparent;
    color: inherit;
}

/* Integrações: lixeira para remover conta sem pedidos */
.btn-remover-integracao,
.card form button.btn-remover-integracao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid #ef444466;
    border-radius: 8px;
    background: transparent;
    color: #f87171;
    cursor: pointer;
}

.btn-remover-integracao:hover:not(:disabled),
.card form button.btn-remover-integracao:hover {
    border-color: #ef4444;
    background: #ef444414;
}

.btn-remover-integracao:disabled {
    border-color: var(--border);
    color: var(--muted);
    opacity: 0.5;
    cursor: not-allowed;
}

/* Gestão de Pedidos: "Limpar filtros" à direita, botão branco */
/* Botão padrão "Limpar filtros" (componentes.botao_limpar_filtros):
   branco, no canto direito da linha de ações, em todas as telas */
a.btn-limpar-pedidos.btn-limpar-filtros,
.pedidos-acoes > a.btn-limpar-pedidos.btn-limpar-filtros {
    margin-left: auto !important;
    border-color: #ffffff;
    background: #ffffff;
    color: #111827;
    white-space: nowrap;
}

a.btn-limpar-pedidos.btn-limpar-filtros:hover {
    background: #e5e7eb;
    border-color: #e5e7eb;
}

/* No tema claro, o branco some no fundo: contorno escuro */
:root[data-theme="light"] a.btn-limpar-pedidos.btn-limpar-filtros {
    border-color: #111827;
}

/* Na busca do Fiscal → Produtos, mesma altura do Buscar */
.busca-fiscal a.btn-limpar-filtros {
    height: 46px;
    box-sizing: border-box;
}

/* No filtro de cada card do Dashboard: Aplicar à esquerda, Limpar à direita */
.popover-filtro-card .acoes-popover {
    justify-content: flex-start;
}

/* Gestão de Pedidos: "Filtrar pedidos" no canto superior direito */
.cabecalho-filtros-pedidos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cabecalho-filtros-pedidos h2 {
    margin: 0;
}

.btn-filtrar-pedidos {
    min-height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.btn-filtrar-pedidos:hover {
    background: var(--accent-hover);
}

/* Gestão de Pedidos: Listas de separação e Lotes com destaque sutil */
.pedidos-acoes > a.btn-limpar-pedidos.btn-atalho-expedicao {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent-texto);
}

.pedidos-acoes > a.btn-limpar-pedidos.btn-atalho-expedicao:hover {
    border-color: var(--accent);
    background: var(--accent-suave);
}

/* Gestão de Pedidos: paginação e quantidade por página */
.barra-paginacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    margin: 14px 0;
    color: var(--muted);
    font-size: 13px;
}

.paginacao-paginas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.paginacao-paginas a,
.paginacao-paginas span {
    min-width: 34px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text);
    text-align: center;
    text-decoration: none;
}

.paginacao-paginas a:hover {
    border-color: var(--border);
    background: var(--surface-2);
}

.paginacao-paginas .paginacao-atual {
    border-color: var(--accent);
    background: var(--accent-suave);
    color: var(--accent-texto);
    font-weight: 700;
}

.paginacao-paginas .paginacao-reticencias,
.paginacao-paginas .desativada {
    color: var(--muted);
    opacity: 0.6;
}

.paginacao-quantidade {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.paginacao-quantidade select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: inherit;
}

/* ==========================================================
   Gestão de Pedidos: barra de resultados (checklist 2)
   ========================================================== */

.barra-resultados {
    display: block;
    margin-bottom: 12px;
}

.barra-resultados-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.barra-resultados-controles {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Controles da linha superior com a mesma altura */
.btn-controle,
.barra-resultados .btn-colunas.btn-icone-colunas,
.seletor-exibir {
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-controle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
}

.barra-resultados .btn-colunas.btn-icone-colunas {
    width: 38px;
}

.seletor-exibir {
    padding: 0 10px;
}

.btn-controle:hover,
.btn-controle[aria-expanded="true"],
.seletor-exibir:hover {
    border-color: var(--accent);
}

/* Automações */
.menu-automacoes {
    position: relative;
}

.ponto-automacao {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted);
    opacity: 0.5;
}

.ponto-automacao.ativo {
    background: #22c55e;
    opacity: 1;
    box-shadow: 0 0 0 3px #22c55e33;
}

.card.painel-automacoes {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1000;
    width: 340px;
    max-width: calc(100vw - 32px);
    padding: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.card.painel-automacoes[hidden] {
    display: none;
}

.item-automacao + .item-automacao {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.item-automacao .chave-emissao-automatica {
    margin: 0;
}

.explicacao-automacao {
    display: block;
    margin: 6px 0 0 50px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

/* Ações em lote: só com seleção, entrando suave */
.barra-acoes-lote {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 10px;
    background: var(--accent-suave);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.barra-acoes-lote[hidden] {
    display: none;
}

.barra-acoes-lote.visivel {
    opacity: 1;
    transform: none;
}

.acoes-lote-contagem {
    font-weight: 700;
}

.grupo-acoes-lote {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-left: 18px;
    border-left: 1px solid var(--border);
}

.rotulo-grupo-acoes {
    margin-right: 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.btn-lote {
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-lote:hover {
    border-color: var(--accent);
}

.btn-lote.principal {
    border-color: var(--accent);
    background: var(--accent);
    color: #ffffff;
}

.btn-lote.principal:hover {
    background: var(--accent-hover);
}

.btn-lote:disabled {
    opacity: 0.6;
    cursor: wait;
}

.limpar-selecao {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.limpar-selecao:hover {
    color: var(--text);
    text-decoration: underline;
}

/* Paginação no rodapé da tabela */
.resultados-pedidos .barra-paginacao {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.paginacao-paginas .paginacao-seta.desativada {
    opacity: 0.35;
    cursor: not-allowed;
}

/* A tabela começa logo abaixo do cabeçalho fixo ao rolar até ela */
#resultados-pedidos {
    scroll-margin-top: 90px;
}


/* Linha principal única: total · Expedição · (direita) Automações, Exibir, Colunas */
.barra-resultados-topo {
    flex-wrap: nowrap;
    gap: 20px;
}

.grupo-expedicao-linha {
    display: flex;
    align-items: center;
    gap: 8px;
}

.barra-resultados-controles {
    margin-left: auto;
}

.barra-resultados-topo .btn-controle,
.barra-resultados-topo .seletor-exibir,
.barra-resultados .btn-colunas.btn-icone-colunas {
    height: 36px;
    border-radius: 8px;
    white-space: nowrap;
}

.barra-resultados .btn-colunas.btn-icone-colunas {
    width: 36px;
}

.barra-resultados-info,
.barra-resultados-info .total-pedidos,
.selecionados-pedidos {
    white-space: nowrap;
}

/* Abaixo de 1100px: Expedição desce para a segunda linha */
@media (max-width: 1099px) {
    .barra-resultados-topo {
        flex-wrap: wrap;
        gap: 10px 20px;
    }

    .barra-resultados-info {
        order: 1;
    }

    .barra-resultados-controles {
        order: 2;
    }

    .grupo-expedicao-linha {
        order: 3;
        flex-basis: 100%;
    }
}

/* Para imprimir: engrenagem dos lotes e confirmação de Criar lotes */
.acoes-cabecalho-filtros {
    display: flex;
    align-items: center;
    gap: 8px;
}

.menu-config-lotes {
    position: relative;
}

.btn-engrenagem-lotes {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--accent-suave);
    color: var(--accent-texto);
    cursor: pointer;
}

.btn-engrenagem-lotes:hover,
.btn-engrenagem-lotes[aria-expanded="true"] {
    border-color: var(--accent-texto);
}

.card.painel-config-lotes {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1000;
    width: 330px;
    max-width: calc(100vw - 32px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.card.painel-config-lotes[hidden] {
    display: none;
}

.painel-config-lotes h3,
.janela-criar-lotes h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.rotulo-config-lotes {
    font-size: 13px;
    font-weight: 600;
}

.grade-tamanho-lote {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.opcao-tamanho-lote {
    height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.opcao-tamanho-lote:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-suave);
    color: var(--accent-texto);
    font-weight: 700;
}

.acoes-config-lotes {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.acoes-config-lotes button {
    height: 40px;
    margin: 0;
    padding: 0 16px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

#salvar-config-lotes,
#confirmar-criar-lotes {
    border: 0;
    background: var(--accent);
    color: #ffffff;
}

#salvar-config-lotes:hover,
#confirmar-criar-lotes:hover {
    background: var(--accent-hover);
}

dialog.janela-criar-lotes {
    width: 480px;
    max-width: calc(100vw - 32px);
    padding: 26px 28px;
    color: var(--text);
}

dialog.janela-criar-lotes[open] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

dialog.janela-criar-lotes::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.resumo-criar-lotes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.resumo-criar-lotes > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.resumo-criar-lotes span {
    color: var(--muted);
    font-size: 12px;
}

.card .resumo-criar-lotes strong {
    font-size: 24px;
}

.divisao-lotes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
}

.linha-lote {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.linha-lote span {
    width: 64px;
    color: var(--muted);
}

.trilho-lote {
    flex-grow: 1;
    height: 10px;
    border-radius: 999px;
    background: var(--border);
}

.trilho-lote > div {
    height: 10px;
    border-radius: 999px;
    background: var(--accent);
}

.card .linha-lote strong {
    width: 44px;
    font-size: 13px;
    text-align: right;
}

/* Históricos (listas e lotes): Número | Situação | Período */
.form-grid.filtros-historico {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 700px) {
    .form-grid.filtros-historico {
        grid-template-columns: 1fr;
    }
}

/* Históricos: "← Voltar aos pedidos" na linha do título, à direita */
.cabecalho-historico {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cabecalho-historico h1 {
    margin-bottom: 0;
}

.cabecalho-historico + .subtitle {
    margin-top: 8px;
}

.btn-voltar-pedidos {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    height: 36px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid rgba(124, 108, 242, 0.35);
    border-radius: 8px;
    background: rgba(124, 108, 242, 0.12);
    color: #b4a9fb;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-voltar-pedidos:hover {
    border-color: rgba(124, 108, 242, 0.6);
    background: rgba(124, 108, 242, 0.22);
}

:root[data-theme="light"] .btn-voltar-pedidos {
    color: #5a38ea;
}

/* Telas pequenas: só a seta (com tooltip) */
@media (max-width: 600px) {
    .btn-voltar-pedidos {
        width: 36px;
        padding: 0;
        justify-content: center;
    }

    .texto-voltar-pedidos {
        display: none;
    }
}

/* Produtos: lojas que vendem o produto (lista suspensa com caixas) */
.campo-lojas-produto {
    grid-column: 1 / -1;
}

.campo-lojas-produto .multiselecao {
    max-width: 480px;
}

.coluna-lojas-produto {
    max-width: 260px;
    color: var(--muted);
    font-size: 13px;
}

/* Lojas do produto: elo verde (vinculadas) ou sem cor (nenhuma) */
.selo-vinculo.sem-loja {
    border-color: var(--border);
    background: transparent;
    color: var(--muted);
}

.coluna-lojas-produto .selo-vinculo {
    cursor: help;
}

/* Caixinha de dica (data-dica), posicionada pelo pedidos.js */
.caixa-dica {
    position: fixed;
    z-index: 2000;
    max-width: 280px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-line;
    pointer-events: none;
}

.caixa-dica[hidden] {
    display: none;
}

/* Produtos cadastrados: título e botão de colunas na mesma linha */
.cabecalho-lista-produtos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cabecalho-lista-produtos h2 {
    margin: 0;
}

.cabecalho-lista-produtos .barra-colunas {
    margin: 0;
    padding: 0;
}

.cabecalho-lista-produtos .btn-icone-colunas {
    width: 38px;
    height: 34px;
    padding: 0;
    color: var(--accent-texto);
}

#tabela-produtos [hidden] {
    display: none;
}

/* Fiscal → Produtos: lojas vinculadas e Editar */
.lojas-produto-fiscal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.btn-limpar-pedidos.btn-editar-fiscal {
    padding: 6px 14px;
    font-size: 13px;
}

/* Menu: Produtos com submenu ao passar o mouse */
.menu-suspenso {
    position: relative;
    display: inline-flex;
}

.menu-suspenso .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2000;
    display: none;
    min-width: 210px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4);
}

/* Faixa invisível entre o item e o submenu, para o mouse não "cair" */
.menu-suspenso .submenu::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.menu-suspenso:hover .submenu,
.menu-suspenso:focus-within .submenu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-suspenso .submenu a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    white-space: nowrap;
}

.menu-suspenso .submenu a:hover {
    background: var(--accent-suave);
    color: var(--text);
}

.btn-filtrar-pedidos.btn-novo-produto {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Produtos: Controle de estoque (Mínimo, Ideal, Real) */
.form-grid .grupo-estoque-produto {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.grupo-estoque-produto legend {
    padding: 0 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 640px) {
    .form-grid .grupo-estoque-produto {
        grid-template-columns: 1fr;
    }
}

.estoque-baixo {
    color: #fbbf24;
    font-weight: 700;
    cursor: help;
}

:root[data-theme="light"] .estoque-baixo { color: #b45309; }

/* "Controla estoque": marcador no topo do grupo; desligado fica apagado */
.grupo-estoque-produto .opcao-controla-estoque {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.opcao-controla-estoque input {
    width: 18px;
    height: 18px;
    accent-color: #22c55e;
}

.grupo-estoque-produto.estoque-desligado .form-field {
    opacity: 0.45;
}

.estoque-sem-controle {
    color: var(--muted);
    font-size: 13px;
}

/* Produtos: Anúncios vinculados (cadastro e edição) */
.anuncios-produto {
    margin: 20px 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.anuncios-produto h3 {
    margin: 0 0 10px;
    font-size: 15px;
}

.tabela-anuncios-produto td {
    vertical-align: middle;
    font-size: 13px;
}

.codigo-anuncio-produto {
    display: inline-block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

a.codigo-anuncio-produto {
    color: var(--accent-texto);
}

.tabela-anuncios-produto .anuncio-ativo { color: #34d399; }
.tabela-anuncios-produto .anuncio-inativo { color: var(--muted); }
:root[data-theme="light"] .tabela-anuncios-produto .anuncio-ativo { color: #059669; }

.btn-editar-anuncio-produto {
    white-space: nowrap;
}

/* Produtos: Medidas e peso (embalagem original e pacote de envio) */
.form-grid .grupo-medidas-produto {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.grupo-medidas-produto legend {
    padding: 0 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.subtitulo-medidas {
    font-size: 13px;
    font-weight: 700;
}

.subtitulo-medidas small {
    color: var(--muted);
    font-weight: 400;
}

.linha-medidas {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 6px;
}

@media (max-width: 900px) {
    .linha-medidas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Cadastrar anúncio */
.cabecalho-pagina-anuncio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.titulo-com-selo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.titulo-com-selo h1 {
    margin: 0;
}

.selo-tipo-anuncio {
    padding: 4px 12px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.selo-tipo-anuncio.catalogo {
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(56, 189, 248, 0.14);
    color: #7dd3fc;
}

.selo-tipo-anuncio.proprio {
    border-color: rgba(124, 92, 255, 0.45);
    background: var(--accent-suave);
    color: var(--accent-texto);
}

:root[data-theme="light"] .selo-tipo-anuncio.catalogo { color: #0369a1; }

.secao-anuncio {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
}

.secao-anuncio h2 {
    margin: 0;
    font-size: 17px;
}

.cabecalho-secao-anuncio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.grade-anuncio {
    display: grid;
    gap: 16px;
}

.grade-anuncio.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-anuncio.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .grade-anuncio.tres,
    .grade-anuncio.quatro { grid-template-columns: 1fr; }
}

.secao-anuncio textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

.contador {
    margin-left: 6px;
    color: var(--muted);
    font-weight: 400;
}

.garantia-anuncio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.campo-categoria {
    position: relative;
}

.lista-categorias {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.lista-categorias[hidden] { display: none; }

.lista-categorias button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.lista-categorias button:hover { background: var(--accent-suave); }
.lista-categorias button span { color: var(--muted); font-size: 12px; }

.quadro-catalogo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(56, 189, 248, 0.45);
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.08);
}

.quadro-catalogo[hidden] { display: none; }

.foto-catalogo {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 8px;
    object-fit: contain;
    background: #fff;
}

.texto-catalogo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

/* Campo bloqueado pelo catálogo: tracejado e cadeado no rótulo */
.bloqueado input,
.bloqueado select,
.bloqueado textarea,
input.bloqueado {
    border-style: dashed !important;
    opacity: 0.7;
}

.bloqueado > label::after,
.secao-anuncio.bloqueado > h2::after,
.secao-anuncio.bloqueado .cabecalho-secao-anuncio h2::after {
    content: " 🔒";
    font-size: 12px;
}

.controle-atributo {
    display: flex;
    gap: 6px;
}

.controle-atributo > input,
.controle-atributo > select:not(.unidade-atributo) {
    flex: 1;
    min-width: 0;
}

.unidade-atributo {
    width: 76px;
}

.obrigatorio {
    color: #fbbf24;
}

#secao-ficha details summary {
    cursor: pointer;
    color: var(--accent-texto);
    font-weight: 600;
    margin-bottom: 12px;
}

.selo-medidas {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.14);
    color: #34d399;
    font-size: 12px;
    font-weight: 700;
}

.selo-medidas[hidden] { display: none; }

.opcao-anuncio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.opcao-anuncio input {
    width: 18px;
    height: 18px;
    accent-color: #22c55e;
}

.resultado-anuncio {
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid;
    border-radius: 10px;
}

.resultado-anuncio.sucesso {
    border-color: rgba(52, 211, 153, 0.45);
    background: rgba(52, 211, 153, 0.1);
}

.resultado-anuncio.erro {
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.1);
}

.resultado-anuncio ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.resultado-anuncio a {
    display: inline-block;
    margin-top: 8px;
}

.acoes-anuncio {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.aviso-anuncio.erro {
    color: #f87171;
}

.grade-anuncio.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; }

@media (max-width: 900px) {
    .grade-anuncio.cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Editar produto: janela larga (estoque, medidas e anúncios vinculados) */
.modal-produto-conteudo.modal-editar-produto-largo {
    max-width: 1100px;
}

/* Editar anúncio */
.selo-tipo-anuncio.full {
    border-color: rgba(52, 211, 153, 0.45);
    background: rgba(52, 211, 153, 0.12);
    color: #34d399;
}

:root[data-theme="light"] .selo-tipo-anuncio.full { color: #047857; }

.avisos-edicao-anuncio {
    margin: 0 0 16px;
    padding: 12px 16px 12px 32px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--muted);
    font-size: 13px;
}

.miniaturas-anuncio {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.miniaturas-anuncio img {
    width: 72px;
    height: 72px;
    border: 1px solid var(--border);
    border-radius: 8px;
    object-fit: contain;
    background: #fff;
}

.miniaturas-anuncio:empty { display: none; }

/* Editar anúncio: abas por marketplace */
.abas-anuncio {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.aba-anuncio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.aba-anuncio:hover { color: var(--text); }

.aba-anuncio.ativa {
    border-bottom-color: var(--accent);
    color: var(--text);
}

.aba-anuncio .em-breve {
    padding: 1px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.painel-aba-anuncio[hidden] { display: none; }

.painel-em-breve p {
    margin: 0;
    color: var(--muted);
    max-width: 720px;
}

.grade-anuncio .campo-garantia-largo {
    grid-column: span 2;
}

@media (max-width: 900px) {
    .grade-anuncio .campo-garantia-largo { grid-column: auto; }
}

/* Textos longos do anúncio no mesmo tom dos campos */
.secao-anuncio textarea {
    padding: 12px;
    border: 1px solid #64748b55;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 14px;
    line-height: 1.5;
}

/* Editar anúncio: galeria de fotos */
.galeria-fotos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.foto-anuncio {
    position: relative;
    width: 128px;
    height: 128px;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.foto-anuncio:first-child {
    border: 2px solid var(--accent);
}

.foto-anuncio img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.foto-anuncio.enviando img { opacity: 0.4; }

.capa-foto,
.status-foto {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.status-foto {
    top: auto;
    bottom: 6px;
    background: rgba(0, 0, 0, 0.7);
}

.acoes-foto {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    opacity: 0;
    transition: opacity 0.15s;
}

.foto-anuncio:hover .acoes-foto,
.foto-anuncio:focus-within .acoes-foto {
    opacity: 1;
}

.acoes-foto button {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.acoes-foto button:last-child {
    background: #ef4444;
    color: #fff;
}

.acoes-foto button:disabled {
    opacity: 0.35;
    cursor: default;
}

@media (hover: none) {
    .acoes-foto { opacity: 1; }
}

.btn-subir-fotos {
    align-self: flex-start;
    cursor: pointer;
}

/* Ficha técnica: número + unidade lado a lado. Sem isto o
   ".form-field select { width: 100% }" esmagava o campo do número. */
.controle-atributo > input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.controle-atributo .unidade-atributo {
    flex: 0 0 96px;
    width: 96px;
}

/* Editar anúncio: lojas e códigos do mesmo SKU */
.resumo-lojas-anuncio {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 10px;
    margin: 10px 0 4px;
    font-size: 14px;
}

.resumo-lojas-anuncio dt {
    color: var(--muted);
}

.resumo-lojas-anuncio dd {
    margin: 0;
}

.codigo-loja-anuncio {
    color: var(--accent-texto);
    text-decoration: none;
}

.codigo-loja-anuncio:hover {
    text-decoration: underline;
}

.codigo-loja-anuncio.atual {
    font-weight: 700;
}

/* Produtos › Controle de estoque */
.acoes-cabecalho-estoque {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cartoes-estoque {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.cartao-estoque {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: inherit;
    text-decoration: none;
}

.cartao-estoque span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.cartao-estoque strong {
    font-size: 28px;
}

.cartao-estoque.minimo { border-color: rgba(248, 113, 113, 0.45); background: rgba(248, 113, 113, 0.08); }
.cartao-estoque.minimo span, .cartao-estoque.minimo strong { color: #fca5a5; }
.cartao-estoque.ideal { border-color: rgba(251, 191, 36, 0.45); background: rgba(251, 191, 36, 0.08); }
.cartao-estoque.ideal span, .cartao-estoque.ideal strong { color: #fcd34d; }
:root[data-theme="light"] .cartao-estoque.minimo span, :root[data-theme="light"] .cartao-estoque.minimo strong { color: #b91c1c; }
:root[data-theme="light"] .cartao-estoque.ideal span, :root[data-theme="light"] .cartao-estoque.ideal strong { color: #b45309; }

@media (max-width: 900px) {
    .cartoes-estoque { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.filtros-estoque {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;
    margin-bottom: 18px;
}

@media (max-width: 900px) {
    .filtros-estoque { grid-template-columns: 1fr; }
}

.acoes-filtros-estoque {
    display: flex;
    gap: 10px;
}

.tabela-estoque .numero { text-align: right; }
.tabela-estoque .sku-estoque { font-weight: 600; white-space: nowrap; }
.tabela-estoque .atual-estoque { font-weight: 700; font-size: 15px; }

.barra-estoque {
    position: relative;
    width: 150px;
    height: 8px;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.25);
}

.barra-estoque .preenchimento {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 999px;
}

.preenchimento.minimo { background: #f87171; }
.preenchimento.ideal { background: #fbbf24; }
.preenchimento.ok { background: #34d399; }

.barra-estoque .marca-minimo {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--text);
}

.selo-estoque {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.selo-estoque.minimo { background: rgba(248, 113, 113, 0.16); color: #fca5a5; }
.selo-estoque.ideal { background: rgba(251, 191, 36, 0.16); color: #fcd34d; }
.selo-estoque.ok { background: rgba(52, 211, 153, 0.14); color: #6ee7b7; }
:root[data-theme="light"] .selo-estoque.minimo { color: #b91c1c; }
:root[data-theme="light"] .selo-estoque.ideal { color: #b45309; }
:root[data-theme="light"] .selo-estoque.ok { color: #047857; }

.resumo-ajuste {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.resumo-ajuste div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.resumo-ajuste span { color: var(--muted); font-size: 12px; }
.resumo-ajuste strong { font-size: 20px; }

.tipos-movimento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.tipos-movimento legend {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
}

.opcao-movimento {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

.opcao-movimento:has(input:checked) {
    border: 2px solid var(--accent);
    background: var(--accent-suave);
}

.opcao-movimento input { accent-color: var(--accent); }

.previa-ajuste {
    min-height: 20px;
    margin: 6px 0 14px;
    color: var(--muted);
    font-size: 14px;
}

.titulo-historico-estoque {
    margin: 22px 0 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 15px;
}

.lista-movimentos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lista-movimentos li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}

.lista-movimentos strong { color: var(--text); }

.tabela-estoque .atual-estoque.negativo { color: #f87171; }
:root[data-theme="light"] .tabela-estoque .atual-estoque.negativo { color: #b91c1c; }

/* Ajustar estoque: prévia do resultado em destaque */
.previa-ajuste.ativa {
    padding: 12px 14px;
    border: 1px solid;
    border-radius: 10px;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
}

.previa-ajuste.ativa strong { font-size: 17px; }

.previa-ajuste.minimo { border-color: rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.12); }
.previa-ajuste.ideal { border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.12); }
.previa-ajuste.ok { border-color: rgba(52, 211, 153, 0.5); background: rgba(52, 211, 153, 0.12); }
.previa-ajuste.acima { border-color: rgba(56, 189, 248, 0.5); background: rgba(56, 189, 248, 0.12); }

/* Expedição › Checkout */
.caixa-bipe {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
    padding: 22px 26px;
    border: 2px solid var(--accent);
    border-radius: 14px;
    background: var(--accent-suave);
    color: var(--accent-texto);
}

.campo-bipe {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.campo-bipe label {
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
}

.campo-bipe input {
    height: 54px;
    padding: 0 16px;
    border: 1px solid var(--accent);
    border-radius: 10px;
    background: var(--bg, #0f1117);
    color: var(--text);
    font-size: 18px;
}

.ultimo-checkout {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 200px;
    padding-left: 20px;
    border-left: 1px solid var(--border);
}

.rotulo-pequeno {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.ultimo-ok { color: #34d399; }
:root[data-theme="light"] .ultimo-ok { color: #047857; }

@media (max-width: 900px) {
    .caixa-bipe { flex-wrap: wrap; }
    .ultimo-checkout { padding-left: 0; border-left: 0; }
}

.aviso-checkout {
    margin-bottom: 16px;
    padding: 14px 18px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
}

.aviso-checkout.erro { border-color: rgba(248, 113, 113, 0.6); background: rgba(248, 113, 113, 0.15); }
.aviso-checkout.sucesso { border-color: rgba(52, 211, 153, 0.6); background: rgba(52, 211, 153, 0.12); }

.cartao-estoque.ok { border-color: rgba(52, 211, 153, 0.45); background: rgba(52, 211, 153, 0.08); }
.cartao-estoque.ok span, .cartao-estoque.ok strong { color: #6ee7b7; }
:root[data-theme="light"] .cartao-estoque.ok span, :root[data-theme="light"] .cartao-estoque.ok strong { color: #047857; }

.painel-conferencia {
    margin-bottom: 18px;
    border: 2px solid var(--accent);
}

.cabecalho-conferencia {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.cabecalho-conferencia > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.codigo-conferencia { font-size: 24px; }

.progresso-conferencia {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.progresso-conferencia .barra-estoque { width: 200px; }

.itens-conferencia {
    display: flex;
    flex-direction: column;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border);
}

.item-conferencia {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 6px;
    border-bottom: 1px solid var(--border);
}

.item-conferencia > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.item-conferencia.completo { background: rgba(52, 211, 153, 0.07); }
.item-conferencia.completo .contagem-conferencia { color: #34d399; }
.contagem-conferencia { font-size: 20px; white-space: nowrap; }

.acoes-conferencia {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.acoes-conferencia .btn-problema {
    margin-right: auto;
    border: 1px solid rgba(248, 113, 113, 0.6);
    background: transparent;
    color: #fca5a5;
}

:root[data-theme="light"] .acoes-conferencia .btn-problema { color: #b91c1c; }

.filtros-checkout {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.filtros-checkout strong { margin-right: auto; }

.linha-checkout { cursor: pointer; }
.linha-checkout:hover { background: rgba(128, 128, 128, 0.08); }
.linha-checkout.aberta { background: var(--accent-suave); outline: 2px solid var(--accent); outline-offset: -2px; }
.linha-checkout.problema td:first-child { box-shadow: inset 3px 0 0 #f87171; }

.itens-checkout { font-size: 13px; }
.coleta-hoje { color: #fbbf24; font-weight: 600; white-space: nowrap; }
:root[data-theme="light"] .coleta-hoje { color: #b45309; }

.selo-checkout {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.selo-checkout.aguardando { background: rgba(148, 163, 184, 0.16); color: var(--text); }
.selo-checkout.problema { background: rgba(248, 113, 113, 0.16); color: #fca5a5; }
:root[data-theme="light"] .selo-checkout.problema { color: #b91c1c; }

.selo-lote-checkout {
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

/* Produtos: Composição (tipo Composto) */
.form-grid .grupo-composicao-produto {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--accent);
    border-radius: 10px;
    background: var(--accent-suave);
}

.grupo-composicao-produto[hidden] { display: none; }

.grupo-composicao-produto legend {
    padding: 0 6px;
    color: var(--accent-texto);
    font-size: 13px;
    font-weight: 700;
}

.linhas-componentes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.linha-componente {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px 40px 40px;
    gap: 8px;
    align-items: center;
}

.linha-componente select,
.linha-componente input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #64748b55;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 14px;
}

.linha-componente select option { color: #111827; background: #fff; }

.remover-componente {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(248, 113, 113, 0.5);
    border-radius: 8px;
    background: transparent;
    color: #f87171;
    font-size: 20px;
    cursor: pointer;
}

.adicionar-componente { align-self: flex-start; }

.data-table .coluna-custo { white-space: nowrap; }

.opcao-custo-automatico {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-weight: 600;
    cursor: pointer;
}

.opcao-custo-automatico input {
    width: 18px;
    height: 18px;
    accent-color: #22c55e;
}

.form-field input.custo-calculado {
    border-style: dashed;
    opacity: 0.8;
    cursor: not-allowed;
}

.selo-custo-auto {
    margin-left: 4px;
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 11px;
}

/* Elementos com hidden (ex.: botões sem permissão) somem mesmo com display próprio */
[hidden] { display: none !important; }
.acoes-cabecalho-estoque[hidden] { display: none; }

/* Funcionários › Perfis e permissões */
.abas-funcionarios { margin: 4px 0 18px; }
.abas-funcionarios .aba-anuncio { text-decoration: none; }

.tela-perfis {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 900px) {
    .tela-perfis { grid-template-columns: 1fr; }
}

.lista-perfis {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
}

.item-perfil {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
}

.item-perfil:hover { background: rgba(128, 128, 128, 0.08); }
.item-perfil.ativo { border-color: var(--accent); background: var(--accent-suave); }

.item-perfil > span:first-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-perfil small, .qtd-perfil { color: var(--muted); font-size: 12px; }

.novo-perfil {
    margin-top: 6px;
    padding: 10px;
    border: 1px dashed var(--border);
    border-radius: 10px;
}

.novo-perfil summary {
    color: var(--accent-texto);
    font-weight: 600;
    cursor: pointer;
}

.novo-perfil form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.painel-permissoes { padding: 0; overflow: hidden; }
.painel-permissoes > form + form { padding: 16px 20px; }

.cabecalho-permissoes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.cabecalho-permissoes h2 { margin: 0 0 4px; }
.cabecalho-permissoes p { margin: 0; font-size: 13px; }

.linha-permissao {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 90px;
    gap: 12px;
    align-items: center;
    padding: 9px 20px 9px 36px;
    font-size: 14px;
}

.linha-permissao > :nth-child(2), .linha-permissao > :nth-child(3) { justify-self: center; }

.linha-permissao.titulos {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.linha-permissao.modulo {
    padding: 12px 20px;
    background: rgba(128, 128, 128, 0.07);
}

.modulo-permissao { border-bottom: 1px solid var(--border); }
.modulo-permissao.desligado .linha-permissao.acao { opacity: 0.45; }

/* Chave liga/desliga (checkbox) */
.chave-permissao { position: relative; display: inline-flex; cursor: pointer; }
.chave-permissao input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.chave-permissao .trilho {
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: var(--border);
    transition: background 0.15s;
    position: relative;
}

.chave-permissao .trilho::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s;
}

.chave-permissao input:checked + .trilho { background: #22c55e; }
.chave-permissao input:checked + .trilho::after { transform: translateX(18px); }
.chave-permissao input:focus-visible + .trilho { outline: 2px solid var(--accent); outline-offset: 2px; }
.chave-permissao input:disabled + .trilho { opacity: 0.6; cursor: not-allowed; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.trocar-perfil select {
    padding: 6px 8px;
    font-size: 13px;
}

.btn-problema {
    border: 1px solid rgba(248, 113, 113, 0.6);
    background: transparent;
    color: #fca5a5;
}

/* Item de menu que só abre o submenu (ex.: Configuração) */
.menu .menu-pai {
    padding: 7px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: default;
}

.menu .menu-pai:hover,
.menu-suspenso:focus-within .menu-pai {
    color: var(--text);
    background: var(--surface-2);
}

.menu .menu-pai.ativo {
    color: var(--accent-texto);
    background: var(--accent-suave);
    font-weight: 600;
}

/* Pedido de teste (NF-e e etiqueta simuladas) */
.selo-teste {
    margin-left: 6px;
    padding: 1px 7px;
    border: 1px solid rgba(251, 191, 36, 0.6);
    border-radius: 999px;
    color: #fbbf24;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
}

:root[data-theme="light"] .selo-teste { color: #b45309; }

/* Fiscal › Arquivo fiscal (em breve) */
.cartoes-arquivo-fiscal {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 18px 0;
}

@media (max-width: 900px) {
    .cartoes-arquivo-fiscal { grid-template-columns: 1fr; }
}

.cartoes-arquivo-fiscal .cartao-estoque strong { font-size: 20px; }
.lista-arquivo-fiscal { margin: 0; padding-left: 20px; line-height: 1.9; color: var(--muted); }

/* Dashboard: atalho para a versão de celular (só em telas pequenas) */
.painel-celular-link {
    display: none;
    text-align: center;
    margin: 24px 0 8px;
}

.painel-celular-link a {
    color: var(--accent-texto);
    font-weight: 700;
}

@media (max-width: 700px) {
    .painel-celular-link {
        display: block;
    }
}

/* Login no celular: formulário primeiro, sem a apresentação longa */
@media (max-width: 640px) {
    .login-description,
    .login-features,
    .login-badge {
        display: none;
    }

    .login-title {
        font-size: 26px;
    }

    .login-logo img {
        width: 170px;
    }
}

/* Senhas */
.login-esqueci {
    align-self: center;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.user-senha {
    color: var(--muted);
    font-size: 13px;
    text-decoration: none;
}

.user-senha:hover {
    color: var(--text);
}

.aviso-sucesso {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(52, 211, 153, .5);
    background: rgba(52, 211, 153, .1);
    margin-bottom: 14px;
}

@media (max-width: 768px) {
    .user-senha {
        display: none;
    }
}

/* Popup de erro (Gestão de Empresas) */
.popup-erro {
    max-width: 420px;
    width: calc(100% - 32px);
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text);
}

.popup-erro::backdrop {
    background: rgba(0, 0, 0, .55);
}

.popup-erro h2 {
    margin: 0 0 8px;
    font-size: 18px;
}

.popup-erro p {
    margin: 0 0 18px;
    color: var(--muted);
    line-height: 1.6;
}

.popup-erro form {
    display: flex;
    justify-content: flex-end;
}

/* Marcas */
.link-marcas {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--accent-texto);
}

.marca-acoes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.marca-acoes input {
    min-width: 220px;
}

/* Cadastro de produto em abas (opção A: texto com linha embaixo).
   Seletores longos de propósito: ".card form button" pinta todo botão de roxo. */
.abas-produto {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    margin: 4px 0 22px;
}

.card form .abas-produto button[role="tab"],
.modal-produto-conteudo form .abas-produto button[role="tab"] {
    height: 46px;
    margin: 0 0 -1px;
    padding: 0 2px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.card form .abas-produto button[role="tab"]:hover,
.modal-produto-conteudo form .abas-produto button[role="tab"]:hover {
    background: transparent;
    color: var(--text);
}

.card form .abas-produto button[role="tab"][aria-selected="true"],
.modal-produto-conteudo form .abas-produto button[role="tab"][aria-selected="true"] {
    color: var(--text);
    font-weight: 700;
    border-bottom-color: var(--accent);
}

.abas-produto button[role="tab"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.rodape-produto {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.card form .rodape-produto button,
.modal-produto-conteudo form .rodape-produto button {
    margin-top: 0;
}

.rodape-produto .botao-secundario,
.card form .rodape-produto button.botao-secundario {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}

.selo-aba-roxo {
    color: var(--accent-texto) !important;
    background: var(--accent-suave) !important;
}

.selo-aba {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #b45309;
    background: rgba(251, 191, 36, .18);
}

.aba-painel {
    margin-bottom: 18px;
}

.fiscal-produto h3 {
    margin: 18px 0 10px;
    font-size: 15px;
}

.fiscal-produto h3 small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
    margin-left: 6px;
}

.fiscal-cabecalho-empresas {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fiscal-mesma {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 13px;
}

.fiscal-tabela td small {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.fiscal-previa {
    color: var(--muted);
    font-size: 12px;
}

.chip-fiscal {
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.chip-fiscal.ok {
    color: #059669;
    background: rgba(52, 211, 153, .14);
}

.chip-fiscal.pendente {
    color: #b45309;
    background: rgba(251, 191, 36, .18);
}


.celula-apelido {
    white-space: nowrap;
}

.celula-apelido .btn-apelido {
    margin-left: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted, inherit);
    cursor: pointer;
}

.celula-apelido .btn-apelido:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Lista de seleção com busca (busca_select.js) */
.busca-select {
    position: relative;
}

.busca-select input {
    width: 100%;
}

.busca-select-lista {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.busca-select-lista li {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.busca-select-lista li[aria-selected="true"],
.busca-select-lista li[role="option"]:hover {
    background: var(--accent-suave);
    color: var(--accent-texto);
}

.busca-select-lista .busca-select-vazio {
    color: var(--muted);
    cursor: default;
}

/* Tabelas ordenáveis e busca (tabela_ordenavel.js) */
.th-ordenar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
    cursor: pointer;
}

.th-ordenar::after {
    content: "↕";
    opacity: 0.35;
    font-size: 11px;
}

th[aria-sort="ascending"] .th-ordenar::after {
    content: "▲";
    opacity: 1;
    color: var(--accent-texto);
}

th[aria-sort="descending"] .th-ordenar::after {
    content: "▼";
    opacity: 1;
    color: var(--accent-texto);
}

.th-ordenar:hover,
th[aria-sort] .th-ordenar {
    color: var(--text);
}

.contagem-lista {
    margin-left: 6px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
}

.campo-busca-produtos {
    margin-bottom: 18px;
}

/* Produtos cadastrados: pesquisa + Marca, Tipo e Tipo/Gênero */
.filtros-produtos { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 14px;
    align-items: end; margin-bottom: 18px; }
.filtros-produtos .campo-busca-produtos { margin-bottom: 0; }
.filtros-produtos .form-field { margin: 0; }
@media (max-width: 900px) { .filtros-produtos { grid-template-columns: 1fr; } }

/* Integrações: um cartão por marketplace */
.grupo-integracoes,
.grupo-integracoes + .card {
    margin-bottom: 16px;
}

/* Gestão de Pedidos: Filtrar pedidos ao lado do Limpar filtros, mesma altura */
.pedidos-acoes > .btn-filtrar-pedidos {
    align-self: stretch;
    white-space: nowrap;
}

/* Gestão de Pedidos: miniatura do produto antes do número do pedido */
.codigo-com-miniatura {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.miniatura-pedido {
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.miniatura-pedido img {
    width: 100%;
    height: 100%;
    border-radius: 7px;
    object-fit: contain;
}

.miniatura-pedido.sem-imagem {
    border-style: dashed;
    background: var(--surface-2);
    color: var(--muted);
}

.miniatura-mais {
    position: absolute;
    right: -6px;
    bottom: -6px;
    padding: 1px 5px;
    border: 2px solid var(--surface);
    border-radius: 999px;
    background: var(--accent);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.3;
}

/* Cadastro de produto: imagem ao lado dos campos da aba Geral */
.geral-com-imagem {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.campo-imagem-produto {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.campo-imagem-produto .rotulo-imagem {
    font-size: 13px;
    font-weight: 600;
}

.campo-imagem-produto .imagem-preview,
.campo-imagem-produto .imagem-enviar {
    width: 170px;
    height: 170px;
    box-sizing: border-box;
    border-radius: 12px;
}

.campo-imagem-produto .imagem-preview {
    border: 1px solid var(--border);
    background: #ffffff;
}

.campo-imagem-produto .imagem-preview img {
    width: 100%;
    height: 100%;
    border-radius: 11px;
    object-fit: contain;
}

.campo-imagem-produto .imagem-enviar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 1.5px dashed var(--border);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12px;
    text-align: center;
    cursor: pointer;
}

.campo-imagem-produto .imagem-enviar strong {
    color: var(--text);
}

.campo-imagem-produto .imagem-enviar:hover {
    border-color: var(--accent);
}

.campo-imagem-produto .imagem-acoes {
    display: flex;
    gap: 8px;
}

.card form .campo-imagem-produto button {
    flex: 1;
    height: 34px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}

.card form .campo-imagem-produto button.perigo {
    color: #f87171;
}

.card form .campo-imagem-produto [data-usar-anuncio] {
    flex: none;
    border-color: var(--accent);
    color: var(--accent-texto);
}

.campo-imagem-produto .imagem-anuncio {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
}

.campo-imagem-produto .imagem-anuncio[hidden],
.campo-imagem-produto [hidden] {
    display: none;
}

.campo-imagem-produto .imagem-anuncio img {
    width: 72px;
    height: 72px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    object-fit: contain;
}

@media (max-width: 720px) {
    .geral-com-imagem {
        grid-template-columns: 1fr;
    }
}

/* Gestão de Pedidos: foto ampliada com o mouse sobre a miniatura */
.miniatura-pedido img {
    cursor: zoom-in;
}

.miniatura-pedido:hover {
    border-color: var(--accent);
}

.previa-miniatura {
    position: fixed;
    z-index: 60;
    width: 500px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.previa-miniatura[hidden] {
    display: none;
}

.previa-miniatura img {
    display: block;
    width: 500px;
    height: 500px;
    background: #ffffff;
    object-fit: contain;
}

.previa-miniatura-legenda {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    font-size: 13px;
}

.previa-miniatura-legenda span,
.previa-miniatura-pedido {
    color: var(--muted);
}

.previa-miniatura-legenda strong {
    color: var(--text);
}

/* Coluna Produtos: Copiar SKU aparece com o mouse sobre o SKU */
.sku-pedido {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 26px;
}

.sku-pedido:hover .sku-texto {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.copiar-sku {
    visibility: hidden;
    height: 26px;
    margin: 0;
    padding: 0 9px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--accent-suave);
    color: var(--accent-texto);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.sku-pedido:hover .copiar-sku,
.copiar-sku:focus-visible,
.copiar-sku.copiado {
    visibility: visible;
}

.copiar-sku.copiado {
    border-color: #059669;
    background: rgba(52, 211, 153, 0.14);
    color: #059669;
}

/* Gestão de Pedidos: × para limpar cada filtro (aplicado na hora) */
.caixa-limpavel {
    position: relative;
}

.caixa-limpavel > input,
.caixa-limpavel > select {
    width: 100%;
}

.tem-limpar > input,
.prazo-periodo-container.tem-limpar .prazo-periodo-input {
    padding-right: 42px !important;
}

.card form .limpar-campo {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 2;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: var(--border);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.card form .limpar-campo[hidden] {
    display: none;
}

.card form .limpar-campo:hover {
    background: var(--accent);
    color: #ffffff;
}

/* Listas: o × fica antes da setinha */
.caixa-limpavel-lista .limpar-campo,
.card form .multiselecao > .limpar-campo {
    right: 34px;
}

.caixa-limpavel-lista.tem-limpar > select {
    padding-right: 68px;
}

.card form .multiselecao.tem-limpar .multiselecao-botao {
    padding-right: 68px;
}

/* Produto interno: SKU / Nome do produto + texto, num campo só */
.campo-produto-duplo {
    position: relative;
    display: flex;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}

.campo-produto-duplo:focus-within {
    border-color: var(--accent);
}

.card form .campo-produto-duplo select {
    flex: none;
    width: 112px;
    height: 100%;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 9px 0 0 9px;
    background-color: var(--surface);
    font-size: 13px;
    font-weight: 600;
}

.card form .campo-produto-duplo input {
    flex: 1;
    min-width: 0;
    height: 100%;
    margin: 0;
    border: 0 !important;
    border-radius: 0 9px 9px 0;
    background: transparent !important;
}

.campo-produto-duplo.tem-limpar input {
    padding-right: 42px !important;
}

/* Gestão de Pedidos: Imprimir etiquetas (selecionados) */
.btn-imprimir-selecionados {
    gap: 7px;
}

.btn-imprimir-selecionados:not(:disabled) {
    border-color: var(--accent) !important;
    background: var(--accent) !important;
    color: #ffffff !important;
}

.btn-imprimir-selecionados:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.janela-imprimir-selecionados .aviso-fora-do-lote {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(251, 191, 36, 0.16);
    color: #b45309;
    font-size: 13px;
}

:root:not([data-theme="light"]) .janela-imprimir-selecionados .aviso-fora-do-lote {
    color: #fcd34d;
}

.janela-imprimir-selecionados .aviso-fora-do-lote[hidden] {
    display: none;
}

.janela-imprimir-selecionados .btn-confirmar-imprimir {
    border: 0;
    background: var(--accent);
    color: #ffffff;
}

/* Checkout: canal + loja na mesma célula */
.canal-loja-checkout { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tabela-checkout .celula-miniatura { width: 52px; }

/* Checkout Express: barra de seleção e linha marcada */
.barra-express { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px; margin: 8px 0 12px; border: 1px solid var(--borda, #2a2a31); border-radius: 10px; }
.barra-express form { margin: 0; }
.barra-express button:disabled { opacity: 0.5; cursor: not-allowed; }
.tabela-checkout tr.selecionada-express td { background: rgba(124, 92, 255, 0.12); }
.tabela-checkout .selecao-express, #selecionar-todos-express { width: 18px; height: 18px; cursor: pointer; }

/* Produção: PCP Express e ordens */
.tabela-pcp td.numero, .tabela-pcp th.numero, .tabela-ordens td.numero, .tabela-ordens th.numero { text-align: right; }
.tabela-pcp tr.pcp-coberto td { opacity: 0.6; }
.pcp-falta { color: #f87171; font-size: 1.1em; }
.pcp-ok { color: #34d399; font-weight: 600; white-space: nowrap; }
.cabecalho-pcp { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cabecalho-pcp h2 { margin: 0; }
.acoes-pcp { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acoes-pcp form { margin: 0; }
.layout-ordens { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .layout-ordens { grid-template-columns: 1fr; } }
.filtros-ordens { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.filtros-ordens h2 { margin: 0 12px 0 0; }
.filtros-ordens .multiselecao { min-width: 220px; }
.form-nova-op form { display: flex; flex-direction: column; gap: 10px; }
.selo-op { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
    background: rgba(148, 163, 184, 0.18); }
.selo-op.op-em_producao { background: rgba(124, 92, 255, 0.22); color: #c4b5fd; }
.selo-op.op-concluida { background: rgba(52, 211, 153, 0.18); color: #34d399; }
.selo-op.op-cancelada { background: rgba(248, 113, 113, 0.16); color: #f87171; }
.op-atrasada { color: #fbbf24; }
.prioridade-alta { color: #f87171; font-weight: 700; }
.acoes-op { display: flex; gap: 6px; flex-wrap: wrap; }
.acoes-op .acao-op { padding: 4px 8px; font-size: 12px; border-radius: 6px; border: 1px solid var(--borda, #2a2a31);
    background: transparent; color: inherit; cursor: pointer; text-decoration: none; }
@media print {
    .tela-producao form#form-filtros-pedidos, .tela-producao .filtros-ativos, .acoes-pcp,
    header, nav, .menu-principal { display: none !important; }
}
.grupo-agrupar { display: inline-flex; align-items: center; gap: 4px; padding: 3px;
    border: 1px solid var(--borda, #2a2a31); border-radius: 10px; }
.rotulo-agrupar { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0 8px; opacity: 0.7; }
.pedidos-acoes .grupo-agrupar .botao-agrupar { height: 40px; padding: 0 14px; border: 1px solid transparent;
    border-radius: 7px; background: transparent; color: var(--text-muted, #9b9ba7);
    font: inherit; font-weight: 600; cursor: pointer; box-shadow: none; }
.pedidos-acoes .grupo-agrupar .botao-agrupar:hover { background: rgba(124, 92, 255, 0.12); color: var(--text, #ececf1); }
.pedidos-acoes .grupo-agrupar .botao-agrupar.ativo { background: #7c5cff; border-color: #a996ff; color: #fff;
    box-shadow: 0 0 0 2px rgba(124, 92, 255, 0.35); }
.pedidos-acoes .grupo-agrupar .botao-agrupar.ativo::before { content: "✓ "; }
.pedidos-acoes .chave-pcp-estoque { margin-left: 8px; margin-right: auto; }
.tabela-pcp tr.pcp-bloco td { background: rgba(124, 92, 255, 0.12); padding-top: 12px; font-size: 15px; }

/* Gestão de Pedidos: chave do leitor de código de barras ao lado de "Pesquisar pedido" */
.cabecalho-busca-pedidos { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin-bottom: 6px; }
.cabecalho-busca-pedidos > label:first-child { margin: 0; }
.cabecalho-busca-pedidos .chave-leitor-barras { margin: 0; font-size: 13px; }

/* Ordens de Produção: título com o botão Nova ordem à direita */
.cabecalho-ordens { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.btn-nova-op { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 10px;
    background: var(--accent, #7c5cff); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; margin-top: 8px; }
.btn-nova-op:hover { filter: brightness(1.1); }
.form-nova-op { max-width: 640px; }
.acoes-nova-op { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.acoes-nova-op .btn-limpar-pedidos, .acoes-nova-op button { height: 44px; display: inline-flex; align-items: center; padding: 0 20px; }

/* Ordens de Produção: tabela no padrão da Gestão de Pedidos (14px, alinhada) */
.card .tabela-ordens strong { font-size: inherit; }
.tabela-ordens td { vertical-align: middle; font-size: 14px; }
.tabela-ordens td[data-coluna="criada"], .tabela-ordens td[data-coluna="prazo"] { white-space: nowrap; }
.tabela-ordens .codigo-op { color: var(--accent-texto, #a996ff); font-weight: 700; white-space: nowrap; }
.tabela-ordens .sku-op { font-weight: 700; margin-right: 6px; }
.tabela-ordens .nome-op { color: var(--text); }
.tabela-ordens .motivo-op { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.tabela-ordens .qtd-op { display: inline-block; min-width: 56px; padding: 4px 10px; border-radius: 8px; text-align: center;
    background: var(--accent-suave, rgba(124, 92, 255, 0.16)); color: var(--accent-texto, #c4b5fd);
    font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tabela-ordens .op-atrasada { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: #fbbf24; }
.prioridade-op { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
    white-space: nowrap; background: rgba(148, 163, 184, 0.16); color: #b6c2d2; }
.prioridade-op.prioridade-alta { background: rgba(239, 68, 68, 0.18); color: #f87171; }
.prioridade-op.prioridade-alta::before { content: "▲ "; font-size: 10px; }
.prioridade-op.prioridade-normal { background: rgba(59, 130, 246, 0.16); color: #7fb0ff; }
.prioridade-op.prioridade-baixa { background: rgba(155, 155, 167, 0.12); color: var(--muted); }
.tabela-ordens .acoes-op { flex-wrap: nowrap; }
.tabela-ordens .acoes-op .acao-op { white-space: nowrap; font-size: 12px; font-weight: 600; }

/* Produtos › Composição: pesquisa de produto (SKU / Nome com sugestões) */
.busca-componente { position: relative; min-width: 0; }
.linha-componente .busca-componente .campo-produto-duplo { height: 42px; background: transparent; border-color: #64748b55; }
.linha-componente .busca-componente .campo-produto-duplo:focus-within { border-color: var(--accent); }
.linha-componente .busca-componente .campo-produto-duplo select { flex: none; width: 112px; height: 100%; padding: 0 10px;
    border: 0; border-right: 1px solid var(--border); border-radius: 9px 0 0 9px; background-color: var(--surface);
    font-size: 13px; font-weight: 600; }
.linha-componente .busca-componente .campo-produto-duplo input { flex: 1; min-width: 0; height: 100%; border: 0;
    border-radius: 0 9px 9px 0; background: transparent; }
.busca-componente .sugestoes-filtro-produto button { display: block; width: 100%; margin: 0; padding: 12px; border: 0;
    border-radius: 0; background: transparent; color: var(--text); text-align: left; font-size: 14px; font-weight: 600;
    cursor: pointer; }
.busca-componente .sugestoes-filtro-produto button:hover,
.busca-componente .sugestoes-filtro-produto button.destacado { background: rgba(128, 128, 128, 0.15); }

/* Cadastro de produto: SKU = prefixo + próximo número + complemento */
.sku-prefixo-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.campo-sku-prefixo .sku-previa { margin-top: 8px; font-weight: 800; letter-spacing: 0.02em;
    background: var(--accent-suave, rgba(124, 92, 255, 0.12)) !important; color: var(--accent-texto, #c4b5fd); cursor: default; }
#editar-produto-sku[readonly] { opacity: 0.75; cursor: not-allowed; }
/* Produtos › Prefixos de SKU */
.form-prefixo-novo { display: grid; grid-template-columns: 140px minmax(0, 2fr) minmax(0, 1.5fr) 100px auto; gap: 12px; align-items: end; }
@media (max-width: 900px) { .form-prefixo-novo { grid-template-columns: 1fr; } }
.tabela-prefixos td { vertical-align: middle; font-size: 14px; }
.tabela-prefixos td.numero, .tabela-prefixos th.numero { text-align: right; }
.tabela-prefixos .sku-proximo { font-weight: 700; font-variant-numeric: tabular-nums; }
.tabela-prefixos .acoes-op form { margin: 0; }
.tabela-prefixos tr.edicao-prefixo td { background: rgba(124, 92, 255, 0.06); }
.form-prefixo-editar { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) 110px auto; gap: 12px; align-items: end; }
.form-prefixo-editar .form-field { margin: 0; }
.acoes-prefixo-editar { display: flex; gap: 8px; }
.acoes-prefixo-editar .btn-limpar-pedidos, .acoes-prefixo-editar button { height: 44px; display: inline-flex; align-items: center; padding: 0 18px; }
@media (max-width: 900px) { .form-prefixo-editar { grid-template-columns: 1fr; } }
.codigo-prefixo { font-weight: 800; color: var(--accent-texto, #a996ff); }

/* Produtos cadastrados: ações no menu ⋮ */
.btn-mais-acoes-produto { width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 8px;
    background: transparent; color: var(--text); font-size: 18px; font-weight: 800; line-height: 1; cursor: pointer; }
.btn-mais-acoes-produto:hover, .btn-mais-acoes-produto[aria-expanded="true"] { background: rgba(128, 128, 128, 0.15); }
.menu-acoes-produto { min-width: 170px; }
.menu-acoes-produto > button, .menu-acoes-produto > a,
.card .menu-acoes-produto > button, .card .menu-acoes-produto > a.btn-limpar-pedidos {
    display: block; width: 100%; height: auto; min-height: 0; margin: 0; padding: 10px 12px; border: 0; border-radius: 6px;
    background: transparent; color: var(--text); font-size: 14px; font-weight: 600; text-align: left; text-decoration: none;
    box-shadow: none; cursor: pointer; box-sizing: border-box; }
.menu-acoes-produto > button:hover, .menu-acoes-produto > a:hover { background: rgba(128, 128, 128, 0.15); }
.menu-acoes-produto > [hidden] { display: none !important; }
.menu-acoes-produto > .btn-excluir-produto { color: #f87171; }

/* Produtos cadastrados: a linha abre o Editar produto */
#tabela-produtos tbody tr.linha-editavel { cursor: pointer; }
#tabela-produtos tbody tr.linha-editavel:hover td { background: rgba(128, 128, 128, 0.08); }
.campo-sku-prefixo .tipo-do-prefixo { display: block; margin-top: 6px; font-weight: 700; color: var(--text); }
.campo-sku-prefixo .tipo-do-prefixo[hidden] { display: none; }

/* Composição: unidade do componente ao lado da quantidade */
.unidade-componente { font-size: 13px; font-weight: 700; color: var(--muted); text-align: left; white-space: nowrap; }
.unidade-estoque { font-size: 12px; font-weight: 700; color: var(--muted); }
.tabela-ordens .qtd-op small { font-size: 11px; font-weight: 700; opacity: 0.8; }

/* Ajuda: botão "?" no topo */
.botao-ajuda { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border: 1px solid var(--border); border-radius: 50%; color: var(--text); font-weight: 800; font-size: 16px;
    text-decoration: none; flex: none; }
.botao-ajuda:hover, .botao-ajuda:focus-visible { border-color: var(--accent); color: var(--accent-texto);
    background: var(--accent-suave); }

/* Central de Ajuda (/ajuda): índice à esquerda, uma seção por vez à direita */
.tela-ajuda { max-width: 1280px; margin: 0 auto; }
.topo-ajuda { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap;
    margin-bottom: 18px; }
.topo-ajuda h1 { margin: 0 0 4px; }
.voltar-ajuda { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
    border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-suave); color: var(--accent-texto);
    font-weight: 700; text-decoration: none; white-space: nowrap; }
.voltar-ajuda:hover { background: var(--accent); color: #fff; }
.layout-ajuda { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }

.indice-ajuda { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 6px; padding: 14px;
    border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
    max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box; }
.indice-ajuda input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 12px; margin-bottom: 4px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); font-size: 14px; }
.indice-ajuda input:focus { outline: none; border-color: var(--accent); }
.indice-ajuda ul { list-style: none; margin: 0 0 6px; padding: 0; }
.indice-ajuda ul[hidden], .indice-ajuda li[hidden], .grupo-indice-ajuda[hidden] { display: none; }
.indice-ajuda li a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px;
    border-radius: 10px; color: var(--text); text-decoration: none; font-size: 14px; box-sizing: border-box; }
.indice-ajuda li a svg { flex: none; color: var(--muted); }
.indice-ajuda li a:hover { background: rgba(128, 128, 128, 0.12); }
.indice-ajuda li a[aria-current="page"] { background: var(--accent-suave); color: var(--accent-texto); font-weight: 700; }
.indice-ajuda li a[aria-current="page"] svg { color: var(--accent-texto); }
.indice-ajuda a:focus-visible, .nav-secao-ajuda:focus-visible, .pergunta-ajuda:focus-visible, .voltar-ajuda:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px; }
.grupo-indice-ajuda { margin: 10px 0 2px; padding: 0 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted); }
.sem-resultado-ajuda { margin: 4px 2px; color: var(--muted); font-size: 13px; }

.conteudo-ajuda { min-width: 0; }
.secao-ajuda { display: flex; flex-direction: column; gap: 16px; }
.secao-ajuda[hidden] { display: none; }
.cabecalho-secao-ajuda { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border: 1px solid var(--border);
    border-radius: 16px; background: var(--surface); }
.icone-secao-ajuda { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px;
    border-radius: 16px; background: var(--accent-suave); color: var(--accent-texto); }
.icone-secao-ajuda svg { width: 38px; height: 38px; }
.grupo-secao-ajuda { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-texto); }
.cabecalho-secao-ajuda h2 { margin: 4px 0 0; font-size: 28px; line-height: 1.2; }

.corpo-secao-ajuda { padding: 22px 26px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
    font-size: 15px; line-height: 1.65; }
.corpo-secao-ajuda > :first-child { margin-top: 0; }
.corpo-secao-ajuda > :last-child { margin-bottom: 0; }
.corpo-secao-ajuda p { margin: 0 0 12px; }
.corpo-secao-ajuda strong { font-size: inherit; }
.corpo-secao-ajuda a { color: var(--accent-texto); }
.corpo-secao-ajuda h3 { margin: 22px 0 10px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 17px; }
.corpo-secao-ajuda ul { margin: 0 0 12px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.corpo-secao-ajuda ul > li { position: relative; padding: 10px 14px 10px 32px; border-radius: 12px; background: var(--surface-2); }
.corpo-secao-ajuda ul > li::before { content: ""; position: absolute; left: 14px; top: 19px; width: 7px; height: 7px;
    border-radius: 50%; background: var(--accent); }
/* Listas numeradas viram passos com círculo roxo */
.corpo-secao-ajuda ol { margin: 0 0 12px; padding-left: 0; list-style: none; counter-reset: passo;
    display: flex; flex-direction: column; gap: 10px; }
.corpo-secao-ajuda ol > li { counter-increment: passo; position: relative; min-height: 32px; padding: 4px 0 4px 46px; }
.corpo-secao-ajuda ol > li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 32px; height: 32px;
    border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: 14px;
    display: flex; align-items: center; justify-content: center; }
/* O caminho do pedido: trilha de pílulas numeradas ligadas por setas */
.corpo-secao-ajuda ol.fluxo-ajuda { flex-direction: row; flex-wrap: wrap; gap: 10px 26px; }
.corpo-secao-ajuda ol.fluxo-ajuda > li { flex: 1 1 200px; padding: 12px 14px 12px 50px; border: 1px solid var(--border);
    border-radius: 999px; background: var(--surface-2); font-size: 14px; line-height: 1.4; }
.corpo-secao-ajuda ol.fluxo-ajuda > li::before { left: 10px; top: 50%; transform: translateY(-50%); }
.corpo-secao-ajuda ol.fluxo-ajuda > li:not(:last-child)::after { content: "→"; position: absolute; right: -20px; top: 50%;
    transform: translateY(-50%); color: var(--muted); font-weight: 800; }
.corpo-secao-ajuda ol.fluxo-ajuda > li:nth-child(2) { border-color: rgba(239, 68, 68, 0.55); background: rgba(239, 68, 68, 0.08); }
.corpo-secao-ajuda ol.fluxo-ajuda > li:nth-child(2)::before { background: #ef4444; }
.corpo-secao-ajuda ol.fluxo-ajuda > li:last-child::before { background: var(--muted); }
/* Dúvidas frequentes: acordeão */
.duvidas-ajuda { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.duvidas-ajuda dt { margin: 0; }
.duvidas-ajuda dd { margin: 0; padding: 4px 18px 14px; color: var(--muted); }
.duvidas-ajuda dd[hidden] { display: none; }
.pergunta-ajuda, .card .pergunta-ajuda { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 48px; margin: 0; padding: 10px 18px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface-2); color: var(--text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.pergunta-ajuda svg { flex: none; transition: transform 0.15s; color: var(--accent-texto); }
.pergunta-ajuda[aria-expanded="true"] { border-color: var(--accent); }
.pergunta-ajuda[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Anterior / Próximo */
.navegacao-secao-ajuda { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nav-secao-ajuda { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 12px 16px;
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; }
.nav-secao-ajuda small { color: var(--muted); font-size: 12px; font-weight: 700; }
.nav-secao-ajuda span { font-weight: 700; color: var(--accent-texto); }
.nav-secao-ajuda.proxima { text-align: right; }
.nav-secao-ajuda:hover { border-color: var(--accent); }

@media (max-width: 900px) {
    .layout-ajuda { grid-template-columns: 1fr; }
    .indice-ajuda { position: static; max-height: none; }
    .cabecalho-secao-ajuda { padding: 16px; }
    .icone-secao-ajuda { width: 56px; height: 56px; }
    .cabecalho-secao-ajuda h2 { font-size: 22px; }
    .corpo-secao-ajuda { padding: 16px; }
    .corpo-secao-ajuda ol.fluxo-ajuda { row-gap: 24px; }
    .corpo-secao-ajuda ol.fluxo-ajuda > li { flex-basis: 100%; }
    .corpo-secao-ajuda ol.fluxo-ajuda > li:not(:last-child)::after { content: "↓"; right: auto; left: 21px; top: auto; bottom: -19px; transform: none; }
    .navegacao-secao-ajuda { grid-template-columns: 1fr; }
}

/* Central de Ajuda: cor de cada grupo (--cor) */
.grupo-comeco { --cor: #7c5cff; }
.grupo-pedidos { --cor: #3b82f6; }
.grupo-expedicao { --cor: #06b6d4; }
.grupo-producao { --cor: #f59e0b; }
.grupo-produtos { --cor: #10b981; }
.grupo-anuncios { --cor: #ec4899; }
.grupo-configuracao { --cor: #94a3b8; }
.grupo-ajuda, .inicio-ajuda { --cor: #a996ff; }
.indice-ajuda li a svg { color: var(--cor, var(--muted)); }
.indice-ajuda li a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--cor, var(--accent)); }
.todos-ajuda { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; margin-bottom: 4px;
    border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 14px; }
.todos-ajuda:hover { background: rgba(128, 128, 128, 0.12); }
.todos-ajuda[aria-current="page"] { background: var(--accent-suave); color: var(--accent-texto); }

/* Cabeçalho da seção: faixa na cor do grupo, ícone grande, ilustração ao fundo e progresso */
.cabecalho-secao-ajuda { position: relative; overflow: hidden;
    background: linear-gradient(120deg, color-mix(in srgb, var(--cor, var(--accent)) 26%, var(--surface)) 0%, var(--surface) 70%);
    border-color: color-mix(in srgb, var(--cor, var(--accent)) 40%, var(--border)); }
.icone-secao-ajuda { position: relative; z-index: 1; background: color-mix(in srgb, var(--cor, var(--accent)) 22%, transparent);
    color: var(--cor, var(--accent-texto)); box-shadow: 0 8px 24px color-mix(in srgb, var(--cor, var(--accent)) 30%, transparent); }
.grupo-secao-ajuda { color: var(--cor, var(--accent-texto)); }
.titulos-secao-ajuda { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fundo-secao-ajuda { position: absolute; right: -20px; top: 50%; transform: translateY(-50%) rotate(-12deg);
    color: var(--cor, var(--accent)); opacity: 0.12; pointer-events: none; }
.fundo-secao-ajuda svg { width: 190px; height: 190px; stroke-width: 1.2; }
.progresso-ajuda { display: flex; align-items: center; gap: 10px; margin-top: 10px; max-width: 360px; }
.barra-progresso-ajuda { flex: 1; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; }
.barra-progresso-ajuda span { display: block; height: 100%; border-radius: inherit; background: var(--cor, var(--accent)); }
.progresso-ajuda small { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.intro-inicio-ajuda { margin: 8px 0 0; color: var(--muted); max-width: 640px; }

/* Página inicial: mosaico de cartões */
.mosaico-ajuda { display: flex; flex-direction: column; gap: 6px; }
.grupo-cartoes-ajuda { margin: 12px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted); }
.cartoes-ajuda { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cartao-ajuda { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 140px; padding: 16px;
    border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); text-decoration: none;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.cartao-ajuda::after { content: "→"; position: absolute; right: 16px; top: 16px; color: var(--muted); font-weight: 800;
    transition: transform 0.15s, color 0.15s; }
.cartao-ajuda:hover, .cartao-ajuda:focus-visible { transform: translateY(-3px); border-color: var(--cor, var(--accent));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--cor, var(--accent)) 22%, transparent); outline: none; }
.cartao-ajuda:hover::after { transform: translateX(3px); color: var(--cor, var(--accent)); }
.cartao-ajuda strong { font-size: 16px; }
.cartao-ajuda small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.icone-cartao-ajuda { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
    border-radius: 12px; background: color-mix(in srgb, var(--cor, var(--accent)) 18%, transparent); color: var(--cor, var(--accent)); }

/* Corpo: marcadores e passos na cor do grupo; situações como etiquetas */
.secao-ajuda .corpo-secao-ajuda ul > li::before { background: var(--cor, var(--accent)); }
.secao-ajuda .corpo-secao-ajuda ol:not(.fluxo-ajuda) > li::before { background: var(--cor, var(--accent)); }
.corpo-secao-ajuda ul > li { border-left: 3px solid transparent; transition: border-color 0.15s, background 0.15s; }
.corpo-secao-ajuda ul > li:hover { border-left-color: var(--cor, var(--accent)); }
.corpo-secao-ajuda strong.situacao-ajuda { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 13px;
    line-height: 1.6; vertical-align: baseline; }
.corpo-secao-ajuda ol.fluxo-ajuda > li { transition: transform 0.15s, box-shadow 0.15s; }
.corpo-secao-ajuda ol.fluxo-ajuda > li:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); }
.nav-secao-ajuda:hover { border-color: var(--cor, var(--accent)); }

/* Entrada da seção: sobe e aparece; itens em sequência */
@keyframes entrada-ajuda { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.secao-ajuda.entrando .cabecalho-secao-ajuda { animation: entrada-ajuda 0.28s ease-out both; }
.secao-ajuda.entrando .corpo-secao-ajuda,
.secao-ajuda.entrando .mosaico-ajuda { animation: entrada-ajuda 0.32s ease-out 0.06s both; }
.secao-ajuda.entrando .corpo-secao-ajuda li,
.secao-ajuda.entrando .cartao-ajuda { animation: entrada-ajuda 0.3s ease-out backwards; }
.secao-ajuda.entrando li:nth-child(2), .secao-ajuda.entrando .cartao-ajuda:nth-child(2) { animation-delay: 0.04s; }
.secao-ajuda.entrando li:nth-child(3), .secao-ajuda.entrando .cartao-ajuda:nth-child(3) { animation-delay: 0.08s; }
.secao-ajuda.entrando li:nth-child(4), .secao-ajuda.entrando .cartao-ajuda:nth-child(4) { animation-delay: 0.12s; }
.secao-ajuda.entrando li:nth-child(5) { animation-delay: 0.16s; }
.secao-ajuda.entrando li:nth-child(n+6) { animation-delay: 0.2s; }
@media (prefers-reduced-motion: reduce) {
    .secao-ajuda.entrando *, .cartao-ajuda, .corpo-secao-ajuda li { animation: none !important; transition: none !important; }
}
@media (max-width: 900px) {
    .fundo-secao-ajuda svg { width: 130px; height: 130px; }
    .cartoes-ajuda { grid-template-columns: 1fr; }
    .cartao-ajuda { min-height: 0; }
}

/* RH: telas do módulo */
.tela-rh .card { margin-bottom: 16px; }
.tabela-rh td { vertical-align: middle; font-size: 14px; }
.tabela-rh td.numero, .tabela-rh th.numero { text-align: right; }
.tabela-rh tr.linha-clicavel { cursor: pointer; }
.tabela-rh tr.linha-clicavel:hover td { background: rgba(128, 128, 128, 0.08); }
.tabela-rh .acoes-op form { margin: 0; }
.duas-colunas-rh { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; align-items: start; }
.form-linha-rh { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 8px; }
.form-linha-rh .form-field { flex: 1 1 160px; margin: 0; }
.form-linha-rh button { height: 44px; }
.avatar-rh { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-right: 10px;
    border-radius: 50%; background: var(--accent-suave); color: var(--accent-texto); font-weight: 800; font-size: 13px;
    vertical-align: middle; flex: none; }
.avatar-rh.grande { width: 60px; height: 60px; font-size: 22px; margin: 0; }
.nome-rh { display: inline-flex; flex-direction: column; vertical-align: middle; }
.tabela-rh strong, .card .tabela-rh strong, .linha-resumo-rh strong, .barra-setor-rh strong { font-size: inherit; }
.painel-rh-grade { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.painel-rh-grade.tres { grid-template-columns: 1.2fr 1fr 1fr; }
.barra-setor-rh { display: grid; grid-template-columns: 130px 1fr 34px; gap: 10px; align-items: center; font-size: 13px; margin: 8px 0; }
.barra-setor-rh strong { text-align: right; }
.trilho-rh { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.trilho-rh span { display: block; height: 100%; border-radius: 999px; }
.linha-resumo-rh { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border);
    font-size: 14px; color: var(--text); text-decoration: none; }
.cartoes-estoque a.cartao-estoque { color: inherit; text-decoration: none; }
.resumo-colaborador-rh { display: flex; align-items: center; gap: 16px; }
.resumo-colaborador-rh h1 { margin: 0; }
.resumo-colaborador-rh .subtitle { margin: 4px 0 0; }
.selo-colaborador-rh { margin-left: auto; }
.trilha-colaborador-rh { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.trilha-colaborador-rh .subtitle { margin: 0; }
.cadastro-rh { padding-top: 8px; }
.abas-rh { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; }
.abas-rh .aba-rh, .card .abas-rh .aba-rh { min-height: 44px; margin: 0; padding: 0 16px; border: 0; border-bottom: 2px solid transparent;
    border-radius: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.abas-rh .aba-rh[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.abas-rh .aba-rh:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.painel-aba-rh[hidden], .rodape-form-rh[hidden] { display: none; }
.painel-aba-rh textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface-2); color: var(--text); font: inherit; }
.subtitulo-rh { margin: 18px 0 8px; font-size: 15px; }
.aviso-permissao-rh { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); color: var(--muted); }
.form-documento-rh { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; padding: 14px;
    border: 1px dashed var(--border); border-radius: 12px; }
.form-documento-rh .form-field { flex: 1 1 170px; margin: 0; }
.form-documento-rh button { height: 44px; }
.linha-tempo-rh { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--border); display: flex;
    flex-direction: column; gap: 12px; }
.linha-tempo-rh li { position: relative; font-size: 14px; }
.linha-tempo-rh li::before { content: ""; position: absolute; left: -24px; top: 5px; width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent); }
.data-historico-rh { display: block; font-size: 12px; color: var(--muted); }
.acessos-rh { margin-top: 18px; font-size: 13px; color: var(--muted); }
.acessos-rh summary { cursor: pointer; font-weight: 700; }
/* Turnos */
.form-turno-rh h2 { margin: 22px 0 10px; font-size: 17px; }
.dias-turno { display: flex; flex-direction: column; gap: 8px; }
.dia-turno { display: grid; grid-template-columns: 90px repeat(4, minmax(0, 1fr)) 130px 150px; gap: 8px; align-items: center; }
.dia-turno.cabecalho-dias { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dia-turno input[type="time"] { height: 40px; padding: 0 8px; border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface-2); color: var(--text); font: inherit; }
.dia-turno.folga input[type="time"] { opacity: 0.35; }
.marca-dia { display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.aviso-dia { font-size: 12px; font-weight: 700; color: var(--accent-texto); }
.resumo-turno { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--accent-suave); font-weight: 600; }
.campo-sufixo-rh { display: flex; align-items: center; gap: 8px; }
.campo-sufixo-rh input { flex: 1; min-width: 0; }
.campo-sufixo-rh span { color: var(--muted); font-size: 13px; white-space: nowrap; }
@media (max-width: 900px) {
    .duas-colunas-rh, .painel-rh-grade, .painel-rh-grade.tres { grid-template-columns: 1fr; }
    .dia-turno { grid-template-columns: 70px repeat(2, minmax(0, 1fr)); }
    .dia-turno.cabecalho-dias { display: none; }
    .resumo-colaborador-rh { flex-wrap: wrap; }
}
.grupo-rh { --cor: #84cc16; }
.grupo-financeiro { --cor: #22c55e; }
/* Painel do RH: 5 cartões na mesma linha, mesmo tamanho */
.cartoes-estoque.cartoes-rh { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cartoes-rh .cartao-estoque { display: flex; flex-direction: column; min-height: 132px; box-sizing: border-box; }
.cartoes-rh .cartao-estoque small { margin-top: auto; }
@media (max-width: 1100px) { .cartoes-estoque.cartoes-rh { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .cartoes-estoque.cartoes-rh { grid-template-columns: 1fr; } }

/* RH › Ponto */
.importar-ponto-rh { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 16px; padding: 18px 20px;
    border: 2px dashed var(--accent-texto); border-radius: 16px; background: var(--accent-suave); }
.icone-importar-rh { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    border-radius: 14px; background: var(--surface); color: var(--accent-texto); font-size: 22px; }
.texto-importar-rh { display: flex; flex-direction: column; gap: 2px; flex: 1 1 320px; }
.importar-ponto-rh button { height: 44px; }
.sem-colaborador-rh summary { cursor: pointer; font-weight: 700; }
.sem-colaborador-rh ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; }
.seletor-ponto-rh { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.seletor-ponto-rh .form-field { margin: 0; flex: 1 1 220px; }
.navega-mes-rh { display: flex; gap: 8px; }
.navega-mes-rh a { height: 44px; display: inline-flex; align-items: center; padding: 0 14px; }
.titulo-espelho-rh { margin: 16px 0 0; font-size: 17px; }
.espelho-grade-rh { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.espelho-grade-rh:has(> :only-child) { grid-template-columns: 1fr; }
.tabela-espelho-rh td { padding-top: 9px; padding-bottom: 9px; }
.batidas-rh { display: flex; flex-wrap: wrap; gap: 6px; }
.batidas-rh > span { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: 8px;
    background: var(--surface-2); font-variant-numeric: tabular-nums; font-size: 13px; }
.batidas-rh > span.batida-ajuste { outline: 1px dashed var(--accent-texto); }
.batidas-rh sup { color: var(--accent-texto); font-size: 10px; }
.remover-batida, .card .remover-batida { margin: 0 0 0 2px; padding: 0 3px; border: 0; background: transparent; color: var(--muted);
    font-size: 14px; line-height: 1; cursor: pointer; height: auto; }
.remover-batida:hover { color: #f87171; }
.tabela-espelho-rh tr.dia-folga-rh td { opacity: 0.55; }
.tabela-espelho-rh tr.dia-pendente-rh td { background: rgba(239, 68, 68, 0.06); }
.batidas-editaveis-rh { align-items: center; }
.batidas-rh .batida-campo, .card .batidas-rh .batida-campo { width: 4.6em; height: auto; min-height: 0; margin: 0; padding: 0;
    border: 0; background: transparent; color: inherit; font: inherit; font-variant-numeric: tabular-nums; box-shadow: none; }
.batidas-rh .batida-campo::-webkit-calendar-picker-indicator { display: none; }
.batidas-rh .batida-campo:focus { outline: none; }
.batidas-rh > span:focus-within { outline: 1px solid var(--accent-texto); }
.batidas-rh > span .remover-batida { visibility: hidden; }
.batidas-rh > span:hover .remover-batida, .batidas-rh > span:focus-within .remover-batida,
.batidas-rh > span.batida-nova .remover-batida { visibility: visible; }
.batidas-rh > span.batida-alterada, .batidas-rh > span.batida-nova { outline: 1px solid var(--accent-texto);
    background: rgba(99, 102, 241, 0.12); }
.batidas-rh > span.batida-removida { opacity: 0.6; outline: 1px solid #f87171; }
.incluir-batida, .card .incluir-batida { width: 24px; height: 24px; min-height: 0; margin: 0; padding: 0; border-radius: 8px;
    border: 1px dashed var(--border); background: transparent; color: var(--muted); font-size: 15px; line-height: 1;
    cursor: pointer; opacity: 0; }
.tabela-espelho-rh tr:hover .incluir-batida, .incluir-batida:focus { opacity: 1; }
.incluir-batida:hover { color: var(--accent-texto); border-color: var(--accent-texto); }
.ajuste-batida-rh { display: flex; flex: 1 0 100%; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.ajuste-batida-rh[hidden] { display: none; }
.ajuste-batida-rh .motivo-ajuste { flex: 1 1 220px; min-width: 0; height: 32px; margin: 0; }
.ajuste-batida-rh button { height: 32px; margin: 0; padding: 0 12px; }
.banco-horas-rh .linha-resumo-rh.total { border-bottom: 0; font-size: 16px; }
.positivo-rh { color: #34d399; }
.negativo-rh { color: #f87171; }
@media (max-width: 900px) { .espelho-grade-rh { grid-template-columns: 1fr; } }

/* ---------------- Financeiro ---------------- */
.topo-fin { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 8px; }
.topo-fin h1 { margin: 0; }
.topo-fin .subtitle { margin: 4px 0 0; }
.acoes-topo-fin { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.acoes-topo-fin > a { height: 42px; display: inline-flex; align-items: center; padding: 0 16px; }
.seletor-empresa-fin { display: flex; align-items: center; gap: 6px; margin: 0; }
.seletor-empresa-fin select { min-width: 230px; height: 42px; margin: 0; border-color: var(--accent-texto); font-weight: 600; }
.botao-primario-fin { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border-radius: 10px;
    background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; }
.botao-primario-fin:hover { filter: brightness(1.08); }
.tela-fin .cartoes-rh a.cartao-estoque { text-decoration: none; color: inherit; }
.tela-fin .cartoes-rh a.cartao-estoque:hover { border-color: var(--accent-texto); }
.legenda-fluxo-fin { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--muted); }
.legenda-fluxo-fin i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; }
.legenda-fluxo-fin i.entrada, .barras-fluxo-fin .entrada { background: #34d399; }
.legenda-fluxo-fin i.saida, .barras-fluxo-fin .saida { background: #f87171; }
.saldo-projetado-fin { margin-left: auto; }
.saldo-projetado-fin strong { color: var(--text); }
.grafico-fluxo-fin { display: flex; gap: 2px; margin-top: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.dia-fluxo-fin { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.dia-fluxo-fin small { font-size: 11px; color: var(--muted); }
.barras-fluxo-fin { height: 150px; width: 100%; display: flex; justify-content: center; align-items: flex-end; gap: 3px; }
.barras-fluxo-fin span { width: 40%; max-width: 12px; min-height: 0; border-radius: 4px 4px 0 0; }
.transferir-fin { margin-top: 14px; }
.transferir-fin summary, .novo-fin summary, .editar-fin summary { cursor: pointer; font-weight: 700; }
.transferir-fin form, .novo-fin form { margin-top: 12px; }
.valor-pagar-fin, .valor-saida-fin { color: #f87171; }
.valor-receber-fin, .valor-entrada-fin { color: #34d399; }
:root[data-theme="light"] .valor-pagar-fin, :root[data-theme="light"] .valor-saida-fin { color: #dc2626; }
:root[data-theme="light"] .valor-receber-fin, :root[data-theme="light"] .valor-entrada-fin { color: #059669; }
.seta-pagar-fin { color: #f87171; font-weight: 800; }
.seta-receber-fin { color: #34d399; font-weight: 800; }
.filtros-fin { margin: 4px 0 12px; }
.totais-fin { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 12px; font-size: 14px; }
.grade-lancamento-fin { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.lateral-fin { display: flex; flex-direction: column; }
.grade-form-fin { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; align-items: end; }
.grade-form-fin .form-field { margin: 0; }
.grade-form-fin .largo-fin { grid-column: 1 / -1; }
.grade-form-fin button { height: 44px; }
.tipo-lancamento-fin { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
.tipo-lancamento-fin label { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; font-weight: 700; cursor: pointer; }
.tipo-lancamento-fin label:has(input:checked) { background: rgba(124, 92, 255, 0.14); color: var(--accent-texto); }
.tipo-lancamento-fin input { margin: 0; }
.check-fin { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.check-fin input { width: auto; margin: 0; }
.rodape-form-fin { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.rodape-form-fin a { height: 44px; display: inline-flex; align-items: center; padding: 0 16px; }
.rodape-form-fin button { height: 44px; }
.resumo-lancamento-fin h2 { display: flex; align-items: center; gap: 10px; }
.estornada-fin td { opacity: 0.55; text-decoration: line-through; }
.estornada-fin td:nth-child(4) { text-decoration: none; }
.cancelar-lancamento-fin { margin-top: 14px; }
.perigo-fin { color: #f87171; }
.extrato-grade-fin { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.tabela-extrato-fin tr.pendente-fin td:first-child { box-shadow: inset 3px 0 0 #7fb0ff; }
.acoes-extrato-fin { white-space: nowrap; }
.acoes-extrato-fin form { display: inline; margin: 0; }
.acoes-extrato-fin button { height: 34px; margin: 0 4px 0 0; padding: 0 12px; }
.conferencia-fin { display: block; margin-top: 4px; font-size: 14px; }
.nova-regra-fin { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.nova-regra-fin .form-field { margin: 0; }
.dialogo-fin { width: min(640px, calc(100vw - 32px)); border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
    color: var(--text); padding: 22px; }
.dialogo-fin::backdrop { background: rgba(0, 0, 0, 0.55); }
.dialogo-fin h2 { margin: 0 0 4px; }
.opcoes-classificar-fin { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; padding: 0; border: 0; }
.opcoes-classificar-fin label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.opcoes-classificar-fin input { width: auto; margin: 0; }
.dialogo-fin [data-opcao][hidden] { display: none; }
.inativa-fin td, .categoria-fin.inativa-fin { opacity: 0.55; }
.editar-fin { display: inline-block; }
.editar-fin[open] { display: block; width: 100%; margin: 8px 0; }
.plano-contas-fin { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.grupo-categoria-fin { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.grupo-categoria-fin summary { cursor: pointer; font-weight: 800; display: flex; justify-content: space-between; gap: 8px; }
.categoria-fin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.categoria-fin.nivel-1 { padding-left: 14px; }
.renomear-fin { display: none; gap: 6px; width: 100%; }
.categoria-fin:hover .renomear-fin, .categoria-fin:focus-within .renomear-fin { display: flex; }
.renomear-fin input { height: 34px; margin: 0; flex: 1; }
.renomear-fin button { height: 34px; margin: 0; }
.nova-categoria-fin { display: flex; gap: 6px; margin-top: 8px; }
.nova-categoria-fin input { height: 34px; margin: 0; flex: 1; }
.nova-categoria-fin button { height: 34px; margin: 0; }
.saldo-negativo-fin td { background: rgba(239, 68, 68, 0.06); }
@media (max-width: 1000px) {
    .grade-lancamento-fin, .extrato-grade-fin { grid-template-columns: 1fr; }
    .seletor-empresa-fin select { min-width: 0; width: 100%; }
}

/* Gestão de Pedidos: tabela cabe na tela sem rolar para o lado */
.container:has(#tabela-pedidos) { max-width: 1880px; }
#tabela-pedidos th, #tabela-pedidos td { padding: 12px 10px; }
#tabela-pedidos th { white-space: normal; }
#tabela-pedidos td[data-coluna="numero"] { font-size: 13px; word-break: break-all; min-width: 96px; }
#tabela-pedidos td[data-coluna="loja"], #tabela-pedidos td[data-coluna="destinatario"] { min-width: 90px; }
#tabela-pedidos .codigo-com-miniatura { gap: 10px; }
@media (max-width: 1500px) {
    #tabela-pedidos th, #tabela-pedidos td { padding: 10px 7px; }
    #tabela-pedidos td { font-size: 13px; }
}
.linha-editar-rh > td { background: var(--fundo-suave, rgba(124,92,255,0.06)); }
.linha-editar-rh .opcao-controla-estoque { flex: 1 1 100%; }
.sem-intervalo-dia { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.dia-turno.sem-intervalo input[name^="intervalo_"] { opacity: 0.35; }

/* =========================================================
   Menu lateral (substitui o cabeçalho com menu no topo)
   Encolhido mostra só os ícones; passar o mouse (ou navegar
   com Tab) abre por cima da tela, sem empurrar o conteúdo.
   Celular: escondido, abre pelo botão ☰.
   ========================================================= */
:root { --menu-fechado: 72px; --menu-aberto: 252px; }

body { padding-left: var(--menu-fechado); }

.menu-lateral {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1500;
    width: var(--menu-fechado);
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 12px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    overflow-x: hidden; overflow-y: auto;
    scrollbar-width: none;
    transition: width .18s ease, box-shadow .18s ease;
}
.menu-lateral::-webkit-scrollbar { display: none; }

.menu-lateral .rotulo, .menu-lateral .seta-grupo, .menu-lateral .marca-completa {
    opacity: 0; transition: opacity .12s ease; white-space: nowrap; pointer-events: none;
}
.menu-lateral .submenu { display: none; }

@media (min-width: 901px) {
    .menu-lateral:hover, .menu-lateral:focus-within {
        width: var(--menu-aberto);
        box-shadow: 14px 0 36px rgba(0, 0, 0, 0.35);
        scrollbar-width: thin;
    }
}
.menu-lateral:hover .rotulo, .menu-lateral:focus-within .rotulo,
.menu-lateral:hover .seta-grupo, .menu-lateral:focus-within .seta-grupo,
.menu-lateral:hover .marca-completa, .menu-lateral:focus-within .marca-completa,
body.menu-aberto .menu-lateral .rotulo, body.menu-aberto .menu-lateral .seta-grupo,
body.menu-aberto .menu-lateral .marca-completa {
    opacity: 1; pointer-events: auto; transition-delay: .05s;
}
.menu-lateral:hover .grupo-menu[open] .submenu, .menu-lateral:focus-within .grupo-menu[open] .submenu,
body.menu-aberto .menu-lateral .grupo-menu[open] .submenu {
    display: flex;
}

/* Marca: ícone encolhido, logo inteiro aberto */
.menu-lateral .logo-lateral {
    position: relative; display: flex; align-items: center; height: 48px; padding: 0 6px; margin-bottom: 12px; flex: none;
}
.menu-lateral .icone-marca { width: 36px; height: 36px; border-radius: 10px; transition: opacity .12s ease; }
.menu-lateral .marca-completa { position: absolute; left: 6px; top: 8px; }
.menu-lateral .marca-completa img { width: 150px; height: auto; }
.menu-lateral:hover .icone-marca, .menu-lateral:focus-within .icone-marca,
body.menu-aberto .menu-lateral .icone-marca { opacity: 0; }

/* Itens */
.menu-lateral .menu { display: flex; flex-direction: column; align-items: stretch; gap: 2px; flex: none; flex-wrap: nowrap; }
.menu-lateral .grupo-menu { display: block; min-width: 0; }
.menu-lateral .item-menu {
    display: flex; align-items: center; gap: 14px;
    min-height: 44px; padding: 0 12px; border-radius: 10px;
    color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none;
    background: transparent; cursor: pointer; list-style: none;
    width: 100%; min-width: 0; overflow: hidden; flex-shrink: 0;
}
.menu-lateral summary.item-menu::-webkit-details-marker { display: none; }
.menu-lateral .item-menu:hover { color: var(--text); background: var(--surface-2); }
.menu-lateral .item-menu.ativo { color: var(--accent-texto); background: var(--accent-suave); font-weight: 700; }
.menu-lateral .icone-menu { flex: none; }
.menu-lateral .seta-grupo { margin-left: auto; transition: transform .15s ease, opacity .12s ease; }
.menu-lateral .grupo-menu[open] .seta-grupo { transform: rotate(90deg); }

.menu-lateral .submenu {
    flex-direction: column; gap: 1px; margin: 2px 0 6px 23px; padding-left: 13px; border-left: 1px solid var(--border);
}
.menu-lateral .submenu a {
    display: block; padding: 8px 10px; border-radius: 8px; white-space: nowrap;
    color: var(--muted); font-size: 13.5px; font-weight: 500; text-decoration: none;
}
.menu-lateral .submenu a:hover { color: var(--text); background: var(--surface-2); }
.menu-lateral .submenu a.ativo { color: var(--accent-texto); background: var(--accent-suave); font-weight: 600; }

/* Rodapé: ajuda, tema, usuário */
.rodape-menu {
    margin-top: auto; display: flex; flex-direction: column; gap: 2px;
    padding-top: 12px; border-top: 1px solid var(--border); flex: none;
}
.rodape-menu .item-tema { cursor: default; }
.rodape-menu .item-tema select {
    flex: 1; height: 34px; padding: 0 8px; border-radius: 8px; font-size: 13px; min-width: 0;
}
.usuario-menu { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 6px; }
.avatar-menu {
    width: 36px; height: 36px; flex: none; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-suave); color: var(--accent-texto); font-size: 13px; font-weight: 800;
}
.dados-usuario-menu { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; flex: 1; }
.dados-usuario-menu .user-name { color: var(--text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.dados-usuario-menu small { color: var(--muted); font-size: 12px; }
.dados-usuario-menu a { color: var(--accent-texto); }
.usuario-menu form { margin: 0; flex: none; }
.usuario-menu .sair-menu {
    height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px;
    background: transparent; color: var(--text); font-size: 13px; font-weight: 600;
}
.usuario-menu .sair-menu:hover { background: var(--surface-2); }

/* Celular: barra com ☰ e o menu desliza da esquerda */
.barra-celular, .fundo-menu { display: none; }
@media (max-width: 900px) {
    body { padding-left: 0; }
    .barra-celular {
        position: sticky; top: 0; z-index: 1400;
        display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 12px;
        background: var(--surface); border-bottom: 1px solid var(--border);
    }
    .barra-celular .logo img { width: 130px; height: auto; }
    .abrir-menu {
        width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text);
    }
    .menu-lateral {
        width: var(--menu-aberto); transform: translateX(-100%);
        transition: transform .2s ease, box-shadow .2s ease;
    }
    body.menu-aberto .menu-lateral { transform: none; box-shadow: 14px 0 36px rgba(0, 0, 0, 0.45); }
    body.menu-aberto .fundo-menu {
        display: block; position: fixed; inset: 0; z-index: 1450; background: rgba(0, 0, 0, 0.45);
    }
}

@media print {
    body { padding-left: 0 !important; }
    .menu-lateral, .barra-celular, .fundo-menu { display: none !important; }
}

/* Dashboard: Integrações compacta (uma linha por conta, lista rolável) */
.painel-integracoes ul { gap: 2px; max-height: 236px; overflow-y: auto; margin-top: 10px; padding-right: 4px; }
.painel-integracoes li {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center;
    gap: 8px; flex-wrap: nowrap; padding: 4px 0; font-size: 13px;
}
.painel-integracoes .painel-conta-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-integracoes .painel-conta-ultima { flex-basis: auto; font-size: 12px; white-space: nowrap; }
.painel-integracoes .status-integracao { padding: 2px 8px; font-size: 11px; }
.painel-integracoes li.texto-secundario { display: block; }

/* Linha de ações dos filtros dentro da grade: ocupa a linha inteira
   (contagem à esquerda; Limpar filtros e Filtrar juntos à direita) */
.form-grid > .pedidos-acoes { grid-column: 1 / -1; margin-top: 4px; }

/* Dashboard: Integrações na mesma altura dos outros cards (a lista rola por dentro
   e não define a altura da linha) */
.painel-card.painel-integracoes { position: relative; }
.painel-integracoes ul {
    position: absolute; top: 52px; left: 24px; right: 14px; bottom: 14px;
    max-height: none; margin: 0; padding-right: 8px;
}

/* Gestão de Pedidos: Erros fiscais com o motivo na dica (passar o mouse) */
.etiqueta-situacao.com-motivo { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.caixa-dica { white-space: pre-line; }

/* Relatórios */
.grade-relatorios { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 8px; }
.cartao-relatorio {
    display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--border);
    border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none;
}
.cartao-relatorio:hover { border-color: var(--accent); }
.cartao-relatorio strong { font-size: 15px; }
.cartao-relatorio span { font-size: 13px; }
.resumo-relatorios { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 16px 0; }
.painel-card.resumo-relatorio { min-height: 0; padding: 16px 18px; gap: 6px; }
.painel-card.resumo-relatorio strong { font-size: 20px; }
.tabela-relatorio td, .tabela-relatorio th { white-space: nowrap; }
.tabela-relatorio td:last-child { white-space: normal; }
.nota-relatorio { margin: 12px 0 0; font-size: 13px; }
.grupo-relatorios { --cor: #38bdf8; }

/* Calendário de mês (flatpickr monthSelect) no tema do PippeHub */
.flatpickr-monthSelect-month.selected, .flatpickr-monthSelect-month.selected:hover {
    background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important;
}
.prazo-periodo-input:disabled { opacity: 0.5; cursor: not-allowed; }
.popover-filtro-card .flatpickr-wrapper { width: 100%; }

/* Curva ABC: A verde, B âmbar, C cinza-azulado */
.selo-abc { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px;
    border-radius: 7px; font-weight: 800; font-size: 13px; }
.selo-abc.abc-A { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
.selo-abc.abc-B { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
.selo-abc.abc-C { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; }
.tabela-relatorio tr.linha-abc-A td:first-child { box-shadow: inset 3px 0 0 #22c55e; }
.tabela-relatorio tr.linha-abc-B td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.tabela-relatorio tr.linha-abc-C td:first-child { box-shadow: inset 3px 0 0 #94a3b8; }
.tabela-relatorio tr.linha-abc-A { background: rgba(34, 197, 94, 0.04); }
.tabela-relatorio tr.linha-abc-B { background: rgba(245, 158, 11, 0.04); }
.resumo-relatorio.resumo-abc-A strong { color: #4ade80; }
.resumo-relatorio.resumo-abc-B strong { color: #fbbf24; }
.resumo-relatorio.resumo-abc-C strong { color: #cbd5e1; }
:root[data-theme="light"] .selo-abc.abc-A, :root[data-theme="light"] .resumo-relatorio.resumo-abc-A strong { color: #15803d; }
:root[data-theme="light"] .selo-abc.abc-B, :root[data-theme="light"] .resumo-relatorio.resumo-abc-B strong { color: #b45309; }
:root[data-theme="light"] .selo-abc.abc-C, :root[data-theme="light"] .resumo-relatorio.resumo-abc-C strong { color: #475569; }

/* Caminho da página (subtítulo "Relatórios › Vendas", "Equipe › Colaboradores"…):
   link na cor de destaque do tema, sem o azul/sublinhado padrão do navegador */
.subtitle a {
    color: var(--accent-texto);
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: color .12s ease;
}
.subtitle a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.subtitle a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Financeiro: a pagar em vermelho, a receber em verde */
.botao-pagar-fin, .botao-receber-fin {
    display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border-radius: 10px;
    color: #fff; font-weight: 700; text-decoration: none; border: 1px solid transparent;
}
.botao-pagar-fin { background: #dc2626; }
.botao-receber-fin { background: #059669; }
.botao-pagar-fin:hover, .botao-receber-fin:hover { filter: brightness(1.1); }
.botao-pagar-fin:focus-visible, .botao-receber-fin:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.tipo-lancamento-fin label.tipo-pagar:has(input:checked) { background: rgba(220, 38, 38, 0.16); color: #f87171; }
.tipo-lancamento-fin label.tipo-receber:has(input:checked) { background: rgba(5, 150, 105, 0.18); color: #34d399; }
:root[data-theme="light"] .tipo-lancamento-fin label.tipo-pagar:has(input:checked) { color: #b91c1c; }
:root[data-theme="light"] .tipo-lancamento-fin label.tipo-receber:has(input:checked) { color: #047857; }

/* Financeiro › lançamento: grade de 4 colunas, número, Fornecedor/Cliente com busca, parcelas */
.grade-lancamento-campos-fin { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 16px; }
.grade-lancamento-campos-fin .span-2-fin { grid-column: span 2; }
@media (max-width: 900px) {
    .grade-lancamento-campos-fin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .grade-lancamento-campos-fin { grid-template-columns: 1fr; }
    .grade-lancamento-campos-fin .span-2-fin { grid-column: auto; }
}
.topo-form-lancamento-fin { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.topo-form-lancamento-fin .tipo-lancamento-fin { margin-bottom: 0; }
.numero-lancamento-fin { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; color: var(--muted); font-size: 13px; }
.selo-numero-fin { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: 14px; }

.combo-caixa-fin { position: relative; }
.combo-lista-fin {
    position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0; max-height: 300px; overflow-y: auto;
    margin: 0; padding: 6px; list-style: none; border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
}
.combo-lista-fin li { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.combo-lista-fin li strong { color: var(--accent-texto); }
.combo-lista-fin li:hover, .combo-lista-fin li[aria-selected="true"] { background: var(--surface-2); }
.combo-lista-fin .combo-criar-fin { display: flex; align-items: center; gap: 10px; margin-top: 4px; border-top: 1px solid var(--border);
    border-radius: 0 0 8px 8px; padding-top: 12px; }
.combo-criar-rotulo-fin { color: var(--accent-texto); font-weight: 700; white-space: nowrap; }
.combo-lista-fin .combo-criar-fin strong { color: var(--text); }
.combo-lista-fin .combo-vazio-fin { color: var(--muted); cursor: default; }

.previa-parcelas-fin { align-self: stretch; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 12px;
    font-size: 13px; color: var(--muted); min-height: 44px; }
.previa-parcelas-fin:empty { display: none; }
.previa-parcelas-fin strong { color: var(--text); }
.previa-parcelas-fin ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; }
.previa-parcelas-fin.invalido { border-color: #f87171; color: #f87171; }
.grade-lancamento-campos-fin input:disabled { opacity: 0.5; }

.rodape-form-fin .botao-salvar-fin { padding: 0 22px; border: 0; border-radius: 10px; background: var(--accent); color: #fff;
    font-weight: 700; font-size: 15px; cursor: pointer; }
.rodape-form-fin .botao-salvar-fin:hover { background: var(--accent-hover); }

/* Equipe › Folha: etapas, prévia e lançamentos */
.etapa-folha { margin-bottom: 16px; }
.cabecalho-etapa-folha { display: flex; align-items: flex-start; gap: 14px; }
.cabecalho-etapa-folha > div { flex: 1; }
.cabecalho-etapa-folha h2 { margin: 0 0 4px; font-size: 18px; }
.cabecalho-etapa-folha p { margin: 0; }
.numero-etapa-folha { width: 32px; height: 32px; flex: none; border-radius: 50%; display: inline-flex; align-items: center;
    justify-content: center; background: var(--accent-suave); color: var(--accent-texto); font-weight: 800; }
.acoes-folha { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.acoes-folha:empty { display: none; }
.form-acao-folha { margin: 0; }
.acoes-folha button, .acoes-folha .btn-limpar-pedidos { height: 44px; padding: 0 18px; }
.botao-primario-folha { border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 700; cursor: pointer; }
.botao-primario-folha:hover { background: var(--accent-hover); }
.tabela-folha td, .tabela-folha th { white-space: nowrap; }
.tabela-folha tr.grupo-folha td { background: var(--surface-2); font-weight: 800; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.tabela-folha tr.total-folha td { font-weight: 800; border-top: 2px solid var(--border); }
.tabela-folha .campo-folha { width: 110px; height: 36px; padding: 0 8px; text-align: right; }
.nota-folha { font-size: 13px; margin: 10px 0 0; }
.lancamentos-folha { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.8; }
.seletor-mes-folha { min-width: 220px; }
.aviso-linha-folha { color: #fbbf24; font-weight: 600; }

/* Utilitários › Situação da SEFAZ */
.grade-sefaz { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cartao-sefaz { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--border);
    border-left: 4px solid var(--border); border-radius: 12px; background: var(--surface); min-width: 0; }
.cartao-sefaz.sefaz-ok { border-left-color: #22c55e; }
.cartao-sefaz.sefaz-alerta { border-left-color: #f59e0b; }
.cartao-sefaz.sefaz-parado { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.06); }
.cartao-sefaz.sefaz-minha { box-shadow: 0 0 0 1px var(--accent); }
.topo-cartao-sefaz { display: flex; align-items: center; gap: 8px; }
.topo-cartao-sefaz strong { font-size: 18px; }
.topo-cartao-sefaz span:not(.selo-sefaz) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
.selo-sefaz { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.sefaz-ok .selo-sefaz { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.sefaz-alerta .selo-sefaz { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
.sefaz-parado .selo-sefaz { background: rgba(239, 68, 68, 0.16); color: #f87171; }
:root[data-theme="light"] .sefaz-ok .selo-sefaz { color: #15803d; }
:root[data-theme="light"] .sefaz-alerta .selo-sefaz { color: #b45309; }
:root[data-theme="light"] .sefaz-parado .selo-sefaz { color: #b91c1c; }
.detalhe-sefaz { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empresas-sefaz { color: var(--accent-texto); font-size: 12px; font-weight: 600; }
.valor-ok-sefaz { color: #4ade80; } .valor-alerta-sefaz { color: #fbbf24; } .valor-parado-sefaz { color: #f87171; }
.grupo-utilitarios { --cor: #94a3b8; }

/* Fechamento individual do ponto */
.fechamento-ponto-rh { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fechamento-ponto-rh h2 { margin: 0 0 6px; font-size: 17px; }
.fechamento-ponto-rh p { margin: 0 0 4px; }
.fechamento-ponto-rh .acoes-folha { margin-top: 0; }
.barra-progresso-folha { height: 8px; margin-top: 14px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.barra-progresso-folha span { display: block; height: 100%; background: #22c55e; border-radius: 999px; }
.selo-fechado-folha { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
    background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.selo-aberto-folha { display: inline-block; margin-left: 4px; font-size: 11px; font-weight: 700; }
.selo-aberto-folha a { color: #fbbf24; }
:root[data-theme="light"] .selo-fechado-folha { color: #15803d; }
:root[data-theme="light"] .selo-aberto-folha a { color: #b45309; }

/* Links no meio do texto (sem classe própria): cor de destaque do tema, sem o azul padrão do
   navegador. Botões e itens com classe (btn-…, acao-op, cartões) mantêm o próprio estilo. */
.container a:not([class]), .fundo-menu ~ * .aviso-permissao-rh a, .faixa-teste a:not([class]) {
    color: var(--accent-texto);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--accent-texto) 45%, transparent);
    text-underline-offset: 3px;
    transition: color .12s ease, text-decoration-color .12s ease;
}
.container a:not([class]):hover { color: var(--text); text-decoration-color: currentColor; }
.container a:not([class]):visited { color: var(--accent-texto); }
.container a:not([class]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
/* Links que são o próprio conteúdo da célula (ex.: descrição do lançamento): sem sublinhado até passar o mouse */
.container td > a:not([class]) { text-decoration: none; }
.container td > a:not([class]):hover { text-decoration: underline; }
.container .subtitle a:not([class]) { text-decoration: none; }
.container .subtitle a:not([class]):hover { text-decoration: underline; }

/* Equipe › Folha: prévia mais legível (compacta, nome em uma linha, saldo em destaque) */
.tabela-folha { font-size: 13.5px; }
.tabela-folha th { font-size: 11px; padding: 10px 12px; }
.tabela-folha td { padding: 10px 12px; vertical-align: middle; }
.tabela-folha strong, .card .tabela-folha strong { font-size: inherit; }
.tabela-folha .colaborador-folha { min-width: 240px; white-space: normal; position: sticky; left: 0; z-index: 1; background: var(--surface); }
.tabela-folha tr.grupo-folha td, .tabela-folha tr.total-folha td:first-child { position: sticky; left: 0; }
.tabela-folha .nome-folha { display: block; font-weight: 700; font-size: 14px; color: var(--text); line-height: 1.3; }
.tabela-folha .linha-cargo-folha { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.tabela-folha .linha-cargo-folha small { font-size: 12px; }
.tabela-folha .selo-fechado-folha, .tabela-folha .selo-aberto-folha { margin-left: 0; }
.tabela-folha .saldo-folha { font-weight: 800; font-size: 14px; color: var(--accent-texto); background: var(--accent-suave); }
.tabela-folha tr:hover td { background: var(--surface-2); }
.tabela-folha tr:hover td.saldo-folha { background: var(--accent-suave); }
.tabela-folha tr.total-folha td { background: var(--surface-2); }
.tabela-folha .campo-folha {
    width: 104px; height: 34px; padding: 0 8px; text-align: right; font: inherit;
    background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
}
.tabela-folha .campo-folha:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-suave); }

/* Folha: interruptor agrupado × individual, ao lado de Gerar lançamentos */
.chave-lancamento-folha { margin: 0 auto 0 0; }
.interruptor-folha { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 10px; min-height: 44px;
    border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-suave); cursor: pointer; }
.interruptor-folha input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.trilho-interruptor { position: relative; width: 46px; height: 26px; flex: none; border-radius: 999px; background: var(--border);
    transition: background .15s ease; }
.botao-interruptor { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .15s ease; }
.interruptor-folha input:checked + .trilho-interruptor { background: var(--accent); }
.interruptor-folha input:checked + .trilho-interruptor .botao-interruptor { transform: translateX(20px); }
.interruptor-folha input:focus-visible + .trilho-interruptor { outline: 2px solid var(--accent); outline-offset: 3px; }
.texto-interruptor { display: flex; flex-direction: column; line-height: 1.25; }
.texto-interruptor strong { font-size: 14px; color: var(--text); }
.texto-interruptor small { font-size: 12px; color: var(--muted); }
.acoes-folha:has(.chave-lancamento-folha) { align-items: center; }

/* Financeiro › Plano de contas */
.tabela-categorias-fin tr.categoria-principal-fin td { background: var(--surface-2); }
.tabela-categorias-fin tr.subcategoria-fin td:first-child { padding-left: 28px; }
.tabela-categorias-fin tr.nivel-plano-2 td:first-child { padding-left: 56px; }
.tabela-categorias-fin .inativa-fin td { opacity: .55; }
.etiqueta-situacao.grupo-dre-receita { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.etiqueta-situacao.grupo-dre-nao_operacional { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; }
.etiqueta-situacao[class*="grupo-dre-"]:not(.grupo-dre-receita):not(.grupo-dre-nao_operacional) { background: rgba(248, 113, 113, 0.12); color: #fca5a5; }
:root[data-theme="light"] .etiqueta-situacao.grupo-dre-receita { color: #15803d; }
:root[data-theme="light"] .etiqueta-situacao[class*="grupo-dre-"]:not(.grupo-dre-receita):not(.grupo-dre-nao_operacional) { color: #b91c1c; }
:root[data-theme="light"] .etiqueta-situacao.grupo-dre-nao_operacional { color: #475569; }
.novo-fin.card { margin-bottom: 16px; }
.acoes-op .excluir-categoria-fin:not(:disabled) { color: #f87171; border-color: rgba(248, 113, 113, 0.45); }
.acoes-op .excluir-categoria-fin:not(:disabled):hover { background: rgba(248, 113, 113, 0.12); }
.acoes-op .excluir-categoria-fin:disabled { opacity: .4; cursor: not-allowed; }
.form-excluir-categoria-fin { margin: 0; }
.combo-lista-fin .combo-opcao-fin { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.combo-tipo-fin { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.combo-tipo-fin.tipo-colaborador { background: var(--accent-suave); color: var(--accent-texto); }
.combo-tipo-fin.tipo-cliente { background: rgba(34, 197, 94, 0.14); color: #4ade80; }
:root[data-theme="light"] .combo-tipo-fin.tipo-cliente { color: #15803d; }
.desconto-folha { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; color: #fca5a5; }
.pergunta-desconto-fin { padding: 14px 16px; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-suave); gap: 8px; }
.pergunta-desconto-fin strong { color: var(--text); }
.opcoes-desconto-fin { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.opcoes-desconto-fin label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.opcoes-desconto-fin input { width: auto; margin: 0; }
.opcoes-desconto-fin select { width: auto; min-width: 170px; height: 38px; }
.info-desconto-fin { border-style: dashed; }

/* Confirmação no tema (confirmar.js), no lugar do confirm() do navegador */
.dialogo-pippe { padding: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text);
    width: min(460px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.dialogo-pippe::backdrop { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); }
.dialogo-pippe-caixa { display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; padding: 24px; margin: 0; }
.dialogo-pippe-icone { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-suave); color: var(--accent-texto); font-weight: 900; font-size: 20px; }
.dialogo-pippe.perigo .dialogo-pippe-icone { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.dialogo-pippe-titulo { margin: 6px 0 6px; font-size: 17px; font-weight: 700; line-height: 1.35; }
.dialogo-pippe-mensagem { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; white-space: pre-line; }
.dialogo-pippe-acoes { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.dialogo-pippe-acoes button { height: 42px; padding: 0 18px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; }
.dialogo-pippe-cancelar { background: transparent; color: var(--text); border: 1px solid var(--border); }
.dialogo-pippe-cancelar:hover { background: var(--surface-2); }
.dialogo-pippe-confirmar { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.dialogo-pippe-confirmar:hover { background: var(--accent-hover); }
.dialogo-pippe.perigo .dialogo-pippe-confirmar { background: #dc2626; border-color: #dc2626; }
.dialogo-pippe-acoes button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Financeiro › DRE */
.filtros-dre { align-items: flex-end; margin-bottom: 14px; }
.filtros-dre .form-field { max-width: 220px; }
.tabela-dre { font-size: 13.5px; }
.tabela-dre th[scope="row"] { text-align: left; white-space: nowrap; font-weight: 600; min-width: 230px; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.tabela-dre td { white-space: nowrap; }
.tabela-dre .total-dre { background: var(--surface-2); font-weight: 700; }
.tabela-dre .linha-subtotal-dre th, .tabela-dre .linha-subtotal-dre td { font-weight: 700; border-top: 1px solid var(--border); }
.tabela-dre .linha-final-dre th, .tabela-dre .linha-final-dre td { font-weight: 800; font-size: 14.5px; border-top: 2px solid var(--border); background: var(--accent-suave); }
.tabela-dre .detalhe-dre th { font-weight: 400; padding-left: 34px; color: var(--muted); }
.tabela-dre .detalhe-dre td { color: var(--muted); }
.tabela-dre .negativo-dre { color: #f87171; }
:root[data-theme="light"] .tabela-dre .negativo-dre { color: #b91c1c; }
.margem-dre { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.abrir-dre { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; display: inline-flex; gap: 6px; }
.abrir-dre span { color: var(--accent-texto); width: 10px; }

/* Onboarding guiado: Primeiros passos no Início */
.cartao-guia { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px;
    display: flex; flex-direction: column; gap: 16px; margin: 8px 0 24px; }
.faixa-guia { padding: 10px 14px; border-radius: 10px; background: var(--accent-suave); font-size: 14px; }
.faixa-guia a { margin-left: 6px; font-weight: 600; }
.topo-guia { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.topo-guia h2 { margin: 0; font-size: 20px; }
.topo-guia .subtitle { margin: 4px 0 0; }
.progresso-guia { display: flex; align-items: center; gap: 10px; }
.progresso-guia strong { display: block; font-size: 18px; }
.progresso-guia small { color: var(--muted); font-size: 12px; }
.lista-guia { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.passo-guia { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--border); background: var(--surface); }
.passo-guia.atual { border-color: var(--accent); background: var(--surface-2); }
.marca-guia { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--muted); }
.passo-guia.atual .marca-guia { border-color: var(--accent); color: var(--accent-texto); }
.passo-guia.feito .marca-guia { border-color: transparent; background: rgba(16, 185, 129, 0.16); color: #10b981; }
.texto-guia { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.texto-guia strong { font-size: 15px; }
.texto-guia small { font-size: 13px; color: var(--muted); }
.passo-guia.feito .texto-guia strong { color: var(--muted); text-decoration: line-through; }
.barra-guia { height: 6px; border-radius: 6px; background: var(--border); margin-top: 8px; max-width: 420px; }
.barra-guia span { display: block; height: 6px; border-radius: 6px; background: var(--accent); }
.selo-guia { font-size: 12px; padding: 3px 10px; border-radius: 20px; color: var(--muted); white-space: nowrap; }
.selo-guia.importante { background: rgba(245, 158, 11, 0.16); color: #f59e0b; }
:root[data-theme="light"] .selo-guia.importante { color: #b45309; }
.botao-guia { min-height: 40px; padding: 0 18px; border-radius: 10px; background: var(--accent); color: #fff;
    font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.botao-guia:hover { background: var(--accent-hover); color: #fff; }
.link-guia { font-size: 13px; white-space: nowrap; }
.rodape-guia { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.rodape-guia form { margin: 0; }
.link-botao-guia { background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; min-height: 40px; }
.link-botao-guia:hover { color: var(--text); }
@media (max-width: 700px) {
    .passo-guia { flex-wrap: wrap; }
    .passo-guia .botao-guia { width: 100%; justify-content: center; }
}

/* Onboarding: telas vazias que ensinam e criação em lote */
.vazio-ensina { border: 1px dashed var(--border); border-radius: 16px; background: var(--surface); padding: 40px 24px;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin: 12px 0 24px; }
.vazio-ensina > svg { color: var(--accent-texto); }
.vazio-ensina h2 { margin: 0; font-size: 21px; }
.vazio-ensina > p { margin: 0; max-width: 580px; color: var(--muted); line-height: 1.55; }
.vazio-ensina > p strong { color: var(--text); }
.acoes-vazio { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.acoes-vazio .btn-limpar-pedidos { min-height: 40px; display: inline-flex; align-items: center; }
.dicas-vazio { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px; width: 100%; max-width: 860px; text-align: left; }
.dicas-vazio li { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.dicas-vazio span { color: var(--muted); line-height: 1.5; }
@media (max-width: 700px) { .dicas-vazio { grid-template-columns: 1fr; } }
.aviso-lote { padding: 10px 14px; border-radius: 10px; background: var(--accent-suave); font-size: 14px; margin: 8px 0 16px; }
.aviso-lote a { font-weight: 600; margin-left: 4px; }
.resumo-lote { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 16px; }
.resumo-lote div { display: flex; flex-direction: column; gap: 2px; }
.resumo-lote strong { font-size: 24px; }
.resumo-lote span { font-size: 13px; color: var(--muted); }
@media (max-width: 700px) { .resumo-lote { grid-template-columns: 1fr; } }
form[action="/produtos/criar-dos-anuncios"] { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.detalhes-lote { margin-top: 16px; }
.detalhes-lote summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.opcao-emissao-auto { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 14px; line-height: 1.5; }
.opcao-emissao-auto input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }

/* Onboarding: Virada da NF-e */
.lista-virada { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.passo-virada { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; }
.passo-virada.atual { border-color: var(--accent); }
.passo-virada h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 12px; }
.passo-virada.atual .marca-guia { border-color: var(--accent); color: var(--accent-texto); }
.passo-virada.feito .marca-guia { border-color: transparent; background: rgba(16, 185, 129, 0.16); color: #10b981; }
.passo-virada:not(.atual):not(.feito) .corpo-virada { opacity: 0.85; }
.corpo-virada { margin: 10px 0 0 40px; font-size: 14px; line-height: 1.55; }
.corpo-virada p { margin: 6px 0; }
.selo-guia.concluida-virada { background: rgba(16, 185, 129, 0.16); color: #10b981; }
:root[data-theme="light"] .selo-guia.concluida-virada { color: #047857; }
.acoes-virada { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.acoes-virada form { margin: 0; }
.form-virada { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.opcoes-virada { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opcao-virada { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.opcao-virada:has(input:checked) { border-color: var(--accent); background: var(--accent-suave); }
.opcao-virada input { margin-top: 3px; accent-color: var(--accent); }
.opcao-virada span { display: flex; flex-direction: column; gap: 2px; }
.opcao-virada small { color: var(--muted); font-size: 13px; }
.campo-largo-virada { grid-column: span 2; }
.aviso-virada { color: #f59e0b; }
:root[data-theme="light"] .aviso-virada { color: #b45309; }
.aviso-virada-erro { margin: 8px 0 16px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.1); color: #f87171; font-size: 14px; }
:root[data-theme="light"] .aviso-virada-erro { color: #b91c1c; }
.link-voltar-virada { font-size: 13px; }
@media (max-width: 700px) { .opcoes-virada { grid-template-columns: 1fr; } .corpo-virada { margin-left: 0; } .campo-largo-virada { grid-column: auto; } }

/* Onboarding: boas-vindas */
.boas-vindas { max-width: 820px; }
.boas-vindas legend { font-weight: 600; font-size: 15px; margin-bottom: 10px; }
.opcoes-virada.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opcoes-virada.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acoes-bv { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 700px) { .opcoes-virada.quatro, .opcoes-virada.tres { grid-template-columns: 1fr; } }

/* Onboarding: tours das telas */
.tour-fundo { position: fixed; inset: 0; z-index: 9000; }
.tour-destaque { position: fixed; z-index: 9001; border-radius: 12px; pointer-events: none;
    box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.55), 0 0 0 9999px rgba(8, 8, 10, 0.62); transition: all 0.2s ease; }
.tour-caixa { position: fixed; z-index: 9002; width: 360px; max-width: calc(100vw - 24px); background: var(--surface-2);
    color: var(--text); border: 1px solid var(--accent); border-radius: 14px; padding: 18px 20px;
    display: flex; flex-direction: column; gap: 8px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
.tour-contagem { font-size: 12px; font-weight: 600; color: var(--accent-texto); }
.tour-titulo { font-size: 16px; }
.tour-texto { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); }
.tour-acoes { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.tour-navegar { display: flex; gap: 8px; }
.tour-pular { background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer;
    min-height: 40px; padding: 0 4px; }
.tour-pular:hover { color: var(--text); }
.tour-voltar { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border);
    background: transparent; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.tour-proxima { min-height: 40px; padding: 0 16px; border-radius: 10px; border: 0; background: var(--accent);
    color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tour-proxima:hover { background: var(--accent-hover); }
@media (prefers-reduced-motion: reduce) { .tour-destaque { transition: none; } }

/* Aria: suporte no canto da tela */
.aria { position: fixed; right: 20px; bottom: 20px; z-index: 8000; }
.aria-botao { width: 60px; height: 60px; border-radius: 50%; padding: 0; border: 3px solid var(--accent); cursor: pointer;
    overflow: hidden; background: var(--surface); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); transition: transform 0.15s ease; }
.aria-botao:hover, .aria-botao:focus-visible { transform: scale(1.06); }
.aria-botao img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.aria-janela { position: absolute; right: 0; bottom: 74px; width: 340px; max-width: calc(100vw - 32px);
    background: var(--surface); color: var(--text); border: 1px solid var(--accent); border-radius: 16px; overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
.aria-topo { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface-2);
    border-bottom: 1px solid var(--border); }
.aria-topo img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 20%;
    border: 2px solid var(--accent); }
.aria-topo div { flex: 1; display: flex; flex-direction: column; }
.aria-topo small { color: var(--muted); font-size: 12px; }
.aria-fechar { width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--muted);
    font-size: 22px; cursor: pointer; }
.aria-fechar:hover { color: var(--text); }
.aria-corpo { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.aria-balao { margin: 0; padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: var(--surface-2);
    font-size: 14px; line-height: 1.5; }
.aria-corpo textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 90px; padding: 10px 12px;
    border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 14px; }
.aria-enviar { min-height: 44px; border: 0; border-radius: 10px; background: #25603f; color: #fff; font: inherit;
    font-size: 14px; font-weight: 600; cursor: pointer; }
.aria-enviar:hover { background: #1f5236; }
.aria-enviar:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; }
.aria-nota { font-size: 12px; color: var(--muted); line-height: 1.5; }
@media print { .aria { display: none; } }
@media (prefers-reduced-motion: reduce) { .aria-botao { transition: none; } }
.aria-rotulo { font-size: 13px; font-weight: 600; margin-bottom: -4px; }
.aria-corpo select { min-height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg);
    color: var(--text); font: inherit; font-size: 14px; padding: 0 10px; }
.aria-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.aria-chamado { min-height: 44px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font: inherit;
    font-size: 14px; font-weight: 600; cursor: pointer; }
.aria-chamado:hover { background: var(--accent-hover); }
.aria-chamado:disabled { opacity: 0.7; cursor: wait; }
.aria-aviso { padding: 8px 10px; border-radius: 10px; background: rgba(16, 185, 129, 0.14); color: var(--text); font-size: 13px; line-height: 1.5; }
.aria-aviso.erro { background: rgba(239, 68, 68, 0.14); }
.aria-lista { display: flex; flex-direction: column; gap: 6px; font-size: 13px; border-top: 1px solid var(--border); padding-top: 10px; }
.aria-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.aria-selo { font-size: 12px; padding: 2px 8px; border-radius: 20px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.aria-selo.aberto { background: rgba(245, 158, 11, 0.16); color: #f59e0b; }
.aria-selo.respondido { background: var(--accent-suave); color: var(--accent-texto); }
.aria-selo.resolvido { background: rgba(16, 185, 129, 0.16); color: #10b981; }
:root[data-theme="light"] .aria-selo.aberto { color: #b45309; }
:root[data-theme="light"] .aria-selo.resolvido { color: #047857; }
.aria-botao { position: relative; overflow: visible; }
.aria-botao img { border-radius: 50%; }
.aria-contador { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
    border-radius: 11px; background: #dc2626; color: #fff; font-size: 12px; font-weight: 700; line-height: 22px;
    text-align: center; border: 2px solid var(--bg); }
button.aria-item { width: 100%; background: none; border: 0; padding: 6px 4px; border-radius: 8px; color: var(--text);
    font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
button.aria-item:hover { background: var(--surface-2); }
.aria-selo.nova { background: #dc2626; color: #fff; }
.aria-conversa { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.aria-conversa-topo { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.aria-voltar { background: none; border: 0; color: var(--accent-texto); font: inherit; font-size: 13px; cursor: pointer;
    min-height: 36px; padding: 0 4px; }
.aria-mensagens { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.aria-msg { max-width: 88%; padding: 8px 10px; border-radius: 12px; font-size: 13px; }
.aria-msg p { margin: 2px 0 0; white-space: pre-wrap; line-height: 1.5; }
.aria-msg small { color: var(--muted); font-size: 11px; }
.aria-msg.cliente { align-self: flex-end; background: var(--accent-suave); border-radius: 12px 12px 4px 12px; }
.aria-msg.suporte { align-self: flex-start; background: var(--surface-2); border-radius: 12px 12px 12px 4px; }
.aria-conversa textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 70px; padding: 10px 12px;
    border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 14px; }

/* Marketplaces › Custo do marketplace */
.grade-lucro { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.cartao-lucro { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 2px; }
.cartao-lucro span { font-size: 12px; color: var(--muted); }
.cartao-lucro strong { font-size: 18px; }
.cartao-lucro small { font-size: 12px; color: var(--muted); }
.cartao-lucro.positivo { border-color: rgba(16, 185, 129, 0.5); }
.cartao-lucro.positivo strong { color: #10b981; }
.cartao-lucro.negativo { border-color: rgba(239, 68, 68, 0.5); }
.cartao-lucro.negativo strong { color: #f87171; }
:root[data-theme="light"] .cartao-lucro.positivo strong { color: #047857; }
:root[data-theme="light"] .cartao-lucro.negativo strong { color: #b91c1c; }
@media (max-width: 1200px) { .grade-lucro { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grade-lucro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.avisos-lucro { margin: 0 0 14px; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.avisos-lucro strong { color: var(--text); }
.abas-lucro { display: flex; gap: 6px; margin-bottom: 10px; }
.abas-lucro a { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border); text-decoration: none; color: var(--text); font-size: 14px; }
.abas-lucro a.ativa { background: var(--accent-suave); border-color: var(--accent); }
.tabela-lucro td, .tabela-lucro th { white-space: nowrap; }
.linha-prejuizo td { background: rgba(239, 68, 68, 0.07); }
.linha-prejuizo td strong { color: #f87171; }
:root[data-theme="light"] .linha-prejuizo td strong { color: #b91c1c; }
.selo-lucro { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 20px; margin: 1px 2px;
    background: var(--surface-2); color: var(--muted); }
.selo-lucro.est { background: rgba(245, 158, 11, 0.16); color: #f59e0b; }
.selo-lucro.sem { background: rgba(239, 68, 68, 0.14); color: #f87171; }
:root[data-theme="light"] .selo-lucro.est { color: #b45309; }
:root[data-theme="light"] .selo-lucro.sem { color: #b91c1c; }
.detalhes-estimativa summary { cursor: pointer; font-weight: 600; }
.tabela-estimativa input, .campo-adicional { width: 110px; text-align: right; }
.aplicar-adicional { margin-bottom: 10px; }
.tabela-skus th.centro, .tabela-skus td.centro { text-align: center; }
.tabela-skus th small { display: block; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
.tabela-skus input[type="checkbox"], .marcar-coluna input { width: 18px; height: 18px; accent-color: var(--accent); }
.marcar-coluna { display: flex; gap: 4px; align-items: center; justify-content: center; font-size: 11px; font-weight: 400;
    text-transform: none; letter-spacing: 0; margin-top: 4px; }
.tabela-custos input { min-height: 38px; }
.tabela-custos select { min-height: 38px; }
.acoes-custo { display: flex; gap: 6px; margin: 0; }
.linha-inativa td { opacity: 0.55; }
.tabela-custos input:not([type="checkbox"]), .tabela-custos select, .tabela-estimativa input {
    background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
    padding: 0 10px; font: inherit; font-size: 14px; min-height: 38px; box-sizing: border-box; }
.tabela-custos input[name="nome"] { width: 100%; min-width: 180px; }

/* Utilitários › Verificação de etiqueta */
.bipe-verificacao { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.bipe-verificacao .form-field { flex: 1; min-width: 280px; }
.bipe-verificacao input#codigo-verificacao { height: 52px; font-size: 18px; border: 2px solid var(--accent); }
.som-verificacao { display: flex; gap: 8px; align-items: center; min-height: 52px; font-size: 14px; color: var(--muted); }
.som-verificacao input { width: 18px; height: 18px; accent-color: var(--accent); }
.grade-verificacao { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
@media (max-width: 900px) { .grade-verificacao { grid-template-columns: 1fr; } }
.resultado-verificacao { display: flex; flex-direction: column; gap: 12px; border: 2px solid var(--border); }
.resultado-verificacao.ok-verde { border-color: rgba(16, 185, 129, 0.6); }
.resultado-verificacao.alerta-vermelho { border-color: #b91c1c; background: rgba(239, 68, 68, 0.08); }
.resultado-verificacao.alerta-laranja { border-color: #c2410c; background: rgba(249, 115, 22, 0.08); }
.resultado-verificacao.alerta-amarelo { border-color: #b45309; background: rgba(245, 158, 11, 0.07); }
.titulo-alerta { margin: 0; font-size: 22px; }
.alerta-vermelho .titulo-alerta { color: #fca5a5; }
.alerta-laranja .titulo-alerta { color: #fdba74; }
.alerta-amarelo .titulo-alerta { color: #fcd34d; }
:root[data-theme="light"] .alerta-vermelho .titulo-alerta { color: #b91c1c; }
:root[data-theme="light"] .alerta-laranja .titulo-alerta { color: #c2410c; }
:root[data-theme="light"] .alerta-amarelo .titulo-alerta { color: #b45309; }
.resultado-verificacao p { margin: 0; }
.linha-codigo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.linha-codigo strong { font-size: 20px; }
.selo-situacao-verificacao { font-size: 12px; padding: 3px 10px; border-radius: 20px; background: var(--surface-2); color: var(--muted); }
.selo-situacao-verificacao.cancelado { background: rgba(239, 68, 68, 0.16); color: #f87171; }
.selo-situacao-verificacao.enviado { background: rgba(249, 115, 22, 0.16); color: #fb923c; }
.itens-verificacao { display: flex; flex-direction: column; gap: 10px; }
.item-verificacao { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 16px; align-items: center;
    padding: 12px; border-radius: 12px; background: var(--surface-2); }
.foto-verificacao { width: 120px; height: 120px; border-radius: 10px; background: var(--border); overflow: hidden;
    display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); }
.foto-verificacao img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.info-verificacao { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nome-verificacao { font-size: 20px; line-height: 1.3; }
.marcador-verificacao { align-self: flex-start; font-size: 14px; font-weight: 600; padding: 4px 12px; border-radius: 20px;
    background: var(--accent-suave); color: var(--accent-texto); }
.aviso-verificacao { font-size: 13px; color: #f59e0b; }
:root[data-theme="light"] .aviso-verificacao { color: #b45309; }
.qtd-verificacao { text-align: center; min-width: 90px; }
.qtd-verificacao small { display: block; font-size: 12px; color: var(--muted); }
.qtd-verificacao strong { font-size: 42px; line-height: 1; }
.historico-verificacao { display: flex; flex-direction: column; gap: 10px; }
.historico-verificacao ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.historico-verificacao li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.historico-verificacao li.leitura-ok span:last-child { color: #10b981; }
.historico-verificacao li.leitura-erro span:last-child { color: #f87171; }
@media (max-width: 600px) { .item-verificacao { grid-template-columns: 80px minmax(0, 1fr); } .foto-verificacao { width: 80px; height: 80px; }
    .qtd-verificacao { grid-column: span 2; text-align: left; } }

/* Sininho de notificações (topo do conteúdo) */
.barra-topo { display: flex; justify-content: flex-end; margin: -20px 0 6px; min-height: 40px; }
.sino { position: relative; }
.sino-botao { position: relative; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sino-botao:hover, .sino-botao[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-texto); }
.sino-contador { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
    border-radius: 10px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
    border: 2px solid var(--bg); }
.sino-painel { position: absolute; right: 0; top: 48px; z-index: 7000; width: 380px; max-width: calc(100vw - 32px);
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    overflow: hidden; }
.sino-painel header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px;
    border-bottom: 1px solid var(--border); }
.sino-todas { background: none; border: 0; color: var(--accent-texto); font: inherit; font-size: 13px; cursor: pointer; min-height: 32px; }
.sino-lista { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; }
.sino-vazio { padding: 18px 14px; margin: 0; }
.sino-item { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--border);
    text-decoration: none; color: var(--text); position: relative; }
.sino-item:hover { background: var(--surface-2); color: var(--text); }
.sino-item::before { content: ""; position: absolute; left: 7px; top: 17px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); }
.sino-item.nivel-alerta::before { background: #f59e0b; }
.sino-item.nivel-erro::before { background: #ef4444; }
.sino-item.lida::before { background: transparent; border: 1px solid var(--border); }
.sino-item.lida strong { font-weight: 500; color: var(--muted); }
.sino-item strong { font-size: 14px; }
.sino-item span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.sino-item small { font-size: 11px; color: var(--muted); }
@media print { .barra-topo { display: none; } }

/* Dashboard › Produção e expedição */
.abas-painel { margin-top: 4px; }
.painel-duas-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
@media (max-width: 1000px) { .painel-duas-colunas { grid-template-columns: 1fr; } }
.painel-duas-colunas .card { margin: 0; min-width: 0; }
.painel-duas-colunas h3 { margin: 0 0 10px; font-size: 15px; }
.painel-mais { margin: 10px 0 0; font-size: 13px; }
.texto-perigo { color: #f87171; }
:root[data-theme="light"] .texto-perigo { color: #b91c1c; }
.barras-dias { display: flex; align-items: flex-end; gap: 10px; height: 170px; margin: 0; padding: 0; list-style: none; }
.barras-dias li { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
.barra-dia { width: 100%; max-width: 44px; border-radius: 6px 6px 2px 2px; background: var(--accent); }
.barra-dia-valor { font-size: 13px; font-weight: 600; }
.barra-dia-rotulo { font-size: 11px; color: var(--muted); white-space: nowrap; }
.lista-pessoas-painel { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.lista-pessoas-painel li { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); font-size: 14px; }
.lista-pessoas-painel li:last-child { border-bottom: 0; }

/* Checkout Express: chave Agrupar itens iguais */
.barra-express form { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.chave-agrupar-express { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: 14px; font-weight: 500; min-height: 44px; }
.chave-agrupar-express input { position: absolute; opacity: 0; pointer-events: none; }
.chave-agrupar-express .chave-trilho { flex: 0 0 40px; }
.chave-agrupar-express input:checked + .chave-trilho { background: var(--accent); }
.chave-agrupar-express input:checked + .chave-trilho::after { transform: translateX(18px); }
.chave-agrupar-express input:focus-visible + .chave-trilho { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Utilitários › Preço de venda */
.calculo-pv { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.calculo-pv .form-field { margin: 0; min-width: 150px; flex: 1 1 160px; }
.operador-pv { font-size: 22px; font-weight: 700; color: var(--muted); padding-bottom: 10px; }
.resultado-pv { display: flex; flex-direction: column; gap: 4px; min-width: 140px; padding-bottom: 6px; }
.resultado-pv strong { font-size: 24px; }
.calculo-pv button { min-height: 44px; }
.filtros-pv { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.filtros-pv .form-field { margin: 0; min-width: 180px; }
.btn-link { background: none; border: 0; padding: 0 0 0 6px; color: var(--accent); cursor: pointer; font-size: 12px; text-decoration: underline; }
.tela-preco-venda .sku-pv { font-weight: 600; font-size: 14px; white-space: nowrap; }

/* Equipe › Ponto ao vivo e Tablets do ponto */
.topo-ao-vivo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.selo-ao-vivo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #34d399; background: rgba(52,211,153,0.12); padding: 6px 12px; border-radius: 999px; }
.ponto-verde { width: 8px; height: 8px; border-radius: 50%; background: #34d399; }
.feed-ponto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.feed-ponto li { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; background: var(--surface-2, rgba(127,127,127,0.08)); }
.feed-ponto img, .feed-ponto .sem-foto { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; }
.feed-ponto .sem-foto { display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--muted); background: rgba(127,127,127,0.15); }
.feed-ponto div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.numero-tabular { font-variant-numeric: tabular-nums; }
.codigo-pareamento { font-size: 20px; letter-spacing: 1px; }
.acoes-tablet { display: flex; gap: 8px; flex-wrap: wrap; }
.acoes-tablet form { margin: 0; }
.form-pin { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.form-pin input { width: 110px; }
.pin-ok { color: #34d399; font-size: 13px; }

/* Aplicativos (loja) */
.grade-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.cartao-app { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--border); border-radius: var(--raio); background: var(--surface); }
.cartao-app.instalado { border-color: rgba(124, 92, 255, 0.45); }
.cartao-app-topo { display: flex; align-items: center; gap: 12px; }
.icone-app { width: 52px; height: 52px; border-radius: 14px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.cartao-app-titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cartao-app-titulo h2 { margin: 0; font-size: 18px; }
.cartao-app-titulo span { font-size: 13px; }
.selo-instalado, .selo-gratis { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.selo-instalado { color: #34d399; background: rgba(52, 211, 153, 0.15); }
.selo-gratis { color: var(--muted); background: rgba(127, 127, 127, 0.15); }
.cartao-app-resumo { margin: 0; font-weight: 600; }
.cartao-app-detalhes { margin: 0; font-size: 13px; line-height: 1.5; flex: 1; }
.cartao-app-acoes { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cartao-app-acoes form { margin: 0; }
.botao-app { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 20px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; font-size: 14px; }
.btn-link-app { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 13px; padding: 6px; }

/* Anúncios: filtros, tela de edição e Publicar */
.filtros-anuncios { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; align-items: end; margin: 8px 0 16px; }
.filtros-anuncios .form-field { margin: 0; }
.filtro-busca-anuncio { grid-column: span 2; }
@media (max-width: 560px) { .filtro-busca-anuncio { grid-column: auto; } }
.acoes-filtros-anuncios { display: flex; gap: 8px; justify-content: flex-end; grid-column: -2 / -1; }
.contagem-anuncios { font-size: 14px; font-weight: 400; margin-left: 8px; }
.acoes-cabecalho-anuncio { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.publicar-anuncio { position: relative; }
.publicar-anuncio > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.publicar-anuncio > summary::-webkit-details-marker { display: none; }
.painel-publicar { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(340px, 90vw); padding: 12px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: var(--raio); background: var(--surface); box-shadow: 0 12px 32px rgba(0,0,0,0.35); }
.painel-publicar p { margin: 0 0 4px; font-size: 13px; }
.opcao-publicar { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; border: 1px solid var(--border); color: var(--text); text-decoration: none; }
a.opcao-publicar:hover { border-color: var(--accent); }
.opcao-publicar div { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.opcao-publicar div span { font-size: 12px; }
.opcao-publicar.indisponivel { opacity: 0.6; }
.selo-breve { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(127,127,127,0.18); color: var(--muted); white-space: nowrap; }
.grade-editar-anuncio { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.resumo-anuncio-pagina { display: flex; gap: 16px; align-items: flex-start; }
.foto-anuncio-pagina { width: 120px; height: 120px; border-radius: 12px; object-fit: cover; flex: none; background: rgba(127,127,127,0.12); }
.foto-anuncio-pagina.vazia { display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); }
.dados-anuncio-pagina { display: flex; flex-direction: column; gap: 6px; font-size: 14px; min-width: 0; }
.lista-vinculo-pagina { margin: 0 0 12px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

/* Tela única de anúncio: abas por marketplace, aba do canal e coluna No PippeHub */
.titulo-anuncio-pagina { display: flex; gap: 16px; align-items: center; min-width: 0; }
.titulo-anuncio-pagina .foto-anuncio-pagina { width: 72px; height: 72px; }
.titulo-anuncio-pagina h1 { margin: 4px 0; font-size: 24px; }
.abas-canais { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: 8px 0 16px; }
.aba-canal { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border-bottom: 3px solid transparent; color: var(--muted); text-decoration: none; font-size: 15px; }
.aba-canal:hover { color: var(--text); }
.aba-canal.ativa { color: var(--text); font-weight: 700; border-bottom-color: var(--accent); }
.aba-canal.desligada { opacity: 0.6; cursor: default; }
.ponto-publicado { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.aba-publicar { font-size: 12px; color: var(--accent); font-weight: 600; }
.aba-breve { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(127,127,127,0.18); }
.corpo-anuncio-pagina { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.coluna-canal { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.coluna-pippehub { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.coluna-canal .card, .coluna-pippehub .card { margin: 0; }
.coluna-pippehub form { display: flex; flex-direction: column; gap: 10px; }
.faixa-canal { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 12px; background: rgba(45,212,191,0.08); border: 1px solid rgba(45,212,191,0.35); font-size: 14px; }
.faixa-canal strong { color: #2dd4bf; }
:root[data-theme="light"] .faixa-canal strong { color: #0f766e; }
.secao-canal h2 { margin: 0 0 12px; font-size: 17px; }
.rotulo-leitura { font-size: 13px; color: var(--muted); }
.valor-leitura { min-height: 40px; display: flex; align-items: center; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: rgba(127,127,127,0.06); font-size: 14px; }
.fotos-canal { display: flex; gap: 10px; flex-wrap: wrap; }
.foto-canal { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; background: #fff; }
.descricao-canal { white-space: pre-line; font-size: 14px; line-height: 1.6; max-height: 360px; overflow: auto; }
.variacoes-canal { margin-top: 12px; }
.variacoes-canal summary { cursor: pointer; font-size: 14px; color: var(--accent); }
.sem-vinculo-pagina { border-color: rgba(251,191,36,0.5); background: rgba(251,191,36,0.06); }
.aviso-sem-vinculo { margin: 0 0 8px; color: #fbbf24; font-size: 14px; }
:root[data-theme="light"] .aviso-sem-vinculo { color: #b45309; }
.form-vinculo-pagina { display: flex; flex-direction: column; gap: 10px; }
.form-vinculo-pagina a { font-size: 13px; }
.form-canal { margin-top: 12px; align-items: end; }
.acoes-canal { display: flex; align-items: flex-end; }
.importar-canal { margin: 0; }
/* Publicar na Shopee */
.fotos-escolha { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.foto-escolha { position: relative; cursor: pointer; }
.foto-escolha img { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; background: #fff; border: 2px solid transparent; opacity: 0.45; }
.foto-escolha input { position: absolute; top: 6px; left: 6px; }
.foto-escolha input:checked + img { border-color: var(--accent); opacity: 1; }
.btn-subir-fotos { display: inline-flex; align-items: center; cursor: pointer; }
.canais-envio { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-top: 14px; }
.canais-envio legend { font-size: 13px; color: var(--muted); padding: 0 6px; }
.canais-envio label { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; }
.tela-publicar-shopee textarea { width: 100%; box-sizing: border-box; }
.acoes-publicar { display: flex; justify-content: flex-end; }
.acoes-publicar button { min-height: 46px; padding: 0 24px; }
.lista-checagem { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.lista-checagem li::before { content: "○ "; color: var(--muted); }
.lista-checagem li.ok::before { content: "✓ "; color: #22c55e; }
.lista-checagem li.ok { color: var(--muted); }
.campo-tabela { width: 110px; min-height: 38px; text-align: right; }
.linha-atual td { font-weight: 600; }
.linha-mudada td { background: rgba(124,92,255,0.08); }
.acoes-variacoes { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 12px; }
/* Gaveta Fiscal */
.chave-nc { font-family: ui-monospace, monospace; font-size: 11px; word-break: break-all; }
.tela-notacofre .card { margin-bottom: 16px; }
.cartao-app-preco { font-size: 13px; margin: 0; color: var(--muted); }
.cartao-app-preco strong { color: var(--text); }
/* Pulso Fiscal: estado ainda consultando */
.cartao-sefaz.sefaz-consultando { border-left-color: var(--border); opacity: 0.75; }
.sefaz-consultando .selo-sefaz { background: rgba(127, 127, 127, 0.16); color: var(--muted); animation: pulso-sefaz 1.2s ease-in-out infinite; }
@keyframes pulso-sefaz { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .sefaz-consultando .selo-sefaz { animation: none; } }
/* Gaveta Fiscal › Visualizar NF-e */
.folha-nc { display: flex; flex-direction: column; gap: 18px; }
.cabeca-nc { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.cabeca-nc h2 { margin: 4px 0; font-size: 22px; }
.cabeca-nc .chave-nc { font-size: 13px; letter-spacing: 0.02em; }
.total-nc { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.total-nc span { font-size: 13px; color: var(--muted); }
.total-nc strong { font-size: 26px; }
.grade-nc { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.bloco-nc h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.bloco-nc { display: flex; flex-direction: column; }
.bloco-nc > .campo-nc + .campo-nc { margin-top: 8px; }
.linha-nc { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.campo-nc { display: flex; flex-direction: column; gap: 2px; min-width: 140px; }
.campo-nc.largo { flex-basis: 100%; }
.campo-nc span { font-size: 12px; color: var(--muted); }
.campo-nc strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.texto-nc { white-space: pre-line; font-size: 14px; line-height: 1.5; margin: 0; }
.tabela-itens-nc td small { display: block; margin-top: 2px; }
.acoes-ver-nc { align-items: center; }
@media print {
  .sidebar, .barra-lateral, .menu-lateral, header, .acoes-ver-nc, .cabecalho-historico a { display: none !important; }
  .folha-nc { border: 0; box-shadow: none; }
}
/* Gaveta Fiscal › Enviar para a contabilidade */
.painel-contabilidade-nc { margin-bottom: 16px; }
.painel-contabilidade-nc > summary { cursor: pointer; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: 16px; }
.painel-contabilidade-nc form { margin-top: 14px; }
.opcao-check-nc { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; }
.titulo-envios-nc { margin: 18px 0 8px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
/* Compras › NF-e Entrada */
.tela-compras .card { margin-bottom: 16px; }
.quadro-lancar-cp form { display: flex; flex-direction: column; gap: 10px; }
.parcela-cp { display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; align-items: end; }
.numero-parcela-cp { font-weight: 700; padding-bottom: 12px; color: var(--muted); }
.form-ignorar-cp { margin-top: 10px; }
.lista-parcelas-cp { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
/* Compras › Entrada no estoque */
.quadro-estoque-cp { margin-bottom: 16px; }
.item-estoque-cp { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.item-estoque-cp.item-ignorado-cp { opacity: 0.55; }
.item-estoque-cp.item-ignorado-cp .campos-item-cp .form-field { pointer-events: none; }
.cabeca-item-cp { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-size: 14px; }
.ignorar-item-cp { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; }
.campos-item-cp { display: grid; grid-template-columns: minmax(240px, 2fr) minmax(240px, 1fr); gap: 10px 16px; align-items: end; }
.linha-conversao-cp { display: flex; align-items: center; gap: 8px; }
.linha-conversao-cp input { width: 110px; text-align: right; }
.resultado-item-cp { grid-column: 1 / -1; font-size: 14px; }
@media (max-width: 720px) { .campos-item-cp { grid-template-columns: 1fr; } .ignorar-item-cp { margin-left: 0; } }
/* Compras › Pedidos de compra */
.linha-item-pc { display: grid; grid-template-columns: minmax(220px, 3fr) repeat(4, minmax(110px, 1fr)) auto; gap: 8px 12px; align-items: end; padding: 10px 0; border-bottom: 1px solid var(--border); }
.linha-item-pc .total-item-pc { grid-column: 1 / -2; font-size: 13px; }
.linha-item-pc .remover-item-pc { align-self: center; }
#mais-item-pc { margin: 10px 0 14px; }
.acoes-pedido-pc { margin: 0 0 14px; gap: 8px; flex-wrap: wrap; }
.cancelar-pc > summary { list-style: none; cursor: pointer; }
.cancelar-pc[open] form { margin-top: 10px; }
.quadro-pedido-cp { margin-bottom: 16px; }
.linha-pedido-cp { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-bottom: 10px; }
.linha-alerta-cp td { background: rgba(251, 191, 36, 0.08); }
@media (max-width: 900px) { .linha-item-pc { grid-template-columns: 1fr 1fr; } .linha-item-pc .campo-produto-pc { grid-column: 1 / -1; } }
/* Compras › botão Fator de conversão */
.fator-cp { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.botao-fator-cp { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px dashed var(--border); background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; }
.botao-fator-cp.fator-ativo-cp { border-style: solid; border-color: var(--accent); color: var(--text); font-weight: 600; }
.painel-fator-cp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; }
.painel-fator-cp[hidden] { display: none; }
.painel-fator-cp input[data-fator-x], .painel-fator-cp input[data-fator-y] { width: 100px; text-align: right; }
.painel-fator-cp .unidade-fator-cp { width: 80px; text-transform: uppercase; }
.linha-item-pc { grid-template-columns: minmax(220px, 3fr) minmax(100px, 1fr) minmax(200px, 1.6fr) minmax(110px, 1fr) auto; }
/* Compras › Sugestão de compra */
.tabela-sugestao-cp td { vertical-align: top; }
.tabela-sugestao-cp .fator-cp { margin-top: 6px; }
.tabela-sugestao-cp .busca-select, .tabela-sugestao-cp select { min-width: 200px; }
.linha-desmarcada-cp { opacity: 0.55; }
.gerar-sugestao-cp { margin-top: 14px; align-items: end; }
/* Gaveta Fiscal › cartão do Google Drive */
.topo-drive-nc { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.topo-drive-nc h2 { margin: 0; }
.selo-drive-nc { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.selo-drive-nc.ok { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.selo-drive-nc.enviando { background: rgba(124, 92, 255, 0.15); color: var(--accent); }
:root[data-theme="light"] .selo-drive-nc.ok { color: #15803d; }
.dados-drive-nc { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 24px; margin-bottom: 14px; }
.dados-drive-nc div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dados-drive-nc span { font-size: 12px; color: var(--muted); }
.dados-drive-nc strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.rodape-drive-nc { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
/* Gaveta Fiscal › Empresas (selos e menu) */
.tabela-empresas-nc td { vertical-align: middle; }
.selo-nc { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; cursor: default; }
.selo-nc.ok { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.selo-nc.lendo { background: rgba(124, 92, 255, 0.15); color: var(--accent); }
.selo-nc.pausa { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.selo-nc.erro { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.selo-nc.espera, .selo-nc.desligado { background: rgba(127, 127, 127, 0.15); color: var(--muted); }
:root[data-theme="light"] .selo-nc.ok { color: #15803d; }
:root[data-theme="light"] .selo-nc.pausa { color: #b45309; }
:root[data-theme="light"] .selo-nc.erro { color: #b91c1c; }
.acoes-nc { justify-content: flex-end; flex-wrap: nowrap; }
.menu-nc { position: relative; }
.menu-nc > summary { list-style: none; cursor: pointer; min-width: 40px; text-align: center; }
.menu-nc > summary::-webkit-details-marker { display: none; }
.menu-nc-itens { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 260px; display: flex; flex-direction: column;
  padding: 6px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.menu-nc-itens form { margin: 0; }
.item-menu-nc { width: 100%; text-align: left; min-height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; font-size: 14px; }
.item-menu-nc:hover { background: rgba(127, 127, 127, 0.12); }
.item-menu-nc.perigo { color: #f87171; }
.empresa-desligada-nc td { opacity: 0.75; }
/* Aplicativos › assistente de instalação da Gaveta Fiscal */
.assistente-nc .passo-nc { margin-bottom: 16px; }
.assistente-nc h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.numero-passo-nc { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 14px; }
.lista-cnpj-nc { display: flex; flex-direction: column; gap: 8px; }
.item-cnpj-nc { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.item-cnpj-nc input { margin-top: 3px; width: 18px; height: 18px; }
.item-cnpj-nc span { display: flex; flex-direction: column; gap: 2px; }
.item-cnpj-nc:has(input:checked) { border-color: var(--accent); background: var(--accent-suave); }
.item-cnpj-nc.desabilitado { opacity: 0.6; cursor: not-allowed; }
.aviso-cnpj-nc { color: #fbbf24; font-size: 13px; }
:root[data-theme="light"] .aviso-cnpj-nc { color: #b45309; }
.termo-nc { max-height: 360px; overflow: auto; padding: 4px 14px; border: 1px solid var(--border); border-radius: 12px; font-size: 14px; line-height: 1.55; }
.termo-nc h3 { font-size: 14px; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.termo-nc ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.resumo-valor-nc { margin: 14px 0 8px; font-size: 15px; }
.aceite-nc { font-weight: 600; }
.cartao-app-topo .selo-preco-app { color: #fbbf24; background: rgba(251, 191, 36, 0.14); }
/* Loja › Módulos */
.titulo-secao-loja { margin: 26px 0 4px; font-size: 20px; }
.cartao-modulo .cartao-app-preco strong { color: var(--text); }
.destaque-modulo { box-shadow: 0 0 0 2px var(--accent); }
/* Assinatura › módulos na escolha do plano */
.ass-modulos { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ass-modulos > strong { font-size: 17px; }
.ass-modulos > strong small { font-weight: 400; color: var(--muted); font-size: 13px; }
.ass-modulo { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; border: 1px solid var(--border); border-radius: 14px; cursor: pointer; }
.ass-modulo input { width: 18px; height: 18px; }
.ass-modulo div { display: flex; flex-direction: column; gap: 2px; }
.ass-modulo small { color: var(--muted); font-size: 13px; }
.ass-modulo:has(input:checked) { border-color: var(--accent); background: var(--accent-suave); }
.ass-completo { border-style: dashed; }
.ass-total { border-top: 1px solid var(--border); padding-top: 8px; font-size: 16px; }
.ass-aceite { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.ass-aceite[hidden] { display: none; }


/* Dashboard: botão do Painel ao vivo */
.topo-dashboard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.botao-ao-vivo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 8px 18px;
    border-radius: var(--raio);
    background: var(--accent);
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(124, 92, 255, 0.35);
    transition: transform 0.15s ease, background 0.15s ease;
}

.botao-ao-vivo:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.botao-ao-vivo strong {
    display: block;
    font-size: 15px;
}

.botao-ao-vivo small {
    display: block;
    font-size: 12px;
    opacity: 0.85;
}

.pulso-ao-vivo {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4ade80;
    flex: none;
}

.pulso-ao-vivo::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #4ade80;
    animation: pulso-ao-vivo 1.6s ease-out infinite;
}

@keyframes pulso-ao-vivo {
    from { transform: scale(0.6); opacity: 1; }
    to { transform: scale(1.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pulso-ao-vivo::after { animation: none; }
}

@media (max-width: 560px) {
    .botao-ao-vivo { width: 100%; justify-content: center; }
}

/* ==========================================
   EMI B.I — controle de lucratividade
========================================== */
.emi { display: flex; flex-direction: column; gap: 18px; }
.emi-topo { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.emi-marca { display: flex; align-items: center; gap: 14px; }
.emi-marca h1 { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.emi-marca h1 small { font-size: 15px; font-weight: 500; color: var(--muted); padding-left: 10px; border-left: 1px solid var(--border); }
.emi-marca .subtitle { margin: 2px 0 0; }
.emi-logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 20px;
    color: #fff; background: linear-gradient(135deg, var(--accent), #c084fc); box-shadow: 0 6px 18px rgba(124, 92, 255, .35); flex: none; }
.emi-abas { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); flex-wrap: wrap; }
.emi-abas a { padding: 8px 14px; border-radius: 9px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.emi-abas a:hover { color: var(--text); }
.emi-abas a[aria-current="page"] { background: var(--accent-suave); color: var(--accent-texto); font-weight: 600; }
.emi-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.emi-filtros label { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; border: 1px solid var(--border);
    border-radius: 10px; background: var(--surface); }
.emi-filtros label[hidden], .emi-filtros button[hidden] { display: none; }
.emi-filtros label span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.emi-filtros select, .emi-filtros input { border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 600; min-height: 30px; padding: 0; }
.emi-filtros select:focus, .emi-filtros input:focus { outline: none; }
.emi-qualidade { border: 1px solid rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .08); border-radius: var(--raio); padding: 10px 14px; font-size: 14px; }
.emi-qualidade summary { cursor: pointer; font-weight: 600; color: #fbbf24; }
:root[data-theme="light"] .emi-qualidade summary { color: #b45309; }
.emi-qualidade ul { margin: 8px 0 2px; padding-left: 20px; display: grid; gap: 4px; }
.emi-modo { display: inline-flex; align-self: flex-end; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin-top: -6px; }
.emi-modo a { padding: 7px 12px; border-radius: 9px; text-decoration: none; color: var(--muted); font-size: 13px; font-weight: 600; }
.emi-modo a[aria-current="page"] { background: var(--surface-2); color: var(--text); }
.emi-secao { margin: 4px 0 -6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.emi-cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.emi-cartao { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px;
    display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.emi-cartao::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--emi-cor); }
.emi-cartao::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 100% 0%, var(--emi-brilho), transparent 60%); }
.emi-cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; color: var(--muted); }
.emi-icone { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #fff; background: var(--emi-cor); flex: none; }
.emi-cartao strong { font-size: 28px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; position: relative; }
.emi-cartao-rodape { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; }
.emi-cartao-rodape small { color: var(--muted); font-size: 12px; }
.emi-violeta { --emi-cor: #7c5cff; --emi-brilho: rgba(124, 92, 255, .12); }
.emi-rosa { --emi-cor: #ec4899; --emi-brilho: rgba(236, 72, 153, .10); }
.emi-ambar { --emi-cor: #f59e0b; --emi-brilho: rgba(245, 158, 11, .10); }
.emi-ciano { --emi-cor: #06b6d4; --emi-brilho: rgba(6, 182, 212, .10); }
.emi-verde { --emi-cor: #10b981; --emi-brilho: rgba(16, 185, 129, .10); }
.emi-var { display: inline-flex; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.emi-var.sobe { background: rgba(74, 222, 128, .14); color: #4ade80; }
.emi-var.desce { background: rgba(248, 113, 113, .14); color: #f87171; }
.emi-var.neutro { background: var(--surface-2); color: var(--muted); }
:root[data-theme="light"] .emi-var.sobe { color: #047857; }
:root[data-theme="light"] .emi-var.desce { color: #b91c1c; }
.emi-painel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; min-width: 0; }
.emi-painel h2 { margin: 0; font-size: 20px; }
.emi-painel-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.emi-painel-topo p { margin: 4px 0 0; }
.emi-legenda { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.emi-legenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.emi-legenda i.ant { background: var(--muted); opacity: .6; }
.emi-legenda i.at { background: var(--accent); }
.emi-legenda i.mc { background: #fbbf24; height: 3px; vertical-align: 3px; }
.emi-chaves { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.emi-chaves button { border: 0; border-radius: 0; background: transparent; color: var(--muted); min-height: 32px; padding: 0 12px; font-size: 13px; cursor: pointer; }
.emi-chaves button[aria-pressed="true"] { background: var(--accent-suave); color: var(--accent-texto); font-weight: 600; }
.emi-grafico svg { display: block; width: 100%; height: auto; }
.emi-vazio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 60px 16px; color: var(--muted); text-align: center; }
.emi-vazio strong { color: var(--text); }
.emi-faixas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.emi-faixa { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); cursor: pointer; position: relative; overflow: hidden; font: inherit; }
.emi-faixa::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--emi-cor); }
.emi-faixa[aria-pressed="true"] { border-color: var(--emi-cor); box-shadow: 0 0 0 1px var(--emi-cor) inset; }
.emi-faixa-excelente { --emi-cor: #10b981; }
.emi-faixa-saudavel { --emi-cor: #f59e0b; }
.emi-faixa-critica { --emi-cor: #ef4444; }
.emi-faixa-nome { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.emi-faixa-nome small { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 6px; }
.emi-faixa-num { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.emi-faixa-num strong { font-size: 26px; }
.emi-faixa-num small { font-size: 12px; color: var(--muted); }
.emi-faixa-num small:first-of-type::first-letter { color: var(--accent-texto); }
.emi-faixa-num small:nth-of-type(2)::first-letter { color: #fbbf24; }
.emi-faixa-num em { font-style: normal; font-weight: 800; color: var(--emi-cor); }
.emi-tabela-topo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.emi-tabela-topo input[type="search"] { flex: 1 1 260px; max-width: 380px; }
.emi-tabela-topo > a, .emi-tabela-topo > button { margin-left: auto; }
.emi-tabela-topo > button + a { margin-left: 0; }
.emi-tabela { font-size: 13px; }
.emi-tabela th { white-space: nowrap; }
.emi-tabela th button { border: 0; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; padding: 0; text-transform: inherit; letter-spacing: inherit; }
.emi-tabela th button::after { content: attr(data-seta); margin-left: 4px; color: var(--accent-texto); }
.emi-tabela td.numero { white-space: nowrap; font-variant-numeric: tabular-nums; }
.emi-tabela td.forte { font-weight: 700; }
.emi-sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); white-space: nowrap; }
.emi-produto { display: flex; align-items: center; gap: 10px; min-width: 240px; font-weight: 600; }
.emi-produto img, .emi-sem-foto { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; background: #fff; flex: none; border: 1px solid var(--border); }
.emi-sem-foto { display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.emi-aviso { display: inline-block; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 600; background: rgba(251, 191, 36, .14); color: #fbbf24; vertical-align: 1px; }
:root[data-theme="light"] .emi-aviso { color: #b45309; }
.emi-mc { display: inline-block; padding: 4px 9px; border-radius: 8px; font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.emi-mc-excelente { background: rgba(16, 185, 129, .16); color: #34d399; }
.emi-mc-saudavel { background: rgba(245, 158, 11, .16); color: #fbbf24; }
.emi-mc-critica { background: rgba(239, 68, 68, .16); color: #f87171; }
:root[data-theme="light"] .emi-mc-excelente { color: #047857; }
:root[data-theme="light"] .emi-mc-saudavel { color: #b45309; }
:root[data-theme="light"] .emi-mc-critica { color: #b91c1c; }
.emi-evolucao { border: 0; border-radius: 9px; background: var(--accent); color: #fff; font-weight: 600; font-size: 12px; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.emi-evolucao:hover { background: var(--accent-hover); }
.emi-rodape { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.emi-rodape strong { color: var(--text); }
.emi-rodape select { min-height: 30px; }
.emi-paginacao { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.emi-paginacao button { min-height: 32px; min-width: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; }
.emi-dialogo { width: min(960px, calc(100vw - 32px)); border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); padding: 18px 20px; }
.emi-dialogo::backdrop { background: rgba(0, 0, 0, .55); }
.emi-dialogo-topo { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.emi-dialogo-topo h2 { margin: 0; font-size: 18px; }
.emi-dialogo-topo p { margin: 4px 0 0; }
.emi-dialogo-topo button { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 9px; min-width: 36px; min-height: 36px; cursor: pointer; }
.emi-config { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
.emi-form-faixas { display: grid; gap: 12px; margin-top: 12px; }
.emi-form-faixas label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.emi-form-faixas input { width: 90px; }
.emi-form-faixas button { justify-self: start; }
.emi-ponto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.emi-ponto.excelente { background: #10b981; } .emi-ponto.saudavel { background: #f59e0b; } .emi-ponto.critica { background: #ef4444; }
.emi-checklist { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.emi-checklist li { padding: 10px 12px 10px 36px; border: 1px solid var(--border); border-radius: 10px; position: relative; font-size: 14px; line-height: 1.5; }
.emi-checklist li::before { position: absolute; left: 12px; top: 10px; font-weight: 800; }
.emi-checklist li.ok::before { content: "✓"; color: #34d399; }
.emi-checklist li.pendente::before { content: "!"; color: #fbbf24; }
@media (max-width: 1100px) { .emi-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emi-config { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .emi-faixas { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .emi-cartoes { grid-template-columns: 1fr; } .emi-cartao strong { font-size: 24px; } .emi-paginacao { margin-left: 0; } }
.emi-campo-busca { position: relative; flex: 1 1 280px; max-width: 420px; display: flex; align-items: center; }
.emi-campo-busca svg { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.emi-campo-busca input[type="search"] { width: 100%; max-width: none; min-height: 40px; padding: 0 34px 0 36px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; }
.emi-campo-busca input[type="search"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-suave); }
.emi-campo-busca input[type="search"]::-webkit-search-cancel-button { display: none; }
.emi-limpar-busca { position: absolute; right: 10px; color: var(--muted); text-decoration: none; font-size: 13px; }
.emi-limpar-busca:hover { color: var(--text); }
.emi-select { min-height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); padding: 0 10px; font: inherit; font-size: 14px; }
.emi-botao-busca { min-height: 40px; border-radius: 10px; }
.detalhes-margem { border: 1px solid var(--accent-suave); background: var(--accent-suave); border-radius: 12px; padding: 12px 14px; }
.detalhes-margem h3 { color: var(--accent-texto); }

/* Aria: botão de esconder e miniatura ao lado do sininho */
.aria-esconder { position: absolute; top: -6px; left: -6px; width: 22px; height: 22px; border-radius: 50%; padding: 0;
    border: 2px solid var(--bg); background: var(--surface-2); color: var(--text); font-size: 14px; line-height: 1;
    cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .15s ease; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.aria:hover .aria-esconder, .aria-esconder:focus-visible { opacity: 1; }
@media (hover: none) { .aria-esconder { opacity: 1; } }
.aria-esconder:hover { background: #dc2626; color: #fff; }
.aria.aria-recolhida { display: none; }
.barra-topo { gap: 10px; align-items: center; }
.aria-mini { position: relative; width: 40px; height: 40px; border-radius: 50%; padding: 0; border: 2px solid var(--accent);
    background: var(--surface); cursor: pointer; overflow: visible; flex: none; }
.aria-mini[hidden] { display: none; }
.aria-mini img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 20%; display: block; }
.aria-mini:hover, .aria-mini:focus-visible { box-shadow: 0 0 0 3px var(--accent-suave); }
.aria-mini-contador { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box;
    border-radius: 9px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid var(--bg); }
@media print { .aria-mini { display: none; } }
.emi-kwai { grid-column: 1 / -1; }
.emi-upload { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.emi-upload input[type="file"] { flex: 1 1 260px; }

/* Extrato: plano de contas direto na linha e conciliação em lote */
.conta-linha-fin { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.conta-linha-fin select { min-width: 220px; max-width: 340px; flex: 1 1 220px; min-height: 38px; }
.conta-linha-fin button { min-height: 38px; }
.lote-extrato-fin { position: sticky; bottom: 12px; z-index: 5; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--accent); background: var(--surface-2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.lote-extrato-fin[hidden] { display: none; }
.lote-extrato-fin select { flex: 1 1 260px; max-width: 420px; min-height: 40px; }
.marca-extrato-fin, #marcar-todas-fin { width: 18px; height: 18px; }
/* Extrato: pesquisa do plano de contas na linha (a lista de sugestões não fica cortada pela tabela) */
.conta-linha-fin .busca-select { flex: 1 1 260px; min-width: 240px; max-width: 380px; }
.conta-linha-fin .busca-select input { min-height: 38px; }
.lote-extrato-fin .busca-select { flex: 1 1 280px; max-width: 440px; }
.lote-extrato-fin .busca-select-lista { top: auto; bottom: calc(100% + 4px); }
@media (min-width: 900px) { .table-responsive:has(> .tabela-extrato-fin) { overflow: visible; } }

/* Extrato: tabela na largura toda e linha mais limpa */
.extrato-grade-fin.extrato-cheio-fin { grid-template-columns: minmax(0, 1fr); }
.tabela-extrato-fin td { vertical-align: middle; }
.tabela-extrato-fin td.numero { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.tabela-extrato-fin th:first-child, .tabela-extrato-fin td:first-child { width: 36px; padding-right: 0; }
.tabela-extrato-fin td:nth-child(2) { white-space: nowrap; color: var(--muted); }
.tabela-extrato-fin td:nth-child(3) { min-width: 220px; }
.tabela-extrato-fin td:nth-child(5) { min-width: 380px; }
.conta-linha-fin { flex-wrap: nowrap; }
.conta-linha-fin .busca-select { flex: 1 1 auto; min-width: 0; max-width: none; }
.conta-linha-fin .busca-select input, .lote-extrato-fin .busca-select input {
    min-height: 38px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border);
    background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; }
.conta-linha-fin .busca-select input:focus, .lote-extrato-fin .busca-select input:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-suave); }
.conta-linha-fin .busca-select input::placeholder, .lote-extrato-fin .busca-select input::placeholder { color: var(--muted); }
.conta-linha-fin button { flex: none; min-height: 38px; height: 38px; padding: 0 16px; border-radius: 9px; font-size: 14px; }
.acoes-extrato-fin { text-align: right; }
.acoes-extrato-fin button, .acoes-extrato-fin .acao-op { height: 38px; border-radius: 9px; }
@media (max-width: 900px) {
    .tabela-extrato-fin td:nth-child(5) { min-width: 300px; }
    .conta-linha-fin { flex-wrap: wrap; }
}

/* Equipe fase 2: férias, afastamentos, ocorrências, feriados */
.check-inline-rh { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; }
.check-inline-rh input { width: 20px; height: 20px; margin: 0; }
.campo-largo-rh { grid-column: 1 / -1; }
.campo-largo-rh textarea { width: 100%; }
.descricao-ocorrencia-rh { max-width: 420px; white-space: pre-line; font-size: 13.5px; }
@media (max-width: 700px) { .campo-largo-rh { grid-column: auto; } }

/* Conta do produto Gaveta Fiscal: mesma tela, marca e cores da Gaveta Fiscal */
html.marca-notacofre { --accent: #19C38A; --accent-hover: #14A876; --accent-suave: rgba(25, 195, 138, 0.14); --accent-texto: #5FE0B4;
  --blue: #5FE0B4; --bg: #0B1F2E; --surface: #102A3D; --surface-2: #13324A; --border: #22465F; --text: #EEF4F7; --muted: #A7B8C4; }
html.marca-notacofre[data-theme="light"] { --accent: #0E8F64; --accent-hover: #0B6E4D; --accent-suave: rgba(14, 143, 100, 0.1);
  --accent-texto: #0B6E4D; --blue: #0B6E4D; --bg: #F6F8F7; --surface: #FFFFFF; --surface-2: #EEF2F0; --border: #DCE3E0;
  --text: #0B1F2E; --muted: #4A5B68; }
html.marca-notacofre .logo-notacofre { text-decoration: none; display: inline-flex; align-items: center; }
html.marca-notacofre[data-theme="light"] .logo-notacofre span span:first-of-type { color: #0B1F2E !important; }
.form-cert-nc { display: flex; flex-direction: column; gap: 10px; padding: 12px; min-width: 280px; }
.form-cert-nc label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.aceite-nc { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--muted); }
.aceite-nc input { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.cnpj-autxml-nc { display: flex; align-items: center; gap: 12px; font-size: 22px; letter-spacing: .5px; margin: 6px 0; }

/* Gaveta Fiscal: nome da empresa em tamanho de texto (o .card strong geral é grande) */
.card .tabela-empresas-nc strong, .card .gp-empresas strong, .card .tabela-empresas-gaveta strong { font-size: 15px; font-weight: 600; line-height: 1.35; }