/* Shell da plataforma. Usa os tokens (css/tokens.css); o tema da empresa sobrescreve só cores. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fonte); font-size: var(--fs-16); line-height: var(--entrelinha);
  color: var(--cor-texto); background: var(--cor-fundo); min-height: 100vh; }
.pular { position: absolute; left: -9999px; top: 0; }
.pular:focus { left: 8px; top: 8px; z-index: 10; min-height: 44px; display: inline-flex; align-items: center; background: var(--cor-superficie); color: var(--cor-texto);
  padding: 10px 14px; border-radius: var(--raio); }
:focus-visible { outline: var(--foco-contorno); outline-offset: var(--foco-offset); box-shadow: var(--foco-anel); }

.selo-demo { background: #7a4a00; color: #ffffff; font-weight: 700; font-size: var(--fs-14); letter-spacing: var(--tracking-rotulo);
  text-align: center; padding: 6px 12px; }
.selo-tela { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: var(--raio-pilula);
  border: 1px solid var(--cor-alerta-borda); color: var(--cor-alerta); background: #fff7e8; font-size: var(--fs-14); font-weight: 600; }

.centro { min-height: calc(100vh - 40px); display: grid; place-items: center; padding: 16px; }
.cartao { background: var(--cor-superficie); border: 1px solid var(--cor-linha); border-radius: var(--raio-lg);
  box-shadow: var(--sombra-1); padding: 20px; width: 100%; max-width: 960px; }
.login { max-width: 400px; display: grid; gap: 8px; }
:where(h1:not(.sup-no-shell *)) { font-size: var(--fs-22); margin: 0 0 8px; line-height: 1.25; }
:where(p:not(.sup-no-shell *)) { margin: 0 0 8px; }
.suave { color: var(--cor-texto-suave); }
.erro { color: var(--cor-perigo); background: #fdecea; border: 1px solid #f3b9b4; border-radius: var(--raio); padding: 8px 12px; font-weight: 600; }
.aviso { color: var(--cor-cabecalho-texto); margin: 0; }
:where(label:not(.sup-no-shell *)) { font-weight: 600; font-size: var(--fs-14); }
:where(input, select):where(:not(.sup-no-shell *)) { font: inherit; color: var(--cor-texto); background: var(--cor-superficie); min-height: var(--toque-campo);
  border: 1px solid var(--cor-borda-campo); border-radius: var(--raio); padding: 8px 12px; width: 100%; }
.btn { font: inherit; font-weight: 600; min-height: var(--toque-min); min-width: var(--toque-min); padding: 8px 16px; border-radius: var(--raio);
  border: 1px solid var(--cor-acento-borda); background: var(--cor-superficie); color: var(--cor-texto); cursor: pointer; }
.btn-primario { background: var(--cor-acento); color: var(--cor-sobre-acento); border-color: var(--cor-acento); margin-top: 8px; }
.btn:disabled { opacity: .7; cursor: progress; }

.cabecalho { background: var(--cor-cabecalho); color: var(--cor-cabecalho-texto); padding: 12px 16px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: end; justify-content: space-between; }
.marca { display: grid; min-width: 0; }
.marca-nome { font-weight: 700; font-size: var(--fs-18); }
.marca-usuario { font-size: var(--fs-14); color: var(--cor-cabecalho-texto-2); overflow-wrap: anywhere; }
.seletores { display: flex; flex-wrap: wrap; gap: 12px; flex: 1 1 320px; }
.seletores .campo { display: grid; gap: 4px; flex: 1 1 200px; min-width: 0; }
.seletores label { color: var(--cor-cabecalho-texto); }
.btn-sair { background: transparent; color: var(--cor-cabecalho-texto); border-color: var(--cor-cabecalho-texto); }

.menu { background: var(--cor-superficie); border-bottom: 1px solid var(--cor-linha); padding: 8px 16px; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.menu-item { font: inherit; font-weight: 600; min-height: var(--toque-min); padding: 8px 14px; border-radius: var(--raio-pilula);
  border: 1px solid var(--cor-linha); background: var(--cor-superficie-2); color: var(--cor-texto); cursor: pointer; }
.menu-item[aria-current="page"] { background: var(--cor-primaria); color: var(--cor-sobre-acento); border-color: var(--cor-primaria); }
.conteudo { padding: 16px; display: grid; justify-items: center; }
.conteudo:focus { outline: none; }
.carregando { padding: 24px; text-align: center; }
@media (min-width: 900px) { .cabecalho { padding: 12px 24px; } .menu { padding: 8px 24px; } .conteudo { padding: 24px; } }

/* Área de módulo com telas próprias (Suprimentos/Estoque): o módulo traz o CSS dele.
   As regras de elemento acima (h1, p, label, input, select) não entram lá (:not(.sup-no-shell *)). */
.conteudo-modulo { display: block; justify-items: normal; padding: 0; } /* Chrome aplica justify-items também em bloco */
.modulo-nivel { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--cor-linha); background: var(--cor-superficie); font-size: var(--fs-14); }
@media (min-width: 900px) { .modulo-nivel { padding: 8px 24px; } }

/* Login: "Esqueci minha senha" / nova senha (ADR-SUP-06) */
.btn-link { background: transparent; border-color: transparent; color: var(--cor-acento); text-decoration: underline; text-underline-offset: 3px;
  justify-self: start; padding-inline: 4px; }
.btn-link:hover { text-decoration-thickness: 2px; }
.ok { color: var(--cor-ok); background: var(--cor-ok-fundo); border: 1px solid var(--cor-ok); border-radius: var(--raio); padding: 8px 12px; font-weight: 600; }
.login .dica { font-size: var(--fs-14); margin: 0; }
/* Acessos: menu próprio do admin, separado dos módulos. */
.menu-item-admin { border-style: dashed; }
@media (min-width: 900px) { .menu li:has(.menu-item-admin) { margin-left: auto; } .menu ul { width: 100%; } }