/* =========================================================================
   piloto-iot — folha de estilo única.
   Sem Bootstrap e sem CDN: a v1 carregava Bootstrap, Bootstrap Icons e
   Chart.js de fora, o que quebrava o PWA offline (o service worker cacheia
   só o que é servido daqui) e travava a tela quando o CDN estava lento.
   Ícones são SVG inline; os tokens abaixo são a única fonte de cor.
   ========================================================================= */

:root {
  color-scheme: light;

  /* Superfícies e tinta */
  --plano:          #f4f5f7;
  --superficie:     #ffffff;
  --superficie-2:   #f8f9fa;
  --tinta:          #14161a;
  --tinta-2:        #52565e;
  --tinta-3:        #767b84;
  --borda:          rgba(20, 22, 26, 0.10);
  --borda-forte:    rgba(20, 22, 26, 0.18);
  --grade:          #e6e7ea;
  --sombra:         0 1px 2px rgba(16, 20, 28, .06), 0 4px 16px rgba(16, 20, 28, .05);

  /* Séries (posições dos sensores) — ordem fixa, nunca ciclada */
  --serie-1: #2a78d6;  /* frente superior */
  --serie-2: #eb6834;  /* frente inferior */
  --serie-3: #1baf7a;  /* traseira superior */
  --serie-4: #eda100;  /* traseira inferior */

  /* Status — reservados, jamais usados como cor de série */
  --ok:       #0ca30c;
  --atencao:  #fab219;
  --serio:    #ec835a;
  --critico:  #d03b3b;
  --neutro:   #898781;

  --ok-fundo:      rgba(12, 163, 12, .12);
  --atencao-fundo: rgba(250, 178, 25, .16);
  --critico-fundo: rgba(208, 59, 59, .12);
  --neutro-fundo:  rgba(137, 135, 129, .14);

  --raio:    10px;
  --raio-sm: 6px;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plano:        #0d0e11;
    --superficie:   #16181d;
    --superficie-2: #1c1f25;
    --tinta:        #f2f3f5;
    --tinta-2:      #b9bec7;
    --tinta-3:      #878d97;
    --borda:        rgba(255, 255, 255, 0.10);
    --borda-forte:  rgba(255, 255, 255, 0.20);
    --grade:        #262a31;
    --sombra:       0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);

    --serie-1: #3987e5;
    --serie-2: #d95926;
    --serie-3: #199e70;
    --serie-4: #c98500;

    --ok-fundo:      rgba(12, 163, 12, .18);
    --atencao-fundo: rgba(250, 178, 25, .18);
    --critico-fundo: rgba(208, 59, 59, .20);
    --neutro-fundo:  rgba(137, 135, 129, .18);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plano:        #0d0e11;
  --superficie:   #16181d;
  --superficie-2: #1c1f25;
  --tinta:        #f2f3f5;
  --tinta-2:      #b9bec7;
  --tinta-3:      #878d97;
  --borda:        rgba(255, 255, 255, 0.10);
  --borda-forte:  rgba(255, 255, 255, 0.20);
  --grade:        #262a31;
  --sombra:       0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);

  --serie-1: #3987e5;
  --serie-2: #d95926;
  --serie-3: #199e70;
  --serie-4: #c98500;

  --ok-fundo:      rgba(12, 163, 12, .18);
  --atencao-fundo: rgba(250, 178, 25, .18);
  --critico-fundo: rgba(208, 59, 59, .20);
  --neutro-fundo:  rgba(137, 135, 129, .18);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--plano);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--serie-1); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: .95rem; }

.mono { font-variant-numeric: tabular-nums; }
.silencioso { color: var(--tinta-3); }
.pequeno { font-size: .8125rem; }

/* ---------- Layout ---------- */

.casca { min-height: 100vh; display: flex; flex-direction: column; }

.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1.25rem;
  padding: .625rem 1.25rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}
.barra .marca {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 650; color: var(--tinta); font-size: .95rem;
}
.barra .marca:hover { text-decoration: none; }
.barra nav { display: flex; gap: .25rem; margin-left: .5rem; }
.barra nav a {
  padding: .375rem .75rem; border-radius: var(--raio-sm);
  color: var(--tinta-2); font-size: .875rem; font-weight: 500;
}
.barra nav a:hover { background: var(--superficie-2); text-decoration: none; }
.barra nav a[aria-current="page"] { background: var(--superficie-2); color: var(--tinta); }
.barra .direita { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.conteudo { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

.cabecalho-pagina {
  display: flex; align-items: flex-start; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.25rem;
}
.cabecalho-pagina .acoes { margin-left: auto; display: flex; gap: .5rem; align-items: center; }

/* ---------- Componentes ---------- */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.cartao-corpo { padding: 1rem 1.125rem; }
.cartao-titulo {
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem 1.125rem; border-bottom: 1px solid var(--borda);
  font-size: .875rem; font-weight: 600; color: var(--tinta-2);
}

.botao {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .4375rem .875rem; border-radius: var(--raio-sm);
  border: 1px solid var(--borda-forte); background: var(--superficie);
  color: var(--tinta); font: inherit; font-size: .875rem; font-weight: 500;
  cursor: pointer;
}
.botao:hover { background: var(--superficie-2); text-decoration: none; }
.botao-primario { background: var(--serie-1); border-color: var(--serie-1); color: #fff; }
.botao-primario:hover { filter: brightness(1.08); }
.botao-perigo { color: var(--critico); border-color: var(--critico); background: transparent; }
.botao-perigo:hover { background: var(--critico-fundo); }
.botao-icone { padding: .4375rem; }

.campo { display: block; margin-bottom: .875rem; }
.campo > span { display: block; font-size: .8125rem; font-weight: 500; color: var(--tinta-2); margin-bottom: .3125rem; }
.campo input, .campo select {
  width: 100%; padding: .5rem .625rem;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-sm);
  background: var(--superficie); color: var(--tinta); font: inherit; font-size: .9375rem;
}
.campo input:focus, .campo select:focus, .botao:focus-visible {
  outline: 2px solid var(--serie-1); outline-offset: 1px;
}

select.filtro {
  padding: .375rem .625rem; border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm); background: var(--superficie);
  color: var(--tinta); font: inherit; font-size: .875rem;
}

/* Selo de status: cor + ícone + texto, nunca cor sozinha */
.selo {
  display: inline-flex; align-items: center; gap: .3125rem;
  padding: .1875rem .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.selo svg { width: 13px; height: 13px; flex: none; }
.selo-ok       { background: var(--ok-fundo);      color: var(--ok); }
.selo-frio     { background: rgba(42,120,214,.12); color: var(--serie-1); }
.selo-atencao  { background: var(--atencao-fundo); color: #8a6100; }
.selo-critico  { background: var(--critico-fundo); color: var(--critico); }
.selo-sem-dado { background: var(--neutro-fundo);  color: var(--tinta-3); }
:root[data-theme="dark"] .selo-atencao,
:root:not([data-theme="light"]) .selo-atencao { color: var(--atencao); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .selo-atencao { color: var(--atencao); }
}

/* ---------- Grade de indicadores ---------- */

.indicadores {
  display: grid; gap: .875rem; margin-bottom: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.indicador { padding: .875rem 1rem; }
.indicador .rotulo {
  font-size: .75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tinta-3);
}
.indicador .valor {
  font-size: 1.75rem; font-weight: 650; line-height: 1.15; margin-top: .25rem;
}
.indicador .nota { font-size: .8125rem; color: var(--tinta-2); }
.indicador.destaque-critico .valor { color: var(--critico); }
.indicador.destaque-atencao .valor { color: #8a6100; }
:root[data-theme="dark"] .indicador.destaque-atencao .valor { color: var(--atencao); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .indicador.destaque-atencao .valor { color: var(--atencao); }
}

/* ---------- Cartões de rack ---------- */

.racks { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.rack-cabeca {
  display: flex; align-items: center; gap: .625rem;
  padding: .875rem 1.125rem; border-bottom: 1px solid var(--borda);
}
.rack-cabeca .nome { font-weight: 650; }
.rack-cabeca .local { color: var(--tinta-3); font-size: .8125rem; }
.rack-cabeca .selo { margin-left: auto; }

/* Desenho do rack: frente à esquerda, traseira à direita, topo em cima */
.rack-mapa {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  padding: .75rem; background: var(--grade); margin: .875rem 1.125rem;
  border-radius: var(--raio-sm); border: 1px solid var(--borda);
}
.rack-mapa .face {
  grid-column: span 1; font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3);
  text-align: center; padding: .125rem 0 .375rem;
}
.celula {
  background: var(--superficie); padding: .5rem .625rem;
  display: flex; flex-direction: column; gap: .0625rem;
}
.celula:nth-of-type(3) { border-radius: var(--raio-sm) 0 0 0; }
.celula .temp { font-size: 1.125rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.celula .hum  { font-size: .75rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.celula .pos  { font-size: .6875rem; color: var(--tinta-3); }
.celula.sem-dado .temp { color: var(--tinta-3); font-weight: 500; }
.celula.st-atencao { box-shadow: inset 3px 0 0 var(--atencao); }
.celula.st-critico { box-shadow: inset 3px 0 0 var(--critico); }
.celula.st-frio    { box-shadow: inset 3px 0 0 var(--serie-1); }

.rack-rodape {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  padding: .625rem 1.125rem; border-top: 1px solid var(--borda);
  font-size: .8125rem; color: var(--tinta-2);
}
.rack-rodape .separador { margin-left: auto; }

/* ---------- Gráficos ---------- */

.grafico-caixa { position: relative; height: 320px; padding: .5rem .25rem 0; }
.grafico-caixa.baixo { height: 220px; }

.legenda { display: flex; flex-wrap: wrap; gap: .875rem; padding: .625rem 1.125rem 0; }
.legenda .item { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--tinta-2); }
.legenda .amostra { width: 12px; height: 12px; border-radius: 3px; flex: none; }

.periodos { display: flex; gap: .25rem; flex-wrap: wrap; }
.periodos button {
  padding: .3125rem .625rem; font-size: .8125rem; font-weight: 500;
  border: 1px solid var(--borda-forte); background: var(--superficie);
  color: var(--tinta-2); border-radius: var(--raio-sm); cursor: pointer;
}
.periodos button[aria-pressed="true"] {
  background: var(--serie-1); border-color: var(--serie-1); color: #fff;
}

/* ---------- Tabela ---------- */

.tabela { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabela th {
  text-align: left; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tinta-3); font-weight: 600;
  padding: .5rem 1.125rem; border-bottom: 1px solid var(--borda);
}
.tabela td { padding: .625rem 1.125rem; border-bottom: 1px solid var(--borda); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .mono { font-variant-numeric: tabular-nums; }

/* ---------- Avisos ---------- */

.avisos { position: fixed; top: .875rem; right: .875rem; z-index: 60; display: grid; gap: .5rem; max-width: 340px; }
.aviso {
  display: flex; gap: .5rem; align-items: flex-start;
  padding: .625rem .875rem; border-radius: var(--raio);
  background: var(--superficie); border: 1px solid var(--borda);
  box-shadow: var(--sombra); font-size: .875rem;
}
.aviso svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.aviso-success { border-left: 3px solid var(--ok); }
.aviso-danger  { border-left: 3px solid var(--critico); }
.aviso-warning { border-left: 3px solid var(--atencao); }
.aviso-info    { border-left: 3px solid var(--serie-1); }

.vazio { text-align: center; padding: 3rem 1rem; color: var(--tinta-2); }
.vazio svg { width: 40px; height: 40px; color: var(--tinta-3); margin-bottom: .75rem; }

/* ---------- Login ---------- */

.login-tela { min-height: 100vh; display: grid; grid-template-columns: 1fr; place-items: center; padding: 1.5rem; }
.login-caixa { width: 100%; max-width: 380px; }
.login-caixa .marca { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: 1.5rem; font-size: 1.125rem; font-weight: 650; }

@media (max-width: 640px) {
  .conteudo { padding: 1rem .875rem 2.5rem; }
  .barra { gap: .5rem; padding: .5rem .875rem; }
  .barra nav a { padding: .375rem .5rem; }
  .indicador .valor { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}