/* ═══════════════════════════════════════════════════════════════════════════
   Casca do painel — src/telas/principal/uPrincipal.html
   .app-shell do design system: menu lateral (laboratórios) + topbar + conteúdo.
   ═══════════════════════════════════════════════════════════════════════ */

.principal { background: var(--color-bg); }

/* ── Menu lateral ─────────────────────────────────────────────────────── */
.principal-menu { gap: 2px; }

.principal-marca {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-divider);
}
.principal-marca-kicker {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-text-faint);
}
.principal-marca strong {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.principal-marca small { font-size: 12px; color: var(--color-text-muted); }

.menu-lab .menu-lab-sigla { font-weight: 600; letter-spacing: 0.02em; }
.menu-lab.is-pendente { color: var(--color-text-faint); }
.menu-lab .saude { gap: 0; }
.menu-esqueleto { height: 26px; margin: var(--space-1) var(--space-2); }

.counter.counter--alerta { background: var(--color-danger-100); color: var(--color-danger-700); }

.principal-menu-rodape {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4) var(--space-2) var(--space-2);
  border-top: 1px solid var(--color-divider);
}
.principal-menu-rodape .saude { font-size: 11px; font-weight: 500; color: var(--color-text-muted); }
.principal-menu-rodape .saude-ponto { color: inherit; }
.principal-menu-rodape .saude--no_prazo .saude-ponto { color: var(--color-success); }
.principal-menu-rodape .saude--atencao .saude-ponto { color: var(--color-accent-2); }
.principal-menu-rodape .saude--atrasado .saude-ponto { color: var(--color-danger); }

/* ── Topbar ───────────────────────────────────────────────────────────── */
.principal-selo { flex: none; }
.principal-separador { height: 20px; align-self: center; }

.principal-usuario { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.principal-usuario-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.principal-usuario-nome {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22ch;
}
.principal-usuario-papel { font-size: 11px; color: var(--color-text-faint); }

/* ── Conteúdo ─────────────────────────────────────────────────────────── */
.painel-conteudo { padding: var(--space-6) var(--space-8); }

@media (max-width: 1100px) {
  .painel-conteudo { padding: var(--space-5); }
  .principal-selo { display: none; }
}

@media (max-width: 860px) {
  .painel-conteudo { padding: var(--space-4); }
}

@media (max-width: 600px) {
  .principal-usuario-texto,
  .principal-separador { display: none; }
}