/* ==========================================================================
   Mac Kit — tokens e componentes compartilhados
   Fonte da verdade: docs/design/design-system-mac.md
   Embriao do `mac-lp-kit`, que sera extraido quando o app numero 2 existir.
   ========================================================================== */

:root {
  /* --- cor: claro --- */
  --bg:              #f5f5f7;
  --surface:         #ffffff;
  --container:       #efeff1;
  --container-2:     #f0f0f2;
  --ink:             #1d1d1f;
  --ink-2:           #424245;
  --muted:           #6e6e73;
  --muted-2:         #86868b;
  --muted-3:         #a1a1a6;
  --border:          #e5e5ea;
  --border-2:        #e8e8ed;
  --border-strong:   #d2d2d7;
  --hairline:        #c7c7cc;
  --success:         #4e8c5e;
  --success-container:#dcebdd;
  --success-on:      #2e5a3a;
  --warning:         #c98a2e;
  --warning-container:#f7eddc;
  --info:            #3e6e97;
  --info-container:  #e3edf5;

  /* --- traffic lights --- */
  --tl-red:    #ff5f57;
  --tl-yellow: #febc2e;
  --tl-green:  #28c840;

  /* --- tipografia ---
     Fallback nativo primeiro-classe: sem a webfont, o macOS usa SF Pro,
     New York e SF Mono, que sao exatamente o que queremos parecer. */
  --font-sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-serif: "Newsreader", "New York", ui-serif, Georgia, serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- espaco: base 4px --- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;

  /* --- raio: escala irregular de proposito (raio aninhado) --- */
  --r-8: 8px;  --r-9: 9px;   --r-10: 10px; --r-11: 11px; --r-12: 12px;
  --r-13: 13px; --r-14: 14px; --r-16: 16px; --r-22: 22px; --r-full: 999px;

  /* --- sombra: nomeada por componente, nunca por tamanho --- */
  --shadow-btn:    0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --shadow-card:   0 1px 3px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.05);
  --shadow-window: 0 12px 40px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
  --shadow-sheet:  0 20px 60px rgba(0,0,0,.28);

  --ease: cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0b0b0c;
    --surface:       #1c1c1e;
    --container:     #161618;
    --container-2:   #1f1f21;
    --ink:           #f5f5f7;
    --ink-2:         #d8d8dc;
    --muted:         #98989d;
    --muted-2:       #8e8e93;
    --muted-3:       #6e6e73;
    --border:        #2c2c2e;
    --border-2:      #262628;
    --border-strong: #3a3a3c;
    --hairline:      #3a3a3c;
    --success-container:#1e3324;
    --success-on:   #9fd4ac;
    --warning-container:#33290f;
    --info-container:#16283a;
    --shadow-window: 0 12px 40px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
    --shadow-sheet:  0 20px 60px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --bg:#0b0b0c; --surface:#1c1c1e; --container:#161618; --container-2:#1f1f21;
  --ink:#f5f5f7; --ink-2:#d8d8dc; --muted:#98989d; --muted-2:#8e8e93; --muted-3:#6e6e73;
  --border:#2c2c2e; --border-2:#262628; --border-strong:#3a3a3c; --hairline:#3a3a3c;
  --success-container:#1e3324; --success-on:#9fd4ac; --warning-container:#33290f;
  --info-container:#16283a;
  --shadow-window: 0 12px 40px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
}
:root[data-theme="light"] {
  --bg:#f5f5f7; --surface:#fff; --container:#efeff1; --container-2:#f0f0f2;
  --ink:#1d1d1f; --ink-2:#424245; --muted:#6e6e73; --muted-2:#86868b; --muted-3:#a1a1a6;
  --border:#e5e5ea; --border-2:#e8e8ed; --border-strong:#d2d2d7; --hairline:#c7c7cc;
  --success-container:#dcebdd; --success-on:#2e5a3a; --warning-container:#f7eddc;
  --info-container:#e3edf5;
}

/* ========================= base ========================= */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.015em; }
p { margin: 0; }
button { font: inherit; color: inherit; }

.mono   { font-family: var(--font-mono); font-size: .86em; letter-spacing: -.01em; }
.serif  { font-family: var(--font-serif); }
.muted  { color: var(--muted); }
.muted2 { color: var(--muted-2); }
.nowrap { white-space: nowrap; }

/* ================= MacWindow (o componente-assinatura) ================= */

.mac-window {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-13);
  box-shadow: var(--shadow-window);
  overflow: hidden;
}

.mac-titlebar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 38px;
  padding: 0 var(--sp-4);
  background: color-mix(in srgb, var(--container) 85%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}

.mac-lights { display: flex; gap: 8px; }
.mac-light  { width: 12px; height: 12px; border-radius: var(--r-full); }
.mac-light.r { background: var(--tl-red); }
.mac-light.y { background: var(--tl-yellow); }
.mac-light.g { background: var(--tl-green); }

.mac-title {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-right: 52px; /* compensa a largura dos lights, para centralizar de verdade */
}

.mac-body { padding: var(--sp-6); }

/* ==========================================================================
   MacFrame — o notebook em volta do app
   Receita herdada do LaptopMockup do novo site DGS: bisel fino, ponto de camera
   no lugar de recorte, base clara mais larga que a tela e, o que mais importa,
   um brilho difuso atras. Sem ele o conjunto le como recorte colado na pagina.
   O conteudo e HTML vivo, nao PNG: o CSP do Artifact bloqueia imagem externa, e
   assim fica nitido em qualquer densidade e nao envelhece a cada mudanca de UI.
   Nao imita nenhum produto especifico da Apple.
   ========================================================================== */

.mac-frame { position: relative; max-width: 880px; margin: 0 auto; }

/* brilho de fundo: e ele que da profundidade */
.mf-brilho {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 82%; height: 78%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--info) 30%, transparent), transparent 76%);
  filter: blur(44px);
}

/* tela + bisel */
.mf-tela {
  position: relative; z-index: 1;
  padding: 14px 14px 0;
  background: linear-gradient(160deg, #2b2b31 0%, #131317 100%);
  border: 1px solid #3a3a42;
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 34px 60px -30px rgba(10, 12, 20, .55);
}

/* camera: um ponto, nao um recorte — bem menos pesado */
.mf-cam {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: var(--r-full);
  background: #3d3d47;
}

/* o vidro: recorta tudo que passa da tela, como um screenshot faria */
.mf-vidro {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 16 / 10;   /* proporcao de notebook, independente do conteudo */
}

/* barra de menu do sistema, no topo da tela */
.mf-menubar {
  display: flex; align-items: center; gap: var(--sp-4);
  height: 24px; padding: 0 var(--sp-3);
  font-size: 11.5px; color: rgba(255,255,255,.9);
  background: #16161a;
}
.mf-menubar .sp { flex: 1; }
.mf-menubar .fraco { color: rgba(255,255,255,.55); }

/* a janela ocupa a tela inteira: nada de raio nem sombra dentro do vidro */
.mf-vidro .mac-window { border: 0; border-radius: 0; box-shadow: none; height: calc(100% - 24px); }
.mf-vidro .app-shell  { height: 100%; min-height: 0; }
.mf-vidro .sidebar    { background: var(--container); }
.mf-vidro .painel     { overflow: hidden; }

/* queixo abaixo da tela */
.mf-queixo { height: 13px; }

/* base: mais larga que a tela, como a tampa fechando sobre o corpo */
.mf-base {
  position: relative; z-index: 1;
  width: 112%; margin-left: -6%;
  height: 15px;
  background: linear-gradient(180deg, #d6dde8 0%, #a9b3c4 100%);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 20px 30px -16px rgba(10, 12, 20, .45);
}
/* o rebaixo por onde se abre a tampa */
.mf-base::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 122px; height: 7px;
  background: #94a0b5;
  border-radius: 0 0 8px 8px;
}

@media (prefers-color-scheme: dark) {
  .mf-base { background: linear-gradient(180deg, #5a616e 0%, #383e49 100%); }
  .mf-base::after { background: #2b303a; }
}
:root[data-theme="dark"] .mf-base { background: linear-gradient(180deg, #5a616e 0%, #383e49 100%); }
:root[data-theme="dark"] .mf-base::after { background: #2b303a; }
:root[data-theme="light"] .mf-base { background: linear-gradient(180deg, #d6dde8 0%, #a9b3c4 100%); }
:root[data-theme="light"] .mf-base::after { background: #94a0b5; }

@media (max-width: 860px) {
  /* 16/10 numa tela estreita sobraria uma faixa de app alta demais para ler.
     Abaixo do breakpoint o vidro volta a ser dimensionado pelo conteudo. */
  .mf-vidro { aspect-ratio: auto; }
  .mf-vidro .mac-window { height: auto; }
  .mf-tela { padding: 9px 9px 0; border-radius: 13px 13px 0 0; }
  .mf-cam { top: 3px; width: 4px; height: 4px; }
  .mf-menubar .fraco { display: none; }
  /* O balanco da base em porcentagem (112%) estoura a margem da pagina em tela
     estreita: em 390px dava 393px de corpo. Em pixel ele cabe em qualquer largura. */
  .mf-base { width: calc(100% + 18px); margin-left: -9px; }
  .mf-base::after { width: 84px; }
}

/* ===================== barra de menu do macOS ===================== */

.menubar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-4);
  height: 26px;
  font-size: 12.5px;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-2);
  border-radius: var(--r-8) var(--r-8) 0 0;
}
.menubar .spacer { flex: 1; }
.menubar .item { display: flex; align-items: center; gap: 5px; }
.menubar .badge {
  background: var(--info);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--r-full);
}

/* ========================= cartoes ========================= */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  box-shadow: var(--shadow-card);
}

/* raio aninhado: filho = pai - padding */
.card > .card-inner { border-radius: var(--r-8); }

/* ===================== grupo da inbox ===================== */

.grupo {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  text-align: left;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  box-shadow: var(--shadow-btn);
  cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), border-color .12s var(--ease);
}
.grupo:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); border-color: var(--border-strong); }
.grupo:active { transform: translateY(0); }
.grupo + .grupo { margin-top: var(--sp-3); }

.grupo-icone {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-9);
  background: var(--container);
  font-size: 19px;
}
.grupo-txt { flex: 1; min-width: 0; }
.grupo-nome { display: block; font-weight: 600; font-size: 15px; }
.grupo-sub  {
  display: block; font-size: 13px; color: var(--muted); margin-top: 3px;
  overflow-wrap: anywhere;
}
.grupo-num  { flex: none; text-align: right; }
.grupo-qtd  { font-family: var(--font-serif); font-size: 22px; line-height: 1; }
.grupo-uni  { font-size: 11.5px; color: var(--muted-2); }
.grupo-seta { flex: none; color: var(--muted-3); font-size: 18px; }

/* ========================= selos ========================= */

.selo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--r-full);
  white-space: nowrap;
  border: 1px solid transparent;
}
.selo.neutro  { background: var(--container); color: var(--muted); border-color: var(--border); }
.selo.aviso   { background: var(--warning-container); color: var(--warning); }
.selo.ok      { background: var(--success-container); color: var(--success-on); }
.selo.info    { background: var(--info-container); color: var(--info); }

/* confianca */
.conf { font-size: 11px; color: var(--muted-2); display: inline-flex; gap: 3px; align-items: center; }
.conf .pip { width: 5px; height: 5px; border-radius: var(--r-full); background: var(--hairline); }
.conf .pip.on { background: var(--success); }

/* ========================= lista de arquivos ========================= */

.arquivos {
  min-width: 0;
  border: 1px solid var(--border); border-radius: var(--r-11); overflow: hidden;
}
.arq {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
}
.arq + .arq { border-top: 1px solid var(--border-2); }
.arq:hover { background: var(--container-2); }
.arq-check {
  flex: none; width: 16px; height: 16px; border-radius: 5px;
  border: 1.5px solid var(--hairline); display: grid; place-items: center;
  font-size: 10px; color: #fff;
}
.arq-check.on { background: var(--info); border-color: var(--info); }
.arq-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arq-meta { flex: none; font-size: 12px; color: var(--muted-2); }

/* ========================= botoes ========================= */

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-9);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: var(--shadow-btn);
  font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.btn:hover { background: var(--container-2); }
.btn.primario { background: var(--info); border-color: var(--info); color: #fff; }
.btn.primario:hover { filter: brightness(1.06); }
.btn.perigo { color: var(--warning); }
.btn.pro::after {
  content: "Pro";
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  background: var(--ink); color: var(--surface);
  padding: 1px 5px; border-radius: var(--r-full);
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ========================= banner do "aha" ========================= */

.aha {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--info-container);
  border: 1px solid color-mix(in srgb, var(--info) 22%, transparent);
  border-radius: var(--r-12);
}
.aha-ico { flex: none; font-size: 18px; line-height: 1.3; }
.aha-txt { flex: 1; }
.aha-txt strong { font-weight: 600; }
.aha-acao { margin-top: var(--sp-3); }

/* ========================= sheet de preview ========================= */

.sheet-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: start center;
  padding: var(--sp-16) var(--sp-4);
  z-index: 50;
}
.sheet {
  width: min(680px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-14);
  box-shadow: var(--shadow-sheet);
  overflow: hidden;
}
.sheet-head { padding: var(--sp-5) var(--sp-5) var(--sp-3); border-bottom: 1px solid var(--border); }
.sheet-body { padding: var(--sp-5); max-height: 52vh; overflow: auto; }
.sheet-foot {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--container-2);
}
.sheet-foot .spacer { flex: 1; }

.diff { display: grid; gap: var(--sp-2); }
.diff-linha {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-3); align-items: center;
  padding: var(--sp-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-9);
  background: var(--container-2);
}
.diff-de   { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--muted-3); overflow-wrap: anywhere; }
.diff-seta { color: var(--muted-3); }
.diff-para { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.diff-por  { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted-2); }

/* ========================= barras do raio-X ========================= */

.metrica { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
.metrica + .metrica { margin-top: var(--sp-5); }
.metrica-top { display: flex; align-items: baseline; gap: var(--sp-3); }
.metrica-nome { flex: 1; font-size: 14px; }
.metrica-val  { font-family: var(--font-serif); font-size: 26px; line-height: 1; }
.metrica-abs  { font-size: 12px; color: var(--muted-2); }
.barra { height: 7px; border-radius: var(--r-full); background: var(--container); overflow: hidden; }
.barra > span { display: block; height: 100%; border-radius: var(--r-full); background: var(--ink); }
.barra.info > span    { background: var(--info); }
.barra.warning > span { background: var(--warning); }
.barra.success > span { background: var(--success); }

/* ==========================================================================
   CASCO DE APLICACAO — sidebar + painel
   Espelha o NavigationSplitView do SwiftUI, que e o alvo da Fase B.
   Vive dentro de .mac-window, no lugar do .mac-body.
   ========================================================================== */

.app-shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-height: 520px;
}

/* ---------- sidebar ---------- */

.sidebar {
  min-width: 0;
  padding: var(--sp-3) var(--sp-2);
  border-right: 1px solid var(--border);
  /* vibrancy da sidebar nativa: translucida sobre o fundo da janela */
  background: color-mix(in srgb, var(--container) 78%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.sb-sec + .sb-sec { margin-top: var(--sp-5); }

.sb-rot {
  display: block;
  padding: 0 var(--sp-3) var(--sp-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-3);
}

.sb-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-width: 0;
  padding: 6px var(--sp-3);
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: var(--r-8);
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.sb-item + .sb-item { margin-top: 1px; }
.sb-item:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }

/* selecionada — a unica cor da sidebar, como no Finder e no Mail */
.sb-item[aria-current="page"] {
  background: var(--info);
  color: #fff;
  font-weight: 500;
}
.sb-item[aria-current="page"] .sb-cont,
.sb-item[aria-current="page"] .sb-ico { color: #fff; opacity: .9; }

.sb-ico  { flex: none; width: 17px; text-align: center; font-size: 14px; color: var(--muted); }
.sb-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-cont {
  flex: none;
  font-size: 11.5px;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- painel de conteudo ---------- */

.painel { min-width: 0; padding: var(--sp-5) var(--sp-6) var(--sp-6); }

.painel-topo { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-5); }

.busca {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px var(--sp-3);
  background: var(--container-2);
  border: 1px solid var(--border);
  border-radius: var(--r-10);
}
.busca span { flex: none; color: var(--muted-3); font-size: 13px; }
.busca input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  outline: 0;
}
.busca input::placeholder { color: var(--muted-3); }
.busca:focus-within { border-color: var(--info); }

/* ---------- resumo (a faixa de numeros do topo) ---------- */

.resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }

.resumo-cel {
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-11);
  box-shadow: var(--shadow-btn);
}
.resumo-rot {
  display: block;
  font-size: 11.5px;
  color: var(--muted-2);
  line-height: 1.2;
  /* caixa de duas linhas: "Nome não identifica" nao cabe em uma so dentro do
     frame do notebook, e cortar com reticencias some justamente com o que a
     metrica quer dizer. Altura fixa mantem os quatro numeros alinhados. */
  min-height: 2.4em;
  overflow-wrap: anywhere;
}
.resumo-val {
  display: block;
  font-family: var(--font-serif);
  font-size: 27px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.resumo-sub { display: block; font-size: 11.5px; color: var(--muted-3); }

/* ---------- variante miniatura ----------
   Usada nas telas da galeria da LP, onde o casco aparece como retrato do app e
   nao como interface operavel. De proposito ela NAO acompanha o breakpoint de
   860px: e a fotografia de um app de Mac, que tem sidebar em qualquer largura. */

.app-shell.compacto { grid-template-columns: 124px minmax(0, 1fr); min-height: 0; }
.app-shell.compacto .sidebar  { padding: var(--sp-2) 6px; }
.app-shell.compacto .sb-sec + .sb-sec { margin-top: var(--sp-3); }
.app-shell.compacto .sb-rot   { font-size: 9px; padding: 0 8px 4px; }
.app-shell.compacto .sb-item  { padding: 4px 8px; gap: 6px; font-size: 11px; }
.app-shell.compacto .sb-ico   { width: 12px; font-size: 10px; }
.app-shell.compacto .sb-cont  { font-size: 9.5px; }
.app-shell.compacto .painel   { padding: var(--sp-3); }
.app-shell.compacto .grupo    { padding: var(--sp-2) var(--sp-3); }
.app-shell.compacto .grupo-icone { width: 30px; height: 30px; font-size: 15px; }
.app-shell.compacto .grupo-nome  { font-size: 13px; }
.app-shell.compacto .grupo-sub   { font-size: 11.5px; }
.app-shell.compacto .grupo-qtd   { font-size: 18px; }

/* ---------- cabecalho de vista ---------- */

.vista-cab { margin-bottom: var(--sp-4); }
.vista-cab h2 { font-size: 17px; }
.vista-cab p  { font-size: 13px; color: var(--muted); margin-top: 2px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: var(--sp-10) var(--sp-4) var(--sp-16); }
.rodape { margin-top: var(--sp-8); font-size: 12.5px; color: var(--muted-2); text-align: center; }
.hidden { display: none !important; }

/* O casco de duas colunas e uma metafora de desktop. Abaixo de 860px a sidebar
   deixa de ser coluna e vira uma faixa horizontal rolavel acima do conteudo. */
@media (max-width: 860px) {
  .app-shell:not(.compacto) { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .app-shell:not(.compacto) > .sidebar {
    display: flex; gap: var(--sp-1);
    overflow-x: auto;
    padding: var(--sp-2);
    border-right: 0;
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
  }
  .app-shell:not(.compacto) > .sidebar::-webkit-scrollbar { display: none; }
  .app-shell:not(.compacto) .sb-sec { display: flex; gap: var(--sp-1); }
  .app-shell:not(.compacto) .sb-sec + .sb-sec { margin-top: 0; }
  /* o rotulo "ORIGENS" vira divisoria vertical entre as duas zonas */
  .app-shell:not(.compacto) .sb-rot {
    align-self: center; padding: 0 var(--sp-2) 0 var(--sp-1);
    border-left: 1px solid var(--border-strong);
    margin-left: var(--sp-1);
  }
  .app-shell:not(.compacto) .sb-item { width: auto; white-space: nowrap; }
  .app-shell:not(.compacto) .sb-item + .sb-item { margin-top: 0; }
  .app-shell:not(.compacto) .sb-nome { overflow: visible; }
  .app-shell:not(.compacto) .painel { padding: var(--sp-4); }
  .resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .mac-body { padding: var(--sp-4); }
  .resumo-val { font-size: 23px; }
  /* selo com nowrap impedia a linha de quebrar e estourava o container
     dentro do hero da LP (399px num viewport de 390px). */
  .selo { white-space: normal; }
  /* O nome do arquivo e o dado mais importante da linha, e num produto que se
     vende por "de onde veio isso" ele nao pode ser o primeiro a sumir. Com os
     selos quebrando em varias linhas, o .arq-nome (flex:1 + ellipsis) era
     espremido ate zero. Aqui ele toma a primeira linha e os selos descem. */
  .arq { flex-wrap: wrap; row-gap: var(--sp-2); }
  .arq-nome {
    flex: 1 1 calc(100% - 2rem);
    white-space: normal; overflow: visible; overflow-wrap: anywhere;
  }
  .arq-meta { margin-left: auto; }
  .grupo { flex-wrap: wrap; }
  .grupo-num { margin-left: auto; }
  /* a barra de menu e uma metafora de desktop: em tela estreita ela quebra
     em duas linhas e atrapalha, entao os itens de sistema saem. */
  .menubar { height: auto; padding: 5px var(--sp-3); }
  .menubar .muted2 { display: none; }
  .mac-title { margin-right: 0; font-size: 12.5px; }
  .diff-linha { grid-template-columns: 1fr; }
  .diff-seta { display: none; }
  .grupo-sub { font-size: 12px; }
}