/* ══════════════════════════════════════════════════════════════════════
   IVALENE EXPRESS — CAMADA ÚNICA DE COMPONENTES
   ----------------------------------------------------------------------
   Porque existe: a plataforma tinha quatro sistemas visuais a correr ao
   mesmo tempo (site público em Bootstrap 3 + tema, painéis em Bootstrap 5
   + template "Nowa", painel da transportadora com prefixo tp-, app do
   motorista com CSS inline). Cada um com o seu azul, o seu raio, a sua
   sombra, a sua tabela e o seu badge.

   Esta folha é carregada POR ÚLTIMO em todas as áreas e faz duas coisas:
     1. redirecciona as variáveis de cada tema para os tokens do
        css/ivalene-design-system.css (uma paleta, uma fonte, uma escala);
     2. normaliza os componentes base (botões, campos, cartões, tabelas,
        badges, alertas, paginação, separadores, menus, modais) com as
        mesmas medidas em Bootstrap 3 e Bootstrap 5.

   Regras de escrita:
     - só tokens var(--ix-*) — nenhum hexadecimal novo fora do bloco 1;
     - painéis: prefixo .ix-panel  |  site público: prefixo .mkx-body;
     - !important só onde o tema de base já usa !important (custom.css,
       style.css, ivalene-moderno.css) — sem isso a regra nunca ganha;
     - não altera estrutura, nem esconde conteúdo, nem cria overflow-x
       global.
   Dependência: css/ivalene-design-system.css (tokens) carregado antes.
   ══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────
   1. PONTES DE TOKENS — cada tema passa a ler a paleta única
   ───────────────────────────────────────────────────────────────────── */
:root{
    /* Template Nowa (painéis): cor primária do tema */
    --template1: var(--ix-primary);
    --template2: var(--ix-primary-active);
    --template3: var(--ix-primary-hover);
    --primary-bg-color: var(--ix-primary);
    --primary-bg-hover: var(--ix-primary-hover);
    --primary-bg-border: var(--ix-primary);
    --primary02: rgba(29,78,216,.2);
    --primary05: rgba(29,78,216,.5);
    --primary-transparentcolor: rgba(29,78,216,.12);

    /* custom.css "Painel moderno v2" */
    --sidebar-bg: var(--ix-brand-900);
    --sidebar-surface: rgba(255,255,255,.05);
    --sidebar-hover: rgba(255,255,255,.08);
    --sidebar-active-bg: rgba(255,255,255,.10);
    --sidebar-accent: var(--ix-cta);
    --sidebar-text: rgba(255,255,255,.78);
    --sidebar-text-hover: #fff;
    --sidebar-label: rgba(255,255,255,.5);
    --header-bg: var(--ix-brand-900);
    --content-bg: var(--ix-bg);
    --card-bg: var(--ix-surface);
    --card-shadow: var(--ix-shadow-sm);
    --card-radius: var(--ix-radius-lg);
    --text-primary: var(--ix-text);
    --text-secondary: var(--ix-text-secondary);
    --text-muted: var(--ix-text-muted);
    --border-light: var(--ix-border);
    --accent: var(--ix-primary);
    --accent-hover: var(--ix-primary-hover);
    --color-success: var(--ix-success-fill);
    --color-danger: var(--ix-danger);
    --color-warning: var(--ix-warning-fill);
    --color-info: var(--ix-info);
    --font-body: var(--ix-font);

    /* Painel da transportadora (prefixo tp-) — tema claro */
    --tp-azul: var(--ix-primary);
    --tp-azul-f: var(--ix-primary-hover);
    --tp-azul-l: var(--ix-primary-soft);
    --tp-azul-t: var(--ix-primary);
    --tp-verde: var(--ix-success-fill);
    --tp-verde-t: var(--ix-success);
    --tp-verde-l: var(--ix-success-soft);
    --tp-ambar: var(--ix-warning-fill);
    --tp-ambar-t: var(--ix-warning);
    --tp-ambar-l: var(--ix-warning-soft);
    --tp-vermelho: var(--ix-danger);
    --tp-vermelho-t: var(--ix-danger-hover);
    --tp-vermelho-l: var(--ix-danger-soft);
    --tp-fundo: var(--ix-bg);
    --tp-sup: var(--ix-surface);
    --tp-sup2: var(--ix-surface-alt);
    --tp-borda: var(--ix-border);
    --tp-borda-f: var(--ix-border-strong);
    --tp-txt: var(--ix-text);
    --tp-txt2: var(--ix-text-secondary);
    --tp-txt3: var(--ix-text-muted);
    --tp-r1: var(--ix-radius-sm);
    --tp-r2: var(--ix-radius-lg);
    --tp-r3: var(--ix-radius-xl);
    --tp-s1: var(--ix-shadow-sm);
    --tp-s2: var(--ix-shadow-md);
    --tp-s3: var(--ix-shadow-lg);

    /* "Em trânsito" é informação em toda a plataforma (azul-informação),
       não violeta */
    --tp-roxo: var(--ix-info);
    --tp-roxo-l: var(--ix-info-soft);
    --tp-roxo-t: var(--ix-info);
    --roxo: var(--ix-info);

    /* App do motorista */
    --azul: var(--ix-primary);
    --azul-esc: var(--ix-primary-hover);
    --verde: var(--ix-success-fill);
    --verde-esc: var(--ix-success);
    --ambar: var(--ix-warning-fill);
    --vermelho: var(--ix-danger);
    --cinza: var(--ix-neutral);
    --topo: var(--ix-brand-900);
}
/* O tema escuro da transportadora e do motorista (escolha explícita do
   utilizador) continua a usar os tons próprios definidos nessas folhas:
   esta ponte só se aplica ao tema claro. */
[data-tp-tema="escuro"]{
    --tp-azul-l:#1e3a8a; --tp-verde-l:#14532d; --tp-ambar-l:#78350f; --tp-vermelho-l:#7f1d1d;
    --tp-ambar-t:#fde68a; --tp-azul-t:#bfdbfe; --tp-verde-t:#bbf7d0; --tp-vermelho-t:#fecaca;
    --tp-fundo:#0b1220; --tp-sup:#151d2e; --tp-sup2:#1b2438;
    --tp-borda:#27324a; --tp-borda-f:#3a4867;
    --tp-txt:#e8eef8; --tp-txt2:#a8b6cc; --tp-txt3:#7c8aa3;
    --tp-azul:#3b82f6;
    --tp-roxo-l:#0c4a6e; --tp-roxo-t:#bae6fd;
}


/* ─────────────────────────────────────────────────────────────────────
   2. TIPOGRAFIA — uma família, uma escala
   ───────────────────────────────────────────────────────────────────── */
body.ix-panel,
body.mkx-body,
body#pagina{
    font-family: var(--ix-font);
    -webkit-font-smoothing: antialiased;
    color: var(--ix-text);
}
body.tp.ix-panel{ font-family: var(--ix-font); }
.ix-panel .main-content-title,
.ix-panel .page-title{ font-size: var(--ix-fs-h3) !important; font-weight: var(--ix-fw-bold) !important; color: var(--ix-text) !important; letter-spacing: -.01em; }
.ix-panel .card-title{ font-size: var(--ix-fs-lg); font-weight: var(--ix-fw-bold); color: var(--ix-text); letter-spacing: -.005em; text-transform: none; }
.ix-panel .text-muted{ color: var(--ix-text-muted) !important; }


/* ─────────────────────────────────────────────────────────────────────
   3. BOTÕES — mesma altura, raio, peso e estados em BS3 e BS5
   ───────────────────────────────────────────────────────────────────── */
.ix-panel .btn,
.mkx-body .btn:not(.btn-link):not(.dropdown-toggle):not(.close),
body#pagina .btn{
    font-family: var(--ix-font);
    font-weight: var(--ix-fw-semibold);
    border-radius: var(--ix-radius-md);
    transition: background-color var(--ix-transition), border-color var(--ix-transition), color var(--ix-transition), box-shadow var(--ix-transition);
}
.ix-panel .btn:not(.btn-sm):not(.btn-lg):not(.btn-icon):not(.btn-close){ min-height: var(--ix-control-h); }
.ix-panel .btn-sm{ min-height: var(--ix-control-h-sm); border-radius: var(--ix-radius-sm); }
.ix-panel .btn:focus-visible,
.mkx-body .btn:focus-visible{ box-shadow: var(--ix-focus) !important; outline: none; }
.ix-panel .btn:disabled,
.ix-panel .btn.disabled,
.mkx-body .btn[disabled]{ opacity: .55; cursor: not-allowed; }

/* Primário: acção principal */
.ix-panel .btn-primary,
body#pagina .btn-primary{
    background: var(--ix-primary) !important;
    border-color: var(--ix-primary) !important;
    color: #fff !important;
    box-shadow: none;
}
.ix-panel .btn-primary:hover,
.ix-panel .btn-primary:focus,
body#pagina .btn-primary:hover{
    background: var(--ix-primary-hover) !important;
    border-color: var(--ix-primary-hover) !important;
    color: #fff !important;
}
.ix-panel .btn-primary:active{ background: var(--ix-primary-active) !important; }

/* Secundário: neutro contornado (não é uma segunda cor) */
.ix-panel .btn-secondary,
.ix-panel .btn-light,
.ix-panel .btn-default,
.mkx-body .btn-default{
    background: var(--ix-surface) !important;
    border: 1px solid var(--ix-border-strong) !important;
    color: var(--ix-text) !important;
}
.ix-panel .btn-secondary:hover,
.ix-panel .btn-light:hover,
.ix-panel .btn-default:hover,
.mkx-body .btn-default:hover{
    background: var(--ix-surface-alt) !important;
    border-color: var(--ix-text-muted) !important;
    color: var(--ix-text) !important;
}

/* Semânticos */
.ix-panel .btn-success{ background: var(--ix-success-fill) !important; border-color: var(--ix-success-fill) !important; color:#fff !important; }
.ix-panel .btn-success:hover{ background: var(--ix-success) !important; border-color: var(--ix-success) !important; }
.ix-panel .btn-danger{ background: var(--ix-danger) !important; border-color: var(--ix-danger) !important; color:#fff !important; }
.ix-panel .btn-danger:hover{ background: var(--ix-danger-hover) !important; border-color: var(--ix-danger-hover) !important; }
.ix-panel .btn-warning{ background: var(--ix-warning-fill) !important; border-color: var(--ix-warning-fill) !important; color: #111827 !important; }
.ix-panel .btn-warning:hover{ background: #d97706 !important; border-color: #d97706 !important; }
.ix-panel .btn-info{ background: var(--ix-info) !important; border-color: var(--ix-info) !important; color:#fff !important; }
.ix-panel .btn-info:hover{ background: #075985 !important; border-color: #075985 !important; }
.ix-panel .btn-dark{ background: var(--ix-brand) !important; border-color: var(--ix-brand) !important; color:#fff !important; }

/* Contornados */
.ix-panel .btn-outline-primary{ color: var(--ix-primary) !important; border-color: var(--ix-primary) !important; background: transparent !important; }
.ix-panel .btn-outline-primary:hover{ background: var(--ix-primary) !important; color: #fff !important; }
.ix-panel .btn-outline-secondary,
.ix-panel .btn-outline-light,
.ix-panel .btn-outline-dark{ color: var(--ix-text) !important; border-color: var(--ix-border-strong) !important; background: transparent !important; }
.ix-panel .btn-outline-secondary:hover,
.ix-panel .btn-outline-light:hover,
.ix-panel .btn-outline-dark:hover{ background: var(--ix-surface-alt) !important; }
.ix-panel .btn-outline-danger{ color: var(--ix-danger) !important; border-color: var(--ix-danger) !important; background: transparent !important; }
.ix-panel .btn-outline-danger:hover{ background: var(--ix-danger) !important; color:#fff !important; }
.ix-panel .btn-outline-success{ color: var(--ix-success) !important; border-color: var(--ix-success-fill) !important; background: transparent !important; }
.ix-panel .btn-outline-success:hover{ background: var(--ix-success-fill) !important; color:#fff !important; }

/* Comercial (laranja): usar .ix-btn-cta ou .btn-cta onde a acção é de conversão */
.btn-cta,
.ix-panel .btn-cta{
    background: var(--ix-cta) !important; border-color: var(--ix-cta) !important; color: #fff !important;
}
.btn-cta:hover{ background: var(--ix-cta-hover) !important; border-color: var(--ix-cta-hover) !important; }

/* Links de texto: só os links "simples" (sem classe) dentro do conteúdo.
   Uma regra genérica em .ix-panel a pintava de azul também os botões-link
   dos painéis (ex.: .tp-btn da transportadora ficava azul sobre azul). */
.ix-panel .card-body a:not([class]),
.ix-panel .modal-body a:not([class]),
.ix-panel .alert a:not([class]){ color: var(--ix-primary); }
.ix-panel .card-body a:not([class]):hover,
.ix-panel .modal-body a:not([class]):hover{ color: var(--ix-primary-hover); }


/* ─────────────────────────────────────────────────────────────────────
   4. CAMPOS DE FORMULÁRIO
   (alturas e paddings já vivem em ivalene-campos.css — aqui só a pele)
   ───────────────────────────────────────────────────────────────────── */
.ix-panel .form-control,
.ix-panel .form-select,
.ix-panel select.form-control,
.mkx-body .form-control,
body#pagina .form-control{
    border: 1px solid var(--ix-border-strong);
    border-radius: var(--ix-radius-md);
    background-color: var(--ix-surface);
    color: var(--ix-text);
    font-family: var(--ix-font);
    box-shadow: none;
    transition: border-color var(--ix-transition), box-shadow var(--ix-transition);
}
.ix-panel .form-control::placeholder,
.mkx-body .form-control::placeholder{ color: var(--ix-text-muted); opacity: 1; }
.ix-panel .form-control:focus,
.ix-panel .form-select:focus,
.mkx-body .form-control:focus,
body#pagina .form-control:focus{
    border-color: var(--ix-primary) !important;
    box-shadow: var(--ix-focus) !important;
    outline: none;
}
.ix-panel .form-control:disabled,
.ix-panel .form-control[readonly]{ background-color: var(--ix-surface-alt); color: var(--ix-text-secondary); }
.ix-panel .form-control.is-invalid,
.mkx-body .has-error .form-control{ border-color: var(--ix-danger) !important; }
.ix-panel .invalid-feedback,
.mkx-body .has-error .help-block{ color: var(--ix-danger); font-size: var(--ix-fs-sm); }
.ix-panel label,
.ix-panel .form-label{ font-weight: var(--ix-fw-semibold); color: var(--ix-text); font-size: var(--ix-fs-sm) !important; text-transform: none !important; letter-spacing: 0 !important; }
.ix-panel .form-check-input:checked{ background-color: var(--ix-primary); border-color: var(--ix-primary); }
.ix-panel .form-check-input:focus{ box-shadow: var(--ix-focus); border-color: var(--ix-primary); }
.ix-panel .input-group-text{ background: var(--ix-surface-alt); border-color: var(--ix-border-strong); color: var(--ix-text-secondary); }


/* ─────────────────────────────────────────────────────────────────────
   5. CARTÕES
   ───────────────────────────────────────────────────────────────────── */
.ix-panel .card,
.ix-panel .custom-card{
    background: var(--ix-surface);
    border: 1px solid var(--ix-border) !important;
    border-radius: var(--ix-radius-lg) !important;
    box-shadow: var(--ix-shadow-sm) !important;
}
.ix-panel .card-header{
    background: var(--ix-surface);
    border-bottom: 1px solid var(--ix-border);
    border-radius: var(--ix-radius-lg) var(--ix-radius-lg) 0 0 !important;
}
.ix-panel .card-footer{
    background: var(--ix-surface-alt);
    border-top: 1px solid var(--ix-border);
    border-radius: 0 0 var(--ix-radius-lg) var(--ix-radius-lg) !important;
}
.mkx-body .panel{ border-radius: var(--ix-radius-lg); border-color: var(--ix-border); box-shadow: var(--ix-shadow-sm); }
.mkx-body .panel > .panel-heading{ border-radius: var(--ix-radius-lg) var(--ix-radius-lg) 0 0; }


/* ─────────────────────────────────────────────────────────────────────
   6. TABELAS
   ───────────────────────────────────────────────────────────────────── */
.ix-panel .table,
.mkx-body .table{ color: var(--ix-text); border-color: var(--ix-border); margin-bottom: 0; }
.ix-panel .table > thead > tr > th,
.ix-panel .table thead th,
.mkx-body .table > thead > tr > th{
    background: var(--ix-surface-alt) !important;
    color: var(--ix-text-secondary) !important;
    font-size: var(--ix-fs-caption) !important;
    font-weight: var(--ix-fw-bold) !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--ix-border) !important;
    border-top: 0 !important;
    padding: 12px 14px !important;
    white-space: nowrap;
    vertical-align: middle;
}
.ix-panel .table > tbody > tr > td,
.mkx-body .table > tbody > tr > td{
    border-color: var(--ix-border) !important;
    padding: 12px 14px;
    vertical-align: middle;
    font-size: var(--ix-fs-sm);
}
.ix-panel .table-hover > tbody > tr:hover > *,
.ix-panel .table > tbody > tr:hover > td{ background-color: var(--ix-surface-alt); }
.ix-panel .table-striped > tbody > tr:nth-of-type(odd) > *{ --bs-table-accent-bg: transparent; background-color: #fbfcfe; }
.ix-panel .table-bordered,
.ix-panel .table-bordered td,
.ix-panel .table-bordered th{ border-color: var(--ix-border) !important; }
.ix-panel .table-responsive{ border-radius: var(--ix-radius-md); }
/* DataTables */
.ix-panel .dataTables_wrapper .dataTables_filter input,
.ix-panel .dataTables_wrapper .dataTables_length select{
    border: 1px solid var(--ix-border-strong); border-radius: var(--ix-radius-sm); min-height: var(--ix-control-h-sm); padding: 4px 10px;
}
.ix-panel .dataTables_wrapper .dataTables_info{ color: var(--ix-text-muted); font-size: var(--ix-fs-sm); }


/* ─────────────────────────────────────────────────────────────────────
   7. BADGES / ESTADOS — fundo suave + texto escuro, forma de pílula
   (só em .badge: .bg-* noutros elementos não é tocado)
   ───────────────────────────────────────────────────────────────────── */
.ix-panel .badge,
.mkx-body .badge,
.mkx-body .label{
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--ix-font);
    font-size: var(--ix-fs-caption);
    font-weight: var(--ix-fw-semibold);
    line-height: 1.4;
    padding: 3px 10px;
    border-radius: var(--ix-radius-pill);
    letter-spacing: .01em;
}
.ix-panel .badge.bg-success, .ix-panel .badge-success, .ix-panel .badge.bg-success-transparent, .ix-panel .badge-success-transparent,
.mkx-body .label-success{ background: var(--ix-success-soft) !important; color: var(--ix-success) !important; }
.ix-panel .badge.bg-warning, .ix-panel .badge-warning, .ix-panel .badge.bg-warning-transparent, .ix-panel .badge-warning-transparent,
.mkx-body .label-warning{ background: var(--ix-warning-soft) !important; color: var(--ix-warning) !important; }
.ix-panel .badge.bg-danger, .ix-panel .badge-danger, .ix-panel .badge.bg-danger-transparent, .ix-panel .badge-danger-transparent,
.mkx-body .label-danger{ background: var(--ix-danger-soft) !important; color: var(--ix-danger-hover) !important; }
.ix-panel .badge.bg-info, .ix-panel .badge-info, .ix-panel .badge.bg-info-transparent, .ix-panel .badge-info-transparent,
.mkx-body .label-info{ background: var(--ix-info-soft) !important; color: var(--ix-info) !important; }
.ix-panel .badge.bg-primary, .ix-panel .badge-primary, .ix-panel .badge.bg-primary-transparent, .ix-panel .badge-primary-transparent,
.mkx-body .label-primary{ background: var(--ix-primary-soft) !important; color: var(--ix-primary) !important; }
.ix-panel .badge.bg-secondary, .ix-panel .badge-secondary, .ix-panel .badge.bg-light, .ix-panel .badge-light, .ix-panel .badge.bg-dark, .ix-panel .badge-dark,
.mkx-body .label-default{ background: var(--ix-neutral-soft) !important; color: var(--ix-neutral) !important; }
/* Contadores sobre ícones do cabeçalho mantêm cor sólida (legíveis sobre o azul-marinho) */
.ix-panel .header-badge,
.ix-panel .main-header .badge{ background: var(--ix-danger) !important; color:#fff !important; padding: 2px 6px; font-size: 10.5px; }


/* ─────────────────────────────────────────────────────────────────────
   8. ALERTAS
   ───────────────────────────────────────────────────────────────────── */
body.ix-panel .alert,
body.mkx-body .alert,
body#pagina .alert{
    border-radius: var(--ix-radius-md) !important;
    border-style: solid !important;
    border-width: 1px 1px 1px 4px !important;
    font-size: var(--ix-fs-sm);
    padding: 12px 16px;
}
.ix-panel .alert-success, .mkx-body .alert-success, body#pagina .alert-success{ background: var(--ix-success-soft) !important; color: var(--ix-success) !important; border-color: #bbe5cb !important; border-left-color: var(--ix-success-fill) !important; }
.ix-panel .alert-warning, .mkx-body .alert-warning, body#pagina .alert-warning{ background: var(--ix-warning-soft) !important; color: #92400e !important; border-color: #fde68a !important; border-left-color: var(--ix-warning-fill) !important; }
.ix-panel .alert-danger,  .mkx-body .alert-danger,  body#pagina .alert-danger{  background: var(--ix-danger-soft) !important;  color: var(--ix-danger-hover) !important; border-color: #f8c9c9 !important; border-left-color: var(--ix-danger) !important; }
.ix-panel .alert-info,    .mkx-body .alert-info,    body#pagina .alert-info{    background: var(--ix-info-soft) !important;    color: var(--ix-info) !important; border-color: #bae6fd !important; border-left-color: var(--ix-info-fill) !important; }
.ix-panel .alert-primary{ background: var(--ix-primary-soft) !important; color: var(--ix-primary) !important; border-color: #c7d7fb !important; border-left-color: var(--ix-primary) !important; }


/* ─────────────────────────────────────────────────────────────────────
   9. PAGINAÇÃO, SEPARADORES, MENUS SUSPENSOS
   ───────────────────────────────────────────────────────────────────── */
.ix-panel .pagination .page-link,
.mkx-body .pagination > li > a,
.mkx-body .pagination > li > span{
    border-radius: var(--ix-radius-sm) !important;
    margin: 0 2px;
    border: 1px solid var(--ix-border) !important;
    color: var(--ix-text-secondary);
    min-width: 36px; text-align: center;
}
.ix-panel .pagination .page-item.active .page-link,
.ix-panel .paginate_button.active .page-link,
.mkx-body .pagination > .active > a,
.mkx-body .pagination > .active > span{
    background: var(--ix-primary) !important; border-color: var(--ix-primary) !important; color: #fff !important;
}
.ix-panel .pagination .page-link:hover{ background: var(--ix-surface-alt); color: var(--ix-primary); }

.ix-panel .nav-tabs{ border-bottom: 1px solid var(--ix-border); gap: 4px; }
.ix-panel .nav-tabs .nav-link{ border: 0; border-bottom: 2px solid transparent; color: var(--ix-text-secondary); font-weight: var(--ix-fw-semibold); border-radius: 0; }
.ix-panel .nav-tabs .nav-link:hover{ color: var(--ix-text); }
.ix-panel .nav-tabs .nav-link.active{ color: var(--ix-primary) !important; border-bottom-color: var(--ix-primary) !important; background: transparent !important; }
.ix-panel .nav-pills .nav-link.active{ background: var(--ix-primary) !important; color: #fff !important; }

.ix-panel .dropdown-menu,
.mkx-body .dropdown-menu:not(.megamenu):not(.sub-menu){
    border: 1px solid var(--ix-border) !important;
    border-radius: var(--ix-radius-lg) !important;
    box-shadow: var(--ix-shadow-md) !important;
}
.ix-panel .dropdown-item{ font-size: var(--ix-fs-sm); color: var(--ix-text); border-radius: var(--ix-radius-sm); }
.ix-panel .dropdown-item:hover,
.ix-panel .dropdown-item:focus{ background: var(--ix-surface-alt); color: var(--ix-primary); }


/* ─────────────────────────────────────────────────────────────────────
   10. MODAIS DO BOOTSTRAP (os do sistema IVALENE vivem em ivalene-modal.css)
   ───────────────────────────────────────────────────────────────────── */
.ix-panel .modal-content,
.mkx-body .modal-content{
    border: 0; border-radius: var(--ix-radius-xl) !important; box-shadow: var(--ix-shadow-lg);
    overflow: hidden;
}
.ix-panel .modal-header,
.mkx-body .modal-header{ border-bottom: 1px solid var(--ix-border); padding: 16px 20px; background: var(--ix-surface); }
.ix-panel .modal-title,
.mkx-body .modal-title{ font-size: var(--ix-fs-lg); font-weight: var(--ix-fw-bold); color: var(--ix-text); }
.ix-panel .modal-footer,
.mkx-body .modal-footer{ border-top: 1px solid var(--ix-border); background: var(--ix-surface-alt); padding: 12px 20px; }
.ix-panel .modal-backdrop.show{ opacity: .55; }
.ix-panel .modal-backdrop,
.mkx-body .modal-backdrop{ background-color: var(--ix-text); }


/* ─────────────────────────────────────────────────────────────────────
   11. MOLDURA DOS PAINÉIS — cabeçalho e menu lateral em azul-marinho
   ───────────────────────────────────────────────────────────────────── */
.ix-panel .main-header{ box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 2px 10px rgba(11,31,61,.25) !important; }
.ix-panel li.side-nav-label{ color: var(--sidebar-label) !important; letter-spacing: 1.2px !important; }
.ix-panel .side-menu__label{ color: var(--sidebar-text) !important; }
.ix-panel .side-menu__item:hover .side-menu__label,
.ix-panel .slide.active > .side-menu__item .side-menu__label,
.ix-panel .side-menu__item.active .side-menu__label{ color: var(--sidebar-text-hover) !important; }
body.ix-panel .side-menu .slide.active > .side-menu__item,
body.ix-panel .side-menu .side-menu__item.active{
    background: rgba(255,255,255,.10) !important;
    border: 0 !important;
    outline: 0;
}
body.ix-panel .side-menu .slide.active > .side-menu__item::before{ background: var(--ix-cta) !important; box-shadow: none !important; }
.ix-panel .slide.active > .side-menu__item i.side-icon,
.ix-panel .side-menu__item.active i.side-icon{ background: rgba(234,88,12,.18) !important; color: #fdba74 !important; }
.ix-panel .main-content.app-content,
.ix-panel .main-content{ background: var(--content-bg); }
.ix-panel .main-footer{ background: var(--ix-surface) !important; border-top: 1px solid var(--ix-border) !important; color: var(--ix-text-muted) !important; font-size: var(--ix-fs-sm); }

/* Avatar do cabeçalho: cor da marca (antes gradiente azul-violeta) */
.ix-panel .header-profile-wrap,
.ix-panel .header-profile-initials{ background: linear-gradient(135deg, var(--ix-primary), var(--ix-brand-700)) !important; }


/* ─────────────────────────────────────────────────────────────────────
   12. PÁGINA DE ENTRADA DO SISTEMA (sistema/index.php)
   ───────────────────────────────────────────────────────────────────── */
body#pagina.bg-primary{
    background: radial-gradient(1200px 600px at 15% 10%, var(--ix-brand-700) 0%, transparent 60%),
                linear-gradient(160deg, var(--ix-brand) 0%, var(--ix-brand-900) 100%) !important;
}
body#pagina .card-sigin{ border-radius: var(--ix-radius-xl) !important; box-shadow: var(--ix-shadow-lg) !important; border: 0 !important; }
body#pagina .sign-favicon{ width: auto !important; max-width: 190px; max-height: 64px; }
body#pagina .square-box > div{ border-color: rgba(255,255,255,.08) !important; }
body#pagina a{ color: var(--ix-primary); }


/* ─────────────────────────────────────────────────────────────────────
   13. PAINEL DA TRANSPORTADORA E APP DO MOTORISTA — moldura da marca
   ───────────────────────────────────────────────────────────────────── */
/* Menu lateral da transportadora = mesmo azul-marinho do menu dos outros
   painéis. Só se redefinem as variáveis dentro da gaveta: o markup e o JS
   do shell ficam intactos. No tema escuro escolhido pelo utilizador fica
   como estava. */
html:not([data-tp-tema="escuro"]) body.tp .sh-lado{
    --tp-sup: var(--ix-brand-900);
    --tp-sup2: rgba(255,255,255,.07);
    --tp-borda: rgba(255,255,255,.08);
    --tp-borda-f: rgba(255,255,255,.18);
    --tp-txt: #fff;
    --tp-txt2: rgba(255,255,255,.78);
    --tp-txt3: rgba(255,255,255,.55);
    --tp-azul-l: rgba(255,255,255,.1);
    --tp-azul-f: #fff;
}
html:not([data-tp-tema="escuro"]) body.tp .sh-nav a.on{
    background: rgba(255,255,255,.10);
    box-shadow: inset 3px 0 0 var(--ix-cta);
    color: #fff;
}
html:not([data-tp-tema="escuro"]) body.tp .sh-nav a.on i{ color: #fdba74; }
body.tp .sh-perfil__i{ background: linear-gradient(135deg, var(--ix-primary), var(--ix-brand-700)); }

/* App do motorista: topo em azul-marinho (via --topo) e mesma fonte */
body.ix-motorista{ font-family: var(--ix-font); }


/* ─────────────────────────────────────────────────────────────────────
   14. SITE PÚBLICO — CTA comercial e preço com os tokens
   ───────────────────────────────────────────────────────────────────── */
.mkx-body .btn-primary{
    border-radius: var(--ix-radius-md);
}


/* ─────────────────────────────────────────────────────────────────────
   15. ACESSIBILIDADE E MOVIMENTO
   ───────────────────────────────────────────────────────────────────── */
.ix-panel :focus-visible,
.mkx-body :focus-visible{ outline-color: var(--ix-focus-color); }
@media (prefers-reduced-motion: reduce){
    .ix-panel .btn, .mkx-body .btn, .ix-panel .form-control{ transition: none !important; }
}


/* ─────────────────────────────────────────────────────────────────────
   16. RESPONSIVO — alvos de toque e botões em ecrãs pequenos
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px){
    .ix-panel .btn:not(.btn-sm):not(.btn-icon):not(.btn-close){ min-height: 44px; }
    .ix-panel .card-header{ flex-wrap: wrap; gap: 8px; }
    .ix-panel .modal-footer{ flex-direction: column-reverse; align-items: stretch; }
    .ix-panel .modal-footer > .btn{ width: 100%; margin: 0 !important; }
    .ix-panel .table > thead > tr > th,
    .ix-panel .table > tbody > tr > td{ padding: 10px 12px !important; }
}


/* ─────────────────────────────────────────────────────────────────────
   17. PONTE DOS TOKENS DO SITE PÚBLICO (ivalene-home2.css, --mkx-*)
   O laranja, o azul, o vermelho, as linhas e o fundo do site passam a
   ser os do design system. O laranja fica ligeiramente mais escuro
   (#ea580c) para o texto branco dos botões passar de 2.9:1 para 3.6:1.
   ───────────────────────────────────────────────────────────────────── */
:root{
    --mkx-orange:   var(--ix-cta);
    --mkx-orange-d: var(--ix-cta-hover);
    --mkx-orange-l: var(--ix-cta-soft);
    --mkx-blue:     var(--ix-primary);
    --mkx-red:      var(--ix-danger);
    --mkx-red-d:    var(--ix-danger-hover);
    --mkx-line:     var(--ix-border);
    --mkx-bg:       var(--ix-bg);
    --mkx-muted:    var(--ix-text-muted);
}

/* Páginas de recuperação de senha (sistema/resetar-senha*.php) */
body.ix-auth{ font-family: var(--ix-font); }
body.ix-auth .btn-primary{ background: var(--ix-primary) !important; border-color: var(--ix-primary) !important; border-radius: var(--ix-radius-md); font-weight: var(--ix-fw-semibold); }
body.ix-auth .btn-primary:hover{ background: var(--ix-primary-hover) !important; }
body.ix-auth .form-control:focus{ border-color: var(--ix-primary); box-shadow: var(--ix-focus); }

/* Cabeçalho de página dos painéis (sistema/painel_loja/paginas/_page_header.php) */
.ix-page-head{ gap: 12px; }
.ix-page-head__ico{ width: 44px; height: 44px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--ix-primary-soft); color: var(--ix-primary); font-size: 18px; }
.ix-page-head__t{ font-size: var(--ix-fs-h3); font-weight: var(--ix-fw-bold); color: var(--ix-text); letter-spacing: -.01em; }

/* Selects "nus" (sem .form-select/.form-control e sem select2 activo) ficavam
   com o aspecto nativo do browser, 20px de altura, nos filtros das listagens. */
.ix-panel select:not([class*="form-"]):not(.select2-hidden-accessible):not([multiple]){
    min-height: var(--ix-control-h-sm);
    padding: 4px 32px 4px 10px;
    border: 1px solid var(--ix-border-strong);
    border-radius: var(--ix-radius-sm);
    background: var(--ix-surface) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 10px center / 12px 10px;
    -webkit-appearance: none; appearance: none;
    color: var(--ix-text); font-size: var(--ix-fs-sm); font-family: var(--ix-font);
    vertical-align: middle;
}
.ix-panel select:not([class*="form-"]):not(.select2-hidden-accessible):focus{ border-color: var(--ix-primary); box-shadow: var(--ix-focus); outline: none; }

/* Espaço duplo por baixo do cabeçalho fixo: o tema já reserva a altura do
   cabeçalho com .jumps-prevent (59px) e o .app-content somava mais 58px de
   padding-top — cada página começava com ~60px vazios. */
.ix-panel .jumps-prevent + .main-content.app-content,
.ix-panel .main-content.app-content{ padding-top: 0 !important; }

/* Listagens com .text-nowrap em TODAS as células ficavam mais largas que o
   cartão mesmo a 1440px (scroll horizontal dentro do cartão, coluna de acções
   cortada). O texto das células pode quebrar; cabeçalhos, estados, valores e
   botões continuam numa linha. */
.ix-panel .table.text-nowrap > tbody > tr > td{ white-space: normal; }
.ix-panel .table.text-nowrap > tbody > tr > td:has(.btn),
.ix-panel .table.text-nowrap > tbody > tr > td:has(.badge),
.ix-panel .table.text-nowrap > tbody > tr > td.esc{ white-space: nowrap; }
.ix-panel .table.text-nowrap > tbody > tr > td strong{ display: inline-block; min-width: 160px; }

/* Logótipo do menu lateral esticado (225×34 para uma imagem 3:1): manter a proporção. */
body.ix-panel .main-sidebar-header .header-logo img.desktop-logo,
.ix-panel .main-sidebar-header img,
.ix-panel .app-sidebar .header-logo img,
.ix-panel .main-header .header-brand-logo img{
    width: auto !important; max-width: 170px !important; height: auto !important; max-height: 44px !important; object-fit: contain;
}

/* Menu lateral dos painéis: texto nunca cortado.
   Os itens tinham 20px de recuo à esquerda + 8px de margem e o rótulo com
   `white-space:nowrap; text-overflow:ellipsis` — "Cursos e Conteúdos
   Digitais" ficava "…Digitai". Recuo menor e rótulo que pode ir a 2 linhas. */
body.ix-panel .app-sidebar .side-menu .slide .side-menu__item,
body.ix-panel .app-sidebar .side-menu__item{
    padding: 8px 8px 8px 10px !important;
    margin: 2px 6px !important;
    gap: 10px !important;
    min-height: 42px;
}
body.ix-panel .app-sidebar .side-menu__label{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.25 !important;
    min-width: 0;
    flex: 1 1 auto;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    overflow-wrap: anywhere;
}
body.ix-panel .app-sidebar .side-menu__label .badge,
body.ix-panel .app-sidebar .side-menu__label .menu-badge{ flex: none; margin-left: 0 !important; }
body.ix-panel .app-sidebar .side-menu__item i.side-icon{ flex: none !important; }
body.ix-panel .app-sidebar .side-menu__item .angle{ margin-left: auto; flex: none; }
body.ix-panel li.side-nav-label{ padding-left: 16px !important; }

/* =====================================================================
   BARRA SUPERIOR DOS PAINÉIS (admin, loja, comprador) — estrutura única
   ---------------------------------------------------------------------
   Um só modelo flexível para todos os tamanhos (sem posições absolutas):
     ≥ 992px  menu lateral fixo: [pesquisa ········] [ícones] [conta]
     680–991  [≡][logótipo][pesquisa ······][ícones][conta]
     < 680    linha 1: [≡][logótipo] ··········· [conta]
              linha 2: [pesquisa ··········][ícones]
   Os contentores intermédios (.main-header-left/right, navbar, ul) passam a
   `display:contents` só abaixo de 680px, para que logótipo, pesquisa e ícones
   possam ser ordenados em duas linhas sem duplicar HTML. A altura real da
   barra é publicada em --ix-hdr-h por js/ivalene-header.js (menus e conteúdo
   usam-na) — nunca uma altura fixa que corte conteúdo.
   ===================================================================== */
body.ix-panel{ --ix-hdr-h: 60px; --ix-hdr-btn: 40px; }
body.ix-panel .main-header{
    height: auto !important; min-height: 60px; width: 100% !important; max-width: 100%;
    box-sizing: border-box; overflow: visible;
}
body.ix-panel .main-header > .main-container{
    display: flex !important; flex-wrap: nowrap; align-items: center;
    gap: clamp(6px, 1vw, 14px);
    width: 100%; max-width: 100%; min-height: 60px; height: auto !important; box-sizing: border-box;
    padding: 0 clamp(8px, 2vw, 24px) !important;
}
body.ix-panel .main-header .main-header-left{
    display: flex !important; align-items: center; justify-content: flex-start !important;
    gap: clamp(6px, 1vw, 12px); flex: 1 1 auto; min-width: 0; margin: 0 !important; padding: 0 !important; height: auto !important;
}
body.ix-panel .main-header .main-header-right{
    display: flex !important; align-items: center; flex: 0 0 auto; min-width: 0;
    margin: 0 0 0 auto !important; padding: 0 !important; height: auto !important;
}
body.ix-panel .main-header .responsive-navbar,
body.ix-panel .main-header .responsive-navbar > div{
    display: flex !important; align-items: center; position: static !important;
    padding: 0 !important; margin: 0 !important; height: auto !important; min-width: 0; background: transparent !important;
    flex-basis: auto !important; width: auto !important; box-shadow: none !important; border: 0 !important;
}
/* Logótipos repetidos do tema: fica um só (.header-brand-logo) */
body.ix-panel .main-header .responsive-logo,
body.ix-panel .main-header .logo-horizontal{ display: none !important; }

/* Pesquisa */
body.ix-panel .main-header .main-header-center{
    flex: 1 1 320px !important; min-width: 0; max-width: 560px; margin: 0 !important; padding: 0 !important;
}
body.ix-panel .main-header .main-header-center > div{ width: 100%; max-width: 100% !important; }
body.ix-panel .main-header .main-header-center input[type="search"]{
    width: 100% !important; min-height: 40px; box-sizing: border-box; text-overflow: ellipsis;
}
body.ix-panel .main-header .main-header-center input[type="search"]:focus-visible{
    outline: 2px solid #93c5fd; outline-offset: 1px;
}

/* Ícones: todos com a mesma área de toque, alinhados ao centro */
body.ix-panel .main-header ul.header-icons{
    display: flex !important; align-items: center; flex-wrap: nowrap; gap: 2px;
    padding: 0 !important; margin: 0 !important; height: auto !important; list-style: none;
}
body.ix-panel .main-header ul.header-icons > li{
    display: flex !important; align-items: center; margin: 0 !important; padding: 0 !important; height: auto !important;
}
body.ix-panel .main-header .app-sidebar__toggle > a{ display: none !important; }
body.ix-panel:not(.sidenav-toggled) .main-header .app-sidebar__toggle > a.open-toggle,
body.ix-panel.sidenav-toggled .main-header .app-sidebar__toggle > a.close-toggle{ display: inline-flex !important; }
body.ix-panel .main-header ul.header-icons > li > .nav-link{ display: inline-flex !important; }
body.ix-panel .main-header ul.header-icons > li:not(.main-profile-menu) > .nav-link,
body.ix-panel .main-header .app-sidebar__toggle > a{
    align-items: center; justify-content: center; position: relative;
    width: var(--ix-hdr-btn) !important; height: var(--ix-hdr-btn) !important; min-width: var(--ix-hdr-btn);
    padding: 0 !important; margin: 0 !important; border-radius: 10px; line-height: 1;
}
body.ix-panel .main-header ul.header-icons > li > .nav-link:hover,
body.ix-panel .main-header .app-sidebar__toggle > a:hover{ background: rgba(255,255,255,.08); }
body.ix-panel .main-header ul.header-icons > li > .nav-link:focus-visible,
body.ix-panel .main-header .app-sidebar__toggle > a:focus-visible,
body.ix-panel .main-header .header-brand-logo:focus-visible{ outline: 2px solid #93c5fd; outline-offset: 2px; }
body.ix-panel .main-header .header-icon-svgs,
body.ix-panel .main-header .header-icon{ width: 20px; height: 20px; font-size: 20px; line-height: 20px; margin: 0 !important; padding: 0 !important; box-sizing: content-box; }
body.ix-panel .main-header .nav-link .header-badge,
body.ix-panel .main-header .nav-link .badge{
    position: absolute !important; top: 2px !important; right: 2px !important; left: auto !important;
    min-width: 18px; height: 18px; padding: 0 5px !important; line-height: 18px; border-radius: 9px; font-size: 10.5px;
}
body.ix-panel .main-header .app-sidebar__toggle{
    display: flex; align-items: center; flex: 0 0 auto; position: static !important; margin: 0 !important; padding: 0 !important;
}

/* Conta: avatar + nome (o nome encolhe com reticências, nunca empurra os ícones) */
body.ix-panel .main-header .main-profile-menu{
    margin: 0 0 0 4px !important; padding: 0 !important; min-width: 0 !important; flex: 0 1 auto !important; width: auto !important;
}
body.ix-panel .main-header .main-profile-menu > .nav-link,
body.ix-panel .main-header .main-profile-menu > a{
    display: inline-flex !important; align-items: center; gap: 8px; width: auto !important; height: auto !important;
    min-height: var(--ix-hdr-btn); padding: 0 4px !important; margin: 0 !important; min-width: 0; max-width: 240px; border-radius: 10px;
}
body.ix-panel .main-header .main-profile-menu > .nav-link span[style*="ellipsis"],
body.ix-panel .main-header .main-profile-menu > .nav-link > div,
body.ix-panel .main-header .main-profile-menu > .nav-link > span:not(.header-profile-wrap):not(:has(.header-profile-wrap)){
    min-width: 0; max-width: clamp(80px, 12vw, 180px) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Menus das notificações/conta: sempre dentro do ecrã */
body.ix-panel .main-header .dropdown-menu{ max-width: min(360px, calc(100vw - 16px)); z-index: 1060; }
body.ix-panel .main-header .dropdown-menu .main-message-list,
body.ix-panel .main-header .dropdown-menu .Notification-scroll{ max-height: min(360px, 60vh) !important; overflow-y: auto; }

@media (min-width: 992px){
    /* Menu lateral fixo mostra o logótipo: na barra não se repete */
    body.ix-panel .main-header .header-brand-logo{ display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px){
    /* Portátil: nome da conta só no menu da conta, para dar espaço à pesquisa */
    body.ix-panel .main-header .main-profile-menu > .nav-link > *:not(.header-profile-wrap):not(img):not(:has(.header-profile-wrap)),
    body.ix-panel .main-header .main-profile-menu > .nav-link .header-profile-wrap + span,
    body.ix-panel .main-header .main-profile-menu > .nav-link .header-profile-wrap ~ div{ display: none !important; }
}
@media (max-width: 991.98px){
    body.ix-panel .main-header .header-brand-logo{
        display: flex !important; align-items: center; position: static !important; flex: 0 1 auto; min-width: 0;
        margin: 0 !important; padding: 0 !important; order: 2; height: auto !important; width: auto !important;
    }
    body.ix-panel .main-header .header-brand-logo img{
        display: block; height: auto !important; width: auto !important;
        max-height: 38px !important; max-width: clamp(96px, 26vw, 170px) !important; object-fit: contain;
    }
    body.ix-panel .main-header .app-sidebar__toggle{ order: 1; }
    body.ix-panel .main-header .main-header-center{
        display: block !important; order: 3; flex: 1 1 200px !important; max-width: none;
    }
    /* Atalho de teclado só faz sentido com teclado físico */
    body.ix-panel .main-header .main-header-center input + span{ display: none !important; }
    body.ix-panel .main-header .main-header-center input[type="search"]{ padding-right: 12px !important; }
    /* Conta: só o avatar; o nome aparece dentro do menu */
    body.ix-panel .main-header .main-profile-menu > .nav-link > *:not(.header-profile-wrap):not(img):not(:has(.header-profile-wrap)),
    body.ix-panel .main-header .main-profile-menu > .nav-link .header-profile-wrap ~ *{ display: none !important; }
    /* Invólucro do avatar (painel da loja): sem caixa quando só resta o avatar */
    body.ix-panel .main-header .main-profile-menu > .nav-link > span:has(.header-profile-wrap){ padding: 0 !important; background: none !important; }
    /* Menus abertos: largura do ecrã, logo abaixo da barra (altura real) */
    body.ix-panel .main-header .dropdown-menu.show{
        position: fixed !important; top: calc(var(--ix-hdr-h) + 4px) !important; left: 8px !important; right: 8px !important;
        width: auto !important; max-width: none !important; margin: 0 !important; transform: none !important; inset: calc(var(--ix-hdr-h) + 4px) 8px auto 8px !important;
    }
}
@media (max-width: 679.98px){
    /* Duas linhas: os contentores intermédios deixam de criar caixa */
    body.ix-panel .main-header > .main-container{ flex-wrap: wrap; row-gap: 6px; column-gap: 4px; padding-top: 8px !important; padding-bottom: 8px !important; }
    body.ix-panel .main-header .main-header-left,
    body.ix-panel .main-header .main-header-right,
    body.ix-panel .main-header .responsive-navbar,
    body.ix-panel .main-header .responsive-navbar > div,
    body.ix-panel .main-header ul.header-icons{ display: contents !important; }
    body.ix-panel .main-header .app-sidebar__toggle{ order: 1; }
    body.ix-panel .main-header .header-brand-logo{ order: 2; margin-right: auto !important; }
    body.ix-panel .main-header .main-profile-menu{ order: 3; margin-left: auto !important; }
    body.ix-panel .main-header > .main-container::after{ content: ""; order: 4; flex: 0 0 100%; height: 0; }
    body.ix-panel .main-header .main-header-center{ order: 5; flex: 1 1 0% !important; min-width: 100px; }
    body.ix-panel .main-header ul.header-icons > li:not(.main-profile-menu){ order: 6; }
}
@media (max-width: 419.98px){
    /* Até 5 atalhos + pesquisa cabem na segunda linha */
    body.ix-panel{ --ix-hdr-btn: 38px; }
}
@media (max-width: 359.98px){
    body.ix-panel{ --ix-hdr-btn: 36px; }
    body.ix-panel .main-header .header-brand-logo img{ max-width: 100px !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   CABEÇALHO PÚBLICO (mkx) — portátil/tablet horizontal 861–1199px
   As acções à direita (conta, carrinho com saldo, "Vender agora")
   ocupavam ~530px e a pesquisa ficava com ~76px úteis a 1024px.
   Nesta faixa passam a só ícone (todas têm title/aria-label); a
   pesquisa recupera o espaço. Não altera nada abaixo de 861px nem
   acima de 1199px. (ivalene-home2.css é zona protegida: override aqui.)
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 861px) and (max-width: 1199.98px){
    .mkx-header .mkx-actions .mkx-act__txt,
    .mkx-header .mkx-actions .mkx-act__caret,
    .mkx-header .mkx-btn-vender .mkx-btn-vender__t{ display: none; }
    .mkx-header .mkx-head-main .mkx-wrap{ gap: 12px; }
    .mkx-header .mkx-search{ min-width: 280px; }
    .mkx-header .mkx-search__cat select{ max-width: 120px; }
}

/* ─────────────────────────────────────────────────────────────────────
   CABEÇALHO PÚBLICO — "Todas as categorias" com a estrutura completa
   (40 categorias): em ecrãs largos o painel passa a grelha de 3 colunas
   em vez de uma coluna estreita com scroll longo. Abaixo de 992px mantém
   a lista em coluna (com scroll interno, nunca na página).
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 992px){
    .mkx-header #mkxAllDrop.open .mkx-drop__panel{
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 6px;
        width: min(780px, calc(100vw - 48px)); max-height: min(78vh, 680px); overflow-y: auto; padding: 10px;
    }
    .mkx-header #mkxAllDrop .mkx-drop__panel a{ min-width: 0; line-height: 1.3; }
    .mkx-header #mkxAllDrop .mkx-drop__panel a.mkx-drop__todas{ grid-column: 1 / -1; justify-content: center; font-weight: 700; margin-top: 4px; border-top: 1px solid #eef2f7; }
}
.mkx-header #mkxAllDrop .mkx-drop__panel a.mkx-drop__todas{ color: var(--ix-cta, #ea580c); font-weight: 700; }