/* Tokens da Batcave (moto-g7/Scripts/servidor/shell/src/batcave.css), sem Tailwind. Saira: OFL-saira.txt. Ícones Lucide: LICENSE-lucide.txt. */
@font-face {
  font-family: "Saira";
  src: url("saira-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e6: 24px; --e8: 32px; --e12: 48px;
  --raio-botao: 2px; --raio-cartao: 6px; --raio-balao: 14px;
  --dur-rapido: 120ms; --dur-medio: 240ms; --dur-entrada: 400ms;
  --curva-entrar: cubic-bezier(.2, .8, .2, 1);
  --menu-largura: 248px; --menu-recolhido: 72px;
  --lateral: max(16px, env(safe-area-inset-left));
}

:root, :root[data-tema="caverna"] {
  color-scheme: dark;
  --fundo: #161D24;
  --superficie: #1F2830;
  --linha: #2C3843;
  --borda-campo: #6B7884;
  --texto: #C9D3DA;
  --texto-2: #8794A0;
  --sinal: #F2B33D;
  --sobre-sinal: #161D24;
  --dado: #6FD3E0;
  --ok: #4FC59A;
  --ok-ponto: #4FC59A;
  --aviso: #F0782E;
  --aviso-ponto: #F0782E;
  --erro: #F2676B;
  --erro-ponto: #F2676B;
}

:root[data-tema="mansao"] {
  color-scheme: light;
  --fundo: #FAF8DE;
  --superficie: #FFFDF0;
  --linha: #E4E0BF;
  --borda-campo: #8F8A78;
  --texto: #2B2A22;
  --texto-2: #66634F;
  --sinal: #9A6508;
  --sobre-sinal: #FFFDF0;
  --dado: #17707C;
  --ok: #1E7A52;
  --ok-ponto: #2F9E6E;
  --aviso: #C2410C;
  --aviso-ponto: #C2410C;
  --erro: #C62828;
  --erro-ponto: #C62828;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--fundo); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Saira", system-ui, sans-serif;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; }
p { margin: 0; max-width: 72ch; }
h1, h2 { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:where(a, button, .cartao) { position: relative; }
:where(a, button):focus-visible { outline: none; }
:where(a, button):focus-visible::after {
  content: "";
  position: absolute;
  inset: -4px;
  pointer-events: none;
  background:
    linear-gradient(var(--sinal), var(--sinal)) top left / 8px 2px no-repeat,
    linear-gradient(var(--sinal), var(--sinal)) top left / 2px 8px no-repeat,
    linear-gradient(var(--sinal), var(--sinal)) top right / 8px 2px no-repeat,
    linear-gradient(var(--sinal), var(--sinal)) top right / 2px 8px no-repeat,
    linear-gradient(var(--sinal), var(--sinal)) bottom left / 8px 2px no-repeat,
    linear-gradient(var(--sinal), var(--sinal)) bottom left / 2px 8px no-repeat,
    linear-gradient(var(--sinal), var(--sinal)) bottom right / 8px 2px no-repeat,
    linear-gradient(var(--sinal), var(--sinal)) bottom right / 2px 8px no-repeat;
}
:where(input, select, textarea):focus-visible { outline: 2px solid var(--sinal); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.icone {
  width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

.titulo-modulo { font-size: 28px; line-height: 32px; font-weight: 650; font-stretch: 112%; }
.secao { font-size: 18px; line-height: 24px; font-weight: 600; }
.legenda { font-size: 12px; line-height: 16px; font-weight: 450; color: var(--texto-2); }
.legenda a { color: var(--texto); }

.marca { display: inline-flex; align-items: center; gap: var(--e3); text-decoration: none; }
.selo {
  display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
  border: 1.5px solid var(--sinal); border-radius: var(--raio-botao);
  color: var(--sinal); font-size: 12px; line-height: 16px; font-weight: 700; font-stretch: 112%;
}
.marca-nome { font-size: 20px; line-height: 24px; font-weight: 700; font-stretch: 112%; }

.botao, .botao-icone {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 44px; border-radius: var(--raio-botao); font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: background var(--dur-rapido) var(--curva-entrar), color var(--dur-rapido) var(--curva-entrar);
}
.botao { padding: 0 var(--e4); background: transparent; color: var(--texto); border: 1px solid var(--borda-campo); }
.botao:hover { background: var(--superficie); }
.botao-sinal { background: var(--sinal); color: var(--sobre-sinal); border-color: var(--sinal); }
.botao-sinal:hover { background: var(--sinal); }
.botao-perigo { color: var(--erro); border-color: var(--erro); }
.botao-icone { width: 44px; padding: 0; background: transparent; border: 0; color: var(--texto-2); }
.botao-icone:hover { color: var(--texto); }
.botao-icone .icone { width: 20px; height: 20px; }

.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-cartao); padding: var(--e4); }

.formulario { display: flex; flex-direction: column; gap: var(--e4); align-items: flex-start; }
.campo { display: flex; flex-direction: column; gap: var(--e1); width: 100%; max-width: 480px; }
.campo-rotulo { font-weight: 500; }
.campo input {
  min-height: 44px; padding: 0 var(--e3); width: 100%;
  font: inherit; color: var(--texto); background: var(--fundo);
  border: 1px solid var(--borda-campo); border-radius: var(--raio-botao);
}
.campo input[type="file"] { padding: var(--e2) var(--e3); }
.campo input[readonly] { color: var(--dado); }
.campo-erro { font-size: 12px; line-height: 16px; font-weight: 450; color: var(--erro); }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }

.ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--texto-2); }
.n-ok { background: var(--ok-ponto); }
.n-aviso { background: var(--aviso-ponto); }
.n-erro { background: var(--erro-ponto); }
.estado { display: inline-flex; align-items: center; gap: var(--e2); white-space: nowrap; }
.aviso-ok, .aviso-erro { display: flex; align-items: center; gap: var(--e2); }
.aviso-erro { color: var(--erro); }
.etiqueta {
  display: inline-block; margin-left: var(--e2); padding: 0 var(--e2);
  border: 1px solid var(--sinal); border-radius: var(--raio-balao);
  color: var(--sinal); font-size: 12px; line-height: 16px; font-weight: 450;
}

.lista { display: flex; flex-direction: column; }
.lista-linha {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  padding: var(--e3) 0; border-bottom: 1px solid var(--linha);
}
.lista-linha:last-child { border-bottom: 0; }
.lista-texto { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }

.avatar {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 50%; object-fit: cover; border: 1px solid var(--linha);
}
.avatar-inicial { background: var(--linha); color: var(--texto); font-size: 18px; line-height: 24px; font-weight: 600; }
.avatar-grande { width: 96px; height: 96px; font-size: 40px; line-height: 44px; }

/* Casca: celular primeiro (barra no topo e menu em balão), barra lateral a partir de 1024 px. */
.app { min-height: 100vh; }
.topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--lateral); padding-top: max(var(--e2), env(safe-area-inset-top));
  background: var(--fundo); border-bottom: 1px solid var(--linha);
}
.topo .botao-icone { margin-left: calc(-1 * var(--e3)); }

.menu {
  position: fixed; z-index: 20; top: 64px; left: var(--lateral);
  width: min(320px, calc(100vw - 2 * var(--lateral)));
  max-height: calc(100vh - 80px); overflow-y: auto;
  display: none; flex-direction: column; gap: var(--e2);
  padding: var(--e3); background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--raio-cartao);
}
.menu.aberto { display: flex; }
@media (max-width: 1023px) {
  .app:has(.menu.aberto) .conteudo, .app:has(.menu.aberto) .topo .marca { opacity: .35; }
}
@media (prefers-reduced-motion: no-preference) {
  .menu.aberto { animation: abrir var(--dur-medio) var(--curva-entrar); }
}
@keyframes abrir { from { opacity: 0; transform: translateY(-8px); } }

.menu-marca { display: none; }
.perfil {
  display: flex; align-items: center; gap: var(--e3); padding: var(--e2);
  text-decoration: none; border-bottom: 1px solid var(--linha); padding-bottom: var(--e3);
}
.perfil-texto { display: flex; flex-direction: column; min-width: 0; }
.perfil-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-itens { display: flex; flex-direction: column; }
.menu-fim { border-top: 1px solid var(--linha); padding-top: var(--e2); }
.menu-itens form { margin: 0; }
.item {
  display: flex; align-items: center; gap: var(--e3); width: 100%; min-height: 44px;
  padding: 0 var(--e3); border: 0; border-left: 2px solid transparent; background: transparent;
  color: var(--texto); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.item:hover { background: var(--fundo); }
.item[aria-current="page"] { color: var(--sinal); font-weight: 600; border-left-color: var(--sinal); }
.item-sair { color: var(--texto-2); }

.menu-tema { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e2) var(--e3); border-top: 1px solid var(--linha); }
.segmentado { display: inline-flex; border: 1px solid var(--borda-campo); border-radius: var(--raio-botao); }
.segmentado button {
  min-height: 36px; padding: 0 var(--e3); border: 0; background: transparent; color: var(--texto-2);
  font: inherit; font-size: 12px; line-height: 16px; font-weight: 450; cursor: pointer;
}
.segmentado button[aria-pressed="true"] { background: var(--sinal); color: var(--sobre-sinal); font-weight: 600; }

.conteudo {
  display: flex; flex-direction: column; gap: var(--e8);
  width: 100%; max-width: 1200px; margin: 0 auto;
  padding: var(--e6) var(--lateral) var(--e12);
}
.cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); }
.secao-bloco { display: flex; flex-direction: column; gap: var(--e4); }
.vazio { display: flex; flex-direction: column; gap: var(--e2); }
.perfil-grande { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e6); }
.destaque { border-color: var(--sinal); }
.grade-campos { display: grid; grid-template-columns: 1fr; gap: var(--e6) var(--e4); width: 100%; }

.entrada { min-height: 100vh; display: grid; place-items: center; padding: var(--e6) var(--lateral); }
.entrada-cartao { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--e6); padding: var(--e6); }
.entrada-cartao .botao-sinal { width: 100%; }
.link-legenda { font-size: 12px; line-height: 16px; color: var(--texto-2); min-height: 44px; display: inline-flex; align-items: center; }

@media (min-width: 768px) {
  :root { --lateral: max(24px, env(safe-area-inset-left)); }
  .grade-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .app { display: grid; grid-template-columns: var(--menu-largura) minmax(0, 1fr); }
  :root[data-menu="recolhido"] .app { grid-template-columns: var(--menu-recolhido) minmax(0, 1fr); }
  .topo { display: none; }
  .menu, .menu.aberto {
    position: sticky; top: 0; left: auto; z-index: auto;
    display: flex; width: auto; height: 100vh; max-height: none;
    padding: var(--e4) var(--e3); border: 0; border-right: 1px solid var(--linha); border-radius: 0;
    animation: none;
  }
  .menu-tema { flex-direction: column; align-items: stretch; gap: var(--e2); }
  .menu-tema .segmentado { display: flex; }
  .menu-tema .segmentado button { flex: 1; padding: 0 var(--e2); }
  .menu-marca { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); padding: 0 0 var(--e2) var(--e1); }
  .conteudo { padding-top: var(--e8); }
  .grade-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  :root[data-menu="recolhido"] .rotulo {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  :root[data-menu="recolhido"] .menu-marca { flex-direction: column; padding-left: 0; }
  :root[data-menu="recolhido"] .menu-tema { display: none; }
  :root[data-menu="recolhido"] .perfil { justify-content: center; padding: var(--e2) 0 var(--e3); }
  :root[data-menu="recolhido"] .item { justify-content: center; padding: 0; }
}