/* =============================================================================
   make-m3.css — SISTEMA DE INTERFACE MATERIAL DESIGN 3 (Material You)
   ITAM Make Distribuidora · redesign de 09/2026

   Carregado por ÚLTIMO (ver UNFOLD["STYLES"]). Contrato: DESIGN-SYSTEM.md.

   O QUE É M3, e o que muda em relação ao que havia antes:
     • Elevação é SUPERFÍCIE TONAL, não sombra. Um cartão "sobe" ficando um tom
       mais denso (surface-container-low → high), não ganhando sombra.
     • Cor não é uma paleta: é um conjunto de PAPÉIS (primary/on-primary/
       primary-container/…) derivados de uma cor-fonte — aqui o verde da Make.
       Cada papel tem o seu par "on-" com contraste garantido.
     • Forma é escala: 4 · 8 · 12 · 16 · 28px. Seleção e botão são pílula.
     • Interação é STATE LAYER: uma camada da cor "on-" a 8% (hover) / 12%
       (pressionado) sobre o componente, em vez de trocar a cor de fundo.
     • Tipografia é a escala do Google (display/headline/title/body/label),
       em Roboto.

   Paleta tonal derivada de #00a651 (verde Intelbras/Make). Os tons seguem a
   convenção M3 (T10…T99): claro usa T40 como primary, escuro usa T80.
   ========================================================================== */

/* Figtree é a fonte do sistema por decisão do dono (a Roboto do M3 não
   agradou). A escala e o `letter-spacing` do M3 continuam valendo — só
   afinados um pouco, porque a Figtree é mais larga que a Roboto. */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap');

/* ============================================================ 1. PAPÉIS DE COR */

:root {
  /* --- primário (verde da marca) --- */
  --md-primary: #00713a;
  --md-on-primary: #ffffff;
  --md-primary-container: #8df8b0;
  --md-on-primary-container: #002110;
  --md-primary-fixed-dim: #71db96;

  /* --- secundário (verde dessaturado: apoio, seleção de menu) --- */
  --md-secondary: #4f6353;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #d1e8d5;
  --md-on-secondary-container: #0c1f13;

  /* --- terciário (lima da marca: acento raro, destaque) --- */
  --md-tertiary: #55650a;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #dbec8a;
  --md-on-tertiary-container: #181e00;

  /* --- erro --- */
  --md-error: #ba1a1a;
  --md-on-error: #ffffff;
  --md-error-container: #ffdad6;
  --md-on-error-container: #410002;

  /* --- superfícies tonais (a espinha dorsal do M3) --- */
  --md-surface: #f5fbf4;
  --md-on-surface: #171d19;
  --md-surface-variant: #dbe5db;
  --md-on-surface-variant: #404942;
  --md-surface-dim: #d5dbd4;
  --md-surface-bright: #f5fbf4;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #eff5ee;
  --md-surface-container: #e9efe8;
  --md-surface-container-high: #e3eae2;
  --md-surface-container-highest: #dee4dd;

  /* --- contorno --- */
  --md-outline: #707972;
  --md-outline-variant: #c0c9c0;
  /* Fio das listas densas do admin. Token literal de propósito: com
     `color-mix()` a declaração foi descartada e o `border-color: currentColor`
     do Tailwind assumiu — a divisória saiu quase branca. */
  --mk-linha-lista: rgba(112, 121, 114, .30);
  --mk-hover-lista: rgba(23, 32, 26, .05);

  /* --- inverso (snackbar, tooltip) --- */
  --md-inverse-surface: #2c322d;
  --md-inverse-on-surface: #edf2ea;
  --md-inverse-primary: #71db96;

  /* --- status semântico (fora do M3, exigido pelo domínio) --- */
  --md-st-crit: #ba1a1a;
  --md-st-crit-cont: #ffdad6;
  --md-st-warn: #7d5300;
  --md-st-warn-cont: #ffdea8;
  --md-st-attn: #6b5e00;
  --md-st-attn-cont: #f7e47f;
  --md-st-ok: #00713a;
  --md-st-ok-cont: #8df8b0;

  /* --- escala de forma --- */
  --md-shape-xs: 4px;
  --md-shape-sm: 8px;
  --md-shape-md: 12px;
  --md-shape-lg: 16px;
  --md-shape-xl: 28px;
  --md-shape-full: 999px;

  /* --- elevação (M3 usa sombra DISCRETA + tom; nível 0 e 1 na maior parte) --- */
  --md-elev-1: 0 1px 2px rgba(0, 0, 0, .30), 0 1px 3px 1px rgba(0, 0, 0, .15);
  --md-elev-2: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 6px 2px rgba(0, 0, 0, .15);
  --md-elev-3: 0 4px 8px 3px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .30);

  /* --- movimento (curvas padrão do M3) --- */
  --md-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --md-ease-emphasized: cubic-bezier(.05, .7, .1, 1);
  --md-dur-short: 150ms;
  --md-dur-medium: 250ms;

  --md-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --md-font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

/* -----------------------------------------------------------------------------
   TEMA ESCURO — "preto com tons de verde" (Material You / AOSP).

   É o tema PRINCIPAL do sistema (o claro continua completo e disponível no
   seletor). O desenho segue o dark do Android: fundo quase preto, superfícies
   subindo em degraus muito escuros com uma pontinha de verde na tinta, e o
   primário mais VIVO que no claro — sobre preto, verde escuro desaparece.

   Regra de ouro deste tema: o contraste vem do PRIMÁRIO e do TEXTO, não de
   bordas. Por isso `outline-variant` é quase invisível — só divide, não desenha.
   -------------------------------------------------------------------------- */
.dark {
  /* Verde vivo: é ele que dá o "brilho" do tema sobre o preto. */
  --md-primary: #7cecab;
  --md-on-primary: #00391c;
  --md-primary-container: #005c31;
  --md-on-primary-container: #9dffc2;
  --md-primary-fixed-dim: #7cecab;

  --md-secondary: #b8ceba;
  --md-on-secondary: #23372a;
  --md-secondary-container: #2c4433;
  --md-on-secondary-container: #d4ecd8;

  --md-tertiary: #cbdc7c;
  --md-on-tertiary: #2b3400;
  --md-tertiary-container: #465500;
  --md-on-tertiary-container: #e6f795;

  --md-error: #ffb4ab;
  --md-on-error: #690005;
  --md-error-container: #93000a;
  --md-on-error-container: #ffdad6;

  /* Superfícies: preto com tinta verde, subindo em degraus curtos. */
  --md-surface: #080b09;
  --md-on-surface: #e6ede8;
  --md-surface-variant: #2b332d;
  --md-on-surface-variant: #b3c1b6;
  --md-surface-dim: #050706;
  --md-surface-bright: #2e352f;
  --md-surface-container-lowest: #030504;
  --md-surface-container-low: #0e120f;
  --md-surface-container: #131814;
  --md-surface-container-high: #1a211c;
  --md-surface-container-highest: #232b25;

  /* Contorno discreto: no preto, borda forte polui. */
  --md-outline: #7d8a80;
  --mk-linha-lista: rgba(125, 138, 128, .26);
  --mk-hover-lista: rgba(226, 236, 229, .06);
  /* Subiu de #2b332d para #3a443d: no escuro a antiga ficava a 2 pontos do
     fundo e o contorno dos cartões praticamente desaparecia — o dono pediu
     mais opacidade. Continua discreta (não é `outline`, é `outline-variant`),
     mas agora dá para ver onde um bloco acaba e o outro começa. */
  --md-outline-variant: #3a443d;

  --md-inverse-surface: #e6ede8;
  --md-inverse-on-surface: #1a211c;
  --md-inverse-primary: #00713a;

  --md-st-crit: #ffb4ab;
  --md-st-crit-cont: #5c0007;
  --md-st-warn: #ffc06b;
  --md-st-warn-cont: #4a3100;
  --md-st-attn: #e5d34a;
  --md-st-attn-cont: #3e3800;
  --md-st-ok: #7cecab;
  --md-st-ok-cont: #00452a;

  /* No preto a sombra não se vê: elevação é só tom. */
  --md-elev-1: none;
  --md-elev-2: 0 2px 10px rgba(0, 0, 0, .6);
  --md-elev-3: 0 8px 28px rgba(0, 0, 0, .7);
}

/* ==================================================== 2. BASE E TIPOGRAFIA */

/* Escala tipográfica do M3. Uso: `.md-title-large`, `.md-body-medium`… */
.md-display-small { font: 400 36px/44px var(--md-font); letter-spacing: 0; }
.md-headline-medium { font: 400 28px/36px var(--md-font); letter-spacing: 0; }
.md-headline-small { font: 400 24px/32px var(--md-font); letter-spacing: 0; }
.md-title-large { font: 400 22px/28px var(--md-font); letter-spacing: 0; }
.md-title-medium { font: 500 16px/24px var(--md-font); letter-spacing: .15px; }
.md-title-small { font: 500 14px/20px var(--md-font); letter-spacing: .1px; }
.md-body-large { font: 400 16px/24px var(--md-font); letter-spacing: .1px; }
.md-body-medium { font: 400 14px/20px var(--md-font); letter-spacing: .05px; }
.md-body-small { font: 400 12px/16px var(--md-font); letter-spacing: .2px; }
.md-label-large { font: 500 14px/20px var(--md-font); letter-spacing: .1px; }
.md-label-medium { font: 500 12px/16px var(--md-font); letter-spacing: .5px; }
.md-label-small { font: 500 11px/16px var(--md-font); letter-spacing: .5px; }

body {
  font-family: var(--md-font) !important;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .05px;
  color: var(--md-on-surface) !important;
  background: var(--md-surface) !important;
  -webkit-font-smoothing: antialiased;
}

#page { background: var(--md-surface) !important; }
#main { background: transparent !important; }

table, .md-num, input[type="number"] { font-variant-numeric: tabular-nums; }

/* ===================================================== 3. NAVIGATION DRAWER */

/* O elemento mais reconhecível do M3: gaveta em superfície tonal, item de 56px
   e indicador de seleção em PÍLULA preenchida com secondary-container.
   Os seletores levam `#page` na frente para vencer o `!important` do CSS
   histórico (ver DESIGN-SYSTEM.md §7). */

#page #nav-sidebar {
  background: var(--md-surface-container-low) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--md-on-surface) !important;
}
#page #nav-sidebar-inner {
  background: transparent !important;
  color: var(--md-on-surface) !important;
  padding-bottom: 12px;
}

/* Cabeçalho da gaveta: logo sobre um contêiner primário tonal. */
#page #nav-sidebar-inner > div:first-child {
  border-bottom: 0 !important;
  background: transparent !important;
  height: 64px !important;
  padding: 0 12px !important;
  margin-bottom: 4px !important;
}
/* A logo da Make é BRANCA com o símbolo em lima: o contêiner tem de ser escuro
   nos DOIS temas. No claro isso é `primary` (verde T40); no escuro é
   `primary-container` (verde T20) — os dois são escuros o suficiente. Nada de
   filtro de inversão: distorce o lima do símbolo. */
#page #nav-sidebar .make-sidebar-logo {
  background: var(--md-primary) !important;
  border: 0 !important;
  border-radius: var(--md-shape-lg) !important;
  box-shadow: none !important;
  padding: 10px 16px !important;
  justify-content: flex-start !important;
}
.dark #page #nav-sidebar .make-sidebar-logo {
  background: var(--md-primary-container) !important;
}
#page #nav-sidebar .make-sidebar-logo img { width: 112px; height: auto; filter: none; }

/* Cabeçalho de seção: label-medium em on-surface-variant. */
#page #nav-sidebar-apps h2 {
  font: 500 11px/16px var(--md-font) !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  color: var(--md-on-surface-variant) !important;
  margin: 16px 0 4px !important;
  padding: 0 28px !important;
  opacity: .8;
}
#page #nav-sidebar-apps h2::before { display: none !important; }
#page #nav-sidebar hr { border-color: var(--md-outline-variant) !important; margin: 8px 16px !important; }

/* Item da gaveta: 56px, pílula completa, ícone 24px, label-large. */
#page #nav-sidebar-apps ol { padding: 0 12px !important; gap: 0 !important; }
#page #nav-sidebar-apps ol li a {
  position: relative;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  border-radius: var(--md-shape-full) !important;
  font: 500 14px/20px var(--md-font) !important;
  letter-spacing: .1px !important;
  color: var(--md-on-surface-variant) !important;
  background: transparent !important;
  overflow: hidden;
  transition: background-color var(--md-dur-short) var(--md-ease-standard),
              color var(--md-dur-short) var(--md-ease-standard);
}
/* State layer: a camada de 8% que o M3 usa no hover. */
#page #nav-sidebar-apps ol li a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-dur-short) var(--md-ease-standard);
  pointer-events: none;
}
#page #nav-sidebar-apps ol li a:hover::before { opacity: .08; }
#page #nav-sidebar-apps ol li a:active::before { opacity: .12; }

#page #nav-sidebar-apps ol li a.active,
#page #nav-sidebar a[aria-current="page"] {
  background: var(--md-secondary-container) !important;
  color: var(--md-on-secondary-container) !important;
  font-weight: 500 !important;
}
#page #nav-sidebar-apps ol li a.active::after { display: none !important; }

#page #nav-sidebar-apps ol li a .material-symbols-outlined,
#page #nav-sidebar-apps ol li a svg {
  width: 24px !important;
  height: 24px !important;
  font-size: 24px !important;
  margin-right: 12px !important;
  color: inherit !important;
  background: transparent !important;
  opacity: 1 !important;
  flex: none;
}

/* Bloco do usuário e busca: campos M3 dentro da gaveta. */
#page #nav-sidebar-inner > div:nth-child(2) { padding: 0 12px 4px !important; }
#page #nav-sidebar-inner > div:nth-child(2) > div.cursor-pointer {
  background: var(--md-surface-container) !important;
  border: 0 !important;
  border-radius: var(--md-shape-md) !important;
  box-shadow: none !important;
  color: var(--md-on-surface) !important;
  min-height: 56px;
}
#page #nav-sidebar-inner > div:nth-child(2) > div.cursor-pointer:hover {
  background: var(--md-surface-container-high) !important;
}
#page #nav-sidebar-inner > div:nth-child(2) > div.cursor-pointer > div:first-child {
  background: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
  border: 0 !important;
  border-radius: var(--md-shape-full) !important;
}
#page #nav-sidebar div:has(> #nav-filter) {
  background: var(--md-surface-container-high) !important;
  border: 0 !important;
  border-radius: var(--md-shape-full) !important;
  box-shadow: none !important;
  min-height: 48px;
  margin: 0 12px 8px !important;
  padding: 0 16px !important;
}
#page #nav-sidebar input, #page #nav-sidebar #nav-filter {
  background: transparent !important;
  border: 0 !important;
  color: var(--md-on-surface) !important;
  font: 400 14px/20px var(--md-font) !important;
  letter-spacing: .25px !important;
  box-shadow: none !important;
}
#page #nav-sidebar input::placeholder { color: var(--md-on-surface-variant) !important; }
#page #nav-sidebar [class*="text-font"] { color: var(--md-on-surface) !important; }

/* ========================================================= 4. TOP APP BAR */

#main > header,
#main [class*="header"]:first-child {
  background: var(--md-surface) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  min-height: 64px;
}

/* ==================================================== 5. ÁREA DE CONTEÚDO */

#content {
  /* max-width e padding NÃO ficam mais aqui: viraram uma regra só, no fim do
     arquivo (§21). Eu havia escrito `padding-top` para o `#content` em QUATRO
     seções diferentes deste mesmo arquivo hoje (0, 16px, 8px, 4px) e cada tela
     acabava com a última que vencia — foi essa a razão de cada tela começar
     numa altura diferente. Uma propriedade, um lugar. */
  padding-bottom: 72px !important;
}

/* Cartão M3. Padrão aqui: "filled" — superfície tonal, SEM borda e SEM sombra.
   É o que dá o ar minimalista: a separação vem do tom, não de linha. */
.make-card, .make-score, .make-kpi, .make-loja, .estoque-card, .kanban-card,
#main .module, #main .results, #main #changelist-filter,
.chamado__main, .chamado__side-card,
body.delete-confirmation #content > div:last-child {
  background: var(--md-surface-container-low) !important;
  border: 0 !important;
  border-radius: var(--md-shape-md) !important;
  box-shadow: none !important;
}
.estoque-card:hover, .kanban-card:hover {
  background: var(--md-surface-container) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Cabeçalho de página na escala M3: overline + headline-small + body-medium. */
.mkpro-head { margin: 12px 0 20px; }
.mkpro-head__eyebrow {
  font: 500 11px/16px var(--md-font) !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  color: var(--md-on-surface-variant) !important;
}
.mkpro-head__title {
  font: 400 24px/32px var(--md-font) !important;
  letter-spacing: 0 !important;
  color: var(--md-on-surface) !important;
}
.mkpro-head__sub {
  font: 400 14px/20px var(--md-font) !important;
  letter-spacing: .25px !important;
  color: var(--md-on-surface-variant) !important;
}

/* ============================================================ 6. TABELAS */

/* Data table do M3: linha de 52px, divisor em outline-variant, cabeçalho em
   label-medium, sem zebra. */
#main table, .make-tbl, .tbl {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font: 400 14px/20px var(--md-font);
  letter-spacing: .25px;
  width: 100%;
}
#main thead th, .make-tbl thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--md-surface-container-low) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--md-outline-variant) !important;
  color: var(--md-on-surface-variant) !important;
  font: 500 12px/16px var(--md-font) !important;
  letter-spacing: .5px !important;
  text-transform: none;
  padding: 14px 16px !important;
  white-space: nowrap;
}
#main tbody td, .make-tbl tbody td {
  border: 0 !important;
  border-bottom: 1px solid var(--md-outline-variant) !important;
  padding: 16px !important;
  vertical-align: middle;
  color: var(--md-on-surface) !important;
}
#main tbody tr:nth-child(even) { background: transparent !important; }
#main tbody tr { transition: background-color var(--md-dur-short) var(--md-ease-standard); }
#main tbody tr:hover td { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent) !important; }
#main tbody tr:last-child td { border-bottom: 0 !important; }

/* ============================================ 7. CAMPOS (outlined text field) */

#main input[type="text"], #main input[type="email"], #main input[type="number"],
#main input[type="password"], #main input[type="date"], #main input[type="search"],
#main input[type="url"], #main input[type="tel"], #main select, #main textarea {
  min-height: 56px;
  padding: 16px !important;
  background: transparent !important;
  border: 1px solid var(--md-outline) !important;
  border-radius: var(--md-shape-xs) !important;
  color: var(--md-on-surface) !important;
  font: 400 16px/24px var(--md-font) !important;
  letter-spacing: .5px !important;
  box-shadow: none !important;
  transition: border-color var(--md-dur-short) var(--md-ease-standard),
              box-shadow var(--md-dur-short) var(--md-ease-standard);
}
#main input:hover, #main select:hover, #main textarea:hover {
  border-color: var(--md-on-surface) !important;
}
#main input:focus, #main select:focus, #main textarea:focus {
  border-color: var(--md-primary) !important;
  box-shadow: inset 0 0 0 1px var(--md-primary) !important;
  outline: none !important;
}
#main ::placeholder { color: var(--md-on-surface-variant) !important; opacity: 1; }
#main label {
  font: 500 12px/16px var(--md-font);
  letter-spacing: .5px;
  color: var(--md-on-surface-variant);
}

/* ============================================================ 8. BOTÕES */

/* Botão M3: 40px de altura, pílula completa, label-large, state layer.
   `filled` (primary) é a ação principal; `tonal` e `outlined` são as demais. */
.pvx-btn, .make-btn, #main .button, #main input[type="submit"], #main button[type="submit"] {
  position: relative;
  min-height: 40px;
  padding: 0 24px !important;
  border-radius: var(--md-shape-full) !important;
  border: 0 !important;
  font: 500 14px/20px var(--md-font) !important;
  letter-spacing: .1px !important;
  text-transform: none !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: background-color var(--md-dur-short) var(--md-ease-standard);
}
.pvx-btn::before, .make-btn::before,
#main .button::before, #main input[type="submit"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-dur-short) var(--md-ease-standard);
  pointer-events: none;
}
.pvx-btn:hover::before, .make-btn:hover::before, #main .button:hover::before { opacity: .08; }
.pvx-btn:active::before, .make-btn:active::before, #main .button:active::before { opacity: .12; }

.pvx-btn--ok, #main input[type="submit"], #main .button.default {
  background: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
}
.pvx-btn--soft {
  background: var(--md-secondary-container) !important;
  color: var(--md-on-secondary-container) !important;
}
.pvx-btn--ghost, #main .button:not(.default) {
  background: transparent !important;
  border: 1px solid var(--md-outline) !important;
  color: var(--md-primary) !important;
}

/* =============================================================== 9. CHIPS */

.badge, .make-badge, .pvx-badge, .chip {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: var(--md-shape-sm);
  border: 1px solid var(--md-outline-variant);
  background: transparent;
  color: var(--md-on-surface-variant);
  font: 500 14px/20px var(--md-font);
  letter-spacing: .1px;
}

/* ===================================================== 10. STATUS SEMÂNTICO */

/* Cor de status vira contêiner tonal, como o M3 faz com error-container. */
.md-st { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--md-shape-sm); font: 500 12px/16px var(--md-font); letter-spacing: .5px; }
.md-st--crit { background: var(--md-st-crit-cont); color: var(--md-st-crit); }
.md-st--warn { background: var(--md-st-warn-cont); color: var(--md-st-warn); }
.md-st--attn { background: var(--md-st-attn-cont); color: var(--md-st-attn); }
.md-st--ok { background: var(--md-st-ok-cont); color: var(--md-st-ok); }

/* ======================================================= 11. COMPONENTES MK */

/* Os componentes `.mkpro-*` das telas passam a falar M3. */
.mkpro-chip {
  background: var(--md-secondary-container) !important;
  color: var(--md-on-secondary-container) !important;
  border-radius: var(--md-shape-full) !important;
}
.mkpro-chip--on {
  background: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
  box-shadow: none !important;
}
.mkpro-alert {
  background: var(--md-surface-container) !important;
  border: 0 !important;
  border-radius: var(--md-shape-md) !important;
  color: var(--md-on-surface-variant) !important;
  font: 400 14px/20px var(--md-font) !important;
  letter-spacing: .25px !important;
  padding: 16px !important;
}
.mkpro-alert--ok { background: var(--md-st-ok-cont) !important; color: var(--md-st-ok) !important; }
.mkpro-alert--warn { background: var(--md-st-warn-cont) !important; color: var(--md-st-warn) !important; }
.mkpro-alert--error { background: var(--md-error-container) !important; color: var(--md-on-error-container) !important; }
.mkpro-empty {
  background: var(--md-surface-container-low) !important;
  border: 0 !important;
  border-radius: var(--md-shape-md) !important;
  padding: 32px 24px !important;
}
.mkpro-empty__title { font: 500 16px/24px var(--md-font) !important; letter-spacing: .15px !important; color: var(--md-on-surface) !important; }
.mkpro-empty__hint { font: 400 14px/20px var(--md-font) !important; letter-spacing: .25px !important; color: var(--md-on-surface-variant) !important; }
.mkpro-num { font-weight: 400 !important; letter-spacing: 0 !important; color: var(--md-on-surface) !important; }
.mkpro-label {
  font: 500 11px/16px var(--md-font) !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  color: var(--md-on-surface-variant) !important;
}

/* ============================================================ 12. DIVERSOS */

/* Foco visível — requisito de acessibilidade do M3.
   O `border-radius` que estava aqui era o problema: forçava raio 4px no anel
   de QUALQUER elemento focado, então um item-pílula do menu ganhava um
   retângulo verde grosso em volta. O anel agora acompanha a forma do próprio
   elemento (sem mexer no raio) e é 2px, como na especificação. */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

/* Itens do menu lateral: SEM anel. O item ativo já é evidente (fundo tonal +
   ícone preenchido + peso da fonte). O foco de teclado continua visível, mas
   como camada de estado (fundo), que é o jeito M3 — não como borda por cima. */
#page #nav-sidebar-apps ol li a:focus,
#page #nav-sidebar-apps ol li a:focus-visible,
#page #nav-sidebar a:focus,
#page #nav-sidebar a:focus-visible,
#page #nav-sidebar button:focus-visible,
#page #nav-sidebar [role="button"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
#page #nav-sidebar-apps ol li a:focus-visible {
  background: color-mix(in srgb, var(--md-primary) 12%, transparent) !important;
}

/* Barra de rolagem discreta. */
/* Barra de rolagem: fina e neutra. `outline-variant` é verde-acinzentado e
   numa barra larga (quadro com rolagem horizontal) lia como uma faixa verde
   chamando mais atenção que o conteúdo. */
#main ::-webkit-scrollbar { width: 10px; height: 10px; }
#main ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--md-on-surface) 18%, transparent);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: var(--md-shape-full);
}
#main ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--md-on-surface) 30%, transparent);
  background-clip: padding-box;
}
#main ::-webkit-scrollbar-track { background: transparent; }
#main { scrollbar-color: color-mix(in srgb, var(--md-on-surface) 18%, transparent) transparent; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  #nav-sidebar, #main > header, .mkpro-head__actions { display: none !important; }
  #content { max-width: none; padding: 0 !important; }
}

/* =============================================================================
   13. PONTE DE TOKENS  (--ui-* → papéis do M3)

   As 70 telas remodeladas escrevem `var(--ui-…)` no `<style>` de cada arquivo.
   Em vez de reescrever 70 arquivos de uma vez para trocar o nome da variável,
   os nomes antigos passam a APONTAR para os papéis do M3. Resultado: o sistema
   inteiro fala Material sem migração, e a migração dos nomes pode acontecer
   tela por tela, sem pressa e sem risco.

   Regra para tela NOVA: use `--md-*`. Os `--ui-*` existem só para compatibilidade.
   ========================================================================== */

:root, .dark {
  --ui-ground: var(--md-surface);
  --ui-surface: var(--md-surface-container-low);
  --ui-surface-2: var(--md-surface-container);
  --ui-surface-3: var(--md-surface-container-high);

  --ui-ink: var(--md-on-surface);
  --ui-ink-2: var(--md-on-surface-variant);
  --ui-muted: var(--md-on-surface-variant);
  --ui-faint: var(--md-outline);

  --ui-line: var(--md-outline-variant);
  --ui-line-2: var(--md-outline-variant);
  --ui-line-3: var(--md-outline);

  --ui-grn: var(--md-primary);
  --ui-grn-600: var(--md-primary);
  --ui-grn-700: var(--md-primary);
  --ui-lima: var(--md-tertiary);
  --ui-nav: var(--md-surface-container-low);
  --ui-nav-2: var(--md-surface-container);
  --ui-nav-line: var(--md-outline-variant);
  --ui-nav-ink: var(--md-on-surface);
  --ui-nav-ink-2: var(--md-on-surface-variant);

  --ui-crit: var(--md-st-crit);
  --ui-warn: var(--md-st-warn);
  --ui-attn: var(--md-st-attn);
  --ui-ok: var(--md-st-ok);

  --ui-r-sm: var(--md-shape-sm);
  --ui-r: var(--md-shape-md);
  --ui-r-lg: var(--md-shape-lg);
  --ui-h-control: 40px;
  /* No M3 a elevação é tonal: as sombras antigas viram "nenhuma". */
  --ui-shadow: none;
  --ui-shadow-pop: var(--md-elev-2);
  --ui-font: var(--md-font);
}

/* Os `--g-*` do CSS histórico (glassmorphism) também apontam para o M3. */
:root, .dark {
  --g-radius: var(--md-shape-md);
  --g-glass: var(--md-surface-container-low);
  --g-panel: var(--md-surface-container-low);
  --g-edge: transparent;
  --g-gloss: none;
  --g-elev: none;
  --g-elev-h: none;
  --g-doodle: none;
}

/* =============================================================================
   14. MARCA: ICONE DE APP + NOME

   Escolha do dono (04/09/2026): quadrado arredondado verde com a inicial, do
   jeito que um icone de app aparece no Android, e o nome ao lado em duas
   linhas. Substitui a logo em imagem e a versao anterior em degrade, que ele
   nao aprovou.

   Tudo CSS: escala sem perder nitidez e acompanha claro/escuro. A entrada e
   discreta (o icone cresce, o nome desliza) e roda uma vez.
   Marcacao em templates/unfold/helpers/navigation_header.html.
   ========================================================================== */

.mkbrand-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 72px;
  padding: 0 16px;
  margin-bottom: 8px;
}

.mkbrand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  border-radius: var(--md-shape-md, 12px);
  padding: 6px 8px;
  margin-left: -8px;
  transition: background-color 200ms var(--md-ease-standard, ease);
}
.mkbrand:hover { background: color-mix(in srgb, var(--md-on-surface) 6%, transparent); }

/* O icone de app: quadrado arredondado, inicial centrada. */
.mkbrand__icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--md-primary);
  color: var(--md-on-primary);
  font: 800 20px/1 var(--md-font, sans-serif);
  letter-spacing: -.5px;
  animation: mkbrand-icone 420ms var(--md-ease-emphasized, ease) 60ms backwards;
}
@keyframes mkbrand-icone {
  from { transform: scale(.7); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.mkbrand__text {
  display: grid;
  min-width: 0;
  animation: mkbrand-nome 420ms var(--md-ease-standard, ease) 180ms backwards;
}
@keyframes mkbrand-nome {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}

.mkbrand__name {
  font: 700 17px/20px var(--md-font, sans-serif);
  letter-spacing: -.2px;
  color: var(--md-on-surface);
}
.mkbrand__sub {
  font: 500 11px/14px var(--md-font, sans-serif);
  letter-spacing: .2px;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mkbrand__close {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
}
.mkbrand__close:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.mkbrand__close svg { width: 24px; height: 24px; }

@media (prefers-reduced-motion: reduce) {
  .mkbrand__icon { animation: none; }
  .mkbrand__text { animation: none; }
}

/* =============================================================================
   15. DEGRADE DE MARCA  (pedido: "bota um degrade bonito no sistema")

   O M3 e chapado por natureza. Onde o degrade entra sem virar enfeite:
   superficie de MARCA (gaveta e capa de entrada) e a acao principal. Nunca em
   cartao de conteudo, nunca atras de numero que precisa ser lido.
   ========================================================================== */

/* Gaveta: um veu vertical quentissimo, quase imperceptivel, que da profundidade
   sem tirar a legibilidade do item de menu. */
#page #nav-sidebar {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--md-primary) 7%, var(--md-surface-container-low)) 0%,
      var(--md-surface-container-low) 34%,
      var(--md-surface-container-low) 100%
    ) !important;
}
/* Sobre o preto, o veu precisa de um pouco mais de verde para se ver. */
.dark #page #nav-sidebar {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--md-primary) 14%, var(--md-surface-container-low)) 0%,
      color-mix(in srgb, var(--md-primary) 4%, var(--md-surface-container-low)) 30%,
      var(--md-surface-container-low) 62%,
      var(--md-surface-container-lowest) 100%
    ) !important;
}

/* Botao principal: degrade curto na direcao da luz. */
/* A ação principal é LIMA (§18, referência Midbox). O degradê é curto e na
direção da luz — só o suficiente para o botão não ser um retângulo chapado. */
.pvx-btn--ok, #main input[type="submit"], #main .button.default {
  background: linear-gradient(135deg,
              color-mix(in srgb, #ffffff 22%, var(--md-action)) 0%,
              var(--md-action) 62%,
              color-mix(in srgb, var(--md-primary) 12%, var(--md-action)) 100%) !important;
  color: var(--md-on-action) !important;
}
.dark .pvx-btn--ok, .dark #main input[type="submit"] {
  background: linear-gradient(135deg,
              color-mix(in srgb, #ffffff 12%, var(--md-action)) 0%,
              var(--md-action) 66%,
              color-mix(in srgb, var(--md-primary) 16%, var(--md-action)) 100%) !important;
  color: var(--md-on-action) !important;
}

/* FAB do assistente: mesmo tratamento. */
.mkasst__abrir {
  background: linear-gradient(135deg,
              color-mix(in srgb, #ffffff 16%, var(--md-action)) 0%,
              var(--md-action) 100%) !important;
  color: var(--md-on-action) !important;
}

/* Capa da tela de entrada: degrade de marca em diagonal. */
/* REGRA DE OURO DO M3 que eu quebrei aqui na 1ª tentativa: se o fundo é
`primary-container`, o texto é `on-primary-container` — não `on-primary`.
   No tema escuro `on-primary` é ESCURO (porque `primary` é claro) {
  background: linear-gradient(152deg,
              color-mix(in srgb, var(--md-tertiary) 12%, var(--md-primary-container)) 0%,
              var(--md-primary-container) 48%,
              color-mix(in srgb, #000000 40%, var(--md-primary-container)) 100%) !important;
  color: var(--md-on-primary-container) !important;
}

/* =============================================================================
   16. CAMPOS DE FORMULARIO  (pedido: "capricha nos campos de formulario")

   Outlined text field do M3 com o comportamento completo:
   • rotulo que FLUTUA para cima do contorno ao focar ou quando ha valor;
   • contorno de 2px em primary no foco, com transicao;
   • estado de erro em `error`;
   • state layer no hover.

   Como funciona sem tocar em template: a estrutura `.mkpro-field` (rotulo DEPOIS
   do input) e usada nas telas novas; onde o rotulo vem ANTES (a maioria), o
   campo continua correto — ganha o contorno animado, sem o rotulo flutuante.
   ========================================================================== */

.mkpro-field {
  position: relative;
  display: block;
  margin-bottom: 20px;
}
.mkpro-field > input,
.mkpro-field > select,
.mkpro-field > textarea {
  width: 100%;
  height: 56px;
  padding: 16px !important;
  background: transparent !important;
  border: 1px solid var(--md-outline) !important;
  border-radius: var(--md-shape-xs) !important;
  color: var(--md-on-surface) !important;
  font: 400 16px/24px var(--md-font) !important;
  letter-spacing: .5px !important;
  transition: border-color 150ms var(--md-ease-standard),
              box-shadow 150ms var(--md-ease-standard);
}
.mkpro-field > input::placeholder { color: transparent; }   /* o rotulo faz esse papel */

.mkpro-field > label {
  position: absolute;
  left: 12px;
  top: 16px;
  padding: 0 4px;
  pointer-events: none;
  background: var(--md-surface);
  color: var(--md-on-surface-variant);
  font: 400 16px/24px var(--md-font);
  letter-spacing: .5px;
  transition: transform 150ms var(--md-ease-standard),
              color 150ms var(--md-ease-standard),
              font-size 150ms var(--md-ease-standard);
  transform-origin: left top;
}
.mkpro-field > input:focus + label,
.mkpro-field > input:not(:placeholder-shown) + label,
.mkpro-field > select:focus + label,
.mkpro-field > select:valid + label,
.mkpro-field > textarea:focus + label,
.mkpro-field > textarea:not(:placeholder-shown) + label {
  transform: translateY(-24px) scale(.75);
  color: var(--md-primary);
}
.mkpro-field > input:focus,
.mkpro-field > select:focus,
.mkpro-field > textarea:focus {
  border-color: var(--md-primary) !important;
  box-shadow: inset 0 0 0 1px var(--md-primary) !important;
  outline: none !important;
}
.mkpro-field--erro > input { border-color: var(--md-error) !important; }
.mkpro-field--erro > label { color: var(--md-error) !important; }
.mkpro-field__help {
  display: block;
  margin: 4px 0 0 16px;
  font: 400 12px/16px var(--md-font);
  letter-spacing: .4px;
  color: var(--md-on-surface-variant);
}
.mkpro-field--erro .mkpro-field__help { color: var(--md-error); }

/* Melhorias que valem para TODO campo do sistema, sem mudar template. */
#main input[type="text"], #main input[type="email"], #main input[type="number"],
#main input[type="password"], #main input[type="date"], #main input[type="search"],
#main input[type="url"], #main input[type="tel"], #main select, #main textarea {
  /* O contorno cresce de dentro no foco: nao "salta" o layout. */
  transition: border-color 150ms var(--md-ease-standard),
              box-shadow 150ms var(--md-ease-standard),
              background-color 150ms var(--md-ease-standard);
}
#main input:hover:not(:focus), #main select:hover:not(:focus), #main textarea:hover:not(:focus) {
  background: color-mix(in srgb, var(--md-on-surface) 4%, transparent) !important;
}
/* Autofill do Chrome nao pode virar bloco amarelo/azul. */
#main input:-webkit-autofill,
#main input:-webkit-autofill:hover,
#main input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--md-on-surface);
  -webkit-box-shadow: 0 0 0 1000px var(--md-surface-container-low) inset,
                      inset 0 0 0 1px var(--md-primary);
  caret-color: var(--md-on-surface);
}
/* Campo desabilitado: 38% de opacidade, como manda o M3. */
#main input:disabled, #main select:disabled, #main textarea:disabled {
  opacity: .38;
  cursor: not-allowed;
}
/* Checkbox e radio na cor da marca. */
#main input[type="checkbox"], #main input[type="radio"] {
  width: 18px; height: 18px;
  min-height: 0;
  accent-color: var(--md-primary);
  border-radius: 2px;
  padding: 0 !important;
}

/* =============================================================================
   17. MOVIMENTO  (pedido: "animacoes lindas e efeitos visuais modernos")

   M3 Expressive: movimento curto, com curva enfatizada, sempre a servico da
   compreensao — entrada de conteudo, resposta ao toque, mudanca de estado.
   Nada de laco infinito no conteudo (so o ponto da marca respira).
   Tudo desligado por `prefers-reduced-motion`.
   ========================================================================== */

/* Entrada da pagina: o conteudo sobe e aparece. */
@keyframes m3-entra {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
/* BUG QUE ISSO JÁ CAUSOU — leia antes de mexer.
   Estava `both`, e `both` inclui `forwards`: quando a animação termina, ela
   CONTINUA mandando nas propriedades que toca (uma animação preenchida fica
   acima de qualquer declaração de autor, `!important` incluído). Como o último
   quadro é `transform: none`, todo elemento aqui ficava com o transform
   PERMANENTEMENTE zerado.

   Quem paga essa conta é quem usa `transform` para se esconder. O `#truck-dock`
   (a zona de soltura do caminhão) fica escondido com
   `transform: translate(-50%, 140%)` — fora da tela — e aparece ao arrastar uma
   baia. Com o transform zerado por esta animação, ele ficava VISÍVEL o tempo
   todo no meio da tela, sem arraste nenhum. Foi o que o dono viu.

   Correção em duas frentes:
   1. `backwards` em vez de `both`: a animação prepara o estado ANTES de rodar e
      solta as propriedades ao terminar. O repouso volta a ser o do elemento.
   2. Sobreposição não é conteúdo e não entra na cascata de entrada: um véu, um
      diálogo ou uma zona de soltura não "chegam" com a página. */
#content > *:not(.truck-dock):not([class*="overlay"]):not([class*="__veu"]):not(dialog) {
  animation: m3-entra 420ms var(--md-ease-emphasized) backwards;
}
/* Cascata nos primeiros blocos: a tela "monta" em vez de piscar inteira. */
#content > *:not(.truck-dock):nth-child(1) { animation-delay: 0ms; }
#content > *:not(.truck-dock):nth-child(2) { animation-delay: 40ms; }
#content > *:not(.truck-dock):nth-child(3) { animation-delay: 80ms; }
#content > *:not(.truck-dock):nth-child(4) { animation-delay: 120ms; }
#content > *:not(.truck-dock):nth-child(5) { animation-delay: 160ms; }
#content > *:not(.truck-dock):nth-child(n+6) { animation-delay: 200ms; }

/* Item de menu: o indicador de selecao cresce do centro. */
@keyframes m3-pilula {
  from { transform: scaleX(.72); opacity: 0; }
  to { transform: none; opacity: 1; }
}
#page #nav-sidebar-apps ol li a.active {
  animation: m3-pilula 320ms var(--md-ease-emphasized) both;
}

/* Cartao clicavel: sobe 1 tom e ganha 1px de deslocamento — resposta, nao enfeite. */
.estoque-card, .kanban-card, .make-loja, .make-kpi {
  transition: background-color 180ms var(--md-ease-standard),
              transform 180ms var(--md-ease-emphasized);
}
.estoque-card:hover, .kanban-card:hover, .make-loja:hover {
  transform: translateY(-1px);
}

/* Botao: o state layer aparece com a curva do M3 (ja definido em §8) e o
conteudo afunda 1px no clique. */
.pvx-btn:active, .make-btn:active, #main .button:active, #main input[type="submit"]:active {
  transform: translateY(1px);
}

/* Ripple: circulo que cresce do ponto do clique. Ligado por JS
   (static/js/make-m3.js) em botao, item de menu e linha de tabela. */
.m3-ripple {
  position: absolute;
  border-radius: 999px;
  transform: scale(0);
  opacity: .28;
  background: currentColor;
  pointer-events: none;
  animation: m3-ripple 520ms var(--md-ease-standard) forwards;
}
@keyframes m3-ripple {
  to { transform: scale(1); opacity: 0; }
}

/* Linha de tabela: o state layer entra suave. */
#main tbody tr { transition: background-color 140ms var(--md-ease-standard); }

/* Chip e badge: escala minima na selecao. */
.badge, .make-badge, .chip { transition: background-color 150ms var(--md-ease-standard); }

/* Dialogo/modal: entra de baixo com a curva enfatizada. */
@keyframes m3-dialogo {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.pvdlg__box, .mov-modal__box, .mkasst__painel {
  animation: m3-dialogo 320ms var(--md-ease-emphasized) both;
}

/* Skeleton de carregamento (para quem quiser usar: class="m3-skel"). */
.m3-skel {
  background: linear-gradient(90deg,
              var(--md-surface-container) 25%,
              var(--md-surface-container-high) 37%,
              var(--md-surface-container) 63%);
  background-size: 400% 100%;
  animation: m3-skel 1400ms ease-in-out infinite;
  border-radius: var(--md-shape-xs);
}
@keyframes m3-skel {
  from { background-position: 100% 50%; }
  to { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  #content > *,
  #page #nav-sidebar-apps ol li a.active,
  .pvdlg__box, .mov-modal__box, .mkasst__painel,
  .m3-skel { animation: none !important; }
  .estoque-card:hover, .kanban-card:hover, .make-loja:hover { transform: none; }
  .m3-ripple { display: none; }
}

/* Top app bar reagindo à rolagem (classe posta por static/js/make-m3.js).
   No M3 a barra sai de `surface` e passa a `surface-container` quando a página
   rola — separa do conteúdo sem sombra nem borda permanente. */
#main > header {
  transition: background-color 200ms var(--md-ease-standard),
              box-shadow 200ms var(--md-ease-standard);
}
#main > header.m3-bar--rolada {
  background: var(--md-surface-container) !important;
  box-shadow: var(--md-elev-1) !important;
}

/* =============================================================================
   18. CAMADA MIDBOX  (referência: UI Kit for CRM/Dashboard/Admin/SaaS — Midbox)

   O dono mandou o kit como referência depois de já ter pedido "preto com tons
   de verde". As duas coisas convivem, e o encaixe é feliz: o acento do Midbox é
   um LIMA/chartreuse quase idêntico ao lima da Make (#cbf542).

   Então: fica a casca escura (AOSP) e entra a LINGUAGEM DE COMPONENTE do Midbox.

   O que o Midbox traz, lido da tela de login do kit:
     • Ação principal em LIMA com texto ESCURO — não verde com texto branco.
     • Campo com PREENCHIMENTO tonal e SEM borda (o "filled text field"), com
       ícone à esquerda; a borda só aparece no foco.
     • Raio de 8px em botão e campo — retângulo macio, não pílula.
     • Superfície neutra, peso de fonte médio, sem sombra pesada.

   O que NÃO muda: a gaveta com pílula de seleção (M3), a paleta tonal, o
   movimento. Apagar esta seção volta ao M3 puro.
   ========================================================================== */

:root {
  /* Ação em lima. `primary` continua sendo o verde de TEXTO e ícone — lima em
     texto sobre fundo claro é ilegível. São papéis diferentes de propósito. */
  --md-action: #cbf542;
  --md-on-action: #17240a;
  --md-action-hover: #d7f96a;
  --md-action-press: #bde82f;
  /* Campo preenchido */
  --md-field-fill: #eceff0;
  --md-field-fill-hover: #e4e8e9;
  --md-shape-btn: 8px;
  --md-shape-field: 8px;
}

.dark {
  /* No preto o lima brilha muito: baixa um pouco a luminosidade para não
     estourar, mantendo o texto escuro (contraste alto, como no kit). */
  --md-action: #c2ee3c;
  --md-on-action: #16200a;
  --md-action-hover: #cef255;
  --md-action-press: #b2df26;
  --md-field-fill: #161c17;
  --md-field-fill-hover: #1c231d;
}

/* ------------------------------------------------------ botão de ação (lima) */

.pvx-btn--ok, #main input[type="submit"], #main .button.default, .mkasst__ir {
  background: var(--md-action) !important;
  color: var(--md-on-action) !important;
  border: 0 !important;
  border-radius: var(--md-shape-btn) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.pvx-btn--ok:hover, #main input[type="submit"]:hover, #main .button.default:hover, .mkasst__ir:hover {
  background: var(--md-action-hover) !important;
}
.pvx-btn--ok:active, #main input[type="submit"]:active {
  background: var(--md-action-press) !important;
}
/* O state layer da §8 escureceria o lima: aqui o hover é a própria cor. */
.pvx-btn--ok::before, #main input[type="submit"]::before, #main .button.default::before { display: none !important; }

/* Secundário e alternativo seguem o mesmo raio. */
.pvx-btn, .make-btn, #main .button, #main input[type="submit"], #main button[type="submit"] {
  border-radius: var(--md-shape-btn) !important;
}
.pvx-btn--soft {
  background: var(--md-surface-container-high) !important;
  color: var(--md-on-surface) !important;
}
.pvx-btn--ghost {
  background: var(--md-surface-container) !important;
  border: 0 !important;
  color: var(--md-on-surface) !important;
}

/* FAB do assistente: lima, o destaque da tela. */
.mkasst__abrir {
  background: var(--md-action) !important;
  color: var(--md-on-action) !important;
  border-radius: var(--md-shape-lg) !important;
}
.mkasst__abrir:hover { background: var(--md-action-hover) !important; }
.mkasst__abrir svg { color: currentColor !important; }

/* --------------------------------------------- campo preenchido (sem borda) */

#main input[type="text"], #main input[type="email"], #main input[type="number"], #main input[type="password"], #main input[type="date"], #main input[type="search"], #main input[type="url"], #main input[type="tel"], #main select, #main textarea, .mkpro-field > input, .mkpro-field > select, .mkpro-field > textarea {
  min-height: 48px !important;
  height: auto;
  padding: 12px 14px !important;
  background: var(--md-field-fill) !important;
  border: 0 !important;
  border-radius: var(--md-shape-field) !important;
  color: var(--md-on-surface) !important;
  font-size: 14.5px !important;
  letter-spacing: .05px !important;
  box-shadow: none !important;
  transition: background-color 140ms var(--md-ease-standard),
              box-shadow 140ms var(--md-ease-standard);
}
#main input:hover:not(:focus), #main select:hover:not(:focus), #main textarea:hover:not(:focus) {
  background: var(--md-field-fill-hover) !important;
}
/* Foco: anel de 2px no verde da marca, POR DENTRO — não desloca o layout. */
#main input:focus, #main select:focus, #main textarea:focus, .mkpro-field > input:focus, .mkpro-field > select:focus, .mkpro-field > textarea:focus {
  background: var(--md-field-fill-hover) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 2px var(--md-primary) !important;
  outline: none !important;
}
#main input[aria-invalid="true"], .mkpro-field--erro > input {
  box-shadow: inset 0 0 0 2px var(--md-error) !important;
}
#main ::placeholder {
  color: var(--md-on-surface-variant) !important;
  opacity: .78;
}
/* O rótulo flutuante da §16 pousa sobre o preenchimento, não sobre a borda. */
.mkpro-field > label { background: transparent; }
.mkpro-field > input:focus + label,
.mkpro-field > input:not(:placeholder-shown) + label {
  transform: translateY(-22px) scale(.78);
}
/* Checkbox/radio não herdam o preenchimento de campo. */
#main input[type="checkbox"], #main input[type="radio"] {
  min-height: 0 !important;
  padding: 0 !important;
  background: initial !important;
  box-shadow: none !important;
}

/* --------------------------------------------------- superfícies e cantos */

/* Midbox usa retângulo macio: 8px em controle, 12px em cartão. Mantido o 12px
   do M3 no cartão; o que muda é o controle (acima) e o chip. */
.badge, .make-badge, .pvx-badge, .chip, .mkpro-chip--sq {
  border-radius: var(--md-shape-sm) !important;
}

/* Peso de fonte: o kit é médio, sem 800. Os títulos de tela acompanham. */
.mkpro-head__title { font-weight: 600 !important; }
.mkbrand__name { font-weight: 700 !important; }

/* ----------------------------------------------------- ícone dentro do campo */

/* O kit põe um ícone à esquerda do campo. Onde a tela já monta esse ícone,
   `.mkfield-ico` alinha e reserva o espaço sem mexer no HTML de ninguém. */
.mkfield {
  position: relative;
  display: block;
}
.mkfield > svg,
.mkfield > .mkfield-ico {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--md-on-surface-variant);
  pointer-events: none;
}
.mkfield > input { padding-left: 42px !important; }

/* =============================================================================
   19. CAMADA m3.material.io  — copiar de perto o site do Material Design 3

   O dono mandou https://m3.material.io/styles/icons/overview e pediu, com estas
   palavras: "ta faltando uns detalhes de borda", "esse sistema ta precisando
   copiar muito na cara dura esse estilo desse site" e "inclusive essas
   animacoes eu quero".

   O que o site do M3 faz, e que eu havia justamente REMOVIDO na §18:
     • CARTAO COM CONTORNO. O site usa a variante "outlined card" do M3 — 1px de
       `outline-variant` em volta, fundo `surface`. Eu tinha ido de "filled card"
       (sem borda, so tom). Era esse o "detalhe de borda" que faltava.
     • RAIO GRANDE: 16px no cartao, 28px no bloco grande. O site respira.
     • BOTAO EM PILULA (a §18 tinha posto 8px, do Midbox). Aqui volta a pilula.
     • CAMPO COM CONTORNO (outlined text field) em vez do preenchido.
     • ESPACO GENEROSO: 24px de padding interno.
     • ICONE QUE ANIMA O PREENCHIMENTO — a assinatura da pagina de icones:
       Material Symbols e fonte VARIAVEL, e o eixo `FILL` vai de 0 (contorno) a
       1 (solido). O site anima essa transicao. Item de navegacao ATIVO usa o
       icone preenchido; inativo, contornado. E exatamente o comportamento do M3.

   Esta secao vem DEPOIS da §18 de proposito: onde as duas discordarem (raio de
   botao, campo preenchido x contornado), vale esta. A acao continua em LIMA,
   porque cor e marca — o que muda aqui e forma, borda, espaco e movimento.
   ========================================================================== */

/* A fonte ja vem carregada como VARIAVEL pelo make-admin.css:1: Material
   Symbols Outlined com os quatro eixos do M3 — opsz (tamanho optico), wght
   (peso), FILL (preenchimento) e GRAD (grade). Aqui so se usa o eixo FILL, que
   ate agora estava parado em 0. Nenhuma fonte nova entra: um @import no fim de
   um CSS seria ignorado pela spec, e seria uma segunda ida ao Google por nada. */

/* ------------------------------------------------ 19.1 icone que se preenche */

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;

  /* Repouso: contorno, peso leve. */
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  transition: font-variation-settings 260ms var(--md-ease-emphasized, ease),
              color 160ms var(--md-ease-standard, ease);
}

/* Ao passar o mouse num item clicavel, o icone ENGROSSA e comeca a preencher. */
a:hover > .material-symbols-outlined,
button:hover > .material-symbols-outlined,
a:hover .material-symbols-outlined,
button:hover .material-symbols-outlined,
[role="button"]:hover .material-symbols-outlined {
  font-variation-settings: 'FILL' .6, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* Item de navegacao ATIVO: icone SOLIDO. E a regra do M3 — o preenchimento
   comunica "voce esta aqui", junto com a pilula. */
#page #nav-sidebar-apps ol li a.active .material-symbols-outlined,
#page #nav-sidebar a[aria-current="page"] .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24 !important;
}

/* Icone dentro de botao de acao acompanha o peso do rotulo. */
.pvx-btn .material-symbols-outlined,
.make-btn .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

/* Os icones das telas custom sao SVG de linha (500+). Eles nao tem eixo FILL,
   mas ganham o MESMO vocabulario de movimento: o traco engrossa no hover. */
a svg[stroke], button svg[stroke], [role="button"] svg[stroke],
.mkpro-chip svg, .estoque-card svg, .kanban-card svg {
  transition: stroke-width 240ms var(--md-ease-emphasized, ease),
              color 160ms var(--md-ease-standard, ease),
              opacity 160ms var(--md-ease-standard, ease);
}
a:hover svg[stroke], button:hover svg[stroke], [role="button"]:hover svg[stroke] {
  stroke-width: 2.6;
}
.estoque-card:hover svg[stroke], .kanban-card:hover svg[stroke] { stroke-width: 2.4; }

/* --------------------------------------------- 19.2 cartao COM contorno */

/* A variante outlined do M3: contorno de 1px e fundo `surface`. */
.make-card, .make-score, .make-kpi, .make-loja, .estoque-card, .kanban-card,
#main .module, #main .results, #main #changelist-filter,
.chamado__main, .chamado__side-card,
body.delete-confirmation #content > div:last-child {
  background: var(--md-surface) !important;
  border: 1px solid var(--md-outline-variant) !important;
  border-radius: var(--md-shape-lg) !important;   /* 16px */
  box-shadow: none !important;
}
.dark .make-card, .dark .make-score, .dark .make-kpi, .dark .make-loja,
.dark .estoque-card, .dark .kanban-card,
.dark #main .module, .dark #main .results {
  /* No preto, `surface` e quase preto: o cartao sobe um degrau para se ver. */
  background: var(--md-surface-container-low) !important;
}
/* Hover de cartao clicavel: o contorno vira PRIMARY. E o feedback do site do M3. */
.estoque-card:hover, .kanban-card:hover, .make-loja:hover {
  border-color: var(--md-primary) !important;
  background: var(--md-surface-container-low) !important;
  transform: none !important;
}
.dark .estoque-card:hover, .dark .kanban-card:hover, .dark .make-loja:hover {
  background: var(--md-surface-container) !important;
}

/* Bloco grande respira mais e tem raio extra-large. */
#main .module, .chamado__main, .make-score {
  border-radius: var(--md-shape-xl) !important;   /* 28px */
  padding: 24px !important;
}

/* ------------------------------------------------ 19.3 botao volta a pilula */

.pvx-btn, .make-btn, #main .button, #main input[type="submit"], #main button[type="submit"], .mkasst__ir {
  border-radius: var(--md-shape-full) !important;
  min-height: 40px;
  padding: 0 24px !important;
}
.mkasst__abrir { border-radius: var(--md-shape-lg) !important; }  /* FAB fica 16px */

/* Botao com contorno: e um dos tres do site (filled · outlined · text). */
.pvx-btn--ghost, #main .button:not(.default) {
  background: transparent !important;
  border: 1px solid var(--md-outline) !important;
  color: var(--md-primary) !important;
}
.pvx-btn--ghost:hover {
  background: color-mix(in srgb, var(--md-primary) 8%, transparent) !important;
  border-color: var(--md-primary) !important;
}

/* --------------------------------------- 19.4 campo COM contorno (outlined) */

#main input[type="text"], #main input[type="email"], #main input[type="number"], #main input[type="password"], #main input[type="date"], #main input[type="search"], #main input[type="url"], #main input[type="tel"], #main select, #main textarea, .mkpro-field > input, .mkpro-field > select, .mkpro-field > textarea {
  min-height: 52px !important;
  padding: 14px 16px !important;
  background: transparent !important;
  border: 1px solid var(--md-outline) !important;
  border-radius: var(--md-shape-sm) !important;   /* 8px */
  box-shadow: none !important;
}
#main input:hover:not(:focus), #main select:hover:not(:focus), #main textarea:hover:not(:focus) {
  background: transparent !important;
  border-color: var(--md-on-surface) !important;
}
/* Foco: o contorno engrossa para 2px em primary, por dentro (nao desloca). */
#main input:focus, #main select:focus, #main textarea:focus, .mkpro-field > input:focus, .mkpro-field > select:focus, .mkpro-field > textarea:focus {
  background: transparent !important;
  border-color: var(--md-primary) !important;
  box-shadow: inset 0 0 0 1px var(--md-primary) !important;
}
#main input[aria-invalid="true"], .mkpro-field--erro > input {
  border-color: var(--md-error) !important;
  box-shadow: inset 0 0 0 1px var(--md-error) !important;
}
#main input[type="checkbox"], #main input[type="radio"] {
  min-height: 0 !important;
  border: 0 !important;
  padding: 0 !important;
}

/* ------------------------------------------------------- 19.5 chip e badge */

/* O site usa chip com contorno e 8px. Selecionado ganha fundo tonal. */
.badge, .make-badge, .pvx-badge, .chip {
  border: 1px solid var(--md-outline-variant) !important;
  border-radius: var(--md-shape-sm) !important;
  background: transparent !important;
  min-height: 32px;
}
.mkpro-chip { border: 0 !important; }   /* o chip de icone e circulo tonal */

/* --------------------------------------------- 19.6 tabela com linha visivel */

/* Voltam os divisores — o site do M3 desenha a data table com linha. */
#main thead th, .make-tbl thead th {
  border-bottom: 1px solid var(--md-outline) !important;
}
#main tbody td, .make-tbl tbody td {
  border-bottom: 1px solid var(--md-outline-variant) !important;
}

/* -------------------------------------------------------- 19.7 respiro */

/* O site do M3 é generoso com espaço. As seções ganham ar. */
.mkpro-head { margin: 16px 0 24px; }
.mkpro-head__title { font-size: 28px !important; line-height: 36px !important; }

@media (prefers-reduced-motion: reduce) {
  .material-symbols-outlined,
  a svg[stroke], button svg[stroke] { transition: none !important; }
}

/* -------------------------------------------- 19.8 o botao unico de menu */

/* Era um "icon button" do M3: alvo de 40px, circulo, camada de estado no hover.
   Substitui os DOIS controles que existiam antes (o do unfold, que escondia a
   barra toda, e o meu no rodape dela, que recolhia para icones). */
.mk-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--md-shape-full);
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  transition: background-color var(--md-dur-short, 140ms) var(--md-ease-standard),
              color var(--md-dur-short, 140ms) var(--md-ease-standard);
}
.mk-menu-toggle:hover {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
  color: var(--md-on-surface);
}
.mk-menu-toggle:active {
  background: color-mix(in srgb, var(--md-on-surface) 12%, transparent);
}
.mk-menu-toggle:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}
.mk-menu-toggle .material-symbols-outlined { font-size: 22px; }
/* Nao ha espelhamento: o glifo em si TROCA (`menu_open` <-> `menu`, o par de
   gaveta do M3), o que e mais legivel que o mesmo desenho virado do lado. */

/* Rede de seguranca: se alguma pagina em cache ainda injetar o botao antigo do
   rodape, ele nao aparece. Nao existe mais no JS. */
.mkx-side-collapse { display: none !important; }

/* --------------------------------- 19.9 a barra recolhida (regua de icones) */

/* POR QUE ESTA SECAO EXISTE: o recolhimento ja existia no make-admin.css, mas
   parou de funcionar quando o M3 entrou. As regras de la sao do tipo
   `body.mkx-side-collapsed #nav-sidebar-apps ol li a`  -> (1 id, 1 classe, 4 tags)
   e as minhas da §3 sao
   `#page #nav-sidebar-apps ol li a`                    -> (2 ids, 0 classe, 3 tags).
   Dois ids ganham de um. Resultado: a casca encolhia mas os ROTULOS ficavam,
   cortados no meio da palavra — foi exatamente o que o dono viu na tela.

   Aqui o estado recolhido e refeito com `body.mkx-side-collapsed #page ...`
   (2 ids + 1 classe), que ganha das duas. O rotulo agora e escondido pelo que
   ele e — um `<span>` que nao e o icone — em vez do `font-size: 0` de antes,
   que apagaria junto o icone (Material Symbols e FONTE, nao desenho). */

/* A casca: o div que reserva o espaco no layout, e a barra fixa por cima. */
body.mkx-side-collapsed #page div:has(> div > #nav-sidebar),
body.mkx-side-collapsed #page #nav-sidebar,
body.mkx-side-collapsed #page #nav-sidebar-inner {
  width: 76px !important;
  min-width: 76px !important;
}
/* SEM transicao de largura aqui, e de proposito. A barra e `position: fixed` e
   quem reserva o espaco no layout e OUTRO elemento (o invólucro). Animando os
   dois em paralelo eles ficam fora de sincronia durante a animacao e a gaveta
   passa por cima do conteudo — dava para ver o titulo da tela cortado ao meio.
   Recolher e um estado, nao uma viagem: vale mais estar certo que macio.
   (Sintoma extra que isso causava: com a aba em segundo plano o navegador nao
   avanca os quadros, a transicao nunca terminava e a largura ficava TRAVADA no
   valor inicial — o que faz uma regra `!important` parecer nao funcionar.) */

/* Marca: fica so o icone do app, centralizado. */
body.mkx-side-collapsed #page .mkbrand__text { display: none !important; }
body.mkx-side-collapsed #page .mkbrand-wrap,
body.mkx-side-collapsed #page .mkbrand { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; }

/* Cartao do usuario: so o avatar. O menu dele continua clicavel. */
body.mkx-side-collapsed #page #nav-sidebar-inner > div:nth-of-type(2) { padding-left: 0 !important; padding-right: 0 !important; }
body.mkx-side-collapsed #page #nav-sidebar-inner > div:nth-of-type(2) > div { justify-content: center !important; }
body.mkx-side-collapsed #page #nav-sidebar-inner > div:nth-of-type(2) > div > div:nth-child(2),
body.mkx-side-collapsed #page #nav-sidebar-inner > div:nth-of-type(2) > div > span { display: none !important; }

/* Busca sai: nao cabe em 76px e o item de menu ja leva a tudo. */
body.mkx-side-collapsed #page #nav-sidebar-inner > div:nth-of-type(3) { display: none !important; }

/* Titulos de secao saem; a pilula de cada item vira quadrado com cantos. */
body.mkx-side-collapsed #page #nav-sidebar-apps h2 { display: none !important; }
body.mkx-side-collapsed #page #nav-sidebar-apps ol { padding: 0 14px !important; }
body.mkx-side-collapsed #page #nav-sidebar-apps ol li a {
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 2px 0 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--md-shape-lg) !important;
}
/* O rotulo e o `<span>` que NAO e o icone. */
body.mkx-side-collapsed #page #nav-sidebar-apps ol li a > span:not(.material-symbols-outlined),
body.mkx-side-collapsed #page #nav-sidebar-apps ol li a > span.uppercase {
  display: none !important;
}
body.mkx-side-collapsed #page #nav-sidebar-apps ol li a .material-symbols-outlined {
  margin: 0 !important;
  font-size: 22px !important;
}

/* O make-admin.css:5290-5295 escondia, no modo recolhido, o primeiro e o
   segundo filhos da barra — ou seja, a MARCA e o CARTAO DO USUARIO — por
   inteiro. Isso deixava a regua sem identidade e, pior, sem caminho para o
   menu do usuario (onde fica o Sair). Aqui os dois voltam, reduzidos ao que
   cabe em 76px: o icone do app e o avatar. */
body.mkx-side-collapsed #page #nav-sidebar-inner > div:nth-of-type(1),
body.mkx-side-collapsed #page #nav-sidebar-inner > div:nth-of-type(2) {
  display: block !important;
}
body.mkx-side-collapsed #page .mkbrand-wrap { display: flex !important; padding: 12px 0 !important; }
body.mkx-side-collapsed #page #nav-sidebar-inner > div:nth-of-type(2) > div { display: flex !important; }

/* ------------------------------- 19.10 a gaveta encosta no topo e tem borda */

/* Duas coisas que o dono apontou na tela, e as duas eram minhas:
     1. A barra descolava do topo. Sobra do "painel de vidro" antigo, que era um
        CARTAO FLUTUANTE: `make-admin.css:4561` poe `top: 12px; bottom: 12px`
        com `border-radius: 0 20px 20px 0`. Eu zerei a borda e o raio na §3 e
        esqueci de trazer o painel para as bordas da tela.
     2. A barra nao tinha borda nenhuma. A §3 tem `border: 0 !important` — matei
        junto o `border-r` que o unfold desenha. Numa gaveta M3 a linha vertical
        e o que separa a navegacao do conteudo; sem ela, tudo vira uma mancha.

   Agora e uma gaveta de verdade: colada no topo e no rodape, altura cheia, e
   UMA linha de 1px em `outline-variant` que sobe do rodape ate o topo da pagina.
   `#page` na frente para ganhar do `!important` historico. */

#page #nav-sidebar {
  top: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border: 0 !important;
  border-right: 1px solid var(--md-outline-variant) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#page #nav-sidebar-inner { height: 100% !important; }

/* A barra do topo fecha o canto com a linha da gaveta: as duas se encontram. */
#page #content > header, #page .mkbar, body #main > header {
  border-bottom: 1px solid var(--md-outline-variant) !important;
}

/* --------------------------- 19.11 curvas da gaveta = curvas dos blocos */

/* Pedido do dono: "quero as curvas dos elementos do menu igual ao estilo
   arredondado dos botoes na tela".

   O curioso e que o raio JA era o mesmo — item de menu e botao estavam os dois
   em pilula (999px). O que muda e a LARGURA: um botao de 40x150 em pilula le
   como botao; um item de menu de 38x250 em pilula le como comprimido. Mesmo
   token, leitura diferente.

   Entao o alvo passa a ser o que ele ve na tela: o retangulo de 16px dos blocos
   (`.mkhome-act`, cartao, FAB). A gaveta inteira vai para 16px — item, pilula de
   selecao e caixa de busca — para nao ficar meia pilula, meia curva. */

#page #nav-sidebar-apps ol li a,
#page #nav-sidebar-apps ol li a.active,
#page #nav-sidebar a[aria-current="page"],
#page #nav-sidebar-apps ol li a::before {
  border-radius: var(--md-shape-lg) !important;   /* 16px */
}
#page #nav-sidebar .mksrch-box,
#page #nav-sidebar div:has(> #nav-filter),
#page #nav-sidebar #nav-filter {
  border-radius: var(--md-shape-lg) !important;
}
/* O cartao do usuario no topo acompanha. */
#page #nav-sidebar-inner > div:nth-of-type(2) > div { border-radius: var(--md-shape-lg) !important; }

/* ------------------------- 19.12 quem MANDA na visibilidade da gaveta */

/* Aqui o Alpine do unfold sai da jogada, e o motivo é concreto.
   O tema guarda `sidebarOpen` e escreve `display: none` no ESTILO EM LINHA do
   invólucro. Tentei acionar o `sidebarToggle()` dele: o valor virava `true`,
   mas o efeito do `x-show` não rodava de novo e o `display: none` em linha
   ficava lá. Resultado prático: a gaveta não voltava, e o menu ficava morto.
   Continuar caçando o estado interno de uma dependência é frágil por natureza.

   Então a visibilidade passa a ser DETERMINÍSTICA e minha:
     • acima de 1280px  -> a gaveta está SEMPRE visível. `!important` ganha do
       estilo em linha do Alpine, então não existe estado sem saída: o botão só
       escolhe entre gaveta cheia e régua de ícones.
     • até 1280px       -> vale a classe `mk-gaveta-aberta` no <body>, e só ela.
       Fecho a porta primeiro (`display: none`) para o estado do Alpine não
       vazar aqui em nenhuma direção.
   O limite é o mesmo do unfold (`innerWidth <= 1280` = sobreposta). */

@media (min-width: 1281px) {
  #page div:has(> div > #nav-sidebar) { display: block !important; }
}

@media (max-width: 1280px) {
  #page div:has(> div > #nav-sidebar) { display: none !important; }
  body.mk-gaveta-aberta #page div:has(> div > #nav-sidebar) { display: block !important; }
  /* Véu por trás da gaveta sobreposta, sem elemento novo no DOM. O clique fora
     é tratado no JS (sombra não recebe evento). */
  body.mk-gaveta-aberta #page #nav-sidebar {
    box-shadow: 0 0 0 100vmax color-mix(in srgb, #000 42%, transparent) !important;
  }
}

/* ------------------ 19.13 o VOLTAR na barra do topo, e o menu só no estreito */

/* O canto esquerdo da barra passou a ser do voltar. Motivo concreto: o ícone de
   gaveta do M3 (`menu_open`, um ≡ com seta) era lido como seta de voltar e, ao
   lado do "Voltar ao Início" que a tela desenhava, parecia dois botões de
   voltar. O dono pediu o voltar no lugar do recolher.

   O botão de voltar segue o "text button" do M3: sem preenchimento, rótulo em
   `primary`, camada de estado no hover, pílula. */

.mk-topbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  width: 40px;
  padding: 0;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--md-shape-full);
  background: transparent;
  color: var(--md-primary);
  font: 500 14px/20px var(--md-font);
  letter-spacing: .1px;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--md-dur-short) var(--md-ease-standard);
}
.mk-topbtn:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.mk-topbtn:active { background: color-mix(in srgb, var(--md-primary) 12%, transparent); }
.mk-topbtn:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.mk-topbtn .material-symbols-outlined { font-size: 20px; }
/* O rótulo nunca aparece na barra: ele é o `title`/`aria-label` do botão. Na
   primeira versão eu punha o texto ao lado do ícone e ficava "← Início" logo
   abaixo da migalha que já dizia a mesma coisa — texto demais para uma barra
   que, no M3, é ícone de navegação + título e nada mais. */
.mk-topbtn__lbl { display: none !important; }

/* E a MIGALHA sai. O caminho já está dito duas vezes melhores: pelo botão de
   voltar (que leva ao pai) e pelo título da tela. A migalha em caixa alta de
   11px por cima do título é padrão de outra escola de design — o M3 não tem
   breadcrumb na top app bar. Se um dia precisar dela de volta, é só apagar
   estas três linhas. */
#main > header.make-header .mkhdr__trail { display: none !important; }
#main > header.make-header .mkhdr__lead { justify-content: center; }

/* O botão de menu existe SÓ abaixo de 1280px, onde a gaveta é sobreposta e
   começa fechada — sem ele ali não haveria como abrir o menu. Acima disso a
   gaveta está sempre visível (§19.12) e o botão sai, como o dono pediu. */
.mk-menu-toggle--estreito { display: none !important; }
@media (max-width: 1280px) {
  .mk-menu-toggle--estreito { display: inline-flex !important; }
}

/* ----------------- 19.14 o usuário no lugar da marca, no topo da gaveta */

/* Decisão do dono: a marca "ITAM / Make Distribuidora" saiu do topo da gaveta e
   o CARTÃO DE USUÁRIO tomou o lugar dela. Razão dele: "ela não tá sendo útil
   pra gente ali" — quem está dentro já sabe em que sistema está, e o bloco
   custava uma faixa inteira de altura.

   O cartão foi PROMOVIDO, não reescrito: o menu dele (trocar senha e SAIR) vem
   junto, intacto. Perder o caminho do "Sair" seria regressão grave. É por isso
   que o invólucro vazio continua no HTML: as regras de gaveta desta folha
   endereçam os blocos por POSIÇÃO (`> div:nth-of-type(n)`), e apagar o primeiro
   deslocaria todos os índices, levando embora o estilo do cartão e da busca. */

/* O invólucro do cabeçalho ficou só com o X de fechar, que existe abaixo de
   1280px. Acima disso ele não tem conteúdo — e não ocupa espaço. */
#page .mkbrand-wrap--vazia { padding: 0; min-height: 0; }
@media (min-width: 1281px) {
  #page .mkbrand-wrap--vazia { display: none !important; }
}
@media (max-width: 1280px) {
  #page .mkbrand-wrap--vazia { display: flex; justify-content: flex-end; padding: 8px 12px 0; }
}
/* Na régua de ícones o invólucro vazio não reaparece (a §19.9 o mandava voltar
   quando ainda havia marca ali). */
body.mkx-side-collapsed #page .mkbrand-wrap--vazia { display: none !important; }

/* O cartão de usuário agora é o primeiro bloco: ganha o respiro de um cabeçalho
   e um fio embaixo, para separar identidade de navegação. */
#page #nav-sidebar-inner > div:nth-of-type(2) {
  padding-top: 14px !important;
  padding-bottom: 12px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid var(--md-outline-variant);
}
/* O avatar cresce um pouco: ele é a "marca" do topo agora. */
#page #nav-sidebar-inner > div:nth-of-type(2) > div > div:first-child {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--md-shape-md) !important;
  font-weight: 700 !important;
}
/* Recolhida, a régua mostra só o avatar — centralizado e sem o fio. */
body.mkx-side-collapsed #page #nav-sidebar-inner > div:nth-of-type(2) {
  border-bottom: 0;
  padding-top: 12px !important;
}

/* O menu do usuário ganhou CONTORNO. Ele era só um degrau tonal
   (`surface-container-high` sobre a gaveta em `-low`) — o que funciona no tema
   escuro e quase desaparece no claro: dava impressão de fundo transparente,
   com o que está atrás vazando por baixo. Agora tem o fio de 1px da §19.

   `#page` na frente porque o `<style>` local do template tem
   `#nav-sidebar .mknu-menu { border: 0 !important }` — com !important nos dois
   lados quem decide é a especificidade, e 2 ids ganham de 1 (a ordem não pesa).
   E foco visível no cartão, que não tinha nenhum. */
#page #nav-sidebar .mknu-menu {
  border: 1px solid var(--md-outline-variant) !important;
}
#page #nav-sidebar-inner > div:nth-of-type(2) > div[role="button"]:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: -2px;
  border-radius: var(--md-shape-lg);
}

/* --------------------------------- 19.15 avatar de verdade, e o chevron fora */

/* O dono: "essas setas do lado é oq? Tira isso <> e reaproveita mais essa parte
   pra botar um ícone de perfil da pessoa tipo avatar. Cada colaborador vai ter
   um avatar."

   Feito em três partes:
     1. O chevron saiu do template do cartão (era o `unfold_more`).
     2. `Person.foto` entrou no modelo, e o `unfold/helpers/avatar.html` do
        projeto passa a desenhar a foto quando existe — inicial quando não.
     3. Aqui: o avatar cresce e vira círculo, ocupando o espaço que o chevron
        devolveu, e o nome/e-mail ganham a largura que sobrou (eles cortavam). */

#page #nav-sidebar-inner > div:nth-of-type(2) > div > .mkav {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: var(--md-shape-full) !important;
  background-color: var(--md-primary-container) !important;
  color: var(--md-on-primary-container) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  /* O fio contorna a foto e some quando é só a inicial (o tom já separa). */
  box-shadow: 0 0 0 1px var(--md-outline-variant);
}
/* Com foto, o fundo é a imagem: nada de tom por baixo puxando a cor dela. */
#page #nav-sidebar-inner > div:nth-of-type(2) > div > .mkav--foto {
  background-color: transparent !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Na régua de 76px o avatar é a única coisa que resta: alvo de 44px, centrado. */
body.mkx-side-collapsed #page #nav-sidebar-inner > div:nth-of-type(2) > div > .mkav {
  width: 44px !important;
  height: 44px !important;
}

/* Avatar nas outras telas (tabelas, mapas) também vira círculo com foto. */
.mkav--foto { background-size: cover; background-position: center; }

/* ------------------- 19.16 topo alinhado: um título só, sem faixa morta */

/* O dono apontou o alinhamento do dashboard — título DENTRO do conteúdo, no
   mesmo canto esquerdo dos cartões — e mandou manter. Então o título não sobe
   para a barra: na barra ele ficaria 40px mais à direita, empurrado pela seta
   de voltar, e o alinhamento se perderia.

   O que muda: a barra cede o título (era duplicata) e recebe as ações da tela;
   o ar entre as duas faixas sai. Lógica em make-admin.js:initTopoUnico(). */

/* A barra cede o título quando a tela tem o seu. Fica com a seta, as ações da
   tela, o "?" e o sino — e encolhe, porque não carrega mais texto grande. */
#main > header.make-header h1.mkhdr__h1--cedido { display: none !important; }
#main > header.make-header .mkhdr__in {
  min-height: 56px;
  height: auto !important;
  padding: 6px 16px !important;
}
#main > header.make-header .mkhdr__row { flex-wrap: wrap; row-gap: 6px; }

/* Ações da tela, agora na barra, antes do "?" e do sino. */
.mkhdr__acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-right: 8px; }
.mkhdr__acoes:empty { display: none; }
.mkhdr__acoes .mpa-btn,
.mkhdr__acoes .mapa__estoque,
.mkhdr__acoes .mapa__view-btn { min-height: 36px !important; padding: 0 16px !important; }

/* O ar morto entre a barra e o título sai: era o que ele chamou de espaço
   inútil. O título passa a começar logo abaixo da barra, alinhado ao conteúdo. */
.mkpro-head { margin-top: 8px !important; }

@media (max-width: 900px) {
  .mkhdr__acoes { order: 3; width: 100%; margin-right: 0; }
}

/* ------------------------- 19.17 busca única com popup de filtros */

/* "O mapa precisa ter um campo único de pesquisa e uma opção de filtro no
   próprio campo que abre um popup com os filtros para aplicar."

   A casca `.mkbu` põe o campo e o botão de filtro dentro da MESMA moldura: um
   controle só, do jeito que ele pediu. Os seletores de Unidade, Setor e Cargo
   são movidos para dentro do popup pelo JS — não reescritos, porque carregam
   gancho vivo. */

.mkbu {
  position: relative;
  display: flex;
  align-items: stretch;
  /* NÃO cresce até o fim da linha. Com os filtros movidos para o popup, a casca
     era o único item do flex e esticava para 1070px — o campo parava em 480px
     (tem largura máxima própria) e sobravam ~500px de moldura vazia à direita,
     com o botão de filtro solto no meio. É a "faixa com espaço inútil" outra
     vez, só que na horizontal. Aqui ela tem tamanho de campo de busca. */
  flex: 0 1 560px;
  max-width: 560px;
  min-width: 260px;
  border: 1px solid var(--md-outline);
  border-radius: var(--md-shape-sm);
  background: var(--md-surface);
  transition: border-color var(--md-dur-short) var(--md-ease-standard),
              box-shadow var(--md-dur-short) var(--md-ease-standard);
}
.mkbu:focus-within,
.mkbu--aberto {
  border-color: var(--md-primary);
  box-shadow: inset 0 0 0 1px var(--md-primary);
}
/* O campo perde a própria moldura: agora a moldura é da casca. */
.mkbu .mapa__busca {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none !important;   /* dentro da casca, quem limita é a casca */
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.mkbu .mapa__busca input {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 40px !important;
  min-height: 40px !important;
}
.mkbu .mapa__busca input:focus { box-shadow: none !important; }

/* O botão de filtro vive DENTRO do campo, separado por um fio. */
.mkbu__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: auto;
  padding: 0 14px;
  border: 0;
  border-left: 1px solid var(--md-outline-variant);
  border-radius: 0 var(--md-shape-sm) var(--md-shape-sm) 0;
  background: transparent;
  color: var(--md-on-surface-variant);
  font: 500 13px/1 var(--md-font);
  letter-spacing: .1px;
  cursor: pointer;
  transition: background-color var(--md-dur-short) var(--md-ease-standard),
              color var(--md-dur-short) var(--md-ease-standard);
}
.mkbu__btn:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); color: var(--md-on-surface); }
.mkbu__btn:focus-visible { outline: 2px solid var(--md-primary); outline-offset: -2px; }
.mkbu__btn .material-symbols-outlined { font-size: 20px; }
.mkbu__btn.is-on { color: var(--md-primary); }
/* Contador de filtros valendo — o operador vê que há filtro sem abrir. */
.mkbu__n {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--md-shape-full);
  background: var(--md-primary);
  color: var(--md-on-primary);
  font: 700 11px/1 var(--md-font);
}

/* O popup: menu do M3 — tom acima da superfície, fio de 1px, sombra de quem
   realmente flutua. Ancorado no canto direito do campo. */
.mkbu__pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 70;
  min-width: 300px;
  max-width: min(520px, calc(100vw - 48px));
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--md-surface-container-high);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-md);
  box-shadow: var(--md-elev-2);
}
/* Dentro do popup os filtros empilham: eles vinham de uma barra horizontal. */
.mkbu__pop .flt-bar,
.mkbu__pop .mapa-cargo {
  margin: 0 !important;
  flex-wrap: wrap;
}
.mkbu__pop .flt-bar { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }

@media (max-width: 560px) {
  .mkbu__btn .mkbu__lbl { display: none; }
  .mkbu__pop { left: 0; right: auto; }
}

/* ------------------------------ 19.18 sem verde cheio onde ele pesa */

/* "Esse verdão brilhante me irrita. Quero algo mais leve igual as outras
   partes do sistema."

   O culpado no alternador Mapa/Tabela é o `make-admin.css:5188`, que pinta o
   item ativo com um DEGRADÊ brilhante sobre `#00a651` e texto branco, com
   `!important`. O template já pedia `secondary-container` (o tom claro), mas
   perdia: `!important` de um lado só decide na especificidade, e as duas regras
   tinham duas classes. Aqui entra `#main` na frente e o tom volta.

   O princípio, para não repetir: verde CHEIO é para acento pequeno (ponto,
   borda, ícone). Superfície selecionada usa o container tonal. Ainda restam
   ~50 preenchimentos saturados no CSS histórico, em telas que ele não apontou —
   ficam para uma varredura própria, não para um chute cego agora. */

#main .mapa__view-btn.is-active,
.dark #main .mapa__view-btn.is-active {
  background: var(--md-secondary-container) !important;
  background-image: none !important;
  color: var(--md-on-secondary-container) !important;
  box-shadow: none !important;
}
#main .mapa__view-btn.is-active svg { color: currentColor !important; }

/* ---------------- 19.19 (vazia) o avatar continua na gaveta */

/* Aqui morava o estilo do avatar na barra do topo, que está na referência de
   layout. A mudança foi revertida: mover aquele bloco de lugar quebra o menu da
   conta — o único caminho para trocar de tema, trocar a senha e SAIR — porque o
   Alpine destrói o estado da subárvore ao vê-la sair do DOM e o `x-show` não
   volta a funcionar. O porquê completo está em make-admin.js, na função
   `initAvatarNoTopo`, que ficou desligada.

   O avatar segue no topo da GAVETA, onde o dono o pôs quando pediu para tirar a
   logo. Nenhuma regra é necessária aqui. */

/* --------------------- 19.20 TODO campo de busca é preenchido, nunca contornado */

/* "Não quero NENHUM campo de pesquisa assim. Quero igual o do menu."
   O "assim" era o campo contornado de 52px que a §19.4 aplica — moldura de 1px
   e canto de 4px, que num campo largo lê como um quadrado gritando.

   E ele está certo pelo próprio Material: campo de TEXTO é outlined, mas BARRA
   DE BUSCA é um componente diferente, e no M3 ela é PREENCHIDA e bem
   arredondada. O da gaveta já era assim — 48px, `surface-container-high`, raio
   de 16px, sem borda. Agora todos são.

   Especificidade: precisa vencer a §19.4, que usa `#main input[type=...]`
   (1 id, 1 classe de atributo). Daqui em diante, campo de busca novo entra
   nesta lista — não crie um contornado. */

#main .mapa__busca,
#main .baia-colab__busca,
#main .tab-acoes__busca,
#main #changelist-search,
#main div:has(> input[type="search"]) {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  background: var(--md-surface-container-high) !important;
  border: 0 !important;
  border-radius: var(--md-shape-lg) !important;
  box-shadow: none !important;
  transition: background-color var(--md-dur-short) var(--md-ease-standard),
              box-shadow var(--md-dur-short) var(--md-ease-standard);
}
#main .mapa__busca:focus-within,
#main .baia-colab__busca:focus-within,
#main #changelist-search:focus-within,
#main div:has(> input[type="search"]):focus-within {
  background: var(--md-surface-container) !important;
  box-shadow: inset 0 0 0 2px var(--md-primary) !important;
}
/* O input em si não desenha nada: a casca é que é a barra. */
#main .mapa__busca input,
#main .baia-colab__busca input,
#main .tab-acoes__busca input,
#main #changelist-search input[type="search"],
#main #changelist-search input[type="text"],
#main input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  /* O campo segue a ALTURA DA CASCA, não um número fixo. Estava `46px` com
     `!important`, e a casca do mapa tem 40px: o campo transbordava 6px e a
     borda dele aparecia por cima da pílula. Altura fixa em elemento que mora
     dentro de outro de altura variável é convite para esse tipo de sobra. */
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 14.5px !important;
}
#main .mapa__busca input:focus,
#main #changelist-search input:focus,
#main input[type="search"]:focus {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* A lupa e o "x" acompanham o tom do rótulo. */
#main .mapa__busca-ico svg,
#main .mapa__busca-x { color: var(--md-on-surface-variant) !important; }
#main .mapa__busca-ico { display: grid; place-items: center; flex: 0 0 auto; }
#main .mapa__busca-ico svg { width: 20px; height: 20px; }

/* -------------------------- 19.21 a busca da gaveta como LUPA */

/* Fechada é um botão de ícone de 40px, alinhado com os itens do menu. Aberta é
   a barra preenchida de sempre. A transição é de largura, e aqui ela é segura:
   é um elemento só, dentro do fluxo, sem par de layout para sair de sincronia
   (foi o que obrigou a tirar a transição da largura da gaveta, na §19.9). */

#page #nav-sidebar .mksrch-box {
  transition: width var(--md-dur-medium) var(--md-ease-emphasized),
              background-color var(--md-dur-short) var(--md-ease-standard);
  cursor: text;
  overflow: hidden;
}
/* ATENÇÃO À ESPECIFICIDADE AQUI. Quem estilizava esta caixa era
   `#page #nav-sidebar div:has(> #nav-filter)` — e `:has()` **conta o seletor
   mais específico de dentro**, que ali é um ID. Ou seja: aquela regra vale
   3 ids, e ganhava desta (2 ids + 2 classes) mesmo com `!important` dos dois
   lados. Resultado na tela: a lupa ficava com `padding: 0 16px` e raio de
   caixa, o ícone empurrado contra a borda (e cortado pelo `overflow: hidden`),
   12px fora da coluna de ícones do menu — foi o "ícone de pesquisa estranho"
   que o dono viu. A saída é repetir o `:has(> #nav-filter)` também aqui, o que
   leva esta regra a 3 ids + 2 classes. */
#page #nav-sidebar .mksrch-box.mksrch--lupa,
#page #nav-sidebar .mksrch-box.mksrch--lupa:has(> #nav-filter) {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  /* 999px literal: `--md-shape-full` estava resolvendo para 16px neste ramo e
     a lupa saía quadrada — botão de ícone do M3 é círculo. */
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  /* A gaveta tem `mx-3` (12px) e o item de menu põe o ícone em x=36 (centro
     48). Caixa de 40px centrada em 48 começa em 28 = 12 do pai + 16 daqui:
     a lupa cai exatamente na coluna de ícones do menu. */
  margin: 0 12px 8px 16px !important;
  cursor: pointer;
}
#page #nav-sidebar .mksrch-box.mksrch--lupa:hover,
#page #nav-sidebar .mksrch-box.mksrch--lupa:has(> #nav-filter):hover {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent) !important;
}
#page #nav-sidebar .mksrch-box.mksrch--lupa .mksrch-ic {
  width: 22px !important; height: 22px !important;
  color: var(--md-on-surface-variant) !important;
}
/* Aberta, o padding volta a ser o da barra preenchida. */
#page #nav-sidebar .mksrch-box.mksrch--aberta:has(> #nav-filter) {
  padding: 0 16px !important;
  margin: 0 12px 8px !important;
}
/* Fechada, só o ícone existe: o campo e o texto de apoio saem de cena sem
   sair do DOM — os ganchos de Alpine e HTMX continuam vivos. */
#page #nav-sidebar .mksrch-box.mksrch--lupa .mksrch-input,
#page #nav-sidebar .mksrch-box.mksrch--lupa .mksrch-fake,
#page #nav-sidebar .mksrch-box.mksrch--lupa kbd {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
}
#page #nav-sidebar .mksrch-box.mksrch--lupa .mksrch-ic {
  position: static !important;
  margin: 0 !important;
  transform: none !important;
}
/* Aberta: a barra cheia, com o anel de foco da marca. */
#page #nav-sidebar .mksrch-box.mksrch--aberta {
  width: 100% !important;
  background: var(--md-surface-container-high) !important;
  box-shadow: inset 0 0 0 2px var(--md-primary) !important;
}
/* A faixa da busca encolhe junto: era 48px de altura esperando alguém. */
#page #nav-sidebar-inner > div:nth-of-type(3):has(.mksrch--lupa) {
  padding-top: 0 !important;
  padding-bottom: 4px !important;
}

/* --------------------- 19.22 cabeçalho de tela: cartão com ícone */

/* Este bloco nasceu no <style> do mapa e foi promovido para cá quando a tela de
   Registros passou a usar o mesmo cabeçalho e abriu com o ícone do tamanho da
   página — regra que serve mais de uma tela não pode morar dentro de uma delas.

   É o cabeçalho que o dono aprovou: cartão com contorno, ícone quadrado em TOM
   CLARO à esquerda (nunca verde cheio — "esse verdão brilhante me irrita"),
   título, contagem em pílula e uma linha dizendo o que a tela é. Alinhado com o
   conteúdo de baixo, que foi o padrão de alinhamento que ele mandou manter. */

  /* Referência que o dono mandou: o título mora num cartão, com um ícone
     quadrado à esquerda, a contagem como pílula ao lado e uma linha dizendo o
     que a tela é. Tudo em TOM CLARO — ele foi específico: "esse verdão
     brilhante me irrita, quero algo mais leve igual as outras partes do
     sistema". Então o ícone usa `primary-container` (o verde claro que a
     pílula do menu já usa), nunca `primary` cheio com texto branco. */
  .mpa-head {
    display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap;
    padding: 14px 18px;
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-lg);
  }
  .mpa-head__ico {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: var(--md-shape-md);
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
  }
  .mpa-head__ico svg { width: 22px; height: 22px; }
  .mpa-head__id { flex: 1 1 320px; min-width: 0; display: grid; gap: 2px; }
  .mpa-lede {
    font: 400 13.5px/20px var(--md-font); letter-spacing: .1px;
    color: var(--md-on-surface-variant); margin: 0;
  }

/* Título e contagem do cabeçalho-cartão (o sufixo do texto fica na tela). */
  .mpa-title { font-size: 21px !important; line-height: 28px !important; font-weight: 600 !important; }
  .mpa-count {
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 11.5px/18px var(--md-font); letter-spacing: .3px;
    padding: 1px 10px; border-radius: var(--md-shape-full);
    background: var(--md-primary-container); color: var(--md-on-primary-container);
  }
  .mpa-count::before {
    content: ""; width: 6px; height: 6px; border-radius: var(--md-shape-full);
    background: currentColor;
  }

/* ============================================================================
   20. A CASCA DO PROTÓTIPO  (04/09/2026)

   Implementa a tela que o dono aprovou: menu de cinco destinos, busca larga e
   conta na barra do topo, unidades no pé da gaveta. Ele foi específico —
   "preciso dessa tela inicial EXATA".

   Nenhuma tela foi descartada: o que saiu do menu virou ABA na barra
   (templates/unfold/helpers/_abas.html).
   ========================================================================== */

/* ---------------------------------------------------- 20.1 busca na barra */
/* A busca era da gaveta e virou lupa lá (§19.21). Agora ela é o campo largo do
   canto esquerdo da barra, como na referência. As regras da §19.21 valiam para
   `#nav-sidebar .mksrch-box`; aqui o pai é outro, então elas não pegam. */
#main > header.make-header .mksrch-box {
  display: flex !important;
  align-items: center;
  gap: 9px;
  width: auto !important;
  flex: 0 1 340px;
  min-width: 180px;
  height: 40px;
  padding: 0 15px !important;
  border-radius: var(--md-shape-full) !important;
  background: var(--md-surface-container-high) !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: text;
}
#main > header.make-header .mksrch-box:focus-within {
  box-shadow: inset 0 0 0 2px var(--md-primary) !important;
}
#main > header.make-header .mksrch-input {
  flex: 1 1 auto; min-width: 0;
  height: 38px !important; min-height: 0 !important;
  padding: 0 !important; border: 0 !important;
  background: transparent !important; box-shadow: none !important;
  font-size: 13.5px !important;
}
#main > header.make-header .mksrch-ic { position: static !important; transform: none !important; width: 17px; height: 17px; flex: 0 0 auto; }
#main > header.make-header .mksrch-fake { font-size: 13.5px; }
#main > header.make-header #search-results { position: absolute; top: 52px; left: 0; z-index: 80; }

/* ------------------------------------------------------ 20.2 conta na barra */
/* O bloco veio da gaveta por TEMPLATE (não por `appendChild` — ver o comentário
   em navigation.html). Aqui ele é comprimido ao formato da referência: nome e
   cargo em duas linhas à direita, avatar, chevron. */
#main > header.make-header > div [x-data*="openUserLinks"] {
  padding: 0 !important; margin: 0 0 0 8px !important; position: relative; flex: 0 0 auto;
}
#main > header.make-header [x-data*="openUserLinks"] > div[role="button"] {
  margin: 0 !important; padding: 4px 10px 4px 12px !important;
  min-height: 42px !important; gap: 10px !important;
  flex-direction: row-reverse;          /* avatar à DIREITA, como na referência */
  border-radius: var(--md-shape-full) !important;
  background: transparent !important;
}
#main > header.make-header [x-data*="openUserLinks"] > div[role="button"]:hover {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent) !important;
}
#main > header.make-header [x-data*="openUserLinks"] .flex.flex-col { text-align: right; }
#main > header.make-header .mknu-name { font: 600 13px/17px var(--md-font) !important; }
#main > header.make-header .mknu-papel { font: 400 11px/15px var(--md-font) !important; }
#main > header.make-header .mkav {
  width: 36px !important; height: 36px !important; min-width: 36px !important;
  border-radius: var(--md-shape-full) !important; font-size: 13px !important;
}
#main > header.make-header .mknu-menu {
  top: calc(100% + 8px) !important; left: auto !important; right: 0 !important; width: 260px;
}

/* -------------------------------------------------------------- 20.3 abas */
/* O que saiu do menu vive aqui. Rola na horizontal em tela estreita em vez de
   quebrar em duas linhas e empurrar o conteúdo. */
.mkab {
  display: flex; align-items: center; gap: 4px;
  margin-left: 14px; padding-left: 14px;
  border-left: 1px solid var(--md-outline-variant);
  overflow-x: auto; scrollbar-width: none; min-width: 0;
}
.mkab::-webkit-scrollbar { display: none; }
.mkab__i {
  padding: 7px 13px; border-radius: var(--md-shape-full);
  font: 500 12.5px/16px var(--md-font); letter-spacing: .1px;
  color: var(--md-on-surface-variant); text-decoration: none !important;
  white-space: nowrap; flex: 0 0 auto;
  transition: background-color var(--md-dur-short) var(--md-ease-standard);
}
.mkab__i:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); color: var(--md-on-surface); }
.mkab__i.is-on { background: var(--md-secondary-container); color: var(--md-on-secondary-container); font-weight: 600; }
@media (max-width: 900px) { .mkab { margin-left: 0; padding-left: 0; border-left: 0; order: 4; width: 100%; } }

/* ------------------------------------------------- 20.4 unidades na gaveta */
/* "As lojas ali na parte de baixo pra explodir a visão de cada uma individual
   depois" — cada linha leva ao mapa DAQUELA loja, que é a visão individual que
   já existe. */
#page .mkun__cap {
  display: flex; align-items: center; gap: 8px;
  margin: 20px 22px 6px;
  font: 700 9.5px/12px var(--md-font); letter-spacing: .14em;
  text-transform: uppercase; color: var(--md-on-surface-variant);
}
#page .mkun__add {
  margin-left: auto; display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: var(--md-shape-full);
  background: var(--md-surface-container-high); color: var(--md-on-surface-variant);
  font: 600 13px/1 var(--md-font); text-decoration: none !important;
}
#page .mkun__add:hover { background: var(--md-primary-container); color: var(--md-on-primary-container); }
#page .mkun {
  display: flex; align-items: center; gap: 10px;
  margin: 1px 12px; padding: 8px 10px;
  border-radius: var(--md-shape-lg) !important;
  color: var(--md-on-surface-variant) !important; text-decoration: none !important;
  font: 500 13px/18px var(--md-font);
}
#page .mkun:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); color: var(--md-on-surface) !important; }
#page .mkun__pt { width: 8px; height: 8px; border-radius: var(--md-shape-full); background: var(--c); flex: 0 0 auto; }
#page .mkun__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page .mkun__q { margin-left: auto; font: 500 11px/1 var(--md-font); color: var(--md-outline); font-variant-numeric: tabular-nums; }
/* Na régua de 76px sobra só o ponto de cor. */
body.mkx-side-collapsed #page .mkun__cap { display: none !important; }
body.mkx-side-collapsed #page .mkun { justify-content: center; margin: 1px 14px; }
body.mkx-side-collapsed #page .mkun__n,
body.mkx-side-collapsed #page .mkun__q { display: none !important; }

/* ============================================================================
   21. CONTÊINER DE PÁGINA — a ÚNICA fonte de verdade do alinhamento

   O dono: "consegue pelo menos alinhar as telas do sistema? cada uma tá com um
   espaçamento diferente". Ele estava certo, e a causa era minha: o `#content`
   recebia OITO declarações concorrentes espalhadas por três arquivos, sendo
   QUATRO de `padding-top` escritas por mim em seções diferentes deste mesmo
   arquivo. Cada tela terminava com a última que vencia — daí o título começar
   em 193px numa tela, 212px na outra e 253px na terceira.

   Daqui para frente: `padding`, `max-width` e o respiro do primeiro bloco do
   `#content` moram SÓ nesta seção. Se você precisar mudar o alinhamento de uma
   tela, pergunte primeiro por que ela precisa ser diferente das outras.
   ========================================================================== */

/* `#main #content` com DOIS ids, e não `#content` sozinho: o elemento também
   carrega a classe `container`, e o make-admin.css tem
   `#main .container { max-width: none !important }` — 1 id + 1 classe, que
   ganha de 1 id mesmo com `!important` nos dois lados. */
#main #content {
  max-width: 1480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 14px 20px 72px !important;
}
@media (max-width: 700px) { #main #content { padding: 10px 14px 56px !important; } }

/* Nenhuma tela acrescenta recuo horizontal próprio: quem dá a margem é o
   contêiner. Era daqui que vinham os 19px a mais do mapa. */
#content > .mapa,
#content > .mkhome,
#content > .make-dash,
#content > .pvx-wrap,
#content > .mapa.mpa-skin,
#content > form,
#content > section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* O primeiro bloco não empurra o topo, e o cabeçalho de tela tem sempre o mesmo
   respiro embaixo — é isso que faz as telas começarem na mesma altura. */
#content > *:first-child { margin-top: 0 !important; }
#content .mkpro-head + * { margin-top: 0 !important; }

/* O CABEÇALHO-CARTÃO passa a valer em TODA tela, não só no mapa.

   Era essa a última fonte de desalinhamento: o mapa tinha cabeçalho em cartão
   (com 18px de padding interno) e as outras telas tinham cabeçalho solto — o
   título do mapa nascia 18px mais para dentro que o das outras. Ou nenhuma tem
   cartão, ou todas têm. Escolhi todas, porque é o desenho que o dono aprovou.

   `.mpa-head` (o do mapa) continua existindo e agora só acrescenta o ícone. */
#content .mkpro-head {
  display: flex;
  align-items: center;
  gap: 14px 20px;
  flex-wrap: wrap;
  margin: 0 0 20px !important;
  padding: 14px 18px;
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-lg);
}
/* O par overline/título/sub continua empilhado dentro do cartão. */
#content .mkpro-head > .mkpro-head__eyebrow,
#content .mkpro-head > .mkpro-head__title,
#content .mkpro-head > .mkpro-head__sub { flex: 1 1 100%; margin: 0; }
#content .mkpro-head > .mkpro-head__actions { flex: 0 0 auto; margin-left: auto; }

/* ------------------- 21.1 a barra de filtro não pode pular */
/* "Muda sim o menu, porque ele acrescenta um elemento de filtro e empurra o
   campo de pesquisa."

   O bloco "Filtrando por…" (`.fltx-active`) nascia DENTRO da mesma linha dos
   controles, então ao aplicar um filtro ele entrava no meio e empurrava a busca
   para o lado. Agora ele ocupa uma LINHA PRÓPRIA, abaixo: aparece e desaparece
   sem mover nada do que está acima. */
.flt-bar .fltx-active,
.mpa-fbar .fltx-active {
  flex: 1 0 100% !important;
  order: 99;
  margin: 2px 0 0 !important;
}
/* E a busca ganha um lugar fixo na linha, para não crescer e encolher conforme
   os vizinhos aparecem. */
.mpa-fbar .mapa__busca { flex: 0 1 340px !important; }

/* ------------------- 21.2 um botão "Filtrar", filtros em fichas no popup */

/* "Melhor colocar uma opção ali de filtrar e aparecer um menu circular pra
   selecionar." Os dois seletores soltos saem da linha; fica um botão só, e
   dentro do popup cada opção é uma FICHA ARREDONDADA.

   Sobre "circular": anel de opções em volta do botão só funciona com até ~6
   itens, e a lista de setores passa disso. Então a forma é popup com fichas
   redondas — varre-se com o olho e escala com a lista. */

.mkfp { position: relative; flex: 0 0 auto; }
.mkfp__btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 16px;
  border: 1px solid var(--md-outline); border-radius: var(--md-shape-full);
  background: var(--md-surface); color: var(--md-on-surface);
  font: 500 13px/1 var(--md-font); cursor: pointer;
  transition: background-color var(--md-dur-short) var(--md-ease-standard),
              border-color var(--md-dur-short) var(--md-ease-standard);
}
.mkfp__btn svg { width: 16px; height: 16px; }
.mkfp__btn:hover { background: var(--md-surface-container); }
.mkfp__btn:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.mkfp__btn.is-on, .mkfp--aberto .mkfp__btn {
  border-color: var(--md-primary); color: var(--md-primary);
}
.mkfp__n {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--md-shape-full);
  background: var(--md-primary); color: var(--md-on-primary);
  font: 700 11px/1 var(--md-font); font-variant-numeric: tabular-nums;
}

.mkfp__pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
  min-width: 300px; max-width: min(520px, calc(100vw - 40px));
  padding: 14px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--md-surface-container-high);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-md);
  box-shadow: var(--md-elev-2);
}
.mkfp__pop[hidden] { display: none !important; }

/* Dentro do popup o gatilho do dropdown não faz sentido — o popup JÁ é a
   abertura. O painel fica sempre visível, e o `display` vence o atributo
   `hidden` que o `initFiltroDropdowns` põe e tira. */
.mkfp__pop [data-mkdd-btn] { display: none !important; }
/* O `[hidden]` TAMBÉM no seletor — sem isso nada disto funciona.
   O `initFiltroDropdowns` põe e tira o atributo `hidden` do painel, e a regra
   do navegador para `[hidden]` é `display: none`. Um seletor sem o `[hidden]`
   não sobrescreve o caso fechado: o painel ficava sem pintar e, pior, as fichas
   não recebiam clique — foi exatamente o que o dono viu ("os itens do menu não
   estão clicáveis"). Dentro do popup o painel é SEMPRE visível, porque o popup
   já é a abertura. */
.mkfp__pop [data-mkdd-panel],
.mkfp__pop [data-mkdd-panel][hidden] {
  display: block !important;
  position: static !important;
  min-width: 0 !important; width: auto !important;
  margin: 0 !important; padding: 0 !important;
  background: transparent !important;
  border: 0 !important; box-shadow: none !important;
}
.mkfp__pop .flt-bar,
.mkfp__pop .mapa-cargo { display: block !important; margin: 0 !important; }
.mkfp__pop .mkdd { display: block; margin-bottom: 12px; }
.mkfp__pop .mkdd:last-child { margin-bottom: 0; }
.mkfp__pop .mkdd__lbl {
  display: block; margin: 0 0 7px;
  font: 600 9.5px/12px var(--md-font); letter-spacing: .14em;
  text-transform: uppercase; color: var(--md-on-surface-variant);
}

/* AS FICHAS. Cada opção — link (unidade) ou caixa (setor) — vira uma ficha
   arredondada. Selecionada ganha o container tonal, nunca cor cheia. */
.mkfp__pop [data-mkdd-panel],
.mkfp__pop [data-mkdd-panel][hidden] { display: flex !important; flex-wrap: wrap; gap: 7px; }
.mkfp__pop .mkdd__opt {
  display: inline-flex !important; align-items: center; gap: 7px;
  min-height: 34px; padding: 0 14px !important; margin: 0 !important;
  border: 1px solid var(--md-outline-variant) !important;
  border-radius: var(--md-shape-full) !important;
  background: var(--md-surface) !important;
  color: var(--md-on-surface) !important;
  font: 500 12.5px/1 var(--md-font) !important;
  cursor: pointer; white-space: nowrap; width: auto !important;
}
.mkfp__pop .mkdd__opt:hover { background: var(--md-surface-container) !important; }
.mkfp__pop .mkdd__opt.is-sel,
.mkfp__pop .mkdd__opt:has(input:checked) {
  background: var(--md-secondary-container) !important;
  color: var(--md-on-secondary-container) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}
/* A caixa de seleção sai de cena: a própria ficha mostra o estado. */
.mkfp__pop .mkdd__opt--check input[type="checkbox"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.mkfp__pop .mkdd__sep { flex: 1 0 100%; height: 1px; background: var(--md-outline-variant); margin: 4px 0; }
.mkfp__pop .mkdd__actions { flex: 1 0 100%; display: flex; gap: 8px; margin-top: 4px; }
/* O resumo "Filtrando por…" fica no fim do popup, não na linha de cima. */
.mkfp__pop .fltx-active { flex: 1 0 100% !important; order: 99; margin: 0 !important; }

/* ------------------------------- 21.3 o filtro de data dentro do popup */

/* O grupo de data tem fichas de atalho (links) e um intervalo aberto. As fichas
   usam o mesmo estilo das outras; aqui só o formulário do intervalo. */
.mkfp__pop .mkdd--data .mkdd__panel--data { flex-direction: row; }
.mkfp__pop .mkdd__data {
  flex: 1 0 100%;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--md-outline-variant);
}
.mkfp__pop .mkdd__data-l {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 11.5px/1 var(--md-font); color: var(--md-on-surface-variant);
}
.mkfp__pop .mkdd__data-l input[type="date"] {
  height: 34px !important; min-height: 0 !important;
  padding: 0 10px !important;
  border: 1px solid var(--md-outline) !important;
  border-radius: var(--md-shape-sm) !important;
  background: var(--md-surface) !important;
  font: 500 12px/1 var(--md-font) !important;
  color: var(--md-on-surface) !important;
  box-shadow: none !important;
}
.mkfp__pop .mkdd__data-b {
  height: 34px; padding: 0 16px; border: 0;
  border-radius: var(--md-shape-full);
  background: var(--md-primary); color: var(--md-on-primary);
  font: 600 12px/1 var(--md-font); cursor: pointer;
}
.mkfp__pop .mkdd__data-b:hover { filter: brightness(1.06); }


/* ============================================================================
   22. TRAVA DE SEGURANCA — SVG SEM TAMANHO NA BARRA DE CIMA

   Um <svg> sem width/height e sem CSS cai no tamanho padrao de substituicao do
   navegador: 300x150px. Foi assim que a barra de cima estourou quando o JS
   moveu botoes de tela (que tinham o tamanho do icone escopado no bloco da
   tela) para dentro dela. O JS nao move mais nada, mas um navegador com o JS
   antigo em cache faria o mesmo estrago; esta trava impede que aconteca de
   novo, sem encolher icone que ja tenha tamanho proprio.
   ========================================================================== */
#main > header.make-header svg { max-width: 22px; max-height: 22px; }
#main > header.make-header .mkhdr__acoes { display: inline-flex; align-items: center; gap: 8px; }
#main > header.make-header .mkhdr__acoes svg { width: 18px; height: 18px; flex: none; }


/* ============================================================================
   23. AS TRES TELAS FORA DE ESQUADRO — INICIO, MAPA E DASHBOARD

   Medido nas seis telas (topo do cabecalho e recuo do titulo, ja com a
   animacao de entrada terminada):

     Chamados / Estoque / Preventiva   cabecalho a 20px da borda, titulo a 39
     Inicio / Dashboard                cabecalho a 22px, 10px mais abaixo
     Mapa                              titulo a 103px

   Causa 1 (Inicio e Dashboard): as duas embrulham a tela em
   `.make-dash > .make-dash-inner`, e esses dois nos somam `padding: 4px 0 24px`
   + `6px 2px 48px`. Ou seja, 10px em cima e 2px na esquerda A MAIS que as
   telas de manutencao, e 72px extra embaixo dos 72 que o `#content` ja tem.
   Quem manda no espacamento da pagina e a secao 21; o embrulho decorativo nao
   tem por que opinar.

   Causa 2 (Mapa): o cabecalho do mapa tem um icone de 44px antes do titulo, e
   era ele que jogava o titulo para 103px. O dono pediu alinhamento igual ao
   resto, entao o icone sai do cabecalho (o chip de contagem e a linha de
   apoio ficam).
   ========================================================================== */
#content > .make-dash { padding: 0 !important; }
#content > .make-dash > .make-dash-inner {
  padding: 0 !important;
  /* `.make-dash` é flex: sem isto o miolo fica com a largura do CONTEÚDO
     (medido: 1085px dentro de 1430) e a Início nasce mais estreita que as
     outras telas. */
  width: 100% !important;
  align-self: stretch !important;
  /* O `max-width: 1200px` do make-admin.css deixava Início e Dashboard mais
     ESTREITAS que o resto do sistema em tela larga (o mapa vai até 1480). A
     largura da página tem uma dona só: a §21, no `#main #content`. */
  max-width: none !important;
}

#content .mpa-head .mpa-head__ico { display: none !important; }


/* ============================================================================
   24. TOPO DA GAVETA — TENTATIVA DESFEITA

   Tentei costurar o cartão do usuário e a busca num bloco único (cartão com
   raio só em cima, campo colado embaixo com um fio entre eles). Na tela ficou
   ruim: leu como dois pedaços mal encaixados, com costura à vista. O dono viu
   e mandou jogar fora — e está certo.

   O que vale agora é o padrão: cartão do usuário e, logo abaixo, o campo de
   busca inteiro (pílula de 48px) na mesma margem de 12px. Fica "junto do
   perfil" sem inventar emenda.

   O que NÃO volta é a lupa que expandia (§19.21): o dono já reprovou.
   ========================================================================== */

/* ============================================================================
   25. O POPUP DE FILTRO, COMPACTO — E UM CALENDÁRIO DE VERDADE

   Como estava: uma coluna de ~700px de altura, fichas uma por linha, DOIS
   botões "Aplicar" e dois campos de data nativos empilhados. O dono viu e
   resumiu: "olha que horrível. Junta os filtros de forma compacta e bota um
   objeto de calendário".

   Como fica: painel de 400px, Unidade e Setor lado a lado, "Preventiva vence"
   ocupando a linha inteira com as fichas de atalho em linha e a grade do mês
   abaixo, e UM rodapé com Limpar + Aplicar. Os dois Aplicar internos saem de
   cena (quem envia é o rodapé — ver initFiltrarPopup).
   ========================================================================== */

.mkfp__pop {
  /* Duas colunas: escolhas à esquerda, data à direita. É o que faz o painel
     caber inteiro na tela — antes era uma coluna de 612px de altura, que
     rolava, com o painel do dropdown rolando DENTRO dela: as duas barras de
     rolagem que o dono viu ("dois scroll"). */
  width: 620px !important;
  max-width: calc(100vw - 32px) !important;
  /* Trava só como segurança (lista de lojas gigante); no uso normal o
     conteúdo cabe e nenhuma barra aparece. */
  max-height: min(82vh, 560px) !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 14px 0 !important;
}

/* MATA A ROLAGEM DE DENTRO. O painel do dropdown nasce com `max-height` e
   `overflow-y: auto` porque na barra ele é um menu flutuante. Dentro do popup
   ele é só uma lista de fichas — sem limite de altura e sem barra própria. */
.mkfp__pop [data-mkdd-panel],
.mkfp__pop [data-mkdd-panel][hidden] {
  max-height: none !important;
  overflow: visible !important;
  box-shadow: none !important;
}

/* Coluna 1: Unidade em cima, Setor embaixo. Coluna 2: a data, ocupando as
   duas linhas. */
.mkfp__pop .flt-bar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 272px;
  /* As duas colunas começam na MESMA linha de cima. Sem isto, a coluna da
     data (mais alta, porque tem o calendário) esticava as linhas do grid e
     jogava "Unidade" e "Setor" para longe uma da outra, cada bloco começando
     numa altura diferente — o desalinhamento que o dono viu. */
  align-content: start;
  align-items: start;
  justify-items: stretch;
  gap: 14px 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}
.mkfp__pop .flt-bar .mkdd { margin: 0 !important; min-width: 0; }
/* Esquerda: os grupos de escolha, empilhados com respiro igual. */
.mkfp__pop .mkfp__esq { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* Direita: a data, com a sua própria altura. */
.mkfp__pop .flt-bar > .mkdd--data {
  padding-left: 16px;
  border-left: 1px solid var(--md-outline-variant);
}

/* Fichas menores: o painel inteiro cabe sem rolagem na maioria das telas. */
.mkfp__pop .mkdd__opt {
  min-height: 30px !important;
  padding: 0 11px !important;
  font: 500 12px/28px var(--md-font) !important;
}
.mkfp__pop .mkdd__panel,
.mkfp__pop .mkdd__panel[hidden] { gap: 6px !important; }
.mkfp__pop .mkdd__lbl { margin-bottom: 6px !important; }

/* Os dois "Aplicar" internos e o rótulo dos campos nativos somem: o rodapé
   manda, e a data agora se escolhe no calendário. */
.mkfp__pop [data-mkdd-apply],
.mkfp__pop .mkdd__actions,
.mkfp__pop .mkdd__data-b,
.mkfp__pop .mkdd__data-l { display: none !important; }
.mkfp__pop .mkdd__data {
  margin: 10px 0 0 !important;
  padding: 0 !important;
  border-top: 0 !important;
  display: block !important;
}

/* --------------------------------- 25.1 o calendário */

.mkcal { display: block; }
.mkcal__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.mkcal__mes {
  font: 600 13px/1 var(--md-font); color: var(--md-on-surface);
  text-transform: capitalize;
}
.mkcal__nav {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: var(--md-shape-full);
  background: transparent; color: var(--md-on-surface-variant);
  cursor: pointer;
}
.mkcal__nav:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.mkcal__nav svg { width: 18px; height: 18px; }

.mkcal__sem,
.mkcal__grade { display: grid; grid-template-columns: repeat(7, 1fr); }
.mkcal__sem span {
  text-align: center;
  font: 600 10.5px/20px var(--md-font); letter-spacing: .06em;
  color: var(--md-on-surface-variant);
}
.mkcal__grade { gap: 2px; }
.mkcal__d {
  height: 30px;
  display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--md-shape-full);
  font: 500 12.5px/1 var(--md-font);
  color: var(--md-on-surface);
}
.mkcal__d:hover { background: color-mix(in srgb, var(--md-primary) 10%, transparent); }
.mkcal__d--fora { color: var(--md-outline); }
/* Hoje: só um anel, para não competir com a seleção. */
.mkcal__d--hoje { box-shadow: inset 0 0 0 1px var(--md-primary); }
.mkcal__d--meio {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-radius: 0;
}
.mkcal__d--ini, .mkcal__d--fim {
  background: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
  font-weight: 700;
}
.mkcal__d--ini { border-radius: var(--md-shape-full) 0 0 var(--md-shape-full); }
.mkcal__d--fim { border-radius: 0 var(--md-shape-full) var(--md-shape-full) 0; }
.mkcal__d--ini.mkcal__d--fim { border-radius: var(--md-shape-full); }
.mkcal__resumo {
  margin: 8px 0 0;
  font: 500 11.5px/16px var(--md-font);
  color: var(--md-on-surface-variant);
}

/* --------------------------------- 25.2 rodapé do popup */

.mkfp__pe {
  position: sticky; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 12px -14px 0; padding: 10px 14px;
  background: var(--md-surface-container-high);
  border-top: 1px solid var(--md-outline-variant);
}
.mkfp__limpar {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px;
  border-radius: var(--md-shape-full);
  font: 500 12.5px/1 var(--md-font); color: var(--md-primary);
  text-decoration: none;
}
.mkfp__limpar:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.mkfp__ok {
  min-height: 36px; padding: 0 20px; border: 0;
  border-radius: var(--md-shape-full);
  background: var(--md-primary); color: var(--md-on-primary);
  font: 600 13px/1 var(--md-font); cursor: pointer;
}
.mkfp__ok:hover { filter: brightness(1.06); }

@media (max-width: 700px) {
  .mkfp__pop { width: calc(100vw - 32px) !important; }
  .mkfp__pop .flt-bar { grid-template-columns: minmax(0, 1fr); }
  .mkfp__pop .flt-bar > .mkdd--data {
    padding-left: 0; border-left: 0;
    padding-top: 12px; border-top: 1px solid var(--md-outline-variant);
  }
}


/* ============================================================================
   26. BARRA DO TOPO VAZIA NÃO OCUPA ESPAÇO

   Com o "?" e o sino no Assistente e o título cedido para o cabeçalho da tela,
   em várias telas a barra do topo ficou sem um único controle visível: 64px de
   faixa entre o alto da janela e o conteúdo, do jeito que o dono viu ("pra que
   esse espaço ridículo do conteúdo e o topo? Sobe essa porcaria").

   Quem decide é o `initTopoVazio()` do make-admin.js: ele procura controle
   VISÍVEL dentro da barra e marca o body. Assim a faixa desaparece só onde
   está mesmo vazia — em tela estreita (botão da gaveta) ou onde o "voltar"
   subiu para ela, a barra continua no lugar.
   ========================================================================== */
body.mk-topo-vazio #main > header.make-header { display: none !important; }
/* Sem a barra, o conteúdo é o primeiro elemento da página: um respiro menor
   em cima basta (o de baixo continua o da §21). */
body.mk-topo-vazio #main #content { padding-top: 10px !important; }


/* ============================================================================
   27. O ITEM ATIVO DO MENU NÃO TEM BORDA

   Diagnóstico no navegador, não chute: quem desenhava a "bordinha verde" era
   `#nav-sidebar-apps ol li a.active { box-shadow: inset 3px 0 0 verde }` do
   make-admin.css (base histórica). Com o item em pílula de 16px e
   `overflow: hidden`, aquela barra de 3px acompanha a curva e lê como um anel
   em volta do item — foi isso que o dono mandou tirar duas vezes.

   O item ativo continua evidente pelo que o M3 usa: fundo tonal
   (`secondary-container`), ícone preenchido e peso da fonte. Sem contorno.
   ========================================================================== */
#page #nav-sidebar-apps ol li a,
#page #nav-sidebar-apps ol li a.active,
#page #nav-sidebar-apps ol li a[aria-current="page"],
#page #nav-sidebar a[aria-current="page"] {
  box-shadow: none !important;
  outline: none !important;
}


/* ============================================================================
   28. GAVETA ALINHADA · INTERRUPTOR DE TEMA · TÍTULO DE SEÇÃO

   28.1 O topo da gaveta estava com três recuos diferentes — medido: cartão do
   perfil em x=0, campo de busca em x=24 e item de menu em x=49. Agora os três
   partem da mesma margem de 12px e têm a mesma largura.

   28.2 O tema era três links sem marcação de qual estava valendo. Virou um
   interruptor com sol e lua (initTemaSwitch no make-admin.js); os três links
   ficam no HTML, escondidos, porque é o `switchTheme()` deles que grava a
   escolha.

   28.3 O título de seção da tela inicial vinha num branco fora da paleta
   (rgb(230,237,232)); passa a usar o papel `on-surface`.
   ========================================================================== */

/* --------------------------------- 28.1 recuo único no topo da gaveta */
#page #nav-sidebar-inner > div:nth-of-type(2) {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
#page #nav-sidebar-inner > div:nth-of-type(3) {
  margin-left: 12px !important;
  margin-right: 12px !important;
  padding: 0 !important;
}
#page #nav-sidebar-inner > div:nth-of-type(3) .mksrch-box:has(> #nav-filter),
#page #nav-sidebar-inner > div:nth-of-type(3) div:has(> #nav-filter) {
  width: 100% !important;
  margin: 0 !important;
}
/* O item de menu já vive dentro de `ol.px-6`; o -mx-3 dele devolve 12px. */
#page #nav-sidebar-apps ol { padding-left: 24px !important; padding-right: 24px !important; }

/* --------------------------------- 28.2 qual tema está selecionado

   Histórico: o unfold põe três links (Claro / Escuro / Sistema) e não marca o
   ativo — o dono não sabia em que tema estava. Tentei um interruptor: reprovado
   ("deixa só os ícones"). Tentei também remontar o grupo como controle
   segmentado, e aí quebrei o layout do menu (forcei `display: flex` num nó que
   não era o do grupo; o painel ficou de 181px com o conteúdo cortado).

   Aprendizado: aqui o layout é do unfold. A ÚNICA coisa que falta é marcar o
   escolhido — e é só isso que este bloco faz. Quem descobre qual está ativo é
   o `initTemaIcones()` (lê `localStorage.adminTheme`) e põe `.is-sel`.
   ========================================================================== */
body #page #nav-sidebar .mknu-menu .mktema-ic.is-sel {
  background: var(--md-secondary-container) !important;
  color: var(--md-on-secondary-container) !important;
  border-radius: var(--md-shape-sm) !important;
}
body #page #nav-sidebar .mknu-menu .mktema-ic.is-sel .material-symbols-outlined {
  font-variation-settings: 'FILL' 1;
}

/* --------------------------------- 28.3 título de seção na paleta */
#content .mkhome-sec__tt,
#content .mkdf-sec__tt { color: var(--md-on-surface) !important; }

/* Tela de primeiro nível (está no menu): nada de "voltar", e o conteúdo sobe.
   Quem marca o body é o initVoltarSoNasSubtelas. */
body.mk-sem-voltar #mk-voltar { display: none !important; }
body.mk-sem-voltar [data-mk-voltar] { display: none !important; }


/* ============================================================================
   29. MENU DA CONTA: SEM BORDA, INCLUSIVE NO HOVER

   O dono viu duas coisas: uma "bordinha passando" no menu da conta e uma borda
   PRETA que aparece ao passar o mouse. As duas vêm da base histórica
   (make-admin.css), que põe 1px em volta do menu e troca `border-color` no
   hover de qualquer `<a>`/`<div>` da gaveta. No M3 um menu se separa por TOM +
   sombra, nunca por contorno — então aqui a borda morre em todos os estados.

   Também esconde o grupo dos três links de tema do unfold: o `:has()` alcança
   o pai a partir do filho (o mesmo truque da §19.21, agora a favor).
   ========================================================================== */
body #page #nav-sidebar .mknu-menu,
body #page #nav-sidebar .mknu-menu:hover,
body #page #nav-sidebar .mknu-menu:focus-within {
  border: 0 !important;
  outline: 0 !important;
  /* Sem contorno, a separação tem de vir de TOM + SOMBRA, senão o menu lê como
     texto solto por cima do menu de navegação (era o que estava acontecendo:
     `surface-container-high` fica a 2 pontos do fundo da gaveta no escuro).
     Sobe um nível de tom e a sombra ganha corpo. */
  background: var(--md-surface-container-highest) !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3) !important;
  /* O menu vinha com z-index 50 e a LISTA DE NAVEGAÇÃO pintava por cima dele:
     dava a impressão de menu transparente, com os itens do menu de navegação
     atravessando o painel. Menu é a camada mais alta da gaveta. */
  z-index: 400 !important;
}
/* O pai precisa criar contexto de empilhamento para o z-index acima valer
   contra a lista, que vem depois no HTML. */
#page #nav-sidebar-inner > div:nth-of-type(2) { position: relative; z-index: 400; }
#page #nav-sidebar-apps { position: relative; z-index: 1; }
body #page #nav-sidebar .mknu-menu *,
body #page #nav-sidebar .mknu-menu *:hover,
body #page #nav-sidebar .mknu-menu *:focus,
body #page #nav-sidebar .mknu-menu *:focus-visible {
  border-color: transparent !important;
  outline: 0 !important;
}
/* O separador de verdade do menu é um fio de 1px em `outline-variant` — este
   fica, porque é ele que separa "Sair" do resto. */
body #page #nav-sidebar .mknu-menu hr,
body #page #nav-sidebar .mknu-menu [class*="border-t"] {
  border-top: 1px solid var(--md-outline-variant) !important;
}

/* Os três links de tema FICAM (o dono quer só os ícones) — a §28.2 os
   transforma em controle segmentado e marca o ativo. */

/* ============================================================================
   30. AGENDA DO TOPO — o objeto pequeno de calendário e o painel

   Pedido do dono: no lugar da faixa vazia, uma área de notificação no alto com
   calendário; sempre visível fica só o objeto pequeno (dia, data, hora), e o
   painel abre com avisos/solicitações à esquerda e o mês à direita — a
   referência que ele mandou foi a central de notificações do GNOME.

   Estrutura em `unfold/helpers/_agenda_topo.html`, comportamento em
   `initAgendaTopo()` (make-admin.js), dados em `/agenda/eventos/`.
   ========================================================================== */

.mkag { position: relative; }

/* --------------------------------- 30.1 o objeto pequeno

   Igual à referência: pílula discreta, uma linha, data e hora. Sem folhinha
   grande, sem contador — aviso não lido é um ponto de 5px. */
.mkag__btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 26px; padding: 0 12px;
  border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
  color: var(--md-on-surface);
  font-family: var(--md-font);
  cursor: pointer;
  transition: background var(--md-dur-short) var(--md-ease-standard);
}
.mkag__btn:hover { background: color-mix(in srgb, var(--md-on-surface) 14%, transparent); }
.mkag--aberto .mkag__btn {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.mkag__btn:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }

.mkag__data {
  font: 600 12px/1 var(--md-font);
  text-transform: capitalize;
}
.mkag__hora {
  font: 500 12px/1 var(--md-font);
  font-variant-numeric: tabular-nums;
  color: inherit;
  opacity: .85;
}
.mkag__ponto {
  width: 5px; height: 5px; flex: none;
  border-radius: 999px; background: #ff6b5e;
}

/* --------------------------------- 30.2 o painel */
/* A BARRA precisa de contexto de empilhamento próprio, senão o painel abre
   ATRÁS do conteúdo da página (foi o que aconteceu: o painel tinha z-index,
   mas a barra não criava camada e o `#content` pintava por cima). */
#main > header.make-header { position: relative; z-index: 600; }

.mkag__pop {
  /* `fixed` e não `absolute`: a barra é do topo da janela, o painel também —
   e assim nenhum `overflow` de ancestral pode cortá-lo. */
  position: fixed; top: 58px; right: 20px;
  z-index: 1200;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  width: 660px; max-width: calc(100vw - 32px);
  background: var(--md-surface-container-high);
  border-radius: var(--md-shape-lg);
  box-shadow: 0 18px 48px -8px rgba(0, 0, 0, .34), 0 4px 12px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.mkag__col { min-width: 0; padding: 14px; }
.mkag__col--cal {
  background: var(--md-surface-container);
  border-left: 1px solid var(--md-outline-variant);
}
.mkag__cab { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mkag__cab-t {
  font: 600 9.5px/12px var(--md-font); letter-spacing: .14em;
  text-transform: uppercase; color: var(--md-on-surface-variant);
}

/* Coluna dos avisos: a lista veio do sino, com as classes make-notif-*. */
.mkag__avisos { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }
.mkag__avisos .mkhdr__droptt { display: none; }
.mkag__avisos .make-notif-drop__head {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 0 0 8px;
  font: 500 11.5px/1 var(--md-font);
}
.mkag__avisos .make-notif-item,
.mkag__avisos .make-notif-fixa { border-radius: var(--md-shape-md); }

/* --------------------------------- 30.3 o calendário */
.mkag__hoje-lbl {
  margin: 0; font: 500 12px/16px var(--md-font);
  color: var(--md-on-surface-variant); text-transform: capitalize;
}
.mkag__hoje-data {
  margin: 0 0 10px; font: 700 16px/22px var(--md-font);
  color: var(--md-on-surface);
}
.mkag__nav { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mkag__mes {
  font: 600 12.5px/1 var(--md-font); color: var(--md-on-surface);
  text-transform: capitalize;
}
.mkag__nav-b {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--md-on-surface-variant); cursor: pointer;
}
.mkag__nav-b:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.mkag__nav-b svg { width: 17px; height: 17px; }

.mkag__sem, .mkag__grade { display: grid; grid-template-columns: repeat(7, 1fr); }
.mkag__sem { margin-top: 6px; }
.mkag__sem span {
  text-align: center; font: 600 10px/18px var(--md-font);
  letter-spacing: .06em; color: var(--md-on-surface-variant);
}
.mkag__grade { gap: 2px; transition: opacity var(--md-dur-short) var(--md-ease-standard); }
.mkag__grade.is-carregando { opacity: .45; }
.mkag__d {
  position: relative;
  height: 30px; display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer;
  border-radius: 999px;
  font: 500 12px/1 var(--md-font);
  font-variant-numeric: tabular-nums;
  color: var(--md-on-surface);
}
.mkag__d:hover { background: color-mix(in srgb, var(--md-primary) 10%, transparent); }
.mkag__d--fora { color: var(--md-outline); }
.mkag__d--hoje { box-shadow: inset 0 0 0 1.5px var(--md-primary); font-weight: 700; }
.mkag__d--sel {
  background: var(--md-primary) !important; color: var(--md-on-primary) !important;
  font-weight: 700;
}
/* Ponto embaixo do dia que tem evento — é o sinal do calendário do GNOME. */
.mkag__d--tem::after {
  content: ""; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 999px; background: var(--md-primary);
}
.mkag__d--sel.mkag__d--tem::after { background: var(--md-on-primary); }

/* --------------------------------- 30.4 lista do dia */
.mkag__dia-box {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--md-outline-variant);
}
.mkag__dia-t {
  margin: 0 0 6px; font: 600 9.5px/12px var(--md-font);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--md-on-surface-variant);
}
.mkag__dia-lista { display: grid; gap: 6px; max-height: 168px; overflow-y: auto; }
.mkag__vazio {
  margin: 0; font: 400 12px/17px var(--md-font); color: var(--md-on-surface-variant);
}
.mkag__ev {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 9px; border-radius: var(--md-shape-sm);
  background: var(--md-surface); color: var(--md-on-surface);
  text-decoration: none;
}
a.mkag__ev:hover { background: var(--md-surface-container-high); }
.mkag__ev-ic {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
}
.mkag__ev-ic svg { width: 13px; height: 13px; }
.mkag__ev--solicitacao .mkag__ev-ic { background: #ffdfd6; color: #7d2f18; }
.mkag__ev--chamado .mkag__ev-ic { background: #ffe6a8; color: #6b4c00; }
.mkag__ev-txt { display: grid; gap: 1px; min-width: 0; }
.mkag__ev-txt b {
  font: 600 12px/16px var(--md-font); color: var(--md-on-surface);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mkag__ev-txt em {
  font: 400 11px/14px var(--md-font); font-style: normal;
  color: var(--md-on-surface-variant);
}

@media (max-width: 760px) {
  .mkag__pop { grid-template-columns: minmax(0, 1fr); width: calc(100vw - 24px); }
  .mkag__col--cal { border-left: 0; border-top: 1px solid var(--md-outline-variant); }
  .mkag__txt { display: none; }
}


/* ============================================================================
   31. O CARTÃO DO USUÁRIO NÃO PASSA DA GAVETA

   Medido: o cartão ia de -12px a 299px numa gaveta de 0 a 288 — 12px para fora
   de cada lado, por causa do `-mx-3` do unfold. Como ele muda de tom no hover,
   o realce aparecia justamente fora do alinhamento de todo o resto ("borda
   escura passando do alinhamento do menu"). Zerando a margem negativa, o
   realce fica dentro da mesma coluna dos itens de menu.

   E a transição deixa de ser `all` (que animava tudo, inclusive a caixa) para
   ser só a cor de fundo, como manda a camada de estado do M3.
   ========================================================================== */
#page #nav-sidebar-inner > div:nth-of-type(2) > div.cursor-pointer,
#page #nav-sidebar-inner > div:nth-of-type(2) > div[role="button"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  transition: background-color var(--md-dur-short) var(--md-ease-standard) !important;
}


/* ============================================================================
   32. A MESMA BARRA DE FILTRO EM TODA TELA

   O dono viu o mapa com "Filtrar" + campo preenchido e a Tabela com dropdowns
   crus e um campo com moldura: "visões distintas". O `initFiltrarPopup` agora
   monta o popup em qualquer tela que tenha `.flt-bar` (o host é o PAI dela);
   aqui vem o acabamento comum das barras dessas telas — mesma linha, mesmo
   respiro, campo de busca preenchido e sem moldura, como no mapa.
   ========================================================================== */
#content .tbd-fbar,
#content .mnb-fbar,
#content .stl-fbar,
#content .mpa-fbar {
  display: flex !important;
  align-items: center;
  gap: 10px 12px;
  flex-wrap: wrap;
  margin: 0 0 16px !important;
  padding: 10px 12px !important;
  background: var(--md-surface) !important;
  border: 1px solid var(--md-outline-variant) !important;
  border-radius: var(--md-shape-lg) !important;
}

/* Campo de busca dessas telas: pílula preenchida, sem moldura própria — era a
   "bordinha sobrepondo o campo" que o dono já tinha mandado tirar no mapa. */
/* DOIS IDS AQUI, e `min-height` explícito, por dois motivos medidos:
   · o `<style>` da própria tela tem `#main .tbd-fbar .mapa__busca-input` — mesma
     força da minha regra com um id, e ele vem depois no documento, então
     ganhava e devolvia a moldura de 1px ao campo;
   · a caixa tinha `min-height: 48px` de outra regra, e `min-height` vence
     `height` — o campo ficava 40 dentro de uma casca de 48. */
#main #content .tbd-fbar .mapa__busca,
#main #content .mnb-fbar .mapa__busca,
#main #content .stl-fbar .mapa__busca,
#main #content .mpa-fbar .mapa__busca,
#main #content .mps-fbar .mapa__busca,
#main #content .mpf-fbar .mapa__busca {
  flex: 1 1 320px;
  min-width: 0;
  display: flex !important;
  align-items: center;
  gap: 8px;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  background: var(--md-surface-container) !important;
  border: 0 !important;
  border-radius: var(--md-shape-full) !important;
  box-shadow: none !important;
}
#main #content .tbd-fbar .mapa__busca-input,
#main #content .mnb-fbar .mapa__busca-input,
#main #content .stl-fbar .mapa__busca-input,
#main #content .mpa-fbar .mapa__busca-input,
#main #content .mps-fbar .mapa__busca-input,
#main #content .mpf-fbar .mapa__busca-input {
  flex: 1 1 auto; min-width: 0;
  height: 42px !important; min-height: 42px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; outline: none !important;
  font: 400 13.5px/42px var(--md-font) !important;
  color: var(--md-on-surface) !important;
}
#content .tbd-fbar .mapa__busca-ico svg,
#content .mnb-fbar .mapa__busca-ico svg,
#content .stl-fbar .mapa__busca-ico svg,
#content .mpa-fbar .mapa__busca-ico svg { width: 19px; height: 19px; }

/* O período de compra vai para dentro do popup (o JS o move): lá ele é uma
   linha do grupo, não uma faixa própria na tela. */
.mkfp__pop .tab-periodo {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 12px 0 0; padding: 10px 0 0;
  border-top: 1px solid var(--md-outline-variant);
}
.mkfp__pop .tab-periodo__lbl {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 9.5px/12px var(--md-font); letter-spacing: .14em;
  text-transform: uppercase; color: var(--md-on-surface-variant);
  flex: 1 0 100%;
}
.mkfp__pop .tab-periodo input[type="date"] {
  height: 34px !important; min-height: 0 !important; padding: 0 10px !important;
  border: 1px solid var(--md-outline) !important;
  border-radius: var(--md-shape-sm) !important;
  background: var(--md-surface) !important;
  font: 500 12px/1 var(--md-font) !important;
  color: var(--md-on-surface) !important;
}
.mkfp__pop .tab-periodo__btn {
  height: 34px; padding: 0 16px; border: 0;
  border-radius: var(--md-shape-full);
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  font: 600 12px/1 var(--md-font); cursor: pointer;
}


/* ============================================================================
   33. A BARRA DO TOPO FICA INVISÍVEL E A AGENDA VAI PARA O CENTRO

   Pedido do dono: "centraliza e tira essa merda de barra escura". A faixa do
   topo tinha fundo próprio (mais escuro que a página) e o objeto do calendário
   estava encostado à direita. Na referência que ele mandou o relógio fica no
   MEIO do topo — e a barra não existe como faixa, só o objeto.

   Então: barra sem fundo, sem borda e sem sombra; a agenda é posicionada no
   centro da barra (a barra é `position: relative` desde a §30.2) e o painel
   abre centralizado embaixo dela.
   ========================================================================== */
#main > header.make-header,
#main > header.make-header .mkhdr__in,
#main > header.make-header #header-inner {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* O objeto do calendário no centro do topo. */
#main > header.make-header .mkag {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.mkag__pop {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
@media (max-width: 760px) {
  .mkag__pop { left: 12px; right: 12px; transform: none; width: auto; }
}


/* ============================================================================
   34. AVISO SE SEPARA POR TOM, NUNCA POR FIO

   O dono é explícito e já disse isto três vezes hoje, em contextos diferentes:
   fio fininho em volta de bloco para "destacar" irrita. Os cartões de aviso
   herdavam `border` da base histórica (make-admin.css). Dentro do painel da
   agenda eles passam a se separar por SUPERFÍCIE (um tom acima do painel) e
   por espaço — que é o jeito do M3.
   ========================================================================== */
.mkag__avisos .make-notif-item,
.mkag__avisos .make-notif-fixa,
.mkag__avisos .make-notif-row,
.mkag__avisos [class*="border"] {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
}
.mkag__avisos .make-notif-item,
.mkag__avisos .make-notif-fixa {
  background: var(--md-surface) !important;
  border-radius: var(--md-shape-md) !important;
  padding: 10px 12px !important;
}
.mkag__avisos .make-notif-row + .make-notif-row,
.mkag__avisos .make-notif-fixa + .make-notif-row,
.mkag__avisos .make-notif-row + .make-notif-fixa,
.mkag__avisos .make-notif-fixa + .make-notif-fixa { margin-top: 8px; }
.mkag__avisos a.make-notif-item:hover { background: var(--md-surface-container) !important; }
/* Os botões de decidir continuam cheios (é ação), mas sem contorno. */
.mkag__avisos .make-notif-ok,
.mkag__avisos .make-notif-no { border: 0 !important; }


/* ============================================================================
   35. TEXTO ESCURO EM BOTÃO LIMA — SEM EXCEÇÃO

   Bug que o dono viu ("se o botão é verde claro, o texto dentro não pode ser
   claro"): o botão da tela inicial ficava com texto quase branco sobre lima.
   Medido: quem ganhava era `.mkhome a { color: inherit }` — (0,1,1), uma
   TYPE a mais que `.mkhome-head__cta` (0,1,0) — então o botão herdava a tinta
   clara da tela em vez da própria.

   O padrão `.bloco a { color: inherit }` está em quase toda tela do sistema, e
   quase toda tela tem um botão `--ok` em lima: o problema é estrutural, não
   daquela tela. Esta regra fecha a questão para todos, inclusive o
   `-webkit-text-fill-color`, que é o que o Chrome usa para pintar o glifo.
   ========================================================================== */
#main #content .mkhome-head__cta,
#main #content .mkdf-head__cta,
#main #content .mpa-btn--brand,
#main #content .agx-btn--ok,
#main #content .ak-btn--ok,
#main #content .ea-btn--ok,
#main #content .ed-btn--ok,
#main #content .grpx-btn--ok,
#main #content .mov-btn--ok,
#main #content .oc-btn--ok,
#main #content .rea-btn--ok,
#main #content .tf-btn--ok,
#main #content .tp-btn--ok,
#main #content .tpc-btn--ok,
#main #content .vc-btn--ok,
#main #content .pvx-btn--ok,
#main .tr-modal__btn--aut,
#main input[type="submit"],
#main .button.default {
  color: var(--md-on-action) !important;
  -webkit-text-fill-color: var(--md-on-action) !important;
}
/* Ícone e span dentro do botão seguem a mesma tinta. */
#main #content .mkhome-head__cta *,
#main #content .mpa-btn--brand *,
#main #content .oc-btn--ok *,
#main #content .pvx-btn--ok *,
#main #content [class$="-btn--ok"] * {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}


/* ============================================================================
   36. LUPA E TEXTO NO MESMO CAMPO, SEM SE ATROPELAR

   A §32 zerou o padding do input para casar a altura, e nas telas onde a lupa
   é `position: absolute` (o `_mapa_busca.html` a põe a 14px da borda) o texto
   passou a correr POR BAIXO do ícone — "Buscar por nº de série" começava
   atrás da lupa. O dono viu e mandou tirar a lupa ou empurrar o texto.

   Correção pela estrutura: dentro da pílula a lupa deixa de ser absoluta e
   vira item do flex, então o `gap` da casca é que separa ícone e texto. Não
   sobra ninguém posicionado por cima de ninguém.
   ========================================================================== */
#main #content .tbd-fbar .mapa__busca-ico,
#main #content .mnb-fbar .mapa__busca-ico,
#main #content .stl-fbar .mapa__busca-ico,
#main #content .mpa-fbar .mapa__busca-ico,
#main #content .mps-fbar .mapa__busca-ico,
#main #content .fu-busca > svg,
#main #content .fu-busca > span,
#main #content .tp-busca > svg,
#main #content .tp-busca > span,
#main #content .grpx-busca > svg,
#main #content .grpx-busca > span,
#main #content .agx-busca > svg,
#main #content .agx-busca > span,
#main #content .tab-acoes__busca > svg,
#main #content .tab-acoes__busca > span,
#main #content .mkfp ~ .mapa__busca .mapa__busca-ico {
  position: static !important;
  transform: none !important;
  left: auto !important;
  flex: none;
  display: inline-flex;
  align-items: center;
}
/* O "×" de limpar continua no canto direito, mas encostado na borda interna
   da pílula em vez de flutuar sobre o texto. */
#main #content .mapa__busca .mapa__busca-x {
  position: static !important;
  transform: none !important;
  right: auto !important;
  flex: none;
  margin-left: 4px;
}

/* ============================================================================
   37. A TELA DE SCORE COM A MESMA BARRA DO MAPA

   O dono comparou as duas e apontou: "o menu tá diferente" (ele chama a faixa
   de filtro de menu). No mapa, Filtrar + busca + fichas de contagem vivem no
   MESMO cartão; na tela de score a legenda de desempenho ficava numa faixa
   solta embaixo, e a barra parecia outra coisa.

   Aqui a legenda entra no cartão da barra, como as fichas do mapa.
   ========================================================================== */
#main #content .mps-fbar { flex-wrap: wrap; }
#main #content .mps-leg {
  margin: 0 0 16px !important;
  padding: 10px 14px !important;
  background: var(--md-surface) !important;
  border: 1px solid var(--md-outline-variant) !important;
  border-radius: var(--md-shape-lg) !important;
}
#main #content .mps-leg__i {
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--md-shape-full);
  background: var(--md-surface-container);
}


/* ============================================================================
   38. A TABELA DO ADMIN VOLTA A TER MOLDURA

   Estado que o dono viu no Log de acesso: as linhas horizontais atravessavam a
   tela e a tabela não fechava nas laterais — "cadê as linhas laterais da
   tabela?". Medido: `#result_list` com `border: 0` (a camada M3 zerou) e as
   células só com `border-bottom`, dentro de um `.tab-wrap` também sem borda.

   Aqui o QUADRO volta no invólucro (que é quem tem o raio e a rolagem
   horizontal), e a última linha perde o filete de baixo para o desenho fechar
   limpo no canto arredondado. Nada de régua vertical entre colunas: no M3 a
   coluna se separa por espaço, e é o contorno que faltava.
   ========================================================================== */
#main #content .tab-wrap,
#main #content .mkclr-wrap,
#main #content .results {
  border: 1px solid var(--md-outline-variant) !important;
  border-radius: var(--md-shape-md) !important;
  overflow: hidden auto;
}
/* Rolagem horizontal continua possível quando a tabela é larga. */
#main #content .tab-wrap { overflow-x: auto; }

#main #content #result_list,
#main #content table.result-list {
  border: 0 !important;
  border-radius: 0 !important;
}
/* O filete da ÚLTIMA linha da lista sai (quem fecha embaixo é a moldura) —
   mas atenção ao alvo: o unfold renderiza UM <tbody> POR LINHA (51 tbodies
   nesta tela), então `tbody tr:last-child` pega TODAS as linhas e apagava a
   divisória inteira da lista. O alvo certo é a última linha do ÚLTIMO tbody. */
#main #content #result_list > tbody:last-of-type > tr:last-child > td,
#main #content #result_list > tbody:last-of-type > tr:last-child > th,
#main #content table.result-list > tbody:last-of-type > tr:last-child > td {
  border-bottom: 0 !important;
}
/* Cabeçalho separado do corpo por um filete só, na cor do sistema. */
#main #content #result_list thead th {
  border-bottom: 1px solid var(--md-outline-variant) !important;
}

/* --------- 38.1 divisórias da lista bem mais visíveis

   O dono pediu duas vezes mais opacidade: primeiro subi o token
   `outline-variant` (#2b332d → #3a443d), e ainda ficou fraco NESTA tela, que é
   uma grade densa — linha fina em fundo escuro some quando há 20 linhas
   seguidas. Aqui a lista passa a usar o papel `outline` (o forte: #7d8a80 no
   escuro) com 60% para o fio da linha e cheio na moldura. É escopado na lista
   do admin de propósito: cartão continua com o fio discreto. */
/* Moldura e filete do cabeçalho no tom INTERMEDIÁRIO. O `outline` cheio
   (#7d8a80) ficou berrante numa grade densa; o `outline-variant` (#3a443d,
   já reforçado nesta rodada) é o ponto em que a tabela fecha sem gritar. */
#main #content .tab-wrap,
#main #content .mkclr-wrap,
#main #content .results {
  border-color: var(--md-outline-variant) !important;
}
/* MESMO fio do cartão que fica acima da tabela (o da busca + Filtros): o dono
   apontou esse como a régua — "deixa igual a essa". Então a lista usa o mesmo
   `outline-variant`, sem token próprio. Um fio só no sistema todo. */
body #main #content #result_list tbody > tr > td,
body #main #content #result_list tbody > tr > th,
body #main #content table.result-list tbody > tr > td {
  border-bottom: 1px solid var(--md-outline-variant) !important;
}
#main #content #result_list thead th {
  border-bottom-color: var(--md-outline-variant) !important;
}


/* ============================================================================
   39. FORA O "CAMINHO" NO ALTO DAS TELAS DE ADMINISTRAÇÃO

   Duas coisas que o dono mandou tirar ("mostrando o caminho. Tira isso
   agora!"):

   · `ul.toplinks` — a navegação por data do Django (`date_hierarchy`), que
     imprime "← 2026 · 3 de Setembro · 4 de Setembro" acima da lista. O
     filtro por data continua existindo no painel "Filtros", que é onde se
     procura por isso;
   · `nav.mkhdr__trail` — a trilha "Início · Axes" na barra do topo. O título
     da tela já diz onde a pessoa está, e a barra agora é o lugar da agenda.

   Some por CSS, de propósito: `date_hierarchy` é opção de cada ModelAdmin e
   `mkhdr__trail` é parcial do unfold — apagar nos 20+ arquivos correria risco
   de quebrar tela por tela.
   ========================================================================== */
#main #content ul.toplinks,
#main #content .xfull:has(> ul.toplinks) { display: none !important; }
#main > header.make-header nav.mkhdr__trail,
#main > header.make-header .mkhdr__trail { display: none !important; }

/* SEM TEXTO NENHUM na barra do topo — o dono foi categórico: "quero texto
   nenhum alí. Nenhum. De todas as telas de ADMINISTRAÇÃO". Nas telas próprias
   o título já vive no cabeçalho-cartão da própria tela; nas telas do admin o
   nome está na aba do navegador e no item marcado do menu. A barra fica só
   com o que é controle: gaveta, voltar, agenda e o "+" de adicionar. */
#main > header.make-header h1 { display: none !important; }

/* (Histórico) O "caminho" das telas de administração é o PRÓPRIO h1 do unfold:
   `h1 > a(app) + span(chevron) + a(tela)`. Escondendo o h1 inteiro a tela
   ficaria sem nome, então sai só o caminho — o app e a setinha — e fica o
   último pedaço, que é o nome da tela. */
#main > header.make-header h1 > a:not(:last-of-type),
#main > header.make-header h1 > span.material-symbols-outlined {
  display: none !important;
}
#main > header.make-header h1 > a:last-of-type {
  font: 600 19px/26px var(--md-font) !important;
  letter-spacing: 0 !important;
  color: var(--md-on-surface) !important;
}


/* ============================================================================
   40. O FILTRO DO ADMIN VIRA POPUP COMPACTO

   O que o dono viu ("cliquei em filtros e olha o que apareceu... feião, um
   popup gigante"): na largura dele o unfold troca de comportamento. O
   `change_list_filter_vertical.html` marca o painel com `2xl:block!` +
   `2xl:relative` — a partir de 1536px ele deixa de ser sobreposto e vira uma
   COLUNA fixa da página, sempre aberta, empurrando a lista. O `display: block
   !important` do Tailwind vence até o `x-show` do Alpine, então nem fechar
   fechava.

   Aqui o painel volta a ser o que o botão promete: um popup ancorado à
   direita, com véu atrás, altura máxima e rolagem própria — em qualquer
   largura. O truque do estado fechado é o seletor de atributo: o Alpine
   escreve `style="display: none"` no nó, e é só nesse caso que forçamos none.
   ========================================================================== */
@media (min-width: 1536px) {
  #changelist-filter[style*="display: none"] { display: none !important; }
}
#changelist-filter {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1100 !important;
  display: flex;
  background: color-mix(in srgb, #000 42%, transparent) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
/* O painel em si (o irmão do "clique fora"). */
#changelist-filter > div:not(#changelist-filter-close) {
  margin: 16px 16px 16px auto !important;
  width: 340px !important;
  max-width: calc(100vw - 32px) !important;
  height: auto !important;
  max-height: calc(100vh - 32px) !important;
  position: static !important;
  background: var(--md-surface-container-high) !important;
  border: 0 !important;
  border-radius: var(--md-shape-lg) !important;
  box-shadow: 0 18px 48px -8px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.2) !important;
  overflow: hidden !important;
}
/* Cabeçalho de cada grupo em overline, opções como linha de 34px — a mesma
   linguagem do popup "Filtrar" das telas próprias. */
#changelist-filter h3,
#changelist-filter .filter-title {
  margin: 0 0 6px !important;
  font: 600 9.5px/13px var(--md-font) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--md-on-surface-variant) !important;
}
#changelist-filter ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#changelist-filter li { margin: 0 !important; }
#changelist-filter li a {
  display: flex; align-items: center;
  min-height: 34px; padding: 0 12px !important;
  border: 0 !important;
  border-radius: var(--md-shape-sm) !important;
  font: 500 12.5px/1 var(--md-font) !important;
  color: var(--md-on-surface) !important;
}
#changelist-filter li a:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent) !important; }
#changelist-filter li.selected a,
#changelist-filter li a.selected {
  background: var(--md-secondary-container) !important;
  color: var(--md-on-secondary-container) !important;
}


/* ============================================================================
   41. HOVER DA LINHA: UMA FAIXA SÓ, SEM COSTURA

   O que o dono viu ("feiosooo"): ao passar o mouse, a linha ganhava um bloco
   escuro que começava depois da coluna do checkbox — a célula de ação tem
   fundo próprio e o realce só valia para as outras. Dava a impressão de dois
   pedaços de linha, com emenda no meio.

   Aqui o realce é aplicado a TODAS as células da linha (td e th, inclusive a
   do checkbox) com o mesmo tom, e nenhuma célula pinta fundo por conta
   própria fora do hover. Token literal em vez de `color-mix()` pelo mesmo
   motivo da §38.1: `color-mix` já foi descartado neste arquivo e o valor caiu
   para `currentColor`.
   ========================================================================== */
body #main #content #result_list tbody > tr > td,
body #main #content #result_list tbody > tr > th {
  background: transparent !important;
}
body #main #content #result_list tbody > tr:hover > td,
body #main #content #result_list tbody > tr:hover > th {
  background: var(--mk-hover-lista) !important;
}
/* Cabeçalho da lista mantém o tom de cartão; o hover dele não muda nada. */
body #main #content #result_list thead th:hover { background: var(--md-surface-container) !important; }


/* ============================================================================
   42. FORMULARIOS DO ADMIN — barra de salvar encostada, sem "+" e sem vao

   Tres coisas que o dono apontou na tela de adicionar (loja e setor):

   1. O "+" continuava na barra do topo DENTRO da tela de adicionar: da para
      entrar em adicionar dentro de adicionar, sem fim. Quem marca a tela e o
      `initFormularioAdmin()` (CSS nao le URL).
   2. A barra de salvar parecia solta: medida, ela ia de 75px a 1195px enquanto
      o `#content` vai de 16 a 1254 — encaixada 59px para dentro, com vidro
      (backdrop-filter) e um fio branco de 8% em cima. Agora ela ocupa a
      largura do conteudo, em superficie tonal, com fio na cor do sistema e o
      raio de baixo do cartao do formulario.
   3. Campo com 122px de altura de linha: sobra vazia entre rotulo, campo e
      ajuda. Reduzido para ~96px sem apertar o alvo de toque (campo continua
      com 48px).
   ========================================================================== */

/* --- 1. sem "+" dentro do formulario ------------------------------------- */
body.mk-form-add #main > header a.addlink,
body.mk-form-add #main > header .addlink { display: none !important; }

/* --- 2. a barra de salvar ------------------------------------------------ */
/* O invólucro sticky: sem margem lateral. */
#main #content div:has(> div > div > button[name="_save"]) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* A faixa em si: superfície tonal, fio do sistema, raio de baixo. */
#main #content div:has(> div > button[name="_save"]) {
  margin: 0 !important;
  padding: 12px 16px !important;
  background: var(--md-surface-container) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-top: 1px solid var(--md-outline-variant) !important;
  border-radius: 0 0 var(--md-shape-lg) var(--md-shape-lg) !important;
  box-shadow: none !important;
}
/* Botões numa linha, o primário à direita (é o fim da leitura). */
#main #content div:has(> button[name="_save"]) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 0 !important;
}
/* "Salvar e adicionar outro" e "Salvar e continuar" são secundários: texto. */
#main #content button[name="_addanother"],
#main #content button[name="_continue"] {
  background: transparent !important;
  color: var(--md-primary) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}
#main #content button[name="_addanother"]:hover,
#main #content button[name="_continue"]:hover {
  background: color-mix(in srgb, var(--md-primary) 8%, transparent) !important;
}
#main #content button[name="_save"] {
  background: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
  border-radius: var(--md-shape-full) !important;
  padding: 0 24px !important;
  min-height: 40px !important;
  font-weight: 600 !important;
}

/* --- 3. a grade dos campos ---------------------------------------------- */
#main #content .form-row {
  border: 0 !important;
  padding: 12px 0 !important;
}
#main #content fieldset .form-row + .form-row { border-top: 0 !important; }
/* Rótulo, campo e ajuda com o respiro do sistema, sem vão. */
#main #content .form-row > div > label,
#main #content .form-row label {
  margin-bottom: 6px !important;
  font: 500 12.5px/16px var(--md-font) !important;
  letter-spacing: .2px !important;
  color: var(--md-on-surface-variant) !important;
}
#main #content .help,
#main #content .form-row .help,
#main #content [class*="help"] {
  margin-top: 5px !important;
  font: 400 11.5px/15px var(--md-font) !important;
  color: var(--md-on-surface-variant) !important;
}
/* Campo de texto curto não precisa de 900px: a largura segue o conteúdo. */
#main #content input[name$="uf"],
#main #content input[name$="cep"],
#main #content input[name$="telefone"],
#main #content input[name$="cnpj"],
#main #content input[type="number"] {
  max-width: 220px !important;
}


/* ============================================================================
   43. ALINHAMENTO GERAL — o que a auditoria achou repetido em 6+ telas

   Quatro agentes leram o sistema tela por tela. O que veio de concreto e cabe
   em CSS esta aqui, em UM bloco no fim do arquivo com dois ids
   (`#main #content`): dois ids vencem o `!important` do make-admin.css E o
   `!important` dos `<style>` de tela, que vem depois no documento. Foi assim
   que a §21 e a §32 ganharam; um id so perde.
   ========================================================================== */

/* --------------------------------- 43.1 UM anel de foco, nao dois

   O dono mandou print da lupa com DOIS aneis verdes: o campo de busca ganhava
   o `outline` global do foco (§12) MAIS o `box-shadow`/`outline` do
   `:focus-within` da propria casca. Aqui fica um so, por dentro. */
#main #content .mapa__busca:focus-within,
#main #content .baia-colab__busca:focus-within,
#main #content .tab-acoes__busca:focus-within,
#main #content div:has(> input[type="search"]):focus-within,
#main #content #changelist-search:focus-within,
#main #content #changelist-search > div:focus-within {
  outline: 0 !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 2px var(--md-primary) !important;
}
#main #content .mapa__busca input:focus-visible,
#main #content .mapa__busca input:focus,
#main #content div:has(> input[type="search"]) input:focus-visible,
#main #content #changelist-search input:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

/* --------------------------------- 43.2 TODA tabela fecha com moldura

   A §38 pegou `.tab-wrap`, `.mkclr-wrap` e `.results`. A auditoria achou seis
   invólucros que ficaram fora e ainda declaram `border: 0` no `<style>` da
   tela — sem moldura nenhuma, ao contrário do resto do sistema. */
#main #content .agx-tbl,
#main #content .tf-tbl,
#main #content .tp-tbl,
#main #content .fu-tbl,
#main #content .pvtx-wrap,
#main #content .mkhome-tab,
#main #content .rgx-tbl-NAO-EXISTE-no-template {
  border: 1px solid var(--md-outline-variant) !important;
  border-radius: var(--md-shape-md) !important;
  overflow: hidden;
}

/* --------------------------------- 43.3 TODA barra de filtro é um cartão

   Cinco telas tinham a barra sem fundo e sem moldura (`padding: 0`, fundo
   transparente), então a busca ficava solta na página enquanto no mapa ela
   vive num cartão. */
#main #content .mps-fbar,
#main #content .mpf-fbar,
#main #content .tab-acoes,
#main #content .tp-bar,
#main #content .fu-bar,
#main #content .rgx-filtros {
  display: flex !important;
  align-items: center;
  gap: 10px 12px;
  flex-wrap: wrap;
  margin: 0 0 16px !important;
  padding: 10px 12px !important;
  background: var(--md-surface) !important;
  border: 1px solid var(--md-outline-variant) !important;
  border-radius: var(--md-shape-lg) !important;
}

/* --------------------------------- 43.4 A busca é a mesma pílula em todo lugar

   Três telas ainda desenhavam campo de 56px COM moldura (estoque, peças, fora
   de uso) e uma tinha `<input>` sem `type` para escapar das regras
   (grupo_detalhe). O dono já mandou tirar essa moldura duas vezes. */
#main #content .tab-acoes__busca,
#main #content .tp-busca,
#main #content .fu-busca,
#main #content .grpx-busca,
#main #content .agx-busca {
  flex: 1 1 300px;
  min-width: 0;
  display: flex !important;
  align-items: center;
  gap: 8px;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  background: var(--md-surface-container) !important;
  border: 0 !important;
  border-radius: var(--md-shape-full) !important;
  box-shadow: none !important;
}
#main #content .tab-acoes__busca input,
#main #content .tp-busca input,
#main #content .fu-busca input,
#main #content .grpx-busca input,
#main #content .agx-busca input,
#main #content #grpx-busca {
  flex: 1 1 auto; min-width: 0;
  height: 42px !important; min-height: 42px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  font: 400 13.5px/42px var(--md-font) !important;
  color: var(--md-on-surface) !important;
}

/* --------------------------------- 43.5 Hover de botão lima não inverte cor

   `.grpx-btn--ok:hover` e `.grpl-btn:hover` trocavam o fundo para
   `--md-primary` (verde escuro) mantendo a tinta escura da §35: texto escuro
   sobre fundo escuro, ilegível. O token de hover do lima já existe. */
#main #content [class$="-btn--ok"]:hover,
#main #content .grpl-btn:hover,
#main #content .cx-montar:hover,
#main #content .pvdlg__ok:hover {
  background: var(--md-action-hover) !important;
  color: var(--md-on-action) !important;
  -webkit-text-fill-color: var(--md-on-action) !important;
}
/* Os três `filled` que ficaram em `primary` enquanto o resto usa `action`. */
#main #content .cx-montar,
#main #content .pvdlg__ok,
#main #content .grpl-btn {
  background: var(--md-action) !important;
  color: var(--md-on-action) !important;
  -webkit-text-fill-color: var(--md-on-action) !important;
}

/* --------------------------------- 43.6 Rótulo, ajuda e obrigatório iguais

   Sete prefixos diferentes (`abr-`, `chd-`, `cxr-`, `tpc-`, `rea-`, `ea-`,
   `vc-`) com dois respiros diferentes. Tipografia já era a mesma; o que
   variava era o gap e a cor do asterisco.
   O `:not(.mkpro-field)` é obrigatório: `.mkpro-field` é a variante de rótulo
   flutuante da §16 e quebraria com `display: grid`. */
#main #content [class$="-field"]:not(.mkpro-field) { display: grid; gap: 5px; }
#main #content [class$="__lbl"],
#main #content [class$="-lbl"] {
  font: 500 12px/16px var(--md-font) !important;
  letter-spacing: .3px !important;
  text-transform: none !important;
  color: var(--md-on-surface-variant) !important;
}
/* EXCECAO: rotulo que e' CABECALHO DE FAIXA, nao rotulo de campo.
   Este seletor por sufixo foi escrito para o rotulo de formulario. Ele tambem
   alcanca `.ak-bar__lbl` ("Autorizada", na barra de filtro do kanban), que e'
   par do `.ak-col__tit` da coluna: os dois deveriam ler igual (11px, caixa
   alta), e a regra de cima deixava um em 12px sem caixa alta ao lado do outro
   em 11px maiusculo. Medido por um agente na tela de assistencia externa. */
#main #content .ak-bar__lbl {
  font: 500 11px/16px var(--md-font) !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
}
#main #content [class$="__help"],
#main #content [class$="-help"] {
  font: 400 11.5px/15px var(--md-font) !important;
  letter-spacing: .3px !important;
  color: var(--md-on-surface-variant) !important;
}
#main #content [class$="__req"],
#main #content [class$="-req"] { color: var(--md-error) !important; }

/* Lugar pronto para a mensagem de erro do campo (a view ainda precisa
   mandar a mensagem — CSS não inventa texto). */
#main #content .mk-erro {
  display: flex; align-items: flex-start; gap: 6px;
  font: 400 11.5px/15px var(--md-font) !important;
  color: var(--md-error) !important;
}
#main #content [aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px var(--md-error) !important;
}

/* --------------------------------- 43.7 Sem segundo container

   `ajuda.html` centrava o conteúdo num `max-width: 1180px` próprio, dentro do
   container de 1480px da §21 — duas larguras concorrendo. */
#main #content .ajuda { max-width: none !important; margin: 0 !important; }

/* --------------------------------- 43.8 Ficha da máquina: tom OU fio

   O `_zoom.html` desenhava oito sub-blocos com fundo tonal E fio de 1px ao
   mesmo tempo, com um hex solto (`--pz-line: #3d4f43`). Regra do dono: tom e
   espaço separam; fio é para fechar tabela e cartão. O fio externo da ficha
   fica; os internos saem. */
#main #content .mzx-pop .mzx-pop__corpo > div,
#main #content .mzx .mzx-bloco,
#main #content .mzx .mzx-cards > div { border-color: transparent !important; }


/* ============================================================================
   44. A MENSAGEM DA AÇÃO, DENTRO DO PAINEL DO TOPO

   Tinha um cartão de erro desenhado na própria página. Saiu: a regra do dono é
   que TODA notificação vive na área de cima. O que ficou aqui é o visual do
   cartão dentro daquele painel, com o nível dando a cor — e o painel abre
   sozinho quando o nível é erro ou aviso (initAgendaTopo).
   ========================================================================== */
.mkag__msg {
  padding: 10px 12px;
  border-radius: var(--md-shape-md);
  background: var(--md-surface);
  color: var(--md-on-surface);
  font: 500 12.5px/17px var(--md-font);
  letter-spacing: .2px;
}
.mkag__msg + .mkag__msg,
.mkag__msg + .make-notif-row,
.mkag__msg + .make-notif-fixa { margin-top: 8px; }
.mkag__msg--success { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.mkag__msg--warning { background: var(--md-tertiary-container, #fbeecd); color: var(--md-on-tertiary-container, #6b4c00); }
.mkag__msg--error { background: var(--md-error-container); color: var(--md-on-error-container); }

/* ============================================================================
   45. FORMULARIO DO ADMIN — o que a auditoria mediu, corrigido na raiz

   Um agente leu o form do unfold linha por linha e mediu cada defeito. O que
   segue e a correcao dele, na ordem do relatorio. Duas notas de cascata que
   valem para todo este bloco:

   · o `make-m3.css` carrega ANTES do Tailwind do unfold e ANTES do select2,
     entao aqui nada ganha por ordem: e por ID (2 ids resolvem tudo) ou por
     `!important` quando o outro lado tambem usa;
   · os tokens de vidro historicos (`--g-edge`, `--g-elev`, `--g-gloss`) foram
     neutralizados na §12 deste arquivo, o que deixou o cartao do formulario
     SEM contorno no claro e ainda de vidro com sombra no escuro. As regras
     abaixo repetem os mesmos seletores do make-admin.css para vencer com o
     arquivo posterior.
   ========================================================================== */

/* --------------------------------- 45.1 select2 do mesmo tamanho do campo

   `autocomplete_fields` nao renderiza `<select>`: renderiza select2, que
   nenhuma das tres folhas do projeto estilizava. Media: "nome" com 56px ao
   lado de "unidade" com 38px, na mesma linha. */
#main #content .select2.select2-container {
  min-height: 56px !important;
  border: 1px solid var(--md-outline) !important;
  border-radius: var(--md-shape-sm) !important;
  background: transparent !important;
  box-shadow: none !important;
}
#main #content .select2-container--admin-autocomplete .select2-selection--single {
  height: 54px !important;
  border: 0 !important;
  background: transparent !important;
}
#main #content .select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered {
  height: 54px !important;
  padding: 15px 16px !important;
  font: 400 14px/24px var(--md-font) !important;
  color: var(--md-on-surface) !important;
}
#main #content .select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow {
  height: 54px !important;
}

/* --------------------------------- 45.2 barra de salvar alinhada ao conteudo

   O `{% block footer %}` do unfold fica FORA do `#content`, entao a barra
   escapa da §21 e cai num `.container` proprio: media 16px mais estreita que
   os cartoes acima de 1280px, e 48px entre 1180 e 1279. */
#main #submit-row > div { padding-left: 0 !important; padding-right: 0 !important; }
#main #submit-row > div > div { max-width: none !important; width: 100% !important; }

/* --------------------------------- 45.3 a barra em superficie, sem vidro */
#main #submit-row > div {
  background: var(--md-surface-container) !important;
  border-top: 1px solid var(--md-outline-variant) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.dark #main #submit-row > div {
  background: var(--md-surface-container) !important;
  box-shadow: none !important;
}

/* --------------------------------- 45.4 os botoes da barra

   A §8 zera borda de todo `#main button[type="submit"]`, mas o preenchimento
   so alcanca `input[type=submit]` e `.button.default` — e o unfold monta a
   barra com `<button>`. Resultado: "Salvar" com o verde do Tailwind em vez do
   lima do sistema, e os secundarios sem contorno nenhum (texto solto no
   escuro). */
#main #submit-row button[name="_save"] {
  background: var(--md-action) !important;
  color: var(--md-on-action) !important;
  -webkit-text-fill-color: var(--md-on-action) !important;
  border-radius: var(--md-shape-full) !important;
  min-height: 40px !important;
  padding: 0 24px !important;
}
#main #submit-row button[type="submit"]:not([name="_save"]),
#main #submit-row a {
  background: transparent !important;
  border: 1px solid var(--md-outline) !important;
  color: var(--md-primary) !important;
  border-radius: var(--md-shape-full) !important;
  min-height: 40px !important;
}
#main #submit-row button[type="submit"]:not([name="_save"]):hover,
#main #submit-row a:hover {
  background: color-mix(in srgb, var(--md-primary) 8%, transparent) !important;
}

/* --------------------------------- 45.5 o cartao do fieldset volta a ter fio */
body.change-form #main .module {
  background: var(--md-surface) !important;
  border: 1px solid var(--md-outline-variant) !important;
  border-radius: var(--md-shape-lg) !important;
  box-shadow: none !important;
}
.dark body.change-form #main .module {
  background: var(--md-surface-container-low) !important;
  box-shadow: none !important;
}

/* --------------------------------- 45.6 fim da caixa dentro da caixa

   O `.form-rows` ganhava moldura + sombra DENTRO do `.module`, que ja tem
   24px de padding: 37px de folga antes do primeiro campo, dos dois lados. */
#main #content .form-rows {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#main #content .field-line { border: 0 !important; min-height: 0 !important; }

/* --------------------------------- 45.7 o botao "⋮" na altura do campo */
#main #content [x-ref^="relatedWidgetWrapper"] {
  height: 56px !important;
  width: 56px !important;
  border-radius: var(--md-shape-sm) !important;
  border-color: var(--md-outline-variant) !important;
}

/* --------------------------------- 45.8 o Assistente nao cobre o "Salvar"

   O FAB e `fixed; right: 20; bottom: 20; z-index: 9000`; a barra de salvar e
   sticky no rodape e o "Salvar" fica no extremo direito. So nestas telas os
   dois se cruzam. */
body.change-form #mkasst { bottom: 84px; }

/* --------------------------------- 45.9 cabecalho de grupo sem faixa verde

   `h-[38px]` fixo com 44px de conteudo dentro, hex cravado e maiuscula em
   peso 800 — fora da §5 (peso maximo 500 em rotulo, sem caixa alta). */
#main #content .module > h2 {
  background: transparent !important;
  border-left: 0 !important;
  padding: 0 0 12px !important;
  height: auto !important;
  text-transform: none !important;
  font: 500 15px/22px var(--md-font) !important;
  letter-spacing: .1px !important;
  color: var(--md-on-surface) !important;
}

/* --------------------------------- 45.10 respiro do rotulo (12px -> 4px) */
#main #content .field-line label { margin-bottom: 4px !important; }
#main #content .field-line > div:first-child { margin-bottom: 0 !important; }


/* ============================================================================
   46. LINHA SELECIONADA APARECE

   Efeito colateral da §41: para acabar com a emenda do hover, eu forcei
   `background: transparent` em TODA celula da lista — e levei junto o realce
   da linha SELECIONADA. O dono viu o rodape dizer "1 selecionado" sem
   conseguir ver qual linha era.

   Aqui a selecao volta, em `secondary-container` (o papel de "escolhido" do
   M3, o mesmo do item ativo do menu), e a caixinha de marcar ganha a cor da
   marca — antes era um check palido sobre fundo claro.
   ========================================================================== */
body #main #content #result_list tbody > tr:has(input[type="checkbox"]:checked) > td,
body #main #content #result_list tbody > tr:has(input[type="checkbox"]:checked) > th,
body #main #content #result_list tbody > tr.selected > td,
body #main #content #result_list tbody > tr.selected > th {
  background: var(--md-secondary-container) !important;
  color: var(--md-on-secondary-container) !important;
}
body #main #content #result_list tbody > tr:has(input[type="checkbox"]:checked) a,
body #main #content #result_list tbody > tr.selected a {
  color: var(--md-on-secondary-container) !important;
  font-weight: 600 !important;
}
/* A caixinha de marcar: alvo de 16px, na cor da marca, visível marcada ou não. */
#main #content #result_list input[type="checkbox"],
#main #content .action-checkbox-column input[type="checkbox"],
#main #content #action-toggle {
  width: 16px !important;
  height: 16px !important;
  min-height: 0 !important;
  padding: 0 !important;
  accent-color: var(--md-primary) !important;
  cursor: pointer;
}

/* A barra de ação em lote não fica atrás do Assistente. */
body.change-list #mkasst { bottom: 88px; }


/* ============================================================================
   47. A LISTA DO SELECT COM A CARA DO SISTEMA

   O dono abriu um `<select>` e viu o dropdown do WINDOWS: fundo branco, realce
   azul, fonte do sistema, cantos retos. CSS comum nao alcanca aquilo — a lista
   de `<option>` de um select nativo e desenhada pelo sistema operacional, fora
   da pagina.

   O que resolve e `appearance: base-select` (Chrome 135+; aqui roda 148, e o
   `CSS.supports` confirma). Ele passa o desenho do popup para o CSS SEM abrir
   mao do comportamento nativo: teclado, digitar para achar, toque no celular e
   envio do formulario continuam do navegador. Nada de recriar dropdown em JS,
   que e onde esse tipo de tela costuma quebrar.

   Tudo dentro de `@supports`: navegador antigo continua com o dropdown nativo,
   feio mas funcional — nunca sem lista.
   ========================================================================== */
@supports (appearance: base-select) {

  #main #content select:not([multiple]):not([size]),
  #main #content select:not([multiple]):not([size])::picker(select) {
    appearance: base-select;
  }

  /* --- o controle fechado: mantem a MESMA caixa de antes ---------------- */
  #main #content select:not([multiple]):not([size]) {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    font: 400 14px/20px var(--md-font);
    color: var(--md-on-surface);
    cursor: pointer;
    /* `base-select` transforma o controle num BOTAO flex, e botao encolhe para
       o conteudo: medido, o campo caiu de largura cheia para 34px. A largura
       tem de voltar explicitamente — este e o unico efeito colateral real da
       troca, e e aqui que ele morre. */
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* UMA linha. Com `base-select` o texto escolhido vai para dentro de um
       botao flex e QUEBRA quando e longo: medido, os quatro campos da tela de
       vincular saíram com 66, 66, 78 e 54px de altura. Campo do sistema tem
       altura fixa; texto que nao cabe corta com reticencias. */
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    white-space: nowrap;
    overflow: hidden;
  }
  #main #content select::selectedcontent {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* Select solto de barra de filtro nao deve esticar pela linha inteira. */
  #main #content .flt-bar select,
  #main #content .mapa-cargo select,
  #main #content .rgx-filtros select,
  #main #content .lgx-bar select,
  #main #content select[id$="-sel"] {
    width: auto;
    min-width: 160px;
  }
  /* A seta: `base-select` deixa de desenhar a nativa, entao ela vem daqui. */
  #main #content select:not([multiple]):not([size])::picker-icon {
    margin-left: auto;
    color: var(--md-on-surface-variant);
    transition: transform var(--md-dur-short) var(--md-ease-standard);
  }
  #main #content select:not([multiple]):not([size]):open::picker-icon { transform: rotate(180deg); }

  /* --- a lista: menu do M3 (tom + sombra, sem contorno) ---------------- */
  #main #content select:not([multiple]):not([size])::picker(select) {
    margin-top: 6px;
    padding: 6px;
    max-height: min(340px, 60vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--md-surface-container-high);
    border: 0;
    border-radius: var(--md-shape-md);
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .38), 0 2px 8px rgba(0, 0, 0, .2);
    /* Acompanha a largura do campo, como manda o menu do M3. */
    min-width: anchor-size(width);
  }

  #main #content select:not([multiple]):not([size]) option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: var(--md-shape-sm);
    background: transparent;
    color: var(--md-on-surface);
    font: 500 13.5px/20px var(--md-font);
    letter-spacing: .1px;
  }
  /* Camada de estado de 8%/12%, igual ao resto do sistema. */
  #main #content select:not([multiple]):not([size]) option:hover,
  #main #content select:not([multiple]):not([size]) option:focus {
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
    outline: 0;
  }
  #main #content select:not([multiple]):not([size]) option:active {
    background: color-mix(in srgb, var(--md-on-surface) 12%, transparent);
  }
  /* Escolhido: `secondary-container`, o mesmo papel do item ativo do menu. */
  #main #content select:not([multiple]):not([size]) option:checked {
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
    font-weight: 600;
  }
  /* O check que o navegador insere: vira o marcador do M3, a esquerda. */
  #main #content select:not([multiple]):not([size]) option::checkmark {
    order: -1;
    color: var(--md-primary);
  }
  #main #content select:not([multiple]):not([size]) option:not(:checked)::checkmark { visibility: hidden; }
  /* A primeira opcao costuma ser o "— escolha —": tinta de apoio. */
  #main #content select:not([multiple]):not([size]) option[value=""] { color: var(--md-on-surface-variant); }

  #main #content select:not([multiple]):not([size]) optgroup {
    padding: 8px 12px 4px;
    font: 600 9.5px/13px var(--md-font);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--md-on-surface-variant);
  }
}

/* A faixa do agente, agora DENTRO do painel de avisos: vira cartao, nao tarja.
   (O CSS antigo dela era de faixa de largura cheia no alto da pagina.) */
.mkag__avisos .agente-aviso {
  position: static !important;
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
  width: auto !important;
  margin: 0 0 8px !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: var(--md-shape-md) !important;
  background: var(--md-tertiary-container, #fbeecd) !important;
  color: var(--md-on-tertiary-container, #6b4c00) !important;
  font: 500 12px/16px var(--md-font) !important;
}
.mkag__avisos .agente-aviso__txt { flex: 1 1 auto; min-width: 0; }
.mkag__avisos .agente-aviso__btn {
  flex: none; margin-top: 6px;
  padding: 7px 12px !important; border-radius: var(--md-shape-full) !important;
  font: 600 11.5px/1 var(--md-font) !important;
}
.mkag__avisos .agente-aviso code { font-size: 11px; }

/* ============================================================================
   48. O FORMULÁRIO DO ADMIN, MEDIDO E APERTADO

   O dono viu o cadastro de autorizada e resumiu: "ridículo e mal feito" —
   cartões grandes com um campo dentro. Parte já foi (os grupos viraram pares
   por linha), e o resto é sobra de espaço, medida elemento por elemento nesta
   tela:

     .module   24px de padding   → 18px
     h2        34px + 16 margem  → 26px + 10
     .form-row 12px em cima/baixo→ 6px
     .field-line 10/12px         → 0/8px   (o padding lateral era do modo
                                            comprimido, que já saiu)
     textarea  270px de altura   → 120px   (era `rows` do Django, sem CSS)

   Total do grupo de uma linha: 218px → ~150px. Nada foi apertado além do
   alvo de toque: o campo continua com 52px.
   ========================================================================== */
body.change-form #main #content .module { padding: 18px !important; }
#main #content .module > h2 { padding: 0 0 10px !important; margin-bottom: 10px !important; }
#main #content .form-row { padding: 6px 0 !important; }
#main #content .field-line { padding: 0 8px !important; }
#main #content .field-line:first-child { padding-left: 0 !important; }
#main #content .field-line:last-child { padding-right: 0 !important; }
#main #content textarea {
  min-height: 120px !important;
  height: 120px !important;
  max-height: 240px;
  resize: vertical;
}
/* Campo booleano (o "Ativa") não precisa de 52px de caixa: é uma marca. */
#main #content .field-line input[type="checkbox"] {
  width: 18px !important; height: 18px !important;
  min-height: 0 !important; padding: 0 !important;
  accent-color: var(--md-primary) !important;
}


/* ============================================================================
   49. A FAIXA DO AGENTE DENTRO DO PAINEL DE AVISOS

   Ela foi desenhada para ser uma TARJA LARGA no alto da tela: `display: flex`
   em uma linha (ícone | texto | "Baixar agente" | ×), com o botão em
   `flex: 0 0 auto; white-space: nowrap`. Ao ser adotada pela coluna de avisos
   do painel do topo — que tem ~340px — o botão manteve a largura inteira e o
   texto foi esmagado atrás dele: foi o que o dono viu ("aí que merda").

   Aqui ela vira CARTÃO: texto em cima, botão embaixo, ocupando a coluna. E o
   visual volta para o M3, porque as regras tonais do `header.html` são
   prefixadas com `#main` e o painel mora FORA do `#main` — sem isto, o antigo
   degradê âmbar com borda e sombra reaparece só neste lugar.
   ========================================================================== */
#mk-agenda-avisos .agente-aviso {
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 0;
  padding: 12px 14px;
  background: var(--md-st-warn-cont);
  color: var(--md-st-warn);
  border: 0;
  border-radius: var(--md-shape-md);
  box-shadow: none;
}
#mk-agenda-avisos .agente-aviso__ico { color: inherit; }
#mk-agenda-avisos .agente-aviso__txt {
  flex: 1 1 100%;
  order: 2;
  font: 400 12.5px/17px var(--md-font);
}
#mk-agenda-avisos .agente-aviso__txt b { font-weight: 500; }
#mk-agenda-avisos .agente-aviso__txt code {
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: inherit;
  border-radius: var(--md-shape-xs);
  font-weight: 400;
  padding: 1px 5px;
}
#mk-agenda-avisos .agente-aviso__btn {
  order: 3;
  margin-top: 4px;
  min-height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--md-st-warn);
  color: var(--md-st-warn-cont);
  border: 0;
  border-radius: var(--md-shape-full);
  font: 500 12.5px/1 var(--md-font);
  text-decoration: none;
}
#mk-agenda-avisos .agente-aviso__x { order: 1; margin-left: auto; }


/* ============================================================================
   50. O CAMPO "GRUPOS" (widget de duas colunas do Django)

   Duas coisas estavam erradas na tela de usuario:

   · a §47 alcancava `select multiple` e o transformava em botao flex — as
     opcoes viraram uma fileira de chips cortados (corrigido acima, com
     `:not([multiple])`);
   · o widget monta duas colunas de largura fixa; dentro do cartao do
     formulario a segunda coluna passava POR FORA da borda. Sem `min-width: 0`
     em cada nivel, uma coluna com conteudo largo nao encolhe.

   Aqui ele volta a ser o que e': duas listas roláveis, altura de verdade, na
   largura disponivel — e no visual do sistema (superficie tonal, raio, fio).
   ========================================================================== */
#main #content .selector {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
  max-width: 100%;
}
@media (max-width: 900px) {
  #main #content .selector { grid-template-columns: minmax(0, 1fr); }
  #main #content .selector-chooser { flex-direction: row !important; justify-content: center; }
}
#main #content .selector-available,
#main #content .selector-chosen { min-width: 0; width: auto; float: none; }
#main #content .selector select[multiple] {
  width: 100% !important;
  min-width: 0 !important;
  height: 210px !important;
  min-height: 210px !important;
  padding: 6px !important;
  border: 1px solid var(--md-outline-variant) !important;
  border-radius: var(--md-shape-sm) !important;
  background: var(--md-surface) !important;
  font: 400 13.5px/20px var(--md-font) !important;
  color: var(--md-on-surface) !important;
}
#main #content .selector select[multiple] option {
  padding: 6px 8px;
  border-radius: var(--md-shape-xs);
}
#main #content .selector select[multiple] option:checked {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
#main #content .selector-chooser {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 40px;
  list-style: none;
}
#main #content .selector-chooser li { margin: 0; }
#main #content .selector h2,
#main #content .selector .selector-available h2,
#main #content .selector .selector-chosen h2 {
  margin: 0 0 6px !important;
  padding: 0 !important;
  background: transparent !important;
  font: 500 11px/16px var(--md-font) !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  color: var(--md-on-surface-variant) !important;
}


/* ============================================================================
   51. CELULAR — a pílula da agenda não pode passar por cima da gaveta

   No desktop a gaveta é fixa ao lado do conteúdo e nada se cruza, então a
   pílula (fixa, centrada) vive em `z-index: 1200` para ficar acima de tudo.
   No telefone a gaveta é uma FOLHA sobre a tela inteira, e 1200 punha a
   pílula acima dela — o dono viu a data flutuando em cima do menu aberto,
   grudada no "×" de fechar.

   Aqui ela desce para 30: continua acima do conteúdo da página e passa a
   ficar abaixo da gaveta e do véu. E encolhe, porque 360px de largura não
   sobram para uma pílula do tamanho da do desktop.
   ========================================================================== */
@media (max-width: 767px) {
  #mk-agenda { z-index: 30 !important; }
  #mk-agenda .mkag__btn { padding: 5px 10px !important; }
  #mk-agenda .mkag__data { font-size: 12px !important; }
  #mk-agenda .mkag__hora { font-size: 12px !important; }

  /* O painel ocupa a largura da tela, com respiro nas bordas — em duas
     colunas de 340px ele estourava para fora da janela. */
  #mk-agenda-pop {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    max-height: calc(100vh - 96px) !important;
    overflow-y: auto !important;
  }
  #mk-agenda-pop > * + * { border-left: 0 !important; }
}


/* ============================================================================
   52. CELULAR — A VARREDURA MEDIDA

   Tudo aqui foi medido no Chrome com janela de 375x812 (e conferido em 320px e
   em 768px), com as transições desligadas para não medir no meio da animação
   (armadilha da §11.5).

   A régua é sempre a mesma: `document.documentElement.clientWidth` contra
   `document.documentElement.scrollWidth`. O `window.innerWidth` MENTE na
   emulação de telefone do Chrome — quando a página estoura, ele passa a
   devolver a largura do conteúdo (534 em vez de 375 no mapa), e a conta
   "sobra = innerWidth − scrollWidth" dá ZERO numa tela quebrada.
   ========================================================================== */

/* --------------------------------- 52.1 a pílula da data e a gaveta aberta

   O defeito que o dono viu em print: com o menu aberto no telefone, a pílula
   da data flutuava POR CIMA da gaveta, grudada no "×" de fechar. Medido:
   pílula em 124–251 × 15–41; botão "Fechar menu" em 235–275 × 12–52 — 16px de
   sobreposição em cima do próprio alvo de fechar.

   A §51 tentou resolver baixando `#mk-agenda` para `z-index: 30`. NÃO resolve,
   e vale registrar por quê, para ninguém tentar de novo: a pílula mora dentro
   de `header.make-header`, que tem `z-index: 600` (§30.2, e é proposital — sem
   ele o painel abria atrás do conteúdo). A gaveta mora dentro do
   `div.relative.z-60` do unfold, `z-index: 60`. São dois contextos de
   empilhamento IRMÃOS: 600 ganha de 60, e nenhum valor de z-index DENTRO do
   header muda isso — o filho não escapa da camada do pai.

   Então a pílula sai de cena enquanto a gaveta está aberta: ela não tem o que
   informar com o menu por cima da tela, e o "×" volta a ser alcançável. A
   classe `mk-gaveta-aberta` no <body> é a fonte de verdade da gaveta
   sobreposta (§11.1) e só existe abaixo de 1280px. */
@media (max-width: 767px) {
  body.mk-gaveta-aberta #mk-agenda { display: none !important; }
}

/* --------------------------------- 52.2 o painel de avisos tinha 111px

   O segundo defeito do print: o painel abria como uma coluna estreita no meio
   da tela — uma palavra por linha, cartão do agente esmagado, calendário
   cortado. Medido: 111px de largura (132–243) numa janela de 375px. A §51
   pediu `left: 8px; right: 8px; width: auto` e o painel continuou com 111px.

   A causa: `#mk-agenda-pop` é `position: fixed`, mas o pai
   `#main > header.make-header .mkag` tem `transform: translate(-50%, -50%)`
   (§33, que centraliza a pílula no topo). **Um `transform` faz do elemento o
   bloco de contenção dos descendentes `fixed`** — o `left/right` do painel
   passou a contar a partir da caixa da PÍLULA, de 127px: 127 − 8 − 8 = 111px,
   exatamente o número medido.

   No desktop o defeito não aparece por coincidência aritmética: `left: 50%` de
   uma pílula centralizada cai justo no centro da janela. No telefone, onde a
   §51 usa `left/right` fixos, a coincidência não existe.

   Correção: no telefone a pílula se centraliza SEM transform. Ela vira uma
   faixa que cobre a linha do header e centraliza o próprio botão com flex;
   `pointer-events: none` na faixa para ela não roubar o toque do resto do
   header (o botão do menu passa por baixo dela), e `auto` de volta nos filhos.
   Sem transform, o `fixed` do painel volta a ser da JANELA e o `left: 8px;
   right: 8px` da §51 finalmente entrega os 359px. */
@media (max-width: 767px) {
  #main > header.make-header .mkag {
    left: 0; right: 0; top: 0; bottom: 0;
    transform: none;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
  }
  #main > header.make-header .mkag > * { pointer-events: auto; }

  /* Alvo de toque: a pílula tinha 127×26. O M3 pede 40px de altura mínima, e
     no telefone quem lê a data é o dedo. Continua discreta — o que cresce é a
     área, não a fonte. */
  #main > header.make-header .mkag__btn { min-height: 40px; }

  /* Dentro do painel o calendário estava esmagado: grade com 118px de conteúdo
     numa caixa de 83px, e dia de 15×30px. Com o painel em 359px a grade cabe;
     aqui só se garante que o dia seja alvo de dedo. */
  #mk-agenda-pop .mkag__d { min-height: 40px; }
  #mk-agenda-pop .mkag__nav-b { min-width: 40px; min-height: 40px; }
}

/* --------------------------------- 52.3 a §43.2 estava CORTANDO as tabelas

   A §43.2 devolveu a moldura arredondada aos invólucros de tabela e, para o
   raio recortar, pôs `overflow: hidden` neles. No desktop está certo. No
   telefone é o defeito "tabela cortada sem contêiner rolável próprio":

   · `.tf-tbl` (Transferências): tabela de 965px numa caixa de 313px — 652px de
     conteúdo INVISÍVEL, sem barra e sem arrasto. A própria tela declara
     `.tf-tbl { overflow: auto }`, mas perde: `#main #content .tf-tbl` tem
     2 ids + 1 classe contra 1 classe.
   · `.mkhome-tab` (Início): tabela de 620px numa caixa de 313px.
   · `.cdx-cart` (Cadastros): tabela de 458px numa caixa de 343px.

   Aqui eles voltam a rolar na horizontal. O `overflow-y: hidden` vai junto de
   propósito: é o par que mantém o recorte do raio — com `overflow-y: visible`
   o navegador promove o eixo X a `visible` também e a moldura para de
   recortar. O balanço fica contido para o gesto não vazar para a página. */
@media (max-width: 900px) {
  #main #content .agx-tbl,
  #main #content .tf-tbl,
  #main #content .tp-tbl,
  #main #content .fu-tbl,
  #main #content .pvtx-wrap,
  #main #content .mkhome-tab,
  #main #content .cdx-cart {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

/* --------------------------------- 52.4 os botões do cabeçalho de tela

   Três telas empurravam a página para fora da janela pelo mesmo motivo:

   | tela                    | documento | janela | sobra |
   |-------------------------|-----------|--------|-------|
   | /parque/transferencias/ |   457px   | 375px  | 82px  |
   | /parque/autorizadas/    |   438px   | 375px  | 63px  |
   | /parque/reparos/        |   404px   | 375px  | 29px  |

   Em todas o culpado medido é o mesmo nó: `.mkpro-head__actions`, com 354 a
   408px de largura. Ele JÁ tem `flex-wrap: wrap` (make-pro.css §2) — mas a §21
   o fixa em `flex: 0 0 auto`, e um item que não encolhe nunca chega ao ponto
   em que o wrap dos filhos dispara: a caixa fica do tamanho do conteúdo
   (max-content) e sai pela direita.

   No telefone ele ocupa uma LINHA própria e pode encolher; aí o wrap que
   sempre esteve escrito passa a valer. */
@media (max-width: 900px) {
  #content .mkpro-head > .mkpro-head__actions {
    flex: 1 1 100%;
    min-width: 0;
    margin-left: 0;
  }
}

/* --------------------------------- 52.5 a coluna de 440px do mapa

   `/parque/mapa-completo/`: documento com 534px numa janela de 375px — 159px
   de rolagem horizontal na PÁGINA. O `mapa.html` já põe `.mapa__planta` em uma
   coluna abaixo de 900px, mas o nível de DENTRO ficou de fora:
   `.mapa-unidade__setores` continua em `repeat(auto-fill, minmax(440px, 1fr))`
   (make-admin.css:1925). `auto-fill` com mínimo de 440px numa caixa de 315px
   não cria uma coluna menor — cria uma coluna de 440px que estoura. Medido:
   `.mapa-unidade` com 440px de largura dentro de um `#mapa-planta` de 315px.

   Uma coluna só, e `minmax(0, …)` para a faixa poder encolher abaixo do
   min-content dos cartões. Vale para os quatro mapas (completo, filtro,
   notebooks e score), que compartilham essa marcação. */
@media (max-width: 900px) {
  #main #content .mapa-unidade__setores { grid-template-columns: minmax(0, 1fr) !important; }
}

/* --------------------------------- 52.6 o formulário do admin não encolhia

   `/admin/auth/user/1/change/`: documento com 424px em 375px — 49px de
   rolagem. Medido: o `fieldset.module` do inline de perfil com 394px de
   largura e `min-width: min-content` (utilitário do unfold). `min-content` ali
   vale 394px, então o fieldset se recusa a caber — e o `overflow: hidden` dele
   ainda corta o que passa.

   `min-width: 0` deixa a caixa caber na tela; `overflow-x: auto` dá rolagem
   PRÓPRIA ao que for realmente largo (widget de duas colunas, tabela de
   inline) em vez de esconder. */
@media (max-width: 900px) {
  #content fieldset.module {
    min-width: 0;
    overflow-x: auto;
  }
}

/* --------------------------------- 52.7 alvos de toque abaixo de 40px

   Levantados na varredura, tela por tela — todos abaixo dos 40px que o M3 pede
   e que o projeto já usa nos botões de ícone:

   · Início: `.mkhome-chip` com 34px de altura.
   · Mapa: `.mapa__view-btn` 38px; `.mapa__add-setor` e `.mapa-setor__add` 32px.
   · Registros: `.rgx-cal__nav` 28×28; `.rgx-cal__d` 38×30; `.rgx-hoje` 36px.
   · Assistência externa e Transferências: `.ak-chip` e `.tf-chip` 32px.
   · Logs: `.lgx-ficha` 34px.
   · Cadastros: `.cdx-aba` 38px.

   São chips e abas, todos com padding horizontal suficiente — o que falta é
   altura. `min-height` não mexe no desenho (o fundo continua a mesma pílula),
   só engorda a área. */
@media (max-width: 900px) {
  #main #content .mkhome-chip,
  #main #content .mapa__view-btn,
  #main #content .mapa__add-setor,
  #main #content .mapa-setor__add,
  #main #content .ak-chip,
  #main #content .tf-chip,
  #main #content .lgx-ficha,
  #main #content .cdx-aba,
  #main #content .rgx-hoje {
    min-height: 40px;
  }
  #main #content .rgx-cal__nav { min-width: 40px; min-height: 40px; }

  /* O DIA do mini-calendário só cresce na ALTURA, e a grade tem de poder
     encolher. Escrito assim depois de medir a primeira tentativa: com
     `min-width: 40px` no dia, as sete faixas de `repeat(7, 1fr)` passaram a
     ter 40px de mínimo — 7×40 + 6×2 de vão + 32 de padding = 326px de cartão
     numa coluna de 260px em 320px de janela, e a página saltou para 356px
     (36px de rolagem horizontal que não existia). O `minmax(0, 1fr)` solta a
     faixa e o dia fica com a largura que couber (46px em 375px, 35px em
     320px); os 40px de altura já dão área de dedo. */
  #main #content .rgx-cal { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  #main #content .rgx-cal__d { min-width: 0; min-height: 40px; }
}

/* --------------------------------- 52.8 os gráficos do cartão de desempenho

   `.mkhome-score__charts` (Início): 300px de conteúdo numa caixa de 283px em
   375px, e 300 numa de 228px em 320px — o `overflow: hidden` do
   `.mkhome-panel` engolia a diferença, então o terceiro gráfico ficava
   cortado ao meio sem barra nenhuma.

   O `templates/admin/index.html` já põe o bloco em UMA coluna abaixo de
   900px, e mesmo assim os três `<div>` de gráfico mediam 300px. É a armadilha
   do mínimo automático outra vez: `1fr` é `minmax(auto, 1fr)`, o `auto` vale
   o min-content do item, e o min-content de um item que contém um `<canvas>`
   com largura em pixels (o Chart.js escreve `style.width` no elemento) é essa
   largura — 300px. A faixa cresce para 300 e estoura a caixa.

   As três correções que o caso pede, na ordem: soltar a FAIXA
   (`minmax(0, 1fr)`), soltar o ITEM (`min-width: 0`, porque item de grid
   também nasce com mínimo = min-content) e destravar o `<canvas>`
   (`max-width: 100%`), senão ele mantém a largura que o Chart.js escreveu.
   Com a caixa podendo encolher, o Chart.js redimensiona sozinho no próximo
   quadro de resize. */
@media (max-width: 900px) {
  #main #content .mkhome-score__charts { grid-template-columns: minmax(0, 1fr); }
  #main #content .mkhome-score__charts > * { min-width: 0; }
  #main #content .mkhome-score__charts canvas { max-width: 100%; }
}


/* ============================================================================
   53. CELULAR — SEGUNDA MEDIÇÃO (o que sobrou depois da §52)

   Medido de novo em 375px depois de a §52 entrar. Sobraram dois alvos de toque
   que a primeira passagem não pegou porque são LINKS, e não chips.

   Ficou de fora, de propósito, e vale escrito para não virar "correção
   esquecida": os selos de status (`.rkb-tag`, 95×24 no quadro de chamados) e
   os links de texto corridos (`.pvx-herolink`, "Ver ranking completo";
   "Protocolo" no cartão da assistência) continuam abaixo de 40px. Selo não é
   botão — engordar para 40px transformaria a etiqueta do cartão num botão que
   ela não é, e o dono já reprovou peso visual desse tipo (§13.7). Link dentro
   de frase é exceção reconhecida de alvo de toque.
   ========================================================================== */

@media (max-width: 900px) {
  /* O índice da tela de Ajuda: 32px de altura em itens de 97 a 230px de
     largura. É a navegação da tela — cada item é o alvo principal. */
  #main #content .ajuda__toc a {
     display: flex;
     align-items: center;
     min-height: 40px;
  }

  /* O nome da loja na tabela do Início: o link tinha 16px de altura (75×16 em
     "Bonsucesso") dentro de uma célula bem mais alta — o dedo acertava a
     célula e não acontecia nada. O link passa a ocupar a linha inteira da
     célula. */
  #main #content .mkhome-tab__nome {
    display: flex;
    align-items: center;
    min-height: 40px;
  }

  /* Registros: as setas de mês (36×36) e o "Ir para hoje" (64×13). */
  #main #content .rgx-nav a,
  #main #content .rgx-nav button {
    min-width: 40px;
    min-height: 40px;
  }
  #main #content .rgx-cal__hoje {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* Telas de ADMINISTRAÇÃO (unfold), onde não se pode tocar no template:
     · o "+" da lista tinha 42×38 — faltavam 2px;
     · a seta de voltar do formulário, 24×18;
     · "Alterar a senha", 126×38;
     · "Escolher todos" / "Remover todos" do widget de grupos, 213×37. */
  #main #content .object-tools .addlink,
  #main #content a.addlink,
  #main #content .make-pass-btn,
  #main #content .selector-chooseall,
  #main #content .selector-clearall {
    min-height: 40px;
  }
  #main .make-header a.block,
  #main #content .selector-chooseall,
  #main #content .selector-clearall {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #main .make-header a.block { min-width: 40px; min-height: 40px; }
  /* O "+" vive na BARRA DO TOPO, não no `#content` — por isso um seletor
     próprio (medido: 42×38 dentro de `.mkhdr__side`). */
  #main .make-header a.addlink { min-width: 40px; min-height: 40px; }

  /* O link da primeira coluna das listas do admin tinha 20px de altura numa
     linha bem mais alta (medido: 78×20 em "Bonsucesso"). É o alvo principal
     da lista — quem toca na linha espera abrir o registro. Vira a altura da
     linha, o que também deixa a lista mais confortável no telefone. */
  #main #content a.text-important {
    display: flex;
    align-items: center;
    min-height: 40px;
  }

  /* Início, em 320px: o cursor duplo do score tem `min-width: 240px` e
     começava a 62px do início da página — 302px de borda direita num painel
     que termina em 290. Sobrava 12px cortado pelo `overflow: hidden` do
     painel. Ele não precisa de piso: a trilha desenha na largura que tiver. */
  #main #content .make-score__slider { min-width: 0; }

  /* A BUSCA DAS LISTAS DO ADMIN, em 320px: `#toolbar` media 299px (30 a 329)
     numa coluna de 260px — 9px de rolagem horizontal na página. O `#toolbar`
     é item de um flex em coluna e nasce com mínimo automático = min-content,
     e o min-content dele inclui a largura intrínseca do `<input>` nativo
     (~183px) somada ao botão da lupa (72px) e ao padding (32px).

     O `templates/admin/search_form.html` não pode ser editado (é template do
     admin), então a trava vem daqui: teto de 100% nas três caixas
     encadeadas — `#toolbar`, o `<form>` e a `.mksf-box` que ele estica com
     `width: 100%`. Sem `max-width` no `#toolbar` o teto dos filhos não serve
     para nada, porque 100% deles é a largura JÁ estourada do pai. */
  #main #toolbar,
  #main #toolbar > form,
  #main #toolbar .mksf-box {
    min-width: 0;
    max-width: 100%;
  }
}


/* ============================================================================
   54. O QUE A AUDITORIA ACHOU E AS SEÇÕES ANTERIORES NÃO ALCANÇARAM

   Um agente leu o sistema pedido por pedido e mediu. Três coisas que eu tinha
   dado por resolvidas continuavam quebradas — as duas primeiras porque a regra
   apontava para um lugar onde o defeito não estava.
   ========================================================================== */

/* --------------------------------- 54.1 seleção visível nas tabelas PRÓPRIAS

   A §46 resolveu a seleção nas tabelas do admin (`#result_list`). As tabelas
   do sistema (`.tab-tabela`, com `.tr-chk` na primeira célula) não tinham
   regra nenhuma: marcar a linha acendia a barra flutuante — "1 selecionado" —
   e a linha ficava idêntica às outras. É a queixa dele, "não dá pra ver quem
   tá selecionando", na metade do sistema onde eu não havia olhado.

   Vale para /parque/tabela-computadores/, tabela-notebooks, tabela-pecas,
   tabela-estoque-computadores e fora-de-uso.

   `!important` porque o template dessas telas pinta `td` com `!important`
   (inclusive `background: transparent` na zebra), e o `:has()` conta o
   seletor mais específico de DENTRO — aqui, uma classe. */
#main #content .tab-tabela tbody tr:has(.tr-chk:checked) > td,
#main #content .tab-tabela tbody tr.is-sel > td,
#main #content .fu-tabela tbody tr:has(input[type="checkbox"]:checked) > td,
#main #content .tp-tabela tbody tr:has(input[type="checkbox"]:checked) > td {
  background: var(--md-secondary-container) !important;
  color: var(--md-on-secondary-container) !important;
}
#main #content .tab-tabela tbody tr:has(.tr-chk:checked) > td a,
#main #content .tab-tabela tbody tr:has(.tr-chk:checked) > td b,
#main #content .tab-tabela tbody tr:has(.tr-chk:checked) > td strong {
  color: var(--md-on-secondary-container) !important;
}
/* A caixa de seleção acompanha: 16px na tinta de acento, como no admin. */
#main #content .tab-tabela .tr-chk,
#main #content .fu-tabela input[type="checkbox"],
#main #content .tp-tabela input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--md-primary) !important;
}

/* --------------------------------- 54.2 a lupa de Fora de uso e de Peças

   Estas duas telas têm a lupa em `position: absolute` sobre o campo, com o
   recuo do texto por conta do `padding`. É a estrutura que já produziu o
   defeito "lupa por cima do texto" duas vezes.

   A §36 e a §43.4 tentaram consertar e não chegaram: miram `.fu-busca`,
   `.tp-busca` e `.agx-busca` — classes que não existem em template nenhum.
   Os nomes de verdade são `.fu-search`, `.tp-search` e `.agx-filtros`. Deixei
   as regras antigas onde estão (não fazem nada, e apagá-las é limpeza de
   outra hora); estas são as que valem. */
#main #content .fu-search,
#main #content .tp-search {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 40px;
  padding: 0 14px !important;
  border-radius: var(--md-shape-full) !important;
  background: var(--md-surface-container) !important;
}
#main #content .fu-search > svg,
#main #content .tp-search > svg {
  position: static !important;
  flex: 0 0 auto !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--md-on-surface-variant) !important;
}
#main #content .fu-search input,
#main #content .tp-search input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
/* O "×" de limpar continua no fim da linha, agora como item do flex. */
#main #content .fu-search__x,
#main #content .tp-search__x {
  position: static !important;
  flex: 0 0 auto !important;
  right: auto !important;
}
/* Um anel de foco só, por dentro — o mesmo tratamento da §43.1. */
#main #content .fu-search:focus-within,
#main #content .tp-search:focus-within {
  box-shadow: inset 0 0 0 2px var(--md-primary) !important;
}


/* ============================================================================
   55. CELULAR — A TABELA VOLTA A SER LEGÍVEL (08/09/2026)

   Defeito relatado com print pelo dono: "algumas tabelas no celular ficam
   malucas, não dá pra ver direito. Até na lista de usuários fica assim.
   Qualquer tabela na verdade."

   Medido em 375x812 (Chrome, emulação de telefone) com
   `document.documentElement.clientWidth/scrollWidth` — nunca `innerWidth`,
   que MENTE quando a página transborda (armadilha já registrada na §52).

   O que a medição mostrou, e o que ela DERRUBOU:

   · A hipótese "alguma regra nossa força `display` de tr/td e briga com o modo
     responsivo do unfold" é FALSA. Em `/admin/auth/user/` o modo do unfold
     estava intacto: `#result_list` com `display: block`, `tr` com `block`,
     `td` com `flex` — exatamente o que as classes `block … lg:table-row-group`
     dele pedem. Nenhuma regra nossa mexia nisso. Fica escrito para ninguém
     perseguir esse fantasma de novo.
   · A hipótese "`min-height` herdado de regra de linha de lista" também é
     FALSA: o `min-height` computado de `tr` e de `td` é `0px` em TODAS as
     telas medidas.
   · Não faltava rolagem horizontal: a §52.3 já a tinha dado. Medido em
     `/parque/tabela-computadores/`: invólucro `.tab-wrap` com
     `overflow-x: auto`, `clientWidth` 313 e `scrollWidth` 892 — 579px de
     rolagem DISPONÍVEL. O corpo da página não rolava para o lado
     (`clientWidth` 375 = `scrollWidth` 375).

   A causa REAL é outra, e é uma para cada família de tabela.
   ========================================================================== */

/* --------------------------------- 55.1 a linha de 373px: a coluna de texto
   livre é esmagada até a largura da PALAVRA mais longa

   `/parque/tabela-computadores/` em 375px, linha mais alta medida célula por
   célula (`Range.getBoundingClientRect()` do conteúdo de cada `<td>`):

   | coluna      | largura | altura da tinta | linhas |
   |-------------|---------|-----------------|--------|
   | (marcar)    |   50px  |      16px       |   1    |
   | Baia        |  140px  |      17px       |   1    |
   | Local       |  137px  |      37px       |   2    |
   | Colaborador |  116px  |      17px       |   1    |
   | Situação    |  116px  |      24px       |   1    |
   | Score       |  109px  |      24px       |   1    |
   | Resumo      |  106px  |     337px       |  17    |
   | Data compra |  118px  |      15px       |   1    |

   Soma das larguras = 892px = a largura da tabela. Ou seja: a tabela está na
   sua largura de CONTEÚDO MÍNIMO, porque `width: 100%` pede 313px (a caixa) e
   o mínimo não desce disso. Nesse regime cada coluna fica no seu próprio
   mínimo, e o mínimo de uma coluna de texto corrido é a PALAVRA mais longa —
   106px para o "Resumo", que tem 125 caracteres. Resultado: 17 linhas de
   texto, `<tr>` de 373px, e as outras sete células com uma linha só, centradas
   por `vertical-align: middle` no meio de 373px. Foi exatamente isso que o
   dono fotografou: o vazio enorme em cima e embaixo de "Caixa 1", e as colunas
   da direita fora da tela.

   Correção: no telefone cada célula é UMA linha com reticências, limitada a
   176px. Isso levanta o mínimo de cada coluna (passa a ser o texto inteiro,
   até o teto de 176px), a tabela fica mais larga e ROLA na horizontal dentro
   do invólucro — que já rola desde a §52.3 — em vez de crescer para baixo.

   Medido depois, em 375px:
   | tela                          | linha antes   | depois | tabela |
   |-------------------------------|---------------|--------|--------|
   | /parque/tabela-computadores/  | 173 (373 máx) |  57px  | 1097px |
   | /parque/tabela-notebooks/     | 133 (273 máx) |  57px  | 1075px |
   | /parque/fora-de-uso/          |  73 (113 máx) |  57px  | 1215px |
   | /parque/transferencias/       |  93 (153 máx) |  57px  | 1147px |
   | /cadastros/                   |  73 (109 máx) |  57px  |  535px |

   57px = 20px de texto + 16px + 16px de respiro + 1px de divisor: a linha de
   52–56px do contrato (§4), agora de verdade.

   O teto de 176px foi escolhido MEDINDO: com 140px a tabela de computadores
   dá 953px, com 176px dá 1097px e com 220px dá 1256px — e a altura da linha é
   57px nos três. 176px deixa ~144px de texto (uns 20 caracteres) depois dos
   16px de padding de cada lado: o bastante para "Bonsucesso › Caix…" ser
   reconhecível, sem virar um rolo de 1,3 mil pixels.

   Os invólucros da lista são os MESMOS da §52.3 (que já lhes deu
   `overflow-x: auto`), mais o `.tab-wrap` das tabelas de dispositivos e o
   `.lgx-tab` dos logs, que rolam pelo `<style>` da própria tela. Cada classe
   foi conferida NO TEMPLATE antes de entrar aqui (armadilha da §14.7): ficou
   de fora o `.rgx-tbl-NAO-EXISTE-no-template` que as §43.2/§52.3 citam e que NÃO EXISTE em template
   algum — a tela `/registros/` não tem `<table>`. */
@media (max-width: 900px) {
  #main #content .tab-wrap td,
  #main #content .tp-tbl td,
  #main #content .fu-tbl td,
  #main #content .tf-tbl td,
  #main #content .lgx-tab td,
  #main #content .cdx-cart td,
  #main #content .agx-tbl td,
  #main #content .pvtx-wrap td,
  #main #content .mkhome-tab td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 176px;
  }
}

/* --------------------------------- 55.2 a changelist do admin: o modo cartão
   do unfold custa 280px por registro

   `/admin/auth/user/` em 375px. O modo responsivo do unfold está INTACTO (ver
   o cabeçalho desta seção): cada `<tr>` vira um cartão em bloco e cada `<td>`
   uma linha "rótulo → valor", com o rótulo saindo do
   `before:content-[attr(data-label)]` dele. Medido: seis células de 45 a 53px
   = `<tr>` de 280px por usuário; em `/admin/orgs/person/`, com oito colunas,
   370px. É o mesmo "uns 300px de altura" que o dono descreveu — nesta tela ele
   não vem de texto esmagado, vem do empilhamento.

   Duas coisas o nosso CSS piora nesse modo, e vale registrar: o
   `padding: 16px !important` de `templates/admin/change_list_results.html`
   (contra os `px-3 py-2` = 12/8px do unfold) engorda cada célula de ~36px para
   45–53px, e o rótulo "Selecionar todas as linhas" do
   `<span class="lg:hidden">` ocupa uma faixa inteira de 45px no alto do
   cartão.

   DECISÃO, e é uma decisão de desenho, não um conserto de bug: no telefone a
   changelist volta a ser TABELA e rola na horizontal, como as outras nove
   telas de lista do sistema. O dono pediu "qualquer tabela" utilizável e
   descreveu o alvo — "linha com altura de conteúdo, e as colunas alcançáveis
   (rolagem horizontal no container da tabela)". Um registro de 57px que se
   varre para o lado lê melhor do que um cartão de 280px, e passa a haver UM só
   comportamento de tabela no telefone. Para desfazer, apague este bloco: o
   modo cartão do unfold volta sozinho, porque nada dele foi apagado.

   Medido depois, em 375px:
   | tela                 | linha antes | depois | tabela | página |
   |----------------------|-------------|--------|--------|--------|
   | /admin/auth/user/    |    280px    |  57px  |  726px |  375px |
   | /admin/orgs/person/  |    370px    |  57px  |  957px |  375px |

   O invólucro é o `.tab-wrap.mkclr-wrap`, que já tem `overflow: auto` pelo
   `<style>` do `change_list_results.html` — a rolagem fica DENTRO dele e o
   corpo da página continua com 375px = 375px.

   Detalhes que a medição exigiu:
   · `padding: 8px 12px`, e precisa de `!important` (aquele `<style>` usa
     `padding: 16px !important`). Com 16px em cima e embaixo a linha dava 73px,
     porque o link do registro tem `min-height: 40px` de alvo de toque (§53) —
     40 + 32 = 72. Com 8px dá 40 + 16 = 56–57px, a linha do contrato.
   · Os TRÊS ids (`body.change-list #main #content #result_list`) existem para
     vencer o `!important` daquele `<style>`, que tem dois (§7.2).
   · `::before` desligado: é o rótulo `attr(data-label)` do modo cartão, que
     numa tabela apareceria repetido dentro de cada célula.
   · o `<span>` de "Selecionar todas as linhas" sai: é `lg:hidden`, feito para
     o modo cartão, e com `white-space: nowrap` levava a coluna de marcar a
     207px. Sem ele a coluna mede 48px. */
@media (max-width: 900px) {
  body.change-list #main #content #result_list { display: table; width: 100%; }
  body.change-list #main #content #result_list thead { display: table-header-group; }
  body.change-list #main #content #result_list thead th { display: table-cell; }
  body.change-list #main #content #result_list tbody { display: table-row-group; }
  body.change-list #main #content #result_list tbody tr {
    display: table-row;
    border: 0;
    margin: 0;
    border-radius: 0;
  }
  body.change-list #main #content #result_list tbody td,
  body.change-list #main #content #result_list tbody th {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 176px;
    padding: 8px 12px !important;
  }
  body.change-list #main #content #result_list td::before,
  body.change-list #main #content #result_list th::before { content: none; }
  body.change-list #main #content #result_list thead th.action-checkbox-column label > span {
    display: none;
  }
}

/* --------------------------------- 55.3 a caixa de marcar da changelist era
   INVISÍVEL — em qualquer largura

   Achado ao medir a linha de cima, e é um caso novo da armadilha da §14.7: a
   §46 escreveu `accent-color: var(--md-primary)` na caixa de marcar do
   `#result_list` com o comentário "visível marcada ou não". `accent-color` só
   pinta o controle NATIVO — e o `<input type="checkbox">` do unfold vem com a
   classe `appearance-none` e desenha a caixa com `border` + `bg-white` do
   Tailwind. A §19.4 zera essa borda
   (`#main input[type="checkbox"] { border: 0 !important }`).

   Medido em `/admin/auth/user/`, em 375px E em 1440px (não é defeito de
   telefone): `appearance: none`, `border: 0px none`,
   `background-color: rgba(0,0,0,0)`, `box-shadow: none`. Um alvo de 16x16 sem
   um pixel aceso — não havia como ver o que estava marcado, nem no desktop.

   Devolver a `appearance` nativa faz o `accent-color` da §46 finalmente valer,
   com a caixa no verde da marca nos dois temas. Fora da media query de
   propósito: a caixa estava invisível também no desktop. */
#main #content #result_list input[type="checkbox"],
#main #content .action-checkbox-column input[type="checkbox"],
#main #content #action-toggle {
  appearance: auto !important;
  -webkit-appearance: auto !important;
}