/* Portal do VidaServidor.REP-P — simples, legível, com tema claro e escuro. */
:root {
  --rp-fundo: #f6f7f9;
  --rp-cartao: #ffffff;
  --rp-texto: #1d232b;
  --rp-suave: #5b6673;
  --rp-borda: #d9dee4;
  --rp-marca: #1f5fa8;
  --rp-marca-texto: #ffffff;
  --rp-aviso-fundo: #fff7e0;
  --rp-aviso-texto: #6b4e00;
  --rp-erro-fundo: #fdecec;
  --rp-erro-texto: #8a1c1c;
  --rp-ok-fundo: #e8f5ec;
  --rp-ok-texto: #1d5b2f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --rp-fundo: #12161b;
    --rp-cartao: #1b2128;
    --rp-texto: #e6e9ed;
    --rp-suave: #9aa4b0;
    --rp-borda: #2e3742;
    --rp-marca: #5b9be0;
    --rp-marca-texto: #0d1117;
    --rp-aviso-fundo: #3a3016;
    --rp-aviso-texto: #f3d98a;
    --rp-erro-fundo: #3d1d1d;
    --rp-erro-texto: #f4b4b4;
    --rp-ok-fundo: #1b3324;
    --rp-ok-texto: #a6e3b6;
  }
}
* { box-sizing: border-box; }
a { color: var(--rp-marca); }
body { margin: 0; background: var(--rp-fundo); color: var(--rp-texto); font: 16px/1.5 system-ui, "Segoe UI", Roboto, sans-serif; }
header { background: var(--rp-cartao); border-bottom: 1px solid var(--rp-borda); padding: 12px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
header strong { font-size: 1.05rem; }
header .direita { margin-left: auto; color: var(--rp-suave); font-size: .9rem; }
main { max-width: 920px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.4rem; margin: 8px 0 16px; }
h2 { font-size: 1.1rem; margin: 0 0 12px; }
.cartao { background: var(--rp-cartao); border: 1px solid var(--rp-borda); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.suave { color: var(--rp-suave); font-size: .92rem; }
label { display: block; font-size: .9rem; margin: 8px 0 4px; color: var(--rp-suave); }
input, select { width: 100%; padding: 8px 10px; border: 1px solid var(--rp-borda); border-radius: 6px; background: var(--rp-fundo); color: var(--rp-texto); font: inherit; }
.linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
button { margin-top: 12px; padding: 9px 16px; border: 0; border-radius: 6px; background: var(--rp-marca); color: var(--rp-marca-texto); font: inherit; font-weight: 600; cursor: pointer; }
button.secundario { background: transparent; color: var(--rp-marca); border: 1px solid var(--rp-marca); }
.aviso, .erro, .ok { padding: 10px 12px; border-radius: 6px; margin: 0 0 16px; }
.aviso { background: var(--rp-aviso-fundo); color: var(--rp-aviso-texto); }
.erro { background: var(--rp-erro-fundo); color: var(--rp-erro-texto); }
.ok { background: var(--rp-ok-fundo); color: var(--rp-ok-texto); word-break: break-all; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rp-borda); }
.rolagem { overflow-x: auto; }
code { font-size: .88rem; }