@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fontes/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* De dia o escritório tem piso claro; à noite (tema escuro do sistema) as luzes se apagam. */
:root {
  --piso: #d5e0e2;
  --piso-linha: #c3d1d4;
  --parede: #17343d;
  --papel: #fbfcfa;
  --fundo: #eef2f1;
  --tinta: #132a31;
  --tinta-suave: #4d666d;
  --madeira: #c4935a;
  --madeira-escura: #9a6f3f;
  --aviso: #f2b705;
  --aviso-tinta: #4a3800;
  --ok: #1f9d63;
  --erro: #d43d2a;
  --apagado: #93a4a8;
  --tela: #0f2a33;
  --foco: #0b6bcb;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --piso: #1d3038;
    --piso-linha: #25404a;
    --parede: #8fb3bd;
    --papel: #14242a;
    --fundo: #0e1b20;
    --tinta: #e4eeef;
    --tinta-suave: #9db4ba;
    --madeira: #8a6238;
    --madeira-escura: #5f4223;
    --aviso: #f2b705;
    --aviso-tinta: #2b2000;
    --ok: #37c483;
    --erro: #f0624f;
    --apagado: #5b7178;
    --tela: #081419;
    --foco: #6cb6ff;
  }
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.45;
}
h1, h2, h3, p { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
[hidden] { display: none !important; }

.botao {
  border: 2px solid var(--parede);
  background: var(--papel);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}
.botao:hover { background: var(--piso); }
.botao.cheio { background: var(--parede); color: var(--fundo); }
.botao.cheio:hover { filter: brightness(1.15); }
.botao.aprovar { background: var(--ok); border-color: var(--ok); color: #fff; }
.botao.negar { border-color: var(--erro); color: var(--erro); }
.botao:disabled { opacity: 0.5; cursor: default; }

/* ---------- Estrutura ---------- */

.pagina {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24rem;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}
.topo {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 0.9rem 1.5rem;
  border-bottom: 3px solid var(--parede);
}
.topo h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; font-stretch: 85%; }
.topo .gasto { color: var(--tinta-suave); margin-right: auto; }
.topo .gasto strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.topo .acoes { display: flex; gap: 0.5rem; }

.principal { padding: 0 1.5rem 1.5rem; display: grid; gap: 1.5rem; align-content: start; min-width: 0; }

/* ---------- Menu de seções ---------- */

.menu {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  border-bottom: 3px solid var(--parede);
  margin: 0 -1.5rem;
  padding: 0.75rem 1.5rem 0;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--fundo);
}
.menu a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  padding: 0.5rem 0.9rem;
  color: var(--tinta-suave);
  text-decoration: none;
  font-weight: 600;
  border: 3px solid transparent;
  border-bottom: 0;
  border-radius: 0.5rem 0.5rem 0 0;
  margin-bottom: -3px;
}
.menu a:hover { color: var(--tinta); }
/* A seção aberta é uma porta na parede: a aba se une ao conteúdo. */
.menu a[aria-current] { color: var(--tinta); border-color: var(--parede); background: var(--fundo); border-bottom: 3px solid var(--fundo); }
.contador {
  min-width: 1.45rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--aviso);
  color: var(--aviso-tinta);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.45rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.contador.grave { background: var(--erro); color: #fff; }
.so-celular { display: none !important; }

.avisos { display: grid; gap: 0.5rem; }
.aviso {
  background: var(--aviso);
  color: var(--aviso-tinta);
  padding: 0.6rem 0.9rem;
  border-radius: 0.4rem;
  font-weight: 500;
}
.aviso code { font-family: var(--mono); font-size: 0.9em; }

/* ---------- Planta do escritório ---------- */

.planta {
  background:
    linear-gradient(var(--piso-linha) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    linear-gradient(90deg, var(--piso-linha) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    var(--piso);
  border: 6px solid var(--parede);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.sala {
  position: relative;
  padding: 2.4rem 1rem 1rem;
  border: 3px solid var(--parede);
  margin: -3px 0 0 -3px;
  min-height: 13rem;
  min-width: 0;
}
/* A porta: um vão na parede de baixo. */
.sala::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  bottom: -5px;
  width: 3rem;
  height: 7px;
  background: var(--piso);
}
.sala .placa {
  position: absolute;
  top: 0.55rem;
  left: 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  font-stretch: 85%;
}
.sala.gerencia { grid-column: span 5; }
.sala.monitoramento { grid-column: span 7; }
.sala.vaga { grid-column: span 3; min-height: 9.5rem; color: var(--tinta-suave); }
.sala.vaga .fase { font-size: 0.85rem; margin-top: 0.2rem; }
.sala.vaga .mesa-vazia { width: 5.5rem; margin-top: 0.6rem; opacity: 0.45; }

.posto { display: grid; max-width: 34rem; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.75rem; align-items: end; }
.boneco { width: 8.5rem; display: block; }
.fala {
  position: relative;
  background: var(--papel);
  border: 2px solid var(--parede);
  border-radius: 0.9rem;
  padding: 0.6rem 0.8rem;
  margin-bottom: 2.4rem;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}
.fala::before {
  content: "";
  position: absolute;
  left: -9px;
  bottom: 0.9rem;
  width: 14px;
  height: 14px;
  background: var(--papel);
  border-left: 2px solid var(--parede);
  border-bottom: 2px solid var(--parede);
  transform: rotate(45deg);
}
.fala .situacao { font-weight: 700; }
.fala .fazendo { font-family: var(--mono); font-size: 0.8rem; color: var(--tinta-suave); margin-top: 0.25rem; }
.fala .dito {
  margin-top: 0.3rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* Boneco */
.boneco .pele { fill: #e2a878; }
.boneco .cabelo { fill: #2a1d14; }
.boneco .camisa { fill: var(--cor-camisa, #2b6f86); }
.boneco .mesa { fill: var(--madeira); }
.boneco .mesa-borda { fill: var(--madeira-escura); }
.boneco .notebook { fill: var(--tela); }
.boneco .luz { fill: var(--apagado); }
.boneco .olho { fill: #1b1b1b; transform-box: fill-box; transform-origin: center; }
.boneco .fone { fill: none; stroke: #1b1b1b; stroke-width: 3; }
.boneco .fone-lado { fill: #1b1b1b; }
.boneco .gravata { fill: var(--aviso); }
.boneco .braco { fill: var(--cor-camisa, #2b6f86); transform-box: fill-box; }
.trabalhando .boneco .luz { fill: var(--aviso); }

@media (prefers-reduced-motion: no-preference) {
  .boneco .olho { animation: piscar 5s infinite; }
  .trabalhando .boneco .braco.esq { animation: digitar 0.32s infinite alternate; }
  .trabalhando .boneco .braco.dir { animation: digitar 0.32s 0.16s infinite alternate; }
  .trabalhando .boneco .luz { animation: pulsar 1s infinite alternate; }
  .rack.fora .led, .rack.alerta .led { animation: pulsar 0.7s infinite alternate; }
}
@keyframes piscar { 0%, 96%, 100% { transform: scaleY(1); } 98% { transform: scaleY(0.1); } }
@keyframes digitar { to { transform: translateY(-3px); } }
@keyframes pulsar { to { opacity: 0.35; } }

/* Racks: um por servidor */
.racks { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.rack {
  flex: 1 1 8.5rem;
  min-width: 0;
  text-align: left;
  background: var(--tela);
  color: #e4eeef;
  border: 3px solid var(--parede);
  border-radius: 0.3rem;
  padding: 0.55rem 0.6rem 0.6rem;
  cursor: pointer;
}
.rack:hover { filter: brightness(1.25); }
.rack .nome { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.95rem; }
.rack .led { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--apagado); flex: none; }
.rack.ok .led { background: #37c483; box-shadow: 0 0 6px #37c483; }
.rack.alerta .led { background: var(--aviso); box-shadow: 0 0 6px var(--aviso); }
.rack.fora .led { background: #f0624f; box-shadow: 0 0 6px #f0624f; }
.rack .estado { font-size: 0.8rem; color: #9db4ba; margin: 0.15rem 0 0.45rem; }
.medidor { display: grid; grid-template-columns: 2.6rem 1fr 2.4rem; gap: 0.35rem; align-items: center; font-size: 0.75rem; }
.medidor + .medidor { margin-top: 0.2rem; }
.medidor .trilho { height: 0.4rem; background: #1d3f4a; border-radius: 2px; overflow: hidden; }
.medidor .nivel { display: block; height: 100%; background: #37c483; }
.medidor .nivel.medio { background: var(--aviso); }
.medidor .nivel.alto { background: #f0624f; }
.medidor .valor { text-align: right; font-variant-numeric: tabular-nums; }
.rack .extra { font-size: 0.78rem; color: #9db4ba; margin-top: 0.4rem; }
.sem-servidores { margin-top: 0.9rem; font-size: 0.9rem; color: var(--tinta-suave); }
.sem-servidores code { font-family: var(--mono); font-size: 0.85em; }

/* ---------- Blocos abaixo da planta ---------- */

.bloco h2 { font-size: 1.15rem; font-weight: 700; font-stretch: 85%; margin-bottom: 0.6rem; }
.bloco h2.segundo { margin-top: 2rem; }
.aba.bloco { max-width: 52rem; }
.fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1.5rem; align-items: start; }
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.5rem; }
.vazio { color: var(--tinta-suave); }

.ficha { background: var(--papel); border: 2px solid var(--parede); padding: 1rem; }
.ficha { scroll-margin-top: 4.5rem; }
.ficha.alerta { border-top: 0.6rem solid var(--aviso); }
.ficha.fora { border-top: 0.6rem solid var(--erro); }
.ficha h2 { margin-bottom: 0.2rem; display: flex; align-items: center; gap: 0.5rem; }
.ficha .led { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--apagado); flex: none; }
.ficha.ok .led { background: var(--ok); }
.ficha.alerta .led { background: var(--aviso); }
.ficha.fora .led { background: var(--erro); }
.ficha .sub { color: var(--tinta-suave); font-size: 0.9rem; margin-bottom: 0.8rem; }
.ficha dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0; }
.ficha dt { color: var(--tinta-suave); }
.ficha dd { margin: 0; overflow-wrap: anywhere; }
.ficha .historico { margin-top: 1rem; }
.ficha .historico .sub { margin-bottom: 0.2rem; }
.ficha .incidente { border-left: 4px solid var(--erro); padding-left: 0.7rem; margin-top: 0.8rem; }
.ficha .incidente p { white-space: pre-wrap; font-size: 0.92rem; margin-top: 0.2rem; }
.ruim { color: var(--erro); font-weight: 600; }
.grafico { width: 100%; height: 2.6rem; display: block; }
.grafico polyline { fill: none; stroke: var(--parede); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* Pedido de aprovação: um papel na mesa esperando assinatura. */
.pedido {
  background: var(--papel);
  border: 2px solid var(--parede);
  border-top: 0.6rem solid var(--aviso);
  padding: 0.8rem 1rem 1rem;
}
.pedido + .pedido { margin-top: 0.8rem; }
.pedido .cabeca { font-weight: 700; }
.pedido pre {
  font-family: var(--mono);
  font-size: 0.85rem;
  background: var(--tela);
  color: #e4eeef;
  padding: 0.6rem 0.7rem;
  margin: 0.5rem 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 0.25rem;
}
.pedido .motivo { font-size: 0.95rem; }
.pedido .botoes { display: flex; gap: 0.5rem; margin-top: 0.8rem; flex-wrap: wrap; }
.pedido.rotina { border-top-color: var(--foco); }
.pedido.servidor { border-top-color: var(--ok); }
.decididos { font-size: 0.92rem; color: var(--tinta-suave); }
.decididos details { padding: 0.35rem 0; border-top: 1px solid var(--piso-linha); overflow-wrap: anywhere; }
.decididos summary { cursor: pointer; }
.decididos code { font-family: var(--mono); font-size: 0.85em; color: var(--tinta); }
.decididos pre {
  font-family: var(--mono);
  font-size: 0.82rem;
  background: var(--tela);
  color: #e4eeef;
  padding: 0.6rem 0.7rem;
  margin: 0.5rem 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 0.25rem;
  user-select: all;
}

.mural { list-style: none; margin: 0; padding: 0; }
.mural li { display: grid; grid-template-columns: 3.2rem 5.2rem 1fr; gap: 0.5rem; padding: 0.3rem 0; border-top: 1px solid var(--piso-linha); font-size: 0.9rem; }
.mural time { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.mural .quem { font-weight: 600; }
.mural .oque { overflow-wrap: anywhere; }
.mural li.ev-ssh .oque, .mural li.ev-acao .oque { font-family: var(--mono); font-size: 0.8rem; }

.rotinas { list-style: none; margin: 0; padding: 0; }
.rotinas li { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.35rem 0; border-top: 1px solid var(--piso-linha); }
.rotinas code { font-family: var(--mono); font-size: 0.85em; }
.rotinas .descricao { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rotinas .ultima { color: var(--tinta-suave); }
.rotinas li.vazio { display: block; }
.rotinas button { border: 0; background: none; text-decoration: underline; cursor: pointer; color: var(--erro); padding: 0; }

/* ---------- Conversa ---------- */

.conversa {
  border-left: 3px solid var(--parede);
  background: var(--papel);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 4.2rem);
  position: sticky;
  top: 0;
  min-height: 0;
}
.conversa header { padding: 0.9rem 1rem 0.6rem; display: flex; align-items: baseline; gap: 0.5rem; }
.conversa header h2 { font-size: 1.15rem; font-weight: 700; font-stretch: 85%; margin-right: auto; }
.conversa header button { border: 0; background: none; text-decoration: underline; cursor: pointer; color: var(--tinta-suave); padding: 0; font-size: 0.9rem; }
.mensagens { flex: 1; overflow: auto; padding: 0.5rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.msg { max-width: 92%; }
.msg .autor { font-size: 0.8rem; color: var(--tinta-suave); margin-bottom: 0.1rem; }
.msg .texto {
  background: var(--piso);
  padding: 0.5rem 0.75rem;
  border-radius: 0.2rem 0.9rem 0.9rem 0.9rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg.voce { align-self: flex-end; }
.msg.voce .autor { text-align: right; }
.msg.voce .texto { background: var(--parede); color: var(--fundo); border-radius: 0.9rem 0.2rem 0.9rem 0.9rem; }
.msg.monitor .texto { border-left: 4px solid var(--aviso); }
.msg.sistema { align-self: center; max-width: 100%; }
.msg.sistema .texto { background: none; border: 2px dashed var(--apagado); border-radius: 0.4rem; color: var(--tinta-suave); font-size: 0.88rem; }
.digitando { padding: 0 1rem 0.5rem; font-size: 0.9rem; color: var(--tinta-suave); min-height: 1.6rem; }
.escrever { display: flex; gap: 0.5rem; padding: 0.75rem 1rem 1rem; border-top: 2px solid var(--parede); align-items: flex-end; }
.escrever textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  border: 2px solid var(--parede);
  background: var(--fundo);
  border-radius: 0.6rem;
  padding: 0.5rem 0.7rem;
  max-height: 9rem;
}

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

.entrada { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.entrada form {
  width: min(100%, 23rem);
  background: var(--papel);
  border: 6px solid var(--parede);
  padding: 2.2rem 1.6rem 1.6rem;
  position: relative;
}
/* A porta de entrada do escritório. */
.entrada form::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 4rem;
  height: 10px;
  margin-left: -2rem;
  background: var(--fundo);
}
.entrada h1 { font-size: 1.9rem; font-weight: 800; font-stretch: 85%; letter-spacing: -0.02em; line-height: 1.1; }
.entrada p.sub { color: var(--tinta-suave); margin: 0.4rem 0 1.4rem; }
.entrada label { display: block; font-weight: 600; margin-top: 0.9rem; }
.entrada input {
  width: 100%;
  margin-top: 0.25rem;
  border: 2px solid var(--parede);
  background: var(--fundo);
  padding: 0.55rem 0.7rem;
  border-radius: 0.4rem;
}
.entrada input.codigo { font-family: var(--mono); font-size: 1.3rem; letter-spacing: 0.3em; }
.entrada .dica { font-size: 0.85rem; color: var(--tinta-suave); margin-top: 0.25rem; }
.entrada button { width: 100%; margin-top: 1.4rem; padding: 0.65rem; }
.entrada .erro { color: var(--erro); font-weight: 600; margin-top: 0.9rem; min-height: 1.45rem; }

/* ---------- Telas menores ---------- */

@media (max-width: 68rem) {
  .pagina { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .so-celular { display: flex !important; }
  /* Em tela estreita a conversa vira uma seção do menu. */
  .conversa { display: none; position: static; height: calc(100dvh - 9.5rem); min-height: 22rem; border-left: 0; }
  body[data-aba="conversa"] .conversa { display: flex; }
  body[data-aba="conversa"] .avisos { display: none; }
  body[data-aba="conversa"] .principal { padding-bottom: 0; }
}
@media (max-width: 44rem) {
  .topo, .principal { padding-left: 1rem; padding-right: 1rem; }
  .menu { margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; }
  .conversa { height: calc(100dvh - 15rem); }
  .sala.gerencia, .sala.monitoramento { grid-column: 1 / -1; }
  .sala.vaga { grid-column: span 6; }
  .posto { grid-template-columns: 6rem minmax(0, 1fr); }
  .boneco { width: 6rem; }
  .mural li { grid-template-columns: 3.2rem 1fr; }
  .mural .oque { grid-column: 1 / -1; }
}