/* ==========================================================================
   Ponte entre as telas das redes e o design system da Marktech.

   Igual em todas as redes (copie o arquivo inteiro, não edite por rede). Carrega depois do
   modern_design.css: aponta os tokens antigos (--primary-color, --border...) para os --mk-* e põe os
   componentes antigos (.btn, .modern-input, .card, .status-tag, modais) nas medidas do kit mk-*.
   Tela nova usa as classes mk-* direto; este arquivo só existe para as telas que já existiam.
   Ordem: tokens, base, moldura, cartão, botões, campos, rótulos, etiquetas, tabelas, diálogos,
   botões flutuantes, estados.
   ========================================================================== */

/* ---------- tokens antigos nos valores do design system ---------- */
:root {
    --primary-color: var(--mk-navy);
    --primary-hover: var(--mk-navy-hover);
    --primary-dark: var(--mk-navy-deep);
    --primary-soft: rgba(51, 54, 82, 0.14);
    --accent-color: var(--mk-yellow);
    --accent-hover: var(--mk-yellow-hover);
    --accent-soft: var(--mk-yellow-soft);
    --accent-border: var(--mk-yellow-line);
    --aux-blue: var(--mk-bluegray);
    --aux-blue-dark: var(--mk-series-6);

    --bg-light: var(--mk-paper);
    --white: var(--mk-white);
    --surface-subtle: var(--mk-paper);
    --surface-muted: var(--mk-soft);
    --divider: var(--mk-line-soft);
    --border: var(--mk-line);
    --border-strong: var(--mk-line-strong);

    --text-main: var(--mk-ink);
    --text-muted: var(--mk-muted);
    --text-soft: var(--mk-faint);

    --success: var(--mk-good);
    --success-dark: var(--mk-good);
    --success-text: var(--mk-good);
    --success-bg: var(--mk-good-bg);
    --success-border: var(--mk-good-bg);
    --error: var(--mk-bad);
    --error-dark: var(--mk-bad-strong);
    --error-text: var(--mk-bad);
    --error-bg: var(--mk-bad-bg);
    --error-border: var(--mk-bad-line);
    --warning: var(--mk-warn);
    --warning-bg: var(--mk-warn-bg);
    --warning-border: var(--mk-yellow-line);
    --info: var(--mk-navy);
    --info-bg: var(--mk-navy-soft);
    --info-border: var(--mk-line-strong);
    --indigo: var(--mk-violet);
    --indigo-bg: var(--mk-violet-soft);
    --indigo-border: var(--mk-line-strong);

    --radius-sm: var(--mk-radius-sm);
    --radius-md: var(--mk-radius-control);
    --radius-lg: var(--mk-radius-lg);

    --shadow-sm: var(--mk-shadow-sm);
    --shadow-md: var(--mk-shadow-card);
    --shadow-lg: var(--mk-shadow);
    --shadow-accent: var(--mk-shadow-accent);
    --transition: all var(--mk-fast) var(--mk-ease);
}

/* ---------- base ---------- */
body.mk-ui {
    background-color: var(--mk-paper) !important;
    color: var(--mk-ink);
    font-family: var(--mk-font) !important;
    font-size: 13px;
}
.mk-ui :where(h1, h2, h3, h4, h5, h6, p, a, li, td, th, dt, dd, label, input, select, textarea, button, .btn) {
    font-family: var(--mk-font);
}
.mk-ui :where(h1, h2, h3, h4, h5, h6) {
    color: var(--mk-ink);
    letter-spacing: -0.01em;
}
.mk-ui a:not([class]) {
    color: var(--mk-navy);
    font-weight: 600;
}

/* ---------- moldura: menu lateral, barra do topo e conteúdo ---------- */
/* O menu (mk-side) e a barra (mk-topbar) são os do kit. Aqui só o que é das redes: o logo da rede junto
   com o da Marktech, o menu preso na tela e a coluna de conteúdo das telas antigas (.main-panel/.content). */
.mk-shell.rede-shell {
    align-items: start;
}
.rede-shell > .mk-side {
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
/* no computador o menu fica preso na tela, abaixo dos diálogos e da camada escura deles */
@media (min-width: 992px) {
    .rede-shell > .mk-side {
        position: sticky;
        top: 0;
        height: 100vh;
        z-index: 20;
    }
}
/* menu longo (mais alto que a tela): a coluna rola, nada encolhe (o logo era espremido) */
.rede-shell .mk-side__logo,
.rede-shell .mk-side__nav {
    flex-shrink: 0;
}
/* grupos do menu: o item-pai é um botão (abre e fecha a lista dos filhos) */
.rede-shell button.mk-side__item {
    width: calc(100% - 24px);
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.rede-shell button.mk-side__item:hover {
    background: var(--mk-yellow);
}
.rede-shell .mk-side__sub[hidden] {
    display: none;
}
/* item ativo marcado pelas telas antigas (classe .active) vale como o is-active do kit, mas só quando o rede.js não achou
   o item da tela (pelo #active-item-menu ou pelo endereço): com um is-active no menu, o .active de outro item não pinta.
   Os relatórios da OMO marcavam o Relatório temporal em todo relatório e o menu ficava com dois itens amarelos. */
.mk-side:not(:has(.is-active)) .mk-side__item.active,
.mk-side:not(:has(.is-active)) .mk-side__subitem.active {
    background: var(--mk-yellow);
    color: var(--mk-navy);
    box-shadow: var(--mk-shadow-accent);
}
/* grupo com o item ativo dentro: o pai fica aberto e com o peso dos outros itens (o negrito destoava do menu do kit,
   que não marca o pai; o amarelo é só do item em uso) */
.mk-side__item .rede-ext {
    width: 11px;
    height: 11px;
    margin-left: auto;
    opacity: 0.6;
}
.mk-side .mk-side__subitem svg.rede-ext {
    margin-left: auto;
}
/* "Sair" no fim do menu só aparece na gaveta do celular (o kit esconde no computador) */
.rede-shell .mk-side__logout {
    margin: 18px 24px 0;
}

/* coluna do conteúdo: as telas antigas abrem com .main-panel > barra > .content */
.rede-shell .main-panel {
    /* o Material Dashboard dá z-index 2 ao .main-panel, que prende diálogos e painéis da tela abaixo do menu */
    z-index: auto !important;
    float: none !important;
    width: auto !important;
    min-width: 0;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    position: relative;
    background: transparent !important;
    transition: none !important;
    min-height: 100vh !important;
}
.rede-shell .main-panel > .content,
.rede-shell .mk-main > .content {
    max-width: 1320px;
    margin: 0 auto !important;
    margin-top: 0 !important;
    padding: 10px 45px 90px !important;
    min-height: auto !important;
}
.rede-shell .main-panel > .content > .container-fluid,
.rede-shell .mk-main > .content > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.rede-shell .mk-topbar {
    position: relative;
    z-index: 30;
    padding: 10px 45px 0;
    min-height: 54px;
    margin-bottom: 18px;
}
/* seletor de unidade (Select2) no lugar do botão de contexto do kit: pílula branca de 300 x 44 */
.rede-shell .mk-topbar__client.rede-unit {
    display: block;
    width: 300px;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    cursor: default;
}
/* o dashboard.css antigo põe o seletor em 150px, absoluto e deslocado: aqui ele ocupa a pílula inteira */
.rede-shell .rede-unit .menu-dropdown {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
}
.rede-shell .rede-unit .select2-container {
    width: 100% !important;
    min-width: 0 !important;
}
.rede-shell .rede-unit .select2-container--default .select2-selection--single {
    height: 44px !important;
    padding: 0 40px 0 18px !important;
    border: 1px solid var(--mk-line-soft) !important;
    border-radius: var(--mk-radius-pill) !important;
    background: var(--mk-white) !important;
    box-shadow: 0 4px 14px rgba(51, 54, 82, 0.10) !important;
}
.rede-shell .rede-unit .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px !important;
    color: var(--mk-ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center;
}
.rede-shell .rede-unit .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
    right: 14px !important;
}
.rede-shell .rede-unit .unit-select {
    width: 100%;
}
/* antes do Select2 (que só liga quando os scripts das telas terminam, ~1 s depois da pintura) o select nativo, que
   o Materialize esconde, aparece na mesma pílula, com a unidade escolhida e a mesma seta: a barra do topo não abre
   vazia nem pula quando o Select2 assume. A unidade mostrada é a da tela (rede.js: o template marca como selected
   toda unidade ativa). */
.rede-shell .rede-unit .menu-dropdown > select:not(.select2-hidden-accessible):not(#rede-u1) {
    display: block !important;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 40px 0 18px;
    border: 1px solid var(--mk-line-soft);
    border-radius: var(--mk-radius-pill);
    background: var(--mk-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23333652'/%3E%3C/svg%3E") no-repeat right 19px center;
    box-shadow: 0 4px 14px rgba(51, 54, 82, 0.10);
    color: var(--mk-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 42px;
    text-align: center;
    text-align-last: center;
    -webkit-appearance: none;
    appearance: none;
}
.rede-shell .mk-topbar__end {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* menu recolhido no computador: o kit esconde a coluna; o menu preso sai junto */
.mk-shell.rede-shell.is-menu-collapsed > .mk-side {
    display: none;
}

@media (max-width: 991px) {
    .rede-shell .mk-topbar {
        padding: 10px 20px 0;
    }
    .rede-shell .main-panel > .content,
    .rede-shell .mk-main > .content {
        padding: 6px 20px 90px !important;
    }
}
@media (max-width: 767px) {
    .rede-shell .mk-topbar {
        padding: 10px 16px 0;
        margin-bottom: 12px;
    }
    .rede-shell .mk-topbar__client.rede-unit {
        width: 100%;
        min-width: 0;
        max-width: 340px;
        justify-self: center;
    }
    .rede-shell .main-panel > .content,
    .rede-shell .mk-main > .content {
        padding: 4px 16px 90px !important;
    }
}

/* ---------- cartão ---------- */
.mk-ui .card {
    border: 1px solid var(--mk-line) !important;
    border-radius: var(--mk-radius-lg) !important;
    box-shadow: var(--mk-shadow-card) !important;
    background: var(--mk-white) !important;
    transition: none !important;
}
.mk-ui .card:hover {
    box-shadow: var(--mk-shadow-card) !important;
}
/* os cartões que já eram transparentes (listas de campanhas) continuam sem moldura */
.mk-ui .card.card-tables,
.mk-ui .card:has(> .table.campaign-table),
.mk-ui .card:has(> .campaign-table),
.mk-ui .bucket-form.card:has(> .card-body > .col-lg-12 > .campaign-table),
.mk-ui .bucket-form.card:has(> .campaign-table) {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.mk-ui .card .card-header {
    border-bottom: 1px solid var(--mk-line-soft) !important;
}
.mk-ui .card .card-title,
.mk-ui .card-header .card-title {
    color: var(--mk-ink) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
}
.mk-ui .card .card-category {
    color: var(--mk-muted) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

/* ---------- botões ---------- */
.mk-ui .btn,
.mk-ui .btn-blue,
.mk-ui .login100-form-btn,
.mk-ui .btn-access,
.mk-ui .logout-btn {
    min-height: 38px;
    height: auto !important;
    padding: 0 16px !important;
    border: 1px solid transparent !important;
    border-radius: var(--mk-radius-control) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    transform: none !important;
    gap: 7px;
    transition: background-color var(--mk-fast) var(--mk-ease), color var(--mk-fast) var(--mk-ease),
                border-color var(--mk-fast) var(--mk-ease) !important;
}
.mk-ui .btn:hover,
.mk-ui .btn:focus {
    transform: none !important;
    box-shadow: none !important;
}
.mk-ui .btn i.material-icons {
    font-size: 16px !important;
}
.mk-ui .btn .fa,
.mk-ui .btn .fas,
.mk-ui .btn .far,
.mk-ui .btn .fab {
    font-size: 13px !important;
}
.mk-ui .btn:disabled,
.mk-ui .btn.disabled {
    opacity: 0.55 !important;
    cursor: default !important;
}
/* principal: amarelo, hover navy */
.mk-ui .btn-accent,
.mk-ui .login100-form-btn,
.mk-ui .btn-access,
.mk-ui .btn-pay,
.mk-ui .btn-save,
.mk-ui .btn-approve,
.mk-ui .btn.btn-success:not(.btn-action-icon),
.mk-ui .btn-success:not(.btn-action-icon),
.mk-ui .bucket-form .btn-save {
    background: var(--mk-yellow) !important;
    border-color: var(--mk-yellow) !important;
    color: var(--mk-ink) !important;
}
.mk-ui .btn-accent:hover,
.mk-ui .login100-form-btn:hover,
.mk-ui .btn-access:hover,
.mk-ui .btn-pay:hover,
.mk-ui .btn-save:hover,
.mk-ui .btn-approve:hover,
.mk-ui .btn.btn-success:not(.btn-action-icon):hover,
.mk-ui .btn-success:not(.btn-action-icon):hover {
    background: var(--mk-navy) !important;
    border-color: var(--mk-navy) !important;
    color: var(--mk-white) !important;
    opacity: 1 !important;
}
/* escuro: navy (avançar, ver resultados) */
.mk-ui .btn-blue,
.mk-ui .btn-primary,
.mk-ui .btn-results {
    background: var(--mk-navy) !important;
    border-color: var(--mk-navy) !important;
    color: var(--mk-white) !important;
}
.mk-ui .btn-blue:hover,
.mk-ui .btn-primary:hover,
.mk-ui .btn-results:hover {
    background: var(--mk-navy-hover) !important;
    border-color: var(--mk-navy-hover) !important;
    color: var(--mk-white) !important;
}
/* contorno: apoio (editar, cancelar, pré-visualizar, documentos) */
.mk-ui .btn-outline-primary,
.mk-ui .btn-edit,
.mk-ui .btn-doc,
.mk-ui .btn-cancel,
.mk-ui .btn-preview,
.mk-ui .btn-secondary,
.mk-ui .btn-default,
.mk-ui .btn-light,
.mk-ui .btn-outline-secondary {
    background: var(--mk-white) !important;
    border-color: var(--mk-line) !important;
    color: var(--mk-ink) !important;
}
.mk-ui .btn-outline-primary:hover,
.mk-ui .btn-outline-primary.active,
.mk-ui .btn-edit:hover,
.mk-ui .btn-doc:hover,
.mk-ui .btn-cancel:hover,
.mk-ui .btn-preview:hover,
.mk-ui .btn-secondary:hover,
.mk-ui .btn-default:hover,
.mk-ui .btn-light:hover,
.mk-ui .btn-outline-secondary:hover {
    background: var(--mk-yellow-soft) !important;
    border-color: var(--mk-yellow-dark) !important;
    color: var(--mk-ink) !important;
}
/* abas de escopo (Todas / Pendentes): a escolhida fica navy */
.mk-ui .campaign-scope-tabs .btn {
    min-height: 30px;
    padding: 0 12px !important;
    font-size: 12px !important;
    border-radius: var(--mk-radius-sm) !important;
}
.mk-ui .campaign-scope-tabs .btn.active,
.mk-ui .campaign-scope-tabs .btn-outline-primary.active {
    background: var(--mk-navy) !important;
    border-color: var(--mk-navy) !important;
    color: var(--mk-white) !important;
}
/* destrutivo: contorno vermelho, nunca preenchido em repouso */
.mk-ui .btn-outline-danger,
.mk-ui .btn-exclude,
.mk-ui .btn-danger {
    background: var(--mk-white) !important;
    border-color: var(--mk-bad-line) !important;
    color: var(--mk-bad) !important;
}
.mk-ui .btn-outline-danger:hover,
.mk-ui .btn-exclude:hover,
.mk-ui .btn-danger:hover {
    background: var(--mk-bad-bg) !important;
    border-color: var(--mk-bad-line) !important;
    color: var(--mk-bad) !important;
}
/* pequeno: 30px, dentro de linha, lista e aviso */
.mk-ui .btn-smallest,
.mk-ui .btn-sm {
    min-height: 30px;
    min-width: 0 !important;
    padding: 0 11px !important;
    border-radius: var(--mk-radius-sm) !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
}
.mk-ui .btn-pay-now {
    min-height: 30px;
    padding: 0 12px !important;
    font-size: 12px !important;
    box-shadow: none !important;
}
/* só ícone: 34px de contorno, ícone em tinta (vermelho para excluir/rejeitar) */
.mk-ui .btn-action-icon {
    width: 34px;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px;
    padding: 0 !important;
    border: 1px solid var(--mk-line) !important;
    border-radius: var(--mk-radius-control) !important;
    background: var(--mk-white) !important;
    color: var(--mk-navy) !important;
    box-shadow: none !important;
}
.mk-ui .btn-action-icon i,
.mk-ui .btn-action-icon i.material-icons {
    font-size: 17px !important;
    color: inherit !important;
}
.mk-ui .btn-action-icon:hover {
    background: var(--mk-yellow-soft) !important;
    border-color: var(--mk-yellow-dark) !important;
    color: var(--mk-ink) !important;
}
.mk-ui .btn-action-icon.btn-exclude,
.mk-ui .btn-action-icon.btn-reject,
.mk-ui .btn-action-icon.btn-delete {
    color: var(--mk-bad) !important;
    border-color: var(--mk-bad-line) !important;
}
.mk-ui .btn-action-icon.btn-exclude:hover,
.mk-ui .btn-action-icon.btn-reject:hover,
.mk-ui .btn-action-icon.btn-delete:hover {
    background: var(--mk-bad-bg) !important;
    color: var(--mk-bad) !important;
}
.mk-ui .btn-action-icon.action-disabled {
    opacity: 0.55 !important;
    background: var(--mk-white) !important;
}
.mk-ui .form-footer-actions .btn,
.mk-ui input.btn,
.mk-ui input[type="button"].btn,
.mk-ui input[type="submit"].btn {
    height: 38px !important;
    padding: 0 18px !important;
    line-height: 1.2 !important;
}
.mk-ui .form-footer-actions {
    gap: 10px;
}
@media (max-width: 767px) {
    .mk-ui .btn,
    .mk-ui .btn-blue,
    .mk-ui .logout-btn {
        min-height: 38px !important;
        padding: 8px 14px !important;
    }
    .mk-ui .btn-smallest,
    .mk-ui .btn-sm,
    .mk-ui .btn-action-icon {
        padding: 0 11px !important;
    }
    .mk-ui .btn-action-icon {
        padding: 0 !important;
    }
}

/* ---------- campos ---------- */
.mk-ui .modern-input,
.mk-ui select.modern-input,
.mk-ui .form-control.modern-input,
.mk-ui .modern-form-group .select2-container--default .select2-selection--single,
.mk-ui .filter-section .select2-container--default .select2-selection--single,
.mk-ui .filter-report .select2-container--default .select2-selection--single,
.mk-ui .bucket-form .select2-container--default .select2-selection--single {
    height: 38px !important;
    min-height: 38px;
    padding: 0 11px !important;
    border: 1px solid var(--mk-line) !important;
    border-radius: var(--mk-radius-control) !important;
    background-color: var(--mk-white) !important;
    box-shadow: none !important;
    color: var(--mk-ink) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.mk-ui select.modern-input {
    padding-right: 30px !important;
    background-position: right 11px center !important;
    background-size: 10px !important;
}
.mk-ui .modern-input.datepicker,
.mk-ui .datepicker.modern-input {
    padding-right: 34px !important;
    background-position: right 11px center !important;
    background-size: 15px !important;
}
.mk-ui .modern-input:focus,
.mk-ui .form-control.modern-input:focus,
.mk-ui .select2-container--default.select2-container--open .select2-selection--single,
.mk-ui .select2-container--default.select2-container--focus .select2-selection--single,
.mk-ui .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--mk-navy) !important;
    box-shadow: 0 0 0 3px rgba(51, 54, 82, 0.14) !important;
    outline: none !important;
}
.mk-ui .modern-input::placeholder {
    color: var(--mk-faint) !important;
    font-weight: 400 !important;
}
.mk-ui .modern-input[readonly],
.mk-ui input.form-control[readonly] {
    background-color: var(--mk-paper) !important;
    color: var(--mk-body) !important;
}
.mk-ui .modern-input:disabled,
.mk-ui .modern-input[disabled] {
    opacity: 0.6 !important;
    cursor: default !important;
}
.mk-ui textarea.modern-input,
.mk-ui textarea.form-control.modern-input,
.mk-ui .mass-upload-card textarea.modern-input,
.mk-ui .approve-copies textarea.modern-input {
    height: auto !important;
    min-height: 60px;
    padding: 9px 12px !important;
    border-radius: var(--mk-radius-control) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.43 !important;
}
.mk-ui .modern-form-group .select2-container--default .select2-selection--single .select2-selection__rendered,
.mk-ui .filter-section .select2-container--default .select2-selection--single .select2-selection__rendered,
.mk-ui .filter-report .select2-container--default .select2-selection--single .select2-selection__rendered,
.mk-ui .bucket-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
    padding-left: 0 !important;
    color: var(--mk-ink) !important;
    font-weight: 500 !important;
}
.mk-ui .modern-form-group .select2-container--default .select2-selection--single .select2-selection__arrow,
.mk-ui .filter-section .select2-container--default .select2-selection--single .select2-selection__arrow,
.mk-ui .filter-report .select2-container--default .select2-selection--single .select2-selection__arrow,
.mk-ui .bucket-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    right: 8px !important;
}
.mk-ui .select2-container--default .select2-selection--multiple {
    min-height: 38px !important;
    border: 1px solid var(--mk-line) !important;
    border-radius: var(--mk-radius-control) !important;
    box-shadow: none !important;
}
.mk-ui .select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: 0 !important;
    border-radius: var(--mk-radius-pill) !important;
    background: var(--mk-line-soft) !important;
    color: var(--mk-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}
/* lista aberta do Select2 */
.mk-ui .select2-dropdown {
    border: 1px solid var(--mk-line) !important;
    border-radius: var(--mk-radius-control) !important;
    box-shadow: var(--mk-shadow-pop) !important;
    overflow: hidden;
}
.mk-ui .select2-results__option {
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: var(--mk-ink);
}
.mk-ui .select2-container--default .select2-results__option--highlighted[aria-selected],
.mk-ui .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--mk-soft) !important;
    color: var(--mk-ink) !important;
}
.mk-ui .select2-container--default .select2-results__option[aria-selected="true"],
.mk-ui .select2-container--default .select2-results__option--selected {
    background: var(--mk-yellow-soft) !important;
    color: var(--mk-ink) !important;
    font-weight: 600;
}
.mk-ui .select2-search--dropdown .select2-search__field {
    height: 34px !important;
    border: 1px solid var(--mk-line) !important;
    border-radius: var(--mk-radius-sm) !important;
}

/* ---------- rótulos: caixa normal, 12px/600 em cinza ---------- */
.mk-ui .modern-form-group label,
.mk-ui .modern-form-group.bmd-form-group label,
.mk-ui .modern-form-group.bmd-form-group label.bmd-label-static,
.mk-ui .form-group label,
.mk-ui .bucket-form label.bmd-label-floating,
.mk-ui .bucket-form label.bmd-label-static,
.mk-ui #uploadForm > label,
.mk-ui #uploadForm .d-flex > label,
.mk-ui #uploadForm #end-date-label,
.mk-ui #extra-radius .maps-input-label,
.mk-ui .copys-label,
.mk-ui .actions-label {
    height: auto !important;
    margin-bottom: 4px !important;
    color: var(--mk-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.mk-ui .section-heading,
.mk-ui .promo-creatives-title {
    color: var(--mk-ink) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
/* dados de um item (dt rótulo, dd valor) */
.mk-ui .campaign-table dt,
.mk-ui .campaign-table .row dt,
.mk-ui .creative-media-col > dt,
.mk-ui .creative-meta dt {
    color: var(--mk-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.mk-ui .campaign-table dd,
.mk-ui .campaign-table .row dd {
    color: var(--mk-ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* ---------- etiquetas ---------- */
.mk-ui .status-tag,
.mk-ui .custom-tag,
.mk-ui .badge-accent {
    padding: 2px 8px !important;
    border: 0 !important;
    border-radius: var(--mk-radius-pill) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.5 !important;
    text-transform: none !important;
}
.mk-ui .status-tag i,
.mk-ui .custom-tag i {
    font-size: 12px !important;
}

/* ---------- tabelas ---------- */
.mk-ui .campaign-result .table table,
.mk-ui .table {
    border-collapse: collapse;
}
.mk-ui .campaign-result .table table {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.mk-ui .campaign-result .table table th,
.mk-ui .update-summary-table th,
.mk-ui .targeting-table th,
.mk-ui #extra-radius .custom-table th,
.mk-ui .table thead th {
    background: var(--mk-white) !important;
    border-bottom: 1px solid var(--mk-line) !important;
    color: var(--mk-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 11px 12px !important;
}
.mk-ui .campaign-result .table table td,
.mk-ui .table td {
    padding: 11px 12px !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--mk-line-soft) !important;
    color: var(--mk-ink) !important;
    font-size: 13px !important;
}
.mk-ui .table tbody tr:hover {
    background: var(--mk-paper);
}

/* ---------- diálogos (Bootstrap e Materialize) ---------- */
.mk-ui .modal-backdrop.show {
    opacity: 1 !important;
    background: var(--mk-overlay) !important;
}
.mk-ui .modal-content {
    border: 0 !important;
    border-radius: var(--mk-radius-lg) !important;
    box-shadow: var(--mk-shadow-lg) !important;
    overflow: hidden;
}
.mk-ui .modal-header {
    padding: 22px 24px 4px !important;
    border-bottom: 0 !important;
}
.mk-ui .modal-header .modal-title,
.mk-ui .modal-header h4,
.mk-ui .modal-header h5 {
    color: var(--mk-ink) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}
.mk-ui .modal-body {
    padding: 12px 24px 18px !important;
    color: var(--mk-body);
    font-size: 13px;
}
.mk-ui .modal-footer {
    gap: 10px;
    padding: 14px 24px !important;
    border-top: 1px solid var(--mk-line-soft) !important;
    background: var(--mk-white) !important;
}
.mk-ui .modal-footer > * {
    margin: 0 !important;
}
.mk-ui .modal.materialize-modal,
.mk-ui .modal:not(.fade) {
    border-radius: var(--mk-radius-lg) !important;
}

/* ---------- botões flutuantes (suporte, perguntas, observações) ---------- */
.support-button,
.faq-button,
.obs-button {
    position: fixed;
    bottom: 18px;
    z-index: 1030;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: var(--mk-shadow-pop);
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color var(--mk-fast) var(--mk-ease);
}
.support-button {
    right: 18px;
    background: var(--mk-yellow);
    color: var(--mk-navy) !important;
}
.support-button:hover {
    background: var(--mk-navy);
    color: var(--mk-yellow) !important;
}
.faq-button {
    right: 70px;
    background: var(--mk-navy);
    color: var(--mk-white) !important;
}
.obs-button {
    right: 122px;
    background: var(--mk-navy);
    color: var(--mk-white) !important;
}
.faq-button:hover,
.obs-button:hover {
    background: var(--mk-navy-hover);
}
.support-button i,
.faq-button i,
.obs-button i {
    color: inherit !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

/* ---------- estados ---------- */
.mk-ui .empty-state,
.mk-ui .billing-empty,
.mk-ui .preview-empty {
    color: var(--mk-muted);
    font-size: 13px;
}
.mk-ui .empty-state h3,
.mk-ui .empty-state h4,
.mk-ui .empty-state h5 {
    color: var(--mk-ink);
    font-size: 16px;
    font-weight: 700;
}

/* ---------- listas de campanhas e de mídias ---------- */
/* cada campanha é um cartão (borda mk-line, canto 24, sombra mínima); a situação fica no texto e na etiqueta,
   nunca numa barra colorida na lateral */
.mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) {
    border: 1px solid var(--mk-line) !important;
    border-radius: var(--mk-radius-lg) !important;
    box-shadow: var(--mk-shadow-card) !important;
    padding: 22px 24px !important;
}
.mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section):hover {
    transform: none !important;
    box-shadow: var(--mk-shadow-card) !important;
}
.mk-ui .campaign-table .row.status-positive,
.mk-ui .campaign-table .row.status-negative,
.mk-ui .campaign-table .row.status-pending-payment,
.mk-ui .campaign-table .row.action-required,
.mk-ui .campaign-table .row.action-marktech-required,
.mk-ui .action-required,
.mk-ui .action-marktech-required,
.mk-ui .promo-item-card {
    border-left: 1px solid var(--mk-line) !important;
}
/* linha da campanha em grade (iguais em todas as redes: nome, datas, rótulo e tipo, situação, ações). As colunas
   do Bootstrap viram células da grade, com largura mínima para data e situação não quebrarem no meio da palavra;
   a grade se reorganiza pela largura da lista (container query), não da janela, porque o menu lateral muda o espaço */
.mk-ui .campaign-table {
    container-type: inline-size;
    container-name: rede-campanhas;
}
.mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) {
    display: grid !important;
    grid-template-columns: minmax(200px, 1.7fr) minmax(118px, 0.9fr) minmax(140px, 1.1fr) minmax(170px, 1.4fr) max-content;
    column-gap: 28px;
    row-gap: 16px;
    align-items: start;
    width: auto !important;
    margin: 0 0 12px !important;
}
/* o clearfix do Materialize (::before/::after) viraria uma linha vazia da grade */
.mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section)::before,
.mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section)::after {
    display: none !important;
}
.mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > div[class*="col-"]:not(.modal):not(.rede-x) {
    text-align: left !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    flex: none !important;
    padding: 0 !important;
    border-right: 0 !important;
}
.mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > .campaign-result,
.mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > .col-lg-12 {
    grid-column: 1 / -1;
}
.mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) dd {
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: manual;
    margin-bottom: 10px !important;
}
.mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) dd:last-child {
    margin-bottom: 0 !important;
}
/* cabeçalho da campanha: canal + nome (título do item), investimento e unidade */
.mk-ui .campaign-info {
    margin: 0 0 12px !important;
}
.mk-ui .campaign-info .campaign-title {
    margin: 0 0 4px !important;
    color: var(--mk-ink) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}
.mk-ui .campaign-info .campaign-title i {
    margin: 0 4px 0 0 !important;
    color: var(--mk-muted) !important;
    font-size: 13px !important;
}
.mk-ui .campaign-info .campaign-investment {
    color: var(--mk-ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    font-variant-numeric: tabular-nums;
}
.mk-ui .campaign-info .campaign-business-name,
.mk-ui .campaign-info .campaign-summary,
.mk-ui .campaign-info .campaign-city {
    margin-top: 2px !important;
    color: var(--mk-muted) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}
.mk-ui .campaign-info .campaign-summary b,
.mk-ui .campaign-info .campaign-city b {
    color: var(--mk-body);
    font-weight: 600;
}
/* datas: a coluna tem largura mínima para "18/09/2026" caber inteira */
.mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > div:nth-child(2 of [class*="col-"]) dd {
    font-variant-numeric: tabular-nums;
}
/* situação: ícone colorido + texto numa pílula neutra (a cor fica no ícone, como nas etiquetas do kit) */
.mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > div:nth-child(4 of [class*="col-"]) > dd:first-of-type {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: var(--mk-radius-pill);
    background: var(--mk-line-soft);
    line-height: 1.4;
}
.mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > div:nth-child(4 of [class*="col-"]) > dd:first-of-type > i.material-icons {
    font-size: 16px !important;
    margin: 0 !important;
    vertical-align: middle;
}
.mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > div:nth-child(4 of [class*="col-"]) > dd:first-of-type > i.info-tooltip {
    color: var(--mk-muted) !important;
    font-size: 15px !important;
    cursor: help;
}
/* faixa colorida no começo da linha (planos anual e de incentivo) e barras por severidade dos alertas: o kit não
   usa barra lateral colorida; a situação fica no texto e na etiqueta */
.mk-ui .campaign-table .row > .border-strip {
    display: none !important;
}
.mk-ui .campaign-table .info-marker {
    border-left: 0 !important;
}
/* os alertas ficam direto no bloco suave, separados por fio (nada de bloco branco dentro do bloco) */
.mk-ui .campaign-table .alert-sub-list .row.warning-marker,
.mk-ui .campaign-table .alert-sub-list .row.error-marker {
    border: 0 !important;
    border-bottom: 1px solid var(--mk-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 12px 0 !important;
}
.mk-ui .campaign-table .alert-sub-list .row.warning-marker:last-child,
.mk-ui .campaign-table .alert-sub-list .row.error-marker:last-child {
    border-bottom: 0 !important;
}
/* campanha com alertas: o cartão e a lista de alertas formam um bloco só */
.mk-ui .campaign-alert-group.has-alerts > .row:not(.filter-section) {
    border-radius: var(--mk-radius-lg) var(--mk-radius-lg) 0 0 !important;
    margin-bottom: 0 !important;
}
.mk-ui .campaign-table .alert-sub-list {
    border: 1px solid var(--mk-line) !important;
    border-top: 0 !important;
    border-radius: 0 0 var(--mk-radius-lg) var(--mk-radius-lg) !important;
    background: var(--mk-soft) !important;
}
.mk-ui .campaign-table .alert-sub-list-header {
    color: var(--mk-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
/* cartões de número das listas (metrics-wrapper > .card.metric): cartão do kit, sem a borda amarela no alto;
   rótulo e número como o mk-stat */
.mk-ui .metrics-wrapper .card.metric {
    border: 1px solid var(--mk-line) !important;
    border-radius: var(--mk-radius-lg) !important;
    box-shadow: var(--mk-shadow-card) !important;
}
.mk-ui .metrics-wrapper {
    align-items: stretch !important;
}
.mk-ui .metrics-wrapper .card.metric .card-body {
    height: 100%;
    justify-content: space-between;
    color: var(--mk-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}
.mk-ui .metrics-wrapper .card.metric .card-body span b {
    color: var(--mk-ink) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
}
/* cor do ícone da situação nas cores do kit (os templates pintam com green/red/orange em linha) */
.mk-ui .campaign-table dd > i.material-icons[style*="green"] { color: var(--mk-good) !important; }
.mk-ui .campaign-table dd > i.material-icons[style*="red"] { color: var(--mk-bad) !important; }
.mk-ui .campaign-table dd > i.material-icons[style*="orange"],
.mk-ui .campaign-table dd > i.material-icons[style*="warning"] { color: var(--mk-warn) !important; }
/* dica (qtip) das telas antigas: escondida não ocupa espaço (a de 220px passava da borda e a página rolava de lado);
   na coluna da situação abre para a esquerda, alinhada ao ícone */
.mk-ui .qtip:not(:hover):not(:focus)::before,
.mk-ui .qtip:not(:hover):not(:focus)::after {
    display: none !important;
}
.mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > div:nth-child(4 of [class*="col-"]) .qtip.tip-bottom::before {
    left: auto !important;
    right: -10px !important;
    transform: translate(0, calc(100% + 8px)) !important;
    text-align: left !important;
}
/* ações: botões de ícone em fila, alinhados à direita (o rótulo "Ações" sai: os ícones têm dica) */
.mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > .btns-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-self: end;
    gap: 0 !important;
}
.mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > .btns-wrapper .actions-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    margin: 0 !important;
}
.mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > .btns-wrapper .action-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 34px);
    justify-content: end !important;
    gap: 6px !important;
    width: auto !important;
    margin: 0 !important;
}
.mk-ui .campaign-table .btn-action-icon {
    width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    max-height: 34px !important;
    min-height: 34px !important;
    transform: none !important;
}
/* lista média (painel estreito, menu aberto em notebook): nome e situação no alto, datas e tipo embaixo, ações
   numa faixa no rodapé do cartão */
@container rede-campanhas (max-width: 940px) {
    .mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
    }
    .mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > div:nth-child(1 of [class*="col-"]) { grid-column: 1 / 3; grid-row: 1; }
    .mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > div:nth-child(2 of [class*="col-"]) { grid-column: 1; grid-row: 2; }
    .mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > div:nth-child(3 of [class*="col-"]) { grid-column: 2; grid-row: 2; }
    .mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > div:nth-child(4 of [class*="col-"]) { grid-column: 3; grid-row: 1 / 3; }
    .mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > .btns-wrapper {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: stretch;
        align-items: flex-start !important;
        padding-top: 14px !important;
        border-top: 1px solid var(--mk-line-soft) !important;
    }
    .mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > .btns-wrapper .action-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }
    .mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > .campaign-result { grid-row: 4; }
}
/* lista estreita (celular): uma coluna; as datas viram linhas "rótulo  valor" */
@container rede-campanhas (max-width: 560px) {
    .mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) {
        grid-template-columns: minmax(0, 1fr);
        padding: 18px !important;
    }
    .mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > div[class*="col-"] { grid-column: 1; grid-row: auto; }
    .mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > div:nth-child(4 of [class*="col-"]) { order: -1; }
    .mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > div:nth-child(1 of [class*="col-"]) { order: -2; }
    .mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > .btns-wrapper { grid-row: auto; }
    .mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > .campaign-result { grid-row: auto; order: 10; }
    .mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > div:nth-child(2 of [class*="col-"]) {
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr);
        column-gap: 16px;
        row-gap: 6px;
        align-items: baseline;
    }
    .mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > div:nth-child(2 of [class*="col-"]) > dd { margin: 0 !important; }
    .mk-ui :is(.campaign-table, .campaign-alert-group) > .row:not(.filter-section) > div:nth-child(2 of [class*="col-"]) > :not(dt):not(dd) { grid-column: 1 / -1; margin: 0 !important; }
}
/* números da campanha: bloco interno de fundo suave, sem borda (nada de cartão dentro de cartão) */
.mk-ui .result-data {
    border: 0 !important;
    border-radius: var(--mk-radius-block) !important;
    background: var(--mk-soft) !important;
    padding: 16px 18px !important;
    box-shadow: none !important;
}
.mk-ui .result-data:hover {
    box-shadow: none !important;
}
.mk-ui .result-header {
    color: var(--mk-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}
.mk-ui .result-body,
.mk-ui .result-body p {
    color: var(--mk-ink) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}
.mk-ui .result-footer {
    border-top: 0 !important;
    padding-top: 0 !important;
    color: var(--mk-muted) !important;
    font-size: 12.5px !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
}
/* aviso de falha no lugar (formatos de mídia, limite de mídias): faixa vermelha clara, sem barra lateral */
.mk-ui .upload-format-notice {
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--mk-bad-bg) !important;
    color: var(--mk-bad) !important;
    font-size: 13px !important;
}
/* filtro recolhido das listas: mesmo cartão das telas */
.mk-ui .filter-section,
.mk-ui .filter-report {
    border: 1px solid var(--mk-line) !important;
    border-radius: var(--mk-radius-lg) !important;
    box-shadow: var(--mk-shadow-card) !important;
}
/* "Filtros" é apoio: contorno (o amarelo fica só para a ação principal da tela) */
.mk-ui .show-filter-btn,
.mk-ui .btn.report-filter {
    background: var(--mk-white) !important;
    border-color: var(--mk-line) !important;
    color: var(--mk-ink) !important;
}
.mk-ui .show-filter-btn:hover,
.mk-ui .btn.report-filter:hover {
    background: var(--mk-yellow-soft) !important;
    border-color: var(--mk-yellow-dark) !important;
}

/* ---------- entrada (login, resetar a senha, cadastro) ---------- */
/* o logo da rede (Marktech + rede) no lugar do logo branco do kit */
.rede-entry__brand {
    display: block;
    line-height: 0;
}
.rede-entry__brand img {
    display: block;
    height: auto;
    max-height: 72px;
    max-width: 220px;
}
.rede-entry .mk-entry__text a.mk-link {
    font-size: inherit;
}
/* passos do cadastro que ainda usam o formulário antigo dentro do cartão novo */
.rede-entry .login100-form-title h3 {
    margin: 0 0 16px;
    color: var(--mk-ink);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}
.rede-entry .mkt-logo-login {
    display: none;
}
.rede-entry .input100 {
    width: 100%;
    height: 38px;
    padding: 0 11px !important;
    border: 1px solid var(--mk-line) !important;
    border-radius: var(--mk-radius-control) !important;
    background: var(--mk-white) !important;
    color: var(--mk-ink);
    font-size: 13px;
}
.rede-entry .symbol-input100,
.rede-entry .focus-input100 {
    display: none !important;
}
.rede-entry .login100-form-btn {
    width: 100%;
}
@media (max-width: 575px) {
    .rede-entry .input100 {
        height: 44px;
        font-size: 16px;
    }
}
/* o auth_control.css antigo pinta p e a da página inteira: o rodapé volta ao branco do kit */
.rede-entry .mk-entry__foot,
.rede-entry .mk-entry__foot p {
    color: rgba(255, 255, 255, 0.72) !important;
}
.rede-entry .mk-entry__foot a {
    color: var(--mk-white) !important;
    font-weight: 600;
    text-decoration: underline !important;
}
.rede-entry .mk-entry__card p,
.rede-entry .mk-entry__card label {
    margin-top: 0;
}
.rede-entry .mk-entry__text {
    color: var(--mk-body) !important;
}
/* formulários antigos do cadastro dentro do cartão: altura livre, título à esquerda no tamanho do kit */
.rede-entry .wrap-input100,
.rede-entry .image-access,
.rede-entry .image-body {
    height: auto !important;
    margin-bottom: 14px !important;
}
.rede-entry .main-header h1,
.rede-entry .login100-form-title,
.rede-entry .login100-form-title h3 {
    margin: 0 0 12px !important;
    color: var(--mk-ink) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: left !important;
}
.rede-entry .login100-form-title {
    display: block !important;
    padding: 0 !important;
}
.rede-entry .p-t-136 {
    padding-top: 16px !important;
}
.rede-entry .container-login100-form-btn {
    padding-top: 6px !important;
}
.rede-entry .login100-form {
    width: 100% !important;
    padding: 0 !important;
}
/* item do menu que a conta não pode usar agora (unidade fora de operação): apagado, sem clique. É um <a> sem href, e
   o Material Dashboard dá a esse link a cor herdada (a:not([href]), mais forte que a do kit): o texto saía na cor de
   tinta, quase invisível no navy. Aqui fica com a cor do item, só apagado. */
.mk-ui .mk-side .is-disabled:not(#rede-x1) {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: auto;
    color: rgba(255, 255, 255, 0.95) !important;
}
.mk-ui .mk-side .mk-side__subitem.is-disabled:not(#rede-x1) {
    color: rgba(255, 255, 255, 0.72) !important;
}
.mk-ui .mk-side .is-disabled:hover:not(#rede-x1) {
    background: transparent !important;
    box-shadow: none !important;
}

/* barra do topo com seletor de idioma (redes com várias línguas): no celular o Sair vai para a gaveta e o idioma
   continua na barra, só com o ícone */
.rede-lang .dropdown-toggle::after {
    display: none;
}
.rede-lang .dropdown-menu {
    min-width: 160px;
    padding: 6px;
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius-control);
    box-shadow: var(--mk-shadow-pop);
}
.rede-lang .dropdown-item {
    border-radius: var(--mk-radius-sm);
    color: var(--mk-ink);
    font-size: 13px;
    font-weight: 500;
}
.rede-lang .dropdown-item:hover,
.rede-lang .dropdown-item.is-current {
    background: var(--mk-soft);
    color: var(--mk-ink);
}
@media (max-width: 991px) {
    .mk-shell.rede-shell:has(.mk-side__logout) .mk-topbar__end.rede-topbar-end--keep {
        display: flex;
    }
    .mk-shell.rede-shell .mk-topbar__end.rede-topbar-end--keep .rede-logout {
        display: none;
    }
    .rede-lang .rede-lang__name {
        display: none;
    }
}
/* entrada com o logo do país/rede ao lado do da Marktech (redes com Business.logo) */
.rede-entry__brand {
    display: flex;
    align-items: center;
    gap: 18px;
}
.rede-entry__brand img.rede-entry__client {
    max-height: 56px;
    max-width: 160px;
}

/* ---------- carga normal: nada pinta antes de o rede.js montar a tela ---------- */
/* O base.html marca o html com .rede-montando (script no head; tira sozinho em 3 s se o rede.js não vier) e o rede.js
   tira a marca assim que monta cartões, ícones e menu, logo depois do conteúdo. Sem isso, o navegador às vezes pintava
   um quadro da lista no layout antigo (nomes dos ícones em texto, menu sem ícones) antes de o script rodar. */
html.rede-montando .rede-shell > .mk-side > .mk-side__nav,
html.rede-montando .rede-shell :is(.main-panel, .mk-main) > .content {
    visibility: hidden;
}

/* ---------- carregamento (padrão do design system) ---------- */
/* nada de spinner no meio da tela: o fundo cinza e o spinner amarelo antigos (.loading, .main-spinner) ficam
   escondidos; enquanto a tela recarrega, o conteúdo fica a 45% e não responde ao clique (rede.js liga a classe) */
.mk-ui .loading,
.mk-ui .main-spinner {
    display: none !important;
}
html.rede-is-loading .rede-shell .main-panel > .content,
html.rede-is-loading .rede-shell .mk-main > .content {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity var(--mk-fast) var(--mk-ease);
}
html.rede-is-loading .rede-entry .mk-entry__card {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity var(--mk-fast) var(--mk-ease);
}
html.rede-is-loading body {
    cursor: progress;
}
/* carregador dentro de um bloco ou diálogo: o esqueleto do kit (três linhas que brilham juntas), não a roda */
.mk-ui .loader {
    display: block !important;
    width: min(100%, 420px) !important;
    height: 60px !important;
    margin: 24px auto !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: linear-gradient(100deg, var(--mk-line) 40%, var(--mk-line-soft) 50%, var(--mk-line) 60%) fixed !important;
    background-size: 200% 100% !important;
    animation: mk-shimmer 1.5s linear infinite !important;
    -webkit-mask: repeating-linear-gradient(to bottom, #000 0 12px, transparent 12px 24px);
    mask: repeating-linear-gradient(to bottom, #000 0 12px, transparent 12px 24px);
}
@media (prefers-reduced-motion: reduce) {
    .mk-ui .loader {
        animation: none !important;
    }
}

/* ---------- conformidade com o design system (medida por tools/conformidade.cjs em todas as telas) ---------- */
/* campos: 38px, borda mk-line, canto 10, 13px/500 em qualquer formulário antigo (o CSS antigo punha 44 a 48px) */
.mk-ui .main-panel .content :is(input.form-control, select.form-control, input[type=text]:not(.browser-default):not(.select2-search__field),
    input[type=email], input[type=number], input[type=date], input[type=password], input[type=search], input[type=url],
    input[type=tel], .select-wrapper input.select-dropdown),
.mk-ui .modal :is(input.form-control, select.form-control, input[type=text]:not(.browser-default):not(.select2-search__field),
    input[type=email], input[type=number], input[type=date], .select-wrapper input.select-dropdown) {
    height: 38px !important;
    min-height: 38px !important;
    margin-bottom: 0;
    padding: 0 11px !important;
    border: 1px solid var(--mk-line) !important;
    border-radius: var(--mk-radius-control) !important;
    background-color: var(--mk-white) !important;
    box-shadow: none !important;
    color: var(--mk-ink) !important;
    font-family: var(--mk-font) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 36px !important;
}
.mk-ui .main-panel .content :is(input, select).form-control:focus,
.mk-ui .main-panel .content input:not([type=checkbox]):not([type=radio]):focus {
    border-color: var(--mk-navy) !important;
    box-shadow: 0 0 0 3px rgba(51, 54, 82, 0.14) !important;
    outline: none !important;
}
.mk-ui .main-panel .content :is(input, textarea)::placeholder {
    color: var(--mk-faint) !important;
    font-weight: 400 !important;
}
.mk-ui .main-panel .content .select2-container--default .select2-selection--single,
.mk-ui .modal .select2-container--default .select2-selection--single {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 11px !important;
    border: 1px solid var(--mk-line) !important;
    border-radius: var(--mk-radius-control) !important;
    box-shadow: none !important;
}
.mk-ui .main-panel .content .select2-container--default .select2-selection--single .select2-selection__rendered,
.mk-ui .modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0 !important;
    line-height: 36px !important;
    color: var(--mk-ink) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.mk-ui .select2-container--default .select2-selection__placeholder {
    color: var(--mk-faint) !important;
}
.mk-ui .main-panel .content .select2-container--default .select2-selection--single .select2-selection__arrow,
.mk-ui .modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}
/* rótulo de campo do Materialize (cinza #9e9e9e) */
.mk-ui .main-panel .content label:not(.mk-check):not([class*="switch"]) {
    color: var(--mk-muted);
}
/* texto dentro do cartão: o .card do Material Dashboard pinta #333 */
.mk-ui .card,
.mk-ui .card-body {
    color: var(--mk-body) !important;
}
/* fios de tabela e divisórias: tons do kit no lugar do preto translúcido */
.mk-ui table tr,
.mk-ui table td,
.mk-ui table th {
    border-color: var(--mk-line-soft) !important;
}
.mk-ui hr {
    border-color: var(--mk-line) !important;
    border-top-color: var(--mk-line) !important;
}
.mk-ui code {
    padding: 1px 5px;
    border-radius: 6px;
    background: var(--mk-soft);
    color: var(--mk-ink) !important;
}
/* vermelho e cinzas soltos em linha */
.mk-ui [style*="color: red"], .mk-ui [style*="color:red"], .mk-ui [style*="#ff0000"], .mk-ui [style*="#f00;"],
.mk-ui [style*="color: #FF0000"] {
    color: var(--mk-bad) !important;
}
.mk-ui [style*="color: #333"], .mk-ui [style*="color:#333"], .mk-ui [style*="color: #555"], .mk-ui [style*="color: #666"],
.mk-ui [style*="color: #888"], .mk-ui [style*="color: #999"] {
    color: var(--mk-muted) !important;
}
/* contador do sino: vermelho do kit */
.mk-ui .notification-badge {
    background-color: var(--mk-bad) !important;
    color: var(--mk-white) !important;
    font-size: 11px !important;
}
/* ícone de alerta amarelo sobre fundo claro: âmbar de estado */
.mk-ui .campaign-table .alert-sub-list-header i.material-icons,
.mk-ui .main-panel .content .content i.material-icons[style*="accent"],
.mk-ui .main-panel .content .content i.material-icons[style*="#FCC917"],
.mk-ui .main-panel .content .content i.material-icons[style*="#fad02c"] {
    color: var(--mk-warn) !important;
}
/* chips e etiquetas pequenas: nunca abaixo de 11px */
.mk-ui .targeting-chip,
.mk-ui .meta-ads-listing,
.mk-ui .creative-id,
.mk-ui .chip,
.mk-ui .badge {
    font-size: 11px !important;
}
/* etiqueta neutra (ex.: "Sem plano"): fundo mk-line-soft, texto mk-body */
.mk-ui .custom-tag:not([class*="custom-tag-"]),
.mk-ui .custom-tag.custom-tag-none,
.mk-ui .custom-tag.custom-tag-no-plan {
    background: var(--mk-line-soft) !important;
    color: var(--mk-body) !important;
}
/* botão pequeno das listas: 30px, canto 8 */
.mk-ui .btn.btn-smallest,
.mk-ui .btn.btn-sm {
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 11px !important;
    border-radius: var(--mk-radius-sm) !important;
    font-size: 12px !important;
    line-height: 28px !important;
}
/* botão de cor de terceiro (amarelo do Google) vira contorno */
.mk-ui .btn[style*="#f4b400"], .mk-ui .btn[style*="#F4B400"], .mk-ui .btn.btn-google-keywords,
.mk-ui .btn.google-keywords-button {
    background: var(--mk-white) !important;
    border: 1px solid var(--mk-line) !important;
    color: var(--mk-ink) !important;
}
/* grupos dentro de cartão: bloco interno (fundo suave, sem borda, sem sombra), nunca cartão dentro de cartão */
.mk-ui .card .billing-doc-row,
.mk-ui .card .targeting-group,
.mk-ui .card .investment-summary,
.mk-ui .card .change-defaults,
.mk-ui .card .alert.alert-light,
.mk-ui .card .targeting-table-wrapper {
    border: 0 !important;
    border-radius: var(--mk-radius-block) !important;
    box-shadow: none !important;
}
.mk-ui .card .billing-doc-row,
.mk-ui .card .targeting-group,
.mk-ui .card .investment-summary,
.mk-ui .card .change-defaults,
.mk-ui .card .alert.alert-light {
    background: var(--mk-soft) !important;
}
.mk-ui .creative-media,
.mk-ui .creative-media.video-wrapper {
    border: 0 !important;
    box-shadow: none !important;
}
.mk-ui .video-icon {
    box-shadow: 0 2px 8px rgba(20, 20, 43, 0.25) !important;
}
.mk-ui .report-footer {
    background: var(--mk-paper) !important;
}
/* diálogo antigo de criativo (#creative-popup): véu e sombra do kit */
.mk-ui .popup#creative-popup,
.mk-ui .popup {
    background: var(--mk-overlay) !important;
}
.mk-ui .popup .popup-content {
    border-radius: var(--mk-radius-lg) !important;
    box-shadow: var(--mk-shadow-lg) !important;
}
.mk-ui .popup .popup-content button {
    height: 38px !important;
    padding: 0 18px !important;
    border-radius: var(--mk-radius-control) !important;
}
/* aviso para ligar as notificações (push_init.js): confirmação ancorada do kit */
#mkt-push-banner {
    border: 1px solid var(--mk-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 36px rgba(51, 54, 82, 0.18) !important;
    color: var(--mk-ink) !important;
    font-size: 13px !important;
}
#mkt-push-banner button {
    height: 30px !important;
    padding: 0 11px !important;
    border-radius: var(--mk-radius-sm) !important;
    font-family: var(--mk-font) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}
#mkt-push-banner #mkt-push-later {
    border: 1px solid var(--mk-line) !important;
    background: var(--mk-white) !important;
    color: var(--mk-ink) !important;
}
/* navy: o amarelo da tela continua sendo a única ação principal */
#mkt-push-banner #mkt-push-enable {
    background: var(--mk-navy) !important;
    color: var(--mk-white) !important;
}
/* entrada: texto de apoio do cartão em mk-body (CSS antigo da tela de senha pintava #666) */
.rede-entry .mk-entry__card p {
    color: var(--mk-body) !important;
}
/* miniatura com fio cinza de outra família */
.mk-ui .main-panel .content img[style*="border"] {
    border-color: var(--mk-line) !important;
}
/* o Material Dashboard desenha o sublinhado do campo com degradê no fundo: sai (a borda do kit já delimita) */
.mk-ui .main-panel .content input.form-control:not(.datepicker),
.mk-ui .modal input.form-control:not(.datepicker),
.mk-ui .main-panel .content textarea.form-control,
.mk-ui .modal textarea.form-control {
    background-image: none !important;
}
.mk-ui .main-panel .content select.form-control,
.mk-ui .modal select.form-control {
    padding-right: 30px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23333652' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: right 11px center !important;
    background-repeat: no-repeat !important;
    background-size: 10px 6px !important;
    -webkit-appearance: none;
    appearance: none;
}
/* opções de lista e campos na fonte do kit */
.mk-ui select,
.mk-ui option,
.mk-ui input,
.mk-ui textarea,
.mk-ui button {
    font-family: var(--mk-font);
}
/* rótulos de seção e de campo das telas antigas: 12px/600 mk-muted, caixa normal */
.mk-ui .operations-section-label,
.mk-ui label#endDateLabel,
.mk-ui .main-panel .content .section-label,
.mk-ui .main-panel .content label.active {
    color: var(--mk-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
/* textos pequenos das listas de mídia e anúncios: no mínimo 11px */
.mk-ui .creative-media-placeholder span,
.mk-ui .creative-media-placeholder,
.mk-ui .meta-ads-issue {
    font-size: 11px !important;
}
/* miniatura sem mídia dentro do cartão: bloco suave, sem borda nem sombra */
.mk-ui .creative-media-placeholder {
    border: 0 !important;
    border-radius: var(--mk-radius-block) !important;
    background: var(--mk-soft) !important;
    box-shadow: none !important;
}
/* link solto em azul (Google #4285f4 e afins): link do kit, navy sublinhado */
.mk-ui .main-panel .content a[style*="4285f4"], .mk-ui .main-panel .content a[style*="4285F4"], .mk-ui .main-panel .content a[style*="color: blue"],
.mk-ui .main-panel .content .card-body p > a:not(.btn):not(.mk-btn):not(.mk-link) {
    color: var(--mk-navy) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* caixa normal em tudo que veio das telas antigas: o CSS de cada fork tem perto de 20 regras de caixa alta, algumas
   com dois IDs (#uploadForm #endDateLabel). Os três :not(#...) dão a especificidade para vencer. Ficam de fora só os
   sobretítulos do kit e dos Destaques (caixa alta permitida), o texto deles e os ícones. */
.mk-ui :not(#rede-x1):not(#rede-x2):not(#rede-x3):not(.material-icons):not([class*="fa-"]):not([class^="mk"]):not([class*=" mk"]):not(:is(.mk-eyebrow, .mk-side__badge, .mk-pinned__label, .mk-dialog__eyebrow, .mk-slide__kicker, .mk-metrics__group, .mk-entry__step, .mkr-eyebrow, .ng-eyebrow, [class*="mkd-"], [class*="mkde"]) *) {
    text-transform: none !important;
}
.mk-ui :not(#rede-x1):not(#rede-x2):not(#rede-x3):not(.material-icons):not([class*="fa-"]):not([class^="mk"]):not([class*=" mk"]):not(:is([class*="mkd-"], [class*="mkde"]) *) {
    letter-spacing: 0 !important;
}
/* botões de manutenção da lista (Atualizar campanhas, anúncios): contorno; o amarelo fica para Solicitar campanha */
.mk-ui .btn.update-btn,
.mk-ui .btn.update-google-btn,
.mk-ui .btn.update-ads-btn {
    background: var(--mk-white) !important;
    border: 1px solid var(--mk-line) !important;
    color: var(--mk-ink) !important;
    box-shadow: none !important;
}
.mk-ui .btn.update-btn:hover,
.mk-ui .btn.update-google-btn:hover,
.mk-ui .btn.update-ads-btn:hover {
    background: var(--mk-yellow-soft) !important;
    border-color: var(--mk-yellow-dark) !important;
}
/* rótulo do envio de mídia na Bibi (#uploadForm #endDateLabel tinha 0,72rem) */
.mk-ui :not(#rede-x1):not(#rede-x2):not(#rede-x3)#endDateLabel,
.mk-ui :not(#rede-x1):not(#rede-x2):not(#rede-x3)#uploadForm > label,
.mk-ui :not(#rede-x1):not(#rede-x2):not(#rede-x3)#uploadForm .d-flex > label {
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* ---------- cartão de campanha (montado pelo rede.js no modelo do painel do kit, igual nas redes) ---------- */
.mk-ui :is(.campaign-table, .campaign-alert-group) > .row.rede-cc:not(.filter-section) {
    display: block !important;
    container: rede-cc / inline-size;
    padding: 20px 24px 22px !important;
}
.mk-ui .rede-cc .rede-cc__gone:not(#rede-x1):not(#rede-x2) {
    display: none !important;
}
/* as regras antigas da linha (centralizar colunas, fio entre colunas, respiro) não valem para o cartão */
.mk-ui :is(.campaign-table, .campaign-alert-group) > .row.rede-cc > :not(.modal):not(.rede-cc__period):not(#rede-x1):not(#rede-x2) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right: 0 !important;
    text-align: left !important;
}
.mk-ui .rede-cc .rede-cc__main {
    margin: 0 4px 0 0 !important;
}
.mk-ui .rede-cc .rede-cc__soon {
    margin-left: 4px;
    color: var(--mk-body);
    font-size: 12.5px;
    font-weight: 600;
}
/* cabeçalho: nome (título do cartão), situação e ações na mesma linha */
.mk-ui .rede-cc__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 16px;
}
.mk-ui .rede-cc__title {
    flex: 1 1 240px;
    min-width: 0;
}
.mk-ui .rede-cc .rede-cc__title > *,
.mk-ui .rede-cc .rede-cc__scope > *,
.mk-ui .rede-cc .rede-cc__title .campaign-title {
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.mk-ui .rede-cc .rede-cc__title .campaign-title {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.3 !important;
}
.mk-ui .rede-cc .rede-cc__title .campaign-title i {
    font-size: 14px !important;
}
.mk-ui .rede-cc__state {
    display: flex;
    align-items: center;
    min-height: 34px;
}
/* situação: texto com ícone na cor do estado, sem pílula (StatusPill, "Situação") */
.mk-ui .campaign-table .rede-cc dd.rede-cc__status {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    color: var(--mk-body) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    white-space: nowrap;
}
.mk-ui .rede-cc .rede-cc__status > i.material-icons:not(.info-tooltip) {
    font-size: 15px !important;
    margin: 0 !important;
}
.mk-ui .campaign-table .rede-cc dd.rede-cc__status--good { color: var(--mk-good) !important; }
.mk-ui .campaign-table .rede-cc dd.rede-cc__status--warn { color: var(--mk-warn) !important; }
.mk-ui .campaign-table .rede-cc dd.rede-cc__status--bad { color: var(--mk-bad) !important; }
.mk-ui .rede-cc .rede-cc__status > i { color: inherit !important; }
.mk-ui .rede-cc .rede-cc__status > i.info-tooltip {
    color: var(--mk-faint) !important;
    font-size: 15px !important;
}
.mk-ui .rede-cc__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mk-ui .rede-cc .rede-cc__actions .action-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    width: auto !important;
    margin: 0 !important;
}
/* escopo: investimento, unidade e etiquetas numa linha de apoio */
.mk-ui .rede-cc__scope {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    margin-top: 4px;
}
.mk-ui .rede-cc .rede-cc__scope > * {
    margin: 0 !important;
}
.mk-ui .rede-cc .rede-cc__scope .campaign-investment {
    color: var(--mk-ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.mk-ui .rede-cc .rede-cc__scope :is(.campaign-business-name, .campaign-summary, .campaign-city) {
    color: var(--mk-muted) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.mk-ui .rede-cc .rede-cc__flag {
    display: inline-flex;
    padding: 2px 8px !important;
    border-radius: var(--mk-radius-pill);
    background: var(--mk-line-soft);
    color: var(--mk-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.5;
}
/* período: datas, barra de andamento e onde a campanha está */
.mk-ui .rede-cc > .rede-cc__period:not(#rede-x1):not(#rede-x2) {
    padding: 12px 18px !important;
}
.mk-ui .rede-cc__period {
    display: grid;
    grid-template-columns: auto auto minmax(120px, 1fr) auto;
    align-items: center;
    gap: 6px 16px;
    margin-top: 16px;
    padding: 12px 18px;
    border-radius: var(--mk-radius-block);
    background: var(--mk-soft);
    font-size: 13px;
}
.mk-ui .rede-cc__k {
    color: var(--mk-muted);
    font-size: 12px;
    font-weight: 600;
}
.mk-ui .rede-cc__v {
    color: var(--mk-ink);
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.mk-ui .rede-cc__bar {
    min-width: 80px;
}
.mk-ui .rede-cc__period.is-done .rede-cc__bar > span {
    background: var(--mk-line-strong);
}
.mk-ui .rede-cc__when {
    color: var(--mk-body);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
/* referências em linha (mk-refs): rótulo em apoio, valor em tinta */
.mk-ui .rede-cc__refs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin: 14px 0 0 !important;
}
.mk-ui .rede-cc__ref {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    min-width: 0;
}
.mk-ui .rede-cc .rede-cc__ref dt {
    margin: 0 !important;
    color: var(--mk-muted) !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
}
.mk-ui .rede-cc .rede-cc__ref dd {
    margin: 0 !important;
    color: var(--mk-ink) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    overflow-wrap: anywhere;
}
.mk-ui .rede-cc__extras {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 14px;
}
.mk-ui .rede-cc .rede-cc__extras > * {
    margin: 0 !important;
}
/* resultados: blocos mk-stat, quatro por linha (dois quando falta espaço), fonte uma vez em cima */
.mk-ui .rede-cc > .campaign-result {
    margin-top: 16px !important;
    padding: 0 !important;
}
.mk-ui .rede-cc .rede-cc__reshead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    margin: 0 0 10px;
}
.mk-ui .rede-cc .rede-cc__reshead:empty {
    display: none;
}
.mk-ui .rede-cc .rede-cc__reshead > * {
    flex: 0 1 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--mk-muted) !important;
    font-size: 12.5px !important;
    text-align: left !important;
}
.mk-ui .rede-cc .rede-cc__reshead a {
    color: var(--mk-navy) !important;
}
.mk-ui .rede-cc > .campaign-result > .row:has(.result-data),
.mk-ui .rede-cc > .campaign-result > div > .row:has(.result-data) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}
.mk-ui .rede-cc > .campaign-result .row + .row:not(#rede-x1) {
    margin-top: 12px !important;
}
.mk-ui .rede-cc > .campaign-result .row::before,
.mk-ui .rede-cc > .campaign-result .row::after {
    display: none !important;
}
.mk-ui .rede-cc > .campaign-result .row:has(.result-data) > [class*="col-"]:not(#rede-x1):not(#rede-x2) {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    border: 0 !important;
}
.mk-ui .rede-cc .result-data {
    height: 100%;
    margin: 0 !important;
    padding: 14px 18px !important;
}
.mk-ui .rede-cc .result-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px !important;
}
.mk-ui .rede-cc .result-header i.material-icons {
    color: var(--mk-faint) !important;
    font-size: 15px !important;
}
.mk-ui .rede-cc .result-body,
.mk-ui .rede-cc .result-body p {
    margin: 0 !important;
    color: var(--mk-ink) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
@container rede-cc (max-width: 520px) {
    .mk-ui .rede-cc > .campaign-result > .row:has(.result-data),
    .mk-ui .rede-cc > .campaign-result > div > .row:has(.result-data) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mk-ui .rede-cc__period {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 4px;
    }
    .mk-ui .rede-cc__period > .rede-cc__v {
        white-space: normal;
    }
    .mk-ui .rede-cc__bar {
        grid-column: 1 / -1;
        order: 3;
        margin: 6px 0 2px;
    }
    .mk-ui .rede-cc__when {
        order: 4;
        grid-column: 1 / -1;
    }
}
@container rede-cc (max-width: 420px) {
    .mk-ui :is(.campaign-table, .campaign-alert-group) > .row.rede-cc:not(.filter-section) {
        padding: 16px 16px 18px !important;
    }
    .mk-ui .rede-cc__actions {
        width: 100%;
    }
    .mk-ui .rede-cc .rede-cc__actions .action-grid {
        justify-content: flex-start !important;
    }
}

/* ---------- "Carregando..." escrito vira a forma do conteúdo (esqueleto do kit) ---------- */
.mk-ui .rede-skel-text:not(#rede-x1):not(#rede-x2) {
    display: inline-block !important;
    min-width: 72px;
    max-width: 100%;
    height: 0.9em;
    border-radius: 6px;
    overflow: hidden;
    color: transparent !important;
    background: linear-gradient(100deg, var(--mk-line) 40%, var(--mk-line-soft) 50%, var(--mk-line) 60%) fixed !important;
    background-size: 200% 100% !important;
    animation: mk-shimmer 1.5s linear infinite;
    vertical-align: middle;
    user-select: none;
}
.mk-ui .result-body .rede-skel-text:not(#rede-x1):not(#rede-x2),
.mk-ui .result-body.rede-skel-text:not(#rede-x1):not(#rede-x2) {
    width: 70%;
    height: 22px;
    font-size: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
    .mk-ui .rede-skel-text { animation: none; }
}
/* criativo listado dentro do cartão (envio de mídias): item da lista, sem borda própria (nada de cartão em cartão) */
.mk-ui .card :is(.row.status-positive, .row.status-negative, .row.status-waiting):not(.campaign-table .row):not(#rede-x1) {
    border: 0 !important;
    border-bottom: 1px solid var(--mk-line-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
/* links e ícones no azul do Materialize (#039be5): navy */
.mk-ui .btn-show-custom-texts,
.mk-ui .btn-show-custom-texts i,
.mk-ui .main-panel .content a:not(.btn):not(.mk-btn):not(.mk-side__item):not(.mk-side__subitem)[class*="show"] {
    color: var(--mk-navy) !important;
}
.mk-ui option {
    color: var(--mk-ink);
}
/* rótulos de campo: 12px/600 mk-muted; rótulo com caixa de marcar ao lado é texto de leitura, 13px */
.mk-ui .main-panel .content label:not(.mk-check):not(:has(input[type=checkbox], input[type=radio])) {
    font-size: 12px !important;
    font-weight: 600 !important;
}
.mk-ui .main-panel .content label:has(input[type=checkbox], input[type=radio]) {
    font-size: 13px !important;
}
.mk-ui .char-counter,
.mk-ui .main-panel .content b,
.mk-ui .main-panel .content small {
    font-size: max(11px, 1em) !important;
}
.mk-ui .char-counter {
    font-size: 11px !important;
    color: var(--mk-muted) !important;
}
/* etiqueta "badge-accent" neutra (Sem plano) e ícones de informação amarelos */
.mk-ui .badge.badge-accent {
    background: var(--mk-line-soft) !important;
    color: var(--mk-body) !important;
}
.mk-ui .main-panel .content i.material-icons[style*="accent-color"],
.mk-ui .main-panel .content i.material-icons[style*="var(--accent"] {
    color: var(--mk-warn) !important;
}
.mk-ui .mark-tech-year {
    color: var(--mk-muted) !important;
}
.mk-ui .campaigns-opt-in-toggle-thumb {
    box-shadow: 0 1px 3px rgba(20, 20, 43, 0.25) !important;
}
/* botões de manutenção das listas (todas as variantes de "Atualizar ..."): contorno */
.mk-ui .btn.update-always-on-btn,
.mk-ui .btn[class*="update-"][class*="-btn"] {
    background: var(--mk-white) !important;
    border: 1px solid var(--mk-line) !important;
    color: var(--mk-ink) !important;
    box-shadow: none !important;
}
/* textos pequenos das telas de operação (segmentação, envio em massa): 12px, o mínimo de leitura do kit */
.mk-ui .targeting-muted,
.mk-ui .mass-upload-hint,
.mk-ui .mass-upload-template-link,
.mk-ui .main-panel .content code {
    font-size: 12px !important;
}
.mk-ui .main-panel .content label:not(.mk-check):not(:has(input[type=checkbox], input[type=radio])):not(#rede-x1) {
    font-size: 12px !important;
}
/* celular: botão continua com 38px (o CSS antigo levava a 44) e, no cartão, ocupa a largura toda em vez de quebrar */
@media (max-width: 767px) {
    .mk-ui .main-panel .content .btn:not(.btn-sm):not(.btn-smallest):not(.btn-action-icon):not(.mk-seg__btn):not(#rede-x1) {
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 14px !important;
        line-height: 1.2 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}
@media (max-width: 479px) {
    .mk-ui .main-panel .content form .btn:not(.btn-sm):not(.btn-smallest):not(.btn-action-icon):not(.rede-cc .btn):not(.header-actions .btn) {
        width: 100% !important;
        white-space: normal;
    }
}

/* ---------- estados (hover, foco, clique) nas cores do kit ---------- */
/* O Material Dashboard pinta link focado de roxo (#89229b) e o Materialize, link clicado de azul (#039be5): no menu,
   o item clicado ficava roxo até a página trocar. Aqui os estados seguem o kit (Superfícies e tons, "Seleção, hover e
   foco"): foco e clique não mudam a cor; o hover é o do kit. */
.mk-ui .mk-side a.mk-side__item:is(:focus, :active, :visited):not(:hover):not(.is-active):not(#rede-x1) {
    color: rgba(255, 255, 255, 0.95) !important;
}
.mk-ui .mk-side a.mk-side__subitem:is(:focus, :active, :visited):not(:hover):not(.is-active):not(#rede-x1) {
    color: rgba(255, 255, 255, 0.72) !important;
}
.mk-ui .mk-side a.mk-side__item:hover:not(#rede-x1),
.mk-ui .mk-side a:is(.mk-side__item, .mk-side__subitem).is-active:is(:hover, :focus, :active, :visited):not(#rede-x1) {
    color: var(--mk-navy) !important;
}
.mk-ui .mk-side a.mk-side__subitem:hover:not(.is-active):not(#rede-x1) {
    color: var(--mk-yellow) !important;
}
/* links soltos do conteúdo: navy em repouso, no hover, no foco e no clique */
.mk-ui :is(.main-panel .content, .modal) a:not(.btn):not([class*="mk-"]):not([class*="btn-"]):not(.dropdown-item):is(:hover, :focus, :active):not(#rede-x1) {
    color: var(--mk-navy) !important;
}
/* botões de contorno do Material (btn-outline-primary): hover do kit, nada de roxo */
.mk-ui .btn.btn-outline-primary:is(:hover, :focus, :active, .focus):not(.active):not(#rede-x1) {
    background: var(--mk-yellow-soft) !important;
    border-color: var(--mk-yellow-dark) !important;
    color: var(--mk-ink) !important;
    box-shadow: none !important;
}
.mk-ui .btn.btn-primary:is(:hover, :focus, :active, .active):not(#rede-x1) {
    background: var(--mk-navy-hover) !important;
    border-color: var(--mk-navy-hover) !important;
    color: var(--mk-white) !important;
    box-shadow: none !important;
}
/* itens de lista suspensa (Bootstrap e Materialize): hover mk-soft, texto em tinta */
.mk-ui :is(.dropdown-menu .dropdown-item, .dropdown-menu a, .dropdown-content li, .dropdown-content li > a, .dropdown-content li > span):is(:hover, :focus, .active, .selected):not(#rede-x1) {
    background: var(--mk-soft) !important;
    color: var(--mk-ink) !important;
    box-shadow: none !important;
}
/* aba ativa: barra amarela de 3px */
.mk-ui .nav-tabs .nav-link.active:is(:hover, :focus):not(#rede-x1) {
    border-color: transparent transparent var(--mk-yellow) !important;
}
/* "ripple" do clique (Materialize/Material): tinta navy discreta no lugar do roxo e do teal */
.mk-ui .waves-ripple,
.mk-ui .ripple-container .ripple {
    background-color: rgba(51, 54, 82, 0.14) !important;
}
.mk-ui .btn.btn-neutral:is(:hover, :focus, :active, .active):not(#rede-x1),
.mk-ui .btn.btn-default:is(:hover, :focus, :active, .active):not(#rede-x1),
.mk-ui .btn.btn-secondary:is(:hover, :focus, :active, .active):not(#rede-x1) {
    background: var(--mk-yellow-soft) !important;
    border-color: var(--mk-yellow-dark) !important;
    color: var(--mk-ink) !important;
    box-shadow: none !important;
}
.mk-ui .mk-side__logo a:is(:hover, :focus, :active) {
    color: inherit !important;
}
/* botões de cor do Bootstrap/Material: info vira contorno; warning e danger (bloquear, excluir) viram o perigo do kit */
.mk-ui .btn.btn-info:not(.btn-action-icon):not(#rede-x1) {
    background: var(--mk-white) !important;
    border: 1px solid var(--mk-line) !important;
    color: var(--mk-ink) !important;
    box-shadow: none !important;
}
.mk-ui .btn:is(.btn-warning, .btn-danger):not(.btn-action-icon):not(#rede-x1) {
    background: var(--mk-white) !important;
    border: 1px solid var(--mk-bad-line) !important;
    color: var(--mk-bad) !important;
    box-shadow: none !important;
}
.mk-ui .btn:is(.btn-info, .btn-warning, .btn-danger):not(.btn-action-icon):is(:hover, :focus, :active):not(#rede-x1) {
    background: var(--mk-yellow-soft) !important;
}
.mk-ui .btn:is(.btn-warning, .btn-danger):not(.btn-action-icon):is(:hover, :focus, :active):not(#rede-x1) {
    background: var(--mk-bad-bg) !important;
}
/* faixa do alto das listas (header-actions): igual em todas as redes. Ação principal e manutenção à esquerda,
   Filtros à direita, na mesma linha; quebra só quando não cabe */
.mk-ui .header-actions:not(#rede-x1) {
    display: flex !important;
    flex-direction: row !important; /* a Domino's empilhava em coluna centralizada no celular */
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px 12px !important;
    width: 100% !important;
    margin: 0 0 16px !important;
}
.mk-ui .header-actions > :is(.left-actions, .right-actions):not(#rede-x1) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    margin: 0 !important;
}
.mk-ui .header-actions > .right-actions:not(#rede-x1) {
    margin-left: auto !important;
}
.mk-ui .header-actions .btn:not(#rede-x1) {
    width: auto !important;
    margin: 0 !important;
}
.mk-ui .rede-cc__period {
    text-align: left !important;
}
.mk-ui .rede-cc__period > .rede-cc__bar {
    width: 100%;
    justify-self: stretch;
}
/* recorte da lista: seletor segmentado (mk-seg) e, à direita, a exportação em contorno */
.mk-ui .campaign-scope-tabs.rede-seg-ok:not(#rede-x1) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px 12px !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.mk-ui .campaign-scope-tabs .rede-seg .btn.mk-seg__btn:not(#rede-x1) {
    width: auto !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--mk-muted) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}
.mk-ui .campaign-scope-tabs .rede-seg .btn.mk-seg__btn:hover:not(#rede-x1) {
    color: var(--mk-ink) !important;
}
.mk-ui .campaign-scope-tabs .rede-seg .btn.mk-seg__btn.is-active:not(#rede-x1) {
    background: var(--mk-white) !important;
    color: var(--mk-ink) !important;
    box-shadow: 0 1px 3px rgba(51, 54, 82, 0.16) !important;
}
.mk-ui .campaign-scope-tabs.rede-seg-ok > #download-data:not(#rede-x1),
.mk-ui .campaign-scope-tabs.rede-seg-ok > .btn-success:not(#rede-x1) {
    margin: 0 0 0 auto !important;
    background: var(--mk-white) !important;
    border: 1px solid var(--mk-line) !important;
    color: var(--mk-ink) !important;
    box-shadow: none !important;
}

/* gráfico de resultados (Omo, results-chart.js): filtros em seletor segmentado e dois gráficos empilhados */
.mk-ui .campaign-result #chart-container.chart-ready:not(#rede-x1) {
    display: block !important;
    height: auto !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
}
.mk-ui .campaign-result #chart-container > div:not(#rede-x1) {
    border: 0 !important;
}
.mk-ui .rede-cc > .campaign-result:not(#rede-x1):not(#rede-x2) {
    margin-top: 18px !important;
}
.mk-ui .campaign-result .rc-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0 0 12px;
}
.mk-ui .campaign-result .rc-seg .mk-seg__btn {
    font-family: var(--mk-font);
}
.mk-ui .campaign-result .rc-panels {
    display: flex;
    flex-direction: column;
}
.mk-ui .campaign-result .rc-panel + .rc-panel {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--mk-line-soft);
}
.mk-ui .campaign-result .rc-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 6px;
}
.mk-ui .campaign-result .rc-panel__name {
    color: var(--mk-ink);
    font-size: 13px;
    font-weight: 700;
}
.mk-ui .campaign-result .rc-panel__total {
    color: var(--mk-ink);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mk-ui .campaign-result .rc-panel__plot {
    position: relative;
    height: 150px;
}
.mk-ui .campaign-result .rc-panel--metric .rc-panel__plot {
    height: 170px;
}

/* o Materialize pinta qualquer <button> focado de verde-água (#2ab7a9) e isso vence as classes do kit: foco
   mantém o fundo de repouso de cada botão (o anel de foco do kit continua no :focus-visible) */
.mk-ui :is(.mk-topbar__toggle, .mk-iconbtn, .mk-btn--ghost, .mk-btn--danger):focus:not(:hover) {
    background-color: var(--mk-white) !important;
}
.mk-ui .mk-btn:not(.mk-btn--ghost):not(.mk-btn--dark):not(.mk-btn--danger):focus:not(:hover):not([disabled]) {
    background-color: var(--mk-yellow) !important;
}
.mk-ui .mk-btn--dark:focus:not(:hover) {
    background-color: var(--mk-navy) !important;
}
.mk-ui :is(.mk-seg__btn, .mk-textbtn, .mk-side__item, .mk-side__logout):focus:not(:hover):not(.is-active) {
    background-color: transparent !important;
}
.mk-ui .mk-side .mk-side__logout:focus:not(:hover) {
    background-color: var(--mk-white) !important;
}
/* links da entrada: navy em todos os estados; o logo da rede não muda */
.rede-entry a.mk-link:is(:hover, :focus, :active) {
    color: var(--mk-navy) !important;
}
.rede-entry a.rede-entry__brand:is(:hover, :focus, :active) {
    color: inherit !important;
}
.mk-ui .lever,
.mk-ui .meta-ads-switch-track {
    color: var(--mk-muted) !important;
}
/* Select2 de várias escolhas: 38px como o campo do kit, fichas e busca na mesma linha (as margens do Select2 e do
   Materialize levavam a 63px) */
.mk-ui .select2-container--default .select2-selection--multiple:not(#rede-x1) {
    display: flex !important;
    align-items: center !important;
    min-height: 38px !important;
    height: auto !important;
    padding: 3px 30px 3px 8px !important;
}
.mk-ui .select2-container--default .select2-selection--multiple .select2-selection__rendered:not(#rede-x1) {
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.mk-ui .select2-container--default .select2-selection--multiple .select2-selection__choice:not(#rede-x1) {
    margin: 0 !important;
    padding: 2px 8px !important;
    line-height: 1.5 !important;
}
.mk-ui .select2-container--default .select2-search--inline:not(#rede-x1),
.mk-ui .select2-container--default .select2-search--inline .select2-search__field:not(#rede-x1) {
    height: 28px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--mk-ink) !important;
    font-family: var(--mk-font) !important;
    font-size: 13px !important;
    line-height: 28px !important;
}
.mk-ui .select2-container--default .select2-search--inline .select2-search__field::placeholder {
    color: var(--mk-muted) !important;
}
/* qualquer lista nativa do conteúdo: a seta do kit (navy, 10px) no lugar das setas antigas */
.mk-ui .main-panel .content select:not([multiple]):not(.select2-hidden-accessible):not(#rede-x1) {
    padding-right: 30px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23333652' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: right 11px center !important;
    background-repeat: no-repeat !important;
    background-size: 10px 6px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
/* imagem que não carregou (rede.js marca): mídia indisponível do kit, nunca o ícone quebrado nem o alt cru */
.mk-ui img.rede-img-quebrada {
    visibility: hidden;
}
.mk-ui .rede-img-falta {
    position: relative;
    background: var(--mk-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a0a4bd' d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3 3.5-4.5 4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E") center / 22px no-repeat !important;
    border-radius: var(--mk-radius-sm);
}
/* filtros em cartão (Anúncios Meta, Segmentação, Base de unidades): grade de colunas iguais, para os campos ficarem
   alinhados em coluna seja quantos forem (filial e regional aparecem só em algumas redes) */
.mk-ui .card .row:has(> [class*="col-"] > .modern-form-group):not(#rede-x1) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 24px;
    margin: 0 !important;
}
.mk-ui .card .row:has(> [class*="col-"] > .modern-form-group)::before,
.mk-ui .card .row:has(> [class*="col-"] > .modern-form-group)::after {
    display: none !important;
}
.mk-ui .card .row:has(> [class*="col-"] > .modern-form-group) > [class*="col-"]:not(#rede-x1) {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}
.mk-ui .card .row:has(> [class*="col-"] > .modern-form-group) .modern-form-group:not(#rede-x1) {
    margin: 0 !important;
}
/* "Baixar dados" na faixa do recorte: mesmo tamanho dos outros botões da linha (38px, 13px/700) */
.mk-ui .campaign-scope-tabs.rede-seg-ok > :is(#download-data, .btn-success, .btn):not(.mk-seg__btn):not(#rede-x1) {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 18px !important;
    border-radius: var(--mk-radius-control) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
/* respiro interno dos cartões de página: 22 x 24 x 24 (kit), para títulos e campos de cartões vizinhos
   começarem na mesma margem (os forks misturavam 20/25 e 14/20) */
.mk-ui .main-panel .content .card:not(.card-tables):not(:has(.campaign-table)):not(.rede-cc) > .card-header:not(#rede-x1) {
    padding: 22px 24px 0 !important;
}
.mk-ui .main-panel .content .card:not(.card-tables):not(:has(.campaign-table)):not(.rede-cc) > .card-header:last-child:not(#rede-x1) {
    padding-bottom: 24px !important;
}
.mk-ui .main-panel .content .card:not(.card-tables):not(:has(.campaign-table)):not(.rede-cc) > .card-body:not(#rede-x1) {
    padding: 22px 24px 24px !important;
}
.mk-ui .main-panel .content .card:not(.card-tables):not(:has(.campaign-table)):not(.rede-cc) > .card-header + .card-body:not(#rede-x1) {
    padding-top: 16px !important;
}
/* seção dentro do formulário de filtro (Métricas): respiro acima do fio */
.mk-ui .card .meta-ads-metrics:not(#rede-x1) {
    margin-top: 18px !important;
    padding-top: 16px !important;
}
/* formulários dentro de cartão (Configurações, solicitações, operação): as linhas do Bootstrap perderam a margem
   negativa e as colunas ficavam 15px para dentro da margem do cartão. Linha de campos vira grade com o mesmo número de
   colunas do desenho original (col-6 = 2, col-4 = 3, col-3 = 4), começando na margem; no celular, uma coluna */
.mk-ui .card form .row:has(> [class*="col-"] > :is(.form-group, .bmd-form-group, .modern-form-group)):not(#rede-x1) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    margin: 0 0 14px !important;
}
.mk-ui .card form .row:has(> :is(.col-lg-4, .col-md-4) > :is(.form-group, .bmd-form-group, .modern-form-group)):not(#rede-x1) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mk-ui .card form .row:has(> :is(.col-lg-3, .col-md-3) > :is(.form-group, .bmd-form-group, .modern-form-group)):not(#rede-x1) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mk-ui .card form .row:has(> :is(.col-lg-12, .col-md-12) > :is(.form-group, .bmd-form-group, .modern-form-group)):not(:has(> :is(.col-lg-6, .col-md-6, .col-lg-4, .col-md-4))):not(#rede-x1) {
    grid-template-columns: minmax(0, 1fr);
}
.mk-ui .card form .row:has(> [class*="col-"] > :is(.form-group, .bmd-form-group, .modern-form-group))::before,
.mk-ui .card form .row:has(> [class*="col-"] > :is(.form-group, .bmd-form-group, .modern-form-group))::after {
    display: none !important;
}
.mk-ui .card form .row:has(> [class*="col-"] > :is(.form-group, .bmd-form-group, .modern-form-group)) > [class*="col-"]:not(#rede-x1) {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}
.mk-ui .card form .row > [class*="col-"] > :is(.form-group, .bmd-form-group):not(#rede-x1) {
    margin: 0 !important;
    padding-top: 0 !important;
}
.mk-ui .card form .row > [class*="col-"] > :is(.form-group, .bmd-form-group) > label:not(#rede-x1) {
    position: static !important;
    display: block !important;
    margin: 0 0 6px !important;
    transform: none !important;
}
@media (max-width: 767px) {
    .mk-ui .card form .row:has(> [class*="col-"] > :is(.form-group, .bmd-form-group, .modern-form-group)):not(#rede-x1) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}
/* linhas do formulário sem campo (botão e texto lado a lado) seguem a mesma grade e margem */
.mk-ui .card form .row:has(> [class*="col-"]):not(:has(> [class*="col-"] > :is(.form-group, .bmd-form-group, .modern-form-group))):not(#rede-x1) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 24px;
    margin: 0 0 14px !important;
}
.mk-ui .card form .row:has(> [class*="col-"]):not(:has(> [class*="col-"] > :is(.form-group, .bmd-form-group, .modern-form-group)))::before,
.mk-ui .card form .row:has(> [class*="col-"]):not(:has(> [class*="col-"] > :is(.form-group, .bmd-form-group, .modern-form-group)))::after {
    display: none !important;
}
.mk-ui .card form .row:has(> [class*="col-"]):not(:has(> [class*="col-"] > :is(.form-group, .bmd-form-group, .modern-form-group))) > [class*="col-"]:not(#rede-x1) {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}
/* campo ocupa a coluna inteira */
.mk-ui .card form .row > [class*="col-"] :is(input.form-control, select.form-control, textarea.form-control, .select2-container):not(#rede-x1) {
    width: 100% !important;
    max-width: 100% !important;
}
/* telas de operação: o envoltório col-md-11 centralizado deixava a tela mais estreita que as outras */
.mk-ui .main-panel .content .row > .col-md-11.ml-auto.mr-auto:not(#rede-x1) {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* lista Select2 de uma escolha com a mesma seta e o mesmo texto da lista nativa do kit */
.mk-ui .main-panel .content .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}
.mk-ui .main-panel .content .select2-container--default .select2-selection--single .select2-selection__arrow:not(#rede-x1) {
    width: 20px !important;
    right: 9px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23333652' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px 6px no-repeat !important;
}
.mk-ui .card .modern-form-group .select2-selection__placeholder:not(#rede-x1) {
    color: var(--mk-ink) !important;
    font-weight: 500 !important;
}
/* Alterações do targeting: os campos aparecem quando o bloco é marcado (só o marcado muda); título com respiro */
.mk-ui .targeting-group:not(:has(.group-toggle:checked)) > .targeting-group-fields:not(#rede-x1) {
    display: none !important;
}
.mk-ui .targeting-group > .targeting-group-toggle:not(#rede-x1) {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    color: var(--mk-ink) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer;
}
.mk-ui .targeting-group:has(.group-toggle:checked) > .targeting-group-toggle:not(#rede-x1) {
    margin-bottom: 12px !important;
}
.mk-ui .rede-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}
/* célula curta de tabela (idade, datas, números) não quebra */
.mk-ui td.rede-curta {
    white-space: nowrap !important;
}

/* lista de várias escolhas compacta (multiselect.js): a seta de borda (triângulo) vira a seta do kit */
.mk-ui .select2-container--default .select2-selection--multiple.ms-compact::before {
    display: none !important;
}
.mk-ui .select2-container--default .select2-selection--multiple.ms-compact:not(#rede-x1) {
    background: var(--mk-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23333652' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 11px center / 10px 6px no-repeat !important;
}
.mk-ui .select2-container--default .select2-selection--multiple.ms-compact .select2-selection__rendered::before {
    color: var(--mk-ink) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.mk-ui .select2-container--default .select2-selection--multiple.ms-compact .select2-selection__placeholder:not(#rede-x1) {
    color: var(--mk-ink) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
/* campo de arquivo das telas antigas: área de envio do kit (mk-dropzone) em faixa, com arrastar e soltar (rede.js) */
.mk-ui .rede-drop {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 12px 16px;
    border: 2px dashed var(--mk-line-strong);
    border-radius: var(--mk-radius-block);
    background: var(--mk-paper);
    cursor: pointer;
    transition: border-color var(--mk-fast) var(--mk-ease), background-color var(--mk-fast) var(--mk-ease);
}
.mk-ui .rede-drop:hover,
.mk-ui .rede-drop.is-over,
.mk-ui .rede-drop:focus-within {
    border-color: var(--mk-navy);
    background: var(--mk-yellow-soft);
}
.mk-ui .rede-drop__icon {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--mk-muted);
}
.mk-ui .rede-drop__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mk-ui .rede-drop__action {
    color: var(--mk-body);
    font-size: 12.5px;
    font-weight: 600;
}
.mk-ui .rede-drop__hint {
    color: var(--mk-muted);
    font-size: 11.5px;
    font-weight: 500;
    overflow-wrap: anywhere;
}
.mk-ui .rede-drop.has-files .rede-drop__action {
    color: var(--mk-ink);
}
.mk-ui .rede-drop > input[type=file] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
}
/* ajuda longa recolhida ("Como funciona"), no lugar do parágrafo fixo */
.mk-ui details.rede-ajuda {
    margin-top: 8px;
    color: var(--mk-muted);
    font-size: 12.5px;
    line-height: 1.5;
}
.mk-ui details.rede-ajuda > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mk-navy);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.mk-ui details.rede-ajuda > summary::-webkit-details-marker {
    display: none;
}
.mk-ui details.rede-ajuda > summary::after {
    content: "";
    width: 10px;
    height: 6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23333652' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px 6px no-repeat;
    transition: transform var(--mk-fast) var(--mk-ease);
}
.mk-ui details.rede-ajuda[open] > summary::after {
    transform: rotate(180deg);
}
.mk-ui details.rede-ajuda > .mass-upload-hint {
    margin-top: 6px !important;
}
.mk-ui label.rede-drop:not(#rede-x1):not(#rede-x2) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 !important;
    color: var(--mk-body) !important;
    font-weight: 600 !important;
}
.mk-ui details.rede-ajuda:not(#rede-x1) {
    margin: 8px 0 16px !important;
}
.mk-ui details.rede-ajuda > summary:not(#rede-x1) {
    color: var(--mk-navy) !important;
    font-size: 12.5px !important;
}
/* botão desabilitado: o mesmo botão esmaecido (kit), nunca trocado por cinza */
.mk-ui .btn:is(:disabled, .disabled, [disabled]):not(#rede-x1) {
    opacity: 0.55 !important;
    filter: none !important;
    cursor: default !important;
}
.mk-ui .btn.btn-results:is(:disabled, .disabled, [disabled]):not(#rede-x1) {
    background: var(--mk-navy) !important;
    border-color: var(--mk-navy) !important;
    color: var(--mk-white) !important;
}

/* telas de operação: a ação do cartão é o botão amarelo, à direita (Button: principal à direita; navy só em fluxo de
   passos). "Pré-visualizar"/"Simular" ficam em contorno quando o cartão tem a ação final (btn-pay: Aplicar troca) */
.mk-ui :is(.targeting-card, .mass-upload-card, .card):not(:has(.btn-pay)) :is(.btn.btn-results, .btn.btn-preview):not(.btn-sm):not(.btn-smallest):not(.btn-action-icon):not(#rede-x1),
.mk-ui :is(.targeting-card, .mass-upload-card, .card) .btn.btn-pay:not(.btn-action-icon):not(#rede-x1) {
    background: var(--mk-yellow) !important;
    border: 1px solid var(--mk-yellow) !important;
    color: var(--mk-ink) !important;
    box-shadow: none !important;
}
.mk-ui :is(.targeting-card, .mass-upload-card, .card):not(:has(.btn-pay)) :is(.btn.btn-results, .btn.btn-preview):not(.btn-sm):not(.btn-smallest):not(.btn-action-icon):not(:disabled):hover:not(#rede-x1),
.mk-ui :is(.targeting-card, .mass-upload-card, .card) .btn.btn-pay:not(.btn-action-icon):not(:disabled):hover:not(#rede-x1) {
    background: var(--mk-navy) !important;
    border-color: var(--mk-navy) !important;
    color: var(--mk-white) !important;
}
.mk-ui :is(.targeting-card, .mass-upload-card, .card):has(.btn-pay) .btn.btn-preview:not(.btn-action-icon):not(#rede-x1) {
    background: var(--mk-white) !important;
    border: 1px solid var(--mk-line) !important;
    color: var(--mk-ink) !important;
}
.mk-ui .btn.btn-results.is-disabled-look:not(#rede-x1),
.mk-ui :is(.targeting-card, .mass-upload-card, .card) :is(.btn.btn-results, .btn.btn-pay):is(:disabled, .disabled):not(#rede-x1) {
    background: var(--mk-yellow) !important;
    border-color: var(--mk-yellow) !important;
    color: var(--mk-ink) !important;
}
/* grupo de ações à direita, secundário antes do principal */
.mk-ui :is(.targeting-actions, .operations-actions):not(#rede-x1) {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end !important;
    align-items: center;
    gap: 10px !important;
}
/* Base de unidades: a ajuda vem antes do botão, que fica à direita como nas outras telas */
.mk-ui .card-body:has(> form.units-base-read):not(#rede-x1) {
    display: flex !important;
    flex-direction: column !important;
}
.mk-ui .card-body:has(> form.units-base-read) > .targeting-hint:first-of-type:not(#rede-x1) {
    order: -1;
    margin: 0 0 14px !important;
}
/* esconder sempre vence: as regras de layout acima usam display com !important e não podem reexibir o que o JS das
   telas antigas escondeu (style="display: none" do jQuery, .d-none, [hidden]). A classe .hidden fica de fora: os
   resultados da campanha nascem com ela e o jQuery os mostra com .show() sem tirá-la. Quatro IDs na negação para
   vencer qualquer regra da ponte */
.mk-ui :is([style*="display: none"], [style*="display:none"], .d-none, [hidden]):not(#rede-h1):not(#rede-h2):not(#rede-h3):not(#rede-h4) {
    display: none !important;
}

/* título de cartão quebra linha (no celular passava da borda) */
.mk-ui .card :is(.card-title, .card-category):not(#rede-x1) {
    white-space: normal !important;
    overflow-wrap: break-word;
}
.mk-ui .card-header.targeting-list-header:not(#rede-x1) {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.mk-ui .card-header.targeting-list-header > :first-child {
    flex: 1 1 260px;
    min-width: 0;
}
/* painel de filtro das listas (filter-section): rótulo à esquerda, campo na largura da coluna, ações à direita */
.mk-ui .filter-section label:not(#rede-x1),
.mk-ui .filter-report label:not(#rede-x1) {
    display: block;
    text-align: left !important;
    margin: 0 0 6px !important;
}
.mk-ui :is(.filter-section, .filter-report) :is(.select2-container, input.form-control, input.modern-input, select):not(#rede-x1) {
    width: 100% !important;
    max-width: 100% !important;
}
.mk-ui :is(.filter-section, .filter-report) [class*="col-"]:has(> .btn):not(#rede-x1),
.mk-ui :is(.filter-section, .filter-report) :is(.filter-actions, .filter-buttons):not(#rede-x1) {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end !important;
    align-items: flex-end;
    gap: 10px;
    text-align: right !important;
}
.mk-ui :is(.filter-section, .filter-report) .row:has(> [class*="col-"]):not(#rede-x1) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 24px;
    margin: 0 !important;
    width: 100% !important;
}
.mk-ui :is(.filter-section, .filter-report) .row:has(> [class*="col-"])::before,
.mk-ui :is(.filter-section, .filter-report) .row:has(> [class*="col-"])::after {
    display: none !important;
}
.mk-ui :is(.filter-section, .filter-report) .row > [class*="col-"]:not(#rede-x1) {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* campo com 100% de largura não pode somar respiro e borda (content-box levava a passar da coluna) */
.mk-ui :is(input, select, textarea, .select2-selection):not([type=checkbox]):not([type=radio]) {
    box-sizing: border-box !important;
}

.mk-ui .mass-upload-template-link {
    white-space: normal !important;
    overflow-wrap: anywhere;
}
/* dados do cartão fiscal: à esquerda, em grade (a regra antiga das mídias centralizava no celular) */
.mk-ui .billing-card .creative-meta:not(#rede-x1),
.mk-ui .card:has(.billing-doc-row) .creative-meta:not(#rede-x1) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
    justify-content: start !important;
    gap: 10px 28px;
    margin: 12px 0 14px !important;
    text-align: left !important;
}
.mk-ui :is(.billing-card, .card:has(.billing-doc-row)) .creative-meta > div:not(#rede-x1) {
    text-align: left !important;
    margin: 0 !important;
}
/* botão do documento fiscal: contorno no tamanho do texto, à esquerda, igual em todas as redes */
.mk-ui .billing-doc-row .btn:not(#rede-x1) {
    width: auto !important;
    max-width: none !important;
    align-self: flex-start;
}

/* entrada com dois logos (Marktech + rede): cabem na largura e quebram para baixo no celular */
/* Marktech e logo da rede empilhados, no tamanho do logo único das outras redes Kumon (lado a lado passava da
   tela no celular e ficava maior que nas outras) */
.rede-entry .rede-entry__brand:not(#rede-x1):has(img.rede-entry__client) {
    flex-direction: column;
    gap: 10px;
    max-width: 100%;
}
.rede-entry .rede-entry__brand:has(img.rede-entry__client) img:not(#rede-x1) {
    max-width: min(124px, 100%);
    max-height: 28px;
    height: auto;
}

/* ---------- sessão mídias, relatórios e formulários ---------- */
/* Mídias personalizadas (all_custom_creatives, all_promoted_creatives): a lista vira uma grade de cartões de mídia.
   Cada cartão: prévia no alto (bloco suave, formato numa etiqueta escura por cima), nome, unidade, datas,
   etiquetas e situação, e as ações (botões de ícone) no rodapé. Vale para uma prévia (Kumon) ou duas (Story e Feed).
   O #rede-midias só sobe a especificidade acima das regras gerais da lista de campanhas. */
.mk-ui .campaign-table:not(#rede-midias):has(> .row > .creative-media-col) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
    gap: 16px;
    width: 100% !important;
    margin: 0 !important;
}
.mk-ui .campaign-table:not(#rede-midias):has(> .row > .creative-media-col + .creative-media-col) {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
}
/* "Sem criativos" e qualquer aviso solto ocupam a linha inteira */
.mk-ui .campaign-table:not(#rede-midias):has(> .row > .creative-media-col) > :not(.row) {
    grid-column: 1 / -1;
}
.mk-ui .campaign-table:not(#rede-midias) > .row:has(> .creative-media-col) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr auto;
    gap: 0 8px !important;
    align-items: stretch;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 12px 12px 14px !important;
    background: var(--mk-white) !important;
}
/* base das colunas (especificidade baixa de propósito: as regras de cada parte vêm depois e mandam) */
.mk-ui .campaign-table:not(#rede-midias) > .row > :where(div[class*="col-"]) {
    order: 0;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
/* prévia: bloco suave de altura fixa; a imagem cabe inteira (Story e Feed lado a lado na mesma altura) */
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-media-col {
    grid-row: 1;
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 220px;
    border-radius: var(--mk-radius-block) !important;
    background: var(--mk-soft) !important;
    overflow: hidden;
}
.mk-ui .campaign-table:not(#rede-midias) > .row:not(:has(> .creative-media-col + .creative-media-col)) > .creative-media-col {
    grid-column: 1 / -1;
}
/* Story e Feed: cada um na sua coluna (a regra da lista estreita põe toda coluna na 1 e as prévias se sobrepunham) */
.mk-ui .campaign-table:not(#rede-midias) > .row:has(> .creative-media-col + .creative-media-col) > .creative-media-col:nth-child(1 of .creative-media-col) {
    grid-column: 1;
}
.mk-ui .campaign-table:not(#rede-midias) > .row:has(> .creative-media-col + .creative-media-col) > .creative-media-col:nth-child(2 of .creative-media-col) {
    grid-column: 2;
}
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-media-col > dt {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    margin: 0 !important;
    padding: 2px 8px;
    border-radius: var(--mk-radius-pill);
    background: var(--mk-white);
    color: var(--mk-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.5;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap;
    pointer-events: none;
}
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-media-col > .creative-media {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-media-col img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain;
    color: transparent !important;
    font-size: 0 !important;
}
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-media-col > .creative-media-placeholder {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    padding: 12px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--mk-muted) !important;
    font-size: 12px !important;
}
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-media-col > .creative-media-placeholder span {
    font-size: 12px !important;
}
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-media-col > .creative-media-placeholder i.material-icons {
    color: var(--mk-faint) !important;
    font-size: 22px !important;
}
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-media-col .video-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(20, 20, 43, 0.72) !important;
    box-shadow: none !important;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-media-col .video-icon i.material-icons {
    color: var(--mk-white) !important;
    font-size: 26px !important;
}
/* dados da mídia: à esquerda, de cima para baixo */
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-info {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 14px 4px 0 !important;
    text-align: left !important;
}
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-info .campaign-title {
    margin: 0 !important;
    color: var(--mk-ink) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    overflow-wrap: anywhere;
}
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-info .creative-id {
    margin: -4px 0 0 !important;
    color: var(--mk-muted) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-info .campaign-business-name {
    margin: 0 !important;
    color: var(--mk-muted) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    text-align: left !important;
    overflow-wrap: anywhere;
}
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-info .creative-meta {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 4px 20px !important;
    margin: 2px 0 !important;
}
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-info .creative-meta dt {
    margin: 0 0 1px !important;
    font-size: 12px !important;
}
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-info .creative-meta dd {
    margin: 0 !important;
    color: var(--mk-ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
}
/* etiquetas de evento, curso e plano: mk-tag neutra */
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-info .event-tag {
    display: inline-flex;
    align-items: center;
    width: auto !important;
    padding: 2px 8px !important;
    border: 0 !important;
    border-radius: var(--mk-radius-pill) !important;
    background: var(--mk-line-soft) !important;
    color: var(--mk-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    cursor: default;
}
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-info div:has(> .event-tag) {
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* situação: etiqueta do kit (mk-tag--good, --warn, --bad; inativa neutra) */
.mk-ui .campaign-table:not(#rede-midias) > .row .status-tag {
    display: inline-flex !important;
    align-items: center;
    gap: 5px !important;
    padding: 2px 8px !important;
    border: 0 !important;
    border-radius: var(--mk-radius-pill) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
}
.mk-ui .campaign-table:not(#rede-midias) > .row .status-tag i.material-icons {
    color: inherit !important;
    font-size: 13px !important;
}
.mk-ui .campaign-table:not(#rede-midias) > .row .status-tag-active { background: var(--mk-good-bg) !important; color: var(--mk-good) !important; }
.mk-ui .campaign-table:not(#rede-midias) > .row .status-tag-waiting { background: var(--mk-warn-bg) !important; color: var(--mk-warn) !important; }
.mk-ui .campaign-table:not(#rede-midias) > .row .status-tag-rejected { background: var(--mk-bad-bg) !important; color: var(--mk-bad) !important; }
.mk-ui .campaign-table:not(#rede-midias) > .row .status-tag-inactive { background: var(--mk-line-soft) !important; color: var(--mk-body) !important; }
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-info .info-tooltip {
    color: var(--mk-muted) !important;
    font-size: 16px !important;
}
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-info .creative-rejection-reason {
    margin: 0 !important;
    color: var(--mk-body) !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
}
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-info div:has(> .btn) {
    margin-top: 4px !important;
}
/* ações no pé do cartão, sem fio separador (o fio era o "botões em cima da linha"): botões de ícone em fila, à
   esquerda, logo depois da situação; o nome usa a largura toda (com as ações na linha dele, o nome quebrava a cada
   palavra nos cartões com 4 ou 5 ações) */
.mk-ui .campaign-table:not(#rede-midias) > .row > .btns-wrapper:not(.d-none):not(.mass-approval-wrapper) {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: start !important;
    align-self: end !important;
    width: auto !important;
    height: auto !important;
    margin: 14px 0 0 4px !important;
    padding: 0 !important;
    border: 0 !important;
}
.mk-ui .campaign-table:not(#rede-midias) > .row > .btns-wrapper .action-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: auto !important;
    margin: 0 !important;
}
.mk-ui .campaign-table:not(#rede-midias) > .row > .btns-wrapper:not(:has(.btn-action-icon, input, .btn)) {
    display: none !important;
}
/* aprovação em massa: a faixa com a caixa de marcar fica embaixo dos dados, sem fio */
.mk-ui .campaign-table:not(#rede-midias) > .row > .mass-approval-wrapper:not(.d-none) {
    grid-column: 1 / -1;
    grid-row: 4;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding: 0 4px !important;
    border: 0 !important;
}
/* aprovação em massa: rótulo de leitura e caixa de marcar, na mesma faixa das ações */
.mk-ui .campaign-table:not(#rede-midias) > .row > .mass-approval-wrapper:not(.d-none) label {
    margin: 0 !important;
    color: var(--mk-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.mk-ui .campaign-table:not(#rede-midias) > .row > .mass-approval-wrapper input.mass-approval-checkbox {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--mk-navy);
}
/* poucas mídias (uma ou duas): a grade preenche a linha e, com espaço, o cartão fica deitado (prévia à esquerda,
   dados à direita), em vez de um cartão em 1/4 da largura e o resto vazio */
.mk-ui .campaign-table:not(#rede-midias):has(> .row > .creative-media-col):not(:has(> .row ~ .row ~ .row)) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)) !important;
}
@container rede-campanhas (min-width: 640px) {
    .mk-ui .campaign-table:not(#rede-midias):not(:has(> .row ~ .row ~ .row)) > .row:has(> .creative-media-col) {
        grid-template-columns: 220px minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        column-gap: 18px !important;
    }
    .mk-ui .campaign-table:not(#rede-midias):not(:has(> .row ~ .row ~ .row)) > .row:has(> .creative-media-col + .creative-media-col) {
        grid-template-columns: 170px 170px minmax(0, 1fr);
        column-gap: 8px !important;
    }
    .mk-ui .campaign-table:not(#rede-midias):not(:has(> .row ~ .row ~ .row)) > .row > .creative-media-col {
        grid-row: 1 / span 3;
    }
    .mk-ui .campaign-table:not(#rede-midias):not(:has(> .row ~ .row ~ .row)) > .row:not(:has(> .creative-media-col + .creative-media-col)) > .creative-media-col {
        grid-column: 1;
    }
    .mk-ui .campaign-table:not(#rede-midias):not(:has(> .row ~ .row ~ .row)) > .row > .creative-info {
        grid-column: -2 / -1;
        grid-row: 1;
        padding: 4px 4px 0 10px !important;
    }
    .mk-ui .campaign-table:not(#rede-midias):not(:has(> .row ~ .row ~ .row)) > .row > .btns-wrapper:not(.d-none):not(.mass-approval-wrapper) {
        grid-column: -2 / -1;
        grid-row: 2;
        margin: 14px 0 0 10px !important;
    }
    .mk-ui .campaign-table:not(#rede-midias):not(:has(> .row ~ .row ~ .row)) > .row > .mass-approval-wrapper:not(.d-none) {
        grid-column: -2 / -1;
        grid-row: 3;
        padding-left: 10px !important;
    }
}
/* bordas: a faixa do alto (total e botões) e a grade começam e terminam nas bordas do conteúdo (o .show-filters
   tinha 15px de cada lado e a coluna em volta da grade de "Minhas mídias" também) */
.mk-ui .main-panel:has(.creative-media-col) .show-filters:not(#rede-x1):not(#rede-midias) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.mk-ui .main-panel:has(.creative-media-col) .show-filters .btn:not(#rede-x1):not(#rede-midias) {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.mk-ui .bucket-form.card:has(.campaign-table > .row > .creative-media-col) > .card-body > [class*="col-"]:not(#rede-x1):not(#rede-midias) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* respiro entre a faixa do alto e a grade (encostavam: 8px) */
.mk-ui .main-panel:has(.creative-media-col) .show-filters:not(#rede-x1):not(#rede-midias) {
    margin-bottom: 16px !important;
}
/* envio de mídias: "recomendamos os formatos..." e "ao ativar mais de 5 mídias..." são aviso (âmbar), não falha */
.mk-ui .upload-format-notice:not(#rede-x1) {
    background: var(--mk-warn-bg) !important;
    color: var(--mk-warn) !important;
}
/* total de mídias: bloco de número do kit (rótulo 12px/600 em cima, número 22px/700 embaixo), cartão da página */
.mk-ui .media-total-chip:not(#rede-x1) {
    display: inline-grid !important;
    gap: 2px;
    padding: 14px 18px !important;
    border: 1px solid var(--mk-line) !important;
    border-radius: var(--mk-radius-lg) !important;
    background: var(--mk-white) !important;
    box-shadow: var(--mk-shadow-card) !important;
    color: var(--mk-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: left !important;
}
.mk-ui .media-total-chip b:not(#rede-x1) {
    color: var(--mk-ink) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    font-variant-numeric: tabular-nums;
}
/* paginação das mídias: botões de 34px como o mk-iconbtn; a página atual fica navy */
.mk-ui .main-panel:has(.creative-media-col) .pagination {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 20px 0 8px !important;
}
.mk-ui .main-panel:has(.creative-media-col) .pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none !important;
    min-width: 34px;
    height: 34px;
    padding: 0 10px !important;
    border: 1px solid var(--mk-line) !important;
    border-radius: var(--mk-radius-control) !important;
    background: var(--mk-white) !important;
    color: var(--mk-navy) !important;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none !important;
}
.mk-ui .main-panel:has(.creative-media-col) .pagination a:hover:not(.active) {
    border-color: var(--mk-yellow-dark) !important;
    background: var(--mk-yellow-soft) !important;
    color: var(--mk-ink) !important;
}
.mk-ui .main-panel:has(.creative-media-col) .pagination a.active {
    border-color: var(--mk-navy) !important;
    background: var(--mk-navy) !important;
    color: var(--mk-white) !important;
}

/* Relatórios (report, report_new_units, report_yoy e report_temporal, nas 10 redes): o painel do
   Looker Studio ocupa um cartão da altura da tela, abaixo da barra do topo. O 16:9 antigo deixava o relatório com
   211px de altura no celular. */
/* relatório do Looker Studio (report, report_temporal, report_yoy): parte da tela, sem moldura. O iframe ocupa a
   área inteira abaixo do topo, encostado no menu e na borda da janela; a página não rola, a rolagem é a do próprio
   relatório (com o cartão em volta ficavam a borda, o canto e uma barra de rolagem dentro de outra). */
.mk-ui .main-panel:has(> .google-data-studio):not(#rede-r1) {
    display: flex !important;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden !important;
}
.mk-ui .main-panel:has(> .google-data-studio) > .mk-topbar:not(#rede-r1) {
    flex: none;
}
.mk-ui .main-panel > .google-data-studio:not(#rede-r1):not(#rede-r2) {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--mk-line) !important;
    border-radius: 0 !important;
    background: var(--mk-white) !important;
    box-shadow: none !important;
    overflow: hidden;
}
.mk-ui .main-panel > .google-data-studio iframe:not(#rede-r1) {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block;
}
/* faixa fixa vazia no pé da tela (o "Marktech" dela já ficava escondido) */
.mk-ui .report-footer {
    display: none !important;
}
.mk-ui .rede-relatorio__barra {
    display: none;
}
/* celular: o Looker encolhe a página inteira para caber em 375px e nada fica legível. O relatório é desenhado com
   1024px (arrasta de lado e rola dentro dele) e um botão abre o relatório sozinho, em tela cheia, numa aba nova */
@media (max-width: 767px) {
    .mk-ui .rede-relatorio__barra {
        display: flex;
        flex: none;
        justify-content: flex-end;
        padding: 0 16px 10px;
    }
    .mk-ui .main-panel > .google-data-studio:not(#rede-r1):not(#rede-r2) {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .mk-ui .main-panel > .google-data-studio iframe:not(#rede-r1) {
        position: static;
        width: 1024px !important;
        min-width: 1024px;
        height: 100% !important;
    }
}

/* Formulários de solicitação e edição de campanha (form.briefing: campaign_request, _google, _filial, _city,
   _regional, _page_post e as edições) */
/* marca d'água com os logos do Facebook e do Instagram atrás do formulário: decoração fora do design system */
.mk-ui .card-body > .back-icons {
    display: none !important;
}
/* aviso de "avulsa" e de restrição do impulsionamento: era vermelho puro em negrito; é aviso (âmbar), não erro */
.mk-ui form.briefing b[style*="color: red"],
.mk-ui form.briefing b[style*="color:red"] {
    color: var(--mk-warn) !important;
    font-weight: 600 !important;
}
.mk-ui form.briefing b[style*="color: red"] a,
.mk-ui form.briefing b[style*="color:red"] a {
    color: var(--mk-warn) !important;
    text-decoration: underline !important;
}
/* linha de largura total (texto de taxas, pagamento, ações) não vira uma célula estreita da grade do formulário */
.mk-ui form.briefing .row > :is(.col-lg-12, .col-12):not(#rede-x1):not(#rede-midias) {
    grid-column: 1 / -1 !important;
}
.mk-ui form.briefing ol {
    margin: 6px 0 0 !important;
    padding-left: 22px !important;
    color: var(--mk-body);
    font-size: 13px;
    line-height: 1.55;
}
.mk-ui form.briefing ol li + li {
    margin-top: 4px;
}
/* ações no pé do formulário: Cancelar e a ação principal lado a lado, à direita; o aviso fica embaixo */
.mk-ui form.briefing .form-footer-actions:not(#rede-x1):not(#rede-midias) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 8px !important;
}
.mk-ui form.briefing .form-footer-actions .btn:not(#rede-x1):not(#rede-midias) {
    width: auto !important;
    margin: 0 !important;
}
/* promoções e mídias (image-picker): grade de blocos internos (fundo suave, sem borda nem sombra), alinhada à
   esquerda; a escolhida fica com o fundo e a borda amarelos do kit */
.mk-ui form.briefing .centered-div:has(ul.image_picker_selector) {
    width: 100% !important;
    margin: 0 !important;
}
.mk-ui form.briefing .image-picker-scroll-container {
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
}
.mk-ui form.briefing ul.thumbnails.image_picker_selector:not(#rede-x1) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px !important;
    justify-content: start !important;
    width: 100% !important;
    max-height: none !important;
    margin: 4px 0 8px !important;
    padding: 0 !important;
    overflow: visible !important;
}
.mk-ui form.briefing ul.thumbnails.image_picker_selector > li:not(#rede-x1) {
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.mk-ui form.briefing ul.thumbnails.image_picker_selector .thumbnail:not(#rede-x1) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 10px 12px !important;
    border: 0 !important;
    border-radius: var(--mk-radius-block) !important;
    background: var(--mk-soft) !important;
    box-shadow: none !important;
    cursor: pointer;
}
/* o contorno da escolhida é desenhado por dentro (outline), sem borda de cartão em volta do bloco */
.mk-ui form.briefing ul.thumbnails.image_picker_selector .thumbnail:hover:not(.selected):not(#rede-x1) {
    outline: 1px solid var(--mk-line-strong);
    outline-offset: -1px;
}
.mk-ui form.briefing ul.thumbnails.image_picker_selector .thumbnail.selected:not(#rede-x1) {
    outline: 2px solid var(--mk-yellow-dark);
    outline-offset: -2px;
    background: var(--mk-yellow-soft) !important;
    box-shadow: none !important;
}
.mk-ui form.briefing ul.thumbnails.image_picker_selector .thumbnail img:not(#rede-x1) {
    width: 100% !important;
    height: 130px !important;
    object-fit: contain !important;
    border-radius: var(--mk-radius-sm) !important;
}
.mk-ui form.briefing ul.thumbnails.image_picker_selector .thumbnail p:not(#rede-x1) {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    margin: 0 !important;
    color: var(--mk-ink) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: left !important;
}
/* dica embaixo das promoções ("Selecione acima a categoria..."): texto de apoio, à esquerda */
.mk-ui form.briefing :is(.centered-div, .image-picker-scroll-container) > div[style*="text-align: center; font-weight: 400"]:not(.form-alert) {
    color: var(--mk-muted) !important;
    font-size: 12.5px !important;
    text-align: left !important;
}
/* "Você não tem posts no instagram." (impulsionamento): vazio do kit, bloco suave com o texto em tinta */
.mk-ui form.briefing .text-center:has(> h5:only-child):not(#rede-x1):not(#rede-midias) {
    padding: 28px 20px !important;
    border-radius: var(--mk-radius-block);
    background: var(--mk-soft);
}
.mk-ui form.briefing .text-center > h5:only-child {
    margin: 0 !important;
    color: var(--mk-ink) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}
/* rótulos da mesma linha na mesma altura: o rótulo do campo só leitura (bmd-form-group) ficava em bloco, 12px acima
   dos vizinhos, que são flex alinhados embaixo */
.mk-ui form.briefing .row > [class*="col-"] > .bmd-form-group > label.bmd-label-floating:not(#rede-x1):not(#rede-midias) {
    display: flex !important;
    align-items: flex-end !important;
    margin-bottom: 4px !important;
}
/* "Pagamento" ocupa a linha (na grade de três colunas o texto quebrava a cada quatro palavras) */
.mk-ui form.briefing .row > [class*="col-"]:has(> .payment-methods-note):not(#rede-x1):not(#rede-midias) {
    grid-column: 1 / -1 !important;
}
/* celular: duas promoções por linha (uma só deixava a lista com nove telas de altura) */
@media (max-width: 575px) {
    .mk-ui form.briefing ul.thumbnails.image_picker_selector:not(#rede-x1) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px !important;
    }
    .mk-ui form.briefing ul.thumbnails.image_picker_selector .thumbnail img:not(#rede-x1) {
        height: 110px !important;
    }
}
/* pré-visualização do anúncio: apoio, botão de contorno do kit (era navy num formulário e azul-acinzentado no outro,
   com foco teal e clique cinza do Materialize) */
.mk-ui form.briefing :is(#previewButton, #previewGoogle).btn:not(#rede-x1):not(#rede-midias) {
    border: 1px solid var(--mk-line) !important;
    background: var(--mk-white) !important;
    color: var(--mk-ink) !important;
    box-shadow: none !important;
}
.mk-ui form.briefing :is(#previewButton, #previewGoogle).btn:is(:hover, :focus, :active):not(#rede-x1):not(#rede-midias) {
    border-color: var(--mk-yellow-dark) !important;
    background: var(--mk-yellow-soft) !important;
    color: var(--mk-ink) !important;
    box-shadow: none !important;
}
/* "Carregando botão de pagamento..." só aparece durante o carregamento (.active); a regra de botão do celular
   o deixava sempre à vista, amarelo, embaixo do "Ir para Pagamento" */
.mk-ui form.briefing .btn-payment-loading:not(.active):not(#rede-x1):not(#rede-midias) {
    display: none !important;
}
/* rodapé do impulsionamento (div.float-right com Cancelar, Ir para Pagamento e o aviso): o mesmo do
   .form-footer-actions dos outros formulários */
.mk-ui form.briefing .float-right:has(> .btn-cancel):not(#rede-x1):not(#rede-midias) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    float: none !important;
    width: 100% !important;
}
.mk-ui form.briefing :is(.float-right:has(> .btn-cancel), .form-footer-actions) .btn:not(#rede-x1):not(#rede-midias) {
    width: auto !important;
    margin: 0 !important;
}
.mk-ui form.briefing .float-right:has(> .btn-cancel) > br {
    display: none;
}
.mk-ui form.briefing :is(.float-right, .form-footer-actions) > p:is([style*="color: red"], [style*="color:red"], .form-footer-warning) {
    flex-basis: 100%;
    margin: 0 !important;
    color: var(--mk-bad) !important;
    font-size: 12.5px !important;
    text-align: right;
}
@media (max-width: 575px) {
    .mk-ui form.briefing :is(.float-right:has(> .btn-cancel), .form-footer-actions):not(#rede-x1):not(#rede-midias) {
        justify-content: flex-start !important;
    }
    .mk-ui form.briefing :is(.float-right, .form-footer-actions) > p:is([style*="color: red"], [style*="color:red"], .form-footer-warning) {
        text-align: left;
    }
}
/* rótulo com ícone de ajuda ao lado ("Objetivo de campanha"): à esquerda, como os outros rótulos */
.mk-ui form.briefing .row > [class*="col-"] .bmd-form-group > div[style*="display: flex"]:not(#rede-x1):not(#rede-midias) {
    justify-content: flex-start !important;
    margin-bottom: 4px;
}
/* campo de texto sem classe (Investimento total da campanha, só leitura): 38px como os outros */
.mk-ui form.briefing input[type="text"]:not([class]):not(#rede-x1):not(#rede-midias) {
    box-sizing: border-box !important;
    height: 38px !important;
    min-height: 38px !important;
}
/* coluna do rodapé aninhada noutra coluna (impulsionamento): sem o respiro de 15px do Bootstrap, alinhada à
   margem do cartão como o resto do formulário */
.mk-ui form.briefing [class*="col-"] > [class*="col-"]:has(> .float-right > .btn-cancel):not(#rede-x1):not(#rede-midias) {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* erro de campo do formulário (.form-alert, "Este campo é obrigatório."): vermelho do kit, texto de apoio à
   esquerda (era #ff0000 centralizado) */
.mk-ui form.briefing .form-alert:not(#rede-x1):not(#rede-midias),
.mk-ui form.briefing .form-alert p:not(#rede-x1):not(#rede-midias) {
    color: var(--mk-bad) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    text-align: left !important;
}
.mk-ui form.briefing .form-alert p {
    margin: 0 !important;
}
/* colunas soltas direto no formulário (fora de .row, no regional do Kumon HH e afins): sem os 15px do
   Bootstrap, alinhadas à margem do cartão */
.mk-ui form.briefing > [class*="col-"]:not(#rede-x1):not(#rede-midias) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* imagem que não carregou, dentro da prévia: a prévia já é o bloco suave, o marcador não ganha outro fundo */
.mk-ui .campaign-table:not(#rede-midias) > .row > .creative-media-col .rede-img-falta {
    background-color: transparent !important;
}
.mk-ui form.briefing ul.thumbnails.image_picker_selector .thumbnail .rede-img-falta {
    background-color: transparent !important;
}
/* corpo do cartão do formulário com borda própria (Vavivê): o cartão já tem a moldura */
.mk-ui .bucket-form.card > .card-body:has(> form.briefing):not(#rede-x1):not(#rede-midias) {
    border: 0 !important;
}
/* avisos de erro em vermelho puro (sem localização, regional não escolhida): vermelho do kit */
.mk-ui form.briefing :is(span, div, p)[style*="color: red"]:not(#rede-x1):not(#rede-midias) {
    color: var(--mk-bad) !important;
}
.mk-ui form.briefing ul.thumbnails.image_picker_selector .thumbnail .rede-img-falta {
    width: 100% !important;
    max-width: 100% !important;
}
/* coluna das ações (Cancelar e a principal) ocupa a linha inteira mesmo quando é col-6 (Vavivê): numa célula
   estreita os dois botões empilhavam no meio do formulário */
.mk-ui form.briefing .row > [class*="col-"]:has(> .form-footer-actions, > .float-right > .btn-cancel):not(#rede-x1):not(#rede-midias) {
    grid-column: 1 / -1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ---- conferência geral (2026-10-10) ---- */
/* entrada no celular: as ações viram coluna e o kit mantém flex: 1 1 0 nos botões (feito para a linha); na coluna
   a base 0 vence o height e os botões ficavam com 16px ("Pedir de novo", "Voltar para o login", "Pedir link novo").
   Defeito do bundle.css do kit (vem do design system do saas). */
@media (max-width: 767px) {
    .mk-ui .mk-entry__actions .mk-btn:not(#rede-x1) {
        flex: 0 0 auto !important;
    }
}
/* formulário antigo de entrada (cadastro, dados da unidade, endereço): rótulo de campo do kit acima de cada campo
   (só placeholder e ícone, o campo preenchido não dizia o que era) */
.mk-ui .rede-entry-label {
    display: block;
    margin: 0 0 6px !important;
    color: var(--mk-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: left !important;
}
.mk-ui .wrap-input100:has(> .rede-entry-label):not(#rede-x1) {
    margin-bottom: 14px !important;
}
/* "Login com outra conta" (a.txt2 das telas antigas de entrada): link do kit em vez do cinza #666 */
.mk-ui .mk-entry a.txt2:not(#rede-x1),
.mk-ui .mk-entry a.txt2:is(:hover, :focus, :active):not(#rede-x1) {
    color: var(--mk-navy) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
/* cartão que envolve a grade de mídias ("Minhas mídias", custom_creative): sem moldura, como o das listas;
   os cartões de mídia já são os cartões da tela (era cartão dentro de cartão em OMO, Peça Rara, Bibi e CNA) */
.mk-ui .bucket-form.card:has(.campaign-table > .row > .creative-media-col):not(#rede-x1):not(#rede-midias) {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.mk-ui .bucket-form.card:has(.campaign-table > .row > .creative-media-col) > .card-body:not(#rede-x1):not(#rede-midias) {
    padding: 0 !important;
}
/* cartão de envio de mídias (custom_creative): .card-body.form-row herdava as margens negativas do Bootstrap e
   passava 4px da borda do cartão */
.mk-ui .bucket-form.card > .card-body.form-row:not(#rede-x1):not(#rede-midias) {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* aviso do envio de mídias (custom_creative): ícone de informação em navy, o amarelo é só da ação principal */
.mk-ui #uploadForm .upload-notice .material-icons:not(#rede-x1) {
    color: var(--mk-navy) !important;
}
/* rótulo "Ações" dos cartões de mídia: os botões de ícone têm dica (title); o rótulo escondido em 1px contava como
   texto encostado na borda */
.mk-ui .campaign-table:not(#rede-midias) > .row > .btns-wrapper .actions-label {
    display: none !important;
}
/* botão de recolher o menu e botões de ícone/contorno do kit: no clique (mouse em cima + foco + ativo) o CSS antigo
   deixava o fundo transparente ou no verde-azulado do Materialize por um instante; agora todo estado tem a cor do
   kit (hover e clique: amarelo suave com borda amarela) e só a cor anima */
.mk-ui :is(.mk-topbar__toggle, .mk-iconbtn, .mk-btn--ghost):is(:hover, :active, :hover:focus):not(#rede-x1):not(#rede-midias) {
    background: var(--mk-yellow-soft) !important;
    border-color: var(--mk-yellow-dark) !important;
    color: var(--mk-ink) !important;
    box-shadow: none !important;
}
.mk-ui :is(.mk-topbar__toggle, .mk-iconbtn, .mk-btn--ghost):not(#rede-x1):not(#rede-midias) {
    transition: background-color 0.15s, border-color 0.15s, color 0.15s !important;
}
.mk-ui :is(.mk-topbar__toggle, .mk-iconbtn, .mk-btn--ghost) .waves-ripple {
    display: none !important;
}
/* respiro vertical da tela de mídias: 16px entre a faixa do alto e a grade (o cartão em volta da grade tinha 7,5px a
   mais e os botões da faixa, margem embaixo) */
.mk-ui .main-panel:has(.creative-media-col) .bucket-form.card:has(.campaign-table > .row > .creative-media-col):not(#rede-x1):not(#rede-midias) {
    margin-top: 0 !important;
}
.mk-ui .main-panel:has(.creative-media-col) .show-filters :is(.btn, .media-total-chip, .card.metric, .metrics-wrapper),
.mk-ui .main-panel:has(.creative-media-col) .show-filters > *:not(#rede-x1):not(#rede-midias) {
    margin-bottom: 0 !important;
}

/* ---------- rodada de 2026-10-11 ---------- */
/* balão de ajuda: só o do kit (rede.js passa o data-tip para data-tooltip). As dicas em CSS das telas antigas (.qtip,
   [data-tooltip]::after) ficavam presas na caixa que rola, cortadas ou por baixo de outros blocos, e a do Materialize
   repetia o texto do balão do kit. */
.mk-ui :is(.qtip, [data-tooltip], [data-tip]):not(#rede-t1):not(#rede-t2):not(#rede-t3)::before,
.mk-ui :is(.qtip, [data-tooltip], [data-tip]):not(#rede-t1):not(#rede-t2):not(#rede-t3)::after {
    content: none !important;
    display: none !important;
}
.mk-ui .material-tooltip:not(#rede-t1),
body > .material-tooltip:not(#rede-t1) {
    display: none !important;
}
.mk-ui :is(i, span)[data-tooltip]:focus-visible {
    outline: 2px solid var(--mk-navy);
    outline-offset: 2px;
    border-radius: 50%;
}
/* painel de filtro (rede.js monta as três faixas): campos em grade, opções em linha, ações no rodapé à direita,
   e o respiro de cartão antes da lista */
.mk-ui .rede-filtro:not(#rede-f1):not(#rede-f2) {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap !important; /* em .row do Bootstrap o wrap fazia a grade calcular a altura numa coluna só */
    align-items: stretch !important;
    gap: 18px;
    margin: 0 0 24px !important;
    padding: 22px 24px 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    background: var(--mk-white) !important;
    /* no fluxo da página (o da Kumon flutuava por cima dos indicadores com position: fixed) */
    position: static !important;
    float: none !important;
    inset: auto !important;
    z-index: auto !important;
    border: 1px solid var(--mk-line) !important;
    border-radius: var(--mk-radius-lg) !important;
    box-shadow: var(--mk-shadow-card) !important;
}
/* campo de texto do filtro no formato do kit (o da Kumon era o sublinhado do Material) */
.mk-ui .rede-filtro input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not(.select2-search__field):not(#rede-f1):not(#rede-f2) {
    height: 38px !important;
    width: 100% !important;
    padding: 0 12px !important;
    border: 1px solid var(--mk-line) !important;
    border-radius: var(--mk-radius-sm) !important;
    background: var(--mk-white) none !important;
    box-shadow: none !important;
    color: var(--mk-ink) !important;
    font-size: 13px !important;
}
.mk-ui .rede-filtro input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not(.select2-search__field):focus:not(#rede-f1):not(#rede-f2) {
    border-color: var(--mk-navy) !important;
    outline: none !important;
}
.mk-ui .rede-filtro label.bmd-label-floating:not(#rede-f1) {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    font-size: 12px !important;
}
.mk-ui .rede-filtro:is([style*="display: none"], [style*="display:none"]):not(#rede-f1):not(#rede-f2),
.mk-ui .rede-filtro.hidden:not([style*="display: block"]):not([style*="display:block"]):not([style*="display: flex"]):not(#rede-f1):not(#rede-f2) {
    display: none !important; /* fechado: escondido pela tela (hidden) até o .show() dela */
}
.mk-ui .rede-filtro .rede-filtro__campos {
    display: grid;
    width: 100%;
    align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: 16px 20px;
}
.mk-ui .rede-filtro .rede-filtro__campos > [class*="col-"]:not(#rede-f1) {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.mk-ui .rede-filtro .rede-filtro__campos .form-group:not(#rede-f1) {
    margin: 0 !important;
    padding: 0 !important;
}
.mk-ui .rede-filtro .rede-filtro__opcoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
}
.mk-ui .rede-filtro .rede-filtro__opcoes > *:not(#rede-f1) {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}
.mk-ui .rede-filtro .rede-filtro__opcoes label:not(#rede-f1) {
    white-space: nowrap;
    margin: 0 !important;
}
.mk-ui .rede-filtro .rede-filtro__acoes {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}
.mk-ui .rede-filtro .rede-filtro__acoes .btn:not(#rede-f1):not(#rede-f2) {
    margin: 0 !important;
    min-width: 120px;
    width: auto !important;
    float: none !important;
}
@media (max-width: 479px) {
    .mk-ui .rede-filtro:not(#rede-f1):not(#rede-f2) { padding: 18px 16px 20px !important; margin-bottom: 16px !important; }
    .mk-ui .rede-filtro .rede-filtro__acoes .btn:not(#rede-f1):not(#rede-f2) { flex: 1 1 0; min-width: 0; }
    .mk-ui .rede-filtro .rede-filtro__opcoes label:not(#rede-f1) { white-space: normal; }
}
/* "Filtros" e "Ocultar" são apoio (contorno): no mouse, no foco e clicados ficam no amarelo claro com texto em tinta
   (o hover antigo do btn-accent deixava o texto branco sobre o amarelo claro) */
.mk-ui :is(.show-filter-btn, .btn.report-filter, .hide-filter-btn):not(#rede-f1):not(#rede-f2) {
    background: var(--mk-white) !important;
    border: 1px solid var(--mk-line) !important;
    color: var(--mk-ink) !important;
    box-shadow: none !important;
}
.mk-ui :is(.show-filter-btn, .btn.report-filter, .hide-filter-btn):is(:hover, :focus, :focus-visible, :active, .active):not(#rede-f1):not(#rede-f2) {
    background: var(--mk-yellow-soft) !important;
    border-color: var(--mk-yellow-dark) !important;
    color: var(--mk-ink) !important;
}
.mk-ui :is(.show-filter-btn, .btn.report-filter, .hide-filter-btn) :is(i, svg, span):not(#rede-f1):not(#rede-f2) {
    color: inherit !important;
}
/* a ação principal amarela: no mouse escurece um tom, texto sempre em tinta */
.mk-ui .btn.btn-accent:not(.show-filter-btn):not(.report-filter):not(.hide-filter-btn):is(:hover, :focus, :active):not(#rede-f1) {
    color: var(--mk-ink) !important;
}
.mk-ui .btn.btn-accent:not(.show-filter-btn):not(.report-filter):not(.hide-filter-btn):is(:hover, :focus, :active):not(#rede-f1) :is(i, span) {
    color: inherit !important;
}
/* cabeçalho de cartão com fio embaixo: o fio colava no subtítulo (padding-bottom 0); 16px abaixo do texto e 20px
   até o corpo, e o subtítulo com entrelinha de texto (a de 1 encostava as linhas) */
.mk-ui .main-panel .content .card > .card-header:not(:last-child):not(#rede-x1):not(#rede-x2) {
    padding-bottom: 16px !important;
}
.mk-ui .main-panel .content .card > .card-header + .card-body:not(#rede-x1):not(#rede-x2) {
    padding-top: 20px !important;
}
.mk-ui .card .card-header .card-category:not(#rede-x1) {
    line-height: 1.4 !important;
    margin: 4px 0 0 !important;
}
.mk-ui .card .card-header .card-category:empty:not(#rede-x1) {
    display: none !important;
}
/* etiquetas de plano e de recorte (custom-tag): a etiqueta do kit (mk-tag), com ícone e texto centrados na mesma
   linha e respiro dos dois lados (o ícone encostava na borda). Plano anual em navy suave, incentivo e expectativa
   em amarelo suave, o resto (cidade, filial, regional, teste, sem plano) neutro. Sem as cores soltas dos forks. */
.mk-ui .custom-tag:not(#rede-g1):not(#rede-g2) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    margin: 0 !important;
    padding: 3px 10px 3px 8px !important;
    border: 0 !important;
    border-radius: var(--mk-radius-pill) !important;
    background: var(--mk-line-soft) !important;
    color: var(--mk-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    box-shadow: none !important;
}
.mk-ui .custom-tag:not(#rede-g1):not(#rede-g2) :is(i, .material-icons, svg) {
    flex: none;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    color: inherit !important;
    vertical-align: 0 !important;
}
.mk-ui .custom-tag:is([class*="custom-tag-annual"], .custom-tag-plan-annual):not(#rede-g1):not(#rede-g2) {
    background: var(--mk-navy-soft) !important;
    color: var(--mk-navy) !important;
}
.mk-ui .custom-tag:is([class*="custom-tag-incentive"], [class*="custom-tag-expectation"], .custom-tag-plan-incentive):not(#rede-g1):not(#rede-g2) {
    background: var(--mk-yellow-soft) !important;
    color: var(--mk-ink) !important;
}
/* item-pai do menu (botão que abre um grupo): o mesmo estado dos links. No hover, amarelo com texto e ícones em navy
   (ficava amarelo com o texto claro do botão); foco e clique sem cor própria. */
.mk-ui .mk-side button.mk-side__item:not(#rede-m1):not(#rede-m2) {
    color: rgba(255, 255, 255, 0.95) !important;
    outline: none;
}
.mk-ui .mk-side button.mk-side__item:is(:hover, .is-active):not(#rede-m1):not(#rede-m2) {
    background: var(--mk-yellow) !important;
    color: var(--mk-navy) !important;
}
.mk-ui .mk-side button.mk-side__item:is(:focus, :active):not(:hover):not(.is-active):not(#rede-m1):not(#rede-m2) {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.95) !important;
}
.mk-ui .mk-side button.mk-side__item:focus-visible:not(#rede-m1):not(#rede-m2) {
    box-shadow: inset 0 0 0 2px var(--mk-yellow) !important;
}
.mk-ui .mk-side button.mk-side__item :is(span, svg, i):not(#rede-m1) {
    color: inherit !important;
}
/* botões do kit feitos com <a>: o a:focus roxo do Material não vale (Abrir em tela cheia) */
.mk-ui a.mk-btn:is(:hover, :focus, :active, :visited):not(#rede-x1):not(#rede-x2) {
    color: var(--mk-ink) !important;
    text-decoration: none !important;
}
.mk-ui a.mk-btn.mk-btn--dark:is(:hover, :focus, :active, :visited):not(#rede-x1):not(#rede-x2) {
    color: var(--mk-white) !important;
}
/* dado longo do cartão (site, e-mail, endereço) quebra dentro do cartão em vez de passar da borda */
.mk-ui .rede-cc .rede-cc__ref:not(#rede-x1) {
    min-width: 0;
    max-width: 100%;
}
.mk-ui .rede-cc .rede-cc__ref dd:not(#rede-x1),
.mk-ui .rede-cc .rede-cc__ref dd a:not(#rede-x1) {
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal !important;
    min-width: 0;
}
/* ícone de informação depois de um texto: 6px de respiro (encostava em "Error de plataforma") */
.mk-ui :is(dd, td, span, p, label, h4, h5) > i.info-tooltip:not(:first-child):not(#rede-x1) {
    margin-left: 6px !important;
}
/* logo do menu: a coassinatura do kit (mk-side__logo--cobrand, Marktech em cima e o logo da rede embaixo, os dois em
   branco e centralizados, faixa da mesma altura em todas as redes). O da rede é images/rede-menu-branco.png, recortado
   do antigo mkt-menu.png (redes/tools/logo_menu.py, que também dá a medida da tag). Na Europa, o logo do país vem do
   Business e o filtro do kit o deixa branco. */