/* ============================================================================
 * (c) QUANTICOTEC
 * SISTEMA : SuitRouter - Consulta Juridica por IA
 * PROGRAMA: _assets/sr.css
 * FUNCAO  : Tema visual. Paleta portada do Omnirouter (web/app/globals.css).
 * Criacao : 06/08/2026
 * ----------------------------------------------------------------------------
 * Versao 1.0 - 06/08/2026 - Criacao inicial
 * ----------------------------------------------------------------------------
 * Servido localmente, sem CDN: cada requisicao a um CDN externo informaria a
 * um terceiro que alguem esta acessando o acervo, e uma queda do CDN deixaria
 * o sistema sem interface. Para autos sob segredo de justica nao compensa.
 * ========================================================================== */

:root {
  --fundo: #f6f7f9;
  --superficie: #ffffff;
  --superficie-2: #f9fafb;
  --borda: #e3e6ea;
  --borda-forte: #d2d7dd;
  --texto: #14181d;
  --texto-2: #545c66;
  --texto-3: #838d99;
  /* Dois papeis, e nao um: --acento pinta superficie solida (botao primario) e
     o anel de foco; --acento-texto pinta link, enfase e borda de realce. O
     acento da marca e a propria cor do texto, entao usa-lo em link deixaria o
     link indistinguivel do paragrafo. (comentario original do Omnirouter) */
  --acento: #14181d;
  --acento-texto: #8f5f1d;
  --acento-contraste: #ffffff;
  --acento-fundo: #eff1f3;
  --sucesso: #17795e;
  --sucesso-fundo: #e9f6f1;
  --alerta: #9a6114;
  --alerta-fundo: #fdf3e5;
  --erro: #b3261e;
  --erro-fundo: #fdecea;
  --serie-1: #2f5bd7;
  --serie-2: #17795e;
  --serie-3: #c08329;
  --serie-4: #7a4fbd;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(20, 24, 29, 0.05), 0 1px 3px rgba(20, 24, 29, 0.04);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0f1216;
    --superficie: #171b21;
    --superficie-2: #1c2128;
    --borda: #272d35;
    --borda-forte: #343c46;
    --texto: #e9edf2;
    --texto-2: #a3adb9;
    --texto-3: #77828f;
    --acento: #e9edf2;
    --acento-texto: #d8a44f;
    --acento-contraste: #0f1216;
    --acento-fundo: #232931;
    --sucesso: #5cc9a7;
    --sucesso-fundo: #122a24;
    --alerta: #e0ab61;
    --alerta-fundo: #2c2113;
    --erro: #f28b82;
    --erro-fundo: #2d1a18;
    --serie-1: #7d9bf0;
    --serie-2: #5cc9a7;
    --serie-3: #e0ab61;
    --serie-4: #b18ce0;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* -- Layout de autenticacao: cartao centrado -------------------------------- */
.sr-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.sr-cartao {
  width: 100%;
  max-width: 400px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 32px;
}
.sr-marca {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.sr-escritorio {
  color: var(--texto-2);
  font-size: 13px;
  margin: 0 0 24px;
}

/* -- Formulario ------------------------------------------------------------- */
.sr-campo { margin-bottom: 16px; }

/* Dois arranjos sao aceitos, e o rotulo fica identico nos dois:
 *   <div class="sr-campo"><label for="x">Rotulo</label><input id="x"></div>
 *   <label class="sr-campo"><span>Rotulo</span><input></label>
 * O segundo dispensa o par for/id - o proprio label envolve o campo, entao
 * clicar no texto ja foca. Util em formulario com muitos campos, onde os ids
 * existiriam so para satisfazer o for. */
.sr-campo label,
.sr-campo > span {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-2);
  margin-bottom: 6px;
}
.sr-campo input[type="text"],
.sr-campo input[type="password"],
.sr-campo input[type="email"],
.sr-campo textarea,
.sr-campo select {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
  outline: none;
}
.sr-campo input:focus, .sr-campo textarea:focus, .sr-campo select:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-fundo);
}

/* Codigo de 6 digitos: fonte monoespacada e espacamento generoso, porque e
   digitado sob pressa, olhando do celular para a tela. */
.sr-codigo {
  font-family: var(--mono) !important;
  font-size: 22px !important;
  letter-spacing: 0.32em;
  text-align: center;
  padding: 12px !important;
}

.sr-btn {
  width: 100%;
  padding: 10px 16px;
  font: inherit;
  font-weight: 500;
  color: var(--acento-contraste);
  background: var(--acento);
  border: 1px solid var(--acento);
  border-radius: 8px;
  cursor: pointer;
}
.sr-btn:hover { opacity: 0.9; }
.sr-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sr-btn-sec {
  background: var(--superficie);
  color: var(--texto);
  border-color: var(--borda-forte);
}

.sr-link {
  color: var(--acento-texto);
  text-decoration: none;
  font-size: 13px;
}
.sr-link:hover { text-decoration: underline; }

/* -- Avisos ----------------------------------------------------------------- */
.sr-aviso {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
  border: 1px solid transparent;
}
.sr-erro    { background: var(--erro-fundo);    color: var(--erro);    border-color: var(--erro); }
.sr-ok      { background: var(--sucesso-fundo); color: var(--sucesso); border-color: var(--sucesso); }
.sr-alerta  { background: var(--alerta-fundo);  color: var(--alerta);  border-color: var(--alerta); }
.sr-info    { background: var(--acento-fundo);  color: var(--texto-2); border-color: var(--borda); }

/* -- Enrollment do MFA ------------------------------------------------------ */
.sr-qr {
  display: block;
  margin: 0 auto 12px;
  padding: 12px;
  background: #ffffff;   /* QR precisa de fundo claro mesmo no tema escuro */
  border-radius: 8px;
  border: 1px solid var(--borda);
}
.sr-segredo {
  font-family: var(--mono);
  font-size: 12px;
  word-break: break-all;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 8px;
  color: var(--texto-2);
  text-align: center;
}

/* Codigos de recuperacao: exibidos UMA vez. O visual de "documento a guardar"
   e proposital - o usuario precisa entender que aquilo nao volta. */
.sr-recuperacao {
  font-family: var(--mono);
  font-size: 14px;
  background: var(--superficie-2);
  border: 1px dashed var(--borda-forte);
  border-radius: 8px;
  padding: 16px;
  margin: 12px 0;
  columns: 2;
  column-gap: 16px;
  line-height: 2;
  text-align: center;
}

.sr-passos {
  font-size: 13px;
  color: var(--texto-2);
  padding-left: 18px;
  margin: 0 0 16px;
}
.sr-passos li { margin-bottom: 6px; }

.sr-rodape {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
  font-size: 12px;
  color: var(--texto-3);
  text-align: center;
}

.sr-sigilo {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--alerta-fundo);
  color: var(--alerta);
  border: 1px solid var(--alerta);
}