/* Painel de exposicao — instrumento, nao relatorio.
   A identidade e de bancada de medicao: monoespacada para todo dado, sans so
   para prosa. Acento em azul-aco fica separado das cores semanticas
   (verde/ambar/vermelho), que aqui significam severidade e nao decoracao. */

:root {
  --ground:    #F2F5F7;
  --surface:   #FFFFFF;
  --surface-2: #F7F9FB;
  --ink:       #0F151B;
  --ink-soft:  #55636F;
  --ink-faint: #8493A0;
  --rule:      #DCE3E9;
  --rule-soft: #EAEFF3;

  --accent:    #2C6E92;
  --accent-bg: #E7F0F5;

  --ok:        #2B7A66;
  --ok-bg:     #E2F0EC;
  --warn:      #8E6410;
  --warn-bg:   #F8EFDC;
  --crit:      #A63F37;
  --crit-bg:   #F8E7E5;

  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --raio: 7px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:    #0E1216;
    --surface:   #161B21;
    --surface-2: #1B2128;
    --ink:       #E2E8EE;
    --ink-soft:  #96A3B0;
    --ink-faint: #6A7784;
    --rule:      #262F38;
    --rule-soft: #1F272E;

    --accent:    #6FB0D4;
    --accent-bg: #14262F;

    --ok:        #46A98F;
    --ok-bg:     #10251F;
    --warn:      #D3A244;
    --warn-bg:   #2A2213;
    --crit:      #E07A70;
    --crit-bg:   #2B1815;
  }
}
:root[data-theme="dark"] {
  --ground:    #0E1216;
  --surface:   #161B21;
  --surface-2: #1B2128;
  --ink:       #E2E8EE;
  --ink-soft:  #96A3B0;
  --ink-faint: #6A7784;
  --rule:      #262F38;
  --rule-soft: #1F272E;

  --accent:    #6FB0D4;
  --accent-bg: #14262F;

  --ok:        #46A98F;
  --ok-bg:     #10251F;
  --warn:      #D3A244;
  --warn-bg:   #2A2213;
  --crit:      #E07A70;
  --crit-bg:   #2B1815;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2rem 1.5rem 5rem;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 78rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }

/* ---- topo ---- */
.topo {
  max-width: 78rem; margin: 0 auto 1.75rem;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem 2rem; padding-bottom: 1.1rem; border-bottom: 2px solid var(--ink);
}
.rot {
  font-family: var(--mono); font-size: .67rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; display: block;
}
h1 { font-size: 1.9rem; margin: .3rem 0 0; letter-spacing: -.025em; font-weight: 680; line-height: 1.1; }
.sub { margin: .45rem 0 0; color: var(--ink-soft); font-size: .9rem; max-width: 52ch; }

.periodo { display: flex; gap: .3rem; align-items: center; }
.periodo a, .periodo button {
  font-family: var(--mono); font-size: .76rem; text-decoration: none; color: var(--ink-soft);
  padding: .34rem .68rem; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface); cursor: pointer; line-height: 1.4;
}
.periodo a:hover, .periodo button:hover { border-color: var(--accent); color: var(--accent); }
.periodo a.on { background: var(--accent); border-color: var(--accent); color: var(--surface); font-weight: 600; }
:root[data-theme="dark"] .periodo a.on, :root:not([data-theme="light"]) .periodo a.on { color: #0E1216; }
.periodo a:focus-visible, .periodo button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- tiras de indicador ---- */
.tiras { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .7rem; }
.tile {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--raio);
  padding: .8rem .9rem; display: flex; flex-direction: column; gap: .1rem;
  border-top: 3px solid var(--rule);
}
.tile b {
  font-family: var(--mono); font-size: 1.5rem; font-weight: 640; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.tile i { font-style: normal; font-size: .74rem; color: var(--ink-faint); font-family: var(--mono); }
.tile.st-ok   { border-top-color: var(--ok); }
.tile.st-warn { border-top-color: var(--warn); }
.tile.st-crit { border-top-color: var(--crit); }
.tile.st-crit b { color: var(--crit); }

/* ---- paineis ---- */
.painel {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--raio);
  padding: 1.05rem 1.15rem 1.15rem;
}
.painel.destaque { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.painel h2 { font-size: 1rem; margin: 0; font-weight: 650; letter-spacing: -.01em; }
.leve { color: var(--ink-faint); font-weight: 400; }
.nota { margin: .35rem 0 .8rem; font-size: .82rem; color: var(--ink-soft); max-width: 76ch; }
.vazio {
  margin: .5rem 0 0; font-size: .85rem; color: var(--ink-faint); font-family: var(--mono);
  background: var(--surface-2); border: 1px dashed var(--rule); border-radius: 5px; padding: .8rem;
}
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.5rem; }

/* ---- tabelas ---- */
.rolar { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .84rem; }
th, td { text-align: left; padding: .42rem .6rem; border-bottom: 1px solid var(--rule-soft); }
th {
  font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-faint); font-weight: 600; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
td.n, th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
table.lista td { padding: .34rem .45rem; }
table.densa { font-size: .78rem; }
code { font-family: var(--mono); font-size: .92em; background: var(--rule-soft); padding: .08em .32em; border-radius: 3px; }

/* ---- barras ---- */
td.grafico, th.grafico { width: 34%; min-width: 6rem; }
.barra { display: block; height: 8px; border-radius: 2px; background: var(--accent); opacity: .85; }
.barra.ac { background: var(--accent); }
.barra.crit { background: var(--crit); }
.barra.warn { background: var(--warn); }
.barra.info { background: var(--ink-faint); }

.pino { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .45rem; vertical-align: middle; }
.pino.crit { background: var(--crit); }
.pino.warn { background: var(--warn); }
.pino.info { background: var(--ink-faint); }

.selo {
  font-family: var(--mono); font-size: .72rem; font-weight: 600; padding: .1rem .42rem;
  border-radius: 4px; display: inline-block;
}
.selo.ok   { color: var(--ok);   background: var(--ok-bg); }
.selo.warn { color: var(--warn); background: var(--warn-bg); }
.selo.crit { color: var(--crit); background: var(--crit-bg); }
.teto { color: var(--warn); margin-left: .25rem; }

.linha-erro td { background: var(--crit-bg); }
.linha-erro-msg td {
  font-family: var(--mono); font-size: .74rem; color: var(--crit);
  background: var(--crit-bg); border-bottom: 1px solid var(--rule);
}

/* ---- serie temporal ---- */
.serie { display: flex; align-items: flex-end; gap: 3px; height: 9.5rem; padding-top: .4rem; }
.serie .col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; min-width: 0; }
.serie .v { font-family: var(--mono); font-size: .62rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.serie .haste { position: relative; width: 100%; flex: 1; display: flex; align-items: flex-end; background: var(--rule-soft); border-radius: 2px; }
.serie .haste i { display: block; width: 100%; background: var(--accent); border-radius: 2px; opacity: .9; }
.serie .haste u { position: absolute; left: 0; bottom: 0; width: 100%; background: var(--warn); border-radius: 2px; text-decoration: none; }
.serie .d { font-family: var(--mono); font-size: .58rem; color: var(--ink-faint); white-space: nowrap; }
.legenda { margin: .6rem 0 0; font-family: var(--mono); font-size: .7rem; color: var(--ink-faint); display: flex; gap: 1rem; align-items: center; }
.chip { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: .3rem; vertical-align: middle; }
.chip.a { background: var(--accent); }
.chip.w { background: var(--warn); }

footer {
  max-width: 78rem; margin: 2.5rem auto 0; padding-top: 1rem; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: .72rem; color: var(--ink-faint);
}

@media (max-width: 640px) {
  body { padding: 1.25rem .8rem 3rem; }
  h1 { font-size: 1.45rem; }
  .serie { height: 7rem; }
  .serie .v { display: none; }
}

/* ---- tela de login ----
   Mesmos tokens do painel: a porta de entrada tem que parecer o mesmo
   instrumento, nao um formulario generico colado na frente dele. O halo atras
   do cartao existe so para empurrar o cartao para a frente do fundo chapado. */
body.tela-login {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background:
    radial-gradient(80ch 50ch at 50% 38%, var(--accent-bg), transparent 70%),
    var(--ground);
}

.cartao-login { width: 100%; max-width: 23.5rem; }
.cartao-login form {
  background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--accent);
  border-radius: var(--raio); padding: 1.6rem 1.5rem 1.3rem;
  display: flex; flex-direction: column;
}
.cartao-login header { margin-bottom: 1.4rem; }
.cartao-login h1 { font-size: 1.32rem; margin: .3rem 0 0; letter-spacing: -.022em; }
.cartao-login .host {
  margin: .5rem 0 0; font-family: var(--mono); font-size: .74rem; color: var(--ink-faint);
  overflow-wrap: anywhere;
}

.cartao-login label {
  font-family: var(--mono); font-size: .67rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; margin-bottom: .3rem;
}
.cartao-login input {
  font-family: var(--mono); font-size: .92rem; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: 5px;
  padding: .58rem .7rem; margin-bottom: 1rem; width: 100%;
}
.cartao-login input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.cartao-login input:disabled { opacity: .5; cursor: not-allowed; }

.cartao-login button {
  font-family: var(--sans); font-size: .9rem; font-weight: 620; letter-spacing: .01em;
  background: var(--accent); color: var(--surface); border: 1px solid var(--accent);
  border-radius: 5px; padding: .6rem 1rem; cursor: pointer; margin-top: .2rem;
}
:root[data-theme="dark"] .cartao-login button,
:root:not([data-theme="light"]) .cartao-login button { color: #0E1216; }
.cartao-login button:hover:not(:disabled) { filter: brightness(1.08); }
.cartao-login button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cartao-login button:disabled { opacity: .45; cursor: not-allowed; }

/* O erro entra acima dos campos e nao empurra o layout de lugar nenhum. */
.aviso-erro {
  margin: 0 0 1.1rem; padding: .55rem .7rem; font-size: .82rem;
  color: var(--crit); background: var(--crit-bg);
  border: 1px solid color-mix(in srgb, var(--crit) 35%, transparent);
  border-radius: 5px;
}
.rodape-login {
  margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--rule-soft);
  font-size: .74rem; color: var(--ink-faint); line-height: 1.5;
}
.rodape-login code { font-size: .95em; }

/* botao de sair, no topo do painel */
.sair { display: inline; }
.sair button {
  font-family: var(--mono); font-size: .76rem; color: var(--ink-soft);
  padding: .34rem .68rem; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface); cursor: pointer; line-height: 1.4;
}
.sair button:hover { border-color: var(--crit); color: var(--crit); }
.sair button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }