@import url("/tokens.css");

/* === REBOOT SHELL — app chrome (pin 18/09) === */
/* Parecer aplicativo operacional — não blog/documento. MIV + disciplina Apple/Grok. */

body.app-shell {
  background: var(--miv-elevated-dark);
}

.app-frame {
  display: grid;
  grid-template-columns: var(--rail-w, 13.5rem) minmax(0, 1fr);
  min-height: 100dvh;
  background: var(--color-bg);
}

.app-rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-12);
  background: var(--miv-elevated-dark);
  color: var(--miv-mineral-paper);
  border-right: 1px solid color-mix(in srgb, var(--miv-mineral-paper) 10%, transparent);
  z-index: 50;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-8);
  color: var(--miv-mineral-paper);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.app-brand:hover { color: #fff; }
.app-brand .brand-mark {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-2);
  background: var(--miv-oxblood);
  flex: 0 0 auto;
}
.app-brand-text { opacity: 0.92; }

/* Rail nav — vertical app chrome */
body.app-shell .app-rail .nav-app {
  position: static;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  flex: 1 1 auto;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  background: transparent;
  backdrop-filter: none;
  overflow: visible;
  border: 0;
  min-height: 0;
}
body.app-shell .app-rail .nav-app a,
body.app-shell .app-rail .nav-more > summary {
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: var(--space-8) var(--space-12);
  margin: 0;
  border-radius: var(--radius-2);
  color: color-mix(in srgb, var(--miv-mineral-paper) 72%, transparent);
  text-decoration: none;
  font-size: var(--text-aux);
  font-weight: 500;
  white-space: nowrap;
  background: transparent;
  border: 0;
}
body.app-shell .app-rail .nav-app a:hover,
body.app-shell .app-rail .nav-more > summary:hover {
  color: #fff;
  background: color-mix(in srgb, var(--miv-mineral-paper) 8%, transparent);
}
body.app-shell .app-rail .nav-app a[aria-current="page"] {
  color: #fff;
  background: var(--miv-oxblood);
  font-weight: 600;
}
body.app-shell .app-rail .nav-app a[data-sair] {
  margin-top: auto;
  margin-left: 0;
  color: color-mix(in srgb, var(--miv-mineral-paper) 55%, transparent);
}
body.app-shell .app-rail .nav-more {
  display: contents;
}
body.app-shell .app-rail .nav-more > summary { display: none; }
body.app-shell .app-rail .nav-more-panel {
  display: contents;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  position: static;
}

.app-stage {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}

body.app-shell .app-stage > header.app-header,
body.app-shell .app-stage > header {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: var(--space-16) var(--space-24) var(--space-12);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title badge"
    "lede lede";
  gap: var(--space-4) var(--space-16);
  align-items: start;
}
body.app-shell .app-header h1,
body.app-shell .app-header h1.conclusao {
  grid-area: title;
  margin: 0;
  font-size: var(--text-title);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  max-width: none;
}
body.app-shell .app-header .lede,
body.app-shell .app-header .conclusao-frase {
  grid-area: lede;
  margin: 0;
  max-width: none;
  font-size: var(--text-aux);
  line-height: var(--leading);
}
body.app-shell .app-header .badge {
  grid-area: badge;
  justify-self: end;
  align-self: start;
}

body.app-shell .app-stage > main {
  max-width: min(72rem, 100%);
  width: 100%;
  margin: 0;
  padding: var(--space-16) var(--space-24) var(--space-48);
  gap: var(--app-gap, var(--space-12));
}

/* Dono: decisão ainda focada, mas dentro do shell */
body.app-shell.page-dono .app-stage > header,
body.app-shell.page-dono .app-stage > main {
  max-width: none;
  width: 100%;
}

/* Painéis — não card-blog */
body.app-shell .card {
  border-radius: var(--radius-2);
  padding: var(--panel-pad, var(--space-12)) var(--space-16);
  box-shadow: none;
  gap: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
body.app-shell .card > strong:first-child {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
body.app-shell .zona-primaria {
  border-color: color-mix(in srgb, var(--miv-oxblood) 22%, var(--color-border));
  background: var(--color-surface-2, var(--color-surface));
}
body.app-shell .kpi-grid {
  gap: var(--space-8) var(--space-12);
  padding: var(--space-12) var(--space-16);
}
body.app-shell .mesa-item {
  padding-block: var(--space-12);
  border-radius: 0;
}
body.app-shell .empty-state {
  padding: var(--space-24) var(--space-16);
}

/* Ops: duas colunas leves quando couber */
@media (min-width: 1100px) {
  body.app-shell.page-operador .app-stage > main,
  body.app-shell.page-mesa .app-stage > main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Auth / index — ainda produto, sem rail, sem blog largo */
body.page-login,
body.page-index,
body:not(.app-shell) {
  background: var(--color-bg);
}
body.page-login header,
body.page-login main {
  max-width: var(--max-w);
}
body.page-login .card,
body.page-login main.card {
  border-radius: var(--radius-2);
  box-shadow: none;
}

/* Mobile: rail vira topbar densa */
@media (max-width: 860px) {
  .app-frame {
    grid-template-columns: 1fr;
  }
  .app-rail {
    position: sticky;
    top: 0;
    height: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .app-rail::-webkit-scrollbar { display: none; }
  .app-brand { flex: 0 0 auto; padding: var(--space-4); }
  .app-brand-text { display: none; }
  body.app-shell .app-rail .nav-app {
    flex-direction: row;
    flex: 1 1 auto;
    overflow-x: auto;
  }
  body.app-shell .app-rail .nav-more {
    display: inline-flex;
    position: relative;
  }
  body.app-shell .app-rail .nav-more > summary {
    display: inline-flex;
  }
  body.app-shell .app-rail .nav-more-panel {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 9rem;
    padding: var(--space-8);
    background: var(--miv-elevated-dark);
    border: 1px solid color-mix(in srgb, var(--miv-mineral-paper) 14%, transparent);
    border-radius: var(--radius-2);
  }
  body.app-shell .app-rail .nav-app a[data-sair] {
    margin-top: 0;
    margin-left: auto;
  }
  body.app-shell .app-stage > header.app-header {
    padding: var(--space-12) var(--space-16);
    position: static;
  }
  body.app-shell .app-stage > main {
    padding: var(--space-12) var(--space-16) var(--space-32);
  }
  body.app-shell .touch-bar {
    left: 0;
    right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-rail { backdrop-filter: none; }
}


/* Auth — produto focado, não landing */
body.page-auth {
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
body.page-auth header,
body.page-auth main {
  max-width: var(--max-w);
  width: 100%;
}
body.page-auth main.card,
body.page-auth .card {
  border-radius: var(--radius-2);
  box-shadow: none;
  border: 1px solid var(--color-border);
}
body.page-auth h1 {
  font-size: var(--text-title);
}

/* === REBOOT SHELL END === */


*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading);
  letter-spacing: var(--tracking-tight);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100dvh;
}

header, main {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: var(--space-24) var(--space-16) var(--space-16);
}
main {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap, var(--space-16));
  padding-bottom: var(--space-48);
}
header {
  padding-bottom: var(--space-8);
}

body.page-login header,
body.page-login main,
body.page-dono header,
body.page-dono main {
  max-width: var(--max-w);
}

h1 {
  font-family: var(--font-sans);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: var(--leading-tight, 1.25);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-8);
  color: var(--color-text);
}

h1.conclusao {
  font-size: clamp(1.35rem, 4vw, 1.75rem);
}

.lede, .oferta {
  font-size: var(--text-lede, var(--text-aux));
  color: var(--color-text-muted);
  margin: 0 0 var(--space-8);
  max-width: 36rem;
  line-height: var(--leading);
}

.muted { color: var(--color-text-muted); }

a {
  color: var(--color-brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--miv-signal); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-4);
  padding: var(--card-pad-lg, var(--card-pad));
  display: grid;
  gap: var(--space-12);
}
.card > strong:first-child,
.card > .card-title {
  font-size: var(--text-aux);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

.card.narrow { max-width: var(--max-w); }

.badge {
  display: inline-block;
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-2);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}
.badge.vazio { background: color-mix(in srgb, var(--miv-signal) 12%, var(--color-surface)); color: var(--color-danger-ink); border-color: color-mix(in srgb, var(--miv-signal) 35%, transparent); }
.badge.pronto, .badge.recuperado { background: color-mix(in srgb, var(--miv-lichen) 28%, var(--color-surface)); color: var(--color-ok-ink); border-color: color-mix(in srgb, var(--miv-lichen) 45%, transparent); }
.badge.preservado { background: color-mix(in srgb, var(--miv-oxblood) 10%, var(--color-surface)); color: var(--miv-oxblood); }
.badge.erro { background: color-mix(in srgb, var(--miv-signal) 18%, var(--color-surface)); color: var(--color-danger-ink); border-color: var(--miv-signal); }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: var(--space-16) 0;
  align-items: center;
}

button, .linkbtn {
  font-family: var(--font-sans);
  font-size: var(--text-aux);
  font-weight: 600;
  background: var(--color-action);
  color: var(--color-action-text);
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  padding: var(--space-12) var(--space-16);
  min-height: var(--touch-min);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), opacity var(--motion-fast) var(--ease);
}
button:hover, .linkbtn:hover { background: color-mix(in srgb, var(--miv-oxblood) 88%, var(--miv-graphite)); }
button:active, .linkbtn:active { transform: translateY(1px); }
button.secondary, a.linkbtn {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
button.secondary:hover, a.linkbtn:hover {
  background: var(--color-surface-2);
  border-color: var(--miv-oxblood);
  color: var(--miv-oxblood);
}
button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

button:focus-visible,
.linkbtn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: var(--focus-ring, 2px) solid var(--color-focus);
  outline-offset: var(--focus-offset, 2px);
  box-shadow: 0 0 0 var(--space-4) color-mix(in srgb, var(--miv-oxblood) 22%, transparent);
}
button:focus-visible,
.linkbtn:focus-visible {
  /* CTA primário — Oxblood visível */
  outline-color: var(--miv-oxblood);
}

label {
  display: block;
  font-size: var(--text-aux);
  font-weight: 500;
  color: var(--color-text);
}

input, select, textarea {
  font-family: var(--font-sans);
  font-size: 1rem; /* evita zoom iOS */
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-12);
  margin-top: var(--space-4);
  border-radius: var(--radius-2);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-2);
  color: var(--color-text);
}
input::placeholder { color: var(--color-text-muted); }

pre {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-4);
  padding: var(--space-16);
  overflow: auto;
  min-height: 120px;
  white-space: pre-wrap;
  color: var(--color-text-muted);
}
pre.erro { border-color: var(--miv-signal); color: var(--color-danger-ink); background: color-mix(in srgb, var(--miv-signal) 8%, var(--color-surface)); }
pre.sucesso { border-color: var(--miv-lichen); color: var(--color-ok-ink); background: color-mix(in srgb, var(--miv-lichen) 14%, var(--color-surface)); }

.cal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-8);
  margin: var(--space-16) 0;
}
.week {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-4);
  padding: var(--space-12);
  font-size: var(--text-aux);
}
.wh { font-weight: 600; margin-bottom: var(--space-4); }
.min { margin-top: var(--space-4); color: var(--miv-oxblood); font-weight: 600; }
.week.destaque {
  border-color: var(--miv-lichen);
  background: var(--color-destaque);
  box-shadow: inset 3px 0 0 var(--miv-lichen);
}
.week.restante { opacity: 0.72; }

.dono-main #resumo {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--miv-graphite) 8%, transparent);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--color-text);
}
.dono-main #resumo.muted { color: var(--color-text-muted); font-family: var(--font-sans); font-size: var(--text-aux); }

.empty-state {
  text-align: center;
  padding: var(--space-32) var(--space-16);
  color: var(--color-text-muted);
}
.empty-state strong {
  display: block;
  color: var(--color-text);
  margin-bottom: var(--space-8);
  font-size: var(--text-title);
  font-weight: 600;
}

.state-ok {
  border-color: color-mix(in srgb, var(--miv-lichen) 50%, transparent);
  background: color-mix(in srgb, var(--miv-lichen) 12%, var(--color-surface));
}
.state-erro {
  border-color: color-mix(in srgb, var(--miv-signal) 55%, transparent);
  background: color-mix(in srgb, var(--miv-signal) 10%, var(--color-surface));
}

.steps { margin: var(--space-16) 0; padding-left: 1.25rem; }
.steps li { margin: var(--space-8) 0; }

.wiz-nav button.active {
  border-color: var(--miv-oxblood);
  color: var(--miv-oxblood);
  background: color-mix(in srgb, var(--miv-oxblood) 8%, var(--color-surface));
}

ol.ciclo {
  margin: var(--space-16) 0;
  padding-left: 1.25rem;
  line-height: 1.6;
}

.mesa-item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-12) 0;
}
.mesa-item:last-child { border-bottom: 0; }
.mesa-item.tratado { opacity: 0.55; }
.mesa-item .codigo { font-weight: 600; color: var(--miv-oxblood); }
.mesa-item .ajuda {
  margin-top: var(--space-8);
  padding: var(--space-12);
  background: var(--color-surface-2);
  border-radius: var(--radius-2);
  border-left: 3px solid var(--miv-lichen);
  font-size: var(--text-aux);
}

.filtros input, .filtros select { width: auto; min-width: 12rem; flex: 1 1 10rem; }

.brand-mark {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--miv-oxblood);
  border-radius: var(--radius-0);
  margin-right: var(--space-8);
  vertical-align: middle;
}

.touch-bar {
  position: sticky;
  bottom: 0;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-border);
  padding: var(--space-12);
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  z-index: 3;
}
.touch-bar button { min-height: var(--touch-min); flex: 1 1 40%; }

@media (max-width: 640px) {
  header, main { padding: var(--space-16) var(--space-12); }
  h1 { font-size: var(--text-title); }
  .cal { grid-template-columns: 1fr; }
  .row button, .row .linkbtn { flex: 1 1 100%; }
  pre { min-height: 100px; font-size: 0.75rem; }
  .desktop-only-row { display: none !important; }
}
@media (min-width: 641px) {
  .touch-bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  button:active, .linkbtn:active { transform: none; }
  .touch-bar { backdrop-filter: none; }
}

/* Skip link a11y */
.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-8);
  background: var(--miv-oxblood);
  color: var(--color-action-text);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-2);
  z-index: 100;
}
.skip-link:focus,
.skip-link:focus-visible { left: var(--space-8); }

.demo-banner {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  border-left: 3px solid var(--miv-lichen);
  padding-left: var(--space-12);
  margin-top: var(--space-8);
}

.state-warn { color: var(--color-danger-ink); }

/* —— Product depth: ciclo / revisão / onboarding / diagnóstico —— */
.nav-app {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  align-items: center;
  margin: 0 0 var(--space-16);
  font-size: var(--text-aux);
}
.nav-app a {
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-4) 0;
  border-bottom: 2px solid transparent;
}
.nav-app a:hover { color: var(--miv-oxblood); }
.nav-app a[aria-current="page"] {
  color: var(--miv-oxblood);
  font-weight: 600;
  border-bottom-color: var(--miv-oxblood);
}
.nav-app a[data-sair] { margin-left: auto; }

.ciclo-steps {
  list-style: none;
  margin: var(--space-16) 0;
  padding: 0;
  display: grid;
  gap: var(--space-8);
}
.ciclo-steps li {
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
  padding: var(--space-12) var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-4);
}
.ciclo-steps li.done { border-color: color-mix(in srgb, var(--miv-lichen) 45%, transparent); }
.ciclo-steps li.current { border-color: var(--miv-oxblood); box-shadow: inset 3px 0 0 var(--miv-oxblood); }
.step-n {
  flex: 0 0 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--color-surface-2);
  color: var(--miv-oxblood);
  border-radius: var(--radius-2);
}
.ciclo-steps li.done .step-n {
  background: color-mix(in srgb, var(--miv-lichen) 28%, var(--color-surface));
  color: var(--color-ok-ink);
}
.ciclo-steps li p { margin: var(--space-4) 0 0; color: var(--color-text-muted); font-size: var(--text-aux); }

.zona-primaria { margin: var(--space-16) 0; }
.tip { margin: var(--space-4) 0 var(--space-12); }

.resultado-humano {
  display: block;
  margin: var(--space-12) 0;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-4);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-aux);
  line-height: 1.45;
}
.resultado-humano[hidden] { display: none !important; }
.resultado-humano.toast-ok {
  border-color: color-mix(in srgb, var(--miv-lichen) 50%, transparent);
  background: color-mix(in srgb, var(--miv-lichen) 14%, var(--color-surface));
  color: var(--color-ok-ink);
}
.resultado-humano.state-erro,
.resultado-humano.estado-erro {
  border-color: color-mix(in srgb, var(--miv-signal) 45%, transparent);
  background: color-mix(in srgb, var(--miv-signal) 10%, var(--color-surface));
  color: var(--color-danger-ink);
}

.outcome-panel { margin: var(--space-12) 0; }
.outcome-panel.toast-ok { border-color: color-mix(in srgb, var(--miv-lichen) 40%, transparent); }

.kpi-grid, .kpi-grid.compact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--space-12);
  margin: var(--space-12) 0;
}
.kpi { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.kpi-label {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.kpi-value { font-size: var(--text-title); font-weight: 600; word-break: break-word; }

.diag-card.sev-alta, .confronto-card.sev-alta, .status-caixa.sev-alta {
  border-color: color-mix(in srgb, var(--miv-signal) 50%, transparent);
}
.diag-card.sev-ok, .confronto-card.sev-ok, .status-caixa.sev-ok {
  border-color: color-mix(in srgb, var(--miv-lichen) 45%, transparent);
}
.diag-list { margin: var(--space-8) 0; padding-left: 1.15rem; }
.diag-list li { margin: var(--space-4) 0; }

.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-2);
  font-size: var(--text-caption);
  font-weight: 700;
  border: 1px solid var(--color-border);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.chip.sev-alta, .sev-alta.chip {
  background: color-mix(in srgb, var(--miv-signal) 14%, var(--color-surface));
  color: var(--color-danger-ink);
  border-color: color-mix(in srgb, var(--miv-signal) 40%, transparent);
}
.chip.sev-media {
  background: color-mix(in srgb, var(--miv-oxblood) 10%, var(--color-surface));
  color: var(--miv-oxblood);
}
.chip.sev-ok, .chip.sev-baixa {
  background: color-mix(in srgb, var(--miv-lichen) 18%, var(--color-surface));
  color: var(--color-ok-ink);
}

.confronto-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-4);
  padding: var(--space-16);
  margin: var(--space-12) 0;
  background: var(--color-surface);
}
.confronto-head { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; margin-bottom: var(--space-8); }
.leitura { margin: 0 0 var(--space-12); line-height: 1.45; }
.cod-diff { margin: var(--space-8) 0; padding-left: 1.1rem; font-size: var(--text-aux); }

.week-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-12);
}
.week-chip {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-4);
  padding: var(--space-8) var(--space-12);
  background: var(--color-surface-2);
  display: grid;
  gap: var(--space-4);
}
.week-chip.abaixo {
  border-color: var(--miv-signal);
  background: color-mix(in srgb, var(--miv-signal) 8%, var(--color-surface));
}
.week-chip .wh { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); }
.week-chip .wm { font-weight: 700; }
.week-chip .wd { font-size: var(--text-caption); }

.empty-state {
  text-align: center;
  padding: var(--space-24) var(--space-16);
  color: var(--color-text);
}
.empty-state strong { display: block; margin-bottom: var(--space-8); font-size: 1.05rem; }
.empty-state p { color: var(--color-text-muted); margin: 0 auto; max-width: 28rem; }

.ops-avancado, .tech-out-wrap {
  margin: var(--space-16) 0;
  padding: var(--space-12) var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-4);
}
.ops-avancado > summary, .tech-out-wrap > summary {
  cursor: pointer;
  font-weight: 600;
  min-height: var(--touch-min, 44px);
  display: flex;
  align-items: center;
}
.tech-out-wrap pre {
  min-height: 80px;
  opacity: 0.85;
  font-size: 0.75rem;
}

.progress-bar {
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
  margin: var(--space-8) 0;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: var(--miv-oxblood);
  transition: width var(--motion-base) var(--ease);
}
.wiz-nav button.active {
  border-color: var(--miv-oxblood);
  color: var(--miv-oxblood);
  font-weight: 600;
}

@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .nav-app a[data-sair] { margin-left: 0; }
}

/* —— UX Slice: tenant-switch clareza —— */
.nav-empresa,
.nav-empresa--chip {
  display: inline-flex;
  align-items: center;
  max-width: 14rem;
  min-height: var(--touch-min);
  padding: var(--space-4) var(--space-12);
  margin-right: var(--space-8);
  border-radius: var(--radius-2);
  border: 1px solid color-mix(in srgb, var(--miv-oxblood) 35%, transparent);
  background: color-mix(in srgb, var(--miv-oxblood) 8%, var(--color-surface));
  color: var(--miv-oxblood);
  font-size: 0.75rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-app select.nav-switch-empresa {
  width: auto;
  min-width: 10rem;
  max-width: 16rem;
  min-height: var(--touch-min);
  margin: 0 var(--space-8) 0 0;
  padding: var(--space-8) var(--space-12);
  font-size: var(--text-aux);
  font-weight: 600;
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
}
.nav-app select.nav-switch-empresa:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.empresa-contexto {
  margin: 0 0 var(--space-8);
  font-size: var(--text-aux);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}
.empresa-contexto__chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-2);
  background: color-mix(in srgb, var(--miv-oxblood) 10%, var(--color-surface));
  color: var(--miv-oxblood);
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--miv-oxblood) 28%, transparent);
}
.empresa-switch-banner {
  margin: var(--space-12) 0 0;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-4);
  border: 1px solid color-mix(in srgb, var(--miv-lichen) 50%, transparent);
  background: color-mix(in srgb, var(--miv-lichen) 14%, var(--color-surface));
  color: var(--color-ok-ink);
  font-size: var(--text-aux);
  line-height: 1.45;
}
.empresa-switch-banner strong {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--color-text);
}
body.is-switching-empresa {
  cursor: wait;
  opacity: 0.85;
}
.row-center { justify-content: center; }
.row-flush { margin: 0; }
.row-primary { margin-top: var(--space-12); }
.loading-state {
  text-align: center;
  padding: var(--space-32) var(--space-16);
  color: var(--color-text-muted);
}
.loading-state strong {
  display: block;
  color: var(--color-text);
  margin-bottom: var(--space-8);
}
.frase-resultado {
  font-size: clamp(1.05rem, 2.8vw, 1.2rem);
  line-height: 1.35;
  margin: 0;
  color: var(--color-text);
  max-width: 40rem;
}
.ciclo-steps {
  list-style: none;
  margin: 0 0 var(--space-16);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
}
.ciclo-step {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-4);
  background: var(--color-surface);
  min-height: var(--touch-min);
}
.ciclo-step__n {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.ciclo-step__label { font-size: var(--text-aux); line-height: 1.3; }
.ciclo-step.is-done { border-color: color-mix(in srgb, var(--miv-lichen) 45%, transparent); }
.ciclo-step.is-done .ciclo-step__n {
  background: color-mix(in srgb, var(--miv-lichen) 28%, var(--color-surface));
  color: var(--color-ok-ink);
  border-color: transparent;
}
.ciclo-step.is-current {
  border-color: var(--miv-oxblood);
  box-shadow: inset 3px 0 0 var(--miv-oxblood);
}
.ciclo-step.is-current .ciclo-step__n {
  background: var(--miv-oxblood);
  color: var(--color-action-text);
  border-color: transparent;
}
.ciclo-step.is-warn {
  border-color: color-mix(in srgb, var(--miv-signal) 45%, transparent);
}
@media (max-width: 640px) {
  .ciclo-steps { grid-template-columns: 1fr 1fr; }
  .nav-empresa, .nav-empresa--chip { max-width: 9rem; }
}\n
/* —— UX Gap1: operador cockpit diagnóstico —— */
.diag-cockpit { display: grid; gap: var(--space-8); }
.diag-cockpit .diag-titulo { font-size: var(--text-title); }
.diag-cockpit .diag-nivel { text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--text-caption); margin: 0; }
.diag-ok { border-color: color-mix(in srgb, var(--miv-lichen) 45%, transparent); }
.diag-atencao { border-color: color-mix(in srgb, var(--miv-oxblood) 35%, transparent); }
.diag-bloqueio { border-color: var(--miv-signal); background: color-mix(in srgb, var(--miv-signal) 6%, var(--color-surface)); }
.diag-reavaliar { border-color: var(--miv-signal); }
.diag-neutro { }
.row-acoes-primarias { margin-top: var(--space-12); }
.page-operador .zona-primaria { border-color: color-mix(in srgb, var(--miv-oxblood) 28%, transparent); }

.row-mt { margin-top: var(--space-12); }

/* —— B5c a11y touch/empty —— */
.nav-app a,
.nav-app button,
.wiz-nav button,
summary {
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
}
.chip {
  min-height: 28px;
  align-items: center;
}
.helper {
  color: var(--color-text-muted);
  font-size: var(--text-aux);
  line-height: 1.4;
}
.empty-state {
  padding: var(--space-24) var(--space-16);
}
.empty-state .helper {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}
.page-login input,
.page-recuperar input,
.page-convite input {
  min-height: var(--touch-min);
}
.tech-snippet {
  min-height: auto;
  padding: var(--space-12);
  font-size: 0.8rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-4);
  overflow-x: auto;
}

/* Densidade operacional — mesa por severidade + cal frase curta */
.mesa-lista--grouped { padding: var(--space-12); display: flex; flex-direction: column; gap: var(--space-12); }
.mesa-sev-group { border: 1px solid var(--color-border); border-radius: var(--radius-4); padding: 0; background: var(--miv-elevated-light); }
.mesa-sev-group > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-8); min-height: var(--touch-min); padding: var(--space-8) var(--space-12); }
.mesa-sev-group > summary::-webkit-details-marker { display: none; }
.mesa-sev-body { padding: 0 var(--space-12) var(--space-12); display: flex; flex-direction: column; gap: var(--space-12); }
.week-frase { font-size: var(--text-aux); margin: var(--space-4) 0 0; line-height: var(--leading); max-height: 2.7em; overflow: hidden; }
.ciclo-empty .helper { margin-top: var(--space-8); }

/* Outbox e-mail (SMTP UI) */
.mail-outbox-panel .mail-outbox-list { margin-top: var(--space-8); }
.mail-outbox-item { padding: var(--space-8) 0; }
.mail-preview > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }

/* === ELEVATION LAYER — Frente #1 (MIV + Apple/Emil + Grok) === */
/* Hierarquia · ritmo · menos ruído — sem feature nova */

.nav-app {
  margin: 0 0 var(--space-24);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-4) var(--space-16);
}
.nav-app a {
  font-size: var(--text-aux);
  font-weight: 500;
  padding: var(--space-8) var(--space-4);
  border-radius: var(--radius-2);
  color: var(--color-text-muted);
}
.nav-app a:hover {
  color: var(--miv-oxblood);
  background: color-mix(in srgb, var(--miv-oxblood) 6%, transparent);
}
.nav-app a[aria-current="page"] {
  color: var(--miv-oxblood);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--miv-oxblood);
}

.badge {
  font-size: var(--text-caption, 0.75rem);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  margin-top: var(--space-12);
}

.zona-primaria {
  border-color: color-mix(in srgb, var(--miv-oxblood) 22%, var(--color-border));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--miv-graphite) 4%, transparent);
}
.zona-primaria > strong:first-child {
  color: var(--miv-oxblood);
}

.empty-state {
  text-align: center;
  padding: var(--space-32) var(--space-24);
  justify-items: center;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--miv-graphite) 18%, transparent);
  background: color-mix(in srgb, var(--miv-elevated-light) 70%, var(--miv-mineral-paper));
}
.empty-state strong {
  font-size: var(--text-title);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.empty-state .helper,
.empty-state p {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

.leitura {
  font-size: var(--text-body);
  line-height: var(--leading);
  margin: 0;
}
.helper {
  font-size: var(--text-aux);
  color: var(--color-text-muted);
  line-height: var(--leading);
}

.status-caixa .kpi-label,
.kpi-label {
  font-size: var(--text-caption, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.kpi-value {
  font-size: var(--text-title);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.diag-cockpit .diag-titulo,
.diag-cockpit strong.diag-titulo {
  font-size: var(--text-title);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.mesa-item {
  padding: var(--space-16);
  border-radius: var(--radius-4);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.mesa-item-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-8);
}
.mesa-sev-group > summary {
  font-weight: 600;
}

.week {
  padding: var(--space-16);
  border-radius: var(--radius-4);
}
.week .wh {
  font-weight: 600;
  font-size: var(--text-aux);
  margin-bottom: var(--space-8);
}
.week-frase {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.page-login main.card.narrow,
.page-dono main {
  gap: var(--space-16);
}
.page-login h1 {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.page-login .demo-banner {
  font-size: var(--text-aux);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-2);
  background: color-mix(in srgb, var(--miv-graphite) 5%, var(--color-surface));
  border: 1px solid var(--color-border);
  max-width: none;
}

.ops-avancado {
  margin-top: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-4);
  padding: 0 var(--space-16);
  background: transparent;
}
.ops-avancado > summary {
  font-size: var(--text-aux);
  color: var(--color-text-muted);
  font-weight: 500;
}

.conclusao-frase {
  font-size: clamp(1.1rem, 2.6vw, 1.35rem) !important;
  line-height: 1.4 !important;
  max-width: 38rem !important;
}

@media (min-width: 720px) {
  header, main {
    padding-left: var(--space-24);
    padding-right: var(--space-24);
  }
}

/* === A01–A08 estados: loading ≠ empty === */
.loading-state {
  border-style: solid;
  border-color: var(--color-border);
  background: var(--color-surface);
  text-align: left;
  justify-items: start;
}
.loading-state strong,
.loading-state .helper {
  color: var(--color-text-muted);
  font-weight: 500;
}
.card.status-caixa.loading-state,
.card.kpi-grid.loading-state {
  opacity: 0.92;
}
.badge:not(.vazio):not(.pronto):not(.erro):not(.preservado):not(.recuperado) {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}


/* Operador — grupos em «Mais ações» (sem farm plana) */
.ops-groups { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-12) 0 var(--space-16); }
.ops-group-title {
  display: block;
  font-size: var(--text-caption, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}
.ops-group .row { margin-top: 0; }
.ops-sondas { margin-top: var(--space-8); }


.mesa-codigo-meta {
  font-size: var(--text-caption, 0.75rem);
  margin-left: auto;
  opacity: 0.7;
}


/* Demo banner → chip discreto (smoke ainda exige classe demo-banner) */
.demo-banner.chip-ambiente,
p.demo-banner.chip-ambiente {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-caption, 0.75rem);
  font-weight: 500;
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--miv-graphite) 6%, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: var(--space-4) var(--space-12);
  margin: var(--space-8) 0 0;
  max-width: none;
  line-height: 1.3;
}
.page-login .lede.demo-banner { /* legacy */ }

.mesa-tipo { font-weight: 600; font-size: var(--text-aux); }
.mesa-tech { margin-top: var(--space-8); }
.mesa-tech > summary {
  font-size: var(--text-caption, 0.75rem);
  color: var(--color-text-muted);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}


/* Onda consistência secundárias — organização de produto */
body.page-ciclo header,
body.page-ciclo main,
body.page-auditoria header,
body.page-auditoria main,
body.page-onboarding header,
body.page-onboarding main,
body.page-revisao header,
body.page-revisao main {
  max-width: var(--max-w-wide);
}
body.page-convite header,
body.page-convite main,
body.page-recuperar header,
body.page-recuperar main {
  max-width: var(--max-w);
}
body.page-onboarding .dono-main {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap, var(--space-16));
}
.tech-out-wrap > summary {
  font-size: var(--text-aux);
  color: var(--color-text-muted);
  min-height: 44px;
  cursor: pointer;
}


/* Camada 2A — calendário subordinado à conclusão */
.cal-lede { margin: 0 0 var(--space-12); max-width: 36rem; }
.cal-foco { margin-bottom: var(--space-12); }
.week-layers { margin-top: var(--space-8); }
.week-layers > summary {
  font-size: var(--text-caption, 0.75rem);
  color: var(--color-text-muted);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.cal-restante-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-4);
  padding: 0 var(--space-12);
  margin-top: var(--space-8);
}
.cal-restante-wrap > summary {
  font-size: var(--text-aux);
  color: var(--color-text-muted);
  min-height: 44px;
  cursor: pointer;
}
.page-dono .cal .week.restante { opacity: 0.85; }
.page-dono #cal { margin-top: var(--space-8); }


/* Camada 3.1 — trilha onboarding sem farm de botões */
.wiz-trail {
  list-style: none;
  margin: 0 0 var(--space-16);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
}
.wiz-trail-step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-aux);
  color: var(--color-text-muted);
  min-height: 44px;
}
.wiz-trail-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: var(--text-caption, 0.75rem);
  font-weight: 600;
}
.wiz-trail-step.is-current {
  color: var(--miv-oxblood);
  font-weight: 600;
}
.wiz-trail-step.is-current .wiz-trail-n {
  border-color: var(--miv-oxblood);
  background: color-mix(in srgb, var(--miv-oxblood) 12%, var(--color-surface));
}
.wiz-trail-step.is-done .wiz-trail-n {
  border-color: var(--miv-lichen);
  color: var(--color-ok-ink);
}
.wiz-step-meta { margin: 0 0 var(--space-4); }


/* Camada 3.4 — cal olhômetro: cards quietos */
.week-quiet {
  padding: var(--space-12) var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.week-quiet .min { font-size: var(--text-body); font-weight: 600; }
.week-sinal { font-weight: 500; color: var(--color-text-muted); }
.week.abaixo-piso .week-sinal { color: var(--color-danger-ink); font-weight: 600; }
.cal-foco {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-8);
}


/* Passe fina — tipografia/espaço secundárias (convite/recuperar/auditoria) */
.row-flush { margin: 0; }
.muted-flush { margin: 0; }
.page-login label,
.page-convite label,
.page-recuperar label {
  display: block;
  margin: var(--space-4) 0 0;
  font-size: var(--text-aux);
  font-weight: 500;
  color: var(--color-text);
}
.page-login label:first-child,
.page-convite label:first-child,
.page-recuperar label:first-child,
.page-login #loginForm > label:first-of-type {
  margin-top: 0;
}
.page-login .empty-hint,
.page-convite .empty-hint,
.page-recuperar .empty-hint {
  margin: var(--space-8) 0 0;
  max-width: 28rem;
}
.page-login .resultado-humano,
.page-convite .resultado-humano,
.page-recuperar .resultado-humano {
  margin-top: var(--space-12);
}
.page-auditoria main > .helper {
  margin: 0;
  max-width: 36rem;
}
.page-auditoria .zona-primaria {
  gap: var(--space-12);
}
.page-auditoria .ops-sec {
  margin-top: 0;
}
.page-auditoria .tech-out-wrap {
  margin-top: 0;
}
.page-auditoria #lista.card {
  gap: var(--space-8);
}
.page-auditoria #lista .helper {
  margin: var(--space-4) 0 0;
}


/* Camada 4.5 — badge/loading/erro consistentes */
.badge.is-loading {
  color: var(--color-text-muted);
  font-weight: 500;
  border-style: dashed;
}
.badge.parcial {
  background: color-mix(in srgb, var(--miv-oxblood) 8%, var(--color-surface));
  color: var(--miv-oxblood);
}
.is-loading[aria-busy="true"] {
  opacity: 0.85;
}


.resultado-humano.is-loading {
  border-style: dashed;
  color: var(--color-text-muted);
  background: var(--color-surface);
}


/* Passe fina ociosa pós-C4 — ritmo secundárias */
body.page-index header,
body.page-index main {
  max-width: var(--max-w);
}
.page-index .zona-primaria .helper {
  margin: 0;
  max-width: 28rem;
}
.page-mesa .filtros {
  margin-top: var(--space-12);
}


/* === Camada 5 craft (MIV + HIG/Emil) — sem feature === */

/* A) ritmo espaço/tipo via tokens nas core */
.badge { font-size: var(--text-caption); }
.kpi-value { font-size: var(--text-title); }
.diag-cockpit .diag-titulo { font-size: var(--text-title); }
.brand-mark { width: var(--space-8); height: var(--space-8); }
.page-dono .conclusao-frase {
  font-size: var(--text-lede);
  line-height: var(--leading);
  margin: 0 0 var(--space-12);
  max-width: 40rem;
}

/* B) touch + foco já em botões; reforço summaries/nav */
.nav-app a,
summary,
.ops-avancado > summary,
.tech-out-wrap > summary {
  min-height: var(--touch-min);
}

/* C) uma voz empty / loading / erro */
.loading-state {
  border-style: solid;
  border-color: var(--color-border);
  background: var(--color-surface);
}
.loading-state strong,
.loading-state .helper {
  color: var(--color-text-muted);
  font-weight: 500;
}
.empty-state {
  text-align: center;
  padding: var(--space-24) var(--space-16);
  border-style: dashed;
}
.empty-state.state-erro,
.card.state-erro {
  border-color: color-mix(in srgb, var(--miv-signal) 45%, var(--color-border));
  background: color-mix(in srgb, var(--miv-signal) 8%, var(--color-surface));
}
.resultado-humano.is-loading,
.badge.is-loading {
  border-style: dashed;
  color: var(--color-text-muted);
}

/* D) motion útil 160–240; reduced já zera tokens + global */
a, .chip, .nav-app a, .ops-avancado, .week {
  transition: background var(--motion-fast) var(--ease),
              border-color var(--motion-fast) var(--ease),
              color var(--motion-fast) var(--ease),
              opacity var(--motion-base) var(--ease),
              box-shadow var(--motion-base) var(--ease);
}

/* E) dono — conclusão sticky manda; cal subordinado */
body.page-dono > header {
  position: sticky;
  top: 0;
  z-index: 6;
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(var(--space-8));
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-12);
  margin-bottom: var(--space-8);
}
body.page-dono h1.conclusao {
  font-size: clamp(var(--text-title), 4vw, var(--text-display));
  margin-bottom: var(--space-8);
}
body.page-dono #cal {
  order: 8;
  margin-top: var(--space-16);
  opacity: 0.92;
}
body.page-dono .cal-lede {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}
body.page-dono .cal-foco {
  gap: var(--space-8);
}
body.page-dono .week-quiet {
  padding: var(--space-8) var(--space-12);
  font-size: var(--text-aux);
}
body.page-dono .week.restante {
  opacity: 0.7;
}
body.page-dono .dono-main {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}
body.page-dono .dono-main #resumo {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  box-shadow: 0 var(--space-4) var(--space-16) color-mix(in srgb, var(--miv-graphite) 8%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  body.page-dono > header {
    backdrop-filter: none;
  }
}


/* Passe fina tipografia + empty (pós-C5) — todas as páginas */
h1 {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}
.lede {
  font-size: var(--text-lede);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-8);
  max-width: 36rem;
  line-height: var(--leading);
}
.wiz-after {
  margin-top: var(--space-16);
}
.empty-state {
  text-align: center;
  padding: var(--space-24) var(--space-16);
  border-style: dashed;
  border-color: color-mix(in srgb, var(--miv-graphite) 18%, transparent);
  background: color-mix(in srgb, var(--miv-elevated-light) 70%, var(--miv-mineral-paper));
  display: grid;
  gap: var(--space-8);
  justify-items: center;
}
.empty-state strong {
  display: block;
  font-size: var(--text-title);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin: 0;
}
.empty-state .helper,
.empty-state p {
  margin: 0;
  max-width: 28rem;
  font-size: var(--text-aux);
  color: var(--color-text-muted);
  line-height: var(--leading);
}
.loading-state {
  text-align: left;
  justify-items: start;
  border-style: solid;
  border-color: var(--color-border);
  background: var(--color-surface);
}
.loading-state.empty-state {
  /* loading vence o empty visual até resolver */
  border-style: solid;
  text-align: left;
  justify-items: start;
}
.card.empty-state > strong:first-child {
  font-size: var(--text-title);
}


/* === Camada 6 — voz / AA / a11y / mesa / header === */
.mesa-count-lede { margin: 0 0 var(--space-12); max-width: 36rem; }
.mesa-more {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-4);
  padding: 0 var(--space-12);
  margin-top: var(--space-8);
}
.mesa-more > summary {
  font-size: var(--text-aux);
  color: var(--color-text-muted);
  min-height: var(--touch-min);
  cursor: pointer;
}
header .brand-mark {
  flex-shrink: 0;
}
.nav-app {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-16);
}
#main:focus {
  outline: none;
}
#main:focus-visible {
  outline: var(--focus-ring, 2px) solid var(--color-focus);
  outline-offset: var(--focus-offset, 2px);
}


/* Camada 6E sticky headers + contexto em todas as telas produto */
body.page-operador > header,
body.page-mesa > header,
body.page-ciclo > header,
body.page-revisao > header,
body.page-auditoria > header,
body.page-onboarding > header,
body.page-index > header {
  position: sticky;
  top: 0;
  z-index: 6;
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(var(--space-8));
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-12);
}
.empresa-contexto {
  position: sticky;
  top: 0;
  z-index: 5;
  font-size: var(--text-aux);
  margin: 0 0 var(--space-8);
}
.nav-empresa--chip {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--miv-oxblood);
  padding: var(--space-4) var(--space-8);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--miv-oxblood) 28%, transparent);
  background: color-mix(in srgb, var(--miv-oxblood) 8%, var(--color-surface));
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  body.page-operador > header,
  body.page-mesa > header,
  body.page-ciclo > header,
  body.page-revisao > header,
  body.page-auditoria > header,
  body.page-onboarding > header,
  body.page-index > header {
    backdrop-filter: none;
  }
}


/* Polish tipografia/ritmo pré-C7 */
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.linkbtn-emphasis { font-weight: 600; }
.week-chip .wd,
.tech-snippet {
  font-size: var(--text-caption);
}
pre.tech-out,
.tech-out {
  font-size: var(--text-caption);
  line-height: var(--leading);
}
.card > .helper:first-of-type {
  margin-top: 0;
}
.page-login .lede + .demo-banner,
.page-login .lede + .chip-ambiente {
  margin-top: var(--space-8);
}


/* === Camada 7 — CTA / sucesso / forms / loading / abertura === */
a.linkbtn.linkbtn-primary {
  background: var(--color-action);
  color: var(--color-action-text);
  border-color: transparent;
  font-weight: 600;
}
a.linkbtn.linkbtn-primary:hover {
  background: color-mix(in srgb, var(--miv-oxblood) 88%, var(--miv-graphite));
  color: var(--color-action-text);
}
.resultado-humano.toast-ok::before {
  content: "Pronto — ";
  font-weight: 600;
}
.resultado-humano.toast-ok {
  border-color: color-mix(in srgb, var(--miv-lichen) 55%, transparent);
  background: color-mix(in srgb, var(--miv-lichen) 18%, var(--color-surface));
  color: var(--color-ok-ink);
}
.field-error {
  display: block;
  margin: var(--space-4) 0 0;
  font-size: var(--text-aux);
  color: var(--color-danger-ink);
}
input[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--miv-signal);
}
.card.is-loading { opacity: 0.92; }
.zona-abertura {
  border-color: color-mix(in srgb, var(--miv-oxblood) 28%, var(--color-border));
}


button.cta-primary,
.cta-primary {
  background: var(--color-action);
  color: var(--color-action-text);
  border-color: transparent;
  font-weight: 600;
}


/* show 60s — demo fill visible on login */
.row-demo {
  margin-top: var(--space-3, 0.75rem);
  padding-top: var(--space-3, 0.75rem);
  border-top: 1px solid var(--color-border, #e5e1db);
}
.hist-tipos {
  margin-top: var(--space-3, 0.75rem);
}
.hist-tipos .hist-list {
  margin: var(--space-2, 0.5rem) 0 0;
}


/* === Camada 8 — tipografia · empty+CTA · erro+retry · nav mobile · motion/focus === */

.conclusao-frase,
h1.conclusao + .conclusao-frase {
  max-width: 36rem;
  line-height: 1.55 !important;
  font-size: var(--text-lede);
}
.mesa-item .leitura,
.mesa-item .helper,
.diag-cockpit .leitura,
.status-caixa .leitura {
  max-width: 40rem;
  line-height: var(--leading);
}
.mesa-item { padding-block: var(--space-16); }
.mesa-item .leitura { margin-bottom: var(--space-8); }
.kpi-grid { gap: var(--space-12) var(--space-16); }
.kpi-value {
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}

.empty-state {
  text-align: center;
  padding: var(--space-24);
}
.empty-state > strong {
  display: block;
  margin-bottom: var(--space-8);
}
.empty-state .helper {
  margin: 0 auto var(--space-16);
  max-width: 28rem;
}
.empty-state .row,
.empty-state .empty-cta {
  justify-content: center;
  margin-top: var(--space-8);
}
.empty-state .linkbtn,
.empty-state button { min-height: 44px; }

.resultado-humano.state-erro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
}
.resultado-humano .resultado-texto { flex: 1 1 12rem; }
.resultado-humano .btn-retry {
  flex: 0 0 auto;
  min-height: 40px;
}

.nav-more {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-more > summary {
  list-style: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: var(--space-8) var(--space-12);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary::after { content: " ▾"; font-size: 0.75em; opacity: 0.7; }
.nav-more[open] > summary::after { content: " ▴"; }
.nav-more-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  min-width: 9rem;
}
@media (min-width: 641px) {
  .nav-more > summary { display: none; }
  .nav-more { display: contents; }
  .nav-more-panel {
    display: contents;
    padding: 0;
    border: 0;
    background: transparent;
  }
}
@media (max-width: 640px) {
  .nav-app {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-12);
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    backdrop-filter: blur(8px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-app::-webkit-scrollbar { display: none; }
  .nav-app a,
  .nav-more > summary {
    flex: 0 0 auto;
    padding: var(--space-8) var(--space-12);
    min-height: 44px;
    white-space: nowrap;
  }
  .nav-app a[data-sair] { margin-left: auto; }
  .nav-more[open] .nav-more-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--miv-graphite) 12%, transparent);
  }
  .touch-bar {
    position: sticky;
    bottom: 0;
    z-index: 30;
    padding: var(--space-12) var(--space-16);
    padding-bottom: max(var(--space-12), env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--color-bg) 94%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--color-border);
  }
}

button,
.linkbtn,
.nav-app a,
a.chip {
  transition-property: background-color, border-color, color, opacity, box-shadow;
}
button:hover,
.linkbtn:hover { transform: none; }
button:focus-visible,
.linkbtn:focus-visible,
.nav-app a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  button:hover,
  .linkbtn:hover,
  .nav-app a:hover { transition: none !important; }
  .nav-app,
  .touch-bar { backdrop-filter: none; }
}


/* === Passe fina pós-C8 (1x) — calendário quiet + inline limpo === */
.alerta-piso[hidden] { display: none !important; }
.alerta-piso:not([hidden]) {
  display: block;
  margin-top: var(--space-12);
  border-color: color-mix(in srgb, var(--miv-signal) 35%, var(--color-border));
}

/* calendário: frase estável, sem “dashboard” */
.page-dono .week-frase {
  max-height: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--color-text-muted);
}
.page-dono .week-quiet {
  padding: var(--space-12);
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.page-dono .cal-lede {
  font-size: var(--text-aux);
  color: var(--color-text-muted);
  line-height: var(--leading);
}

/* 1º scroll: lede sem competir com h1 */
header .lede {
  max-width: var(--measure-reading, 36rem);
  line-height: var(--leading-reading, 1.55);
  margin-top: var(--space-8);
}


/* === GAP APP — workspace split (cascade wins) === */
body.app-shell header,
body.app-shell main,
body.app-shell.page-dono header,
body.app-shell.page-dono main,
body.page-dono.app-shell > header,
body.page-dono.app-shell main {
  max-width: none !important;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

body.app-shell .app-stage > main {
  max-width: none !important;
  padding: var(--space-12) var(--space-16) var(--space-32);
}

body.app-shell .app-header .lede { display: none; }
body.app-shell .app-status {
  margin: 0;
  font-size: var(--text-aux);
  color: var(--color-text-muted);
  line-height: var(--leading-tight);
  max-width: 36rem;
  font-family: var(--font-sans);
}
body.app-shell .app-header h1.conclusao,
body.app-shell .app-header h1 {
  font-size: var(--text-title);
  font-family: var(--font-sans);
}

/* Dono: split workspace — tarefa | horizonte */
.dono-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  gap: var(--space-12);
  align-items: start;
  min-height: calc(100dvh - 8rem);
}
.dono-primary {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
}
.dono-side {
  position: sticky;
  top: 4.5rem;
  align-self: start;
  max-height: calc(100dvh - 5.5rem);
  overflow: auto;
}
.dono-cal-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  padding: var(--space-12);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}
.panel-head strong {
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cal-side {
  margin: 0 !important;
  grid-template-columns: 1fr !important;
  gap: var(--space-8);
}
.cal-side .week {
  padding: var(--space-8);
}
.cal-lede { display: none; }

.dono-modes {
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.modes-label {
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: var(--space-8) 0 var(--space-4);
}
.mode-panel > summary {
  font-size: var(--text-aux);
  font-weight: 600;
  cursor: pointer;
  padding: var(--space-8) var(--space-12);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
}
.mode-panel[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.mode-panel > .card {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Index = app launcher */
.app-home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 28rem;
  margin: 0 auto;
  padding: var(--space-24) var(--space-16) var(--space-12);
}
.app-home-header h1 {
  font-size: var(--text-title);
  margin: 0;
}
.app-home {
  max-width: 28rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-16) var(--space-48);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.app-home-status {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  padding: var(--space-12) var(--space-16);
}
.app-home-status > strong {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.app-home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}
.app-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: var(--space-12);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-aux);
}
.app-tile:hover {
  border-color: var(--miv-oxblood);
  color: var(--miv-oxblood);
}
.app-tile-primary {
  grid-column: 1 / -1;
  background: var(--miv-oxblood);
  color: var(--color-action-text);
  border-color: transparent;
}
.app-tile-primary:hover {
  color: var(--color-action-text);
  background: color-mix(in srgb, var(--miv-oxblood) 88%, var(--miv-graphite));
}

/* Wider rail */
:root { --rail-w: 14.5rem; }

body.app-shell .app-rail {
  width: var(--rail-w);
}

@media (max-width: 960px) {
  .dono-workspace {
    grid-template-columns: 1fr;
  }
  .dono-side {
    position: static;
    max-height: none;
    order: -1; /* horizonte acessível sem mural infinito no fim */
  }
  .dono-side .cal-side {
    max-height: 14rem;
    overflow: auto;
  }
}

/* Ops pages: denser panels */
body.app-shell.page-operador .app-stage > main,
body.app-shell.page-mesa .app-stage > main,
body.app-shell.page-ciclo .app-stage > main,
body.app-shell.page-revisao .app-stage > main {
  max-width: 64rem;
  margin: 0;
}


/* === STAGE v2 — index no shell + ops grid === */
body.page-index.app-shell .app-home {
  max-width: 36rem;
  margin: 0;
  padding: 0;
}
body.page-index.app-shell .app-home-header { display: none; }

.op-workspace,
.mesa-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem);
  gap: var(--space-12);
  align-items: start;
}
/* stack naturally: put zona-primaria + diag in flow; side = last cards? 
   Without HTML reorder, use grid on direct children spanning */
.op-workspace > #statusCaixa,
.op-workspace > #diagnosticoPainel,
.mesa-workspace > #mesaProxima,
.mesa-workspace > #mesaGuia {
  grid-column: 1;
}
.op-workspace > #zonaAcao,
.mesa-workspace > .zona-primaria {
  grid-column: 1;
}
.op-workspace > #resultadoHumano,
.mesa-workspace > #resultadoHumano {
  grid-column: 1 / -1;
}
.op-workspace > .ops-avancado,
.op-workspace > .tech-out-wrap,
.mesa-workspace > .ops-avancado,
.mesa-workspace > .tech-out-wrap {
  grid-column: 2;
  grid-row: 1 / span 4;
}
.op-workspace > #lista,
.mesa-workspace > #lista {
  grid-column: 1;
}
.mesa-workspace > #lista {
  grid-column: 1;
}
.mesa-workspace > .ops-avancado {
  grid-column: 2;
  grid-row: 1 / span 6;
}

@media (max-width: 960px) {
  .op-workspace,
  .mesa-workspace {
    grid-template-columns: 1fr;
  }
  .op-workspace > .ops-avancado,
  .op-workspace > .tech-out-wrap,
  .mesa-workspace > .ops-avancado,
  .mesa-workspace > .tech-out-wrap {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ensure no 42rem dono trap */
body.app-shell.page-dono .app-stage > main {
  max-width: none !important;
}