/* AS TELAS QUE RODAM FORA DO PAINEL -- 09/09/2026.
 *
 * Instalar (`/install/`), primeiro acesso (`/install/setup.php`) e atualizar
 * (`/update/`). As tres sao a PRIMEIRA coisa que o membro ve do produto, e ate
 * aqui eram Arial sobre um retangulo branco -- pareciam a pagina de erro de
 * outro sistema. Agora usam a mesma escada de cinzas, a mesma cor de marca, a
 * mesma letra e o mesmo cabecalho em faixa escura do painel.
 *
 * POR QUE UMA FOLHA PROPRIA, E NAO painel.css: essas paginas rodam quando
 * ainda nao ha painel -- sem sessao, sem config, as vezes sem banco. Elas nao
 * carregam Bootstrap nem o casco, entao o pouco de que precisam mora aqui, e o
 * VOCABULARIO E O QUE OS TRES ARQUIVOS JA USAVAM (.container, .msg, .grid,
 * .section, .actions, .status-*, .card, .summary). Trocar a folha nao pediu
 * reescrever as telas.
 *
 * Nao ha tema escuro aqui de proposito: quem esta instalando nao tem
 * preferencia gravada em lugar nenhum ainda.
 */

/* As letras vem de casa, como no login: estas telas precisam abrir na rede da
   loja, atras do proxy que ela tiver, e a CSP do painel nao admite recurso
   externo (public/.htaccess: font-src 'self' data:). */
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
}

:root {
  --marca: #00697f;
  --marca-escura: #004d5d;
  --marca-clara: #02c8f0;

  --grafite-fundo: #101010;
  --grafite: #1a1a1a;
  --grafite-borda: #2d2d2d;
  --grafite-texto: #e3e3e3;
  --grafite-fraco: #969696;

  --papel: #f4f4f4;
  --superficie: #ffffff;
  --texto: #2d2d2d;
  --texto-fraco: #6e6e6e;
  --borda: #e3e3e3;

  --ok: #1f8a5b;
  --ok-fundo: #e4f3ec;
  --atencao: #b06a00;
  --atencao-fundo: #fbf0dd;
  --erro: #c23b32;
  --erro-fundo: #f9e5e4;

  --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1rem;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

/* A folha branca. O `.container` ja envolvia a pagina inteira nas tres telas,
   entao virar a folha do produto foi so trocar a tinta. */
.container {
  max-width: 62rem;
  margin: 2rem auto 3rem;
  padding: 0 1.5rem 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 1rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .07);
}

/* O CABECALHO EM FAIXA ESCURA, que e a assinatura do painel. Sangra ate a
   borda da folha pelas margens negativas -- o `.container` tem 1.5rem de
   respiro, e a faixa desconta os dois lados para encostar no canto arredondado. */
.topo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 -1.5rem 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--grafite);
  color: var(--grafite-texto);
  border-radius: 1rem 1rem 0 0;
}
.topo img { width: 46px; height: 46px; flex: none; }
.topo .dizer { min-width: 0; flex: 1; }
.topo h1 {
  margin: 0;
  font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--grafite-texto);
}
.topo p, .topo .subtitle {
  margin: .25rem 0 0;
  color: var(--grafite-fraco);
  font-size: .87rem; line-height: 1.45;
}
.topo .etapa {
  flex: none;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(2, 200, 240, .14);
  border: 1px solid rgba(2, 200, 240, .3);
  color: var(--marca-clara);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

h1 { margin: 0 0 .2rem; font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
h2 { margin: 1.6rem 0 .6rem; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
.subtitle { margin: 0 0 1rem; color: var(--texto-fraco); font-size: .9rem; }
p { line-height: 1.55; }

/* -------------------------------------------------------------- recados -- */
/* Faixa de cor a esquerda em vez de moldura inteira: e como o painel avisa. */
.msg {
  margin: .8rem 0;
  padding: .7rem .9rem;
  border-radius: .7rem;
  border: 1px solid var(--borda);
  border-left: .28rem solid var(--texto-fraco);
  background: var(--papel);
  font-size: .9rem; line-height: 1.5;
}
.msg-ok { background: var(--ok-fundo); border-color: #c7e4d6; border-left-color: var(--ok); color: #14563a; }
.msg-warn { background: var(--atencao-fundo); border-color: #efdcb8; border-left-color: var(--atencao); color: #7a4900; }
.msg-err { background: var(--erro-fundo); border-color: #eec9c6; border-left-color: var(--erro); color: #8d2823; }
.msg-info { background: #e6f2f5; border-color: #b8dde5; border-left-color: var(--marca); color: #00566a; }

/* --------------------------------------------------------------- blocos -- */
.section {
  margin-bottom: 1rem;
  padding: 1.1rem 1.15rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: .9rem;
}
.section h2 { margin-top: 0; }

/* Os quadrinhos de numero do /update, no formato dos indicadores do painel. */
.summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0; }
.summary .card {
  padding: .85rem .95rem;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: .8rem;
}
.summary .card small {
  display: block; margin-bottom: .25rem;
  color: var(--texto-fraco);
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.summary .card strong { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }

/* --------------------------------------------------------------- tabela -- */
/* Sem grade: linha separadora e cabecalho em caixa alta, igual a `.lista`. */
table { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .88rem; }
th, td { border: 0; border-bottom: 1px solid var(--borda); padding: .6rem .7rem; text-align: left; }
thead th {
  color: var(--texto-fraco);
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--borda);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--papel); }
td code, .mono { font-family: var(--mono); font-size: .84em; }

/* O estado do item de diagnostico vira pilula, e nao celula pintada de ponta
   a ponta: pintar a celula inteira dava a tabela a leitura de planilha. */
.status-pass, .status-warn, .status-fail {
  display: inline-block;
  padding: .18rem .6rem;
  border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
}
.status-pass { color: #14563a; background: var(--ok-fundo); }
.status-warn { color: #7a4900; background: var(--atencao-fundo); }
.status-fail { color: #8d2823; background: var(--erro-fundo); }

/* ------------------------------------------------------------ formulario -- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
label { display: block; margin-bottom: .3rem; font-size: .82rem; font-weight: 600; color: var(--texto); }
input, select {
  width: 100%; height: 2.6rem;
  padding: 0 .75rem;
  border: 1.5px solid var(--borda); border-radius: .6rem;
  background: #fff; color: var(--texto);
  font: inherit; font-size: .95rem;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 4px rgba(0, 105, 127, .18);
}
.hint { display: block; margin-top: .35rem; color: var(--texto-fraco); font-size: .8rem; line-height: 1.45; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.1rem; }
button, .entrar {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.1rem;
  border: 0; border-radius: .6rem;
  font: inherit; font-size: .92rem; font-weight: 700;
  color: #fff; background: var(--marca);
  text-decoration: none; cursor: pointer;
  transition: background .15s;
}
button:hover, .entrar:hover { background: var(--marca-escura); }
.btn-primary { background: var(--marca); }
.btn-secondary { background: #fff; color: var(--texto); border: 1.5px solid var(--borda); }
.btn-secondary:hover { background: var(--papel); }
.btn-warning { background: var(--atencao); }
.btn-warning:hover { background: #8d5400; }

ul { margin: .5rem 0 0; padding-left: 1.2rem; font-size: .9rem; line-height: 1.6; }
li { margin-bottom: .2rem; }
code {
  padding: .1rem .35rem;
  border-radius: .3rem;
  background: var(--papel);
  border: 1px solid var(--borda);
  font-family: var(--mono); font-size: .84em;
}

.rodape {
  margin-top: 1.5rem; padding-top: .9rem;
  border-top: 1px solid var(--borda);
  color: var(--texto-fraco);
  font-family: var(--mono); font-size: .74rem;
}

@media (max-width: 52rem) {
  .grid { grid-template-columns: 1fr; }
  .summary { grid-template-columns: 1fr 1fr; }
  .topo { flex-wrap: wrap; }
  .topo .etapa { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  button, .entrar { transition: none; }
}