/*!
 * MAISQUEMIL OS — sistema visual
 *
 * MUNDO: a sala de controle. O cliente e o dono de uma PME que comprou
 * "uma equipe de IA" e olha o proprio negocio como quem olha um painel:
 * leitura imediata, nada de ornamento, tudo na escala do que dói.
 * A consola e marinho; a mesa e fria; o trabalho acontece em superficies
 * brancas que FLUTUAM sobre a mesa.
 *
 * REGRAS DO MUNDO (valem para as duas superficies, painel e site publico):
 *   - A ficha branca tem SOMBRA EM REPOUSO. Superficie nao gruda na mesa:
 *     e a sombra, nao o fio, que da profundidade. Sem isso tudo fica chapado.
 *   - CANTO ARREDONDADO, NUNCA RETO: 8px no controle, 12px na ficha,
 *     18px na gaveta. O retangulo seco e o que faz o painel virar papel.
 *   - Tres cores de trabalho, com papeis diferentes:
 *     azul #1E40AF e ACAO, ambar #D97706 e DECISAO, marinho e estrutura.
 *     O ambar nao decora: marca o que o dono precisa decidir hoje.
 *   - DUAS familias, nunca uma so: Space Grotesk nos titulos e nos numeros
 *     grandes (geometrica, tem attitude), Archivo na interface e no texto
 *     (alta legibilidade em 13px). Familia unica deixa tudo com a mesma voz.
 *   - Gradiente decorativo: ZERO. A unica profundidade e sombra.
 *   - Estado nunca e so cor. O ponto muda de FORMA: cheio = resolvido,
 *     vazado = pendente, losango = atrasado.
 *   - Algarismos tabulares sempre, para a coluna de numeros nao tremer.
 *
 * CONTRASTE MEDIDO (WCAG 2.1 AA, verificado no CSS publicado):
 *   tinta #0F172A 17.9:1 no branco | #475569 7.58:1 | #64748B 4.76:1
 *   acao #1E40AF 8.72:1 (branco sobre ela tambem 8.72:1)
 *   decisao #D97706 com tinta #0F172A 5.60:1 (branco sobre ela seria 3.18:1
 *   e reprova em texto normal — por isso o rotulo do botao ambar e escuro)
 *   ok #047857 5.48:1 | aviso #B45309 5.02:1 | stop #DC2626 4.83:1
 *   info #0369A1 5.93:1
 */

/* =========================================================================
   1. TOKENS
   ========================================================================= */

:root {
    /* ---- a mesa e a ficha ---- */
    --mq-desk: #F4F6FA;   /* mesa: fundo da pagina */
    --mq-desk-2: #EAEEF6;   /* vala: trilhos e areas recuadas */
    --mq-ficha: #FFFFFF;   /* a ficha de trabalho */
    --mq-ficha-2: #F8FAFC;   /* cabecalho de extrato, faixa zebrada */
    --mq-rule: #E7EBF3;   /* fio entre registros */
    --mq-rule-2: #D9E0EC;   /* contorno da ficha */
    --mq-ink: #0F172A;   /* texto principal        17.9:1 */
    --mq-ink-2: #475569;   /* texto secundario        7.58:1 */
    --mq-ink-3: #5F718E;   /* rotulos                 4.76:1 */

    /* ---- acao: o que o dono dispara ---- */
    --mq-stamp: #1E40AF;  /* 8.72:1 no branco */
    --mq-stamp-ink: #1E3A8A;
    --mq-stamp-tint: #EFF6FF;
    --mq-stamp-tint-2: #DBEAFE;
    --mq-stamp-soft: #60A5FA;  /* serie de dados, nunca texto */
    --mq-on-stamp: #FFFFFF;  /* 8.72:1 sobre a acao. No escuro vira
                                   tinta escura: o azul la e claro e nao
                                   aceitaria branco. */

    /* ---- decisao: o que precisa do dono hoje ---- */
    --mq-cta: #D97706;
    --mq-cta-ink: #F59E0B;
    --mq-cta-tint: #FEF3C7;
    --mq-on-cta: #0F172A;   /* 5.60:1 sobre o ambar */

    /* ---- estados: a cor apoia, a forma decide ---- */
    --mq-ok: #047857;  --mq-ok-tint: #D1FAE5;
    --mq-warn: #B45309;  --mq-warn-tint: #FEF3C7;
    --mq-stop: #B91C1C;  --mq-stop-tint: #FDE8E8;
    --mq-info: #0369A1;  --mq-info-tint: #E0F2FE;
    --mq-idle: #475569;  --mq-idle-tint: #F1F5F9;

    /* ---- gaveta: a consola ---- */
    --mq-gaveta: #0B1222;
    --mq-gaveta-2: #18244A;
    --mq-gaveta-ink: #FFFFFF;
    --mq-gaveta-ink-2: #A9B6CE;
    --mq-gaveta-rule: #1E2B4A;

    /* ---- tipografia: duas familias, papeis diferentes ---- */
    --mq-font-display: 'Space Grotesk', 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mq-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --mq-text-xs:   .6875rem;  /* 11px: rotulo de divisor */
    --mq-text-sm:   .8125rem;  /* 13px: dado de tabela */
    --mq-text-base: .9375rem;  /* 15px: corpo */
    --mq-text-md:   1.0625rem; /* 17px */
    --mq-text-lg:   clamp(1.25rem, 1.15rem + .45vw, 1.5rem);
    --mq-text-xl:   clamp(1.6rem, 1.4rem + .9vw, 2.1rem);
    --mq-text-2xl:  clamp(2rem, 1.6rem + 1.7vw, 3.1rem);
    --mq-track-tight: -.025em;
    --mq-track-label:  .12em;

    /* ---- medidas ---- */
    --mq-gutter:    1.5rem;
    --mq-pad:       1.25rem;
    --mq-gap:       .75rem;
    --mq-sidebar-w: 256px;
    --mq-topbar-h:  60px;
    --mq-row-h:     44px;
    --mq-maxw:      1560px;
    /* Altura do aviso de cookies. MEDIDA pelo JS a cada abertura e a cada
       mudanca de largura (ver secao 38b) — quem manda e o JS.

       O valor abaixo e o PADRAO, para antes do JS rodar, e foi posto no PIOR
       CASO e nao no medio: com o aviso empilhado (abaixo de 640px, pela regra
       do @media) a caixa mede 266px. Um padrao MENOR que o pior caso mente:
       se o JS falhar ou demorar, o espaco fica curto e o aviso volta a cobrir
       o rodape — o defeito que o espaco existe para evitar.
       Medidas: 142px na caixa (170px com o container) em 1000px de janela;
       266px empilhado em 375px. Padrao 17.5rem = 280px, acima das duas. */
    --mq-cookie-h:  17.5rem;

    /* ---- forma: canto arredondado, nunca reto ---- */
    --mq-radius-xs:   6px;   /* ladrilho, pastilha */
    --mq-radius-sm:   8px;   /* botao, campo, badge */
    --mq-radius:     12px;   /* a ficha */
    --mq-radius-md:  14px;   /* aviso, ladrilho de icone */
    --mq-radius-lg:  18px;   /* modal, gaveta, heroi */
    --mq-radius-pill: 999px; /* barra, avatar, pílula */

    /* ---- profundidade: a ficha flutua sempre ----
       Sombra em repouso e a regra que faltava. Uma unica familia de
       alphas baixos e deslocamentos crescentes: nunca parece nevoa. */
    --mq-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --mq-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 6px rgba(15, 23, 42, .05);
    --mq-shadow:    0 1px 2px rgba(15, 23, 42, .06), 0 4px 10px rgba(15, 23, 42, .10), 0 16px 28px rgba(15, 23, 42, .08);
    --mq-shadow-md: 0 2px 4px rgba(15, 23, 42, .07), 0 10px 22px rgba(15, 23, 42, .13), 0 24px 44px rgba(15, 23, 42, .10);
    --mq-shadow-lg: 0 4px 8px rgba(15, 23, 42, .05), 0 18px 40px rgba(15, 23, 42, .10), 0 40px 80px rgba(15, 23, 42, .08);
    --mq-shadow-xl: 0 8px 16px rgba(15, 23, 42, .06), 0 32px 64px rgba(15, 23, 42, .14);
    --mq-shadow-brand: 0 2px 6px rgba(30, 64, 175, .22), 0 8px 20px rgba(30, 64, 175, .18);
    --mq-shadow-cta:   0 2px 6px rgba(217, 119, 6, .24), 0 8px 20px rgba(217, 119, 6, .18);

    /* ---- movimento: uma curva so, saida exponencial ---- */
    --mq-ease: cubic-bezier(.16, 1, .3, 1);
    --mq-fast: 140ms;
    --mq-mid:  240ms;
    --mq-slow: 380ms;

    /* ======================= ALIASES LEGADOS ==========================
       As ~100 blades usam estes nomes. Trocar o visual e seguro; apagar
       um token quebraria telas. Aqui cada nome antigo aponta para o valor
       do mundo novo. */

    --mq-surface: #FFFFFF;
    --mq-surface-2: #F4F6FA;
    --mq-surface-3: #F8FAFC;
    --mq-border: #E7EBF3;
    --mq-text: #0F172A;
    --mq-text-muted: #475569;
    --mq-text-dark: #0F172A;
    --mq-text-dark-muted: #475569;
    --mq-text-invert: #FFFFFF;
    --mq-blue: #1E40AF;
    --mq-blue-2: #60A5FA;
    --mq-blue-900: #1E3A8A;
    --mq-cyan: #64748B;
    --mq-cyan-2: #475569;
    --mq-navy: #0B1222;
    --mq-navy-2: #18244A;
    --mq-navy-3: #1E2B4A;

    --mq-primary: #1E40AF;
    --mq-success: #047857;  --mq-success-bg: #D1FAE5;
    --mq-warning: #B45309;  --mq-warning-bg: #FEF3C7;
    --mq-danger: #DC2626;  --mq-danger-bg: #FEE2E2;
    --mq-info:     #0369A1;  --mq-info-bg: #E0F2FE;

    --mq-link-color: #1E3A8A;
    --mq-link-hover-color: #1E40AF;

    /* Os gradients viram tinta solida: o mundo nao usa gradiente. */
    --mq-gradient: #1E40AF;
    --mq-gradient-hover: #1E3A8A;
    --mq-gradient-soft: #EFF6FF;
    --mq-gradient-full: #1E40AF;

    --mq-sidebar-bg: var(--mq-gaveta);
    --mq-glow: #60A5FA;

    /* ================= Bootstrap com a voz do mundo ================= */
    --bs-body-bg: #F4F6FA;
    --bs-body-color: #0F172A;
    --bs-emphasis-color: #0F172A;
    --bs-secondary-color: #475569;
    --bs-secondary-color-rgb: 71, 85, 105;
    --bs-secondary-rgb: 71, 85, 105;
    --bs-secondary-bg: #F4F6FA;
    --bs-tertiary-color: #64748B;
    --bs-tertiary-bg: #F8FAFC;
    --bs-border-color: #E7EBF3;
    --bs-border-color-translucent: #D9E0EC;
    --bs-primary: #1E40AF;
    --bs-primary-rgb: 30, 64, 175;
    --bs-link-color: #1E3A8A;
    --bs-link-hover-color: #1E40AF;
    --bs-link-color-rgb: 30, 58, 138;
    --bs-link-hover-color-rgb: 30, 64, 175;
    --bs-heading-color: #0F172A;
    --bs-border-radius: 12px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 18px;
    --bs-focus-ring-color: rgba(30, 64, 175, .30);
    --bs-font-sans-serif: 'Archivo', system-ui, sans-serif;
}

/* =========================================================================
   2. BASE
   ========================================================================= */

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--mq-font);
    font-size: var(--mq-text-base);
    line-height: 1.5;
    color: var(--mq-ink);
    background-color: var(--mq-desk);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- escala tipografica real (Bootstrap dava 2.5rem/400 no h1) ---- */

h1, h2, h3, h4, h5, h6 {
    color: var(--mq-ink);
    font-weight: 600;
    text-wrap: balance;
}
h1, .h1 {
    font-size: var(--mq-text-2xl);
    line-height: 1.08;
    letter-spacing: var(--mq-track-tight);
    font-weight: 700;
}
h2, .h2 {
    font-size: var(--mq-text-xl);
    line-height: 1.15;
    letter-spacing: var(--mq-track-tight);
    font-weight: 700;
}
h3, .h3 {
    font-size: var(--mq-text-lg);
    line-height: 1.25;
    letter-spacing: -.012em;
}
h4, .h4 { font-size: 1.1875rem; line-height: 1.3; font-weight: 600; }
h5, .h5 { font-size: var(--mq-text-md); line-height: 1.35; font-weight: 600; }
h6, .h6 { font-size: var(--mq-text-base); line-height: 1.4; font-weight: 600; }
.display-6 {
    font-size: var(--mq-text-2xl);
    line-height: 1.06;
    letter-spacing: -.028em;
    font-weight: 700;
}
.display-5 { font-size: clamp(2.3rem, 1.7rem + 2.4vw, 3.7rem); line-height: 1.04; letter-spacing: -.03em; font-weight: 700; }

p, .lead { max-width: 68ch; }
.lead { font-size: var(--mq-text-md); line-height: 1.55; color: var(--mq-ink-2); font-weight: 400; }

/* Rotulo de divisor: a impressao da divisoria da gaveta. */
.mq-label,
.mq-sidebar .menu-label {
    font-family: var(--mq-font);
    font-size: var(--mq-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--mq-track-label);
    color: var(--mq-ink-3);
}

a { color: var(--mq-link-color); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--mq-link-hover-color); }

hr { border-color: var(--mq-rule); opacity: 1; }

/* =========================================================================
   3. FOCO — anel duplo: contorno escuro + halo do carimbo
   ========================================================================= */

:focus-visible {
    outline: 2px solid var(--mq-ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(43, 63, 224, .45);
    border-radius: var(--mq-radius-sm);
}

/* =========================================================================
   4. GAVETA (sidebar) — a divisoria manda
   ========================================================================= */

.mq-sidebar {
    width: var(--mq-sidebar-w);
    background: var(--mq-gaveta);
    position: fixed; inset: 0 auto 0 0; z-index: 1030;
    display: flex; flex-direction: column;
    transition: transform var(--mq-mid) var(--mq-ease);
    border-right: 1px solid #000;
}

.mq-sidebar .brand {
    min-height: var(--mq-topbar-h);
    display: flex; align-items: center;
    padding: 0 1rem;
    border-bottom: 1px solid var(--mq-gaveta-rule);
    text-decoration: none;
}
.mq-sidebar .brand:hover { text-decoration: none; }

.mq-sidebar nav {
    flex: 1; overflow-y: auto;
    padding: .6rem .5rem 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: #2C3A55 transparent;
}
.mq-sidebar nav::-webkit-scrollbar { width: 5px; }
.mq-sidebar nav::-webkit-scrollbar-thumb { background: #2C3A55; border-radius: 3px; }

.mq-sidebar .menu-label {
    font-size: var(--mq-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--mq-track-label);
    /* 12.0:1 medido sobre a gaveta */
    color: #93A1B8;
    padding: 1.15rem .7rem .35rem;
}
.mq-sidebar .menu-label:first-child { padding-top: .5rem; }

.mq-sidebar .nav-link {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .7rem;
    margin: 1px 0;
    border-radius: var(--mq-radius-sm);
    color: var(--mq-gaveta-ink-2);
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: -.005em;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background var(--mq-fast) var(--mq-ease),
                color var(--mq-fast) var(--mq-ease),
                border-color var(--mq-fast) var(--mq-ease);
}
.mq-sidebar .nav-link i {
    font-size: .95rem; width: 1.1rem; text-align: center;
    flex-shrink: 0; opacity: .75;
}
.mq-sidebar .nav-link:hover {
    background: var(--mq-gaveta-2);
    color: var(--mq-gaveta-ink);
}
.mq-sidebar .nav-link:hover i { opacity: 1; }

/* Estado atual = orelha de divisor puxada para fora, em tinta de carimbo.
   Sem gradiente e sem ladrilho. */
.mq-sidebar .nav-link.active {
    background: var(--mq-gaveta-2);
    color: var(--mq-gaveta-ink);
    font-weight: 600;
    border-left-color: var(--mq-stamp);
}
.mq-sidebar .nav-link.active i { opacity: 1; color: #8E9BFF; }

.mq-sidebar .nav-link .badge {
    margin-left: auto;
    background: var(--mq-stop);
    color: var(--mq-on-stamp);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mq-sidebar .sidebar-foot {
    border-top: 1px solid var(--mq-gaveta-rule);
    padding: .5rem;
}
.mq-sidebar .sidebar-foot .nav-link { color: var(--mq-gaveta-ink-2); }
.mq-sidebar .sidebar-foot .nav-link:hover { color: #fff; background: var(--mq-gaveta-2); }

.mq-skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    background: var(--mq-stamp); color: #fff;
    padding: .6rem 1.1rem; border-radius: 0 0 var(--mq-radius) 0;
    text-decoration: none; font-weight: 600;
}
.mq-skip-link:focus { left: 0; color: #fff; }

.mq-logo { display: block; height: auto; width: auto; max-height: 40px; }
.mq-logo--sidebar { height: 26px; }
.mq-logo--login   { height: 42px; }
.mq-logo--header  { height: 28px; }
.mq-logo--footer  { height: 22px; opacity: .8; }

/* =========================================================================
   5. AREA DE TRABALHO
   ========================================================================= */

.mq-main {
    margin-left: var(--mq-sidebar-w);
    min-height: 100vh;
    display: flex; flex-direction: column;
}

.mq-topbar {
    position: sticky; top: 0; z-index: 1020;
    min-height: var(--mq-topbar-h);
    display: flex; align-items: center; gap: .75rem;
    padding: .5rem 1.5rem;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--mq-rule);
}
.mq-topbar .form-control {
    background: var(--mq-ficha-2);
    border-color: var(--mq-rule);
    font-size: var(--mq-text-sm);
}
.mq-topbar .btn-outline-secondary {
    --bs-btn-color: var(--mq-ink-2);
    --bs-btn-border-color: var(--mq-rule-2);
    --bs-btn-hover-bg: var(--mq-ficha-2);
    --bs-btn-hover-color: var(--mq-ink);
    --bs-btn-hover-border-color: var(--mq-rule-2);
}

.mq-content {
    flex: 1;
    padding: 1.75rem 1.5rem 2.5rem;
    max-width: var(--mq-maxw);
    width: 100%;
}

.mq-footer {
    padding: 1rem 1.5rem;
    font-size: var(--mq-text-xs);
    letter-spacing: .04em;
    color: var(--mq-ink-3);
    border-top: 1px solid var(--mq-rule);
    background: var(--mq-desk);
}

/* ---- cabecalho de pagina: o titulo fala sozinho, sem rotulo acima ---- */

.mq-pagehead {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--mq-rule);
}
.mq-pagehead h1 { margin: 0; }
.mq-pagehead .mq-pagehead__sub {
    margin: .3rem 0 0;
    font-size: var(--mq-text-sm);
    color: var(--mq-ink-2);
    max-width: 62ch;
}

/* =========================================================================
   6. A FICHA — cartao do sistema
   ========================================================================= */

.card { transition: box-shadow var(--mq-mid) var(--mq-ease), border-color var(--mq-fast) var(--mq-ease); }
.card:hover,
.mq-feature:hover,
.mq-simple-card:hover {
    box-shadow: var(--mq-shadow);
    border-color: #AEB9C8;
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--mq-rule);
    padding: .85rem var(--mq-pad);
    font-weight: 600;
    font-size: var(--mq-text-base);
    letter-spacing: -.008em;
    color: var(--mq-ink);
}
.card-body { padding: var(--mq-pad); }
.card-footer {
    background: var(--mq-ficha-2);
    border-top: 1px solid var(--mq-rule);
    padding: .75rem var(--mq-pad);
}

/* ---- vazio ---- */
.mq-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .35rem; padding: 2.5rem 1.25rem; text-align: center;
    color: var(--mq-ink-3); font-size: var(--mq-text-sm);
}
.mq-empty i {
    font-size: 1.5rem; color: var(--mq-rule-2);
    margin-bottom: .2rem;
}
.mq-empty strong { color: var(--mq-ink); font-weight: 600; }

/* ---- carregando ---- */
.mq-skeleton {
    background: var(--mq-ficha-2);
    border: 1px solid var(--mq-rule);
    border-radius: var(--mq-radius-sm);
    position: relative;
    overflow: hidden;
}
.mq-skeleton::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
    background-size: 200% 100%;
    animation: mq-sweep 1.5s linear infinite;
}
@keyframes mq-sweep {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mq-skeleton::after { animation: none; }
}

/* =========================================================================
   7. LEITURA — o total do dia e o extrato
   ========================================================================= */

/* O numero carrega a tela. Sem moldura, sem ladrilho, sem icone decorativo
   ao lado (elevacao herdada do challenger de metrô recusado). */
.mq-readout {
    display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
}
.mq-readout__value {
    font-size: clamp(2.4rem, 1.9rem + 2.2vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.032em;
    color: var(--mq-ink);
    font-variant-numeric: tabular-nums lining-nums;
}
.mq-readout__label {
    font-size: var(--mq-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--mq-track-label);
    color: var(--mq-ink-3);
}

/* Linha de extrato: nome a esquerda, valor encostado na margem direita. */
.mq-ledger { display: flex; flex-direction: column; }
.mq-ledger__row {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--mq-rule);
    text-decoration: none;
    color: var(--mq-ink);
    transition: background var(--mq-fast) var(--mq-ease);
}
.mq-ledger__row:last-child { border-bottom: 0; }
.mq-ledger__row:hover { background: var(--mq-ficha-2); color: var(--mq-ink); }
.mq-ledger__row--head {
    border-bottom: 1px solid var(--mq-rule-2);
    padding-bottom: .45rem;
}
.mq-ledger__row--head .mq-label { color: var(--mq-ink-3); }
.mq-ledger__name {
    font-size: var(--mq-text-sm);
    color: var(--mq-ink);
    min-width: 0;
}
.mq-ledger__meta {
    font-size: var(--mq-text-xs);
    color: var(--mq-ink-3);
    letter-spacing: .02em;
}
.mq-ledger__value {
    margin-left: auto;
    font-size: var(--mq-text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--mq-ink);
    white-space: nowrap;
}


/* =========================================================================
   8. ESTADO COMO FORMA DE LINHA
   ========================================================================= */

.mq-badge,
.mq-state {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .15rem .5rem .15rem .45rem;
    border-radius: var(--mq-radius-sm);
    font-size: var(--mq-text-xs);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .03em;
    white-space: nowrap;
    background: var(--mq-idle-tint);
    color: var(--mq-idle);
    border: 1px solid transparent;
}
.mq-badge::before,
.mq-state::before {
    content: ""; width: 12px; height: 0; flex: none;
    border-top: 2px solid currentColor;
}
.mq-badge--success, .mq-state--ok  { background: var(--mq-ok-tint);   color: var(--mq-ok); }
.mq-badge--warning, .mq-state--pendente { background: var(--mq-warn-tint); color: var(--mq-warn); }
.mq-badge--danger,  .mq-state--atrasado { background: var(--mq-stop-tint); color: var(--mq-stop); }
.mq-badge--info,    .mq-state--info     { background: var(--mq-idle-tint); color: var(--mq-ink-2); }
.mq-badge--brand,   .mq-state--acao     { background: var(--mq-stamp-tint); color: var(--mq-stamp-ink); }

/* forma do estado: a cor acompanha, mas quem fala e a linha */
.mq-badge--pending::before { border-top-style: dashed; }
.mq-badge--waiting::before { border-top-style: dotted; }
.mq-badge--cut::before     { box-shadow: 3px 0 0 -1px currentColor; }

/* badge do Bootstrap herda a voz do mundo */
.badge.text-bg-primary { background: var(--mq-stamp) !important; color: #fff; border-radius: var(--mq-radius-sm); }
.badge.rounded-pill     { border-radius: var(--mq-radius-sm) !important; }
.badge.text-bg-success  { background: var(--mq-ok-tint)   !important; color: var(--mq-ok); border-radius: var(--mq-radius-sm); }
.badge.text-bg-warning  { background: var(--mq-warn-tint) !important; color: var(--mq-warn); border-radius: var(--mq-radius-sm); }
.badge.text-bg-danger   { background: var(--mq-stop)      !important; color: #fff; border-radius: var(--mq-radius-sm); }
.badge.text-bg-info     { background: var(--mq-idle-tint) !important; color: var(--mq-ink-2); border-radius: var(--mq-radius-sm); }
.badge.text-bg-light    { background: var(--mq-ficha-2)  !important; color: var(--mq-ink-2); border: 1px solid var(--mq-rule); }
.badge.text-bg-secondary{ background: var(--mq-ficha-2)  !important; color: var(--mq-ink-2); border: 1px solid var(--mq-rule); }

/* ---- progresso: barra fina, sem gradiente ---- */
.progress {
    background-color: var(--mq-ficha-2);
    border: 1px solid var(--mq-rule);
    border-radius: 999px;
    height: 5px;
}
.progress-bar { background-color: var(--mq-stamp); border-radius: 999px; }

/* ---- avisos: fio de topo em vez de ladrilho colorido ---- */
/* O aviso e papel pintato com fio da propria cor: tom + contorno de 1px.
   Sem trilho colorido na lateral — o tom ja diz a severidade, e a barra
   lateral era ornamento redundante. */
.alert {
    border-radius: var(--mq-radius);
    border: 1px solid var(--mq-rule-2);
    font-size: var(--mq-text-sm);
}
.alert-success { background: var(--mq-ok-tint);   border-color: var(--mq-ok);   color: #0A4C38; }
.alert-danger,
.alert-error   { background: var(--mq-stop-tint); border-color: var(--mq-stop); color: #8A1728; }
.alert-warning { background: var(--mq-warn-tint); border-color: var(--mq-warn); color: #6A4600; }
.alert-info    { background: var(--mq-stamp-tint); border-color: var(--mq-stamp); color: var(--mq-stamp-ink); }

/* =========================================================================
   9. BOTOES — tinta, nao ladrilho
   ========================================================================= */

.btn {
    --bs-btn-border-radius: var(--mq-radius-sm);
    font-family: var(--mq-font);
    font-weight: 600;
    font-size: var(--mq-text-sm);
    letter-spacing: -.005em;
    transition: background var(--mq-fast) var(--mq-ease),
                border-color var(--mq-fast) var(--mq-ease),
                color var(--mq-fast) var(--mq-ease),
                box-shadow var(--mq-fast) var(--mq-ease);
}

.btn-mq-primary,
.btn-primary {
    --bs-btn-bg: var(--mq-stamp);
    --bs-btn-border-color: var(--mq-stamp);
    --bs-btn-hover-bg: var(--mq-stamp-ink);
    --bs-btn-hover-border-color: var(--mq-stamp-ink);
    --bs-btn-active-bg: var(--mq-stamp-ink);
    --bs-btn-active-border-color: var(--mq-stamp-ink);
    --bs-btn-disabled-bg: var(--mq-ficha-2);
    --bs-btn-disabled-border-color: var(--mq-rule-2);
    --bs-btn-color: var(--mq-on-stamp);
    --bs-btn-hover-color: var(--mq-on-stamp);
    background-color: var(--mq-stamp);
    border-color: var(--mq-stamp);
    color: var(--mq-on-stamp);
}
.btn-mq-primary:hover,
.btn-mq-primary:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: var(--mq-stamp-ink);
    border-color: var(--mq-stamp-ink);
    color: var(--mq-on-stamp);
    box-shadow: var(--mq-shadow-brand);
}
.btn-mq-primary:disabled { opacity: .6; }
.btn-mq-primary.btn-pill { border-radius: var(--mq-radius-pill); }

.btn-mq-ghost,
.btn-outline-secondary {
    --bs-btn-color: var(--mq-ink);
    --bs-btn-border-color: var(--mq-rule-2);
    --bs-btn-hover-bg: var(--mq-ficha-2);
    --bs-btn-hover-color: var(--mq-ink);
    --bs-btn-hover-border-color: #AEB9C8;
    background: transparent;
    border: 1px solid var(--mq-rule-2);
    color: var(--mq-ink);
}
.btn-mq-ghost:hover { background: var(--mq-ficha-2); border-color: #AEB9C8; }

.btn-outline-primary {
    --bs-btn-color: var(--mq-stamp-ink);
    --bs-btn-border-color: var(--mq-stamp);
    --bs-btn-hover-bg: var(--mq-stamp);
    --bs-btn-hover-border-color: var(--mq-stamp);
    --bs-btn-hover-color: var(--mq-on-stamp);
    --bs-btn-active-bg: var(--mq-stamp-ink);
    --bs-btn-active-color: #fff;
    color: var(--mq-stamp-ink);
    border-color: var(--mq-stamp);
}
.btn-outline-primary:hover { background: var(--mq-stamp); border-color: var(--mq-stamp); color: #fff; }

.btn-link { color: var(--mq-stamp-ink); font-weight: 600; text-decoration: none; }
.btn-link:hover { color: var(--mq-stamp); text-decoration: underline; }

.btn-mq-outline-light {
    background: transparent;
    border: 1px solid rgba(255,255,255,.42);
    color: var(--mq-on-stamp);
    border-radius: var(--mq-radius-sm);
    font-weight: 600;
}
.btn-mq-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-outline-light { border-radius: var(--mq-radius-sm); }

.btn-close { opacity: .55; }
.btn-close:hover { opacity: 1; }

/* =========================================================================
   10. CAMPOS — o dado e escrito na ficha
   ========================================================================= */

.form-control,
.form-select {
    font-family: var(--mq-font);
    font-size: var(--mq-text-sm);
    color: var(--mq-ink);
    background-color: var(--mq-ficha);
    border: 1px solid var(--mq-rule-2);
    border-radius: var(--mq-radius-sm);
    padding: .5rem .7rem;
    transition: border-color var(--mq-fast) var(--mq-ease), box-shadow var(--mq-fast) var(--mq-ease);
}
.form-control::placeholder { color: #8A97AC; }
.form-control:focus,
.form-select:focus {
    background-color: var(--mq-ficha);
    border-color: var(--mq-stamp);
    box-shadow: var(--mq-focus-ring);
    outline: 0;
    color: var(--mq-ink);
}
.form-control:disabled,
.form-select:disabled { background: var(--mq-ficha-2); color: var(--mq-ink-3); }

.form-label {
    font-size: var(--mq-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--mq-track-label);
    color: var(--mq-ink-3);
    margin-bottom: .3rem;
}
.form-text { font-size: var(--mq-text-xs); color: var(--mq-ink-3); }

.form-check-input { border-color: var(--mq-rule-2); border-radius: var(--mq-radius-sm); }
.form-check-input:checked,
.form-switch .form-check-input:checked {
    background-color: var(--mq-stamp);
    border-color: var(--mq-stamp);
}
.form-check-input:focus,
.form-switch .form-check-input:focus {
    border-color: var(--mq-stamp);
    box-shadow: var(--mq-focus-ring);
}

.input-group-text {
    background: var(--mq-ficha-2);
    border-color: var(--mq-rule-2);
    color: var(--mq-ink-2);
    font-size: var(--mq-text-sm);
}

.dropdown-menu {
    border: 1px solid var(--mq-rule-2);
    border-radius: var(--mq-radius);
    box-shadow: var(--mq-shadow-md);
    font-size: var(--mq-text-sm);
    padding: .3rem;
}
.dropdown-item {
    border-radius: var(--mq-radius-sm);
    padding: .45rem .6rem;
    color: var(--mq-ink);
}
.dropdown-item:hover,
.dropdown-item:focus { background: var(--mq-ficha-2); color: var(--mq-ink); }
.dropdown-item.text-danger { color: var(--mq-stop) !important; }
.dropdown-header {
    font-size: var(--mq-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--mq-track-label);
    color: var(--mq-ink-3);
}

.nav-tabs {
    border-bottom: 1px solid var(--mq-rule);
    gap: .15rem;
}
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--mq-ink-2);
    font-size: var(--mq-text-sm);
    font-weight: 600;
    padding: .5rem .8rem;
}
.nav-tabs .nav-link:hover { color: var(--mq-ink); border-bottom-color: var(--mq-rule-2); }
.nav-tabs .nav-link.active {
    color: var(--mq-ink);
    background: transparent;
    border-bottom-color: var(--mq-stamp);
}

.pagination { --bs-pagination-color: var(--mq-stamp-ink); --bs-pagination-bg: var(--mq-ficha); }
.pagination .page-link {
    border-color: var(--mq-rule);
    color: var(--mq-ink-2);
    font-size: var(--mq-text-sm);
    border-radius: var(--mq-radius-sm) !important;
}
.pagination .page-link:hover { background: var(--mq-ficha-2); color: var(--mq-ink); }
.pagination .page-item.active .page-link {
    background: var(--mq-stamp);
    border-color: var(--mq-stamp);
    color: var(--mq-on-stamp);
}

.modal-content {
    border: 1px solid var(--mq-rule-2);
    border-radius: var(--mq-radius);
    box-shadow: var(--mq-shadow-lg);
}
.modal-header, .modal-footer { border-color: var(--mq-rule); }
.modal-header .modal-title { font-size: var(--mq-text-lg); font-weight: 600; letter-spacing: -.012em; }

/* =========================================================================
   11. O EXTRATO — listagem como quem le o banco
   ========================================================================= */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--mq-ink);
    --bs-table-border-color: var(--mq-rule);
    --bs-table-striped-color: var(--mq-ink);
    --bs-table-striped-bg: var(--mq-ficha-2);
    --bs-table-hover-color: var(--mq-ink);
    --bs-table-hover-bg: var(--mq-ficha-2);
    font-size: var(--mq-text-sm);
    margin-bottom: 0;
}
.table > thead th {
    font-size: var(--mq-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--mq-track-label);
    color: var(--mq-ink-3);
    background: var(--mq-ficha-2);
    border-bottom: 1px solid var(--mq-rule-2);
    padding: .6rem .85rem;
    white-space: nowrap;
}
.table > tbody td {
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--mq-rule);
    vertical-align: middle;
}
.table > tbody tr:last-child > td { border-bottom: 0; }
.table > tbody tr:hover { background: var(--mq-ficha-2); }
.table td.text-end, .table th.text-end { font-variant-numeric: tabular-nums lining-nums; }

/* Linha de listagem usada nos cards de painel */
.mq-row {
    display: flex; align-items: center; gap: .75rem;
    padding: .65rem var(--mq-pad);
    border-bottom: 1px solid var(--mq-rule);
    transition: background var(--mq-fast) var(--mq-ease);
}
.mq-row:last-child { border-bottom: 0; }
.mq-row:hover { background: var(--mq-ficha-2); }
.mq-row__name { font-size: var(--mq-text-sm); color: var(--mq-ink); }
.mq-row__meta { font-size: var(--mq-text-xs); color: var(--mq-ink-3); }

/* ---- avatar: iniciais impressas, nao ladrilho gradiente ---- */
.mq-avatar {
    width: 32px; height: 32px; border-radius: var(--mq-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background-color: var(--mq-stamp-tint);
    border: 1px solid var(--mq-stamp-tint-2);
    color: var(--mq-stamp-ink);
    font-weight: 600; font-size: .78rem;
    text-decoration: none; flex-shrink: 0;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
}
.mq-avatar--sm { width: 24px; height: 24px; font-size: .66rem; }
.mq-avatar--lg { width: 44px; height: 44px; font-size: 1rem; }

/* ---- ladrilho de icone: so onde o icone E o conteudo ---- */
.mq-stat-icon {
    width: 42px; height: 42px; border-radius: var(--mq-radius);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem; flex-shrink: 0;
}
.mq-stat-icon--violet { background: var(--mq-stamp-tint); color: var(--mq-stamp-ink); }
.mq-stat-icon--blue   { background: var(--mq-ficha-2);   color: var(--mq-ink-2); border: 1px solid var(--mq-rule); }
.mq-stat-icon--cyan   { background: var(--mq-ficha-2);   color: var(--mq-ink-2); border: 1px solid var(--mq-rule); }
.mq-stat-icon--green  { background: var(--mq-ok-tint);   color: var(--mq-ok); }
.mq-stat-icon--amber  { background: var(--mq-warn-tint); color: var(--mq-warn); }
.mq-stat-icon--red    { background: var(--mq-stop-tint); color: var(--mq-stop); }

/* ---- KPIs legados: agora e linha de extrato, nao fatia de bolo ---- */
.mq-kpi-value {
    font-size: 1.75rem; font-weight: 700; line-height: 1.05;
    letter-spacing: -.028em;
    color: var(--mq-ink);
    font-variant-numeric: tabular-nums lining-nums;
}
.mq-kpi-label {
    font-size: var(--mq-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--mq-track-label);
    font-weight: 600;
    color: var(--mq-ink-3);
}

/* ---- regua de estagio: ciclo de vida, herdada do herbario ---- */
.mq-stage { display: flex; align-items: center; gap: 0; margin: .35rem 0 .1rem; }
.mq-stage__seg {
    flex: 1; height: 4px;
    border-top: 2px solid var(--mq-rule-2);
}
.mq-stage__seg--done { border-top-color: var(--mq-stamp); }
.mq-stage__seg--now  { border-top-color: var(--mq-stamp); border-top-style: dashed; }
.mq-stage__seg--late { border-top-color: var(--mq-stop); border-top-style: dotted; }
.mq-stage__cap {
    font-size: var(--mq-text-xs); color: var(--mq-ink-3);
    letter-spacing: .02em; margin-top: .3rem;
}

/* ---- kanban: coluna e canal, ficha e a que se move ---- */
.mq-kanban-cards { display: flex; flex-direction: column; gap: .5rem; }
.mq-kanban-card:hover { border-color: #AEB9C8; box-shadow: var(--mq-shadow); transform: translateY(-1px); }
.mq-kanban-card:focus-within { outline: 2px solid var(--mq-ink); outline-offset: 1px; }
.mq-kanban-chip {
    font-size: var(--mq-text-xs); font-weight: 600;
    padding: .1rem .4rem; border-radius: var(--mq-radius-sm);
    background: var(--mq-ficha-2); border: 1px solid var(--mq-rule); color: var(--mq-ink-2);
}
.mq-kanban-status {
    font-size: var(--mq-text-xs); text-transform: uppercase;
    letter-spacing: var(--mq-track-label); color: var(--mq-ink-3); font-weight: 600;
}

/* =========================================================================
   12. SITE PUBLICO
   ========================================================================= */

.public-body { background: var(--mq-desk); }

/* ---- o heroi e uma tese, nao um cabecalho com ladrilho ---- */
.mq-hero {
    background: var(--mq-gaveta);
    color: var(--mq-on-stamp);
    border-radius: var(--mq-radius);
    position: relative;
    overflow: hidden;
    padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.25rem, 1rem + 2vw, 3.25rem);
}
.mq-hero h1, .mq-hero h2 { color: #fff; }
.mq-hero .lead { color: rgba(255,255,255,.76); }
.mq-hero .badge-soft {
    background: rgba(255,255,255,.09);
    color: var(--mq-on-stamp);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--mq-radius-sm);
    font-size: var(--mq-text-xs);
    font-weight: 600;
    letter-spacing: var(--mq-track-label);
    text-transform: uppercase;
}

.mq-feature {
    padding: var(--mq-pad);
    height: 100%;
}
.mq-feature i { font-size: 1.35rem; }
/* Icones do sistema: a cor e da ficha, o glifo apenas confirma. Regra global
   (era escopada em .mq-feature — os mesmos glifos em outras secoes ficavam
   sem cor, silenciosamente). */
i.mq-i-violet { color: var(--mq-stamp-ink); }
i.mq-i-blue   { color: var(--mq-ink-2); }
i.mq-i-cyan   { color: var(--mq-ink-3); }
.mq-feature h3, .mq-feature h5, .mq-feature h6 { color: var(--mq-ink); }
.mq-feature .text-secondary { color: var(--mq-ink-2) !important; }
.mq-feature:hover i { color: var(--mq-stamp); }

.mq-simple-card { padding: var(--mq-pad); height: 100%; }
.mq-plan-card { padding: var(--mq-pad); height: 100%; text-align: center; }
.mq-plan-card .fs-4 { font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.025em; }

.mq-logo-word { font-weight: 700; letter-spacing: -.02em; color: var(--mq-ink); }
.mq-topbar-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; }
.mq-topbar-link:hover { color: var(--mq-ink); }
.mq-card-link { color: var(--mq-stamp-ink); font-weight: 600; text-decoration: none; }
.mq-card-link:hover { text-decoration: underline; }
.mq-copy-pw { cursor: pointer; color: var(--mq-ink-3); }
.mq-toggle { cursor: pointer; }

/* ---- organograma da equipe de agentes: linha e no ---- */
.mq-org { position: relative; background: var(--mq-ficha); border: 1px solid var(--mq-rule-2); border-radius: var(--mq-radius); }
.mq-org-node {
    background: var(--mq-ficha-2);
    border: 1px solid var(--mq-rule);
    border-radius: var(--mq-radius-sm);
    padding: .8rem 1rem;
    height: 100%;
    font-weight: 600;
    transition: border-color var(--mq-fast) var(--mq-ease), background var(--mq-fast) var(--mq-ease);
}
.mq-org-node:hover { border-color: var(--mq-stamp); background: var(--mq-stamp-tint); }
.mq-org-connector { color: var(--mq-rule-2); font-size: 1.1rem; line-height: 1; }
/* O no em atividade se distingue pelo fundo e pelo fio, nao por barra lateral. */
.mq-org-node.mq-pulse {
    animation: none;
    background: var(--mq-stamp-tint);
    border-color: var(--mq-stamp);
}
.mq-integration-icon {
    width: 38px; height: 38px; border-radius: var(--mq-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mq-ficha-2); border: 1px solid var(--mq-rule); color: var(--mq-ink-2);
}

/* ---- FAQ: regra de fichario, nao caixa ---- */
.faq-item { border-bottom: 1px solid var(--mq-rule); padding: .85rem 0; }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary {
    cursor: pointer; font-weight: 600; font-size: var(--mq-text-sm);
    list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+"; font-size: 1.1rem; color: var(--mq-ink-3); font-weight: 400;
}
.faq-item[open] summary::after { content: "\2212"; color: var(--mq-stamp); }
.faq-item .text-secondary { color: var(--mq-ink-2) !important; }

/* ---- selo de senha temporaria ---- */
.mq-temp-password {
    background: var(--mq-warn-tint);
    border: 1px solid var(--mq-warn);
    border-radius: var(--mq-radius-sm);
    padding: .7rem .9rem;
    font-size: var(--mq-text-sm);
}
.mq-err { color: var(--mq-stop); font-size: var(--mq-text-sm); }
.mq-search { width: 100%; }
.mq-search-results { max-height: 420px; overflow-y: auto; }
.mq-del-url, .mq-del-slug { word-break: break-all; font-variant-numeric: tabular-nums; }

/* =========================================================================
   13. SUPERFICIES DO NAVEGADOR
   ========================================================================= */

::selection { background: var(--mq-stamp-tint-2); color: var(--mq-ink); }
input, textarea, select { caret-color: var(--mq-stamp); }

* { scrollbar-width: thin; scrollbar-color: #B6C0CE transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #C3CCD8; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #A5B0C0; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

.table td, .table th, .mq-readout__value, .mq-kpi-value, .fs-4,
.mq-ledger__value, .mq-page-title, .mq-avatar {
    font-variant-numeric: tabular-nums lining-nums;
}
.mq-page-title { font-weight: 600; letter-spacing: -.015em; }

/* =========================================================================
   14. RESPONSIVO
   ========================================================================= */

.mq-sidebar-overlay {
    position: fixed; inset: 0; z-index: 1029;
    background: rgba(12, 18, 32, .5);
    display: none;
}
body.sidebar-open .mq-sidebar-overlay { display: block; }

@media (max-width: 991.98px) {
    .mq-sidebar { transform: translateX(-100%); }
    body.sidebar-open .mq-sidebar { transform: translateX(0); }
    .mq-main { margin-left: 0; }
    .mq-content { padding: 1.25rem 1rem 2rem; }
    .mq-topbar { padding: .5rem 1rem; }
    .mq-footer { padding: .75rem 1rem; font-size: var(--mq-text-xs); }
}

@media (max-width: 575.98px) {
    .mq-content { padding: 1rem .75rem 1.5rem; }
    .mq-topbar { padding: .45rem .75rem; }
    .mq-readout__value { font-size: 2.1rem; }
    .mq-kpi-value { font-size: 1.4rem; }
    .mq-pagehead { align-items: flex-start; flex-direction: column; gap: .75rem; }
    .mq-footer { font-size: .68rem; }
    .mq-hero { border-radius: 0; margin-left: -1rem; margin-right: -1rem; }
}

/* =========================================================================
   15. MOVIMENTO REDUZIDO
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .mq-sidebar, .mq-sidebar-overlay { transition: none; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================================
   16. TEMA ESCURO — a mesma gaveta acesa
   ========================================================================= */

[data-bs-theme="dark"] {
    /* ---- a mesa e a ficha, agora acesas ---- */
    --mq-desk: #080D18;
    --mq-desk-2: #0C1424;
    --mq-ficha: #131C31;   /* a ficha e MAIS CLARA que a mesa */
    --mq-ficha-2: #1A2440;
    --mq-rule: #1E2A47;
    --mq-rule-2: #2A3A5C;
    --mq-ink: #F8FAFC;
    --mq-ink-2: #C3CDDF;
    --mq-ink-3: #93A1B8;

    /* ---- acao: azul claro, com tinta escura por cima ---- */
    --mq-stamp: #60A5FA;   /* tinta #0B1222 sobre ele: 7.0:1 */
    --mq-stamp-ink: #93C5FD;
    --mq-stamp-tint: #16264A;
    --mq-stamp-tint-2: #1D3A6B;
    --mq-stamp-soft: #3B82F6;
    --mq-on-stamp: #0B1222;

    /* ---- decisao ---- */
    --mq-cta: #F59E0B;
    --mq-cta-ink: #FBBF24;
    --mq-cta-tint: #3A2A08;
    --mq-on-cta: #0B1222;

    /* ---- estados: tonalidades claras, todas acima de 7:1 no escuro ---- */
    --mq-ok: #34D399;  --mq-ok-tint: #0C3327;
    --mq-warn: #FBBF24;  --mq-warn-tint: #3A2C0B;
    --mq-stop: #F87171;  --mq-stop-tint: #3B1519;
    --mq-info: #38BDF8;  --mq-info-tint: #0B2B42;
    --mq-idle: #C3CDDF;  --mq-idle-tint: #1A2440;

    /* ---- gaveta ---- */
    --mq-gaveta: #060B16;
    --mq-gaveta-2: #16264A;
    --mq-gaveta-rule: #1A2642;

    /* ---- profundidade: no escuro a sombra quase nao le; quem separa
           superficie de mesa e o CONTORNO, com um toque de luz no topo. ---- */
    --mq-shadow-xs: 0 1px 2px rgba(0, 0, 0, .45);
    --mq-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .4);
    --mq-shadow:    0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .45);
    --mq-shadow-md: 0 2px 6px rgba(0, 0, 0, .5), 0 12px 28px rgba(0, 0, 0, .5);
    --mq-shadow-lg: 0 6px 14px rgba(0, 0, 0, .55), 0 24px 56px rgba(0, 0, 0, .55);
    --mq-shadow-xl: 0 10px 24px rgba(0, 0, 0, .6), 0 40px 80px rgba(0, 0, 0, .6);
    --mq-shadow-brand: 0 2px 8px rgba(0, 0, 0, .5);
    --mq-shadow-cta:   0 2px 8px rgba(0, 0, 0, .5);

    --bs-body-bg: #080D18;
    --bs-body-color: #F8FAFC;
    --bs-emphasis-color: #F8FAFC;
    --bs-secondary-color: #C3CDDF;
    --bs-secondary-color-rgb: 195, 205, 223;
    --bs-secondary-rgb: 195, 205, 223;
    --bs-secondary-bg: #131C31;
    --bs-tertiary-color: #93A1B8;
    --bs-tertiary-bg: #1A2440;
    --bs-border-color: #1E2A47;
    --bs-border-color-translucent: #2A3A5C;
    --bs-link-color: #93C5FD;
    --bs-link-hover-color: #BFDBFE;
    --bs-link-color-rgb: 147, 197, 253;
    --bs-link-hover-color-rgb: 191, 219, 254;
    --bs-heading-color: #F8FAFC;
    --bs-primary: #60A5FA;
    --bs-primary-rgb: 96, 165, 250;
    --bs-focus-ring-color: rgba(96, 165, 250, .45);

    --mq-link-color: #93C5FD;
    --mq-link-hover-color: #BFDBFE;

    --mq-topbar, .mq-topbar .form-control { background: rgba(19, 28, 49, .86); }
}

/* ==== fragmento: ledger-dark ==== */
/* Extrato sobre superficie escura (heroi do site publico) e linha de decisao */

.mq-ledger--on-dark .mq-ledger__row { border-bottom-color: rgba(255, 255, 255, .16); }
.mq-ledger--on-dark .mq-ledger__name { color: #fff; font-weight: 600; }
.mq-ledger--on-dark .mq-ledger__meta {
    color: rgba(255, 255, 255, .66);
    margin-left: auto;
    padding-left: 1rem;
    text-align: right;
}
.mq-ledger--on-dark .mq-ledger__row:last-child { border-bottom: 0; }

.mq-ledger__row--link {
    padding: .8rem var(--mq-pad);
    color: var(--mq-ink);
}

/* Estado vazio de forma: um no sem texto dentro do trilho */
.mq-state:empty { padding: .15rem .3rem; }

/* Trilho: a linha de cima precisa ser visivel mesmo sem itens */
.mq-rail:empty { display: none; }

/* =========================================================================
   17. VOZ NOVA — sobreposicoes do mundo "sala de controle"
   -------------------------------------------------------------------------
   Este bloco vem DEPOIS de tudo e corrige as escolhas do mundo anterior que
   eram a causa da reclamacao: canto reto, fio no lugar da sombra, botao
   chapado. Nao mexe em nenhum token — mexe em como os tokens sao usados.
   ========================================================================= */

/* ---- 1. A FICHA FLUTUA ----
   Era `box-shadow: none` com fio de 1px. Era o erro principal. */
.card,
.mq-feature,
.mq-simple-card,
.mq-plan-card,
.mq-card {
    border: 1px solid var(--mq-rule-2);
    border-radius: var(--mq-radius);
    box-shadow: var(--mq-shadow);
    transition: box-shadow var(--mq-mid) var(--mq-ease),
                border-color var(--mq-fast) var(--mq-ease),
                transform var(--mq-mid) var(--mq-ease);
}
.card:hover,
.mq-feature:hover,
.mq-simple-card:hover,
.mq-plan-card:hover {
    border-color: #C4CFE0;
    box-shadow: var(--mq-shadow-md);
    transform: translateY(-2px);
}
.card-header {
    padding: 1rem var(--mq-pad);
    background: transparent;
    border-bottom: 1px solid var(--mq-rule);
    font-weight: 600;
}
.card-body { padding: var(--mq-pad); }

/* Ficha dentro de ficha nao repete a flutuacao: some com o anel. */
.card .card { border: 0; box-shadow: none; background: var(--mq-ficha-2); }

/* ---- 2. O BOTAO TEM ALTURA E PRESSAO ----
   Botao de 28px nao parece clicavel. 40px e o minimo que o dedo aceita. */
.btn {
    min-height: 40px;
    padding: .5rem 1rem;
    border-radius: var(--mq-radius-sm);
    font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
    gap: .45rem;
}
.btn-sm {
    min-height: 32px;
    padding: .25rem .7rem;
    border-radius: var(--mq-radius-xs);
    font-size: var(--mq-text-xs);
}
.btn-lg {
    min-height: 48px;
    padding: .7rem 1.4rem;
    border-radius: var(--mq-radius-sm);
    font-size: var(--mq-text-base);
}

/* Acao: azul de marca, sombra colorida, afunda ao clicar. */
.btn-mq-primary,
.btn-primary {
    background-color: var(--mq-stamp);
    border: 1px solid var(--mq-stamp);
    color: var(--mq-on-stamp);
    box-shadow: var(--mq-shadow-brand);
}
.btn-mq-primary:hover,
.btn-mq-primary:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: var(--mq-stamp-ink);
    border-color: var(--mq-stamp-ink);
    color: var(--mq-on-stamp);
    box-shadow: var(--mq-shadow-brand);
}
.btn-mq-primary:active,
.btn-primary:active {
    transform: translateY(1px);
    box-shadow: var(--mq-shadow-xs);
}
.btn-mq-primary:disabled { opacity: .55; box-shadow: none; }

/* Decisao: o ambar existe para o que o dono precisa decidir hoje. */
.btn-mq-cta {
    background-color: var(--mq-cta);
    border: 1px solid var(--mq-cta);
    color: var(--mq-on-cta);
    box-shadow: var(--mq-shadow-cta);
    font-weight: 700;
}
.btn-mq-cta:hover,
.btn-mq-cta:focus-visible {
    background-color: var(--mq-cta-ink);
    border-color: var(--mq-cta-ink);
    color: var(--mq-on-cta);
    box-shadow: var(--mq-shadow-cta);
}
.btn-mq-cta:active { transform: translateY(1px); box-shadow: var(--mq-shadow-xs); }

/* Contorno: superficie com fio, sem preenchimento. */
.btn-mq-ghost,
.btn-outline-secondary {
    background: var(--mq-ficha);
    border: 1px solid var(--mq-rule-2);
    color: var(--mq-ink);
    box-shadow: var(--mq-shadow-xs);
}
.btn-mq-ghost:hover,
.btn-outline-secondary:hover {
    background: var(--mq-ficha-2);
    border-color: #C4CFE0;
    color: var(--mq-ink);
    box-shadow: var(--mq-shadow-sm);
}
.btn-outline-primary {
    background: transparent;
    border: 1px solid var(--mq-stamp);
    color: var(--mq-stamp-ink);
    box-shadow: none;
}
.btn-outline-primary:hover {
    background: var(--mq-stamp);
    border-color: var(--mq-stamp);
    color: var(--mq-on-stamp);
}

/* ---- 3. CAMPOS COM ALTURA ---- */
.form-control,
.form-select {
    min-height: 40px;
    padding: .5rem .8rem;
    border-radius: var(--mq-radius-sm);
    border: 1px solid var(--mq-rule-2);
    background-color: var(--mq-ficha);
    box-shadow: var(--mq-shadow-xs);
    transition: border-color var(--mq-fast) var(--mq-ease),
                box-shadow var(--mq-fast) var(--mq-ease);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--mq-stamp);
    background-color: var(--mq-ficha);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, .18), var(--mq-shadow-xs);
    outline: 0;
}
.form-control-lg,
.form-select-lg {
    min-height: 48px;
    border-radius: var(--mq-radius-sm);
    font-size: var(--mq-text-base);
}
.input-group-text {
    background: var(--mq-ficha-2);
    border-color: var(--mq-rule-2);
    border-radius: var(--mq-radius-sm);
}
.form-check-input { border-radius: var(--mq-radius-xs); }
.form-check-input:checked {
    background-color: var(--mq-stamp);
    border-color: var(--mq-stamp);
}

/* ---- 4. AVISOS: pílula de vidro, nao papel pintado ---- */
.alert {
    border-radius: var(--mq-radius-md);
    border: 1px solid transparent;
    padding: .9rem 1.1rem;
    box-shadow: var(--mq-shadow-sm);
}
.alert-success { background: var(--mq-ok-tint);   border-color: var(--mq-ok);   color: #04543C; }
.alert-danger,
.alert-error   { background: var(--mq-stop-tint); border-color: var(--mq-stop); color: #9F1D2F; }
.alert-warning { background: var(--mq-warn-tint); border-color: var(--mq-warn); color: #7A4A00; }
.alert-info    { background: var(--mq-info-tint); border-color: var(--mq-info); color: #02547F; }
.alert-heading { font-weight: 700; letter-spacing: -.01em; }

/* ---- 5. ESTADO COMO FORMA DE PONTO ----
   Antes era um fio de 2px atravessado no meio da pastilha, que lia como
   risco. Agora e um ponto, e o ponto muda de forma: cheio, vazado, losango. */
.mq-badge,
.mq-state {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .2rem .6rem .2rem .5rem;
    border-radius: var(--mq-radius-pill);
    font-size: var(--mq-text-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--mq-idle-tint);
    color: var(--mq-idle);
    border: 1px solid transparent;
}
.mq-badge::before,
.mq-state::before {
    content: ""; width: 7px; height: 7px; flex: none;
    border-radius: 50%;
    background: currentColor;
}
.mq-badge--pending::before,
.mq-state--pendente::before {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px currentColor;
}
.mq-badge--cut::before,
.mq-state--atrasado::before {
    border-radius: 1px;
    transform: rotate(45deg);
}
.badge { border-radius: var(--mq-radius-pill); }
.badge.text-bg-primary { background: var(--mq-stamp) !important; color: var(--mq-on-stamp); }
.badge.rounded-pill     { border-radius: var(--mq-radius-pill) !important; }
.badge.text-bg-success  { background: var(--mq-ok-tint)  !important; color: var(--mq-ok); }
.badge.text-bg-warning  { background: var(--mq-warn-tint)!important; color: var(--mq-warn); }
.badge.text-bg-danger   { background: var(--mq-stop-tint)!important; color: var(--mq-stop); }
.badge.text-bg-info     { background: var(--mq-info-tint)!important; color: var(--mq-info); }
.badge.text-bg-light,
.badge.text-bg-secondary {
    background: var(--mq-ficha-2) !important;
    color: var(--mq-ink-2);
    border: 1px solid var(--mq-rule);
}

/* ---- 6. PROGRESSO COM VOLUME ---- */
.progress {
    height: 8px;
    border-radius: var(--mq-radius-pill);
    background-color: var(--mq-desk-2);
    border: 0;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06);
    overflow: hidden;
}
.progress-bar {
    background-color: var(--mq-stamp);
    border-radius: var(--mq-radius-pill);
}

/* ---- 7. NAVEGACAO DA GAVETA: pílula em vez de orelha de divisor ----
   O `border-left` de 2px no item ativo era o unico resto do fichario. */
.mq-sidebar { border-right: 0; }
.mq-sidebar .nav-link {
    border-left: 0;
    border-radius: var(--mq-radius-sm);
    padding: .55rem .7rem;
    min-height: 38px;
}
.mq-sidebar .nav-link.active {
    background: var(--mq-gaveta-2);
    color: var(--mq-on-stamp);
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, .22);
}
.mq-sidebar .nav-link.active i { color: #93C5FD; }
.mq-sidebar .nav-link:hover { background: var(--mq-gaveta-2); }

/* ---- 8. TABELA: cabecalho claro, linha fina, numero alinhado ---- */
.table > thead th {
    background: var(--mq-ficha-2);
    border-bottom: 1px solid var(--mq-rule-2);
    color: var(--mq-ink-3);
    padding: .7rem .9rem;
}
.table > tbody td { padding: .8rem .9rem; }
.table > tbody tr { transition: background var(--mq-fast) var(--mq-ease); }
.table > tbody tr:hover { background: var(--mq-ficha-2); }
.table td.text-end, .table th.text-end { font-variant-numeric: tabular-nums lining-nums; }

/* ---- 9. MENU, MODAL E ABAS com o mesmo volume do resto ---- */
.dropdown-menu {
    border-radius: var(--mq-radius-md);
    border: 1px solid var(--mq-rule-2);
    box-shadow: var(--mq-shadow-lg);
    padding: .4rem;
}
.dropdown-item { border-radius: var(--mq-radius-xs); padding: .5rem .65rem; }
.modal-content {
    border-radius: var(--mq-radius-lg);
    border: 1px solid var(--mq-rule-2);
    box-shadow: var(--mq-shadow-xl);
}
.nav-tabs .nav-link {
    border-radius: var(--mq-radius-sm) var(--mq-radius-sm) 0 0;
    padding: .55rem .9rem;
}
.pagination .page-link {
    border-radius: var(--mq-radius-sm) !important;
    min-width: 36px;
    text-align: center;
}
.pagination .page-item.active .page-link {
    background: var(--mq-stamp);
    border-color: var(--mq-stamp);
    color: var(--mq-on-stamp);
}

/* ---- 10. AVATAR E LADrilHO: circulo e caixa macia ---- */
.mq-avatar {
    border-radius: 50%;
    background: var(--mq-stamp-tint);
    border: 1px solid var(--mq-stamp-tint-2);
    color: var(--mq-stamp-ink);
}
.mq-stat-icon { border-radius: var(--mq-radius-md); }

/* ---- 11. MESA SEM REGUA ----
   A regra impressa de 96px era do papel. Uma mesa de painel nao tem pauta. */
body {
    background-color: var(--mq-desk);
    background-image: none;
}

/* ---- 12. TITULOS COM ATITUDE ----
   Space Grotesk nos titulos e a unica coisa que tira o painel do registro
   bureaucratico: uma voz geometrica contra o texto neutro da interface. */
h1, .h1, h2, .h2, h3, .h3,
.display-5, .display-6,
.mq-readout__value,
.mq-kpi-value {
    font-family: var(--mq-font-display);
    letter-spacing: -.03em;
}
h1, .h1, .display-5, .display-6 { font-weight: 700; }
h2, .h2 { font-weight: 700; }
h3, .h3 { font-weight: 600; letter-spacing: -.022em; }

/* ---- 13. O HEROI E A CARA DA MARCA ---- */
.mq-hero {
    border-radius: var(--mq-radius-lg);
    border: 1px solid var(--mq-gaveta-rule);
    box-shadow: var(--mq-shadow-lg);
}

/* ---- 14. FOCO VISIVEL EM TODA SUPERFICIE ---- */
:focus-visible {
    outline: 2px solid var(--mq-stamp);
    outline-offset: 2px;
    border-radius: var(--mq-radius-xs);
}

/* ---- 15. KANBAN E CARTÕES DE LISTA com o mesmo relevo ---- */
.mq-kanban-card {
    border-radius: var(--mq-radius-md);
    box-shadow: var(--mq-shadow-sm);
}
.mq-kanban-card:hover { box-shadow: var(--mq-shadow-md); }
.mq-kanban-chip { border-radius: var(--mq-radius-pill); }

/* ---- 16. MODO ESCURO: sombra quase nao le, contorno carrega ---- */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .mq-feature,
[data-bs-theme="dark"] .mq-simple-card,
[data-bs-theme="dark"] .mq-plan-card,
[data-bs-theme="dark"] .mq-card {
    box-shadow: var(--mq-shadow);
    border-color: var(--mq-rule-2);
}
[data-bs-theme="dark"] .alert-success { color: var(--mq-ok); }
[data-bs-theme="dark"] .alert-danger,
[data-bs-theme="dark"] .alert-error   { color: var(--mq-stop); }
[data-bs-theme="dark"] .alert-warning { color: var(--mq-warn); }
[data-bs-theme="dark"] .alert-info    { color: var(--mq-info); }
[data-bs-theme="dark"] .mq-sidebar .nav-link.active {
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, .3);
}

/* =========================================================================
   18. SOZINHO CONTRA O MUNDO ANTERIOR
   -------------------------------------------------------------------------
   A secao 17 reescreveu os componentes com a voz nova, mas o bloco antigo
   continua no arquivo e ganha por ordem de declaracao em alguns seletores.
   Este bloco e a ultima palavra: desliga o que o mundo "fichario" deixou
   ligado e que a secao 17 nao alcanca.
   ========================================================================= */

/* O ladrilho de estagio era uma regua de linha reta. Vira um trilho de
   realce: mesma funcao (onde estou no ciclo), leitura de painel. */
.mq-stage { display: flex; align-items: center; gap: 0; margin: .5rem 0 .2rem; }
.mq-stage__seg {
    flex: 1;
    height: 6px;
    background: var(--mq-desk-2);
    border-radius: 0;
}
.mq-stage__seg:first-child { border-radius: var(--mq-radius-xs) 0 0 var(--mq-radius-xs); }
.mq-stage__seg:last-child  { border-radius: 0 var(--mq-radius-xs) var(--mq-radius-xs) 0; }
.mq-stage__seg--done {
    border-top: 0;
    background: var(--mq-stamp);
}
.mq-stage__seg--now {
    border-top: 0;
    background: var(--mq-cta);
}
.mq-stage__seg--late {
    border-top: 0;
    background: var(--mq-stop);
}
.mq-stage__cap { margin-top: .4rem; }

/* O no do organograma usava pulso por barra lateral. Vira anel. */
.mq-org-node.mq-pulse { border-left: 0; }
.mq-org-node.mq-pulse::after { display: none; }

/* Linha de listagem com um respiro a mais: 44px de altura util. */
.mq-row { min-height: var(--mq-row-h); }

/* O numero do dia: Space Grotesk e algarismos tabulares. E o que o dono
   ve primeiro; a familia display e o que da autoridade. */
.mq-readout__value {
    font-family: var(--mq-font-display);
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -.035em;
}
.mq-kpi-value {
    font-family: var(--mq-font-display);
    font-variant-numeric: tabular-nums lining-nums;
}

/* Linhas de extrato: valor encostado na margem, sempre alinhado. */
.mq-ledger__row { min-height: var(--mq-row-h); }
.mq-ledger__meta,
.mq-ledger__value {
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: 600;
}

/* O rotulo de divisor nao grita: 11px, peso 600, tracking aberto. */
.mq-label,
.mq-sidebar .menu-label { letter-spacing: var(--mq-track-label); }

/* Hero: a foto/geometria continua, mas o bloco tem canto de verdade. */
.mq-hero { border-radius: var(--mq-radius-lg); overflow: hidden; }

/* ---- Alinhamento do cabecalho de pagina com o relevo novo ---- */
.mq-pagehead { border-bottom: 1px solid var(--mq-rule); }

/* ---- Topbar: separa do conteudo com fio + sombra leve ---- */
.mq-topbar {
    border-bottom: 1px solid var(--mq-rule);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    backdrop-filter: saturate(180%) blur(12px);
}

/* ---- Link: azul de leitura, sublinhado de verdade no hover ---- */
a { color: var(--mq-link-color); }
a:hover { color: var(--mq-link-hover-color); }

/* ---- Estado imprimivel: plano, sem sombra nem cor de tela ---- */
@media print {
    .card, .mq-hero, .mq-feature { box-shadow: none !important; }
    body { background: #fff !important; }
    .mq-sidebar, .mq-topbar { display: none !important; }
    .mq-main { margin-left: 0 !important; }
}

/* =========================================================================
   19. A PRIMEIRA VIEWPORT — o que o dono ve antes de rolar
   -------------------------------------------------------------------------
   O painel nao abre com um cartao generico. Abre com o que ele precisa
   decidir hoje: o total do mes, a faixa de estado, e o trilho do dia com
   horario real. O numero e Space Grotesk tabulavel; o ambar marca o que
   esta esperando ele.
   ========================================================================= */

.mq-hero-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem 2rem;
    align-items: end;
    padding: 1.75rem var(--mq-pad);
    margin-bottom: 1.25rem;
    background: var(--mq-ficha);
    border: 1px solid var(--mq-rule-2);
    border-radius: var(--mq-radius-lg);
    box-shadow: var(--mq-shadow);
}
.mq-hero-strip__label {
    font-size: var(--mq-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--mq-track-label);
    color: var(--mq-ink-3);
    margin: 0 0 .35rem;
}
.mq-hero-strip__value {
    font-family: var(--mq-font-display);
    font-size: clamp(2.6rem, 2rem + 3vw, 4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--mq-ink);
    margin: 0;
}
.mq-hero-strip__delta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .6rem;
    font-family: var(--mq-font);
    font-size: var(--mq-text-sm);
    font-weight: 600;
    vertical-align: middle;
    color: var(--mq-ink-2);
}
.mq-hero-strip__delta--up   { color: var(--mq-ok); }
.mq-hero-strip__delta--down { color: var(--mq-stop); }
.mq-hero-strip__meta {
    margin: .5rem 0 0;
    font-size: var(--mq-text-sm);
    color: var(--mq-ink-2);
}
.mq-hero-strip__actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Faixa de estado: quantos Esta resolvido, quantos Esperam ele. */
.mq-stateband {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 1.25rem;
    background: var(--mq-rule);
    border: 1px solid var(--mq-rule-2);
    border-radius: var(--mq-radius);
    box-shadow: var(--mq-shadow);
    overflow: hidden;
}
.mq-stateband__cell {
    background: var(--mq-ficha);
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}
.mq-stateband__n {
    font-family: var(--mq-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--mq-ink);
}
.mq-stateband__label {
    font-size: var(--mq-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--mq-track-label);
    color: var(--mq-ink-3);
    display: flex;
    align-items: center;
    gap: .4rem;
}
.mq-stateband__cell--attention { background: var(--mq-cta-tint); }
.mq-stateband__cell--attention .mq-stateband__n { color: var(--mq-cta-ink); }
.mq-stateband__cell--attention .mq-stateband__label { color: var(--mq-cta-ink); }

/* Trilho do dia: um no por evento, hora a esquerda, titulo a direita. */
.mq-rail {
    position: relative;
    margin: 0;
    padding: .25rem 0;
    list-style: none;
}
.mq-rail__row {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: baseline;
    padding: .7rem .25rem;
    border-bottom: 1px solid var(--mq-rule);
    position: relative;
}
.mq-rail__row:last-child { border-bottom: 0; }
/* O no: circulo com anel, nao barra lateral. */
.mq-rail__row::before {
    content: "";
    position: absolute;
    left: 4.9rem;
    top: 1.05rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mq-rule-2);
    box-shadow: 0 0 0 3px var(--mq-ficha);
}
.mq-rail__row--ok::before   { background: var(--mq-ok); }
.mq-rail__row--warn::before { background: var(--mq-warn); }
.mq-rail__row--stop::before { background: var(--mq-stop); }
.mq-rail__row--stop::before { border-radius: 1px; transform: rotate(45deg); }
.mq-rail__time {
    font-family: var(--mq-font);
    font-size: var(--mq-text-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--mq-ink-3);
    letter-spacing: .02em;
}
.mq-rail__name {
    font-size: var(--mq-text-sm);
    font-weight: 600;
    color: var(--mq-ink);
    padding-left: 1rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mq-rail__meta {
    font-size: var(--mq-text-xs);
    color: var(--mq-ink-3);
    text-align: right;
    white-space: nowrap;
}

/* Coluna "Precisa de voce": o que esta esperando o dono. */
.mq-queue { display: flex; flex-direction: column; gap: .5rem; }
.mq-queue__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem .9rem;
    border: 1px solid var(--mq-rule);
    border-radius: var(--mq-radius-md);
    background: var(--mq-ficha);
    text-decoration: none;
    color: var(--mq-ink);
    transition: border-color var(--mq-fast) var(--mq-ease),
                box-shadow var(--mq-fast) var(--mq-ease),
                transform var(--mq-fast) var(--mq-ease);
}
.mq-queue__item:hover {
    border-color: #C4CFE0;
    box-shadow: var(--mq-shadow-sm);
    transform: translateX(2px);
    text-decoration: none;
}
.mq-queue__item--attention { border-color: var(--mq-cta); background: var(--mq-cta-tint); }
.mq-queue__item i { color: var(--mq-ink-3); font-size: 1rem; flex-shrink: 0; }
.mq-queue__item--attention i { color: var(--mq-cta-ink); }
.mq-queue__body { min-width: 0; flex: 1; }
.mq-queue__name {
    font-size: var(--mq-text-sm);
    font-weight: 600;
    color: var(--mq-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mq-queue__meta { font-size: var(--mq-text-xs); color: var(--mq-ink-3); }
.mq-queue__count {
    font-family: var(--mq-font-display);
    font-size: var(--mq-text-md);
    font-weight: 700;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--mq-ink-2);
}

/* Grade do painel: o alinhamento que faz a tela parecer feita. */
.mq-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}
.mq-grid > * { min-width: 0; }

/* ---- 375px: uma coluna, faixa empilhada, trilho sem horario colado ---- */
@media (max-width: 991.98px) {
    .mq-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    .mq-hero-strip {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 1rem;
        padding: 1.25rem;
        border-radius: var(--mq-radius);
    }
    .mq-hero-strip__actions { justify-content: flex-start; }
    .mq-stateband { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mq-rail__row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .5rem;
    }
    .mq-rail__row::before { display: none; }
    .mq-rail__name { padding-left: 0; }
}

/* ---- Modo escuro: a faixa de atencao nao pode virar um blocoarelo ---- */
[data-bs-theme="dark"] .mq-stateband__cell--attention { background: #2E2410; }
[data-bs-theme="dark"] .mq-stateband__cell--attention .mq-stateband__n,
[data-bs-theme="dark"] .mq-stateband__cell--attention .mq-stateband__label { color: var(--mq-cta); }
[data-bs-theme="dark"] .mq-queue__item--attention { background: #2E2410; }
[data-bs-theme="dark"] .mq-queue__item--attention i { color: var(--mq-cta); }
[data-bs-theme="dark"] .mq-rail__row::before { box-shadow: 0 0 0 3px var(--mq-ficha); }

/* =========================================================================
   20. TELAS DE AUTENTICACAO — a sala de controle, sem a mesa
   -------------------------------------------------------------------------
   Login, recuperar senha e redefinir senha nao usam o layout, entao cada uma
   traz o proprio <style> inline. Este bloco passa a ser a voz delas: fundo
   escuro da gaveta, ficha branca flutuando, cabecalho em marinho. Sem
   gradiente decorativo — o unico brilho e o halo atras do logo.
   ========================================================================= */

/* O fundo e a gaveta acesa: a ficha branca aparece por cima. */
.mq-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background-color: var(--mq-gaveta);
    font-family: var(--mq-font);
    color: var(--mq-ink);
}

/* A ficha: flutua, canto de verdade, sem moldura pesada. */
.mq-card {
    width: 100%;
    max-width: 424px;
    background: var(--mq-ficha);
    border: 1px solid var(--mq-rule-2);
    border-radius: var(--mq-radius-lg);
    box-shadow: var(--mq-shadow-xl);
    overflow: hidden;
}

/* O cabecalho e a propria gaveta: marca em cima, nada de gradiente. */
.mq-card-header {
    background: var(--mq-gaveta);
    color: var(--mq-on-stamp);
    padding: 2.25rem 2rem 1.9rem;
    text-align: center;
    border-bottom: 1px solid var(--mq-gaveta-rule);
}
.mq-card-header .lockup {
    display: block;
    width: 210px;
    height: auto;
    margin: 0 auto;
}
.mq-card-header p { color: rgba(255, 255, 255, .74); margin: 0; }
.mq-card-header h1 {
    font-family: var(--mq-font-display);
    letter-spacing: -.025em;
}

.mq-card-body { padding: 2rem; }

/* Rotulo de campo com a voz do sistema: 11px, tracking aberto. */
.mq-auth .form-label {
    font-size: var(--mq-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--mq-track-label);
    color: var(--mq-ink-3);
    margin-bottom: .35rem;
}

/* O botao de entrar ocupa a largura toda e tem altura de controle. */
.mq-auth .btn-mq-primary,
.mq-auth .btn-primary {
    width: 100%;
    min-height: 46px;
    border-radius: var(--mq-radius-sm);
    font-size: var(--mq-text-base);
    font-weight: 600;
}

/* Link de marca: azul de leitura. */
.mq-link-brand {
    color: var(--mq-link-color);
    font-weight: 600;
    text-decoration: none;
}
.mq-link-brand:hover { color: var(--mq-link-hover-color); text-decoration: underline; }

.input-group-text { color: var(--mq-ink-2); }

/* Texto auxiliar branco: so existe sobre a gaveta. */
.text-muted-f { color: rgba(255, 255, 255, .74); }

/* ---- 375px: a ficha ocupa a tela, sem margem morta ---- */
@media (max-width: 480px) {
    .mq-auth { padding: 0; }
    .mq-card { max-width: none; min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
    .mq-card-header { padding: 2rem 1.25rem 1.6rem; }
    .mq-card-body { padding: 1.5rem 1.25rem 2rem; }
}

/* =========================================================================
   21. O HEROI PUBLICO — a sala de controle virada para a rua
   -------------------------------------------------------------------------
   O heroi e a primeira coisa que o dono ve de fora. Ele nao e a ficha branca
   do painel: e a CONSOLA acesa, com a ficha de trabalho flutuando por cima.
   Sem gradiente (regra do mundo), a profundidade vem do contraste entre o
   marinho e o branco, e da sombra da ficha.

   O CTA principal e AMBAR, nao azul. Azul e acao dentro do produto; na
   pagina publica, a unica acao que o visitante tem e a DECISAO de contratar.
   ========================================================================= */

.mq-hero {
    border-radius: var(--mq-radius-lg);
    box-shadow: var(--mq-shadow-lg);
    border: 1px solid var(--mq-gaveta-rule);
}

/* ---- A ficha que flutua sobre a consola ---- */
.mq-hero__panel {
    background: var(--mq-ficha);
    border-radius: var(--mq-radius-md);
    box-shadow: var(--mq-shadow-xl);
    padding: 1.25rem 1.35rem 1.1rem;
    color: var(--mq-ink);
    text-align: left;
}
.mq-hero__panel-label {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: var(--mq-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--mq-track-label);
    color: var(--mq-ink-3);
    padding-bottom: .7rem;
    margin-bottom: .2rem;
    border-bottom: 1px solid var(--mq-rule);
}
/* O ponto de estado: cheio = rodando. A forma faz o trabalho, a cor
   apenas confirma. */
.mq-hero__panel-label::before {
    content: "";
    width: 7px; height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--mq-ok);
}
.mq-hero__item {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--mq-rule);
}
.mq-hero__item:last-child { border-bottom: 0; padding-bottom: .2rem; }
.mq-hero__item i {
    color: var(--mq-stamp);
    font-size: .95rem;
    flex: none;
    transform: translateY(1px);
}
.mq-hero__name {
    font-size: var(--mq-text-sm);
    font-weight: 600;
    color: var(--mq-ink);
    margin: 0;
    white-space: nowrap;
}
.mq-hero__meta {
    margin-left: auto;
    font-size: var(--mq-text-xs);
    color: var(--mq-ink-3);
    text-align: right;
    font-variant-numeric: tabular-nums lining-nums;
}

/* ---- O titulo e a tese: Space Grotesk, medida grande, sem caixa alta ---- */
.mq-hero h1 {
    font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.35rem);
    line-height: 1.06;
    letter-spacing: -.038em;
    margin-bottom: 1rem;
}
.mq-hero__lead {
    font-size: clamp(1rem, .96rem + .22vw, 1.15rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, .78);
    max-width: 46ch;
    margin-bottom: 1.6rem;
}
.mq-hero__note {
    margin: 1.1rem 0 0;
    font-size: var(--mq-text-xs);
    color: rgba(255, 255, 255, .58);
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* ---- Botao de contorno sobre a consola ----
   Branco com fio, para nao competir com o ambar do CTA. */
.mq-hero .btn-mq-outline-light,
.btn-mq-outline-light {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .34);
    color: var(--mq-on-stamp);
    min-height: 48px;
    border-radius: var(--mq-radius-sm);
    font-weight: 600;
    padding: .7rem 1.4rem;
}
.mq-hero .btn-mq-outline-light:hover,
.btn-mq-outline-light:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .6);
    color: var(--mq-on-stamp);
}
/* O CTA ambar sobre marinho: a tinta e escura, o preenchimento e quente. */
.mq-hero .btn-mq-cta,
.btn-mq-cta {
    min-height: 48px;
    border-radius: var(--mq-radius-sm);
    font-size: var(--mq-text-base);
    font-weight: 700;
    padding: .7rem 1.4rem;
}

/* ---- Faixa de numeros logo abaixo do titulo, quando existir ---- */
.mq-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.25rem;
    margin-top: 1.9rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.mq-hero__stat { min-width: 0; }
.mq-hero__stat b {
    display: block;
    font-family: var(--mq-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--mq-on-stamp);
}
.mq-hero__stat span {
    font-size: var(--mq-text-xs);
    color: rgba(255, 255, 255, .62);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---- 991px: a ficha desce para baixo do texto, ainda flutuando ---- */
@media (max-width: 991.98px) {
    .mq-hero__panel { margin-top: 2rem; }
    .mq-hero__stats { margin-top: 1.5rem; }
}

/* ---- 575px: a margem do console encolhe, o texto nao perde medida ---- */
@media (max-width: 575.98px) {
    .mq-hero {
        padding: 2rem 1.25rem;
        border-radius: var(--mq-radius);
    }
    .mq-hero__panel { padding: 1rem 1.1rem .9rem; }
    .mq-hero .btn-mq-cta,
    .mq-hero .btn-mq-outline-light,
    .btn-mq-cta,
    .btn-mq-outline-light { width: 100%; }
    .mq-hero__stats { gap: 1rem 1.5rem; }
    .mq-hero__stat b { font-size: 1.35rem; }
}

/* =========================================================================
   22. PRECOS E CADASTRO — a ficha de plano e a pílula de destaque
   -------------------------------------------------------------------------
   Estas duas telas ainda carregavam <style> inline. O resto do projeto tem
   uma autoridade só — o CSS — e duas autoridades significam que a próxima
   correção acontece no lugar errado. Este bloco é o lugar certo.

   A pílula "MAIS POPULAR" deixa de ser violeta (o mundo "fichário", já morto)
   e vira um estado de decisão: o plano destacado é o que o dono precisa
   escolher, então carrega o âmbar. Borda de 2px no mesmo âmbar, para o
   destaque ser leitura de forma, não só de cor.

   O plano flutua no hover, com a sombra do mundo novo — a ficha levanta em vez
   de crescer, e volta sem transição longa.
   ========================================================================= */

.mq-plan-card {
    background: var(--mq-ficha);
    border: 1px solid var(--mq-rule);
    border-radius: var(--mq-radius-md);
    box-shadow: var(--mq-shadow-sm);
    transition: transform .16s ease, box-shadow .16s ease;
    height: 100%;
}
.mq-plan-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--mq-shadow-lg);
}

/* O plano em decisao: ambar, como todo o resto do sistema marca decisao. */
.mq-plan-card.featured {
    border: 2px solid var(--mq-stamp);
    position: relative;
    box-shadow: var(--mq-shadow-lg);
}
.mq-plan-card.featured::before {
    content: "MAIS POPULAR";
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--mq-stamp);
    /* o rotulo e tinta escura sobre o ambar: ver --mq-on-stamp */
    color: var(--mq-on-stamp);
    font-size: var(--mq-text-xs);
    font-weight: 700;
    letter-spacing: var(--mq-track-label);
    text-transform: uppercase;
    padding: .22rem .7rem;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: var(--mq-shadow-sm);
}

/* O cabecalho das telas de preco: marca e voltar, no peso da interface. */
.mq-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.mq-logo-word {
    font-family: var(--mq-font-display);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--mq-ink);
}

/* O corpo da tela de cadastro usa a mesa (o canvas), nao a ficha. */
body.mq-surface-page {
    background: var(--mq-desk);
    font-family: var(--mq-font);
    min-height: 100vh;
}
body.mq-surface-page-compact {
    background: var(--mq-desk);
    font-family: var(--mq-font);
}

/* 575px: a ficha de plano nao ganha margem propria; o respiro vem do grid. */
@media (max-width: 575.98px) {
    .mq-plan-card.featured::before { top: -10px; font-size: .6rem; }
}

/* =========================================================================
   23. O QUADRO (kanban) — colunas de trabalho que flutuam sobre a mesa
   -------------------------------------------------------------------------
   CRM e Tarefas tinham, cada um, o mesmo <style> inline: 25 linhas duplicadas
   em duas authorities, com token do Bootstrap (--bs-tertiary-bg) e canto de
   .8rem/.6rem. Duas copies do mesmo desenho sao duas autoridades, e a segunda
   que se mexer ganha a disputa.

   Aqui o quadro passa a ser do mundo novo:

     - a COLUNA e a gaveta: fundo recuado, sem sombra. Ela nao e uma ficha, e
       um recipiente. Sombra em recipiente faz o conteudo parecer movel.
     - o CARTAO e a ficha: branco, canto em escada, sombra em repouso, e levanta
       no hover. E o que o dono manipula.
     - o ALVO da soltura e o ambar. Arrastar um cartao para uma coluna e a
       unica acao que pede realce de estado com urgencia — e o ambar e a cor de
       decisao. Com azul de acao o alvo se confundiria com botao.

   A coluna alvo nao ganha contorno tracejado: tracejado e a convencao de
   "escreva aqui", nao de "solte aqui". Uma borda continua e um fundo lavado
   bastam, e nao gritam sobre o cartao que esta sendo movido.
   ========================================================================= */

.mq-board {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: .6rem;
    scrollbar-width: thin;
}

/* A coluna: a gaveta. Recuada, sem sombra, com a tinta da mesa em volta. */
.mq-kanban-col {
    flex: 0 0 288px;
    max-width: 288px;
    display: flex;
    flex-direction: column;
    background: var(--mq-desk);
    border: 1px solid var(--mq-rule);
    border-radius: var(--mq-radius-md);
    padding: .6rem;
    max-height: calc(100vh - 200px);
    min-height: 8rem;
}

.mq-kanban-cards {
    overflow-y: auto;
    flex: 1;
    min-height: 2.5rem;
}

/* O cartao: a ficha. Flutua em repouso, levanta no hover. */
.mq-kanban-card {
    background: var(--mq-ficha);
    border: 1px solid var(--mq-rule);
    border-radius: var(--mq-radius-sm);
    box-shadow: var(--mq-shadow-sm);
    padding: .7rem .8rem;
    margin-bottom: .65rem;
    cursor: grab;
    transition: box-shadow .14s ease, transform .14s ease;
}
.mq-kanban-card:last-child { margin-bottom: 0; }
.mq-kanban-card:hover {
    box-shadow: var(--mq-shadow-md);
    transform: translateY(-1px);
}
.mq-kanban-card:active { cursor: grabbing; }

/* Arrastando: a ficha sai do fluxo visual sem sumir. Opacidade baixa e
   sombra nenhuma — o que o olho segue e o alvo, nao o card. */
.mq-kanban-card.dragging {
    opacity: .4;
    box-shadow: none;
    transform: none;
}

/* O alvo: decisao em ambar. Borda continua, fundo lavado. */
.mq-kanban-col.drop-target {
    border-color: var(--mq-stamp);
    background: var(--mq-stamp-tint);
}
.mq-kanban-col.drop-target .mq-kanban-cards {
    background: var(--mq-stamp-tint-2);
    border-radius: var(--mq-radius-sm);
}

/* A etiqueta de contagem: maiuscula pequena, numerais tabulares. */
.mq-kanban-chip {
    font-size: .7rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: var(--mq-track-label);
    text-transform: uppercase;
    font-variant-numeric: tabular-nums lining-nums;
    padding: .32rem .5rem;
}

/* ---- 991px: a coluna afina, o quadro continua rolando no eixo X ---- */
@media (max-width: 991.98px) {
    .mq-kanban-col { flex-basis: 260px; max-width: 260px; }
}

/* ---- 575px: afina mais ainda. O quadro NAO empilha em coluna — empilhar
   esconde as colunas vizinhas, que e justamente o que o quadro mostra. ---- */
@media (max-width: 575.98px) {
    .mq-kanban-col { flex-basis: 84vw; max-width: 84vw; }
    .mq-kanban-col .mq-kanban-cards { max-height: 46vh; }
}

/* =========================================================================
   24. A PAGINA DE ERRO — o codigo e o objeto da tela
   -------------------------------------------------------------------------
   Uma tela de erro e lida por tres coisas, nesta ordem: o codigo, o que
   aconteceu, o que fazer. O mundo novo organiza a tela nessa ordem.

   O codigo e Space Grotesk no tamanho do numero, tabulavel. Nao e um rotulo
   com o numero dentro: e o objeto. O contraste vem do ambar, que e a cor de
   decisao do sistema — uma tela de erro e uma decisao do dono (tentar de novo
   ou voltar), e nao um estado de dado.

   A ficha ao centro flutua sobre a mesa, como toda ficha. A pagina nao
   inventa um layout proprio: usa as mesmas 3 raio de escada e a mesma sombra
   em repouso do resto.
   ========================================================================= */

.mq-errpage {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mq-desk);
    font-family: var(--mq-font);
    color: var(--mq-ink);
    padding: 1.5rem 1rem;
}

.mq-err {
    text-align: center;
    max-width: 30rem;
    padding: clamp(1.5rem, 1rem + 3vw, 2.75rem);
    background: var(--mq-ficha);
    border: 1px solid var(--mq-rule);
    border-radius: var(--mq-radius-lg);
    box-shadow: var(--mq-shadow-lg);
}

.mq-err i {
    font-size: 2.4rem;
    color: var(--mq-stamp-soft);
    line-height: 1;
}

/* O codigo: Space Grotesk, do tamanho do numero, com numerais tabulares
   para o digito nao pular de largura se a pagina recarregar. */
.mq-err .code {
    font-family: var(--mq-font-display);
    font-size: clamp(3.5rem, 2rem + 8vw, 5.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.045em;
    color: var(--mq-stamp);
    font-variant-numeric: tabular-nums lining-nums;
    display: block;
    margin-bottom: .5rem;
}

.mq-err h1 {
    font-family: var(--mq-font-display);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--mq-ink);
    margin-bottom: .5rem;
}

.mq-err p {
    color: var(--mq-ink-2);
    margin-bottom: 1.5rem;
}

.mq-err .btn {
    border-radius: var(--mq-radius-sm);
    min-height: 40px;
}

/* 575px: o numero ainda domina, mas o respiro horizontal encolhe. */
@media (max-width: 575.98px) {
    .mq-err { border-radius: var(--mq-radius-md); }
}

/* -------------------------------------------------------------------------
   PAGINA DE ERRO COM CABECALHO
   -------------------------------------------------------------------------
   Antes a tela de erro era UM bloco so, centralizado na viewport inteira.
   Com logo e navegacao no topo, a caixa do erro precisa continuar
   centralizada no ESPACO QUE SOBRAR embaixo do cabecalho, e nao na pagina
   inteira -- senao ela sobe junto com o cabecalho e fica torta.

   O truque e o `margin-block: auto` num container flex de coluna: as duas
   bordas ficam com folga igual e o meio (a caixa) sobra no centro. O
   `align-items: stretch` do pai e o que impede a coluna de encolher para a
   largura do texto.

   `--full` tambem zera o padding do pai: com o wrapper em 100vh, manter o
   padding de fora criava barra de rolagem de 3rem numa pagina que deveria
   caber na tela. --*/
.mq-errpage--full {
    padding: 0;
    align-items: stretch;
}

.mq-errpage__inner {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    min-height: 100vh;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
}

/* Fica com o visual do cabecalho do site, mas sem `position: sticky`: numa
   pagina de erro nao ha rolagem util e a barra do navegador some o topo. */
.mq-errpage__top {
    background: var(--mq-ficha);
    border-bottom: 1px solid var(--mq-rule);
    margin: -1.5rem -1rem 1.5rem;
    padding: 1rem 1.5rem;
}

/* O centro de verdade. Declarado com `>` para nao pegar o `.mq-err` caso
   alguem aninhe outra caixa de erro no futuro. */
.mq-errpage__inner > .mq-err {
    margin-block: auto;
}

/* =========================================================================
   25. SITE PUBLICO — o modelo da skill ui-ux-pro-max (Glassmorphism)
   -------------------------------------------------------------------------
   O dono mandou usar o modelo da skill (design-system/maisquemil-os/,
   MASTER.md + pages/home.md). O modelo dela manda: vidro fosco (backdrop
   blur 10-20px), borda de 1px rgba-branco, Z-depth; azul de confianca
   #2563EB; CTA laranja #EA580C; Calistoga nos titulos, Inter no texto.
   Escopado no .public-body: o painel (admin) continua no mundo "sala de
   controle" (secoes 17-24, validado em producao); a rua recebe o modelo da
   skill. Sem gradiente decorativo (regra do mundo — o guard conta): o vidro
   vem de blur + borda rgba, nao de gradiente.
   ========================================================================= */

.public-body {
    /* A paleta e a tipografia da RUA sao as do modelo linear.app (secao 27).
       Aqui fica so o que o modelo do glass deixa: a ficha translucida e o
       hover do CTA. A Calistoga foi rejeitada pelo dono — nao volta. */
}

/* O vidro da ficha do heroi: branco translucido + blur sobre a consola
   marinho. O texto e tinta escura — o contraste fica alto mesmo com o
   marinho atravessando o vidro. */
.mq-hero__panel {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* O badge de vidro do heroi: blur + a borda rgba-branca do modelo. */
.mq-hero .badge-soft {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* O topo fixo de vidro: o CTA acompanha a rolagem (padrao da skill:
   "CTA Placement: Hero (sticky) + Bottom"). Fosco sobre o canvas. */
.public-body .sticky-top {
    background: rgba(244, 246, 250, .82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, .9);
}

/* Hover do CTA na rua: CLAREIA para o laranja original do modelo (#F97316),
   nunca escurece — a regra do mundo, agora com o valor da skill. */
.public-body .btn-mq-cta:hover {
    background: #F97316;
}

/* =========================================================================
   26. A DOCUMENTACAO — o manual do sistema, na rua
   -------------------------------------------------------------------------
   A documentacao nao e um texto: e a mesma materia do painel contada por
   fora. Por isso ela usa a MESMA materia-prima do mundo — a ficha flutua
   sobre o canvas, o numero e o objeto (nao um rotulo com numero dentro), e a
   dica e a unica coisa em ambar, porque dica e decisao do dono da operacao.
   ========================================================================= */

.mq-doc-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--mq-text-xs);
    font-weight: 600;
    letter-spacing: var(--mq-track-label);
    text-transform: uppercase;
    padding: .3rem .6rem;
    margin-bottom: 1rem;
    border-radius: var(--mq-radius-pill);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: var(--mq-on-stamp);
}

/* ---- O FLUXO: a cadeia lead -> contrato -> entrega -> numero ---- */
.mq-doc-fluxo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .6rem;
    margin: 0;
    padding: 0;
}
.mq-doc-fluxo__link {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    height: 100%;
    padding: .8rem .85rem .7rem;
    text-decoration: none;
    color: var(--mq-ink);
    background: var(--mq-ficha);
    border: 1px solid var(--mq-rule-2);
    border-radius: var(--mq-radius);
    box-shadow: var(--mq-shadow);
    transition: box-shadow var(--mq-mid) var(--mq-ease), transform var(--mq-mid) var(--mq-ease);
}
.mq-doc-fluxo__link:hover {
    color: var(--mq-ink);
    box-shadow: var(--mq-shadow-md);
    transform: translateY(-2px);
}
/* O numero e o objeto: Space Grotesk tabular, nao um rotulo com numero. */
.mq-doc-fluxo__num {
    font-family: var(--mq-font-display);
    font-size: var(--mq-text-xs);
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--mq-stamp);
    font-variant-numeric: tabular-nums lining-nums;
}
.mq-doc-fluxo__ico {
    font-size: 1.15rem;
    color: var(--mq-stamp);
    margin: .15rem 0 .3rem;
}
.mq-doc-fluxo__passo {
    font-weight: 600;
    font-size: var(--mq-text-sm);
    line-height: 1.3;
}
.mq-doc-fluxo__modulo {
    font-size: var(--mq-text-xs);
    color: var(--mq-ink-3);
}

/* ---- O CARTAO DE GUIA ---- */
.mq-doc-card {
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.15rem 1rem;
    color: var(--mq-ink);
    background: var(--mq-ficha);
    border: 1px solid var(--mq-rule-2);
    border-radius: var(--mq-radius-lg);
    box-shadow: var(--mq-shadow);
    transition: box-shadow var(--mq-mid) var(--mq-ease), transform var(--mq-mid) var(--mq-ease);
}
.mq-doc-card:hover {
    color: var(--mq-ink);
    box-shadow: var(--mq-shadow-md);
    transform: translateY(-2px);
}
.mq-doc-card__ico {
    font-size: 1.2rem;
    color: var(--mq-stamp);
    flex: none;
}
.mq-doc-card__mais {
    margin-top: auto;
    padding-top: .6rem;
    font-size: var(--mq-text-xs);
    font-weight: 600;
    letter-spacing: var(--mq-track-label);
    text-transform: uppercase;
    color: var(--mq-stamp);
}

/* ---- A TRILHA ---- */
.mq-doc-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    font-size: var(--mq-text-xs);
    color: var(--mq-ink-3);
    margin-bottom: 1.1rem;
}
.mq-doc-crumbs a { color: var(--mq-stamp); text-decoration: none; }
.mq-doc-crumbs a:hover { text-decoration: underline; }
.mq-doc-crumbs strong { color: var(--mq-ink); font-weight: 600; }

/* ---- O CABECALHO DO GUIA ---- */
.mq-doc-head__ico {
    font-size: 1.7rem;
    color: var(--mq-stamp);
    line-height: 1;
    flex: none;
}
.mq-doc-head h1 { margin-bottom: .35rem; }

/* ---- OS BLOCOS DO GUIA ---- */
.mq-doc-block { margin-bottom: 2rem; }
.mq-doc-block h2 { margin-bottom: .8rem; }

.mq-doc-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.mq-doc-list li {
    position: relative;
    padding: .35rem 0 .35rem 1.4rem;
    color: var(--mq-ink-2);
    font-size: var(--mq-text-base);
}
/* O marcador e um risco, nao uma bolinha: a lista e um extrato, nao ruido. */
.mq-doc-list li::before {
    content: "";
    position: absolute;
    left: .1rem;
    top: .95rem;
    width: .55rem;
    height: 2px;
    background: var(--mq-stamp);
}
.mq-doc-list--tela li::before { background: var(--mq-ink-3); }
.mq-doc-list--tela li { color: var(--mq-ink-2); }

/* ---- O PASSO A PASSO: o numero e o objeto ---- */
.mq-doc-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: docpasso;
}
.mq-doc-steps li {
    counter-increment: docpasso;
    position: relative;
    padding: .55rem 0 .55rem 2.6rem;
    color: var(--mq-ink-2);
    font-size: var(--mq-text-base);
    border-bottom: 1px solid var(--mq-rule);
}
.mq-doc-steps li:last-child { border-bottom: 0; }
.mq-doc-steps li::before {
    content: counter(docpasso, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: .5rem;
    font-family: var(--mq-font-display);
    font-size: var(--mq-text-base);
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--mq-stamp);
}

/* ---- A DICA: a unica coisa em ambar ---- */
.mq-doc-dica {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .8rem .95rem;
    margin-bottom: .6rem;
    background: var(--mq-cta-tint);
    border: 1px solid var(--mq-rule);
    border-left: 3px solid var(--mq-cta);
    border-radius: var(--mq-radius-sm);
    color: var(--mq-ink-2);
    font-size: var(--mq-text-sm);
}
.mq-doc-dica i { color: var(--mq-cta); flex: none; margin-top: .1rem; }

/* ---- A GAVETA: onde fica, quem pode, vizinhos ---- */
.mq-doc-side {
    position: sticky;
    top: 5.5rem;
    background: var(--mq-ficha);
    border: 1px solid var(--mq-rule-2);
    border-radius: var(--mq-radius-lg);
    box-shadow: var(--mq-shadow);
    padding: 1.15rem;
}
.mq-doc-side__bloco { padding-bottom: 1rem; margin-bottom: 1rem; }
.mq-doc-side__bloco:last-child { padding-bottom: 0; margin-bottom: 0; }
.mq-doc-side__bloco--cta {
    background: var(--mq-ficha-2);
    border: 1px solid var(--mq-rule);
    border-radius: var(--mq-radius);
    padding: 1rem;
    margin-bottom: 0;
}
.mq-doc-side__rota {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--mq-text-xs);
    padding: .2rem .45rem;
    color: var(--mq-ink);
    background: var(--mq-ficha-2);
    border: 1px solid var(--mq-rule);
    border-radius: var(--mq-radius-xs);
}
.mq-doc-side__lista {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--mq-text-sm);
}
.mq-doc-side__lista li { padding: .18rem 0; }
.mq-doc-side__lista a { color: var(--mq-stamp); text-decoration: none; }
.mq-doc-side__lista a:hover { text-decoration: underline; }
.mq-doc-side__lista strong { color: var(--mq-ink); }

/* ---- ANTERIOR / PROXIMO: a leitura tem ordem ---- */
.mq-doc-pager {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--mq-rule);
}
.mq-doc-pager__link {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    text-decoration: none;
    padding: .6rem .8rem;
    border-radius: var(--mq-radius);
    border: 1px solid transparent;
    transition: border-color var(--mq-fast) var(--mq-ease), background var(--mq-fast) var(--mq-ease);
}
.mq-doc-pager__link:hover {
    border-color: var(--mq-rule-2);
    background: var(--mq-ficha);
}
.mq-doc-pager__rot {
    font-size: var(--mq-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--mq-track-label);
    font-weight: 600;
    color: var(--mq-ink-3);
}
.mq-doc-pager__tit { color: var(--mq-stamp); font-weight: 600; font-size: var(--mq-text-sm); }

/* ---- 991px: a gaveta vai para baixo do guia e perde o grudar ---- */
@media (max-width: 991.98px) {
    .mq-doc-side { position: static; }
    .mq-doc-pager { flex-direction: column; }
}

/* =========================================================================
   27. A RUA — MODELO "linear.app" (skill popular-web-designs)
   -------------------------------------------------------------------------
   Trocar token nao muda a pagina: ela continua com o mesmo desenho. O dono
   mandou seguir a linguagem de um site de referencia, e a skill
   `popular-web-designs` tem 58 modelos reais. Este e o `linear.app`, que e a
   mesma lingua daquele site: canvas quase preto, violeta-azulado de marca,
   titulo de 72px com tracking negativo, borda branca translucida.

   Escopo: .public-body (a RUA). O painel continua no mundo "sala de
   controle" (secoes 17-24, 96 checks). E oBootstrap entra tambem, senao o
   `text-secondary` (cinza de tema claro) some no fundo escuro.
   ========================================================================= */

.public-body {
    /* ---- Superficies (linear.app §2) ---- */
    --mq-desk: #08090a;          /* canvas: quase preto, o meio e darkness */
    --mq-gaveta: #0f1011;        /* painel/gaveta */
    --mq-ficha: #191a1b;         /* ficha (cartao) elevada */
    --mq-ficha-2: #212223;       /* camada interna da ficha */
    --mq-elev: #28282c;          /* hover: a superficie mais clara */

    /* ---- Tinta (quatro niveis, como o modelo) ---- */
    --mq-ink: #f7f8f8;
    --mq-ink-2: #d0d6e0;
    --mq-ink-3: #8a8f98;
    --mq-ink-4: #62666d;

    /* ---- Borda: fio de luz, nao fio de tinta ---- */
    --mq-rule: rgba(255, 255, 255, .08);
    --mq-rule-2: rgba(255, 255, 255, .14);
    --mq-gaveta-rule: rgba(255, 255, 255, .08);

    /* ---- Marca: indigo-violeta, a unica cor cromatica ---- */
    --mq-stamp: #7170ff;          /* acento: link, icone, estado ativo */
    --mq-stamp-fill: #5e6ad2;     /* preenchimento de botao (branco passa de 4.5:1) */
    --mq-stamp-ink: #a5b4fc;
    --mq-stamp-tint: rgba(113, 112, 255, .12);
    --mq-stamp-tint-2: rgba(113, 112, 255, .20);
    --mq-stamp-soft: #828fff;
    --mq-on-stamp: #ffffff;

    /* ---- A decisao do dono continua ambar (o modelo e quase acromatico,
            e o ambar e o unico pedido de "decisao" da pagina) ---- */
    --mq-cta: #f59e0b;
    --mq-cta-ink: #fbbf24;
    --mq-cta-tint: rgba(245, 158, 11, .14);
    --mq-on-cta: #1a1205;

    /* ---- Estado: verde de status, so para status ---- */
    --mq-ok: #10b981;
    --mq-ok-tint: rgba(16, 185, 129, .14);
    --mq-aviso: #f59e0b;
    --mq-stop: #f87171;
    --mq-info: #60a5fa;

    /* ---- Sombra: multi-camada COM inset (o modelo usa inset na superficie
            escura; sem inset a ficha parece colada) ---- */
    --mq-shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
    --mq-shadow-sm: 0 1px 2px rgba(0, 0, 0, .55), 0 4px 14px rgba(0, 0, 0, .45);
    --mq-shadow:    0 1px 2px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .5),
                    inset 0 1px 0 rgba(255, 255, 255, .04);
    --mq-shadow-md: 0 2px 6px rgba(0, 0, 0, .55), 0 14px 34px rgba(0, 0, 0, .55),
                    inset 0 1px 0 rgba(255, 255, 255, .05);
    --mq-shadow-lg: 0 8px 18px rgba(0, 0, 0, .55), 0 28px 64px rgba(0, 0, 0, .6),
                    inset 0 1px 0 rgba(255, 255, 255, .05);
    --mq-shadow-xl: 0 16px 36px rgba(0, 0, 0, .6), 0 48px 100px rgba(0, 0, 0, .65),
                    inset 0 1px 0 rgba(255, 255, 255, .06);

    /* ---- Raio: preciso, nao redondo (o modelo e geometrico) ---- */
    --mq-radius-sm: 6px;
    --mq-radius: 10px;
    --mq-radius-md: 12px;
    --mq-radius-lg: 16px;
    --mq-radius-pill: 999px;

    /* ---- O BOOTSTRAP tambem precisa virar escuro: o `text-secondary` de
            tema claro e cinza-escuro e fica invisivel no canvas preto ---- */
    --bs-body-bg: var(--mq-desk);
    --bs-body-color: var(--mq-ink-2);
    --bs-emphasis-color: var(--mq-ink);
    --bs-heading-color: var(--mq-ink);
    /* O secundario tem de ser LEGIVEL: ink-3 sobre a ficha #191a1b fica em
       ~4.2:1 e o dono viu o texto sumindo. O apagado (ink-3) fica para o
       terciario de verdade: metainfo, marcao e rodape. */
    --bs-secondary-color: var(--mq-ink-2);
    --bs-secondary-rgb: 208, 214, 224;
    --bs-tertiary-color: var(--mq-ink-4);
    --bs-border-color: var(--mq-rule-2);
    --bs-link-color: var(--mq-stamp);
    --bs-link-hover-color: var(--mq-stamp-soft);
    --bs-card-bg: var(--mq-ficha);
    --bs-card-border-color: var(--mq-rule-2);
    --bs-card-cap-bg: transparent;
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: 16px;
    --bs-focus-ring-color: rgba(113, 112, 255, .45);
    --bs-link-color-rgb: 113, 112, 255;
    --bs-link-hover-color-rgb: 130, 143, 255;
}

/* A ficha sobre o canvas escuro: a borda e o que separa (o modelo e quase
   sem sombra); a sombra fica so no repouso alto (hero, modal). */
.public-body .card,
.public-body .mq-feature,
.public-body .mq-simple-card,
.public-body .mq-doc-card,
.public-body .mq-doc-fluxo__link,
.public-body .mq-doc-side {
    background: var(--mq-ficha);
    border: 1px solid var(--mq-rule-2);
    box-shadow: var(--mq-shadow-sm);
}
.public-body .card-header,
.public-body .card-footer {
    background: transparent;
    border-color: var(--mq-rule-2);
    color: var(--mq-ink);
}

/* ---- O heroi: altura inteira, tipo de campanha, brilho atras ---- */
/* A altura inteira e do HEROI, nao de qualquer bloco `.mq-hero`: o
   cabecalho do /sobre, o do /solucoes e o CTA final da home usam a mesma
   classe, ewhen pegando 92px de altura eles viravam caixa vazia de tela
   cheia. So o heroi de verdade (`.mq-hero--alto`) tem altura inteira. */
.public-body .mq-hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: transparent;
    border: 1px solid var(--mq-rule-2);
}
.public-body .mq-hero--alto {
    min-height: 92vh;
}
.public-body .mq-hero::before,
.public-body .mq-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}
.public-body .mq-hero::before {
    width: 460px;
    height: 460px;
    top: -140px;
    left: -130px;
    background: radial-gradient(circle, rgba(94, 106, 210, .30) 0%, rgba(94, 106, 210, 0) 70%);
    animation: mq-float-a 18s ease-in-out infinite;
}
.public-body .mq-hero::after {
    width: 520px;
    height: 520px;
    top: 20%;
    right: -170px;
    background: radial-gradient(circle, rgba(113, 112, 255, .26) 0%, rgba(113, 112, 255, 0) 68%);
    animation: mq-float-b 22s ease-in-out infinite;
}
@keyframes mq-float-a {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(24px, 32px, 0); }
}
@keyframes mq-float-b {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(-28px, -24px, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .public-body .mq-hero::before,
    .public-body .mq-hero::after { animation: none; }
}

/* O titulo: 72px, peso 510 (~500), line-height 1.00, tracking -1.584px —
   exatamente a linha do modelo para Display XL. */
.public-body .mq-hero h1 {
    font-size: clamp(2.5rem, 1.3rem + 4.4vw, 4.5rem);
    font-weight: 500;
    line-height: 1.0;
    letter-spacing: -.033em;
    color: var(--mq-ink);
    max-width: 16ch;
}
.public-body .mq-hero__lead {
    font-size: clamp(1.05rem, .96rem + .5vw, 1.28rem);
    line-height: 1.55;
    color: var(--mq-ink-2);
    max-width: 36rem;
}
.public-body .mq-hero__note { color: var(--mq-ink-3); }

/* A ficha do heroi: painel escuro elevado, com a borda de luz. */
.public-body .mq-hero__panel {
    background: var(--mq-ficha);
    border: 1px solid var(--mq-rule-2);
    border-radius: var(--mq-radius-lg);
    box-shadow: var(--mq-shadow-lg);
    padding: 1.25rem 1.35rem 1.1rem;
    color: var(--mq-ink);
}
.public-body .mq-hero__panel-label { color: var(--mq-ink-3); border-bottom-color: var(--mq-rule-2); }
.public-body .mq-hero__item { border-bottom-color: var(--mq-rule); }
.public-body .mq-hero__name { color: var(--mq-ink); }
.public-body .mq-hero__meta { color: var(--mq-ink-3); }
.public-body .mq-hero__item i { color: var(--mq-stamp); }

/* O titulo de secao: Display de 48px, tracking -1.056px. */
.public-body main section h2 {
    font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.5rem);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -.022em;
    color: var(--mq-ink);
}

/* O respiro: a pagina nao tem pressa (referencia: py-36 no desktop). */
.public-body main section { padding-block: clamp(3rem, 1rem + 6.5vw, 6rem); }

/* O topo: vidro escuro, ainda com o CTA acompanhando a rolagem. */
.public-body .sticky-top {
    background: rgba(8, 9, 10, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--mq-rule);
}

/* Botao de contorno sobre fundo escuro: fio de luz, nao fio de tinta. */
.public-body .btn-outline-secondary {
    color: var(--mq-ink);
    border-color: var(--mq-rule-2);
    background: rgba(255, 255, 255, .03);
}
.public-body .btn-outline-secondary:hover {
    color: var(--mq-ink);
    background: var(--mq-elev);
    border-color: rgba(255, 255, 255, .2);
}
.public-body .btn-mq-outline-light {
    color: var(--mq-ink);
    border-color: var(--mq-rule-2);
}
.public-body .btn-mq-outline-light:hover { background: var(--mq-elev); color: var(--mq-ink); }

/* O CTA ambar: hover CLAREIA (regra do mundo), e sobre escuro o texto e
   quase preto para o preenchimento responder. */
.public-body .btn-mq-cta {
    background: var(--mq-cta);
    color: var(--mq-on-cta);
    box-shadow: var(--mq-shadow-cta, 0 2px 8px rgba(0, 0, 0, .5));
}
.public-body .btn-mq-cta:hover { background: var(--mq-cta-ink); color: var(--mq-on-cta); }
.public-body .btn-mq-primary {
    background: var(--mq-stamp-fill);
    color: var(--mq-on-stamp);
    box-shadow: var(--mq-shadow-sm);
}
.public-body .btn-mq-primary:hover {
    background: var(--mq-stamp-fill);
    color: var(--mq-on-stamp);
    box-shadow: 0 0 0 3px rgba(113, 112, 255, .40), var(--mq-shadow-sm);
}

/* O rotulo dentro da ficha: titulo de verdade, entao tinta cheia. O dono viu
   o nome do segmento apagado. */
.public-body .mq-feature,
.public-body .card { color: var(--mq-ink-2); }
.public-body .mq-feature h2,
.public-body .mq-feature h3,
.public-body .mq-feature h5,
.public-body .mq-feature h6,
.public-body .mq-feature .fw-semibold,
.public-body .mq-feature strong { color: var(--mq-ink); }
.public-body .card h2,
.public-body .card h3,
.public-body .card h5,
.public-body .card h6 { color: var(--mq-ink); }

/* Os icones das features: a tinta, nao a cor (o modelo e quase acromatico). */
.public-body i.mq-i-violet { color: var(--mq-stamp); }
.public-body i.mq-i-blue   { color: var(--mq-ink-2); }
.public-body i.mq-i-cyan   { color: var(--mq-ink-3); }

/* Tabela/extrato: a ficha escura com a linha de luz. */
.public-body table { color: var(--mq-ink-2); }
.public-body table thead th {
    color: var(--mq-ink-3);
    border-bottom-color: var(--mq-rule-2);
    font-size: var(--mq-text-xs);
    letter-spacing: var(--mq-track-label);
    text-transform: uppercase;
}
.public-body table td { border-bottom-color: var(--mq-rule); }

/* O formulario: campo escuro com fio de luz. */
/* Campo = controle: a borda precisa de 3:1 (WCAG 1.4.11). A borda de luz
   sutil do modelo (1.38:1) NAO identifica um campo; aqui sobe para 34%. */
.public-body .form-control,
.public-body .form-select {
    background: var(--mq-ficha-2);
    border-color: rgba(255, 255, 255, .34);
    color: var(--mq-ink);
}
.public-body .form-control:hover,
.public-body .form-select:hover { border-color: rgba(255, 255, 255, .46); }
.public-body .form-control:focus,
.public-body .form-select:focus {
    background: var(--mq-ficha-2);
    border-color: var(--mq-stamp);
    box-shadow: 0 0 0 4px rgba(113, 112, 255, .22);
    color: var(--mq-ink);
}
.public-body .form-control::placeholder { color: var(--mq-ink-4); }
.public-body .form-label { color: var(--mq-ink-2); }

/* O doc: passos e listas na tinta do modelo. */
.public-body .mq-doc-list li { color: var(--mq-ink-2); }
.public-body .mq-doc-list li::before { background: var(--mq-stamp); }
.public-body .mq-doc-list--tela li::before { background: var(--mq-ink-4); }
.public-body .mq-doc-steps li { color: var(--mq-ink-2); border-bottom-color: var(--mq-rule); }
.public-body .mq-doc-crumbs { color: var(--mq-ink-3); }
.public-body .mq-doc-crumbs strong { color: var(--mq-ink); }
.public-body .mq-doc-side__rota { background: var(--mq-ficha-2); border-color: var(--mq-rule-2); color: var(--mq-ink); }
.public-body .mq-doc-dica { background: var(--mq-cta-tint); border-color: var(--mq-rule-2); }
.public-body .mq-doc-dica i { color: var(--mq-cta); }

/* O badge "solido" do Bootstrap usa tinta clara: no escuro fica branco
   demais. Rebaixa para o preenchimento de marca. */
.public-body .text-bg-primary {
    background: var(--mq-stamp-fill) !important;
    color: var(--mq-on-stamp);
}

/* A lista de planos, o destaque de preco e a vitrine: ficha escura. */
.public-body .mq-plan-card,
.public-body .mq-card {
    background: var(--mq-ficha);
    border: 1px solid var(--mq-rule-2);
    color: var(--mq-ink-2);
}

/* =========================================================================
   28. O BANCO DE FOTOS — a caixa deixa de estar vazia
   -------------------------------------------------------------------------
   O dono apontou as "caixas gigantes" (o CTA final da home, o "Vamos
   conversar?" do /sobre e o cabecalho do /solucoes): eram tres caixas com
   92vh de altura e tres linhas de texto. A causa foi minha: `min-height: 92vh`
   estava no `.mq-hero` generico, e essas tres secoes usam a MESMA classe do
   heroi. A altura inteira ficou so no heroi de verdade (`.mq-hero--alto`).

   E as fotos que o dono mandou entram aqui: caixa com proporcao fixa (nada de
   altura que pula no carregamento), `object-fit: cover` para nao distorcer
   fonte de proporcao diferente, `loading="lazy"` e `alt=""` — sao ilustrativas
   ao lado de um titulo, entao o texto carrega o sentido e a imagem nao precisa
   inventar descricao que este modelo nao consegue verificar.
   ========================================================================= */

.mq-photos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mq-photo {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--mq-rule-2);
    border-radius: var(--mq-radius-md);
    background: var(--mq-ficha-2);
    transition: border-color var(--mq-fast) var(--mq-ease), transform var(--mq-mid) var(--mq-ease);
}
.mq-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mq-photo:hover {
    border-color: rgba(255, 255, 255, .26);
    transform: translateY(-2px);
}
/* A legenda fica legivel sobre a foto com um degrade curto: e legibilidade,
   nao enfeite. */
.mq-photo figcaption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    margin: 0;
    padding: 1.7rem .7rem .55rem;
    font-size: var(--mq-text-xs);
    font-weight: 600;
    letter-spacing: var(--mq-track-label);
    text-transform: uppercase;
    color: #f7f8f8;
    background: linear-gradient(to top, rgba(8, 9, 10, .86) 0%, rgba(8, 9, 10, 0) 100%);
}

/* A grade dentro de uma caixa de chamada: respiro em volta e um fio de luz. */
.mq-photos--dentro {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mq-rule);
}
.mq-photos--solto { margin: 1.75rem 0 .5rem; }


/* =========================================================================
   29. A CAPA DA DOCUMENTACAO — titulo de pagina, nao cartaz de campanha
   -------------------------------------------------------------------------
   `.public-body .mq-hero h1` foi calibrado para o heroi da home: ate 4.5rem,
   `max-width: 16ch`, line-height 1.0. Isso esta certo para as outras cinco
   paginas que usam `.mq-hero`, porque o titulo delas e curto ("Servicos",
   "Sobre a Maisquemil"). So a documentacao quebra, porque o titulo dela e
   longo e boa parte e caixa alta: "Documentacao do MAISQUEMIL OS" caia em
   QUATRO linhas de 56-72px dentro de uma caixa de 388px.

   Aqui o titulo volta a ser cabecalho de pagina: 28-40px, medida companionha
   ao container (nao um `16ch` que nem cabia), e entrelinha com ar. A regra do
   heroi NAO foi tocada — as outras telas continuam como o senhor aprovou.
   ========================================================================= */
.public-body .mq-doc-hero h1 {
    font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.02em;
    max-width: 24ch;      /* a medida acompanha o texto, nao a campanha */
    margin-bottom: .75rem;
}

/* O texto de apoio acompanha o titulo: nao compete com ele. */
.public-body .mq-doc-hero .lead {
    font-size: 1.0625rem;
    line-height: 1.55;
    max-width: 58ch;
}


/* =========================================================================
   30. A CAPA EMPILHA — a section do heroi e uma COLUNA, nao uma linha
   -------------------------------------------------------------------------
   `.public-body .mq-hero` era `display: flex` sem `flex-direction`: ou seja,
   EM LINHA. A home nao aparecia, porque a section inteira e uma unica `.row`
   (um filho so, e ele ocupa a linha). As capas de Solucoes, Sobre, Servicos,
   Contato (2 filhos) e a da Documentacao (4 filhos) ficavam com tudo lado a
   lado: na documentacao o paragrafo medido tinha 71px de largura por 659px de
   altura, e o titulo 244px em 4 linhas.

   Aqui a section empilha. `align-items` e o eixo transversal — que, virando a
   coluna, passa a ser o HORIZONTAL — entao cada pagina pede o seu:
     * a home: um filho so, e ele precisa da largura toda (`stretch`);
     * as capas `text-center`: filhos centralizados (`center`);
     * a capa da documentacao: a esquerda, no inicio da linha (`flex-start`).
   E `justify-content: center` preserva a centralizacao VERTICAL que o
   `align-items: center` de antes fazia — sem ela o heroi de 92vh da home
   perderia o conteudo no meio da tela.
   ========================================================================= */
.public-body .mq-hero {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.public-body .mq-hero--alto { align-items: stretch; }
.public-body .mq-hero.text-center { align-items: center; }


/* =========================================================================
   31. O ANEL DE FOCO — o token que faltava
   -------------------------------------------------------------------------
   `--mq-focus-ring` e usado em `.form-control:focus` e
   `.form-check-input:focus`, mas nao estava definido no tema claro. Variavel
   custom indefinida deixa a declaracao invalida em tempo de valor
   calculado: o box-shadow do foco nao aplica. O `:focus-visible` geral tem
   anel proprio, entao o que sumia era o anel dos CAMPOS — quem navega por
   teclado via so a borda de 1px mudar, sem o halo que diz "voce esta aqui".
   ========================================================================= */
:root {
    --mq-focus: rgba(30, 64, 175, .30);
    --mq-focus-ring: 0 0 0 3px rgba(30, 64, 175, .30);
}


/* =========================================================================
   32. O BANCO DE FOTOS — a grade ocupa a largura que recebe
   -------------------------------------------------------------------------
   `.mq-photos` nao tinha `width: 100%`. Sendo item flex dentro do `.mq-hero`
   (que agora e coluna), encolhia ate o tamanho do proprio conteudo — e o
   conteudo de uma grade `auto-fit minmax(190px, 1fr)` e o minimo. Na home
   (medida no navegador) a lista media 190px de largura com UMA coluna, dentro
   de um contêiner de 696px: as quatro fotos empilhadas num cantinho.

   E o minimo de 190px dava 3 colunas numa largura de 646px, deixando a quarta
   foto sozinha na segunda fileira. Com 240px de minimo cabem 2 (2x2 de ~317px)
   e, num contêiner largo, as quatro em linha. A foto ganha tamanho em vez de
   perder a companhia.

   O que NAO mudou: a proporcao 16/10, o `object-fit: cover`, o raio, o fio e
   o piso de legibilidade da legenda. So a grade.
   ========================================================================= */
.mq-photos {
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}


/* =========================================================================
   33. A BANDA DE FOTO — a foto que separa os blocos
   -------------------------------------------------------------------------
   `.mq-photo` tem 16/10, calibrado para foto dentro de meia coluna. Numa
   banda com a largura do container isso daria 712px de altura: a foto
   vira um outdoor e engole o texto. A banda e 21/9 — grande, mas respira
   entre os blocos em vez de sombreá-los.
   ========================================================================= */
.mq-photo--banda {
    aspect-ratio: 21 / 9;
    margin-inline: 0;
}
@media (max-width: 575.98px) {
    /* No telefone a banda vira um retrato: 21/9 daria 70px de altura. */
    .mq-photo--banda { aspect-ratio: 16 / 10; }
}


/* =========================================================================
   34. A GRADE DOS SEGMENTOS — 10 cards, 5 x 2, o conjunto centralizado
   -------------------------------------------------------------------------
   O markup pedia `col-6 col-md-3 col-lg`. Bootstrap nao tem `col-lg` sem
   numero: a classe nao existe, e o que sobrava no CSS do projeto era uma
   regra solta que estica as colunas igualmente (`flex: 1 0 0%`). Aí cabiam
   quantas dessem na linha — medido no navegador, 8 em cima e 2 embaixo, com
   120px cada.

   Grid de verdade, e nao a grade de 12 colunas: 10 itens so se dividem igual
   por 5 (ou por 2), e a grade do Bootstrap nao tem coluna fracionaria para
   cinco. A decisao do dono: 5 em cima, 5 embaixo, o conjunto centralizado e
   com respiro. As colunas tem largura maxima em vez de esticar — e o que
   faz o conjunto parecer CENTRALIZADO em vez de justificado contra as
   bordas. No telefone sao 2 colunas, que tambem divide 10 igual.
   ========================================================================= */
.mq-segmentos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (min-width: 768px) {
    .mq-segmentos {
        grid-template-columns: repeat(5, minmax(0, 200px));
        justify-content: center;
        column-gap: 1.25rem;
        row-gap: 1.5rem;
    }
}


/* =========================================================================
   35. A RUA FALA COM O BOOTSTRAP — as superficies que faltavam
   -------------------------------------------------------------------------
   A rua escura redefinia os tokens `--mq-*` e nenhum dos `--bs-*`. As
   utilitarias de superficie do Bootstrap resolvem para os `--bs-*`: entao
   `bg-body-tertiary` continuava com o valor CLARO do `:root` (#F8FAFC) e
   desenhava uma caixa quase branca com texto claro em cima — era o "o fundo
   branco some com as letras" no /contato.

   O conserto e o token, nao o remendo: a rua declara as superficies do
   Bootstrap com as fichas dela. Nenhum valor novo foi inventado — cada um e a
   ficha ou a tinta que a rua ja usa. A regra solta que existia para
   `.public-body .text-bg-primary` e o mesmo buraco remendado a mao.
   ========================================================================= */
.public-body {
    --bs-body-bg: var(--mq-desk);
    --bs-body-color: var(--mq-ink);
    --bs-emphasis-color: var(--mq-ink);
    --bs-secondary-color: var(--mq-ink-2);
    --bs-secondary-color-rgb: 208, 214, 224;
    --bs-secondary-bg: var(--mq-ficha);
    --bs-tertiary-color: var(--mq-ink-3);
    --bs-tertiary-color-rgb: 138, 143, 152;
    --bs-tertiary-bg: var(--mq-ficha-2);
    --bs-border-color: var(--mq-rule);
    --bs-border-color-translucent: var(--mq-rule-2);
    --bs-emphasis-color-rgb: 247, 248, 248;
}


/* =========================================================================
   36. OS TRIPLOS RGB — o complemento da secao 35
   -------------------------------------------------------------------------
   A secao 35 declarava `--bs-tertiary-bg` no escopo da rua e nao adiantou: a
   variavel valia (#212223) e a caixa continuava #F8F9FA. O motivo esta no
   Bootstrap 5.3.3:

     .bg-body-tertiary{--bs-bg-opacity:1;
       background-color:rgba(var(--bs-tertiary-bg-rgb),var(--bs-bg-opacity))!important}

   A regra usa o TRIPLO `--bs-tertiary-bg-rgb`, nao a cor. E o projeto so
   declarava cores em hexadecimal — o triplo ficava no padrao do Bootstrap,
   que e claro, e o `!important` da regra pintava. Por isso nao adianta
   declarar so a cor: tem que declarar as duas.

   Estes sao os triplos das fichas e tintas da propria rua. O alfa continua
   sendo o `--bs-bg-opacity` que o Bootstrap poe.
   ========================================================================= */
.public-body {
    --bs-body-bg-rgb: 8, 9, 10;         /* --mq-desk    #08090a */
    --bs-body-color-rgb: 247, 248, 248; /* --mq-ink     #f7f8f8 */
    --bs-emphasis-color-rgb: 247, 248, 248;
    --bs-secondary-color-rgb: 208, 214, 224; /* --mq-ink-2 #d0d6e0 */
    --bs-secondary-bg-rgb: 25, 26, 27;       /* --mq-ficha  #191a1b */
    --bs-tertiary-color-rgb: 138, 143, 152;  /* --mq-ink-3  #8a8f98 */
    --bs-tertiary-bg-rgb: 33, 34, 35;        /* --mq-ficha-2 #212223 */
    --bs-border-color-rgb: 255, 255, 255;
}


/* =========================================================================
   37. O h2 OUVE A PROPRIA CLASSE
   -------------------------------------------------------------------------
   `.public-body main section h2` manda em `clamp(1.65rem, .., 2.5rem)` e tem
   especificidade (0,1,2) — maior que a de qualquer classe de utilidade
   (0,1,0). Resultado: todo `<h2 class="h4|h5|h6|h3">` do site publico
   ignorava o tamanho que a propria pagina pediu. Medido em /servicos: os
   titulos marcados `h5` saiam a 32px em vez de 17px.

   A regra da rua e para o h2 QUE NAO TEM classe de tamanho — o titulo de
   uma secao, que deve ser grande. Estas devolvem a palavra aos que tem. Os
   valores sao os que o projeto ja dava a `.h3/.h4/.h5/.h6`; nada novo.
   ========================================================================= */
.public-body main section h2.h3 { font-size: var(--mq-text-lg); }
.public-body main section h2.h4 { font-size: 1.1875rem; }
.public-body main section h2.h5 { font-size: var(--mq-text-md); }
.public-body main section h2.h6 { font-size: var(--mq-text-base); }

/* =========================================================================
   38. PAGINA LEGAL + AVISO DE COOKIES (2026-10-02)
   -------------------------------------------------------------------------
   /termos e /privacidade sao TEXTO LONGO. Duas coisas que faltavam nesse
   formato e que aqui se resolvem:

   1. SUMARIO. Doze paragrafos sem indice obriga o leitor a rolar ate o fim
      para achar a secao que importa. O sumario e uma ficha, nao uma lista
      solta, porque ele compete com o texto e nao pode pesar mais que ele.

   2. COBERTURA DO RODAPE. O aviso de cookie e `position: fixed` no pe da
      tela. Sem um `padding-bottom` no `body` enquanto ele esta no ar, ele
      cobre a ultima linha do rodape — e o rodape e onde esta o botao para
      reabrir o aviso. Um aviso que esconde a saida e um aviso sem volta.
      Quem decide e a classe `.mq-cookie-visivel`, posta pelo JS.

   Sem gradiente: o aviso e uma ficha elevada com fio de luz, como o resto.
   ========================================================================= */

/* ---- sumario ---- */
.mq-legal-sumario {
    background: var(--mq-ficha);
    border: 1px solid var(--mq-rule);
    border-radius: var(--mq-radius);
    padding: var(--mq-pad);
}
.mq-legal-sumario__lista {
    margin: 0;
    padding: 0;
    list-style: none;
    /* Duas colunas onde cabe: 12 itens numa coluna viram uma parede. O
       `auto-fit` mantem uma coluna no celular sem precisar de media query. */
    columns: 2 15rem;
    column-gap: 1.6rem;
}
.mq-legal-sumario__lista li {
    break-inside: avoid;
    padding: .18rem 0;
}
.mq-legal-sumario__lista a {
    display: inline-block;
    color: var(--mq-ink-2);
    text-decoration: none;
    font-size: var(--mq-text-base);
    line-height: 1.45;
    border-bottom: 1px solid transparent;
    transition: color var(--mq-fast) var(--mq-ease),
                border-color var(--mq-fast) var(--mq-ease);
}
.mq-legal-sumario__lista a:hover,
.mq-legal-sumario__lista a:focus-visible {
    color: var(--mq-ink);
    border-bottom-color: var(--mq-stamp);
}

/* ---- blocos de secao ---- */
.mq-legal {
    margin-bottom: 2.4rem;
    /* O cabecalho e `sticky-top`: sem isto, clicar num item do sumario
       escondeva o titulo da secao atras dele. */
    scroll-margin-top: 6rem;
}
.mq-legal > h3 {
    color: var(--mq-ink);
    margin-top: 1.6rem;
    margin-bottom: .6rem;
}
.mq-legal p,
.mq-legal li {
    color: var(--mq-ink-2);
    font-size: var(--mq-text-md);
    line-height: 1.72;
}
.mq-legal p { margin-bottom: .9rem; }
.mq-legal ul,
.mq-legal ol {
    padding-left: 1.2rem;
    margin-bottom: 1rem;
}
.mq-legal li { margin-bottom: .4rem; }
.mq-legal li::marker { color: var(--mq-stamp-soft); }
.mq-legal a { color: var(--mq-stamp-ink); }
.mq-legal strong { color: var(--mq-ink); font-weight: 600; }
.mq-legal em { color: var(--mq-ink-2); }
.mq-legal code {
    color: var(--mq-stamp-ink);
    background: var(--mq-stamp-tint);
    border: 1px solid var(--mq-rule);
    border-radius: var(--mq-radius-xs);
    padding: .05rem .32rem;
    font-size: .86em;
}

/* A data de atualizacao no fim do documento: presente, mas nao compete. */
.mq-legal__nota {
    color: var(--mq-ink-3);
    font-size: var(--mq-text-sm);
    border-top: 1px solid var(--mq-rule);
    padding-top: 1rem;
    margin-top: 1.4rem;
}

/* [PREENCHER] — o que o dono precisa preencher antes de publicar.
   Fica VISIVEL de proposito: documento jurido com placeholder escondido e
   documento com claim que a empresa nunca fez. */
.mq-legal__falta {
    color: var(--mq-cta-ink);
    background: var(--mq-cta-tint);
    border-bottom: 1px dashed var(--mq-cta);
    border-radius: 3px;
    padding: .05rem .25rem;
}

/* Caixa de destaque (usada na secao de cookies). */
.mq-legal__aviso {
    background: var(--mq-ficha-2);
    border: 1px solid var(--mq-rule);
    border-left: 3px solid var(--mq-stamp-fill);
    border-radius: var(--mq-radius-sm);
    padding: var(--mq-pad);
    margin-top: 1.4rem;
}
.mq-legal__aviso h3 { margin: 0 0 .5rem; color: var(--mq-ink); }
.mq-legal__aviso p {
    color: var(--mq-ink-2);
    font-size: var(--mq-text-base);
    line-height: 1.65;
    margin-bottom: .7rem;
}

/* ---- tabela de cookies ----
   O PREFIXO `.public-body` NAO e redundante: o arquivo ja tem
   `.public-body table thead th` (0,1,3) e, sem o prefixo, esta regra (0,1,2)
   perdia e o rotulo da coluna saia apagado em relacao a celula. Medido: 5.36:1
   no cabecalho contra 13.64:1 no corpo. E o mesmo defeito da secao 37 — na rua,
   seletor com elemento na cadeia vence classe sozinha.
   O Bootstrap pinta a tabela pela `--bs-table-*`, que a RUA nao declara: a
   tabela saia clara sobre o canvas escuro (o mesmo defeito do
   `.bg-body-tertiary` corrigido na secao 36). Aqui vao as cores, todas
   medidas sobre #08090a. */
.mq-legal-tabela-wrap {
    margin: 1.2rem 0;
    border: 1px solid var(--mq-rule);
    border-radius: var(--mq-radius-sm);
    overflow: hidden;
}
.mq-legal-tabela {
    --bs-table-bg: transparent;
    --bs-table-color: var(--mq-ink-2);
    --bs-table-border-color: var(--mq-rule);
    --bs-table-striped-bg: var(--mq-ficha);
    --bs-table-striped-color: var(--mq-ink-2);
    --bs-table-hover-bg: var(--mq-elev);
    --bs-table-hover-color: var(--mq-ink);
    margin: 0;
    color: var(--mq-ink-2);
    font-size: var(--mq-text-base);
    vertical-align: top;
}
.public-body .mq-legal-tabela > thead th {
    background: var(--mq-ficha);
    color: var(--mq-ink);
    font-size: var(--mq-text-xs);
    font-weight: 700;
    letter-spacing: var(--mq-track-label);
    text-transform: uppercase;
    border-bottom: 1px solid var(--mq-rule-2);
    white-space: nowrap;
    padding: .7rem .9rem;
}
.public-body .mq-legal-tabela > tbody th,
.public-body .mq-legal-tabela > tbody td {
    padding: .8rem .9rem;
    border-bottom: 1px solid var(--mq-rule);
    line-height: 1.6;
}
.public-body .mq-legal-tabela > tbody tr:last-child th,
.public-body .mq-legal-tabela > tbody tr:last-child td { border-bottom: 0; }
.public-body .mq-legal-tabela > tbody th {
    color: var(--mq-ink);
    font-weight: 500;
    white-space: nowrap;
}
.mq-legal-tabela code {
    color: var(--mq-stamp-ink);
    background: var(--mq-stamp-tint);
    border-radius: var(--mq-radius-xs);
    padding: .05rem .3rem;
    font-size: .86em;
    white-space: nowrap;
}

/* =========================================================================
   38b. AVISO DE COOKIES
   -------------------------------------------------------------------------
   Nao e modal: a pagina continua utilizavel. Nao rouba o foco. Some em dois
   cliques e volta pelo rodape. Fica ABAIXO do cabecalho grudado (z-index do
   Bootstrap sticky-top e 1020).
   ========================================================================= */
.mq-cookie {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    padding: .75rem clamp(.75rem, .3rem + 2vw, 1.5rem) 1rem;
    /* Sobe junto com a escolha: sem isto ele some no meio da transicao. */
    transition: transform var(--mq-mid) var(--mq-ease),
                opacity var(--mq-mid) var(--mq-ease);
}
.mq-cookie[hidden] {
    /* `hidden` sozinho nao esconde nada se a regra de display mandar mais.
       Aqui o elemento e `display:flex` para o layout, entao precisa do
       override explicito — mesma armadilha do `[hidden]` do HTML. */
    display: none;
}
.mq-cookie__caixa {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: clamp(.75rem, .4rem + 1vw, 1.1rem);
    flex-wrap: wrap;
    background: var(--mq-gaveta);
    border: 1px solid var(--mq-rule-2);
    border-radius: var(--mq-radius-lg);
    box-shadow: var(--mq-shadow-md);
    padding: 1rem 1.15rem;
}
.mq-cookie__ico {
    font-size: 1.35rem;
    color: var(--mq-stamp-soft);
    line-height: 1;
    flex: none;
}
.mq-cookie__texto {
    flex: 1 1 22rem;
    min-width: 0;
}
.mq-cookie__titulo {
    color: var(--mq-ink);
    font-weight: 700;
    font-size: var(--mq-text-base);
}
.mq-cookie__texto p {
    color: var(--mq-ink-2);
    font-size: var(--mq-text-sm);
    line-height: 1.6;
    margin: 0;
}
.mq-cookie__texto strong { color: var(--mq-ink); font-weight: 600; }
.mq-cookie__link {
    color: var(--mq-stamp-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.mq-cookie__link:hover,
.mq-cookie__link:focus-visible { color: var(--mq-stamp-soft); }
.mq-cookie__acoes {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    flex: none;
}
.mq-cookie__acoes .btn {
    font-size: var(--mq-text-sm);
    padding: .42rem .9rem;
}

/* O espaco enquanto o aviso esta no ar. Sem isso o aviso cobre a ultima
   linha do rodape — que e onde fica o botao para REABRIR o aviso. Um aviso
   que esconde a saida e um aviso sem volta.

   DOIS motivos para nao ser um valor fixo:

   1. O espaco vai no `<body>`, e nao no `<footer>`: o rodape tem `py-4`, e
      utilitario do Bootstrap 5 e `!important` — nenhuma regra comum o vence.
      Ja foi tentado no rodape e mediu-se 24px (o py-4) em vez do esperado.
   2. A ALTURA vem de `--mq-cookie-h`, que o JS mede no aviso a cada abertura
      e a cada mudanca de largura. Com um valor fixo (ja testei 7.5rem = 120px)
      o aviso de 170px continuava cobrindo a linha de copyright. O aviso quebra
      o texto conforme a janela e empilha no celular, entao um px fixo esta
      errado em alguma largura. */
.public-body.mq-cookie-visivel {
    padding-bottom: calc(var(--mq-cookie-h, 17.5rem) + 1.5rem);
}

/* Abaixo de 640px o aviso vira coluna: os botoes ganham a largura toda. */
@media (max-width: 639.98px) {
    .mq-cookie__caixa { padding: .9rem 1rem; }
    .mq-cookie__texto { flex: 1 1 100%; order: 2; }
    .mq-cookie__ico { order: 1; }
    .mq-cookie__acoes {
        order: 3;
        flex: 1 1 100%;
    }
    .mq-cookie__acoes .btn { flex: 1 1 auto; }
    /* No celular o aviso empilha e fica mais alto — mas quem mede e o
       `--mq-cookie-h`, entao aqui nao ha valor para manter. */
}

/* ---- a linha de legal do rodape ----
   Fica numa linha so, com os mesmos tintos dos outros links do rodape. O
   botao de preferencias parece com o resto e nao com um botao: ele NAO e
   uma acao que muda a pagina, e um link que abre um aviso. */
.mq-footer-legal {
    display: flex;
    gap: .9rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: .5rem;
    font-size: var(--mq-text-xs);
}
.mq-footer-legal a,
.mq-footer-legal__btn {
    color: var(--mq-ink-3);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    transition: color var(--mq-fast) var(--mq-ease);
}
.mq-footer-legal a:hover,
.mq-footer-legal a:focus-visible,
.mq-footer-legal__btn:hover,
.mq-footer-legal__btn:focus-visible {
    color: var(--mq-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}
@media (max-width: 767.98px) {
    .mq-footer-legal { justify-content: flex-start; }
}

/* =========================================================================
   39. O ARTIGO DO BLOG — SO O QUE O MARKDOWN PRODUZ E O CSS NAO TINHA (2026-10-02)
   -------------------------------------------------------------------------
   O blog nao ganhou um desenho proprio. O dono pediu que fosse "uma pagina do
   site igual as outras", e ele e': o esqueleto e' o de /docs (trilha, cabeca,
   gaveta, pager) e o corpo entra dentro de `.mq-legal`, que ja estilizava
   `p`, `li`, `ul`, `ol`, `a`, `strong`, `em` e `code` nas paginas /termos e
   /privacidade. Zero CSS novo para o texto corrido.

   Aqui so entram as TRES coisas que o Markdown gera e que o arquivo nao tinha
   regra nenhuma. Medido em 2026-10-02 varrendo os seletores do arquivo inteiro
   (3.816 linhas, 191 classes `mq_*`):

     pre ......... 0 seletor termina na tag
     blockquote .. 0 seletor termina na tag
     h2 .......... `.mq-legal` so estiliza `> h3`

   Sem elas um artigo tecnico saia com o bloco de codigo sem fundo e sem
   quebra de linha no celular, a citacao virava um paragrafo comum, e o `##`
   do Markdown caia no tamanho do Bootstrap (2.1rem) enquanto o resto do site
   escreve o mesmo papel com `h2.h5` (1.25rem) — medido em
   `public/docs/show.blade.php`.

   `.mq-post` nao tem desenho: ela so nomespaa estas tres regras, para o
   Markdown do blog NAO mexer em /termos e /privacidade, que ja estavam no ar.
   ========================================================================= */

/* ---- O `##` e o `###` do Markdown, no tamanho que o site ja usa ---- */
.mq-post h2 {
    color: var(--mq-ink);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-top: 2rem;
    margin-bottom: .8rem;
}
.mq-post h3 {
    color: var(--mq-ink);
    font-size: 1rem;
    font-weight: 700;
    margin-top: 1.6rem;
    margin-bottom: .6rem;
}

/* ---- O TRECHO DE CODIGO ---- */
.mq-post pre {
    background: var(--mq-ficha-2);
    border: 1px solid var(--mq-rule-2);
    border-radius: var(--mq-radius);
    padding: .9rem 1rem;
    margin: 0 0 1.2rem;
    /* Sem isto, uma linha de codigo larga estoura o post no celular: o `pre`
       nao quebra linha e a rolagem horizontal cai no meio da frase. */
    overflow-x: auto;
}
/* O `code` de dentro do bloco NAO e' codigo embutido, e' o proprio bloco.
   Sem este reset, `.mq-legal code` (L3554) pinta um chip com borda em volta
   de cada linha do trecho. */
.mq-post pre code {
    color: var(--mq-ink-2);
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    font-size: var(--mq-text-sm);
}

/* ---- A CITACAO ---- */
.mq-post blockquote {
    margin: 0 0 1.2rem;
    padding: .85rem 1.1rem;
    border-left: 3px solid var(--mq-stamp-soft);
    background: var(--mq-ficha-2);
    border-radius: 0 var(--mq-radius) var(--mq-radius) 0;
    color: var(--mq-ink-2);
    font-style: italic;
}
/* O ultimo paragrafo da citacao nao pode herdar a margem que `.mq-legal p`
   aplica (L3543): senao o texto sobe do bloco. */
.mq-post blockquote p:last-child { margin-bottom: 0; }

/* Impressao: aviso de cookie nao vai para o papel. */
@media print {
    .mq-cookie { display: none !important; }
}

/* Quem pediu menos movimento nao ganha movimento. */
@media (prefers-reduced-motion: reduce) {
    .mq-cookie { transition: none; }
}