/* =========================================================================
   THEME PRO — camada de acabamento profissional (carregada por ultimo)
   Objetivo: visual de produto SaaS vendavel (marca Consultoria Oswaldo Lima).
   Nao altera estrutura/JS; apenas refina tokens, tipografia, sombras,
   sidebar, topbar, cards, tabelas, botoes, dialogs e login.
   ========================================================================= */

:root {
  /* CLEAN CLARO — sidebar branca com texto forte + acento esmeralda.
     Alto contraste (nada de cinza apagado). Nomes --green* por compat. */
  /* Verde escurecido p/ WCAG AA: texto branco no botao passa 4,5:1 (era 3,46).
     Contraste e simetrico, entao link/texto verde no branco tambem passa. */
  --green: #0a8055;
  --green-light: #17b57e;
  --green-dark: #086f47;
  --green-strong: #0a6a49;
  --green-soft: #e6f7f0;
  --mint: #e6f7f0;

  /* Estados semanticos: vermelho = fora da meta/NC,
     ambar = riscos/documentos a vencer, verde = ok/sem pendencias */
  --amber: #e6a020;
  --red: #d64545;
  --success: #1f9d57;
  --blue: #0e7c86;

  /* Neutros — texto escuro forte e legivel.
     Nada de cinza lavado: o secundario e um slate escuro de alto contraste. */
  --ink: #14201b;
  --text: #14201b;
  --muted: #37424c;
  --muted-2: #55606a;

  /* Superficies e fundo — conteudo claro p/ cards brancos se destacarem */
  --bg: #f6f8fa;
  --surface: #ffffff;
  --surface-soft: #eef1f4;

  /* Bordas visiveis */
  --line: #e3e8ec;
  --border-ui: #e6e9ee;
  --border-control: #d9e0e4;

  /* Escala de raio unica: 12px controles, 16px cards. Casa com os cards inline. */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 16px;
  /* Acento UNICO verde — elimina o azul residual do tema antigo no menu ativo. */
  --nav-active-bg: var(--green-soft);

  /* Sombras suaves de duas camadas (v2 — mais definicao) */
  --shadow-sm: 0 2px 6px rgba(20, 40, 30, 0.06), 0 1px 2px rgba(20, 40, 30, 0.04);
  --shadow-md: 0 6px 16px rgba(20, 40, 30, 0.08), 0 1px 2px rgba(20, 40, 30, 0.05);
  --shadow-lg: 0 18px 40px rgba(20, 40, 30, 0.14);

  --focus-ring: 0 0 0 3px rgba(15, 169, 104, 0.22);

  /* Tipografia — Manrope (UI) + IBM Plex Mono (numeros KPI) */
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Manrope", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* (Tema escuro grafite/petroleo aposentado — UI agora clean clara.) */
}

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

body {
  font-family: var(--font-body);
  font-size: 14.5px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.006em;
  color: var(--text);
  background:
    radial-gradient(1200px 480px at 88% -8%, rgba(37, 99, 235, 0.05), transparent 60%),
    linear-gradient(180deg, #f9fbfd 0%, var(--bg) 340px);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h1 { font-size: 24px; }
h2 { font-size: 18px; }

/* Legendas e metadados */
.eyebrow, .card span, .dashboard-group h2, .menu-group-title span, th { font-family: var(--font-body); }

/* --------------------------------------------------------------- Sidebar
   Slate escuro neutro (estilo dashboard SaaS): sobrio, moderno, deixa o azul
   de marca como unico acento e nao compete com os sinais semanticos. */
.sidebar {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-right: none;
  box-shadow: none;
  padding: 18px 14px;
}

.brand {
  padding: 6px 8px 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebar .brand strong { color: #ffffff; }
.sidebar .brand span { color: rgba(255, 255, 255, 0.55); }

.brand-mark,
.login-brand .brand-mark {
  background: linear-gradient(145deg, var(--green-light) 0%, var(--green-dark) 100%);
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  width: 44px;
  height: 44px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand strong { font-weight: 800; letter-spacing: -0.01em; }

/* Titulos de grupo do menu */
.menu-group-title span {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
}

.menu-group-title { color: rgba(255, 255, 255, 0.45); }
.menu-group-title:hover { background: rgba(255, 255, 255, 0.05); }

/* Itens do menu — pilula + barra de acento no ativo (sobre fundo escuro) */
nav button {
  position: relative;
  border-radius: 12px;
  border-left: none;
  padding: 10px 12px 10px 14px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

nav button:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  transform: none;
  box-shadow: none;
}

nav button.active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

nav button.active::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 999px;
  background: #3b82f6;
}

/* Badge de atencao sobre o fundo escuro: ambar cheio, numero branco */
.sidebar .menu-badge { background: var(--amber); color: #ffffff; }

/* Divisor e acoes administrativas do menu */
.sidebar .menu-divider { border-color: rgba(255, 255, 255, 0.12); }
.sidebar .menu-admin-btn { color: rgba(255, 255, 255, 0.65); }
.sidebar .menu-admin-btn:hover { color: #ffffff; background: rgba(255, 255, 255, 0.07); }
.sidebar .menu-admin-btn.warn { color: #f3b0a6; }
.sidebar .menu-admin-btn.warn:hover { color: #ffd2cb; }

/* ---------------------------------------------------------------- Topbar */
.app-shell { padding: 22px 28px 40px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  margin: -22px -28px 0;
  padding: 16px 28px;
  background: rgba(248, 250, 252, 0.85);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.topbar .eyebrow { color: var(--muted); font-weight: 600; }
.topbar h1, #pageTitle {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
}

.user-badge {
  background: var(--mint);
  color: var(--green-dark);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.14);
  font-weight: 700;
  letter-spacing: 0;
}

/* O titulo da tela vive apenas no topbar (h1); a barra de acoes das secoes
   alinha a direita mesmo sem h2 ao lado. */
.section-actions {
  margin-left: auto;
}

/* Caixa de resposta da Pesquisa inteligente so aparece quando ha conteudo. */
#assistantAnswer:empty {
  display: none;
}

/* --------------------------------------------------------------- Filtros */
.filters {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 12px;
  margin: 18px 0;
}

/* --------------------------------------------------------------- Botoes */
button {
  border-radius: var(--r-sm);
  font-weight: 600;
  background: var(--green);
  box-shadow: none;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

button:hover {
  background: var(--green-dark);
  box-shadow: var(--shadow-sm);
}

button:active { transform: translateY(0); }

button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

button.secondary,
.button-link {
  background: var(--surface);
  color: var(--green-dark);
  border: 1px solid var(--border-control);
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
  font-weight: 650;
}

button.secondary:hover,
.button-link:hover {
  background: var(--surface-soft);
  border-color: #cbd5e1;
}

button.danger {
  background: #f9e9e7;
  color: var(--red);
  border: 1px solid #ecc8c3;
  box-shadow: none;
}

/* --------------------------------------------------------------- Inputs */
input, select, textarea {
  border: 1px solid var(--border-control);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--green);
  box-shadow: var(--focus-ring);
}

/* ---------------------------------------------------------------- Cards */
.card,
.split section,
.answer {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.card {
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

/* fio de acento no topo do card */
.card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--success));
  opacity: 0;
  transition: opacity 0.16s ease;
}

.card.clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: #cbd5e1;
}

.card.clickable:hover::after { opacity: 1; }

.card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Valores de indicadores: fonte mono para leitura de dado tecnico */
.card strong {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 6px;
}

.attention-item strong,
.daily-progress strong { font-family: var(--font-mono); font-weight: 500; }

/* Grade de indicadores: colunas flexiveis min 190px */
.cards,
.dashboard-group .cards {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.dashboard-group h2 {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* -------------------------------------------------- Prioridade / atencao */
.attention-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
}

.attention-item {
  border-radius: 12px;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.attention-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* --------------------------------------------------------------- Tabelas */
.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: auto;
}

th {
  background: var(--surface-soft);
  color: #26303a;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
}

/* Texto das celulas em ink forte (nada de cinza) */
tbody td { color: var(--ink); }

tbody tr { transition: background 0.12s ease; }
tbody tr:hover td { background: #f1f5f9; }

/* --------------------------------------------------------------- Status */
.status {
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Cor por significado: ambar = pendente, vermelho = desvio, verde = ok,
   azul = contagem neutra. A primaria da marca fica fora dos alertas. */
.status.muted { background: #eef1f4; color: #64748b; }
.status.warn { background: #f7eedd; color: var(--amber); }
.status.danger { background: #f9e7e4; color: var(--red); }
.status.success { background: #e4f1ec; color: var(--success); }
.status.info { background: #e7f1fb; color: #2a6cb0; }

/* Barras do dashboard: contagem neutra (azul) x pendencia real (ambar) */
.bars.neutral .bar-fill { background: var(--blue); }
.bars.neutral .bar-track { background: #e7f1fb; }
.bars.pending .bar-fill { background: var(--amber); }
.bars.pending .bar-track { background: #f7eedd; }

/* ------------------------------------------- Estados vazios com identidade */
.table-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 36px 20px;
  text-align: center;
}

.table-empty .empty-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 20px;
  background: #e4f1ec;
  color: var(--success);
  margin-bottom: 4px;
}

.table-empty.empty-search .empty-icon {
  background: var(--surface-soft);
  color: var(--muted);
}

/* ------------------------------------------------------- Badges do menu */
.menu-badge {
  margin-left: auto;
  min-width: 19px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #f7eedd;
  color: #8a4708;  /* WCAG AA sobre o creme #f7eedd (era var(--amber) #e6a020 = baixo contraste) */
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}

nav button { display: flex; align-items: center; gap: 8px; }

/* ------------------------------------------------------ Skeleton loading */
@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.skeleton {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-height: 92px;
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-soft) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

.skeleton-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}

/* --------------------------------------------------------------- Dialogs */
dialog {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 22px;
}

dialog::backdrop {
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(2px);
}

dialog h2 { font-size: 20px; }

/* ----------------------------------------------------------------- Login */
.login-screen {
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(37, 99, 235, 0.12), transparent 55%),
    radial-gradient(800px 500px at 100% 100%, rgba(37, 99, 235, 0.08), transparent 55%),
    linear-gradient(160deg, #f8fafc 0%, #eef2f7 100%);
}

.login-card {
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 34px 32px;
  backdrop-filter: blur(2px);
}

.login-card h1 { font-size: 24px; line-height: 1.2; }
.login-heading .eyebrow {
  color: var(--green-strong);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.login-card #loginButton {
  min-height: 46px;
  font-size: 15px;
  border-radius: 12px;
}

/* ------------------------------------------------------------ Scrollbars */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; }

/* ------------------------------------------------- Numeros do painel QI */
.qi-value, .qi-goal, .bar-label strong { font-family: var(--font-mono); font-weight: 500; }

/* ==================================================================
   Polimento do dashboard (feedback "nota 10"): hierarquia dos cards,
   chips de prioridade com peso, seções expansiveis como cards.
   ================================================================== */

/* Cards KPI: compactos, numero protagonista, cor pelo significado */
.card {
  min-height: 88px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card strong { font-size: 26px; margin-top: 8px; }
.card.muted-card strong { font-size: 26px; }
/* styles.css usa align-self:end para o grid antigo; no flex-column isso
   jogava o numero para a direita — normaliza a esquerda */
.dashboard-card strong { align-self: flex-start; }

.card.warn {
  background: #fdf9f0;
  border-color: #e8d5ae;
  border-left: 4px solid var(--amber);
}
.card.warn strong { color: var(--amber); }

.card.danger {
  background: #fcf1ef;
  border-color: #ecc8c3;
  border-left: 4px solid var(--red);
}
.card.danger strong { color: var(--red); }

.card.muted-card { background: var(--surface-soft); border-color: var(--line); }

/* Chips de prioridade: pilulas preenchidas, numero em destaque */
.attention-item {
  align-items: center;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
  background: #fcf1ef;
  border: 1px solid #ecc8c3;
}
.attention-item span { color: #7c3f38; font-size: 13px; }
.attention-item strong { font-size: 15px; }

.attention-item.danger { background: #fcf1ef; border-color: #ecc8c3; }
.attention-item.danger strong { color: var(--red); }
.attention-item.warn { background: #fdf9f0; border-color: #e8d5ae; }
.attention-item.warn span { color: #7c5a1f; }
.attention-item.warn strong { color: var(--amber); }

.attention-ok {
  background: #e4f1ec;
  color: var(--success);
  border-radius: 999px;
  font-weight: 600;
  padding: 8px 14px;
}
.attention-ok::before { content: "✓ "; }

/* Painel "Prioridade agora": acento vermelho quando ha itens, verde quando ok */
.dashboard-priority {
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
}
.dashboard-priority.ok { border-left-color: var(--success); }
.dashboard-priority .eyebrow { color: var(--red); font-weight: 700; letter-spacing: 0.05em; }
.dashboard-priority.ok .eyebrow { color: var(--success); }
.dashboard-priority p { color: var(--muted); }

.attention-panel { border-radius: var(--r-md); padding: 16px 18px; }
.attention-panel .eyebrow { color: var(--muted); font-weight: 700; letter-spacing: 0.05em; }

/* Seções expansiveis como cards de verdade, com chevron animado */
.dashboard-details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 0;
  overflow: hidden;
}

.dashboard-details summary {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  list-style: none;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s ease;
}
.dashboard-details summary::-webkit-details-marker { display: none; }
.dashboard-details summary::before {
  content: "▸";
  color: var(--green);
  font-size: 13px;
  transition: transform 0.18s ease;
}
.dashboard-details[open] summary::before { transform: rotate(90deg); }
.dashboard-details summary:hover { background: var(--surface-soft); }
.dashboard-details[open] summary {
  margin-bottom: 0;
  border-bottom: 1px solid var(--line);
}
.dashboard-details > *:not(summary) { padding: 0 16px; }
.dashboard-details .dashboard-groups,
.dashboard-details .split { padding: 14px 16px 16px; }

/* ==================================================================
   REDESIGN DE REFERENCIA (Dashboard SGQ - referencia.html)
   Sidebar clara, acento esmeralda, cards 18px, prioridade em lista.
   Este bloco carrega por ultimo e sobrescreve os estilos acima.
   ================================================================== */

/* Fundo plano (sem gradiente/tinta) */
body {
  background: var(--bg);
  font-family: var(--font-body);
}

/* ------------------------------------- Sidebar CLARA (clean / moderna)
   Fundo branco, texto escuro forte (sem cinza lavado), acento esmeralda
   suave no item ativo com filete lateral. */
.sidebar {
  background: #ffffff;
  border-right: 1px solid var(--line);
  box-shadow: 1px 0 0 rgba(15, 40, 30, 0.02);
  padding: 14px 12px;
}

.brand { border-bottom: 1px solid var(--line); padding: 12px 12px 16px; }
.sidebar .brand strong { color: var(--ink); font-weight: 800; }
.sidebar .brand span { color: var(--muted); }

.brand-mark,
.login-brand .brand-mark {
  background: var(--green);
  box-shadow: 0 6px 14px rgba(15, 169, 104, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Titulos de grupo do menu — quase-preto, nitido (nada de cinza apagado) */
.menu-group-title,
.menu-group-title span {
  color: #1b2620;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 11px;
}
.menu-group-title:hover { background: var(--surface-soft); }

/* Itens do menu — texto escuro forte, hover cinza-claro */
nav button {
  color: var(--ink);
  font-weight: 600;
  border-radius: 12px;
}
nav button:hover {
  background: var(--surface-soft);
  color: var(--ink);
}
nav button.active {
  background: var(--mint);
  color: var(--green-strong);
  font-weight: 700;
  box-shadow: none;
}
nav button.active:hover { background: var(--mint); color: var(--green-strong); }
/* Filete de acento esmeralda no item ativo */
nav button.active::before {
  display: block;
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 999px;
  background: var(--green);
}

/* Nao exibir contadores numericos na barra lateral */
.sidebar .menu-badge { display: none; }

.sidebar .menu-divider { border-color: var(--line); }
.sidebar .menu-admin-btn { color: #46525c; font-weight: 600; }
.sidebar .menu-admin-btn:hover { color: var(--ink); background: var(--surface-soft); }
.sidebar .menu-admin-btn.warn { color: var(--red); }
.sidebar .menu-admin-btn.warn:hover { color: #a3271b; background: #fbecea; }

/* ---------------------------------------------------------------- Topbar */
.topbar {
  background: rgba(245, 247, 246, 0.85);
  border-bottom: 1px solid var(--line);
}
.topbar .eyebrow { color: var(--green); font-weight: 700; letter-spacing: 0.06em; }
.topbar h1, #pageTitle { color: #12201a; font-weight: 800; }

.user-badge {
  background: var(--mint);
  color: var(--green-dark);
  box-shadow: inset 0 0 0 1px rgba(15, 138, 95, 0.14);
}

/* ----------------------------------------------------------- Cards 18px */
.card, .split section, .answer, .attention-panel, .dashboard-priority,
.table-wrap, .filters { border-radius: 16px; }

.card::after { background: linear-gradient(90deg, var(--green), var(--success)); }

.dashboard-group h2 { color: #4a564f; font-weight: 800; letter-spacing: 0.08em; }

/* ----------------------------------------------- Prioridade agora (lista) */
.dashboard-priority {
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  padding: 22px 24px;
}
.dashboard-priority.ok { border-left: 1px solid var(--line); }
.dashboard-priority .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--red);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.dashboard-priority .eyebrow::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(214, 69, 69, 0.14);
}
.dashboard-priority.ok .eyebrow { color: var(--success); }
.dashboard-priority.ok .eyebrow::before { background: var(--success); box-shadow: 0 0 0 4px rgba(31, 157, 87, 0.14); }
.dashboard-priority h2 { font-size: 19px; font-weight: 800; color: #12201a; margin-top: 10px; }
.dashboard-priority p { color: var(--muted); margin-top: 3px; }

.dashboard-priority-list, .attention-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

/* Item de prioridade como linha: [bolinha + rotulo] .... [ver aba ->] [contador] */
.attention-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px;
  padding: 13px 16px;
  font-weight: 600;
  transition: filter 0.14s ease;
}
.attention-item:hover { transform: none; box-shadow: none; filter: brightness(0.985); }
.attention-item > span {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
}
.attention-item > span::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  flex: none;
}
.attention-item strong {
  position: relative;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 12px;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.attention-item strong::before {
  content: "ver aba →";
  position: absolute;
  right: calc(100% + 10px);
  white-space: nowrap;
  font-size: 12px; font-weight: 500;
}

.attention-item.danger { background: #fdf2f2; border: 1px solid #f4d7d7; }
.attention-item.danger > span { color: #7d2626; }
.attention-item.danger strong { background: var(--red); color: #ffffff; }
.attention-item.danger strong::before { color: #a86464; }

.attention-item.warn { background: #fdf7ec; border: 1px solid #f2e4c0; }
.attention-item.warn > span { color: #7d5410; }
.attention-item.warn strong { background: var(--amber); color: #3a2500; }
.attention-item.warn strong::before { color: #a58436; }

/* Estado "tudo ok" — check verde */
.attention-ok {
  background: var(--mint);
  color: var(--success);
  border: 1px solid #c9e6d5;
}

/* Botao "Ver detalhes do painel" no estilo card */
.dashboard-details {
  border-radius: 16px;
}
.dashboard-details summary::before { color: var(--green); }
.dashboard-details summary:hover { background: #fafcfb; }

/* v2 — legibilidade: estados vazios e textos secundarios sem cinza apagado */
.empty-state,
.table-empty,
.table-empty p,
.table-empty small,
.answer .empty-state {
  color: var(--muted);
}
.table-empty strong,
.table-empty .empty-title { color: var(--ink); }
.card span { color: var(--muted); }

/* ===================== LOGIN CLARO (clean / moderno) ===================== */
.login-screen {
  background:
    radial-gradient(900px 520px at 12% 6%, rgba(15, 169, 104, 0.10), transparent 55%),
    radial-gradient(820px 520px at 100% 100%, rgba(15, 169, 104, 0.06), transparent 55%),
    linear-gradient(165deg, #ffffff 0%, #eef3f1 100%);
}

.login-card {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(15, 40, 30, 0.10), 0 2px 6px rgba(15, 40, 30, 0.05);
  color: var(--ink);
}

.login-brand .brand-mark { color: #ffffff; }
.login-card .brand strong,
.login-brand strong { color: var(--ink); }
.login-card .brand span,
.login-brand span { color: var(--muted); }

.login-heading h1 { color: var(--ink); }
.login-heading .eyebrow { color: var(--green-strong); }
.login-heading span { color: var(--muted); }

.login-card label { color: var(--ink); font-weight: 700; }
.login-card input {
  background: #ffffff;
  border: 1px solid var(--border-control);
  color: var(--ink);
}
.login-card input::placeholder { color: var(--muted-2); }
.login-card input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(15, 169, 104, 0.20);
}

.login-card #loginButton {
  background: var(--green);
  color: #ffffff;
}
.login-card #loginButton:hover { background: var(--green-dark); }
.login-card small { color: var(--muted); }
.login-card .empty-state { color: var(--red); }

/* ==================================================================
   POLIMENTO FINAL — login mais respirado, tabs (sidebar) nitidas e
   layout CLEAN em mobile e desktop. Carrega por ultimo (vence tudo).
   ================================================================== */

/* ------------------------------------------------------------ Login */
.login-card {
  gap: 16px;
  max-width: 420px;
  padding: 32px 30px;
}
.login-brand { border-bottom-color: var(--line); }
.login-card label {
  display: grid;
  gap: 7px;
  font-size: 13px;
}
.login-card input {
  min-height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 15px;
}
.login-card #loginButton {
  margin-top: 4px;
  font-weight: 700;
  box-shadow: 0 10px 22px -10px rgba(15, 169, 104, 0.75);
}
.login-heading h1 { letter-spacing: -0.015em; }

/* -------------------------------------------------- Tabs / sidebar
   Garante contraste do texto sobre o grafite e alvos de toque comodos. */
.sidebar nav button { min-height: 40px; }
.sidebar .brand strong { font-size: 15px; }
.sidebar .brand span { font-size: 11.5px; }

/* styles.css desenha a marca como cartao com fundo/borda proprios; aqui
   simplificamos para so um filete inferior claro, alinhado a sidebar branca. */
.sidebar .brand {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 6px 8px 14px;
  margin-bottom: 6px;
}

/* =================================================================
   RESPONSIVO — mobile limpo (a sidebar vira faixa superior compacta)
   ================================================================= */
@media (max-width: 980px) {
  .sidebar {
    height: auto;
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 18px -14px rgba(15, 40, 30, 0.25);
  }
  .sidebar .brand { padding: 4px 6px 12px; margin-bottom: 4px; }
  .brand-mark { width: 38px; height: 38px; font-size: 15px; }

  /* Menu em duas colunas de pilulas, confortavel para o toque */
  #menu nav,
  nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .menu-group-title { grid-column: 1 / -1; }

  .app-shell { padding: 16px 16px 32px; }

  /* Topbar mobile: titulo em cima, acoes numa linha que quebra */
  .topbar {
    position: static;
    margin: -16px -16px 0;
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .top-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  .top-actions .user-badge { margin-right: auto; }

  .topbar h1, #pageTitle { font-size: 21px; }
}

@media (max-width: 640px) {
  #menu nav,
  nav { grid-template-columns: 1fr; }

  .login-card { padding: 26px 20px; border-radius: 16px; }
  .login-heading h1 { font-size: 21px; }

  /* Alvos de toque maiores nos formularios */
  input, select, textarea, button { min-height: 42px; }

  .app-shell { padding: 14px 14px 28px; }
  dialog { padding: 18px 16px; border-radius: 16px; }
  .top-actions button { flex: 1 1 auto; }
}

/* =================================================================
   Formularios e Termos (documentos controlados)
   ================================================================= */
.cf-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 4px 0 18px;
}
.cf-toolbar #cfSearch { flex: 1 1 260px; }
.cf-toolbar #cfNew { margin-left: auto; }

.cf-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

/* Agrupamento por categoria (acordeao) — usado em Formularios e Termos. */
.cf-list > .cf-group { grid-column: 1 / -1; }
.cf-group {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.cf-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  cursor: pointer;
  font-weight: 700;
  color: var(--ink, #1f2937);
  list-style: none;
  user-select: none;
}
.cf-group-head::-webkit-details-marker { display: none; }
.cf-group-head::before {
  content: "▸";
  color: var(--green-strong);
  font-size: 12px;
  transition: transform 0.15s ease;
}
.cf-group[open] > .cf-group-head::before { transform: rotate(90deg); }
.cf-group-head:hover { background: var(--mint); }
.cf-archived-banner {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 14px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
}
#cfArchivedToggle.active {
  background: var(--green-strong);
  color: #fff;
  border-color: var(--green-strong);
}
.cf-group-name { flex: 1; }
.cf-group-count {
  background: var(--mint);
  color: var(--green-strong);
  font-size: 12px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 999px;
}
.cf-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  padding: 4px 16px 18px;
}
/* Card de consulta (biblioteca): compacto, foco em baixar/imprimir. */
.cf-card.cf-library { border-left: 4px solid #6366f1; gap: 10px; }
.cf-card.cf-library .cf-title { font-size: 15px; }

/* Painel (dashboard) da Análise de Impacto — KPIs clicáveis. */
.ia-dash {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.ia-kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--kpi, var(--line));
  border-radius: 16px;
  padding: 14px 16px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ia-kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-md, 0 6px 16px rgba(0,0,0,.08)); }
.ia-kpi-on { background: color-mix(in srgb, var(--kpi) 10%, var(--surface)); border-color: var(--kpi); }
.ia-kpi-val { font-size: 30px; font-weight: 800; line-height: 1; color: var(--kpi); }
.ia-kpi-lbl { font-size: 13px; font-weight: 600; color: var(--ink, #1f2937); }
.ia-kpi-sub { font-size: 11.5px; color: #64748b; }

/* Barra de filtros das abas de registro (chips de status + periodo). */
.rec-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 14px;
}
.rec-chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.rec-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.rec-chip:hover { border-color: var(--c); }
.rec-chip-on { background: color-mix(in srgb, var(--c) 12%, var(--surface)); border-color: var(--c); }
.rec-chip-n {
  min-width: 22px;
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  background: var(--c);
  border-radius: 999px;
  padding: 1px 7px;
}
.rec-chip-l { font-size: 13px; font-weight: 600; color: var(--ink, #1f2937); }
.rec-period {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-size: 13px;
}
.inv-code {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--green-strong, #0f7a4d);
  background: var(--mint, #ecfdf5);
  border-radius: 8px;
  padding: 1px 7px;
}

/* ===== Dashboard estilo portal: pílulas com gradiente + onda + atalhos ===== */
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 900px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } }
.hero-pill {
  position: relative; overflow: hidden; border: none; text-align: left; cursor: pointer;
  border-radius: 16px; padding: 16px 18px 18px; color: #fff; min-height: 120px;
  display: flex; flex-direction: column; box-shadow: var(--shadow-md);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.hero-pill:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.hero-pill.green  { background: linear-gradient(130deg, #1fc088, #0b7250); }
.hero-pill.coral  { background: linear-gradient(130deg, #ff9a76, #e0514c); }
.hero-pill.amber  { background: linear-gradient(130deg, #f7c765, #e39a16); }
.hero-pill.purple { background: linear-gradient(130deg, #9a90ef, #5a4fbf); }
.hero-pill::after  { content: ""; position: absolute; right: -34px; bottom: -64px; width: 170px; height: 170px; background: rgba(255,255,255,0.15); border-radius: 44%; }
.hero-pill::before { content: ""; position: absolute; right: -64px; top: -46px; width: 130px; height: 130px; background: rgba(255,255,255,0.10); border-radius: 44%; }
.hero-pill .hp-ic { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 12px; background: rgba(255,255,255,0.22); display: grid; place-items: center; }
.hero-pill .hp-ic svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; }
.hero-pill .hp-lbl { position: relative; font-size: 13px; font-weight: 600; opacity: 0.96; }
.hero-pill .hp-num { position: relative; font-size: 36px; font-weight: 800; line-height: 1.05; margin-top: 6px; font-variant-numeric: tabular-nums; }
.hero-pill .hp-sub { position: relative; font-size: 12px; opacity: 0.9; margin-top: 2px; }

.quick-actions { margin-bottom: 18px; }
.quick-actions .eyebrow { display: block; margin: 0 0 10px; }
.quick-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 900px) { .quick-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .quick-tiles { grid-template-columns: repeat(2, 1fr); } }
.quick-tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  cursor: pointer; box-shadow: var(--shadow-sm); transition: transform 0.14s ease, border-color 0.14s ease;
}
.quick-tile:hover { transform: translateY(-2px); border-color: #bfe6d6; }
.quick-tile .qt-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; }
.quick-tile .qt-ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.quick-tile .qt-t { font-size: 13px; font-weight: 600; color: var(--ink); }
.qt-ic.t1 { background: var(--mint); color: var(--green-strong); }
.qt-ic.t2 { background: #fdeee6; color: #c9502f; }
.qt-ic.t3 { background: #fdf3dc; color: #a9760d; }
.qt-ic.t4 { background: #eeecfb; color: #5a4fbf; }
.qt-ic.t5 { background: #e6f2fb; color: #2b6cb0; }
.qt-ic.t6 { background: #e8f6ee; color: #2a8a4e; }

/* Radar de Segurança: score como pílula gradiente + onda (cor pela banda). */
.readiness-score {
  position: relative; overflow: hidden; min-width: 158px; align-self: stretch;
  border-radius: 16px; padding: 20px 22px; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
}
.readiness-score::after  { content: ""; position: absolute; right: -30px; bottom: -56px; width: 150px; height: 150px; background: rgba(255,255,255,0.15); border-radius: 44%; }
.readiness-score::before { content: ""; position: absolute; left: -46px; top: -40px; width: 120px; height: 120px; background: rgba(255,255,255,0.10); border-radius: 44%; }
.readiness-score .rs-num { position: relative; font-size: 52px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.readiness-score .rs-lbl { position: relative; font-weight: 700; margin-top: 6px; letter-spacing: .02em; }

/* Score de cada pilar do Radar: chip gradiente (cor pela banda). */
.pillar-score {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; padding: 5px 12px; border-radius: 12px;
  color: #fff; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-sm);
}

/* Ícones do dashboard/radar: traço arredondado e consistente. */
.hero-pill .hp-ic svg, .quick-tile .qt-ic svg {
  stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8;
}

.cf-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
}
.cf-card.cf-pending { border-left: 4px solid var(--amber); }

.cf-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.cf-cat {
  background: var(--mint);
  color: var(--green-strong);
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.cf-ver {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.cf-card-head .status { margin-left: auto; }

.cf-title { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0 0 4px; }
.cf-meta { color: var(--muted); font-size: 12.5px; margin: 0 0 6px; }
.cf-desc { color: var(--muted); font-size: 13px; margin: 0 0 8px; }

.cf-ack-track {
  height: 7px;
  background: var(--surface-soft);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.cf-ack-fill { height: 100%; background: var(--green); border-radius: 999px; transition: width 0.3s ease; }
.cf-ack-label { color: var(--muted); font-size: 12px; margin: 6px 0 0; }

.cf-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.cf-ack-done { color: var(--success); font-weight: 700; font-size: 13px; }
.cf-nofile { color: var(--muted-2); font-size: 12.5px; }

/* Painel de ciencia (dialog) */
.cf-ack-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cf-ack-h { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 8px; }
.cf-ack-h.ok { color: var(--success); }
.cf-ack-h.pend { color: var(--amber); }
.cf-ack-ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cf-ack-ul li {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 10px; background: var(--surface-soft); border-radius: 8px;
}
.cf-ack-ul li span { color: var(--ink); font-weight: 600; font-size: 13px; }
.cf-ack-ul li small { color: var(--muted); font-size: 11.5px; }
.cf-ack-ul li.cf-empty { color: var(--muted); justify-content: center; }

.cf-version-note {
  background: #fdf7ec; border: 1px solid #f2e4c0; color: #7d5410;
  padding: 10px 12px; border-radius: 12px; font-size: 13px; margin: 0 0 14px;
}

@media (max-width: 640px) {
  .cf-list { grid-template-columns: 1fr; }
  .cf-ack-cols { grid-template-columns: 1fr; }
}

/* =================================================================
   Validação de Método (calculadora)
   ================================================================= */
.mv-dialog { width: min(680px, 96vw); }
.mv-mode {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 14px 0 10px; font-size: 13px; color: var(--muted);
}
.mv-mode label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.mv-mode input { min-height: auto; }

.mv-limits {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px 14px;
  margin: 6px 0 14px;
}
.mv-limits legend { font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 6px; }

.mv-preview {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  margin: 4px 0 12px;
}
.mv-preview:empty { display: none; }
.mv-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 10px;
}
.mv-preview-grid div { display: flex; flex-direction: column; gap: 2px; }
.mv-preview-grid small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }
.mv-preview-grid strong { font-family: var(--font-mono); font-size: 17px; font-weight: 500; color: var(--ink); }

.mv-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.mv-chip {
  font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-soft); color: var(--muted);
}
.mv-chip.ok { background: #e4f1ec; color: var(--success); }
.mv-chip.bad { background: #fbecea; color: var(--red); }

.mv-verdict {
  margin-top: 12px; text-align: center; font-weight: 800; letter-spacing: 0.04em;
  padding: 10px; border-radius: 12px; font-size: 15px;
}
.mv-verdict.ap { background: #e4f1ec; color: var(--success); }
.mv-verdict.rep { background: #fbecea; color: var(--red); }
.mv-verdict.none { background: var(--surface-soft); color: var(--muted); font-weight: 600; font-size: 13px; letter-spacing: 0; }

/* Cards do histórico */
.mv-card.mv-ap { border-left: 4px solid var(--success); }
.mv-card.mv-rep { border-left: 4px solid var(--red); }
.mv-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.mv-stats div { display: flex; flex-direction: column; gap: 1px; }
.mv-stats small { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; }
.mv-stats strong { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--ink); }

/* =================================================================
   Navegacao mais clara para todas as abas
   ================================================================= */
:root {
  --sidebar-width: 292px;
  --nav-accent: #0f8f61;
  --nav-accent-soft: rgba(15, 143, 97, 0.10);
  --nav-section-bg: #f6f9f8;
}

body {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.sidebar {
  padding: 18px 12px 18px 16px;
  background:
    linear-gradient(180deg, rgba(15, 143, 97, 0.045), rgba(255, 255, 255, 0) 185px),
    #ffffff;
}

.sidebar .brand {
  position: sticky;
  top: -18px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
}

#menu {
  gap: 10px;
}

.menu-group {
  margin: 0;
  border: 1px solid transparent;
  border-radius: 16px;
}

.menu-group:has(.menu-group-items:not([hidden]) button.active) {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
  border-color: #dfe9e5;
  box-shadow: 0 10px 22px -18px rgba(15, 40, 30, 0.35);
  padding: 5px;
}

.menu-group-title {
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  letter-spacing: 0.04em;
}

.menu-group-title span {
  color: #2e3a35;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.menu-group-title:hover,
.menu-group-title[aria-expanded="true"] {
  background: var(--nav-section-bg);
}

.menu-group-title::after {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #edf5f2;
  color: #315047;
}

.menu-group-items {
  gap: 4px;
  padding: 2px 0 4px;
}

.menu-group-items button[data-module] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 12px 10px 14px;
  border-radius: 12px;
  color: #27332f;
  font-size: 14px;
  line-height: 1.15;
}

.menu-group-items button[data-module] > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.menu-group-items button[data-module] > span::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 999px;
  background: #b8c8c2;
  box-shadow: 0 0 0 4px rgba(184, 200, 194, 0.16);
}

.menu-group-items button[data-module]:hover {
  background: #f1f6f4;
  color: #0d5f43;
  transform: none;
}

.menu-group-items button[data-module].active {
  background: linear-gradient(135deg, #e5f4ed 0%, #f5fbf8 100%);
  color: #075c3f;
  box-shadow: inset 3px 0 0 var(--nav-accent), 0 8px 16px -14px rgba(15, 40, 30, 0.50);
}

.menu-group-items button[data-module].active > span::before {
  background: var(--nav-accent);
  box-shadow: 0 0 0 5px var(--nav-accent-soft);
}

.menu-group-items button[data-module] .menu-badge,
.menu-group-title .menu-badge {
  margin-left: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff3d6;
  color: #734900;
  font-size: 11px;
  font-weight: 800;
}

.topbar {
  margin: -26px -28px 18px;
  padding: 18px 28px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #dfe7e4;
  box-shadow: 0 10px 24px -22px rgba(15, 40, 30, 0.55);
}

.topbar h1 {
  letter-spacing: -0.035em;
}

.filters {
  border: 1px solid #dfe7e4;
  box-shadow: 0 14px 30px -24px rgba(15, 40, 30, 0.45);
}

.view > .section-head:first-child,
#records .section-head:first-child {
  align-items: flex-start;
}

@media (max-width: 980px) {
  body {
    grid-template-columns: 1fr;
  }

  .sidebar {
    padding: 12px;
  }

  .sidebar .brand {
    position: static;
    backdrop-filter: none;
  }

  .menu-group:has(.menu-group-items:not([hidden]) button.active) {
    padding: 4px;
  }

  .menu-group-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .menu-group-items button[data-module] {
    min-height: 46px;
  }

  .topbar {
    margin: -16px -16px 16px;
    padding: 16px;
  }
}

@media (max-width: 640px) {
  .menu-group-items {
    grid-template-columns: 1fr;
  }

  .menu-group-title {
    min-height: 46px;
  }

  .menu-group-items button[data-module] {
    min-height: 48px;
    font-size: 15px;
  }
}

/* =================================================================
   Menu hambúrguer (mobile): a sidebar vira gaveta deslizante
   ================================================================= */
.menu-toggle { display: none; }
.sidebar-overlay { display: none; }

@media (max-width: 980px) {
  /* Botão hambúrguer no topbar */
  .menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    padding: 0 10px;
    background: var(--surface);
    border: 1px solid var(--border-control);
    border-radius: 12px;
    cursor: pointer;
  }
  .menu-toggle span {
    display: block;
    height: 2px;
    width: 20px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  body.sidebar-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.sidebar-open .menu-toggle span:nth-child(2) { opacity: 0; }
  body.sidebar-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Topbar: hambúrguer + título na mesma linha, ações quebram embaixo */
  .topbar {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .topbar-titles { flex: 1 1 auto; min-width: 0; }
  .top-actions { flex: 1 1 100%; }

  /* Sidebar vira gaveta fora da tela */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: min(290px, 86vw);
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    box-shadow: none;
    border-right: 1px solid var(--line);
  }
  body.sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: 0 24px 60px rgba(15, 40, 30, 0.35);
  }
  .sidebar .brand { position: static; backdrop-filter: none; }

  /* Fundo escurecido atrás da gaveta */
  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(10, 20, 15, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  body.sidebar-open .sidebar-overlay { opacity: 1; pointer-events: auto; }

  /* Conteúdo ocupa a largura toda (gaveta está fora do fluxo) */
  body { grid-template-columns: 1fr; }
  .app-shell { padding: 16px 16px 32px; }
}

/* =================================================================
   POLISH v3 — 5 ajustes de acabamento (bordas + controles + cards)
   ================================================================= */

/* (1) Raios unificados: controles 10px, cards/painéis 16px — escala coesa */
button, input, select, textarea, .button-link { border-radius: 12px; }
.card, .split section, .answer, .attention-panel, .dashboard-priority,
.table-wrap, .filters, .cf-card, .mv-preview, .mv-limits, dialog { border-radius: 16px; }

/* (2) Bordas mais refinadas: hairline suave e uniforme + profundidade por
   sombra leve (menos dependência de borda "dura") */
:root { --line: #e7ecef; --border-control: #d5dde3; }
.card, .filters, .table-wrap, .split section, .answer,
.attention-panel, .cf-card {
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15, 40, 30, 0.04), 0 8px 22px -16px rgba(15, 40, 30, 0.16);
}

/* (3) Inputs/selects: altura consistente, foco elegante, hover perceptível,
   seta customizada no select */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
select, textarea {
  min-height: 40px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--border-control);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea { min-height: 76px; padding: 10px 12px; }
input:hover, select:hover, textarea:hover { border-color: #c2ccd4; }
input:focus, select:focus, textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(15, 169, 104, 0.16);
  outline: none;
}
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23566169' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
/* Checkboxes/radios no tamanho nativo (não esticam com largura de input) */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  height: auto;
  min-height: auto;
  padding: 0;
  accent-color: var(--green);
}

/* (4) Botões: alinham altura com inputs, feedback ao pressionar, secundário
   com borda/hover mais definidos (mas .small continua compacto) */
button:not(.small):not(.menu-group-title) { min-height: 40px; padding: 9px 16px; }
button.small { min-height: 32px; padding: 6px 11px; border-radius: 8px; }
button.secondary { border: 1px solid var(--border-control); }
button.secondary:hover { border-color: #b7c2ca; background: var(--surface-soft); }
button:active { transform: translateY(1px); }

/* (5) Tabelas e cards: respiro nas células, hover mais vivo.
   overflow:auto (não hidden) — o raio continua recortando E a tabela rola na
   horizontal no celular, então a coluna "Ações" (última) fica alcançável. */
.table-wrap { overflow: auto; -webkit-overflow-scrolling: touch; }
th, td { padding: 12px 14px; }
tbody tr { transition: background 0.12s ease; }
tbody tr:hover td { background: #f4f8f6; }
.card.clickable {
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.card.clickable:hover {
  transform: translateY(-2px);
  border-color: #cdd8d2;
  box-shadow: 0 14px 28px -16px rgba(15, 40, 30, 0.28);
}

/* =================================================================
   Menu com ícones — navegação com cara de app moderno
   ================================================================= */
.nav-ico { width: 18px; height: 18px; flex: 0 0 18px; }

/* Ícone de cada aba: cinza-esverdeado neutro, ganha acento no hover/ativo */
.menu-group-items button[data-module] { gap: 11px; }
.menu-group-items button[data-module] .nav-ico { color: #8a978f; transition: color 0.15s ease; }
.menu-group-items button[data-module]:hover .nav-ico { color: var(--nav-accent, #0f8f61); }
.menu-group-items button[data-module].active .nav-ico { color: var(--nav-accent, #0f8f61); }
/* Substituímos o antigo ponto marcador pelo ícone */
.menu-group-items button[data-module] > span::before { display: none; }

/* Cabeçalho da seção: ícone em pílula suave + rótulo mais definido */
.menu-group-title { display: flex; align-items: center; gap: 10px; }
.nav-group-ico {
  width: 26px; height: 26px;
  flex: 0 0 26px;
  padding: 5px;
  border-radius: 8px;
  background: #eef5f1;
  color: #0f8f61;
  box-sizing: border-box;
}
.menu-group-title span { color: #263a32; }
.menu-group:has(.menu-group-items:not([hidden]) button.active) .nav-group-ico {
  background: var(--nav-accent, #0f8f61);
  color: #ffffff;
}

/* =================================================================
   REVISÃO DE TIPOGRAFIA — texto profissional, sem cinza lavado
   (login + todas as abas). Carrega por último: vence os cinzas antigos.
   ================================================================= */

/* Títulos com mais presença (peso 600 em vez de 500) */
h1, h2, h3, .topbar h1, #pageTitle, .login-heading h1, .cf-title, dialog h2 {
  font-weight: 600;
  letter-spacing: -0.018em;
}

/* Eyebrows/rótulos neutros: slate escuro forte, não cinza claro */
.eyebrow { color: var(--muted); font-weight: 700; letter-spacing: 0.05em; }
.topbar .eyebrow { color: var(--green-strong); }          /* acento de marca */
.dashboard-priority .eyebrow { color: var(--red); }        /* semântico */
.dashboard-priority.ok .eyebrow { color: var(--success); }

/* Cabeçalhos de grupo do dashboard (INDICADORES DE QUALIDADE...) */
.dashboard-group h2 { color: #2b3832; font-weight: 800; letter-spacing: 0.07em; }

/* KPI cards "muted": legíveis (só levemente suaves, não apagados) */
.dashboard-card.muted-card span,
.dashboard-card.muted-card strong { color: #55606a; }

/* Rótulos de seção da sidebar (GERAL, DOCUMENTOS E NORMAS...): quase-preto */
.menu-group-title span,
.sidebar .menu-group-title span {
  color: #1e2b25;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.05em;
}

/* Ícone da aba um tom mais definido (não pálido) */
.menu-group-items button[data-module] .nav-ico { color: #6f7e76; }

/* Texto secundário geral: garante piso de contraste (slate escuro) */
.card span, small, .cf-meta, .cf-ack-label, .backup-info,
.table-empty small, .empty-state { color: var(--muted); }
.card strong, .cf-title, td { color: var(--ink); }

/* Corpo em ink cheio */
body { color: var(--ink); }

/* =================================================================
   PASSE DE UX (olhar de designer) — hierarquia, profundidade, leitura
   ================================================================= */

/* (1) Hierarquia de ação: "Anexar Evidência" é utilitário global — vira
   botão TONAL (verde suave) para não competir com a ação primária da tela */
#attachEvidence {
  background: var(--mint);
  color: var(--green-dark);
  border: 1px solid #c7e5d4;
  box-shadow: none;
  font-weight: 700;
}
#attachEvidence:hover { background: #d6efe3; border-color: #b6ddca; }

/* (2) CTA primário com profundidade sutil (premium, mas limpo).
   :where() zera a especificidade: o verde de CTA vira PADRÃO de botão puro,
   e qualquer componente com classe própria (item de atenção, chips, respostas
   de auditoria...) vence naturalmente — sem o verde vazar. */
button:where(:not(.secondary):not(.danger):not(.button-link):not(.menu-admin-btn):not(.menu-group-title):not(.menu-toggle):not([data-module]):not([data-menu-group]):not([data-admin-action]):not(#attachEvidence):not(.small)) {
  box-shadow: 0 6px 15px -9px rgba(15, 157, 107, 0.55);
}
button:where(:not(.secondary):not(.danger):not(.button-link):not(.menu-admin-btn):not(.menu-group-title):not(.menu-toggle):not([data-module]):not([data-menu-group]):not([data-admin-action]):not(#attachEvidence):not(.small)):hover {
  box-shadow: 0 9px 20px -9px rgba(15, 157, 107, 0.6);
  transform: translateY(-1px);
}

/* (3) Tabelas: zebra sutil para leitura em telas largas (hover vence) */
tbody tr:nth-child(even) td { background: #fafcfb; }
tbody tr:hover td { background: #eef5f1; }

/* (4) Foco visível e acessível (teclado) em tudo que é interativo */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 169, 104, 0.30);
  border-radius: 8px;
}

/* (5) Feedback interativo mais suave e consistente */
button, .attention-item, .cf-card, .card, tbody tr td { transition: all 0.15s ease; }
.attention-item:hover { transform: translateX(2px); }
.cf-card { transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; }
.cf-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(15, 40, 30, 0.3); }

/* =================================================================
   Barra de registros consolidada: busca + ações numa linha só
   (antes eram 3 faixas: filtros, ações, busca → agora 2)
   ================================================================= */
.records-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.records-head .records-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 300px;
  min-width: 240px;
  max-width: 620px;
  margin: 0;
}
.records-head .records-toolbar #recordSearch { flex: 1 1 auto; min-width: 0; }
.records-head .section-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .records-head { flex-direction: column; align-items: stretch; }
  .records-head .records-toolbar { max-width: none; }
  .records-head .section-actions { margin-left: 0; }
}

/* =================================================================
   Textos "apagados" reforçados — marca, badge e subtítulos do login
   (o problema era peso 400 fino; agora peso 500 + cor mais escura)
   ================================================================= */
.sidebar .brand span,
.login-brand span,
.login-card .brand span {
  color: #2c3832;
  font-weight: 500;
}
.login-heading span {
  color: #2e3a34;
  font-weight: 500;
}
.login-card small {
  color: #46525c;
  font-weight: 500;
}
/* Badge do usuário no topo: verde mais escuro p/ contraste sobre o mint */
.user-badge { color: #0a5a3e; }
/* Eyebrows verdes com mais presença */
.topbar .eyebrow,
.login-heading .eyebrow { color: #0a6a49; font-weight: 800; }

/* =================================================================
   Abas da sidebar: ícones em chip (sem aspecto apagado) + cada aba
   como bloco clicável definido (fundo sutil + hover/ativo claros)
   ================================================================= */

/* Ícone de cada aba num chip arredondado, cor forte */
.menu-group-items button[data-module] .nav-ico {
  width: 28px; height: 28px;
  flex: 0 0 28px;
  padding: 5.5px;
  border-radius: 8px;
  background: #ebf3ef;
  color: #3d6a58;
  box-sizing: border-box;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Cada aba = bloco clicável com fundo sutil em repouso */
.menu-group-items button[data-module] {
  background: #f6faf8;
  color: #223330;
  border: 1px solid transparent;
}
.menu-group-items button[data-module]:hover {
  background: #e8f4ee;
  color: #0b6a49;
  border-color: #d5e8e0;
}
.menu-group-items button[data-module]:hover .nav-ico {
  background: #d4ede1;
  color: #0c8259;
}

/* Aba ativa: fundo esmeralda claro + chip esmeralda cheio (ícone branco) */
.menu-group-items button[data-module].active {
  background: linear-gradient(135deg, #dff2e9 0%, #f0f9f5 100%);
  color: #06543a;
  border-color: #bfe4d3;
}
.menu-group-items button[data-module].active .nav-ico {
  background: var(--nav-accent, #0f9d6b);
  color: #ffffff;
}

/* Ensaio de Proficiência — veredito "Alerta" (âmbar) + escala do z-score */
.mv-verdict.alert { background: #fdf7ec; color: #8a5a12; }
.pt-scale { text-align: center; font-size: 11.5px; color: var(--muted); margin: 8px 0 0; }

/* Investigação do Ensaio de Proficiência (obrigatória se insatisfatório) */
.pt-investigation {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px 14px;
  margin: 6px 0 14px;
}
.pt-investigation.pt-mandatory {
  border-color: #efc5bf;
  background: #fdf5f4;
}
.pt-investigation legend { font-size: 12px; font-weight: 800; color: var(--ink); padding: 0 6px; }
.pt-investigation.pt-mandatory legend { color: var(--red); }
.pt-inv-banner {
  font-size: 12.5px;
  color: #7d2626;
  background: #fbe9e7;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
}
.pt-investigation:not(.pt-mandatory) .pt-inv-banner { color: #7d5410; background: #fdf7ec; }
.req { color: var(--red); font-weight: 800; }
.pt-inv-chip {
  display: inline-block;
  font-size: 11.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  margin: 6px 0 2px;
}
.pt-inv-chip.open { background: #fdf2f2; color: #a3271b; }
.pt-inv-chip.done { background: #e4f1ec; color: var(--success); }

/* Ensaio de Proficiência — lista densa agrupada por RODADA.
   Uma rodada traz dezenas de analitos (54 numa só, hoje, no Anhanguera): em
   cartão a pessoa rolava ~10 telas para achar o que precisa de ação. Aqui a
   rodada é a unidade de leitura, com placar no cabeçalho, e cada analito é uma
   linha com a régua do z-score — o "quase estourando" (z 1,9) aparece, coisa
   que o selo verde escondia. */
/* #proficiencyBody é .cf-list — uma GRADE de cartões (colunas de 320px). Os
   blocos desta tela ocupam a linha inteira; sem isto a faixa de alerta virava
   uma coluna vertical e a tabela da rodada ficava espremida ao lado dela,
   escondendo as colunas da direita (inclusive as ações). Mesmo recurso que o
   .cf-group já usa acima. */
.cf-list > .pt-alertbar,
.cf-list > .pt-round,
.cf-list > .pt-trend-wrap,
.cf-list > .table-empty { grid-column: 1 / -1; }
.pt-round { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; margin-bottom: 12px; }
.pt-round > summary {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; cursor: pointer; background: #f7faf8; list-style: none;
}
.pt-round > summary::-webkit-details-marker { display: none; }
.pt-round > summary::before {
  content: "›"; font-size: 20px; line-height: 1; color: var(--muted);
  transition: transform .15s ease;
}
.pt-round[open] > summary::before { transform: rotate(90deg); }
.pt-round-title { font-weight: 800; color: var(--ink); font-size: 14.5px; }
.pt-round-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pt-round-score { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.pt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pt-table th {
  text-align: left; padding: 7px 10px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line);
}
.pt-table td { padding: 8px 10px; border-top: 1px solid #eef2f0; vertical-align: middle; }
.pt-table tbody tr:hover { background: #f8fbf9; }
.pt-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-analyte { font-weight: 700; color: var(--ink); }
.pt-analyte small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); }
/* Régua do z: faixa verde |z|<=2, âmbar até 3, vermelho fora. */
.pt-ruler { position: relative; height: 14px; min-width: 120px; border-radius: 7px; background: #fdecea; overflow: hidden; }
.pt-ruler i { position: absolute; top: 0; bottom: 0; display: block; }
.pt-ruler .pt-amber { left: 12.5%; width: 75%; background: #fdf1dc; }
.pt-ruler .pt-green { left: 25%; width: 50%; background: #e4f1ec; }
.pt-ruler .pt-zero { left: 50%; width: 1px; background: #b6c6bf; }
.pt-ruler .pt-dot {
  width: 10px; height: 10px; top: 2px; margin-left: -5px;
  border-radius: 50%; background: var(--success); border: 1px solid #fff;
}
.pt-ruler .pt-dot.warn { background: #b57113; }
.pt-ruler .pt-dot.bad { background: var(--red); }
.pt-z { font-weight: 800; font-variant-numeric: tabular-nums; }
.pt-z.warn { color: #8a5a12; }
.pt-z.bad { color: var(--red); }
/* Faixa "o que precisa de você" acima da lista. */
.pt-alertbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid #efc5bf; background: #fdf5f4; color: #7d2626;
  border-radius: 12px; padding: 10px 14px; font-size: 13px; margin-bottom: 12px;
}
.pt-alertbar strong { font-weight: 800; }
/* Visão por analito: tendência do z ao longo das rodadas. */
.pt-trend-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-top: 1px solid #eef2f0; }
.pt-trend-row:first-child { border-top: 0; }
.pt-trend-name { width: 190px; font-weight: 700; color: var(--ink); font-size: 13px; }
.pt-trend-name small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.pt-trend-note { font-size: 12.5px; color: var(--muted); }
.pt-trend-note.bias { color: #8a5a12; font-weight: 700; }

/* Gerenciar abas (admin) — habilitar/desabilitar módulos */
#moduleSettingsDialog { width: min(560px, 96vw); }
.ms-body { display: grid; gap: 14px; margin: 6px 0 4px; max-height: 60vh; overflow-y: auto; }
.ms-group h4 {
  margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #2b3832;
}
.ms-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 6px; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease;
}
.ms-item:hover { background: var(--surface-soft); }
.ms-item span { flex: 1; color: var(--ink); font-weight: 600; font-size: 14px; }
.ms-item small { color: var(--muted); font-size: 11px; }
.ms-item.ms-locked { opacity: 0.75; cursor: default; background: #f7faf9; }
.ms-item input[type="checkbox"] { width: 18px; height: 18px; }

/* Gerenciar abas — seletor de unidade */
.ms-unit-select { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); margin: 4px 0 12px; }
.ms-unit-select select { font-weight: 600; }

/* Atas de Reunião — seleção de participantes + folha de assinaturas */
.mt-participants { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 14px; margin: 6px 0 14px; }
.mt-part-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mt-part-head strong { font-size: 13px; color: var(--ink); }
.mt-part-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; max-height: 220px; overflow-y: auto; margin-top: 8px; }
.mt-part-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; cursor: pointer; }
.mt-part-item:hover { background: var(--surface-soft); }
.mt-part-item span { font-size: 13.5px; color: var(--ink); }
.mt-sign-meta { color: var(--muted); font-size: 12.5px; margin-bottom: 12px; font-weight: 600; }

/* Execução de auditoria no celular: botões de resposta empilham (não somem) */
@media (max-width: 680px) {
  .audit-answer-grid { grid-template-columns: 1fr; gap: 8px; }
  .audit-answer-btn { min-height: 46px; width: 100%; }
  .audit-execution-dialog { width: calc(100vw - 12px); max-width: none; }
  .audit-execution-dialog form { padding: 14px; }
  .audit-execution-body { max-height: 78vh; }
  .audit-exec-kpis { width: 100%; }
  .audit-exec-kpis span { flex: 1 1 auto; text-align: center; }
  .audit-exec-nav, .audit-exec-actions, .audit-exec-footer { width: 100%; }
  .audit-exec-nav button, .audit-exec-actions button, .audit-exec-footer button { flex: 1 1 auto; }
}

/* Campo de senha do usuário com botão Gerar */
.password-row { display: flex; gap: 8px; align-items: center; }
.password-row input { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); letter-spacing: 0.02em; }
.password-row button { flex: 0 0 auto; white-space: nowrap; }
.password-hint { display: block; color: var(--muted); font-size: 11.5px; margin-top: 5px; }

/* Link discreto na tela de login (esqueci minha senha / voltar) */
.login-link {
  background: none;
  border: none;
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  align-self: center;
  box-shadow: none;
}
.login-link:hover { text-decoration: underline; color: var(--green-dark); }

/* =================================================================
   Design comercial v1 — polimento global sem alterar funcionalidades
   ================================================================= */
:root {
  --brand-primary: #0a8055;
  --brand-primary-strong: #086f47;
  --brand-primary-soft: #e6f5ee;
  --brand-ink: #10251f;
  --brand-muted: #53615c;
  --brand-line: #dce8e3;
  --brand-panel: rgba(255, 255, 255, 0.88);
  --brand-shadow: 0 18px 45px -32px rgba(11, 42, 31, 0.55);
}

body {
  background:
    radial-gradient(900px 520px at 88% -10%, rgba(15, 157, 107, 0.10), transparent 58%),
    radial-gradient(720px 460px at 12% 18%, rgba(37, 99, 235, 0.055), transparent 60%),
    linear-gradient(180deg, #f7faf9 0%, #eef4f1 100%);
  color: var(--brand-ink);
  font-family: "Manrope", Arial, Helvetica, sans-serif;
}

.login-screen {
  overflow: hidden;
  background:
    radial-gradient(760px 520px at 12% 14%, rgba(15, 157, 107, 0.20), transparent 58%),
    radial-gradient(680px 520px at 92% 86%, rgba(7, 120, 79, 0.13), transparent 62%),
    linear-gradient(145deg, #f8fbfa 0%, #e7f1ec 52%, #f6faf8 100%);
}

.login-screen::before,
.login-screen::after {
  content: "";
  position: fixed;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(2px);
}

.login-screen::before {
  width: 310px;
  height: 310px;
  left: -90px;
  bottom: -120px;
  background: rgba(15, 157, 107, 0.13);
}

.login-screen::after {
  width: 420px;
  height: 420px;
  right: -160px;
  top: -140px;
  background: rgba(37, 99, 235, 0.075);
}

.login-card {
  position: relative;
  z-index: 1;
  max-width: 438px;
  border: 1px solid rgba(220, 232, 227, 0.92);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.90);
  box-shadow: 0 30px 80px -44px rgba(11, 42, 31, 0.78), 0 2px 8px rgba(11, 42, 31, 0.06);
  backdrop-filter: blur(16px);
}

.login-brand {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(220, 232, 227, 0.90);
}

.brand-mark {
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 35%),
    linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-strong) 100%);
  box-shadow: 0 14px 24px -16px rgba(15, 157, 107, 0.95);
}

.login-heading h1,
.topbar h1,
#pageTitle {
  color: var(--brand-ink);
  letter-spacing: -0.045em;
}

.login-heading h1 {
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.04;
}

.login-card label {
  color: #20312b;
}

input,
select,
textarea {
  border-radius: 12px;
  border-color: #cfded8;
  background: rgba(255, 255, 255, 0.94);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(15, 157, 107, 0.14);
}

button,
.button-link {
  border-radius: 12px;
}

/* Imprimir é a ação principal do cartão de formulário: quem abre essa tela vai
   entregar o papel ao paciente. "Baixar original" fica ao lado, discreto, para
   quem vai editar. */
.cf-print {
  color: #0f7a4d;
  border-color: #9fd7bf;
  background: #ecfdf5;
  font-weight: 650;
}
.cf-print:hover {
  background: #d7f5e6;
}

/* Gradiente de CTA com :where(): especificidade zero — vale só para botões
   "puros"; componentes com classe própria não herdam o verde. */
button:where(:not(.secondary):not(.danger):not(.login-link)) {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-strong) 100%);
  box-shadow: 0 14px 26px -18px rgba(15, 157, 107, 0.85);
}

button.secondary {
  background: rgba(255, 255, 255, 0.92);
  border-color: #cfded8;
  color: #08784f;
}

.sidebar {
  border-right: 1px solid rgba(220, 232, 227, 0.95);
  background:
    linear-gradient(180deg, rgba(15, 157, 107, 0.065), rgba(255, 255, 255, 0) 210px),
    rgba(255, 255, 255, 0.96);
  box-shadow: 14px 0 44px -38px rgba(11, 42, 31, 0.60);
}

.sidebar .brand {
  margin-bottom: 12px;
}

.sidebar .brand strong,
.login-brand strong {
  color: var(--brand-ink);
  font-weight: 850;
}

.sidebar .brand span,
.login-brand span,
.login-card .brand span {
  color: var(--brand-muted);
}

.menu-group:has(.menu-group-items:not([hidden]) button.active) {
  border-color: rgba(15, 157, 107, 0.18);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 32px -28px rgba(11, 42, 31, 0.42);
}

.menu-group-title {
  color: #33433d;
}

.menu-group-title span {
  font-weight: 850;
}

.menu-group-items button[data-module] {
  border-radius: 16px;
}

.menu-group-items button[data-module].active {
  background: linear-gradient(135deg, #dbf2e8 0%, #f6fbf8 100%);
  border-color: rgba(15, 157, 107, 0.24);
  color: #075c3f;
}

.app-shell {
  min-height: 100vh;
}

.topbar {
  border: 1px solid rgba(220, 232, 227, 0.90);
  border-top: 0;
  border-radius: 0 0 20px 20px;
  background: rgba(255, 255, 255, 0.90);
  box-shadow: var(--brand-shadow);
}

.topbar .eyebrow,
.login-heading .eyebrow {
  color: var(--brand-primary-strong);
  letter-spacing: 0.08em;
}

.filters,
.records-toolbar,
.table-wrap,
.dashboard-priority,
.attention-panel,
.card,
.cf-card,
dialog {
  border-color: var(--brand-line);
  box-shadow: var(--brand-shadow);
}

.filters {
  background: var(--brand-panel);
  backdrop-filter: blur(10px);
}

.card,
.dashboard-priority,
.attention-panel,
.table-wrap,
.cf-card {
  background: rgba(255, 255, 255, 0.92);
}

.section-head h2,
.dashboard-priority h2,
.attention-panel h2 {
  color: var(--brand-ink);
  letter-spacing: -0.03em;
}

th {
  color: #52635d;
  background: #f4f8f6;
}

tbody tr:hover {
  background: #f7fbf9;
}

.status.success,
.attention-ok {
  background: var(--brand-primary-soft);
  color: var(--brand-primary-strong);
}

.toast {
  border-radius: 16px;
  box-shadow: 0 20px 45px -28px rgba(11, 42, 31, 0.70);
}

.empty-state:last-child,
main > footer.empty-state {
  margin: 18px 0 4px;
  color: #65736e;
  font-size: 12px;
}

@media (max-width: 980px) {
  .topbar {
    border-radius: 0 0 18px 18px;
  }

  .login-screen {
    padding: 18px;
  }
}

@media (max-width: 640px) {
  .login-card {
    border-radius: 16px;
    padding: 24px 20px;
  }

  .top-actions .user-badge {
    width: 100%;
    text-align: center;
  }
}

/* =================================================================
   Interface desktop/mobile v2 — legibilidade e toque
   ================================================================= */
@media (min-width: 1180px) {
  .app-shell {
    padding: 30px 36px 34px;
  }

  .topbar {
    margin: -30px -36px 22px;
    padding: 20px 36px;
  }

  .filters {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr) auto;
    gap: 10px;
    align-items: center;
  }

  .records-head {
    margin-top: 8px;
  }

  .records-head .records-toolbar {
    max-width: 720px;
  }

  .table-wrap {
    border-radius: 16px;
  }
}

@media (max-width: 980px) {
  body {
    display: block;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: auto;
    max-height: 48vh;
    overflow-y: auto;
    border-right: 0;
    border-bottom: 1px solid var(--brand-line);
    box-shadow: 0 18px 34px -30px rgba(11, 42, 31, 0.70);
  }

  .sidebar .brand {
    display: flex;
    margin-bottom: 8px;
    padding-bottom: 10px;
  }

  #menu {
    gap: 8px;
  }

  .menu-group {
    border-radius: 16px;
  }

  .menu-group-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .menu-group-items button[data-module] {
    min-height: 48px;
    padding: 10px 12px;
  }

  .app-shell {
    padding: 18px 18px 30px;
  }

  .topbar {
    margin: -18px -18px 18px;
    padding: 16px 18px;
  }

  .filters {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
  }

  .section-head,
  .records-head {
    gap: 10px;
  }

  .section-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .topbar {
    align-items: stretch;
  }

  .topbar,
  .top-actions,
  .section-head,
  .records-head,
  .records-head .section-actions {
    flex-direction: column;
  }

  .top-actions,
  .section-head,
  .records-head,
  .records-head .records-toolbar,
  .records-head .section-actions {
    width: 100%;
  }

  .top-actions {
    align-items: stretch;
  }

  .top-actions button,
  .section-actions button,
  .records-head .section-actions button,
  .records-toolbar button {
    width: 100%;
    min-height: 46px;
  }

  .filters {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .filters select,
  .filters input,
  .filters button,
  .records-toolbar input,
  .records-toolbar button {
    width: 100%;
    min-height: 46px;
  }

  .records-head .records-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    max-width: none;
  }

  .dashboard-priority,
  .attention-panel,
  .split,
  .cards,
  .compact-cards,
  .dashboard-groups {
    grid-template-columns: 1fr !important;
  }

  .table-wrap {
    margin-inline: -4px;
    border-radius: 16px;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 720px;
  }

  th,
  td {
    padding: 12px 10px;
  }

  dialog {
    width: calc(100vw - 14px);
    max-width: none;
    max-height: calc(100dvh - 14px);
    border-radius: 16px;
  }

  #recordDialog {
    max-height: calc(100dvh - 14px);
  }

  #recordDialog .form-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .sidebar {
    max-height: 42vh;
    padding: 10px;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .sidebar .brand strong {
    font-size: 14px;
  }

  .sidebar .brand span {
    font-size: 11px;
  }

  .menu-group-title {
    min-height: 44px;
  }

  .menu-group-items {
    grid-template-columns: 1fr;
  }

  .menu-group-items button[data-module] {
    min-height: 50px;
    font-size: 15px;
  }

  .app-shell {
    padding: 14px 12px 28px;
  }

  .topbar {
    margin: -14px -12px 14px;
    padding: 14px 12px;
  }

  .topbar h1,
  #pageTitle {
    font-size: 24px;
  }

  .eyebrow {
    font-size: 11px;
  }

  .login-screen {
    padding: 12px;
  }

  .login-card {
    width: 100%;
    max-width: none;
    padding: 22px 18px;
  }

  .login-heading h1 {
    font-size: 25px;
  }
}

/* =================================================================
   Correção mobile v3 — restaurar gaveta e não cortar abas
   ================================================================= */
@media (max-width: 980px) {
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(312px, 88vw);
    height: 100vh;
    height: 100dvh;
    max-height: none;
    z-index: 60;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    border-right: 1px solid var(--brand-line);
    border-bottom: 0;
    box-shadow: none;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: 0 24px 60px rgba(15, 40, 30, 0.35);
  }

  .sidebar .brand {
    position: static;
    top: auto;
    background: transparent;
    backdrop-filter: none;
  }

  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(10, 20, 15, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
  }

  body.sidebar-open .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .menu-group-items {
    grid-template-columns: 1fr;
  }

  .menu-group-items button[data-module] {
    min-height: 48px;
  }

  .topbar {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .topbar-titles {
    flex: 1 1 180px;
    min-width: 0;
  }

  .top-actions {
    flex: 1 1 100%;
  }
}

@media (max-width: 520px) {
  .sidebar {
    width: min(326px, 92vw);
    max-height: none;
  }
}

@media (max-width: 980px) {
  body:not(.sidebar-open) .sidebar {
    transform: translateX(-100%) !important;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0) !important;
  }
}

/* =================================================================
   Design executivo v5 — acabamento de produto profissional
   ================================================================= */
:root {
  --pro-shadow-soft: 0 10px 26px -22px rgba(11, 42, 31, 0.55);
  --pro-shadow-hover: 0 22px 44px -30px rgba(11, 42, 31, 0.62);
  --pro-ring: rgba(15, 157, 107, 0.16);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15, 157, 107, 0.28), transparent);
}

.user-badge {
  border: 1px solid rgba(15, 157, 107, 0.20);
  background: linear-gradient(135deg, #e9f7f1 0%, #f7fcfa 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.filters,
.records-toolbar,
.daily-progress,
.table-wrap,
.answer,
.split section,
.dashboard-priority,
.attention-panel,
.card,
.cf-card,
.search-result-card,
.qi-summary-card,
.qi-card {
  border-radius: 16px;
  box-shadow: var(--pro-shadow-soft);
}

.filters,
.records-toolbar {
  padding: 13px;
}

.filters select,
.filters input,
.records-toolbar input,
.records-toolbar select {
  min-height: 44px;
}

.card,
.dashboard-card,
.cf-card,
.qi-summary-card,
.qi-card,
.search-result-card {
  position: relative;
  overflow: hidden;
}

.card::before,
.dashboard-card::before,
.cf-card::before,
.qi-summary-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, rgba(15, 157, 107, 0.65), rgba(15, 157, 107, 0));
  opacity: 0;
  transition: opacity 0.16s ease;
}

.card:hover,
.dashboard-card:hover,
.cf-card:hover,
.qi-summary-card:hover,
.qi-card:hover,
.search-result-card:hover {
  border-color: rgba(15, 157, 107, 0.24);
  box-shadow: var(--pro-shadow-hover);
}

.card:hover::before,
.dashboard-card:hover::before,
.cf-card:hover::before,
.qi-summary-card:hover::before {
  opacity: 1;
}

.dashboard-card strong,
.card strong,
.qi-summary-card strong {
  letter-spacing: -0.04em;
}

.dashboard-card span,
.card span,
.qi-summary-card span,
.cf-meta,
.cf-desc {
  line-height: 1.35;
}

.dashboard-group h2,
.section-head h2 {
  font-weight: 850;
}

.dashboard-priority {
  border-left: 0;
  background:
    radial-gradient(520px 180px at 0% 0%, rgba(15, 157, 107, 0.08), transparent 60%),
    rgba(255, 255, 255, 0.93);
}

.dashboard-priority .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.dashboard-priority .eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 5px rgba(15, 157, 107, 0.10);
}

.attention-item {
  border-radius: 16px;
  min-height: 52px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.60);
}

.attention-item strong {
  min-width: 26px;
  height: 26px;
  font-size: 12px;
}

.table-wrap {
  border: 1px solid rgba(220, 232, 227, 0.95);
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid #dce8e3;
  background: linear-gradient(180deg, #f8fbfa 0%, #f0f6f3 100%);
  font-size: 11px;
  letter-spacing: 0.055em;
}

td {
  border-bottom-color: #edf3f0;
}

tbody tr {
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

tbody tr:hover {
  background: #f8fcfa;
  box-shadow: inset 3px 0 0 rgba(15, 157, 107, 0.45);
}

.status {
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.status.success {
  border-color: #bfe4d3;
}

.status.warn {
  border-color: #f4ddb0;
}

.status.danger {
  border-color: #f0c2bd;
}

.action-menu summary {
  border-radius: 999px;
  border-color: #d7e5df;
  background: #ffffff;
}

.action-menu[open] summary,
.action-menu summary:hover {
  background: var(--brand-primary-soft);
  color: var(--brand-primary-strong);
}

.action-menu-list {
  border-color: rgba(220, 232, 227, 0.96);
  border-radius: 16px;
  box-shadow: 0 22px 44px -26px rgba(11, 42, 31, 0.48);
  padding: 6px;
}

.action-menu-list button {
  border-radius: 12px;
}

.table-empty {
  border-radius: 16px;
  background:
    radial-gradient(220px 120px at 50% 0%, rgba(15, 157, 107, 0.10), transparent 70%),
    #ffffff;
}

.empty-icon {
  box-shadow: 0 12px 24px -18px rgba(15, 157, 107, 0.90);
}

dialog {
  border-radius: 16px;
  box-shadow: 0 28px 74px -36px rgba(4, 24, 17, 0.72);
}

dialog::backdrop {
  background: rgba(9, 24, 18, 0.42);
  backdrop-filter: blur(3px);
}

#recordDialog h2 {
  letter-spacing: -0.03em;
}

#recordDialog menu,
dialog menu {
  gap: 10px;
}

@media (max-width: 720px) {
  .topbar {
    position: static;
  }

  .topbar::after {
    left: 12px;
    right: 12px;
  }

  .filters,
  .records-toolbar {
    padding: 10px;
  }

  .card,
  .dashboard-card,
  .cf-card,
  .qi-summary-card,
  .qi-card,
  .search-result-card {
    border-radius: 16px;
  }

  th {
    position: static;
  }
}

/* =================================================================
   10 melhorias enterprise v6 — inspirado em grandes plataformas SaaS
   ================================================================= */
:root {
  --enterprise-blue: #1f6feb;
  --enterprise-slate: #17212b;
  --enterprise-surface: rgba(255, 255, 255, 0.94);
  --enterprise-line: rgba(196, 211, 204, 0.78);
}

/* 1. Fundo com camada institucional mais sofisticada */
body {
  background:
    radial-gradient(820px 520px at 78% -12%, rgba(31, 111, 235, 0.075), transparent 60%),
    radial-gradient(760px 460px at 5% 10%, rgba(15, 157, 107, 0.13), transparent 58%),
    linear-gradient(180deg, #f8fbfa 0%, #eef5f1 48%, #f7faf9 100%);
}

/* 2. Topbar com aparencia de cockpit corporativo */
.topbar {
  min-height: 86px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 250, 0.88)),
    radial-gradient(520px 160px at 90% 0%, rgba(15, 157, 107, 0.10), transparent 65%);
}

.topbar h1,
#pageTitle {
  font-size: clamp(25px, 2vw, 32px);
}

/* 3. Sidebar com trilho visual mais premium */
.sidebar {
  background:
    linear-gradient(180deg, rgba(15, 157, 107, 0.085), rgba(255, 255, 255, 0) 240px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 250, 0.96));
}

.sidebar .brand {
  border-bottom-color: rgba(196, 211, 204, 0.82);
}

.menu-group-title {
  letter-spacing: 0.08em;
}

/* 4. Itens do menu com efeito de selecao de app enterprise */
.menu-group-items button[data-module] {
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.menu-group-items button[data-module].active {
  border-color: rgba(15, 157, 107, 0.30);
  box-shadow:
    inset 4px 0 0 var(--brand-primary),
    0 12px 22px -18px rgba(11, 42, 31, 0.65);
}

/* 5. Botoes principais com acabamento menos "flat" */
button:not(.secondary):not(.danger):not(.login-link) {
  border: 1px solid rgba(6, 95, 70, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 16px 28px -20px rgba(6, 95, 70, 0.95);
}

button:not(.secondary):not(.danger):not(.login-link):hover {
  filter: saturate(1.04) brightness(1.01);
}

button.secondary:hover {
  border-color: rgba(15, 157, 107, 0.34);
  background: #f8fcfa;
}

/* 6. Inputs/filtros com sensacao de formulario premium */
input,
select,
textarea {
  box-shadow: inset 0 1px 2px rgba(16, 37, 31, 0.035);
}

.filters:focus-within,
.records-toolbar:focus-within {
  border-color: rgba(15, 157, 107, 0.34);
  box-shadow: 0 0 0 4px var(--pro-ring), var(--pro-shadow-soft);
}

/* 7. Cards de indicador com leitura executiva */
.dashboard-card,
.card,
.qi-summary-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 253, 251, 0.94));
}

.dashboard-card strong,
.card strong {
  color: var(--enterprise-slate);
  font-weight: 850;
}

.dashboard-card span,
.card span {
  color: #52625c;
  font-weight: 700;
}

/* 8. Tabelas com primeira coluna mais legivel em telas grandes */
@media (min-width: 981px) {
  tbody td:first-child,
  thead th:first-child {
    padding-left: 16px;
  }

  tbody td:last-child,
  thead th:last-child {
    padding-right: 16px;
  }
}

/* 9. Alertas e prioridades com linguagem visual menos agressiva */
.attention-item.danger {
  background:
    linear-gradient(135deg, #fff6f6, #fffafa);
  border-color: #efc7c3;
}

.attention-item.warn {
  background:
    linear-gradient(135deg, #fff8ea, #fffdf7);
  border-color: #efd7a4;
}

.attention-item > span {
  font-weight: 650;
}

/* 10. Mobile com acabamento de aplicativo: acoes e dialogs mais confortaveis */
@media (max-width: 720px) {
  .top-actions {
    gap: 8px;
  }

  .top-actions button,
  .section-actions button,
  .records-toolbar button {
    border-radius: 16px;
  }

  .table-wrap {
    border-radius: 16px;
    box-shadow: 0 12px 28px -24px rgba(11, 42, 31, 0.55);
  }

  dialog {
    border-radius: 16px;
  }

  .status {
    font-size: 11px;
    padding: 4px 8px;
  }
}

/* =================================================================
   Ajuste fino v7 — menu mais sobrio + Pesquisa inteligente premium
   ================================================================= */
.menu-group-title {
  background: linear-gradient(135deg, #f4faf7, #ffffff);
  border: 1px solid rgba(196, 211, 204, 0.82);
  color: #263832;
}

.menu-group-title .nav-ico {
  background: #e5f3ed;
  color: var(--brand-primary-strong);
}

.menu-group-items button[data-module] {
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(220, 232, 227, 0.80);
  color: #243630;
}

.menu-group-items button[data-module] .nav-ico {
  background: #eef6f2;
  color: #477061;
}

.menu-group-items button[data-module]:hover {
  background: #f3faf6;
  border-color: rgba(15, 157, 107, 0.22);
}

.menu-group-items button[data-module].active {
  background: linear-gradient(135deg, #e7f6ef 0%, #ffffff 100%);
  color: #075c3f;
}

#assistant {
  max-width: 1120px;
}

#assistant::before {
  content: "Busque rapidamente evidencias, documentos, riscos, treinamentos e pendencias do SGQ.";
  display: block;
  margin: 0 0 12px;
  color: #53615c;
  font-size: 14px;
  font-weight: 650;
}

.assistant-box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(220, 232, 227, 0.94);
  border-radius: 16px;
  background:
    radial-gradient(420px 160px at 0% 0%, rgba(15, 157, 107, 0.085), transparent 70%),
    rgba(255, 255, 255, 0.92);
  box-shadow: var(--pro-shadow-soft);
}

.assistant-box textarea {
  min-height: 112px;
  border: 0;
  background: transparent;
  box-shadow: none;
  resize: vertical;
  font-size: 15px;
  line-height: 1.5;
}

.assistant-box textarea:focus {
  box-shadow: none;
}

#askAssistant {
  min-height: 92px;
  align-self: stretch;
  border-radius: 16px;
  font-size: 15px;
}

.search-examples {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 16px;
}

.search-examples span {
  color: #53615c;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.search-examples button.secondary.small {
  min-height: 34px;
  border-radius: 999px;
  background: #ffffff;
  border-color: rgba(196, 211, 204, 0.92);
  color: #08784f;
  box-shadow: 0 8px 18px -16px rgba(11, 42, 31, 0.45);
}

#assistantAnswer.answer:not(:empty) {
  margin-top: 14px;
  border-radius: 16px;
}

@media (max-width: 720px) {
  #assistant::before {
    font-size: 13px;
  }

  .assistant-box {
    grid-template-columns: 1fr;
    border-radius: 16px;
  }

  .assistant-box textarea {
    min-height: 126px;
  }

  #askAssistant {
    min-height: 48px;
  }

  .search-examples button.secondary.small {
    flex: 1 1 auto;
  }
}

/* =================================================================
   Pesquisa inteligente v8 — modulo central do SGQ
   ================================================================= */
#assistant {
  display: grid;
  gap: 14px;
}

#assistant::before {
  display: none;
}

.assistant-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 22px;
  border: 1px solid rgba(220, 232, 227, 0.94);
  border-radius: 16px;
  background:
    radial-gradient(520px 190px at 0% 0%, rgba(15, 157, 107, 0.12), transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(248, 252, 250, 0.92));
  box-shadow: var(--pro-shadow-soft);
}

.assistant-hero h2 {
  margin: 3px 0 5px;
  color: var(--brand-ink);
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: -0.045em;
}

.assistant-hero span {
  color: #53615c;
  font-size: 14px;
  line-height: 1.5;
}

.assistant-kpis {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 240px;
}

.assistant-kpis span {
  padding: 7px 10px;
  border: 1px solid rgba(196, 211, 204, 0.84);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #08784f;
  font-size: 12px;
  font-weight: 800;
}

.assistant-box {
  margin: 0;
  border-color: rgba(15, 157, 107, 0.20);
}

.assistant-box:focus-within {
  border-color: rgba(15, 157, 107, 0.42);
  box-shadow: 0 0 0 4px var(--pro-ring), var(--pro-shadow-soft);
}

.assistant-box textarea::placeholder {
  color: #6a7772;
}

.assistant-recent {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: -6px;
}

.assistant-recent span {
  color: #53615c;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.assistant-recent button.secondary.small {
  min-height: 32px;
  border-radius: 999px;
  color: #315047;
  background: #f8fcfa;
}

.search-loading {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px;
}

.search-loading > span {
  width: 34px;
  height: 34px;
  border: 3px solid #dce8e3;
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: assistantSpin 0.8s linear infinite;
}

.search-loading strong {
  color: var(--brand-ink);
}

.search-loading p {
  margin: 4px 0 0;
  color: #53615c;
}

@keyframes assistantSpin {
  to { transform: rotate(360deg); }
}

.search-summary {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(220, 232, 227, 0.92);
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff, #f7fbf9);
}

.search-summary > span {
  color: #08784f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.search-summary > strong {
  color: var(--brand-ink);
  font-size: 18px;
}

/* Aviso de resultado cortado: informa sem competir com a contagem. */
.search-refine {
  display: block;
  margin-top: 3px;
  color: #6b7f76;
  font-size: 12.5px;
}

.search-group {
  margin-top: 18px;
}

.search-group-title {
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(220, 232, 227, 0.90);
}

.search-result-card {
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 253, 251, 0.94));
}

.search-result-card h3 {
  letter-spacing: -0.02em;
}

.search-best-match {
  border-radius: 999px;
  background: #e6f5ee;
  color: #08784f;
  font-weight: 850;
}

.search-empty {
  padding: 22px;
  border: 1px dashed rgba(15, 157, 107, 0.35);
  border-radius: 16px;
  background:
    radial-gradient(260px 140px at 50% 0%, rgba(15, 157, 107, 0.10), transparent 70%),
    #ffffff;
}

@media (max-width: 760px) {
  .assistant-hero {
    flex-direction: column;
    padding: 16px;
    border-radius: 16px;
  }

  .assistant-kpis {
    justify-content: flex-start;
    min-width: 0;
  }

  .assistant-box {
    padding: 12px;
  }

  .assistant-recent button.secondary.small,
  .search-examples button.secondary.small {
    flex: 1 1 calc(50% - 8px);
  }
}

@media (max-width: 480px) {
  .assistant-kpis span,
  .assistant-recent button.secondary.small,
  .search-examples button.secondary.small {
    width: 100%;
  }
}

/* =================================================================
   Pesquisa inteligente v9 — mais compacta e orientada a resultados
   ================================================================= */
#assistant {
  gap: 10px;
}

.assistant-hero {
  padding: 16px 20px;
  border-radius: 16px;
}

.assistant-hero h2 {
  max-width: 720px;
  font-size: clamp(21px, 1.75vw, 27px);
  line-height: 1.12;
}

.assistant-hero span {
  font-size: 13px;
}

.assistant-kpis {
  gap: 6px;
  min-width: 220px;
}

.assistant-kpis span {
  padding: 6px 9px;
  font-size: 11.5px;
}

.assistant-box {
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
}

.assistant-box::before {
  content: "";
  align-self: start;
  justify-self: start;
  width: 22px;
  height: 22px;
  margin: 4px 0 -26px 4px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 42% 42%, transparent 0 35%, #08784f 36% 48%, transparent 49%),
    linear-gradient(45deg, transparent 0 58%, #08784f 59% 68%, transparent 69%);
  opacity: 0.72;
  pointer-events: none;
}

.assistant-box textarea {
  min-height: 82px;
  padding-left: 34px;
  font-size: 14px;
}

#askAssistant {
  min-height: 76px;
  border-radius: 16px;
}

.search-examples,
.assistant-recent {
  margin: 0;
}

.search-examples span,
.assistant-recent span {
  font-size: 11px;
}

.search-examples button.secondary.small,
.assistant-recent button.secondary.small {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 12px;
}

#assistantAnswer.answer:not(:empty) {
  margin-top: 8px;
}

.search-result-cards {
  gap: 10px;
}

.search-result-card {
  padding: 14px;
}

.search-result-card h3 {
  margin-top: 6px;
}

.search-result-actions {
  gap: 7px;
}

@media (max-width: 760px) {
  .assistant-hero {
    padding: 14px;
  }

  .assistant-box {
    grid-template-columns: 1fr;
  }

  .assistant-box textarea {
    min-height: 96px;
  }

  #askAssistant {
    min-height: 46px;
  }
}

/* =================================================================
   Pesquisa inteligente v10 — barra compacta final
   ================================================================= */
.assistant-hero {
  padding: 14px 18px;
}

.assistant-hero h2 {
  font-size: clamp(20px, 1.55vw, 25px);
}

.assistant-box {
  grid-template-columns: minmax(0, 1fr) 116px !important;
  align-items: stretch;
  min-height: 70px;
  padding: 10px;
}

.assistant-box::before {
  margin-top: 3px;
}

.assistant-box textarea#question {
  min-height: 54px !important;
  height: 54px !important;
  max-height: 90px;
  overflow-y: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 1.35;
}

#askAssistant {
  min-height: 54px !important;
  height: 54px;
  align-self: center;
  border-radius: 12px;
}

.search-examples,
.assistant-recent {
  gap: 6px;
}

.search-examples button.secondary.small,
.assistant-recent button.secondary.small {
  min-height: 28px;
  padding: 5px 9px;
}

@media (max-width: 760px) {
  .assistant-box {
    grid-template-columns: 1fr !important;
  }

  .assistant-box textarea#question {
    min-height: 72px !important;
    height: 72px !important;
  }

  #askAssistant {
    width: 100%;
    height: 46px;
    min-height: 46px !important;
  }
}

/* Correção v11: placeholder da Pesquisa inteligente legível */
.assistant-box::before {
  display: none;
}

.assistant-box textarea#question {
  width: 100%;
  min-width: 0;
  padding-left: 14px;
  color: var(--brand-ink);
  text-align: left;
  white-space: normal;
}

.assistant-box textarea#question::placeholder {
  color: #6a7772;
  opacity: 1;
}

/* =================================================================
   Limpeza visual v12 — menos poluicao, mais foco na busca
   ================================================================= */
#assistant {
  max-width: 1040px;
  gap: 8px;
}

.assistant-hero {
  display: none;
}

.assistant-box {
  background: #ffffff;
  border-color: rgba(196, 211, 204, 0.88);
  box-shadow: 0 14px 28px -26px rgba(11, 42, 31, 0.45);
}

.assistant-box:focus-within {
  box-shadow: 0 0 0 3px rgba(15, 157, 107, 0.12), 0 14px 28px -26px rgba(11, 42, 31, 0.45);
}

.search-examples,
.assistant-recent {
  padding: 0 2px;
}

.search-examples span,
.assistant-recent span {
  color: #6a7772;
  font-size: 10.5px;
  letter-spacing: 0.08em;
}

.search-examples button.secondary.small,
.assistant-recent button.secondary.small {
  background: transparent;
  border-color: rgba(196, 211, 204, 0.78);
  box-shadow: none;
}

.search-examples button.secondary.small:hover,
.assistant-recent button.secondary.small:hover {
  background: #f7fbf9;
}

.menu-group-title {
  background: #ffffff;
  border-color: rgba(220, 232, 227, 0.92);
  box-shadow: none;
}

.menu-group-title .nav-ico {
  background: #f1f7f4;
}

.menu-group:has(.menu-group-items:not([hidden]) button.active) {
  background: rgba(255, 255, 255, 0.62);
}

.menu-group-items button[data-module] {
  background: #ffffff;
}

.menu-group-items button[data-module].active {
  background: linear-gradient(135deg, #eaf7f1 0%, #ffffff 100%);
}

/* Correção v13: cada aba deve aparecer isoladamente */
.view:not(.active) {
  display: none !important;
}

#assistant.view:not(.active) {
  display: none !important;
}

#assistant.view.active {
  display: grid;
}

/* =================================================================
   v14 — CONTRASTE DO MENU + verde como ACENTO (nao como fundo)
   Diagnostico: o gradiente verde global das acoes primarias
   (button:not(.secondary):not(.danger):not(.login-link), specificity
   0,3,1) vazava sobre os titulos de grupo e itens de navegacao, que
   sao <button>. As tentativas limpas das camadas v7/v12 (fundo branco)
   tinham specificity menor (0,1,0 / 0,2,1) e nunca venciam — por isso a
   barra lateral virava uma "parede verde" com texto escuro de baixo
   contraste. Aqui restauramos a navegacao sobria com specificity
   suficiente (prefixo #menu) e reservamos o verde para o item ATIVO,
   os icones e as acoes primarias — verde vira acento, nao fundo.
   ================================================================= */

/* Titulos de secao — rotulo sobrio, sem fundo verde */
#menu .menu-group-title {
  background: #ffffff;
  border: 1px solid rgba(220, 232, 227, 0.92);
  color: #26302b;
  box-shadow: none;
}
#menu .menu-group-title:hover,
#menu .menu-group-title[aria-expanded="true"] {
  background: #f4faf7;
  border-color: rgba(15, 157, 107, 0.20);
}
#menu .menu-group-title .nav-ico {
  background: #eaf4ef;
  color: var(--brand-primary-strong);
}

/* Itens de navegacao (nao ativos) — cartao branco, tinta forte legivel */
#menu .menu-group-items button[data-module]:not(.active) {
  background: #ffffff;
  border: 1px solid rgba(220, 232, 227, 0.85);
  color: #223531;
  box-shadow: none;
  font-weight: 600;
}
#menu .menu-group-items button[data-module]:not(.active):hover {
  background: #f2faf6;
  border-color: rgba(15, 157, 107, 0.30);
  color: #0d3a2b;
}
#menu .menu-group-items button[data-module]:not(.active) .nav-ico {
  background: #eef6f2;
  color: #3f6a5b;
}

/* Item ATIVO — verde como acento: tinta verde + filete lateral de marca */
#menu .menu-group-items button[data-module].active {
  position: relative;
  background: linear-gradient(135deg, #e6f6ef 0%, #ffffff 100%);
  border: 1px solid rgba(15, 157, 107, 0.28);
  color: #075c3f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  font-weight: 750;
}
#menu .menu-group-items button[data-module].active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 58%;
  border-radius: 999px;
  background: var(--brand-primary);
}
#menu .menu-group-items button[data-module].active .nav-ico {
  background: rgba(15, 157, 107, 0.16);
  color: var(--brand-primary-strong);
}

/* Pesquisa inteligente — recurso de destaque: leve tom menta, diferenciado
   sem virar um botao verde gritante */
#menu .menu-group-items button[data-module="assistant"]:not(.active) {
  background: rgba(15, 157, 107, 0.07);
  border-color: rgba(15, 157, 107, 0.22);
  color: #08654a;
}
#menu .menu-group-items button[data-module="assistant"]:not(.active):hover {
  background: rgba(15, 157, 107, 0.12);
  color: #075c3f;
}

/* =================================================================
   Bloco recolhivel "Mais opcoes" — campos opcionais/tecnicos do
   formulario de registro, para deixar o form principal mais curto.
   ================================================================= */
#recordDialog .form-advanced {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafcfb;
  margin-top: 6px;
}
#recordDialog .form-advanced > summary {
  cursor: pointer;
  list-style: none;
  padding: 11px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}
#recordDialog .form-advanced > summary::-webkit-details-marker { display: none; }
#recordDialog .form-advanced > summary::before {
  content: "\25B8";
  color: var(--green);
  transition: transform 0.18s ease;
}
#recordDialog .form-advanced[open] > summary::before { transform: rotate(90deg); }
#recordDialog .form-advanced-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 4px 14px 14px;
}
@media (max-width: 640px) {
  #recordDialog .form-advanced-grid { grid-template-columns: 1fr; }
}

/* =================================================================
   Historico de Passagens de Plantao — cartoes (mais legivel que a
   tabela; preserva quebras de linha do resumo estruturado).
   ================================================================= */
.shift-history-list { display: flex; flex-direction: column; gap: 12px; }
.shift-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
}
.shift-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.shift-sector {
  background: var(--mint);
  color: var(--green-strong);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 999px;
}
.shift-when { color: var(--muted); font-size: 12.5px; font-family: var(--font-mono); white-space: nowrap; }
.shift-flow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.shift-person { display: inline-flex; align-items: center; gap: 9px; }
.shift-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: #e6f7f0; color: var(--green-strong);
  font-size: 11px; font-weight: 800;
}
.shift-avatar-to { background: #e7f1fb; color: #2a6cb0; }
.shift-person-info { display: flex; flex-direction: column; line-height: 1.2; }
.shift-person-info small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.shift-person-info strong { color: var(--ink); font-size: 13.5px; font-weight: 700; }
.shift-arrow { color: var(--muted-2); font-size: 18px; font-weight: 700; }
.shift-summary {
  white-space: pre-wrap;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.55;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
}
@media (max-width: 640px) {
  .shift-card-head { flex-wrap: wrap; }
  .shift-flow { gap: 10px; }
}

/* =================================================================
   Painel resumo de Planos de Acao (contadores por status).
   ================================================================= */
#dailyProgress.ap-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 16px;
}
.ap-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted-2);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
}
.ap-stat-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ap-stat-num { font-family: var(--font-mono); font-size: 24px; font-weight: 500; color: var(--ink); line-height: 1.1; }
.ap-stat-pct { font-size: 12px; font-weight: 700; color: var(--muted-2); }
.ap-done { border-left-color: var(--success); }
.ap-done .ap-stat-num { color: var(--success); }
.ap-progress { border-left-color: var(--blue); }
.ap-progress .ap-stat-num { color: var(--blue); }
.ap-late { border-left-color: var(--red); }
.ap-late .ap-stat-num { color: var(--red); }
.ap-reprog { border-left-color: var(--amber); }
.ap-reprog .ap-stat-num { color: var(--amber); }
.ap-total { border-left-color: var(--ink); }
@media (max-width: 720px) {
  #dailyProgress.ap-summary { grid-template-columns: repeat(2, 1fr); }
}

/* =================================================================
   Comprovante de assinatura — visual de certificado (treinamento/ata).
   ================================================================= */
#certificateBody .certificate-sheet { padding: 30px 34px; }
.cert-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 2px solid var(--green);
}
.cert-brand { display: flex; align-items: center; gap: 11px; }
.cert-brand-mark {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--green); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 15px;
}
.cert-brand-txt { display: flex; flex-direction: column; }
.cert-brand-txt strong { color: var(--ink); font-size: 15px; font-weight: 800; }
.cert-brand-txt span { color: var(--muted); font-size: 11.5px; }
.cert-seal {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--green); border-radius: 999px;
  padding: 6px 14px 6px 8px; color: var(--green-strong);
  transform: rotate(-3deg); flex: none;
}
.cert-seal-check {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
}
.cert-seal-text { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.1; }
#certificateBody .certificate-sheet h1 { font-size: 1.25rem; margin: 0 0 4px; color: var(--green-dark); }
#certificateBody .cert-sub { color: var(--muted); font-size: 13px; margin: 0 0 4px; }
.cert-signer {
  display: flex; align-items: center; gap: 13px;
  background: var(--mint); border: 1px solid #c9e6d5; border-radius: 12px;
  padding: 13px 15px; margin: 18px 0;
}
.cert-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 15px; flex: none;
}
.cert-signer-info { display: flex; flex-direction: column; gap: 1px; }
.cert-signer-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--green-strong); }
.cert-signer-name { font-size: 17px; font-weight: 800; color: var(--ink); }
.cert-signer-meta { font-size: 12.5px; color: var(--muted); }
.cert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.cert-field {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px;
}
.cert-field span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.cert-field strong { font-size: 13px; color: var(--ink); word-break: break-word; }
.cert-hash-box {
  background: var(--surface-soft); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; margin: 14px 0;
}
.cert-hash-label { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin-bottom: 4px; }
#certificateBody .cert-hash {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink);
  word-break: break-all; display: block;
}
#certificateBody .cert-foot {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--muted); line-height: 1.5;
}
@media (max-width: 560px) {
  .cert-grid { grid-template-columns: 1fr; }
  .cert-head { flex-wrap: wrap; }
}

/* Assinatura no comprovante — mesmo bloco do impresso (padrao DocuSign):
   colchete a esquerda, rotulo em cima, o traco e o identificador embaixo. */
.cert-signature { margin: 16px 0 6px; text-align: center; }
.cert-ds {
  position: relative; display: inline-block; text-align: left;
  padding: 5px 8px 4px 14px; border-left: 1.5px solid var(--ink);
}
.cert-ds::before, .cert-ds::after {
  content: ""; position: absolute; left: 0; width: 14px; border-top: 1.5px solid var(--ink);
}
.cert-ds::before { top: 0; }
.cert-ds::after { bottom: 0; }
.cert-ds-rot { font-size: 11px; color: var(--ink); line-height: 1.4; }
.cert-signature img { max-width: 320px; max-height: 90px; display: block; margin: 2px 0; }
.cert-ds-id { font-size: 10.5px; color: var(--muted); letter-spacing: .05em; line-height: 1.4; }
.cert-signature-line {
  max-width: 340px; margin: 8px auto 0; padding-top: 5px;
  font-size: 12.5px; color: var(--muted);
}

/* Quadro de assinatura (desenhar/gerar) no dialogo de assinatura */
.sign-pad-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 4px 0 0;
  background: var(--surface);
}
.sign-pad-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sign-pad-label > span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--green-strong); }
.sign-pad-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sign-pad {
  width: 100%; height: 150px;
  border: 1px dashed var(--border-control);
  border-radius: 12px;
  background: #fbfdfc;
  touch-action: none; cursor: crosshair;
  display: block;
}
.sign-pad-hint { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted); }

/* Em telas menores (tablet/celular) reduzimos o quadro de assinatura para
   garantir que documento + assinatura + botoes caibam sem rolagem excessiva. */
@media (max-width: 640px) {
  .sign-pad { height: 110px; }
  .sign-pad-wrap { padding: 10px 12px; }
  .sign-pad-label { flex-wrap: wrap; }
  .sign-foot { flex-wrap: wrap; }
  .sign-foot #signConfirm { flex: 1 1 100%; }
}
@media (max-height: 560px) {
  .sign-pad { height: 84px; }
}

/* =================================================================
   v15 — RESPOSTAS DE AUDITORIA: opções neutras, preenchem só quando ATIVAS
   O gradiente de CTA fazia o botão "Conforme" (tom success, sem fundo
   próprio) parecer pré-selecionado. Aqui o trio fica plano e igual;
   a cor forte é reservada ao estado .active — o verde volta a ser acento.
   ================================================================= */
.audit-answer-btn,
.audit-answer-btn.success,
.audit-answer-btn.danger,
.audit-answer-btn.secondary {
  background: #ffffff;
  background-image: none;
  border: 1.5px solid var(--border-control, #cbd5cf);
  color: var(--ink, #1b2a24);
  box-shadow: none;
  font-weight: 700;
}
.audit-answer-btn.success { color: #0b7a52; border-color: #bfe3d2; }
.audit-answer-btn.danger { color: var(--red, #d64545); border-color: #eccfcb; }
.audit-answer-btn.secondary { color: #475569; }
.audit-answer-btn:hover { filter: none; background: #f6faf8; box-shadow: none; transform: none; }
.audit-answer-btn.success.active { background: var(--green, #0f9d6b); border-color: var(--green, #0f9d6b); color: #ffffff; }
.audit-answer-btn.danger.active { background: var(--red, #d64545); border-color: var(--red, #d64545); color: #ffffff; }
.audit-answer-btn.secondary.active { background: #475569; border-color: #475569; color: #ffffff; }
.audit-answer-btn.active { outline: none; box-shadow: 0 8px 18px -12px rgba(11, 42, 31, 0.55); }

/* ===== Barra lateral recolhível (rail de ícones estilo portal) — desktop ===== */
.sidebar-collapse { display: none; }
@media (min-width: 981px) {
  .sidebar-collapse {
    display: flex; align-items: center; justify-content: flex-end; width: 100%;
    margin: 6px 0 2px; padding: 6px 8px; background: transparent; border: none;
    border-radius: 8px; color: var(--muted); cursor: pointer;
  }
  .sidebar-collapse:hover { background: var(--surface-soft); color: var(--ink); }

  body.nav-collapsed { grid-template-columns: 76px 1fr; }
  body.nav-collapsed .sidebar { padding: 14px 8px; overflow-y: auto; }
  body.nav-collapsed .brand { justify-content: center; padding: 8px 0 12px; }
  body.nav-collapsed .brand > div:last-child { display: none; }
  body.nav-collapsed .sidebar-collapse { justify-content: center; }
  body.nav-collapsed .sidebar-collapse svg { transform: rotate(180deg); }
  /* O rail respeita o recolhimento dos grupos (antes um `display:flex
     !important` atropelava o [hidden] e empilhava as ~60 abas como uma coluna
     de icones sem rotulo — a pior versao de "muitas abas"). Agora o titulo do
     grupo vira o proprio icone clicavel: 7 icones de secao + a secao aberta. */
  body.nav-collapsed .menu-group-title {
    display: flex; justify-content: center; padding: 10px 0; margin: 2px 0;
  }
  body.nav-collapsed .menu-group-items:not([hidden]) { display: flex; flex-direction: column; gap: 4px; }
  body.nav-collapsed nav button { justify-content: center; padding: 11px 0; }
  body.nav-collapsed nav button span:not(.menu-badge) { display: none; }
  body.nav-collapsed nav button.active::before { display: none; }
  body.nav-collapsed .menu-divider { margin: 8px 6px; }
  /* O rail mostra somente destinos com icone. Textos auxiliares e acoes sem
     icone ficavam espremidos em 76px e pareciam conteudo quebrado. */
  body.nav-collapsed .menu-fav-add,
  body.nav-collapsed .menu-fav-sub,
  body.nav-collapsed .menu-showall,
  body.nav-collapsed .menu-admin-btn,
  body.nav-collapsed .menu-divider { display: none !important; }
  body.nav-collapsed .menu-group-fav:has(.menu-fav-add) { display: none; }
}

/* ===== Login no estilo portal (gradiente + onda) — camada final ===== */
.login-screen {
  overflow: hidden;
  background:
    radial-gradient(760px 520px at 14% 12%, color-mix(in srgb, var(--green-light, #1fc088) 30%, transparent), transparent 60%),
    radial-gradient(720px 520px at 88% 92%, rgba(255,255,255,0.10), transparent 62%),
    linear-gradient(140deg, var(--green, #0f9d6b) 0%, var(--green-dark, #0a6a49) 55%, var(--green-strong, #0b7250) 100%);
}
.login-screen::before {
  width: 360px; height: 360px; left: -110px; bottom: -140px;
  background: rgba(255,255,255,0.10); filter: none;
}
.login-screen::after {
  width: 440px; height: 440px; right: -160px; top: -150px;
  background: rgba(255,255,255,0.08); filter: none;
}
.login-card {
  background: #ffffff;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 16px;
  box-shadow: 0 40px 90px -40px rgba(4,32,22,0.55), 0 2px 8px rgba(4,32,22,0.10);
}

/* ===== Toque de identidade no cabeçalho de cada aba ===== */
.topbar-titles { position: relative; padding-left: 16px; }
.topbar-titles::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px;
  border-radius: 999px; background: linear-gradient(180deg, #1fc088, #0a6a49);
}

/* ===== Acabamento: acento nos titulos de secao + botoes primarios ===== */
.dashboard-group h2 { position: relative; padding-left: 13px; }
.dashboard-group h2::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 15px; border-radius: 999px;
  background: linear-gradient(180deg, #1fc088, #0a6a49);
}
/* Gradiente sutil só nos botoes primarios claros (por ID/classe — sem vazar) */
#loginButton, #newRecord, button.primary {
  /* WCAG AA: ambas as pontas escuras o bastante p/ texto branco (era #17b57e = 2,9:1) */
  background-image: linear-gradient(135deg, #0a8055, #08653f);
  border: none;
}
#loginButton:hover, #newRecord:hover, button.primary:hover {
  background-image: linear-gradient(135deg, #14a06f, #085a3e);
}

/* ===== Business Analytics Financeiro ===== */
.fin-grid2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
@media (max-width: 860px) { .fin-grid2 { grid-template-columns: 1fr; } }
.fin-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-sm); }
.fin-insights { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }

/* Visao Financeira Executiva */
.fin-executive-shell{grid-column:1/-1;display:flex;flex-direction:column;gap:18px;color:#18251f;max-width:1600px;width:100%;margin:0 auto}.fin-exec-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.fin-exec-header h1{margin:2px 0 3px;font-size:clamp(25px,2.4vw,36px);letter-spacing:-.035em;color:#14221c}.fin-exec-header p{margin:0;color:#607068;font-size:13px}.fin-header-actions{display:flex;gap:8px;flex-wrap:wrap}.fin-tabs{display:flex;gap:5px;border-bottom:1px solid #dce6e1;overflow-x:auto;scrollbar-width:none}.fin-tabs button{white-space:nowrap;background:transparent;color:#5a6962;border:0;border-bottom:3px solid transparent;border-radius:0;padding:11px 15px;font-weight:700;box-shadow:none}.fin-tabs button.active{color:#08724e;border-bottom-color:#0b9363}.fin-exec-summary,.fin-detail-view,.fin-simulator{display:flex;flex-direction:column;gap:18px}.fin-executive-callout{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;background:#fff;border:1px solid #dce6e1;border-left:5px solid #169066;border-radius:16px;padding:18px 20px;box-shadow:0 6px 24px rgba(17,55,39,.06)}.fin-executive-callout.attention{border-left-color:#d79219;background:linear-gradient(100deg,#fffdf7,#fff)}.fin-executive-callout.critical{border-left-color:#d24a47;background:linear-gradient(100deg,#fff9f8,#fff)}.fin-summary-label,.fin-section-kicker{display:block;color:#08724e;font-size:10.5px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.fin-executive-callout.attention .fin-summary-label{color:#9b5e00}.fin-executive-callout.critical .fin-summary-label{color:#b62d2b}.fin-executive-callout h2{margin:5px 0 3px;font-size:18px;line-height:1.25}.fin-executive-callout p{margin:0;color:#43534b;font-size:13.5px;line-height:1.5;max-width:960px}.fin-summary-action{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.fin-summary-action span{font-size:12px;color:#637169}.fin-summary-action button{font-size:12px;padding:8px 13px}.fin-kpis{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:10px}.fin-kpi{appearance:none;text-align:left;background:#fff!important;color:#17231e!important;border:1px solid #dce6e1!important;border-radius:14px!important;padding:14px 15px!important;box-shadow:0 4px 16px rgba(20,50,38,.045)!important;min-height:132px;display:flex;flex-direction:column;gap:5px;transition:transform .16s,border-color .16s}.fin-kpi:hover{transform:translateY(-2px);border-color:#99c9b7!important}.fin-kpi-top{display:flex;align-items:center;justify-content:space-between;color:#617068;font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.035em}.fin-state-dot{width:8px;height:8px;border-radius:50%;background:#8aa097}.fin-kpi.good .fin-state-dot{background:#129367}.fin-kpi.attention .fin-state-dot{background:#d79016}.fin-kpi.critical .fin-state-dot{background:#d34744}.fin-kpi>strong{font-size:24px;letter-spacing:-.035em;color:#15221c}.fin-kpi-change{font-size:12px;font-weight:800;color:#45564e}.fin-kpi.good .fin-kpi-change{color:#08734e}.fin-kpi.attention .fin-kpi-change{color:#9a5d00}.fin-kpi.critical .fin-kpi-change{color:#b52d2b}.fin-kpi-change small{font-size:10.5px;font-weight:500;color:#75827b}.fin-kpi-bottom{margin-top:auto;display:grid;grid-template-columns:1fr 64px;align-items:end;gap:6px;color:#66736d;font-size:10.5px}.fin-kpi svg{width:64px;height:26px}.fin-kpi polyline{fill:none;stroke:#168f69;stroke-width:3;vector-effect:non-scaling-stroke}.fin-kpi.critical polyline{stroke:#d34744}.fin-main-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(300px,.8fr);gap:14px}.fin-secondary-grid{display:grid;grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr);gap:14px}.fin-panel{background:#fff;border:1px solid #dce6e1;border-radius:16px;padding:16px 18px;box-shadow:0 4px 18px rgba(20,50,38,.045);min-width:0}.fin-panel-head,.fin-section-title{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}.fin-panel h3,.fin-section-title h3{margin:2px 0 0;font-size:16px;color:#17251e}.fin-method{font-size:10.5px;color:#6e7b75;background:#f1f5f3;border-radius:999px;padding:5px 8px;text-align:right}.fin-link{border:0!important;background:transparent!important;color:#08724e!important;padding:3px!important;box-shadow:none!important;font-size:12px;font-weight:750}.fin-chart-main{height:285px}.fin-chart-detail{height:270px}.fin-alert-list{display:flex;flex-direction:column;gap:8px}.fin-alert{width:100%;display:grid;grid-template-columns:27px minmax(0,1fr) auto;gap:9px;align-items:start;text-align:left;background:#f7faf8!important;color:#25342d!important;border:1px solid #e1e9e5!important;border-radius:11px!important;padding:10px!important;box-shadow:none!important}.fin-alert-rank{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#e9f3ef;color:#08724e;font-size:12px;font-weight:850}.fin-alert.critical .fin-alert-rank{background:#fde9e8;color:#b52d2b}.fin-alert.warn .fin-alert-rank{background:#fff0d5;color:#976000}.fin-alert strong{display:block;font-size:12.5px;margin-bottom:2px}.fin-alert small{display:-webkit-box;color:#69776f;font-size:10.5px;line-height:1.35;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.fin-cost-list{display:flex;flex-direction:column;gap:12px}.fin-cost-row{display:grid;grid-template-columns:minmax(0,1fr) auto 42px;gap:8px;align-items:center;font-size:12px}.fin-cost-row>strong{font-size:12px}.fin-cost-row>span:nth-child(3){text-align:right;color:#68766f}.fin-cost-row i{grid-column:1/-1;height:6px;border-radius:99px;background:#edf2ef;overflow:hidden}.fin-cost-row b{display:block;height:100%;background:linear-gradient(90deg,#087450,#20ad7a);border-radius:99px}.fin-heat-head,.fin-heat-row{display:grid;grid-template-columns:minmax(130px,1.5fr) .65fr .8fr .8fr .65fr;gap:8px;align-items:center}.fin-heat-head{font-size:9.5px;color:#718078;text-transform:uppercase;font-weight:800;padding:0 9px 6px}.fin-heat-row{width:100%;background:transparent!important;color:#26352e!important;border:0!important;border-top:1px solid #edf1ef!important;border-radius:0!important;padding:9px!important;box-shadow:none!important;text-align:left;font-size:11.5px}.fin-heat-row span:not(:first-child){text-align:right}.fin-heat-row span.ok,.fin-table-status.ok{color:#08734e;background:#e7f6f0}.fin-heat-row span.attention,.fin-table-status.attention{color:#8f5a00;background:#fff3da}.fin-heat-row span.critical,.fin-table-status.critical{color:#b52d2b;background:#fdebea}.fin-heat-row span:nth-child(2){padding:4px 6px;border-radius:7px;font-weight:800}.fin-opportunities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.fin-opportunity,.fin-empty-card{display:flex;flex-direction:column;align-items:flex-start;gap:7px;background:#fff;border:1px solid #dce6e1;border-radius:14px;padding:15px 16px}.fin-opportunity-tag{font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:#08724e;font-weight:850}.fin-opportunity p{margin:0;color:#5c6b63;font-size:12px;line-height:1.45}.fin-opportunity button{margin-top:auto}.fin-detail-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:14px}.fin-insight-stack{display:flex;flex-direction:column;gap:9px}.fin-insight-detail{background:#fff;border:1px solid #dce6e1;border-left:4px solid #168f69;border-radius:12px;padding:12px 14px}.fin-insight-detail.critical{border-left-color:#d34744}.fin-insight-detail.warn{border-left-color:#d79016}.fin-insight-detail>span{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:850;color:#66766e}.fin-insight-detail h3{margin:3px 0;font-size:13px}.fin-insight-detail p{margin:0;color:#5d6b64;font-size:11.5px;line-height:1.45}.fin-table-wrap{overflow:auto}.fin-table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap}.fin-table th{color:#6c7973;font-size:10px;text-transform:uppercase;letter-spacing:.035em;text-align:right;padding:8px;border-bottom:1px solid #dde6e1}.fin-table th:first-child,.fin-table td:first-child{text-align:left}.fin-table td{text-align:right;padding:9px 8px;border-bottom:1px solid #edf2ef}.fin-positive{color:#08734e;font-weight:800}.fin-negative{color:#b52d2b;font-weight:800}.fin-table-status{display:inline-block;padding:4px 8px;border-radius:8px;font-weight:800}.fin-simulator{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}.fin-sim-badge{background:#eeeafd;color:#6152bd;border-radius:999px;padding:5px 9px;font-size:10.5px;font-weight:800}.fin-help{color:#68766f;font-size:12.5px;margin:0 0 14px}.fin-sim-controls{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px}.fin-sim-controls label{font-size:11px;color:#536159;font-weight:700}.fin-sim-controls input{margin-top:5px}.fin-sim-results{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px}.fin-sim-results article{background:#fff;border:1px solid #dce6e1;border-radius:14px;padding:16px}.fin-sim-results article.primary{background:linear-gradient(135deg,#574bb9,#7669dc);color:#fff;border:0}.fin-sim-results span,.fin-sim-results small{display:block;font-size:11px;color:#64726b}.fin-sim-results article.primary span,.fin-sim-results article.primary small{color:#e7e4ff}.fin-sim-results strong{display:block;font-size:24px;margin:7px 0 4px}.fin-empty-good,.fin-empty-card{color:#66746d;font-size:12px}.fin-empty-onboarding{grid-column:1/-1;max-width:620px;margin:40px auto;background:#fff;border:1px solid #dce6e1;border-radius:18px;padding:28px;text-align:center}.fin-empty-onboarding span{color:#08724e;font-size:11px;font-weight:850;text-transform:uppercase}.fin-empty-onboarding h2{margin:7px 0}.fin-empty-onboarding p{color:#64726b;line-height:1.55}
@media(max-width:1180px){.fin-kpis{grid-template-columns:repeat(3,1fr)}.fin-main-grid,.fin-secondary-grid,.fin-detail-grid{grid-template-columns:1fr}.fin-opportunities{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.fin-executive-shell{gap:13px}.fin-exec-header{align-items:flex-start}.fin-header-actions{justify-content:flex-end}.fin-header-actions button:first-child{display:none}.fin-tabs{margin:0 -4px}.fin-tabs button{padding:10px 11px;font-size:11px}.fin-executive-callout{grid-template-columns:1fr;padding:15px}.fin-summary-action{align-items:flex-start}.fin-kpis{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:5px}.fin-kpi{min-width:78vw;scroll-snap-align:start}.fin-main-grid,.fin-secondary-grid,.fin-detail-grid{display:flex;flex-direction:column}.fin-chart-main{height:235px}.fin-panel{padding:14px}.fin-method{display:none}.fin-heat-head{display:none}.fin-heat-row{grid-template-columns:1fr auto auto}.fin-heat-row span:nth-child(4),.fin-heat-row span:nth-child(5){display:none}.fin-opportunities{grid-template-columns:1fr}.fin-sim-controls,.fin-sim-results{grid-template-columns:1fr 1fr}.fin-exec-header h1{font-size:25px}}
@media(max-width:430px){.fin-header-actions button{font-size:10px;padding:7px}.fin-sim-controls,.fin-sim-results{grid-template-columns:1fr}.fin-executive-callout h2{font-size:16px}.fin-chart-main{height:210px}}
.fin-filterbar{display:grid;grid-template-columns:100px 90px 90px minmax(190px,1fr) auto;gap:8px;align-items:end;background:#f5f8f6;border:1px solid #dce6e1;border-radius:13px;padding:10px 12px}.fin-filterbar label{font-size:10px;color:#66746d;font-weight:800;text-transform:uppercase;letter-spacing:.035em}.fin-filterbar select{margin-top:3px;height:36px;padding:6px 30px 6px 9px;font-size:12px;background:#fff}.fin-filterbar>button{height:36px;padding:7px 13px;font-size:12px}.fin-filterbar small{grid-column:1/-1;color:#748179;font-size:10.5px}.fin-cost-row{width:100%;background:transparent!important;color:#26352e!important;border:0!important;border-radius:8px!important;padding:4px!important;box-shadow:none!important;text-align:left!important}.fin-cost-row:hover{background:#f3f8f5!important}.fin-drill-dialog{width:min(760px,calc(100vw - 28px));border:0;border-radius:18px;padding:20px;box-shadow:0 25px 70px rgba(10,35,24,.28)}.fin-drill-dialog::backdrop{background:rgba(14,35,27,.55);backdrop-filter:blur(3px)}.fin-drill-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:14px;border-bottom:1px solid #e1e9e5}.fin-drill-head h2{margin:3px 0;font-size:22px}.fin-drill-head p{margin:0;color:#68766f;font-size:12px}.fin-drill-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:16px 0}.fin-drill-kpis article{background:#f5f8f6;border:1px solid #e1e9e5;border-radius:12px;padding:13px}.fin-drill-kpis span{display:block;color:#68766f;font-size:10px;text-transform:uppercase;font-weight:800}.fin-drill-kpis strong{display:block;margin-top:5px;font-size:18px;color:#17251e}.fin-drill-note{background:#f8faf9;border-radius:11px;padding:12px;color:#526159;font-size:12px;line-height:1.5}.fin-drill-bars{display:flex;flex-direction:column;gap:10px;margin-top:15px}.fin-drill-bars>div{display:grid;grid-template-columns:150px 1fr 45px;gap:9px;align-items:center;font-size:11px}.fin-drill-bars i{height:8px;background:#edf2ef;border-radius:99px;overflow:hidden}.fin-drill-bars b{display:block;height:100%;background:#168f69;border-radius:99px}.fin-drill-bars strong{text-align:right}
@media(max-width:760px){.fin-filterbar{grid-template-columns:1fr 1fr}.fin-filterbar label:nth-child(4){grid-column:1/-1}.fin-filterbar>button{grid-column:1/-1}.fin-drill-kpis{grid-template-columns:1fr 1fr}.fin-drill-bars>div{grid-template-columns:110px 1fr 38px}.fin-header-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.fin-header-actions button{display:block!important}.fin-exec-header{flex-direction:column}.fin-header-actions button:last-child{display:none!important}}

/* ===== Polish pass — acabamento (nota 10): hover suave + foco visível verde ===== */
.pop-card, .qi-card, .quick-tile, .attention-item, .hero-pill {
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.pop-card:hover, .qi-card:hover, .quick-tile:hover, .hero-pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* Foco visível só no teclado (não aparece no clique de mouse) — acessível e premium */
:where(button, a, input, select, textarea, [tabindex="0"]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--green);
}

/* ===== Polish B — microinterações (toque premium) ===== */
button, input, select, textarea {
  transition: transform .1s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, filter .15s ease;
}
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: not-allowed; }
/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== Piloto seguro — Dashboard premium =====
   Escopo intencionalmente limitado a #dashboard para nao alterar os demais
   modulos enquanto o novo sistema visual ainda esta em validacao. */
#dashboard .dashboard-groups {
  max-width: 1480px;
  margin-inline: auto;
  gap: 18px;
}

#dashboard .premium-cockpit-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin: 2px 0 4px;
}

#dashboard .premium-cockpit-greeting {
  color: #172620;
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

#dashboard .premium-cockpit-date {
  margin-top: 4px;
  color: #65736d;
  font-size: 13px;
  font-weight: 500;
  text-transform: capitalize;
}

#dashboard .premium-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#dashboard .premium-summary-card {
  --summary-accent: #087a5b;
  --summary-soft: #e8f5f0;
  appearance: none;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  min-height: 112px;
  padding: 16px;
  text-align: left;
  color: #172620;
  background: #fff;
  border: 1px solid #dde7e3;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(22, 48, 37, 0.055);
}

#dashboard .premium-summary-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--summary-accent) 30%, #dde7e3);
  box-shadow: 0 12px 28px rgba(22, 48, 37, 0.09);
}

#dashboard .premium-summary-card.is-danger { --summary-accent: #c9363f; --summary-soft: #fdeced; }
#dashboard .premium-summary-card.is-warn { --summary-accent: #c87908; --summary-soft: #fff4df; }
#dashboard .premium-summary-card.is-success { --summary-accent: #087a5b; --summary-soft: #e8f5f0; }

#dashboard .premium-summary-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--summary-accent);
  background: var(--summary-soft);
  border-radius: 14px;
}

#dashboard .premium-summary-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#dashboard .premium-summary-copy { min-width: 0; }
#dashboard .premium-summary-copy strong {
  display: block;
  color: var(--summary-accent);
  font-size: 27px;
  line-height: 1;
  letter-spacing: -0.04em;
}
#dashboard .premium-summary-copy small {
  display: block;
  margin-top: 7px;
  color: #3d4b45;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.25;
}
#dashboard .premium-summary-arrow {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #53625b;
  background: #f1f5f3;
  border-radius: 999px;
  font-size: 22px;
}

#dashboard .premium-priorities { margin-top: 2px; }
#dashboard .premium-total-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  margin-left: 5px;
  padding: 2px 10px;
  color: #9a5c00;
  background: #fff3d8;
  border: 1px solid #f2d89e;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  vertical-align: middle;
}
#dashboard .premium-feed { display: flex; flex-direction: column; gap: 9px; }
#dashboard .premium-feed-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 3px 0;
  color: #50615a;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
#dashboard .premium-feed-label strong { color: #819088; font-size: 10.5px; }
#dashboard .premium-feed-label i { flex: 1; height: 1px; background: #e3ebe7; }

#dashboard .premium-feed-item {
  --feed-accent: #087a5b;
  appearance: none;
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 11px 14px 11px 16px;
  overflow: hidden;
  color: #172620;
  text-align: left;
  background: #fff;
  border: 1px solid #dde7e3;
  border-radius: 14px;
  box-shadow: 0 4px 13px rgba(22, 48, 37, 0.045);
}
#dashboard .premium-feed-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--feed-accent);
}
#dashboard .premium-feed-item.is-danger { --feed-accent: #d33d46; }
#dashboard .premium-feed-item.is-warn { --feed-accent: #d4870c; }
#dashboard .premium-feed-item.is-info { --feed-accent: #287b8c; }
#dashboard .premium-feed-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--feed-accent) 27%, #dde7e3);
  box-shadow: 0 9px 22px rgba(22, 48, 37, 0.075);
}
#dashboard .premium-feed-count {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #fff;
  background: var(--feed-accent);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
}
#dashboard .premium-feed-copy { min-width: 0; }
#dashboard .premium-feed-copy strong { display: block; color: #25332d; font-size: 14px; }
#dashboard .premium-feed-copy small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #66756e;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#dashboard .premium-feed-action {
  color: #087a5b;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 1120px) {
  #dashboard .premium-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  #dashboard .premium-cockpit-header { align-items: stretch; }
  #dashboard .premium-cockpit-header .cmdk-trigger { width: 100%; justify-content: center; }
  #dashboard .premium-summary-grid {
    display: flex;
    margin-inline: -2px;
    padding: 2px 2px 7px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  #dashboard .premium-summary-card { flex: 0 0 82%; min-height: 104px; scroll-snap-align: start; }
  #dashboard .premium-feed-item { grid-template-columns: 32px minmax(0, 1fr); }
  #dashboard .premium-feed-action { grid-column: 2; justify-self: start; }
  #dashboard .premium-feed-copy small { white-space: normal; }
}

/* ===== Fase 2 — navegacao e cabecalho global =====
   Somente apresentacao: IDs e eventos dos comandos permanecem inalterados. */
.top-actions .top-action-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  min-height: 42px;
  padding: 8px 13px;
  color: #176548;
  background: rgba(255, 255, 255, 0.78);
  border-color: #d5e2dc;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(22, 48, 37, 0.035);
}

.top-actions .top-action-button:hover {
  color: #075c3d;
  background: #fff;
  border-color: #aecfc0;
  box-shadow: 0 7px 17px rgba(22, 48, 37, 0.07);
}

.top-actions .top-action-button svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-actions .top-action-button.icon-only { padding-inline: 11px; }
.top-actions .top-action-label { color: inherit; font-size: 13px; font-weight: 750; }

#alertBadge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  color: #fff;
  background: #d72f38;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(153, 27, 27, .24);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 16px;
  text-align: center;
}

@media (max-width: 1180px) and (min-width: 981px) {
  .topbar { gap: 14px; }
  .top-actions { gap: 7px; }
  .top-actions .top-action-button { padding-inline: 10px; }
  .top-actions .top-action-label { display: none; }
  .top-actions .user-badge {
    max-width: 245px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .top-actions .top-action-button { flex: 0 0 44px; padding-inline: 10px; }
  .top-actions .top-action-label { display: none; }
}

/* ===== Fase 3 — CRUD generico premium =====
   Escopo limitado a lista e formulario genericos. Nao altera campos, eventos,
   payloads ou tabelas especializadas fora de #records. */
#records .records-head {
  align-items: center;
  margin-bottom: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid #dfe8e4;
  border-radius: 16px;
  box-shadow: 0 7px 21px rgba(22, 48, 37, .05);
}

#records .records-toolbar {
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}

#records #recordSearch {
  min-height: 42px;
  padding-left: 40px;
  background-color: #f9fbfa;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365756e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 13px center;
  background-size: 17px;
}

#records #recordSearch:focus { background-color: #fff; }
#records .records-toolbar button,
#records .section-actions button {
  min-height: 40px;
  border-radius: 10px;
  font-size: 12.5px;
  white-space: nowrap;
}

#records #newRecord {
  padding-inline: 16px;
  box-shadow: 0 7px 16px rgba(8, 101, 63, .14);
}

#records #newRecord::before {
  content: "+";
  margin-right: 6px;
  font-size: 17px;
  font-weight: 500;
  line-height: 0;
}

#records #recordsTable.table-wrap {
  max-height: calc(100vh - 285px);
  min-height: 180px;
  background: #fff;
  border: 1px solid #dfe8e4;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(22, 48, 37, .055);
}

#records #recordsTable table { margin: 0; border-collapse: separate; border-spacing: 0; }
#records #recordsTable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-top: 12px;
  padding-bottom: 12px;
  color: #52615a;
  background: #f4f8f6;
  border-bottom: 1px solid #dfe8e4;
  box-shadow: inset 0 -1px 0 rgba(221, 231, 227, .5);
  font-size: 10.5px;
  letter-spacing: .045em;
}

#records #recordsTable tbody td {
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom-color: #edf2ef;
  vertical-align: middle;
}

#records #recordsTable tbody tr:last-child td { border-bottom: 0; }
#records #recordsTable tbody tr:hover td { background: #f7faf8; }

#recordDialog {
  width: min(900px, calc(100vw - 32px));
  max-width: 900px;
  background: #fff;
  border: 1px solid rgba(211, 225, 219, .9);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(9, 35, 25, .23);
}

#recordDialog::backdrop {
  background: rgba(12, 30, 23, .48);
  backdrop-filter: blur(4px);
}

#recordDialog h2 {
  padding: 20px 24px 15px;
  color: #172620;
  background: linear-gradient(180deg, #fff, #fbfdfc);
  border-bottom-color: #e3ebe7;
  font-size: clamp(20px, 2vw, 25px);
}

#recordDialog .form-grid {
  gap: 14px 16px;
  padding: 19px 24px 22px;
  background: #fbfdfc;
}

#recordDialog .form-grid > label {
  gap: 6px;
  color: #3e4d46;
  font-size: 12px;
  font-weight: 750;
}

#recordDialog .form-grid input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#recordDialog .form-grid select,
#recordDialog .form-grid textarea {
  min-height: 43px;
  color: #172620;
  background-color: #fff;
  border-color: #d5dfda;
  border-radius: 10px;
}

#recordDialog .form-grid textarea { min-height: 88px; resize: vertical; }
#recordDialog .form-section-title {
  margin: 5px -4px 0;
  padding: 9px 4px 7px;
  color: #08724e;
  background: #fbfdfc;
  border-bottom: 1px solid #dce8e2;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .075em;
  text-transform: uppercase;
}

#recordDialog menu {
  justify-content: flex-end;
  gap: 9px;
  padding: 13px 24px 17px;
  background: #fff;
  border-top-color: #e3ebe7;
}

#recordDialog menu button { min-width: 108px; min-height: 42px; }

@media (max-width: 760px) {
  #records .records-head { padding: 10px; }
  #records .section-actions {
    width: 100%;
    padding-bottom: 3px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
  }
  #records .section-actions button { flex: 0 0 auto; }
  #records #recordsTable.table-wrap { max-height: none; min-height: 140px; }
  #recordDialog { width: calc(100vw - 12px); max-height: calc(100vh - 12px); }
  #recordDialog h2 { padding: 17px 16px 13px; }
  #recordDialog .form-grid { grid-template-columns: 1fr; padding: 15px 16px 18px; }
  #recordDialog .form-grid > * { grid-column: 1 / -1; }
  #recordDialog menu { padding: 11px 16px 14px; }
  #recordDialog menu button { flex: 1 1 0; min-width: 0; }
}

/* ===== Fase 4 — feedback, acessibilidade e mobile ===== */
.toast {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 11px 15px 11px 12px;
  color: #175f45;
  background: #fff;
  border: 1px solid #cfe2d9;
  border-left: 0;
  border-radius: 13px;
  box-shadow: 0 16px 36px rgba(13, 42, 31, .16);
}

.toast::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #fff;
  background: #11845d;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.toast.error { color: #9d292f; border-color: #efcdd0; }
.toast.error::before { content: "!"; background: #d33d46; }
.toast.warn { color: #875500; border-color: #ecd8ae; }
.toast.warn::before { content: "!"; color: #3d2800; background: #eba92d; }
.toast.info { color: #246375; border-color: #cce0e5; }
.toast.info::before { content: "i"; background: #287b8c; }
.toast[hidden] { display: none; }

#recordsTable[aria-busy="true"] { cursor: progress; }
.records-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 180px;
  color: #52645b;
  font-size: 13px;
}
.records-loading > span {
  width: 22px;
  height: 22px;
  border: 3px solid #d9e8e1;
  border-top-color: #0a8055;
  border-radius: 999px;
  animation: records-spin .75s linear infinite;
}
@keyframes records-spin { to { transform: rotate(360deg); } }

#records .table-empty {
  min-height: 240px;
  padding: 34px 24px;
}
#records .table-empty .empty-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: #087a5b;
  background: #e8f5f0;
  border: 1px solid #cfe7dc;
  border-radius: 15px;
  font-size: 22px;
}

@media (max-width: 640px) {
  .toast {
    position: fixed;
    top: auto;
    right: 10px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 10px;
    width: auto;
    max-width: none;
  }
  #records .table-empty { min-height: 190px; padding: 27px 18px; }
  button, .button-link, summary, [role="button"] { touch-action: manipulation; }
}

@media (prefers-reduced-motion: reduce) {
  .records-loading > span { animation: none; border-top-color: #d9e8e1; background: #0a8055; }
}

/* ===== Fase 5 — consolidacao do sistema visual ===== */
:root {
  --premium-bg: #f5f8f7;
  --premium-surface: #ffffff;
  --premium-ink: #172620;
  --premium-muted: #65736d;
  --premium-line: #dde7e3;
  --premium-green: #087a5b;
  --premium-green-soft: #e8f5f0;
  --premium-danger: #d33d46;
  --premium-warn: #d4870c;
  --premium-radius-control: 10px;
  --premium-radius-card: 16px;
  --premium-shadow-card: 0 8px 24px rgba(22, 48, 37, .055);
  --premium-shadow-dialog: 0 30px 80px rgba(9, 35, 25, .23);
}

#dashboard .premium-summary-copy small em {
  display: block;
  margin-top: 2px;
  color: #75837c;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 550;
}

/* Dialogos de formulario simples compartilham a mesma anatomia. Dialogos
   tecnicos (auditoria, assinatura, certificado e financeiro) ficam de fora. */
:is(#qiIndicatorDialog, #qiEntryDialog, #qiDetailDialog, #qiBulkLancarDialog,
    #inventoryExitDialog, #forcePwdDialog, #invAttachDialog,
    #inventoryHistoryDialog, #controlledFormDialog) {
  width: min(780px, calc(100vw - 28px));
  max-width: 780px;
  padding: 0;
  overflow: hidden;
  color: var(--premium-ink);
  background: var(--premium-surface);
  border: 1px solid var(--premium-line);
  border-radius: 18px;
  box-shadow: var(--premium-shadow-dialog);
}

:is(#qiIndicatorDialog, #qiEntryDialog, #qiDetailDialog, #qiBulkLancarDialog,
    #inventoryExitDialog, #forcePwdDialog, #invAttachDialog,
    #inventoryHistoryDialog, #controlledFormDialog) > form {
  max-height: min(88vh, 820px);
  overflow: auto;
}

:is(#qiIndicatorDialog, #qiEntryDialog, #qiDetailDialog, #qiBulkLancarDialog,
    #inventoryExitDialog, #forcePwdDialog, #invAttachDialog,
    #inventoryHistoryDialog, #controlledFormDialog) h2 {
  margin: 0;
  padding: 20px 22px 14px;
  color: var(--premium-ink);
  background: linear-gradient(180deg, #fff, #fbfdfc);
  border-bottom: 1px solid var(--premium-line);
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: -.025em;
}

:is(#qiIndicatorDialog, #qiEntryDialog, #qiDetailDialog, #qiBulkLancarDialog,
    #inventoryExitDialog, #forcePwdDialog, #invAttachDialog,
    #inventoryHistoryDialog, #controlledFormDialog) .form-grid,
:is(#qiDetailBody, #qiBulkLancarList, #invAttachList, #historyDialogBody) {
  padding: 18px 22px;
}

:is(#forcePwdDialog, #invAttachDialog, #inventoryHistoryDialog) .backup-info,
#qiEntryDialog .qi-form-section { margin: 16px 22px 0; }
#forcePwdDialog > form > label {
  display: grid;
  gap: 6px;
  margin: 14px 22px 0;
  color: #3e4d46;
  font-size: 12px;
  font-weight: 750;
}

:is(#qiIndicatorDialog, #qiEntryDialog, #qiDetailDialog, #qiBulkLancarDialog,
    #inventoryExitDialog, #forcePwdDialog, #invAttachDialog,
    #inventoryHistoryDialog, #controlledFormDialog) menu {
  position: sticky;
  bottom: 0;
  z-index: 2;
  justify-content: flex-end;
  gap: 9px;
  margin: 0;
  padding: 12px 22px 16px;
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--premium-line);
  backdrop-filter: blur(8px);
}

@media (max-width: 640px) {
  :is(#qiIndicatorDialog, #qiEntryDialog, #qiDetailDialog, #qiBulkLancarDialog,
      #inventoryExitDialog, #forcePwdDialog, #invAttachDialog,
      #inventoryHistoryDialog, #controlledFormDialog) {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
  }
  :is(#qiIndicatorDialog, #qiEntryDialog, #qiDetailDialog, #qiBulkLancarDialog,
      #inventoryExitDialog, #forcePwdDialog, #invAttachDialog,
      #inventoryHistoryDialog, #controlledFormDialog) h2 { padding: 17px 16px 12px; }
  :is(#qiIndicatorDialog, #qiEntryDialog, #qiDetailDialog, #qiBulkLancarDialog,
      #inventoryExitDialog, #forcePwdDialog, #invAttachDialog,
      #inventoryHistoryDialog, #controlledFormDialog) .form-grid,
  :is(#qiDetailBody, #qiBulkLancarList, #invAttachList, #historyDialogBody) { padding: 15px 16px; }
  :is(#qiIndicatorDialog, #qiEntryDialog, #qiDetailDialog, #qiBulkLancarDialog,
      #inventoryExitDialog, #forcePwdDialog, #invAttachDialog,
      #inventoryHistoryDialog, #controlledFormDialog) menu { padding: 11px 16px 14px; }
}

/* ===== Barra lateral premium ===== */
.sidebar-search-trigger {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 42px;
  margin: 8px 0 10px;
  padding: 8px 10px;
  color: #52615a;
  text-align: left;
  background: rgba(255, 255, 255, .82);
  border: 1px solid #dce7e2;
  border-radius: 11px;
  box-shadow: 0 3px 11px rgba(22, 48, 37, .035);
}
.sidebar-search-trigger:hover {
  color: #08724e;
  background: #fff;
  border-color: #b7d7c8;
}
.sidebar-search-trigger svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}
.sidebar-search-trigger > span { color: inherit; font-size: 12.5px; font-weight: 700; }
.sidebar-search-trigger kbd {
  padding: 2px 6px;
  color: #718078;
  background: #f2f6f4;
  border: 1px solid #dfe8e4;
  border-radius: 6px;
  box-shadow: none;
  font-size: 9px;
}

.sidebar .menu-group {
  margin: 8px 0 3px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar .menu-group-title {
  min-height: 37px;
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  box-shadow: none;
}
.sidebar .menu-group-title:hover { background: rgba(232, 245, 240, .72); }
.sidebar .menu-group-items { gap: 3px; }
.sidebar .menu-group-items button[data-module] {
  min-height: 41px;
  padding: 9px 10px;
  color: #35443d;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: none;
}
.sidebar .menu-group-items button[data-module]:hover {
  color: #08724e;
  background: #f1f8f5;
  border-color: #deebe5;
}
.sidebar .menu-group-items button[data-module].active {
  color: #086544;
  background: linear-gradient(90deg, #e3f4ec, #eef9f4);
  border-color: #c7e4d7;
  box-shadow: inset 3px 0 0 #0b8a5e;
}
.sidebar .menu-group-items button[data-module].active::before { display: none; }

.sidebar-rail-tooltip {
  position: fixed;
  z-index: 1000;
  max-width: 260px;
  padding: 8px 10px;
  color: #fff;
  background: #172620;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 9px;
  box-shadow: 0 10px 24px rgba(9, 28, 20, .22);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.3;
  pointer-events: none;
}
.sidebar-rail-tooltip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  width: 9px;
  height: 9px;
  background: #172620;
  transform: translateY(-50%) rotate(45deg);
}

@media (min-width: 981px) {
  body.nav-collapsed .sidebar-search-trigger {
    display: flex;
    justify-content: center;
    min-height: 42px;
    padding: 9px 0;
  }
  body.nav-collapsed .sidebar-search-trigger > span,
  body.nav-collapsed .sidebar-search-trigger kbd { display: none; }
  body.nav-collapsed .menu-group-items button[data-module] {
    position: relative;
    overflow: visible;
  }
  body.nav-collapsed nav button .menu-badge {
    position: absolute;
    top: 3px;
    right: 2px;
    display: grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    color: #fff;
    background: #d33d46;
    border: 2px solid #fff;
    border-radius: 999px;
    font-size: 8.5px;
    line-height: 13px;
  }
  body.nav-collapsed .menu-group-items button[data-module].active {
    box-shadow: inset 3px 0 0 #0b8a5e;
  }
}

@media (max-width: 980px) {
  .sidebar-search-trigger { margin: 6px 0 8px; }
}

/* ===== Dashboard secundario — rotinas e indicadores ===== */
#dashboard .premium-routines-section,
#dashboard .premium-auto-section { margin-top: 2px; }

#dashboard .premium-routines-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
#dashboard .premium-routine-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 62px;
  padding: 9px 10px 9px 12px;
  background: #fff;
  border: 1px solid var(--premium-line);
  border-radius: 13px;
  box-shadow: 0 4px 13px rgba(22, 48, 37, .04);
}
#dashboard .premium-routine-card:hover {
  border-color: #bfdacd;
  box-shadow: 0 8px 18px rgba(22, 48, 37, .065);
}
#dashboard .premium-routine-copy { min-width: 0; }
#dashboard .premium-routine-name {
  overflow: hidden;
  color: #26352e;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#dashboard .premium-routine-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin-top: 4px;
  overflow: hidden;
  color: #6a7871;
  font-size: 10px;
  white-space: nowrap;
}
#dashboard .premium-routine-period {
  flex: 0 0 auto;
  padding: 1px 6px;
  color: #08724e;
  background: #e8f5f0;
  border: 1px solid #cce7da;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
}
#dashboard .premium-routine-period.is-weekly { color: #275f91; background: #edf5fc; border-color: #cee0ef; }
#dashboard .premium-routine-period.is-fortnightly { color: #6c54a3; background: #f3effb; border-color: #ded4f1; }
#dashboard .premium-routine-period.is-monthly { color: #935e09; background: #fff5df; border-color: #eddaae; }
#dashboard .premium-routine-mine { color: #08724e; font-weight: 750; }
#dashboard .premium-routine-fill {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 10.5px;
}
#dashboard .premium-routine-more {
  width: 100%;
  min-height: 38px;
  margin-top: 9px;
  color: #08724e;
  background: #fff;
  border-color: #cadfd5;
}
#dashboard .premium-routine-done {
  margin-top: 9px;
  color: #16845e;
  font-size: 11.5px;
  font-weight: 650;
}
#dashboard .premium-routines-empty {
  padding: 15px;
  color: #126b4b;
  background: #eef9f4;
  border: 1px dashed #9dd7bc;
  border-radius: 13px;
  font-weight: 700;
}

#dashboard .premium-section-note {
  color: #6b7972;
  font-size: 11.5px;
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
}
#dashboard .premium-auto-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
#dashboard .premium-auto-kpi {
  --auto-accent: #287b8c;
  position: relative;
  min-height: 105px;
  padding: 13px 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--premium-line);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(22, 48, 37, .04);
}
#dashboard .premium-auto-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--auto-accent);
}
#dashboard .premium-auto-kpi.is-good { --auto-accent: #11845d; }
#dashboard .premium-auto-kpi.is-warn { --auto-accent: #d4870c; }
#dashboard .premium-auto-kpi.is-danger { --auto-accent: #d33d46; }
#dashboard .premium-auto-kpi.is-info { --auto-accent: #3978c3; }
#dashboard .premium-auto-label {
  min-height: 29px;
  color: #65736d;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.3;
}
#dashboard .premium-auto-value {
  margin: 3px 0;
  color: var(--auto-accent);
  font-size: 23px;
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -.035em;
}
#dashboard .premium-auto-detail {
  color: #718078;
  font-size: 9.5px;
  line-height: 1.3;
}

@media (max-width: 1280px) {
  #dashboard .premium-routines-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dashboard .premium-auto-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  #dashboard .premium-routines-grid { grid-template-columns: 1fr; }
  #dashboard .premium-routine-name { white-space: normal; }
  #dashboard .premium-section-note { display: block; margin-top: 3px; }
  #dashboard .premium-auto-grid {
    display: flex;
    padding-bottom: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  #dashboard .premium-auto-kpi { flex: 0 0 72%; scroll-snap-align: start; }
}

/* ===== Filtros globais de contexto ===== */
.filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 11px 13px 13px;
}
.context-filter-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #52615a;
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.context-filter-field > span { padding-left: 2px; color: inherit; }
.context-filter-field select {
  width: 100%;
  min-height: 43px;
  color: #25342d;
  background-color: #fff;
  border-color: #d7e2dd;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
}
.context-filter-field:focus-within { color: #08724e; }
.context-filter-field:has(select:disabled) { opacity: .72; }
.context-filter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 43px;
  padding: 9px 14px;
  color: #08724e;
  background: #fff;
  border-color: #c9ddd3;
  border-radius: 10px;
  white-space: nowrap;
}
.context-filter-clear:hover { color: #075c3d; border-color: #9fc8b5; }
.context-filter-clear svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 760px) {
  .filters { grid-template-columns: 1fr 1fr; }
  .context-filter-clear { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .filters { grid-template-columns: 1fr; }
  .context-filter-clear { grid-column: auto; }
}

/* Relatório de consumo por posto, setor e item */
.inv-reports-dialog { width: min(1180px, 96vw); }
.inv-consumption-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr)) auto auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
  margin: 12px 0;
  border: 1px solid #d8e6df;
  border-radius: 14px;
  background: #f8fbf9;
}
.inv-consumption-filters label {
  display: grid;
  gap: 5px;
  color: #34483e;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.inv-consumption-filters input,
.inv-consumption-filters select { min-width: 0; height: 40px; }
.inv-consumption-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(125px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.inv-consumption-kpis > div {
  display: grid;
  gap: 5px;
  min-height: 76px;
  padding: 13px 15px;
  border: 1px solid #d8e6df;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(22, 79, 55, .06);
}
.inv-consumption-kpis span { color: #52675d; font-size: 12px; }
.inv-consumption-kpis strong { color: #087a51; font-size: 20px; line-height: 1.15; }

@media (max-width: 920px) {
  .inv-consumption-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-consumption-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Login premium v3 — composição editorial, limpa e responsiva */
.login-screen {
  display: grid;
  grid-template-columns: minmax(430px, 1.08fr) minmax(430px, .92fr);
  inset: 0;
  min-height: 100dvh;
  padding: 18px;
  place-items: stretch;
  overflow: auto;
  background: #eef4f1;
}
.login-screen::before,
.login-screen::after { display: none; }
.login-showcase {
  position: relative;
  display: flex;
  min-height: calc(100dvh - 36px);
  padding: clamp(34px, 5vw, 72px);
  overflow: hidden;
  flex-direction: column;
  color: #fff;
  border-radius: 26px;
  background:
    radial-gradient(640px 500px at 96% 4%, rgba(111, 232, 188, .22), transparent 56%),
    radial-gradient(480px 420px at 5% 96%, rgba(255, 255, 255, .10), transparent 56%),
    linear-gradient(145deg, #075c40 0%, #087a52 56%, #0b6949 100%);
  box-shadow: 0 34px 90px -50px rgba(5, 62, 42, .75);
}
.login-showcase::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -155px;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(255,255,255,.035), 0 0 0 108px rgba(255,255,255,.025);
}
.login-showcase-brand {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  align-items: center;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}
.login-showcase-brand .brand-mark {
  width: 42px;
  height: 42px;
  color: #075c40;
  background: #fff;
  box-shadow: 0 14px 30px -15px rgba(0,0,0,.6);
}
.login-showcase-copy {
  position: relative;
  z-index: 1;
  max-width: 660px;
  margin: auto 0 48px;
}
.login-showcase-kicker {
  margin: 0 0 16px;
  color: #98f0cf;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.login-showcase-copy h2 {
  max-width: 620px;
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 4.5vw, 68px);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -.055em;
}
.login-showcase-copy > p:last-child {
  max-width: 570px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.78);
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.65;
}
.login-showcase-proof {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.login-showcase-proof > div {
  display: grid;
  min-height: 86px;
  padding: 15px;
  align-content: space-between;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(8px);
}
.login-showcase-proof strong { color: #8deac7; font: 600 11px "IBM Plex Mono", monospace; }
.login-showcase-proof span { max-width: 150px; color: rgba(255,255,255,.86); font-size: 11px; line-height: 1.4; }
.login-showcase-foot {
  position: relative;
  z-index: 1;
  margin: 22px 0 0;
  color: rgba(255,255,255,.50);
  font-size: 10px;
}
.login-panel {
  display: grid;
  min-height: calc(100dvh - 36px);
  padding: clamp(30px, 5vw, 78px);
  place-items: center;
}
.login-card {
  width: min(100%, 440px);
  max-width: none;
  padding: 0;
  gap: 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.login-brand {
  padding-bottom: 22px;
  border-bottom: 1px solid #d7e2dc;
}
.login-brand .brand-mark { width: 44px; height: 44px; border-radius: 13px; }
.login-brand strong { color: #16251f; font-size: 13px; }
.login-brand span { margin-top: 2px; color: #68776f; font-size: 10px; }
.login-heading { gap: 7px; margin: 10px 0 4px; }
.login-heading .eyebrow {
  margin: 0;
  color: #087450;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.login-heading h1 {
  max-width: 420px;
  margin: 0;
  color: #15241d;
  font-size: clamp(31px, 3.2vw, 43px);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -.055em;
}
.login-heading span { color: #596861; font-size: 13px; line-height: 1.55; }
.login-card label {
  display: grid;
  gap: 7px;
  color: #293a32;
  font-size: 12px;
  font-weight: 750;
}
.login-card input {
  height: 48px;
  padding: 11px 14px;
  border: 1px solid #cbd9d2;
  border-radius: 12px;
  color: #17251f;
  background: #fff;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(16, 51, 36, .025);
}
.login-card input:focus {
  border-color: #0b8b60;
  box-shadow: 0 0 0 4px rgba(11,139,96,.11);
}
.login-password-field { position: relative; }
.login-password-field input { width: 100%; padding-right: 48px; }
.login-password-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  display: grid;
  width: 36px;
  height: 36px;
  min-height: 0;
  padding: 0;
  transform: translateY(-50%);
  place-items: center;
  color: #607068;
  border: 0;
  border-radius: 9px;
  background: transparent !important;
  box-shadow: none !important;
}
.login-password-toggle:hover { color: #087450; background: #edf5f1 !important; }
.login-password-toggle svg,
.login-security svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.login-card #loginButton,
.login-card #forgotButton,
.login-card #resetButton {
  min-height: 48px;
  margin-top: 4px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 16px 28px -18px rgba(8, 116, 80, .85);
}
.login-link { justify-self: center; color: #087450; font-size: 11px; font-weight: 750; }
.login-security {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  color: #6a7871 !important;
  font-size: 10px !important;
  font-weight: 500;
}
.login-security svg { width: 15px; height: 15px; color: #0a8058; }
.login-card .empty-state { min-height: 18px; margin: 0; color: #b52929; font-size: 11px; }

@media (max-width: 980px) {
  .login-screen { grid-template-columns: minmax(340px, .85fr) minmax(390px, 1.15fr); padding: 10px; }
  .login-showcase { min-height: calc(100dvh - 20px); padding: 32px; border-radius: 22px; }
  .login-showcase-copy h2 { font-size: 40px; }
  .login-showcase-proof { grid-template-columns: 1fr; }
  .login-showcase-proof > div { min-height: 58px; grid-template-columns: 32px 1fr; align-items: center; }
  .login-showcase-proof > div:nth-child(n+3) { display: none; }
  .login-panel { min-height: calc(100dvh - 20px); padding: 34px; }
}
@media (max-width: 720px) {
  .login-screen { display: block; padding: 0; background: #f6f9f7; }
  .login-showcase { display: none; }
  .login-panel { min-height: 100dvh; padding: 28px 22px; }
  .login-card { width: min(100%, 430px); }
  .login-heading h1 { font-size: 34px; }
}
@media (max-width: 390px) {
  .login-panel { padding: 22px 18px; align-items: start; }
  .login-heading h1 { font-size: 30px; }
}

/* Login premium claro — verde como acento, não como massa visual */
.login-screen { background: #f4f7f5; }
.login-showcase {
  color: #183128;
  border: 1px solid #d7e6df;
  background:
    radial-gradient(620px 480px at 98% 4%, rgba(62, 187, 139, .15), transparent 58%),
    radial-gradient(520px 440px at 0% 100%, rgba(116, 153, 205, .10), transparent 60%),
    linear-gradient(145deg, #edf6f2 0%, #e3f0ea 56%, #f1f6f3 100%);
  box-shadow: 0 34px 90px -58px rgba(21, 69, 50, .45);
}
.login-showcase::after {
  border-color: rgba(8, 116, 80, .13);
  box-shadow: 0 0 0 54px rgba(8,116,80,.028), 0 0 0 108px rgba(8,116,80,.018);
}
.login-showcase-brand { color: #15372b; }
.login-showcase-brand .brand-mark {
  color: #fff;
  background: linear-gradient(135deg, #0a8a5e, #076845);
}
.login-showcase-kicker { color: #087450; }
.login-showcase-copy h2 { color: #163329; }
.login-showcase-copy > p:last-child { color: #50675e; }
.login-showcase-proof > div {
  border-color: rgba(8, 116, 80, .13);
  background: rgba(255,255,255,.48);
  box-shadow: 0 10px 24px -22px rgba(13, 66, 46, .50);
}
.login-showcase-proof strong { color: #087450; }
.login-showcase-proof span { color: #385148; }
.login-showcase-foot { color: #70837b; }
.login-panel { background: #fafcfb; }

/* Acabamento SaaS 2026 — acreditação, segurança e precisão laboratorial */
.login-screen {
  --login-ink: #14261f;
  --login-muted: #596b63;
  --login-emerald: #076b4c;
  --login-navy: #29445f;
  --login-stone: #f2f4f1;
  gap: 0;
  padding: 16px;
  background: #e9eeeb;
}
.login-showcase {
  min-height: calc(100dvh - 32px);
  padding: clamp(38px, 5.1vw, 78px);
  border-color: rgba(31, 69, 54, .10);
  border-radius: 28px;
  background:
    linear-gradient(rgba(25, 72, 55, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 72, 55, .035) 1px, transparent 1px),
    radial-gradient(680px 520px at 100% 0%, rgba(86, 177, 144, .17), transparent 58%),
    radial-gradient(520px 440px at 0% 100%, rgba(69, 104, 145, .09), transparent 62%),
    linear-gradient(145deg, #f4f7f3 0%, #e9f1ec 55%, #f5f6f2 100%);
  background-size: 42px 42px, 42px 42px, auto, auto, auto;
  box-shadow: 0 30px 80px -56px rgba(18, 54, 40, .65);
}
.login-showcase::before {
  content: "";
  position: absolute;
  top: 42px;
  bottom: 42px;
  left: 0;
  display: block;
  width: 4px;
  border-radius: 0 99px 99px 0;
  background: linear-gradient(180deg, #143c30, #0c8a61 58%, #6db59b);
}
.login-showcase-brand {
  gap: 13px;
  color: var(--login-ink);
  font-size: 13px;
  letter-spacing: -.01em;
}
.login-showcase-brand::after {
  content: "QUALITY OS";
  margin-left: auto;
  padding: 6px 9px;
  color: #52675d;
  border: 1px solid #cddbd4;
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  font: 600 9px "IBM Plex Mono", monospace;
  letter-spacing: .08em;
}
.login-showcase-copy { max-width: 720px; margin-bottom: clamp(42px, 6vh, 70px); }
.login-accreditation-badge {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  width: fit-content;
  margin-bottom: 28px;
  padding: 8px 11px;
  color: #40564c;
  border: 1px solid rgba(31, 90, 67, .14);
  border-radius: 999px;
  background: rgba(255,255,255,.66);
  box-shadow: 0 12px 28px -24px rgba(14, 64, 44, .7);
  font-size: 10px;
  font-weight: 650;
  backdrop-filter: blur(10px);
}
.login-accreditation-badge strong {
  color: var(--login-navy);
  font: 700 9px "IBM Plex Mono", monospace;
  letter-spacing: .07em;
}
.login-badge-signal {
  width: 7px;
  height: 7px;
  border: 2px solid #d7f2e7;
  border-radius: 50%;
  background: #0a9668;
  box-shadow: 0 0 0 3px rgba(10,150,104,.10);
}
.login-showcase-kicker {
  margin-bottom: 14px;
  color: #53695f;
  font: 650 10px "IBM Plex Mono", monospace;
  letter-spacing: .14em;
}
.login-showcase-copy h2 {
  max-width: 720px;
  color: var(--login-ink);
  font-size: clamp(40px, 4.45vw, 66px);
  font-weight: 620;
  line-height: 1.01;
  letter-spacing: -.06em;
}
.login-showcase-copy h2 em {
  color: var(--login-emerald);
  font-style: normal;
  font-weight: 620;
}
.login-showcase-copy > p:last-child {
  max-width: 620px;
  margin-top: 26px;
  color: #52665c;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.7;
}
.login-showcase-proof { gap: 12px; }
.login-showcase-proof > div {
  min-height: 108px;
  padding: 16px 17px;
  border-color: rgba(25, 81, 60, .12);
  border-radius: 16px;
  background: rgba(255,255,255,.58);
  box-shadow: 0 16px 30px -30px rgba(12, 54, 38, .75);
}
.login-showcase-proof strong { color: #71857c; font-size: 9px; }
.login-showcase-proof span {
  display: grid;
  gap: 4px;
  max-width: 190px;
  color: #596c63;
  font-size: 10px;
}
.login-showcase-proof span b { color: #203a2f; font-size: 12px; font-weight: 780; }
.login-showcase-foot {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #708078;
  font-size: 9px;
}
.login-showcase-foot span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0a9367;
  box-shadow: 0 0 0 3px rgba(10,147,103,.10);
}
.login-panel {
  min-height: calc(100dvh - 32px);
  padding: clamp(38px, 6vw, 92px);
  border-radius: 0 28px 28px 0;
  background: #fbfcfa;
  /* Em telas baixas (notebook de posto com navegador + taskbar comendo altura)
     o card ficava mais alto que a tela e o botao Entrar sumia embaixo, SEM
     rolagem. 'safe center' centraliza quando cabe e alinha ao topo quando nao
     cabe; overflow-y deixa rolar ate o botao. */
  align-items: safe center;
  overflow-y: auto;
}
.login-card { width: min(100%, 468px); gap: 17px; }
.login-brand { padding-bottom: 24px; border-color: #dce5e0; }
.login-heading { margin: 14px 0 7px; gap: 9px; }
.login-heading h1 {
  font-size: clamp(34px, 3.15vw, 46px);
  line-height: 1.01;
}
.login-heading span { max-width: 390px; color: var(--login-muted); font-size: 13px; }
.login-card label { gap: 8px; font-size: 11px; letter-spacing: .01em; }
.login-card input {
  height: 52px;
  padding: 12px 15px;
  border-color: #cbd8d2;
  border-radius: 13px;
  font-size: 13px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.login-card input::placeholder { color: #93a19a; }
.login-card #loginButton,
.login-card #forgotButton,
.login-card #resetButton {
  min-height: 52px;
  margin-top: 7px;
  border-radius: 13px;
  background: linear-gradient(135deg, #087451 0%, #075b43 100%);
  box-shadow: 0 18px 34px -20px rgba(6, 93, 64, .85);
  letter-spacing: .01em;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.login-card #loginButton:hover,
.login-card #forgotButton:hover,
.login-card #resetButton:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #09845c 0%, #064d39 100%);
  box-shadow: 0 22px 38px -20px rgba(6, 93, 64, .9);
}
.login-link { margin-top: 1px; text-decoration: none; }
.login-link:hover { color: #07583f; text-decoration: none; }
.login-security { margin-top: 9px; }

@media (max-width: 980px) {
  .login-screen { padding: 10px; }
  .login-showcase { min-height: calc(100dvh - 20px); }
  .login-panel { min-height: calc(100dvh - 20px); border-radius: 0 22px 22px 0; }
  .login-accreditation-badge { align-items: flex-start; border-radius: 14px; }
  .login-showcase-copy h2 { font-size: 39px; }
}
@media (max-width: 720px) {
  .login-screen { padding: 0; }
  .login-panel { min-height: 100dvh; border-radius: 0; background: #f8faf8; }
  .login-card::before {
    content: "GESTÃO LABORATORIAL  |  ACESSO PROTEGIDO";
    margin-bottom: 3px;
    color: #5e7268;
    font: 600 9px "IBM Plex Mono", monospace;
    letter-spacing: .07em;
  }
}
/* Telas baixas (notebook de posto: navegador + taskbar deixam ~560-600px uteis).
   Compacta o card verticalmente para o botao Entrar caber sem rolagem. */
@media (max-height: 730px) {
  .login-panel { padding: clamp(22px, 4vh, 40px) clamp(30px, 6vw, 92px); }
  .login-card { gap: 12px; }
  .login-brand { padding-bottom: 15px; }
  .login-heading { margin: 6px 0 3px; gap: 5px; }
  .login-heading h1 { font-size: clamp(26px, 3vw, 34px); }
  .login-heading span { font-size: 12px; }
  .login-card input { height: 46px; }
  .login-card #loginButton,
  .login-card #forgotButton,
  .login-card #resetButton { min-height: 46px; margin-top: 4px; }
  .login-security { margin-top: 6px; }
}

/* =================================================================
   Dashboard executivo 2026 — leitura rápida, calma e acionável
   ================================================================= */
#dashboard .dashboard-groups {
  max-width: 1540px;
  gap: 22px;
}
#dashboard .premium-cockpit-header {
  position: relative;
  align-items: center;
  min-height: 108px;
  margin: 0;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: 18px;
  background:
    radial-gradient(420px 180px at 96% 0%, rgba(49, 153, 113, .10), transparent 64%),
    linear-gradient(135deg, #fff 0%, #f7faf8 100%);
  box-shadow: var(--app-shadow);
}
#dashboard .premium-cockpit-header::after {
  content: "";
  position: absolute;
  right: 24%;
  bottom: -52px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(8,116,81,.09);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(8,116,81,.025);
  pointer-events: none;
}
#dashboard .premium-cockpit-welcome { position: relative; z-index: 1; }
#dashboard .premium-cockpit-greeting {
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 650;
  letter-spacing: -.05em;
}
#dashboard .premium-cockpit-date {
  margin-top: 6px;
  color: #5f7168;
  font-size: 12px;
}
#dashboard .cmdk-trigger {
  position: relative;
  z-index: 1;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px 8px 13px;
  color: #285142;
  border: 1px solid #d3e1da;
  border-radius: 11px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 24px -22px rgba(17,65,45,.7);
}
#dashboard .cmdk-trigger:hover {
  color: #075f43;
  border-color: #b8d1c5;
  background: #fff;
  transform: none;
}
#dashboard .cmdk-trigger svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}
#dashboard .cmdk-trigger span { font-size: 11px; font-weight: 750; }
#dashboard .cmdk-trigger kbd {
  padding: 4px 7px;
  color: #65776e;
  border: 1px solid #dfe7e3;
  border-radius: 7px;
  background: #f5f7f6;
  font: 600 9px "IBM Plex Mono", monospace;
}
#dashboard .premium-summary-section { display: grid; gap: 10px; }
#dashboard .premium-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3px;
}
#dashboard .premium-summary-head span {
  color: #344a40;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .075em;
  text-transform: uppercase;
}
#dashboard .premium-summary-head small {
  color: #7a8982;
  font-size: 10px;
}
#dashboard .premium-summary-grid { gap: 11px; }
#dashboard .premium-summary-card {
  position: relative;
  min-height: 118px;
  padding: 17px;
  border-radius: 16px;
  box-shadow: 0 14px 34px -31px rgba(15,54,38,.58);
}
#dashboard .premium-summary-card::after {
  content: "";
  position: absolute;
  inset: 0 18px auto;
  height: 2px;
  border-radius: 0 0 99px 99px;
  background: var(--summary-accent);
  opacity: .28;
}
#dashboard .premium-summary-copy strong { font-size: 30px; font-weight: 700; }
#dashboard .premium-summary-copy small { font-size: 12px; }
#dashboard .dashboard-group { min-width: 0; }
#dashboard .dashboard-group > h2 {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 28px;
  margin: 0 0 10px;
  padding: 0 3px;
  color: #344a40;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
#dashboard .dashboard-group > h2::before { display: none; }
#dashboard .premium-section-icon {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #087451;
  border-radius: 8px;
  background: #e6f2ec;
}
#dashboard .premium-section-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#dashboard .premium-total-badge {
  min-height: 22px;
  margin-left: 2px;
  padding: 2px 8px;
  font-size: 9.5px;
  letter-spacing: 0;
  text-transform: none;
}
#dashboard .premium-feed { gap: 7px; }
#dashboard .premium-feed-label {
  margin: 6px 3px 1px;
  color: #66776f;
  font-size: 9px;
  letter-spacing: .07em;
}
#dashboard .premium-feed-item {
  min-height: 66px;
  border-radius: 13px;
  box-shadow: 0 12px 28px -28px rgba(15,52,37,.62);
}
#dashboard .premium-feed-item::before { width: 3px; }
#dashboard .premium-feed-count {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
#dashboard .premium-feed-copy strong { font-size: 12.5px; }
#dashboard .premium-feed-copy small { color: #65756d; font-size: 11.5px; }
#dashboard .premium-feed-action {
  padding: 6px 9px;
  color: #176348;
  border-radius: 8px;
  background: #eef6f2;
  font-size: 10.5px;
}
#dashboard .premium-all-clear {
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 92px;
  padding: 18px 20px;
  border: 1px solid #cfe4da;
  border-radius: 16px;
  background: linear-gradient(135deg, #f2faf6, #fff);
  box-shadow: var(--app-shadow);
}
#dashboard .premium-all-clear-icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  color: #087451;
  border-radius: 14px;
  background: #dff2e9;
}
#dashboard .premium-all-clear-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}
#dashboard .premium-all-clear strong {
  display: block;
  color: #1b4937;
  font-size: 15px;
}
#dashboard .premium-all-clear small {
  display: block;
  margin-top: 3px;
  color: #5f756a;
  font-size: 11.5px;
}
#dashboard .premium-routine-card,
#dashboard .premium-auto-kpi {
  border-color: var(--app-line);
  border-radius: 13px;
  box-shadow: 0 12px 28px -29px rgba(15,52,37,.55);
}
#dashboard .premium-routine-card { min-height: 58px; padding: 9px 10px; }
#dashboard .premium-auto-kpi { min-height: 104px; padding: 14px; }
#dashboard .premium-section-note {
  color: #7b8982;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 720px) {
  #dashboard .premium-cockpit-header { padding: 17px; }
  #dashboard .premium-cockpit-header::after { display: none; }
  #dashboard .premium-cockpit-greeting { font-size: 26px; }
  #dashboard .cmdk-trigger { width: 100%; justify-content: center; }
  #dashboard .premium-summary-head small { display: none; }
}

/* =================================================================
   Listagens premium 2026 — pesquisa, leitura e ações consistentes
   ================================================================= */
#records .records-head {
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid var(--app-line);
  border-radius: 15px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--app-shadow);
}
#records .records-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 7px;
  min-width: min(100%, 560px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#records #recordSearch {
  min-height: 42px;
  padding: 9px 13px 9px 40px;
  border-color: #d4e0da;
  border-radius: 10px;
  background-color: #f8faf9;
}
#records #recordSearch:focus { background-color: #fff; }
#records .records-toolbar button,
#records .section-actions button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 11px;
  border-radius: 10px;
  white-space: nowrap;
  font-size: 10.5px;
}
#records .records-toolbar button svg,
#records .section-actions button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#records .section-actions {
  gap: 7px;
  margin-left: auto;
}
#records #newRecord {
  min-height: 42px;
  padding-inline: 15px;
  border-radius: 10px;
  box-shadow: 0 15px 26px -21px rgba(7,93,62,.9);
}
#records #recordsTable.table-wrap {
  max-height: calc(100dvh - 276px);
  min-height: 220px;
  overflow: auto;
  border: 1px solid var(--app-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--app-shadow);
}
#records .records-table-meta {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  min-height: 54px;
  padding: 9px 12px 9px 15px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--app-line);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
}
#records .records-table-meta > div { min-width: 0; }
#records .records-table-meta strong {
  display: block;
  overflow: hidden;
  color: #23372e;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#records .records-table-meta span {
  display: block;
  margin-top: 2px;
  color: #74827b;
  font-size: 9.5px;
}
#records #recordsTable table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}
#records #recordsTable thead th {
  top: 54px;
  z-index: 4;
  height: 42px;
  padding: 9px 12px;
  color: #62736a;
  border-bottom: 1px solid #dce6e1;
  background: #f6f8f7;
  box-shadow: inset 0 -1px rgba(216,228,222,.55);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}
#records #recordsTable tbody td {
  height: 54px;
  padding: 10px 12px;
  color: #34463d;
  border-bottom: 1px solid #eaf0ed;
  font-size: 11.5px;
  line-height: 1.4;
  vertical-align: middle;
}
#records #recordsTable tbody td:first-child {
  width: 58px;
  color: #809088;
  font: 600 10px "IBM Plex Mono", monospace;
}
#records #recordsTable tbody tr { transition: background-color .14s ease; }
#records #recordsTable tbody tr:hover td { background: #f5f9f7; }
#records #recordsTable tbody tr:last-child td { border-bottom: 0; }
#records #recordsTable .status {
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 9.5px;
  font-weight: 750;
  white-space: nowrap;
}
#records #recordsTable .row-actions {
  min-width: 150px;
  text-align: right;
  white-space: nowrap;
}
#records #recordsTable .row-primary-action {
  min-height: 32px;
  padding: 6px 9px;
  color: #176348;
  border-color: #d6e3dc;
  background: #f9fbfa;
  font-size: 9.5px;
}
#records #recordsTable .row-primary-action:hover {
  border-color: #b8d0c4;
  background: #eef6f2;
}
#records .action-menu summary {
  width: 32px;
  height: 32px;
  min-height: 32px;
  border-color: #dce5e1;
  border-radius: 9px;
  background: #fff;
  box-shadow: none;
}
#records .action-menu-list {
  min-width: 190px;
  padding: 6px;
  border: 1px solid #dbe6e0;
  border-radius: 11px;
  box-shadow: 0 20px 44px -24px rgba(13,48,33,.38);
}
#records .action-menu-list button {
  min-height: 34px;
  border-radius: 7px;
  font-size: 10.5px;
}
#records .pagination {
  position: sticky;
  bottom: 0;
  z-index: 5;
  min-height: 52px;
  padding: 9px 13px;
  border-top: 1px solid var(--app-line);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
}
#records .pagination > span { color: #687970; font-size: 10px; }
#records .pagination strong { color: #3e5148; font-size: 10px; }
#records .table-empty {
  min-height: 270px;
  border: 0;
  background:
    radial-gradient(240px 130px at 50% 46%, rgba(18,137,94,.07), transparent 70%),
    #fff;
}
#records .table-empty .empty-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 900px) {
  #records .records-head { align-items: stretch; flex-direction: column; }
  #records .records-toolbar { min-width: 0; width: 100%; }
  #records .section-actions {
    width: 100%;
    margin-left: 0;
    padding-bottom: 3px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  #records .section-actions button { flex: 0 0 auto; }
  #records #recordsTable.table-wrap { max-height: none; }
}
@media (max-width: 560px) {
  #records .records-toolbar {
    grid-template-columns: minmax(0, 1fr) 42px 42px;
  }
  #records .records-toolbar button { padding: 8px; }
  #records .records-toolbar button span { display: none; }
  #records .records-table-meta { padding-inline: 11px; }
  #records #recordsTable thead th,
  #records #recordsTable tbody td { padding-inline: 10px; }
}

/* Refinamento final do login: legibilidade, consistência e ritmo premium */
.login-showcase::before { display: none; }
.login-showcase-brand {
  justify-content: flex-start;
  color: #284238;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .015em;
}
.login-showcase-brand::after { display: none; }
.login-product-symbol {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #087451;
  border: 1px solid rgba(8,116,81,.14);
  border-radius: 11px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 12px 24px -20px rgba(8,83,58,.8);
}
.login-product-symbol svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.login-showcase-copy {
  margin: clamp(62px, 9vh, 92px) 0 auto;
}
.login-showcase-kicker {
  color: #526960;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
}
.login-showcase-proof > div {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 110px;
  padding: 17px 16px;
}
.login-showcase-proof strong {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #087451;
  border-radius: 10px;
  background: #e4f2ec;
}
.login-showcase-proof strong svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.login-showcase-proof span {
  gap: 5px;
  max-width: none;
  color: #52665d;
  font-size: 11px;
  line-height: 1.35;
}
.login-showcase-proof span b {
  color: #1b372c;
  font-size: 13px;
}
.login-panel { padding: clamp(34px, 4.5vw, 68px); }
.login-card { width: min(100%, 500px); }
.login-security {
  color: #52675d !important;
  font-size: 10.5px !important;
  font-weight: 600;
}
/* Aviso de Caps Lock: discreto, cor de alerta (ambar), aparece so em foco. */
.login-caps-warn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  color: #a3630a !important;
  font-size: 11px !important;
  font-weight: 650;
}
.login-caps-warn[hidden] { display: none; }
.login-caps-warn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
/* Botao Entrar em carregamento: nao clicavel e com spinner discreto. */
#loginButton.is-loading {
  cursor: progress;
  opacity: .85;
}
#loginButton.is-loading::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: loginSpin .6s linear infinite;
}
@keyframes loginSpin { to { transform: rotate(360deg); } }

/* Vinheta de dashboard no painel de venda: ilustração, não dado (pré-login).
   Mesma linguagem dos cards de prova — branco translúcido, verde de acento. */
.login-showcase-viz {
  margin-bottom: 14px;
  padding: 13px 16px 10px;
  border: 1px solid rgba(8,116,81,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.66);
  box-shadow: 0 16px 30px -26px rgba(8,83,58,.75);
}
.login-viz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  color: #1b372c;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .01em;
}
.login-viz-chips { display: flex; gap: 5px; }
.login-viz-chips i {
  padding: 2px 8px;
  border-radius: 999px;
  background: #e4f2ec;
  color: #087451;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
}
.login-showcase-viz svg { display: block; width: 100%; height: 56px; }
.login-showcase-viz .viz-grid { stroke: rgba(27,55,44,.08); stroke-width: 1; }
.login-showcase-viz .viz-meta { stroke: rgba(8,116,81,.35); stroke-width: 1; stroke-dasharray: 4 5; }
.login-showcase-viz .viz-area { fill: rgba(8,116,81,.12); }
.login-showcase-viz .viz-line {
  fill: none;
  stroke: #087451;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.login-showcase-viz .viz-dot { fill: #087451; stroke: #fff; stroke-width: 1.6; }
/* Tela baixa (notebook 1366x768 é comum em laboratório — é NELE que a demo
   acontece): em vez de esconder a vinheta, o painel aperta o respiro. O que
   era generoso em 900px de altura vira desperdício em 600. */
@media (max-height: 780px) {
  .login-showcase-copy { margin: 24px 0 auto; }
  .login-showcase-copy h2 { font-size: clamp(34px, 6.2vh, 46px); }
  .login-showcase-copy > p:last-child { margin-top: 10px; }
  .login-showcase-viz { margin-bottom: 11px; padding: 10px 14px 7px; }
  .login-viz-head { margin-bottom: 6px; }
  .login-showcase-viz svg { height: 40px; }
  .login-showcase-proof > div { min-height: 86px; padding: 12px 14px; }
  .login-showcase-foot { margin-top: 12px; }
}
/* Só abaixo disso a vinheta desiste do lugar (projetor antigo, janela mínima). */
@media (max-height: 560px) { .login-showcase-viz { display: none; } }

@media (max-width: 980px) {
  .login-showcase-copy { margin: 54px 0 auto; }
  .login-showcase-viz { display: none; } /* tela curta: sobra espaço só p/ a prova */
  .login-showcase-proof > div {
    min-height: 64px;
    grid-template-columns: 32px minmax(0, 1fr);
  }
}

/* =================================================================
   Design system interno 2026 — fundação visual para todos os módulos
   ================================================================= */
:root {
  --sidebar-width: 264px;
  --app-canvas: #f3f6f4;
  --app-panel: #ffffff;
  --app-panel-soft: #f8faf8;
  --app-ink: #182820;
  --app-muted: #607068;
  --app-line: #dce6e1;
  --app-line-strong: #cbd9d2;
  --app-accent: #087451;
  --app-accent-soft: #e7f3ed;
  --app-shadow: 0 14px 36px -30px rgba(18, 55, 40, .42);
  --app-shadow-raised: 0 22px 52px -38px rgba(18, 55, 40, .48);
}
body {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  color: var(--app-ink);
  background:
    radial-gradient(820px 480px at 88% -8%, rgba(37, 119, 88, .065), transparent 60%),
    var(--app-canvas);
}
.app-shell {
  min-width: 0;
  padding: 24px 32px 48px;
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  padding: 14px 12px 22px;
  border-right: 1px solid var(--app-line);
  background: rgba(250, 252, 250, .97);
  box-shadow: 12px 0 36px -34px rgba(17, 55, 39, .5);
  backdrop-filter: blur(16px);
}
.sidebar > .brand {
  top: -14px;
  margin: 0 0 8px;
  padding: 9px 8px 13px;
  border: 0;
  border-bottom: 1px solid var(--app-line);
  border-radius: 0;
  background: rgba(250,252,250,.95);
  box-shadow: none;
}
.sidebar .brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.sidebar .brand strong { color: #183127; font-size: 12px; }
.sidebar .brand span { color: #718078; font-size: 9px; }
.sidebar-collapse,
.sidebar-search-trigger {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  box-shadow: none;
}
.sidebar-collapse:hover,
.sidebar-search-trigger:hover {
  color: var(--app-accent);
  border-color: var(--app-line);
  background: #fff;
}
.sidebar-search-trigger {
  margin: 4px 0 12px;
  color: #3e5148;
  border-color: var(--app-line);
  background: #fff;
}
#menu { gap: 3px; }
.menu-group {
  padding: 0;
  border: 0;
  border-top: 1px solid #e9efec;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.menu-group:first-child { border-top: 0; }
.menu-group:has(.menu-group-items:not([hidden]) button.active) {
  padding: 0;
  border-color: #e9efec;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.menu-group-title {
  min-height: 42px;
  padding: 0 7px;
  border-radius: 9px;
  color: #506159;
}
.menu-group-title span {
  color: #45584f;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .065em;
}
.menu-group-title:hover,
.menu-group-title[aria-expanded="true"] { background: #f0f5f2; }
.menu-group-title::after {
  width: 20px;
  height: 20px;
  background: transparent;
}
.menu-group-items { gap: 2px; padding: 1px 0 8px; }
.menu-group-items button[data-module] {
  min-height: 40px;
  padding: 8px 9px;
  gap: 9px;
  color: #34463d;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
}
.menu-group-items button[data-module]:hover {
  color: #174b38;
  border-color: #e2ebe7;
  background: #f5f8f6;
}
.menu-group-items button[data-module].active {
  color: #075f43;
  border-color: #cfe2d9;
  background: var(--app-accent-soft);
  box-shadow: none;
  font-weight: 750;
}
.menu-group-items button[data-module].active::before {
  content: "";
  width: 3px;
  height: 18px;
  margin-left: -10px;
  border-radius: 99px;
  background: var(--app-accent);
}
.menu-group-items button[data-module] > span::before { display: none; }
.nav-ico,
.nav-group-ico {
  border-radius: 8px;
  background: #edf4f0;
}
.menu-group-items button[data-module].active .nav-ico {
  color: var(--app-accent);
  background: #d8ebe2;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 76px;
  margin: -24px -32px 20px;
  padding: 15px 30px;
  border: 0;
  border-bottom: 1px solid rgba(210,224,217,.92);
  border-radius: 0 0 18px 18px;
  background: rgba(255,255,255,.90);
  box-shadow: 0 16px 40px -36px rgba(15,52,37,.65);
  backdrop-filter: blur(18px);
}
.topbar-titles { padding-left: 15px; }
.topbar-titles::before { width: 3px; top: 3px; bottom: 3px; }
.topbar .eyebrow {
  color: #167153;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
}
.topbar h1,
#pageTitle {
  color: var(--app-ink);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 650;
  letter-spacing: -.045em;
}
.top-actions { gap: 8px; }
.top-actions button,
.top-actions .user-badge {
  min-height: 38px;
  padding: 8px 12px;
  border-color: var(--app-line);
  border-radius: 11px;
  background: rgba(255,255,255,.82);
  box-shadow: none;
  font-size: 11px;
}
.top-actions button:hover {
  border-color: #bcd3c8;
  background: #f6faf8;
  transform: none;
}
.top-actions .user-badge {
  color: #175640;
  border-color: #cfe2d9;
  background: #edf7f2;
}
.filters {
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 14px 14px;
  border: 1px solid var(--app-line);
  border-radius: 15px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--app-shadow);
}
.context-filter-field { color: #5b6d64; font-size: 9px; }
.context-filter-field select,
.context-filter-clear {
  min-height: 42px;
  border-color: var(--app-line-strong);
  border-radius: 10px;
  box-shadow: none;
}
.context-filter-field select:hover { border-color: #afc8bc; }
.context-filter-clear { color: #176348; background: #fbfdfc; }
input,
select,
textarea {
  border-color: var(--app-line-strong);
  border-radius: 11px;
  color: #24372e;
  background: #fff;
  box-shadow: inset 0 1px 1px rgba(16,48,34,.015);
}
input:hover,
select:hover,
textarea:hover { border-color: #b4c9bf; }
input:focus,
select:focus,
textarea:focus {
  border-color: #18835f;
  box-shadow: 0 0 0 3px rgba(15,128,89,.105);
}
button,
.button-link {
  border-radius: 10px;
  font-weight: 700;
}
button.secondary {
  color: #176348;
  border-color: var(--app-line-strong);
  background: #fff;
  box-shadow: none;
}
.card,
.dashboard-priority,
.attention-panel,
.records-toolbar,
.table-wrap,
.cf-card {
  border: 1px solid var(--app-line);
  border-radius: 15px;
  background: rgba(255,255,255,.95);
  box-shadow: var(--app-shadow);
}
.records-toolbar {
  gap: 9px;
  padding: 10px;
}
.table-wrap { overflow: auto; }
table { font-size: 12px; }
thead th {
  height: 42px;
  padding: 10px 12px;
  color: #607168;
  border-bottom: 1px solid var(--app-line);
  background: #f7f9f8;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}
tbody td {
  min-height: 48px;
  padding: 11px 12px;
  border-bottom-color: #e9efec;
  color: #304239;
}
tbody tr:hover { background: #f5f9f7; }
dialog {
  border: 1px solid rgba(207,222,215,.92);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 36px 100px -42px rgba(8,36,24,.62);
}
dialog::backdrop {
  background: rgba(20,38,30,.48);
  backdrop-filter: blur(5px);
}
dialog h2 {
  color: var(--app-ink);
  font-size: 22px;
  font-weight: 680;
  letter-spacing: -.035em;
}
dialog menu {
  padding-top: 14px;
  border-top: 1px solid var(--app-line);
}
.empty-state { color: #687970; }

/* ===== Formulários premium 2026 =====
   Mantido no fim do tema para preservar o cabeçalho contextual e o rodapé
   fixo do formulário genérico acima das regras legadas de dialog. */
#recordDialog {
  max-height: min(90vh, 820px);
  padding: 0;
}
#recordDialog #recordForm {
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  max-height: min(90vh, 820px);
}
#recordDialog .record-dialog-header {
  padding: 22px 24px 18px;
}
#recordDialog .record-dialog-header h2 {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 22px;
}
#recordDialog .form-grid {
  max-height: calc(min(90vh, 820px) - 214px);
  padding: 20px 24px 24px;
}
#recordDialog menu {
  padding: 14px 24px 18px;
}
@media (max-width: 640px) {
  #recordDialog {
    width: 100vw;
    max-height: 94vh;
  }
  #recordDialog #recordForm { max-height: 94vh; }
  #recordDialog .record-dialog-header { padding: 18px 16px 15px; }
  #recordDialog .record-dialog-header h2 { padding: 0; }
  #recordDialog .form-grid {
    max-height: calc(94vh - 214px);
    padding: 16px;
  }
  #recordDialog menu {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
}

#dashboard .premium-cockpit-header { margin: 4px 0 10px; }
#dashboard .premium-cockpit-greeting {
  color: var(--app-ink);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 650;
  letter-spacing: -.045em;
}
#dashboard .premium-summary-card {
  min-height: 0;
  border-color: var(--app-line);
  border-radius: 15px;
  box-shadow: var(--app-shadow);
}
#dashboard .dashboard-group h2,
#dashboard .premium-section-title {
  color: #3d5148;
  font-size: 11px;
  letter-spacing: .055em;
}
.attention-item,
.dashboard-priority-item {
  border-radius: 12px;
  box-shadow: 0 8px 24px -25px rgba(16,51,36,.6);
}

@media (max-width: 1180px) {
  :root { --sidebar-width: 238px; }
  .app-shell { padding: 20px 22px 42px; }
  .topbar { margin: -20px -22px 18px; padding: 14px 22px; }
}
@media (max-width: 980px) {
  body { grid-template-columns: 1fr; }
  .app-shell { padding: 14px 16px 34px; }
  .sidebar {
    position: fixed;
    height: 100dvh;
    padding: 12px;
  }
  .topbar {
    margin: -14px -16px 16px;
    padding: 13px 16px;
    border-radius: 0 0 16px 16px;
  }
}
/* ===== Gestão documental premium 2026 ===== */
.documents-flow {
  display: grid;
  grid-template-columns: minmax(175px, .75fr) minmax(560px, 3fr) auto;
  align-items: center;
  gap: 18px;
  padding: 15px 17px;
  margin-bottom: 10px;
  border: 1px solid #dce7e2;
  border-radius: 16px;
  background: linear-gradient(135deg, #f7fbf9, #fff 65%);
  box-shadow: 0 10px 28px rgba(19, 72, 51, .05);
}
.documents-flow > header { display: grid; gap: 3px; }
.documents-flow > header span,
.documents-cockpit-heading span {
  color: #087553;
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.documents-flow > header strong {
  color: #21362c;
  font-size: 12.5px;
  line-height: 1.35;
}
.documents-flow-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(105px, 1fr));
  gap: 8px;
}
.documents-flow-track::before {
  position: absolute;
  top: 15px;
  right: 8%;
  left: 8%;
  z-index: 0;
  height: 1px;
  background: #c8dbd2;
  content: "";
}
.documents-flow-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 31px 1fr;
  align-items: start;
  gap: 7px;
  min-width: 0;
}
.documents-flow-step > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  color: #fff;
  border: 4px solid #f8fbf9;
  border-radius: 50%;
  background: #087553;
  font: 700 10px/1 "IBM Plex Mono", monospace;
}
.documents-flow-step strong,
.documents-flow-step small { display: block; }
.documents-flow-step strong {
  margin-top: 2px;
  color: #263b32;
  font-size: 10.5px;
}
.documents-flow-step small {
  margin-top: 2px;
  color: #74827b;
  font-size: 9px;
  line-height: 1.25;
}
.documents-flow-action {
  min-height: 40px;
  padding: 8px 13px;
  white-space: nowrap;
}
.documents-cockpit {
  padding: 15px;
  margin: 2px 0 12px;
  border: 1px solid #dce7e2;
  border-radius: 16px;
  background: #f8fbf9;
}
.documents-cockpit-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.documents-cockpit-heading > div { display: grid; gap: 2px; }
.documents-cockpit-heading strong {
  color: #263a31;
  font-size: 13px;
}
.documents-cockpit-heading > button {
  min-height: 31px;
  padding: 5px 10px;
  color: #586b61;
  border-color: #ceddd6;
  background: #fff;
  font-size: 10px;
}
.documents-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 9px;
}
.documents-kpi {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 82px;
  padding: 12px 13px;
  overflow: hidden;
  color: #263a31;
  text-align: left;
  border: 1px solid #dce6e1;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(21, 64, 48, .035);
}
.documents-kpi::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: #9aacA3;
  content: "";
}
.documents-kpi > span {
  color: #596b62;
  font-size: 10px;
  font-weight: 750;
}
.documents-kpi > strong {
  color: #172c23;
  font: 650 22px/1.1 "Manrope", sans-serif;
}
.documents-kpi > small { color: #74827b; font-size: 9.5px; }
.documents-kpi.danger::after { background: #d84747; }
.documents-kpi.warning::after { background: #d99309; }
.documents-kpi.muted::after { background: #80928a; }
.documents-kpi.success::after { background: #11966c; }
.documents-kpi:hover,
.documents-kpi.active {
  border-color: #8fc2aa;
  box-shadow: 0 0 0 3px rgba(17, 137, 96, .09), 0 8px 20px rgba(21, 64, 48, .06);
  transform: translateY(-1px);
}
@media (max-width: 1180px) {
  .documents-flow { grid-template-columns: 1fr auto; }
  .documents-flow > header { grid-column: 1 / -1; }
  .documents-flow-track { overflow-x: auto; }
  .documents-flow-step { min-width: 135px; }
}
@media (max-width: 820px) {
  .documents-flow { grid-template-columns: 1fr; }
  .documents-flow-action { width: 100%; }
  .documents-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  .documents-kpis { grid-template-columns: 1fr; }
}

/* ===== Estoque operacional premium 2026 ===== */
.inventory-flow {
  display: grid;
  grid-template-columns: minmax(520px, 3fr) auto;  /* sem coluna do header (removido): passos | relatorio */
  align-items: center;
  gap: 16px;
  padding: 15px 16px;
  margin-bottom: 10px;
  border: 1px solid #dbe7e1;
  border-radius: 16px;
  background: linear-gradient(135deg, #f7fbf9, #fff 62%);
  box-shadow: 0 10px 28px rgba(19, 72, 51, .055);
}
.inventory-flow > header { display: grid; gap: 3px; }
.inventory-flow > header span {
  color: #087553;
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.inventory-flow > header strong {
  color: #20342b;
  font-size: 12.5px;
  line-height: 1.35;
}
.inventory-flow-steps {
  display: flex;
  align-items: stretch;
  gap: 7px;
  min-width: 0;
}
.inventory-flow-step {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 9px;
  min-width: 120px;
  padding: 9px 10px;
  color: #263b32;
  text-align: left;
  border: 1px solid #dce7e2;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(22, 70, 51, .035);
}
.inventory-flow-step:hover {
  border-color: #a9cebd;
  background: #f8fcfa;
  transform: translateY(-1px);
}
.inventory-flow-number {
  display: inline-flex;
  flex: 0 0 25px;
  align-items: center;
  justify-content: center;
  height: 25px;
  color: #fff;
  border-radius: 8px;
  background: #087553;
  font: 750 11px/1 "IBM Plex Mono", monospace;
}
.inventory-flow-step strong,
.inventory-flow-step small { display: block; }
.inventory-flow-step strong { font-size: 11px; line-height: 1.25; }
.inventory-flow-step small {
  margin-top: 2px;
  color: #718078;
  font-size: 9.5px;
  line-height: 1.3;
}
.inventory-flow-arrow {
  align-self: center;
  flex: 0 0 14px;
  width: 14px;
  fill: none;
  stroke: #91a59c;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.inventory-flow-report {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 12px;
  color: #087553;
  white-space: nowrap;
  border-color: #bad8ca;
  background: #eef8f3;
}
.inventory-flow-report svg {
  width: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.inventory-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(135px, 1fr));
  gap: 10px;
  margin: 2px 0 12px;
}
.inventory-kpi {
  position: relative;
  display: grid;
  gap: 1px;
  min-height: 0;
  padding: 10px 14px;
  overflow: hidden;
  color: #293c34;
  text-align: left;
  border: 1px solid #dce6e1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(21, 64, 48, .045);
}
.inventory-kpi::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: #97aaa1;
  content: "";
}
.inventory-kpi span {
  color: #596b62;
  font-size: 10.5px;
  font-weight: 750;
}
.inventory-kpi strong {
  color: #172c23;
  font: 650 21px/1.1 "Manrope", sans-serif;
}
.inventory-kpi small { color: #74827b; font-size: 10px; }
.inventory-kpi.success::after { background: #11966c; }
.inventory-kpi.danger::after { background: #d84747; }
.inventory-kpi.warning::after { background: #d99309; }
.inventory-kpi.success strong { color: #087553; }
.inventory-kpi.danger {
  border-color: #efcaca;
  background: #fff7f7;
}
.inventory-kpi.danger strong { color: #c9363f; }
.inventory-kpi.warning {
  border-color: #ecd8ad;
  background: #fffaf0;
}
.inventory-kpi.warning strong { color: #b66c05; }
.inventory-kpi:focus-visible {
  outline: 3px solid rgba(17, 137, 96, .2);
  outline-offset: 2px;
}

/* Tabela de estoque: o item conduz a leitura; metadados recuam e as linhas
   alternadas ajudam a acompanhar lotes extensos sem pesar visualmente. */
.inventory-balance-table tbody tr:nth-child(even):not(.row-consumed) td {
  background-color: #fbfdfc;
}
.inventory-balance-table tbody tr:hover td {
  background-color: #f3f9f6;
}
.inventory-balance-table tbody td {
  vertical-align: middle;
}
#records .inventory-balance-table tbody td:nth-child(2) {
  color: #20362c;
  font-weight: 680;
}
#records .inventory-balance-table tbody td:nth-child(3),
#records .inventory-balance-table tbody td:nth-child(4),
#records .inventory-balance-table tbody td:nth-child(5),
#records .inventory-balance-table tbody td:nth-child(7) {
  color: #5f7168;
  font-size: 11.5px;
}
.inventory-balance-table tbody td:nth-child(8),
.inventory-balance-table tbody td:nth-child(9),
.inventory-balance-table tbody td:nth-child(10) {
  color: #30463b;
  font-variant-numeric: tabular-nums;
}
.inventory-balance-table tbody td:nth-child(10) strong {
  color: #173c2d;
  font-weight: 750;
}
.inventory-balance-table .inv-code {
  display: inline-flex;
  padding: 2px 7px;
  color: #176548;
  background: #eaf5f0;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 750;
}
.inventory-quick-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr)) auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  margin: 0 0 10px;
  border: 1px solid #dbe8e1;
  border-radius: 12px;
  background: #f8fbf9;
}
.inventory-quick-filters label {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.inventory-quick-filters label > span {
  color: #496157;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.inventory-quick-filters select,
.inventory-quick-filters input {
  width: 100%;
  min-height: 40px;
  padding: 0 36px 0 12px;
  border: 1px solid #cbdcd3;
  border-radius: 9px;
  background-color: #fff;
  color: #213b30;
  font: inherit;
  font-size: 12.5px;
}
.inventory-quick-filters select:focus,
.inventory-quick-filters input:focus {
  border-color: #238b68;
  box-shadow: 0 0 0 3px rgba(17, 137, 96, .12);
  outline: 0;
}
.inventory-quick-filters input {
  padding-right: 12px;
}
.inventory-clear-filters {
  min-height: 40px;
  white-space: nowrap;
}
.inventory-kpi:hover,
.inventory-kpi.active {
  border-color: #8fc2aa;
  box-shadow: 0 0 0 3px rgba(17, 137, 96, .09), 0 9px 24px rgba(21, 64, 48, .07);
  transform: translateY(-1px);
}
.inventory-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 2px 9px;
}
.inventory-list-heading > div { display: grid; gap: 2px; }
.inventory-list-heading span {
  color: #087553;
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.inventory-list-heading strong { color: #33473d; font-size: 12px; }
.inventory-filter-reset {
  min-height: 32px;
  padding: 5px 10px;
  color: #53675d;
  border-color: #d6e1dc;
  border-radius: 9px;
  background: #fff;
  font-size: 10.5px;
}
.inventory-filter-reset.active {
  color: #087553;
  border-color: #9bc9b4;
  background: #eef8f3;
}
.inventory-empty-state {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 260px;
  padding: 36px;
  color: #62736b;
  text-align: center;
  border: 1px dashed #cfded7;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfdfc, #f6faf8);
}
.inventory-empty-state svg {
  width: 42px;
  fill: none;
  stroke: #218363;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.inventory-empty-state strong { color: #243a30; font-size: 15px; }
.inventory-empty-state span { max-width: 430px; font-size: 12px; line-height: 1.5; }
.inventory-empty-state button { margin-top: 4px; }
.inventory-balance-table tbody tr[hidden] { display: none; }

@media (max-width: 1180px) {
  .inventory-flow { grid-template-columns: 1fr auto; }
  .inventory-flow > header { grid-column: 1 / -1; }
  .inventory-flow-steps { overflow-x: auto; padding-bottom: 3px; }
  .inventory-flow-step { flex: 0 0 175px; }
}
@media (max-width: 720px) {
  .inventory-flow { grid-template-columns: 1fr; padding: 13px; }
  .inventory-flow-report { width: 100%; justify-content: center; }
  .inventory-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .inventory-overview { grid-template-columns: 1fr; }
}

/* ============================================================================
   MODO COMPACTO - notebooks/telas medias (721px a 1366px).
   Calibrado em 1366x768 (notebook padrao de laboratorio): a moldura (topbar +
   filtros) e a saudacao consumiam ~48% da 1a tela antes do 1o indicador. Aqui
   reduzimos densidade SEM mudar o visual: celular (<=720) mantem suas regras,
   monitor grande (>1366) fica intacto.
   ========================================================================== */
@media (min-width: 721px) and (max-width: 1366px) {
  .topbar { padding-top: 9px; padding-bottom: 9px; min-height: 58px; }
  #pageTitle { font-size: 22px; }

  .filters { padding: 7px 12px; margin-top: 10px; margin-bottom: 10px; gap: 8px; }

  #dashboard .premium-cockpit-header {
    min-height: 0;
    padding: 12px 18px;
    border-radius: 14px;
  }
  #dashboard .premium-cockpit-header::after { display: none; }
  #dashboard .premium-cockpit-greeting { font-size: 22px; }
  #dashboard .premium-cockpit-date { margin-top: 2px; }

  #dashboard .premium-summary-section { gap: 8px; }
  #dashboard .premium-summary-grid { gap: 10px; }
  #dashboard .premium-summary-card { padding: 12px 14px; }
  #dashboard .dashboard-groups { gap: 12px; }
}

@media (max-width: 720px) {
  .inventory-quick-filters {
    display: grid;
    grid-template-columns: 1fr;
  }
  .inventory-quick-filters label {
    width: 100%;
  }
  .inventory-clear-filters {
    width: 100%;
  }
}

/* ----------------------------------------------------------------------------
   Estoque em notebook (721-1366px): a tabela tem 11 colunas e nao cabe na
   largura util, rolando de lado — a coluna Acoes ficava escondida na direita.
   Solucao: densidade moderada + coluna Acoes FIXA na direita (sempre visivel,
   mesmo rolando as demais colunas). Fonte preservada para leitura.
   -------------------------------------------------------------------------- */
@media (min-width: 721px) and (max-width: 1366px) {
  .inventory-balance-table th,
  .inventory-balance-table td { padding: 6px 7px; }

  .inventory-balance-table th:last-child,
  .inventory-balance-table td:last-child {
    position: sticky;
    right: 0;
    background: #fff;
    box-shadow: -8px 0 10px -8px rgba(0, 0, 0, .14);
  }
  .inventory-balance-table thead th:last-child {
    background: #f3f7fb;
    z-index: 3;
  }
}

/* ============================================================================
   MODO COMPACTO POR ALTURA - notebooks com pouca area vertical.
   Em 1366x768 o navegador + barra do Windows deixam cerca de 590-620px uteis.
   A interface usa densidade de notebook automaticamente, sem zoom e sem
   reduzir a fonte abaixo do tamanho confortavel de leitura.
   ========================================================================== */
@media (min-width: 721px) and (max-height: 850px) {
  .app-shell { padding: 14px 20px 28px; }

  .topbar {
    min-height: 56px;
    margin: -14px -20px 10px;
    padding: 8px 20px;
    border-radius: 0 0 14px 14px;
  }
  .topbar h1,
  #pageTitle { font-size: 21px; }
  .topbar .eyebrow { font-size: 8px; }
  .top-actions { gap: 6px; }
  .top-actions button,
  .top-actions .user-badge {
    min-height: 36px;
    padding: 7px 10px;
  }

  .filters {
    gap: 8px;
    margin: 0 0 9px;
    padding: 7px 11px 9px;
    border-radius: 13px;
  }
  .context-filter-field { gap: 3px; }
  .context-filter-field select,
  .context-filter-clear {
    min-height: 36px;
    height: 36px;
  }

  #records .records-head {
    gap: 8px;
    margin-bottom: 8px;
    padding: 8px 10px;
    border-radius: 13px;
  }
  #records .records-head input,
  #records .records-head button { min-height: 36px; }
  .records-table-meta {
    min-height: 38px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .inventory-flow,
  .documents-flow {
    gap: 10px;
    margin-bottom: 8px;
    padding: 9px 12px;
    border-radius: 13px;
  }
  .inventory-flow > header strong,
  .documents-flow > header strong { font-size: 11px; }
  .inventory-flow-step {
    min-height: 48px;
    padding: 6px 8px;
  }
  .inventory-flow-number {
    flex-basis: 23px;
    width: 23px;
    height: 23px;
  }
  .inventory-flow-step strong { font-size: 10px; }
  .inventory-flow-step small { font-size: 8.5px; }
  .inventory-flow-report,
  .documents-flow-action { min-height: 36px; }
  .documents-flow-step > span {
    width: 27px;
    height: 27px;
  }

  .inventory-overview,
  .documents-kpis {
    gap: 8px;
    margin-bottom: 8px;
  }
  .inventory-kpi,
  .documents-kpi {
    min-height: 0;
    padding: 6px 12px;
  }
  .inventory-kpi strong,
  .documents-kpi > strong { font-size: 19px; }
  /* Notebook: tira a 3a linha (legenda) dos cartoes de KPI -> ficam bem mais
     baixos e param de esconder a lista. No desktop a legenda continua. */
  .inventory-kpi small,
  .documents-kpi small { display: none; }

  /* Cartoes-hero (Checklists e afins): no notebook perdem a decoracao e a 3a
     linha e ficam 1/3 mais baixos — a lista sobe. Desktop segue intacto. */
  .hero-stats { gap: 8px; margin-bottom: 10px; }
  .hero-pill { min-height: 0; padding: 10px 14px 12px; }
  .hero-pill .hp-num { font-size: 24px; margin-top: 2px; }
  .hero-pill .hp-sub { display: none; }
  .hero-pill .hp-ic { display: none; }
  .inventory-list-heading { padding: 5px 2px 6px; }
  .inventory-scope-banner,
  .inventory-alert-banner {
    margin-bottom: 7px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  #dashboard .premium-cockpit-header {
    margin-bottom: 9px;
    padding: 10px 16px;
  }
  #dashboard .premium-cockpit-greeting { font-size: 21px; }
  #dashboard .premium-summary-section { gap: 6px; }
  #dashboard .premium-summary-head { min-height: 20px; }
  #dashboard .premium-summary-grid { gap: 8px; }
  #dashboard .premium-summary-card {
    min-height: 78px;
    padding: 9px 12px;
  }
  #dashboard .premium-summary-icon {
    width: 38px;
    height: 38px;
  }
  #dashboard .premium-summary-copy strong { font-size: 25px; }
  #dashboard .premium-summary-copy small { font-size: 10.5px; }
  #dashboard .dashboard-priority-header { margin-top: 8px; }

  table th { padding-top: 7px; padding-bottom: 7px; }
  table td { padding-top: 8px; padding-bottom: 8px; }
  main > footer.empty-state { margin-top: 10px; }
}

/* Cabecalho da tabela de estoque NAO deve herdar o offset de 54px das listas
   genericas (que tem barra meta fixa). Aqui o container e o proprio #recordsTable
   e nao ha barra fixa, entao o thead gruda no topo (top:0) — sem a folga que
   fazia uma linha aparecer acima do cabecalho. */
#records #recordsTable .inventory-balance-table thead th { top: 0; }


/* Seletor de unidade no cabecalho (padrao DB) — visivel so para gestao; a
   nao-gestao nem ve. width:auto vence o `select{width:100%}` global. */
.unit-switcher { display: inline-flex; align-items: center; gap: 6px; color: #24463a; }
.unit-switcher > svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; flex: 0 0 auto; opacity: .65; }
.unit-switcher select { width: auto; max-width: 200px; min-height: 40px; font-size: 13px; font-weight: 650; }
@media (max-width: 1180px) { .unit-switcher select { max-width: 150px; } }
@media (max-width: 720px)  { .unit-switcher { order: 5; } .unit-switcher select { max-width: 100%; } }

/* ── Monitoramento do Transporte de amostras ─────────────────────────────────
   Painel acima da tabela: quem RECEBE vê a fila do que está vindo (com chegada
   em um clique); quem DESPACHA vê o que ainda não chegou. Fica antes da tabela
   de propósito — a remessa em trânsito é a informação perecível da tela. */
.tr-bloco { border: 1px solid #d7e3dc; border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; background: #f7fbf9; }
.tr-bloco h4 { margin: 0 0 8px; font-size: 13.5px; color: #1f3a30; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-receber { background: #f1f8f4; border-color: #b9dbc8; }
.tr-cont { background: #0b7250; color: #fff; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; }
.tr-cont.tr-alerta { background: #b45309; }
.tr-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 7px 0; border-top: 1px solid #e5efe9; font-size: 13px; color: #2c3e39; }
.tr-linha:first-of-type { border-top: 0; }
.tr-rota { flex: 1 1 240px; }
.tr-info { color: #4b5f58; font-size: 12.5px; }
.tr-tempo { color: #4b5f58; font-size: 12.5px; white-space: nowrap; }
.tr-tempo.tr-alerta { color: #b45309; font-weight: 700; }
.tr-atrasada { background: #fffaf2; }
@media (max-width: 720px) { .tr-linha { align-items: flex-start; } .tr-rota { flex-basis: 100%; } }
.tr-amostras { color: #37504a; }
.tr-faixa { color: #64748b; font-size: 11.5px; white-space: nowrap; }

/* Navegação operacional para celular. Mantém os quatro destinos mais usados
   ao alcance do polegar; os demais continuam no menu lateral existente. */
.mobile-bottom-nav { display: none; }
.mobile-context-toggle { display: none; }

@media (max-width: 720px) {
  body:not(.app-locked) {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 1250;
    right: 10px;
    bottom: 8px;
    left: 10px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 60px;
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px));
    border: 1px solid rgba(137, 168, 155, .42);
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 35px rgba(25, 63, 49, .18);
    backdrop-filter: blur(14px);
  }

  .app-locked .mobile-bottom-nav { display: none; }

  .mobile-bottom-nav button {
    display: flex;
    min-width: 0;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    padding: 4px 2px;
    border: 0;
    border-radius: 13px;
    color: #52655e;
    background: transparent;
    box-shadow: none;
    font-size: 10px;
    font-weight: 700;
  }

  .mobile-bottom-nav button:hover,
  .mobile-bottom-nav button:focus-visible,
  .mobile-bottom-nav button.active {
    color: #087653;
    background: #eaf7f1;
    box-shadow: none;
  }

  .mobile-bottom-nav button[hidden] { display: none; }
  .mobile-bottom-nav svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* O celular mostra somente ações essenciais no topo. Sair permanece como
     ícone para que a sessão sempre possa ser encerrada.

     AJUDA FICA: ela estava nesta lista, e o efeito era o contrário do
     pretendido — quem usa o sistema pelo telefone é o pessoal de bancada
     (a leitura de etiqueta por câmera é feita assim), justamente quem mais
     precisa de "como uso esta tela". O conteúdo existe para 47 abas e ficava
     invisível para eles. Vira ícone sem rótulo, que cabe no topo estreito. */
  #currentUserBadge,
  #manualButton,
  #attachEvidence {
    display: none !important;
  }
  #helpButton {
    min-width: 44px;   /* alvo de toque acessível */
    min-height: 44px;
    padding: 9px 11px;
  }
  #helpButton .top-action-label {
    display: none;
  }

  .topbar {
    min-height: 64px;
    padding: 9px 12px;
  }
  .topbar-title h1 { font-size: clamp(18px, 5.5vw, 22px); }
  .top-actions { gap: 6px; }
  #alertBell,
  #logoutButton {
    min-width: 44px;
    min-height: 44px;
    padding-right: 10px;
    padding-left: 10px;
  }
  #logoutButton .top-action-label { display: none; }

  .mobile-context-toggle:not([hidden]) {
    display: inline-flex;
    width: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 9px 11px;
  }
  #mobileContextToggle { min-height: 44px; }
  .mobile-context-toggle .top-action-label { font-size: 11px; }
  .mobile-context-toggle[aria-expanded="true"] {
    color: #087653;
    border-color: #acd4c1;
    background: #eaf7f1;
  }
  #unitSwitcher:not([hidden]) {
    display: none;
    order: 10;
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid #e1ebe6;
  }
  body.mobile-context-open #unitSwitcher:not([hidden]) {
    display: flex;
  }
  #unitSwitcher select {
    width: 100%;
    max-width: none;
    min-height: 48px;
    font-size: 16px;
  }
  .top-actions {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: wrap;
    width: auto;
  }

  /* Busca de registros: campo na primeira linha e comandos lado a lado. */
  #records .records-head .records-toolbar {
    flex: 0 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  #records .records-head #recordSearch,
  #records .records-head .records-toolbar .search-field,
  #records .records-head .records-toolbar [type="search"] {
    grid-column: 1 / -1;
  }
  #records .records-head .records-toolbar button {
    width: 100%;
  }

  /* As listas genéricas e o estoque deixam de exigir rolagem horizontal.
     Cada linha passa a ser um cartão com rótulo e valor. */
  #records #recordsTable {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  #records #recordsTable table {
    display: block;
    min-width: 0 !important;
    width: 100%;
    border: 0;
    background: transparent;
  }
  #records #recordsTable thead { display: none; }
  #records #recordsTable tbody {
    display: grid;
    gap: 10px;
  }
  #records #recordsTable tbody tr {
    display: grid;
    width: 100%;
    overflow: hidden;
    border: 1px solid #dce8e2;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(31, 67, 54, .07);
  }
  #records #recordsTable tbody td {
    position: static !important;
    display: grid;
    grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr);
    gap: 12px;
    width: auto !important;
    min-width: 0 !important;
    min-height: 36px;
    align-items: center;
    padding: 7px 12px;
    border: 0;
    border-bottom: 1px solid #edf2ef;
    color: #21372f;
    background: transparent !important;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #records #recordsTable tbody td::before {
    content: attr(data-label);
    color: #667871;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .04em;
    line-height: 1.25;
    text-align: left;
    text-transform: uppercase;
  }
  #records #recordsTable tbody td:last-child {
    border-bottom: 0;
  }
  #records #recordsTable tbody td.row-actions,
  #records #recordsTable tbody td.inv-actions {
    display: flex;
    grid-template-columns: none;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #f8fbf9 !important;
  }
  #records #recordsTable tbody td.row-actions::before,
  #records #recordsTable tbody td.inv-actions::before {
    content: none;
  }
  #records #recordsTable tbody td button,
  #records #recordsTable tbody td .button {
    min-height: 40px;
  }

  /* Formulários no celular: evita o zoom automático do iPhone, amplia os
     alvos de toque e mantém as ações visíveis durante formulários longos. */
  dialog input:not([type="checkbox"]):not([type="radio"]),
  dialog select,
  dialog textarea {
    min-height: 48px;
    font-size: 16px;
  }
  dialog textarea { min-height: 104px; }
  #recordDialog .form-grid input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #recordDialog .form-grid select {
    min-height: 48px;
  }
  #recordDialog .form-grid textarea { min-height: 104px; }
  dialog input[type="checkbox"],
  dialog input[type="radio"] {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }
  dialog label {
    gap: 7px;
    line-height: 1.35;
  }
  dialog menu {
    position: sticky;
    z-index: 4;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #dce8e2;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -10px 24px rgba(31, 67, 54, .08);
    backdrop-filter: blur(12px);
  }
  dialog menu button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    white-space: normal;
  }

  #recordDialog {
    width: calc(100vw - 10px);
    max-height: calc(100dvh - 8px);
    border-radius: 18px 18px 0 0;
  }
  #recordDialog #recordForm {
    max-height: calc(100dvh - 8px);
  }
  #recordDialog .record-dialog-header {
    padding: 14px 14px 12px;
  }
  #recordDialog .record-dialog-heading {
    min-width: 0;
  }
  #recordDialog .record-dialog-header h2 {
    font-size: 19px;
    line-height: 1.2;
  }
  #recordDialogDescription {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  #recordDialog .record-dialog-close {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }
  #recordDialog .record-form-status {
    padding: 7px 14px;
  }
  #recordDialog .form-grid {
    max-height: none;
    padding: 14px 14px 20px;
    gap: 14px;
  }
  #recordDialog .form-section-title {
    top: -14px;
    padding-top: 10px;
    padding-bottom: 8px;
  }
  #recordDialog menu {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    padding-right: 14px;
    padding-left: 14px;
  }

  /* Dashboard móvel: leitura em poucos segundos, com menos altura consumida
     e sem duplicar a busca que já existe na navegação inferior. */
  #dashboard .premium-cockpit-header {
    min-height: 0;
    margin: 0 0 8px;
    padding: 12px 14px;
    border-radius: 15px;
  }
  #dashboard .premium-cockpit-header .cmdk-trigger { display: none; }
  #dashboard .premium-cockpit-greeting {
    font-size: 20px;
    line-height: 1.15;
  }
  #dashboard .premium-cockpit-date { font-size: 11px; }
  #dashboard .premium-summary-section { gap: 6px; }
  #dashboard .premium-summary-head {
    min-height: 18px;
    padding-inline: 2px;
  }
  #dashboard .premium-summary-head small { display: none; }
  #dashboard .premium-summary-grid {
    gap: 8px;
    margin-right: -12px;
    padding: 1px 12px 7px 1px;
    scrollbar-width: none;
  }
  #dashboard .premium-summary-grid::-webkit-scrollbar { display: none; }
  #dashboard .premium-summary-card {
    flex-basis: 72%;
    min-height: 86px;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
  }
  #dashboard .premium-summary-icon {
    width: 38px;
    height: 38px;
  }
  #dashboard .premium-summary-copy strong {
    font-size: 25px;
    line-height: 1;
  }
  #dashboard .premium-summary-copy small {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.2;
  }
  #dashboard .premium-summary-arrow { width: 26px; height: 26px; }

  #dashboard .dashboard-group > h2 {
    margin-bottom: 7px;
    font-size: 12px;
  }
  #dashboard .premium-feed { gap: 7px; }
  #dashboard .premium-feed-label {
    margin: 5px 2px 0;
    font-size: 9px;
    line-height: 1.25;
  }
  #dashboard .premium-feed-item {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 58px;
    padding: 8px 10px 8px 13px;
  }
  #dashboard .premium-feed-count {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  #dashboard .premium-feed-copy strong {
    font-size: 12px;
    line-height: 1.25;
  }
  #dashboard .premium-feed-copy small {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.3;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  #dashboard .premium-feed-action {
    grid-column: 3;
    align-self: center;
    justify-self: end;
    font-size: 10px;
  }

  #dashboard .premium-routines-grid { gap: 7px; }
  #dashboard .premium-routine-card {
    min-height: 56px;
    padding: 8px 9px 8px 11px;
  }
  #dashboard .premium-routine-name {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.25;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  #dashboard .premium-routine-fill {
    min-height: 42px;
    padding: 7px 10px;
  }
  #dashboard .premium-routine-more {
    width: 100%;
    min-height: 44px;
  }
  #dashboard .premium-auto-grid {
    gap: 8px;
    margin-right: -12px;
    padding-right: 12px;
    scrollbar-width: none;
  }
  #dashboard .premium-auto-grid::-webkit-scrollbar { display: none; }
  #dashboard .premium-auto-kpi {
    flex-basis: 66%;
    min-height: 92px;
    padding: 11px 12px;
  }

  /* Estoque com uma mão: quatro ações sem rolagem lateral e leitores em
     formato de folha inferior, com entrada/câmera sempre alcançáveis. */
  .inventory-flow {
    gap: 9px;
    padding: 11px;
  }
  .inventory-flow-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    padding: 0;
  }
  .inventory-flow-arrow { display: none; }
  #records .inventory-flow-step {
    min-width: 0;
    min-height: 70px;
    padding: 9px 10px;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
  }
  .inventory-flow-number {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
  }
  .inventory-flow-step strong {
    font-size: 11px;
    line-height: 1.2;
  }
  .inventory-flow-step small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .inventory-flow-report {
    min-height: 48px;
    border-radius: 12px;
  }
  .inventory-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .inventory-kpi {
    min-height: 82px;
    padding: 10px 12px;
  }

  #scanBaixaDialog,
  #scanInUseDialog {
    width: calc(100vw - 10px) !important;
    max-width: none !important;
    max-height: calc(100dvh - 8px);
    margin: auto 0 0;
    overflow: auto;
    border-radius: 18px 18px 0 0 !important;
  }
  #scanBaixaDialog > div,
  #scanInUseDialog > div {
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #scanBaixaDialog h3,
  #scanInUseDialog h3 {
    font-size: 19px;
    line-height: 1.2;
  }
  #scanBaixaDialog #sbCode,
  #scanInUseDialog #iuCode {
    min-width: 0;
    min-height: 52px;
    font-size: 16px !important;
  }
  #scanBaixaDialog [data-sb-camera],
  #scanInUseDialog [data-iu-camera] {
    min-width: 92px;
    min-height: 52px;
  }
  #scanBaixaDialog [data-sb-close],
  #scanInUseDialog [data-iu-close] {
    width: 100%;
    min-height: 48px;
  }
  #sbLot article > div[style*="display:flex"],
  #iuLot article > div[style*="display:flex"] {
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: stretch !important;
    gap: 10px !important;
  }
  #sbLot article > div[style*="display:flex"] > div,
  #iuLot article > div[style*="display:flex"] > div {
    width: auto !important;
    min-width: 0 !important;
  }
  #sbLot input,
  #sbLot select,
  #iuLot input,
  #iuLot select {
    min-height: 48px;
    font-size: 16px !important;
  }
  #sbLot [data-sb-confirm],
  #iuLot [data-iu-confirm] {
    width: 100%;
    min-height: 50px;
  }
}

@media (max-width: 340px) {
  .inventory-flow-steps,
  .inventory-overview {
    grid-template-columns: 1fr;
  }
}

/* Estoque em notebooks: preserva o nome completo das colunas e restringe a
   rolagem lateral ao quadro da tabela. A coluna de ações continua fixa. */
@media (min-width: 721px) and (max-width: 1366px) {
  .inventory-quick-filters {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
  .inventory-clear-filters {
    width: max-content;
  }
  #records #recordsTable:has(.inventory-balance-table) {
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
  #records .inventory-balance-table {
    width: 100%;
    min-width: 1160px;
    table-layout: fixed;
  }
  #records .inventory-balance-table th,
  #records .inventory-balance-table td {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #records .inventory-balance-table th:nth-child(1) { width: 70px; }
  #records .inventory-balance-table th:nth-child(2) { width: 150px; }
  #records .inventory-balance-table th:nth-child(3) { width: 100px; }
  #records .inventory-balance-table th:nth-child(4) { width: 105px; }
  #records .inventory-balance-table th:nth-child(5) { width: 105px; }
  #records .inventory-balance-table th:nth-child(6) { width: 120px; }
  #records .inventory-balance-table th:nth-child(7) { width: 105px; }
  #records .inventory-balance-table th:nth-child(8) { width: 88px; }
  #records .inventory-balance-table th:nth-child(9) { width: 65px; }
  #records .inventory-balance-table th:nth-child(10) { width: 68px; }
  #records .inventory-balance-table th:nth-child(11) { width: 180px; }

  #records .inventory-balance-table th:nth-child(8),
  #records .inventory-balance-table th:nth-child(9),
  #records .inventory-balance-table th:nth-child(10),
  #records .inventory-balance-table td:nth-child(8),
  #records .inventory-balance-table td:nth-child(9),
  #records .inventory-balance-table td:nth-child(10) {
    text-align: right;
  }
  #records .inventory-balance-table td:nth-child(2) {
    white-space: normal;
    line-height: 1.35;
  }
  #records .inventory-balance-table th:last-child,
  #records .inventory-balance-table td:last-child {
    right: 0;
    width: 180px;
    min-width: 180px;
  }
  #records .inventory-balance-table .inv-actions-bar {
    justify-content: flex-end;
  }
}

/* Notebooks largos: os cinco filtros cabem em uma única linha. O ganho de
   altura volta para a tabela, que é a área principal de trabalho. */
@media (min-width: 1100px) and (max-width: 1366px) {
  .inventory-quick-filters {
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 7px;
  }
  .inventory-quick-filters label {
    gap: 3px;
  }
  .inventory-quick-filters label > span {
    font-size: 9px;
  }
  .inventory-quick-filters select,
  .inventory-quick-filters input,
  .inventory-clear-filters {
    min-height: 36px;
  }
  .inventory-quick-filters select,
  .inventory-quick-filters input {
    font-size: 11.5px;
  }
  .inventory-clear-filters {
    padding-inline: 10px;
    font-size: 11px;
  }
  .inventory-list-heading {
    padding-block: 5px 6px;
  }
}

/* Feed "Precisa de você hoje": o card abre a aba; o "Já vi" ADIA por 7 dias.
   Botão discreto de propósito — adiar é exceção, resolver é a regra. */
.premium-feed-row { display: flex; align-items: stretch; gap: 8px; }
.premium-feed-row > .premium-feed-item { flex: 1; min-width: 0; }
.premium-feed-snooze {
  flex: 0 0 auto; align-self: center;
  background: transparent; border: 1px solid var(--line);
  color: var(--muted); border-radius: 8px;
  padding: 7px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.premium-feed-snooze:hover { background: #f1f5f9; color: var(--ink); }