/* ZAPTEC — design tokens do Adobe Spectrum (spectrum.adobe.com)
   Paleta de acento: vermelho/laranja/roxo (tema comunicação/conectividade),
   mesmo padrão de tokens usado no TECFINANCE (fundo/superfície/tinta/acento). */

:root {
  /* Spectrum gray (tema claro) */
  --fundo: #FAFAFA;            /* gray-75 */
  --superficie: #FFFFFF;       /* gray-50 */
  --superficie-2: #F5F5F5;     /* gray-100 */
  --linha: #E1E1E1;            /* gray-300 */
  --linha-forte: #CACACA;      /* gray-400 */
  --tinta: #1B1B1B;            /* gray-900 */
  --tinta-2: #464646;          /* gray-700 */
  --tinta-3: #6E6E6E;          /* gray-600 */

  /* acento Spectrum purple (marca ZAPTEC) + apoio red/orange */
  --acento: #9256D9;           /* purple-400 */
  --acento-forte: #7A42C2;     /* purple-600 */
  --acento-suave: #F3E9FE;
  --secundario: #E34850;       /* red-400 */
  --terciario: #E68619;        /* orange-500 */

  /* status */
  --positivo: #2D9D78;         /* green-500 */
  --aviso: #E68619;            /* orange-500 */
  --critico: #E34850;          /* red-500 */

  --sombra: 0 1px 4px rgba(0,0,0,.08);
  --sombra-elevada: 0 20px 60px rgba(43,14,63,.35);
  --raio: 8px;
  --raio-grande: 16px;
  --fonte: adobe-clean, "Source Sans 3", "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #1B1B1B; --superficie: #252525; --superficie-2: #2F2F2F;
    --linha: #3E3E3E; --linha-forte: #4D4D4D;
    --tinta: #FFFFFF; --tinta-2: #D3D3D3; --tinta-3: #909090;
    --acento: #B680FF; --acento-forte: #C9A6FF; --acento-suave: #3A2A57;
    --secundario: #EC5B62; --terciario: #F29423;
    --positivo: #33AB84; --aviso: #F29423; --critico: #EC5B62;
    --sombra: 0 1px 4px rgba(0,0,0,.4);
  }
}
:root[data-theme="light"] {
  --fundo: #FAFAFA; --superficie: #FFFFFF; --superficie-2: #F5F5F5;
  --linha: #E1E1E1; --linha-forte: #CACACA;
  --tinta: #1B1B1B; --tinta-2: #464646; --tinta-3: #6E6E6E;
  --acento: #9256D9; --acento-forte: #7A42C2; --acento-suave: #F3E9FE;
  --secundario: #E34850; --terciario: #E68619;
  --positivo: #2D9D78; --aviso: #E68619; --critico: #E34850;
  --sombra: 0 1px 4px rgba(0,0,0,.08);
}
:root[data-theme="dark"] {
  --fundo: #1B1B1B; --superficie: #252525; --superficie-2: #2F2F2F;
  --linha: #3E3E3E; --linha-forte: #4D4D4D;
  --tinta: #FFFFFF; --tinta-2: #D3D3D3; --tinta-3: #909090;
  --acento: #B680FF; --acento-forte: #C9A6FF; --acento-suave: #3A2A57;
  --secundario: #EC5B62; --terciario: #F29423;
  --positivo: #33AB84; --aviso: #F29423; --critico: #EC5B62;
  --sombra: 0 1px 4px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
body {
  font-family: var(--fonte);
  background: var(--fundo);
  color: var(--tinta);
  margin: 0;
}
button, input, select { font: inherit; color: inherit; }

.spectrum-botao {
  background: var(--acento);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: var(--raio);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background .15s ease;
}
.spectrum-botao:hover { background: var(--acento-forte); }

.spectrum-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--tinta);
  font-size: 0.95rem;
}
.spectrum-input:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

.spectrum-cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

/* ---------------- casca do app: menu lateral fixo + conteúdo ---------------- */
.aplicacao { display: flex; min-height: 100vh; }

.lateral {
  width: 232px; flex: 0 0 232px;
  background: var(--superficie);
  border-right: 1px solid var(--linha);
  display: flex; flex-direction: column;
  height: 100vh; overflow-y: auto;
  position: sticky; top: 0;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 18px 16px; }
.marca-simbolo {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--terciario), var(--acento) 55%, var(--secundario));
  display: grid; place-items: center;
}
.marca-nome { font-weight: 700; letter-spacing: .3px; font-size: 15px; color: var(--tinta); }
.menu-grupo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--tinta-3); padding: 14px 16px 4px;
}
.menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; margin: 2px 8px;
  border-radius: 6px; text-decoration: none;
  color: var(--tinta-2); cursor: pointer; font-size: 0.9rem;
}
.menu-item:hover { background: var(--superficie-2); color: var(--tinta); }
.menu-item.ativo { background: var(--acento-suave); color: var(--acento-forte); font-weight: 600; }
.menu-icone { width: 18px; text-align: center; flex-shrink: 0; }
.lateral-rodape { margin-top: auto; padding: 10px 0 16px; border-top: 1px solid var(--linha); }

.conteudo-app { flex: 1; min-width: 0; height: 100vh; overflow-y: auto; }