:root {
  --baquelite: #17332C;
  --baquelite-2: #21443B;
  --latao: #B08A4F;
  --latao-claro: #D6B57E;
  --papel: #EEF1EC;
  --superficie: #FFFFFF;
  --tinta: #17201C;
  --tinta-suave: #56625C;
  --linha: #D3DAD3;
  --ok: #2FA56F;
  --alerta: #D99A1E;
  --falha: #CF3F33;
  --apagada: #9AA39D;
  --foco: #1F6FEB;
  --serifa: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #101A17;
    --superficie: #17241F;
    --tinta: #E3E8E2;
    --tinta-suave: #9DAAA3;
    --linha: #2B3B35;
    --baquelite: #0C1A16;
    --baquelite-2: #15281F;
    --foco: #6EA8FF;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  background: var(--papel);
  color: var(--tinta);
}
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--serifa); font-weight: 600; line-height: 1.2; margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.botao {
  font: inherit; font-weight: 600; font-size: .9375rem;
  padding: .55rem 1rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; background: none; color: inherit;
  min-height: 2.5rem;
}
.botao:disabled { opacity: .55; cursor: progress; }
.botao.primario { background: var(--baquelite); color: #F4F1E8; border-color: var(--latao); }
.botao.primario:hover:not(:disabled) { background: var(--baquelite-2); }
.botao.fantasma { border-color: var(--linha); }
.botao.fantasma:hover:not(:disabled) { border-color: var(--tinta-suave); }
.botao.perigo { background: var(--falha); color: #fff; }
.botao.pequeno { padding: .3rem .75rem; min-height: 2rem; font-size: .8125rem; }

input, select, textarea {
  font: inherit; color: inherit; width: 100%;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px;
  padding: .55rem .7rem; min-height: 2.5rem;
}
textarea { resize: vertical; }
input:user-invalid, textarea:user-invalid { border-color: var(--falha); }
label { display: block; font-size: .875rem; font-weight: 600; margin: .9rem 0 .3rem; }
.linha-check { display: flex; align-items: center; gap: .45rem; font-weight: 500; margin: .6rem 0; }
.linha-check input { width: auto; min-height: 0; }
.erro-form { color: var(--falha); font-size: .875rem; min-height: 1.3em; margin: .6rem 0 0; }
.apoio { color: var(--tinta-suave); margin: .4rem 0 0; }
.pequeno { font-size: .8125rem; }

.tela-acesso { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; background: var(--baquelite); }
.cartao-acesso {
  width: min(100%, 24rem); background: var(--superficie); padding: 2rem 1.75rem;
  border-radius: 14px; border-top: 4px solid var(--latao);
}
.cartao-acesso h1 { font-size: 1.75rem; }
.cartao-acesso .botao.primario { width: 100%; margin-top: .5rem; }

.cabecalho { background: var(--baquelite); color: #F1EEE6; padding: 1.25rem clamp(1rem, 4vw, 2.5rem) 1.5rem; border-bottom: 3px solid var(--latao); }
.cabecalho-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.cabecalho h1 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); letter-spacing: .01em; }
.menu-usuario { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .9375rem; }
.menu-usuario .botao.fantasma { border-color: rgb(214 181 126 / .45); color: #F1EEE6; }
.menu-usuario .botao.fantasma:hover { border-color: var(--latao-claro); }

.mesa {
  margin-top: 1.25rem; padding: 1rem 1.1rem; border-radius: 12px;
  background: linear-gradient(#0f2520, #12302a); border: 1px solid rgb(176 138 79 / .5);
  box-shadow: inset 0 2px 10px rgb(0 0 0 / .45);
}
.lampadas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .9rem; }
.lampada-botao {
  display: grid; justify-items: center; gap: .35rem; background: none; border: 0; padding: .2rem;
  color: #CFC9B8; font: inherit; font-size: .75rem; cursor: pointer; width: 5.5rem;
}
.lampada-botao span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lampada {
  --cor: var(--apagada);
  display: inline-block; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8 0 12%, transparent 13%), var(--cor);
  border: 3px solid #6f5a36;
  box-shadow: 0 0 0 1px #000a inset;
}
.lampada.pequena { width: .85rem; height: .85rem; border-width: 2px; flex: none; }
.lampada[data-saude="ok"] { --cor: var(--ok); box-shadow: 0 0 14px 2px rgb(47 165 111 / .55); }
.lampada[data-saude="falha"] { --cor: var(--falha); box-shadow: 0 0 14px 3px rgb(207 63 51 / .65); }
.lampada[data-saude="pendente"] { --cor: var(--alerta); box-shadow: 0 0 10px 1px rgb(217 154 30 / .45); }
.lampada[data-saude="sem_monitor"] { --cor: #4c5a53; }
.lampada.pequena[data-saude] { box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .lampada[data-saude="falha"]:not(.pequena) { animation: piscar 1.6s ease-in-out infinite; }
  @keyframes piscar { 50% { filter: brightness(.6); } }
}
.resumo { margin: .9rem 0 0; color: #D8D2C2; font-size: .9375rem; }

.barra {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  padding: 1rem clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid var(--linha);
}
.barra label { margin: 0; font-weight: 500; }
.barra .busca { flex: 1 1 16rem; }
.barra select { width: auto; }
.barra #novo-projeto { margin-left: auto; }

.lista { padding: 1rem clamp(1rem, 4vw, 2.5rem) 4rem; display: grid; gap: 2rem; }
.grupo h2 { font-size: 1.25rem; display: flex; align-items: baseline; gap: .6rem; margin-bottom: .6rem; }
.grupo h2 small { font-family: var(--sans); font-size: .875rem; font-weight: 500; color: var(--tinta-suave); }
.trilho { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.linha-projeto {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .4rem 1rem; align-items: start;
  padding: .9rem .25rem; border-bottom: 1px solid var(--linha);
}
.linha-projeto > .lampada { margin-top: .2rem; }
.linha-projeto .abrir {
  all: unset; cursor: pointer; font-family: var(--serifa); font-size: 1.125rem; font-weight: 600;
}
.linha-projeto .abrir:hover { text-decoration: underline; text-underline-offset: 3px; }
.linha-projeto .abrir:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
.descricao { margin: .15rem 0 0; color: var(--tinta-suave); font-size: .9375rem; max-width: 70ch; }
.meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.etiqueta { font-size: .78rem; padding: .1rem .55rem; border-radius: 999px; border: 1px solid var(--linha); color: var(--tinta-suave); }
.etiqueta.bugs { border-color: var(--falha); color: var(--falha); font-weight: 600; }
.plugues { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; max-width: 26rem; }
.plugue {
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
  font-size: .8125rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px;
  background: var(--superficie); border: 1px solid var(--linha);
}
.plugue:hover { border-color: var(--latao); }
.vazio { padding: 2rem 0; color: var(--tinta-suave); }

dialog {
  border: 0; border-radius: 14px; padding: 1.5rem; width: min(100% - 2rem, 34rem);
  background: var(--superficie); color: var(--tinta);
}
dialog:modal { overscroll-behavior: contain; }
dialog::backdrop { background: rgb(8 20 16 / .55); overflow: hidden; overscroll-behavior: contain; }
dialog h2 { font-size: 1.4rem; }
.acoes { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; flex-wrap: wrap; }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1rem; }

dialog.painel-lateral {
  margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(100%, 44rem);
  border-radius: 0; border-left: 3px solid var(--latao); padding: 0;
}
.painel-cabeca {
  position: sticky; top: 0; z-index: 1; background: var(--superficie);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--linha);
}
.painel-cabeca h2 { display: flex; align-items: center; gap: .6rem; }
.secao { padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--linha); }
.secao h3 { font-size: 1.05rem; margin-bottom: .6rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.secao form { display: grid; gap: .5rem; margin-top: .75rem; }
.secao form label { margin: 0; }
.secao form .linha-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; align-items: end; }
@media (max-width: 34rem) { .secao form .linha-form { grid-template-columns: 1fr; } }
.itens { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .2rem .7rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--linha); border-radius: 10px; }
.item .titulo { font-weight: 600; overflow-wrap: anywhere; }
.item .sub { grid-column: 2 / -1; color: var(--tinta-suave); font-size: .8125rem; overflow-wrap: anywhere; }
.item.corrigido .titulo { text-decoration: line-through; color: var(--tinta-suave); }
.item .acoes-item { display: flex; gap: .3rem; }
.sev { width: .7rem; height: .7rem; border-radius: 2px; background: var(--apagada); }
.sev[data-sev="critica"] { background: var(--falha); }
.sev[data-sev="alta"] { background: #E0702A; }
.sev[data-sev="media"] { background: var(--alerta); }
.texto-pre { white-space: pre-wrap; }

.abas { display: flex; gap: .25rem; padding: .75rem 1.5rem 0; border-bottom: 1px solid var(--linha); }
.abas button { font: inherit; font-weight: 600; background: none; border: 0; padding: .6rem .9rem; cursor: pointer; color: var(--tinta-suave); border-bottom: 3px solid transparent; }
.abas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--latao); }
.segredo { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--papel); padding: .6rem .75rem; border-radius: 8px; overflow-wrap: anywhere; border: 1px dashed var(--latao); }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { text-align: left; padding: .45rem .4rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela-rolagem { overflow-x: auto; }
.visoes { padding: .5rem clamp(1rem, 4vw, 2.5rem) 0; }
.tabela-sites td { vertical-align: middle; }
.tabela-sites td:first-child { width: 1.25rem; }
.tabela-sites .sub { color: var(--tinta-suave); font-size: .8125rem; overflow-wrap: anywhere; }
.tabela-sites .abrir { all: unset; cursor: pointer; font-weight: 600; }
.tabela-sites .abrir:hover { text-decoration: underline; text-underline-offset: 3px; }
.tabela-sites .abrir:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
.tabela-sites form { margin-top: .5rem; }
.lista > * { min-width: 0; }
@media (max-width: 40rem) {
  /* No celular cada site vira um cartão: lâmpada e nome na primeira linha, o resto embaixo com rótulo. */
  .tabela-sites thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela-sites, .tabela-sites tbody { display: block; }
  .tabela-sites tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--linha); }
  .tabela-sites td { border: 0; padding: .1rem 0; }
  .tabela-sites td:nth-child(2) { grid-column: 2; }
  .tabela-sites td:nth-child(6) { grid-column: 3; grid-row: 1; }
  .tabela-sites td[data-rotulo] { grid-column: 2 / -1; font-size: .875rem; }
  .tabela-sites td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--tinta-suave); }
  .tabela-sites td[colspan] { grid-column: 1 / -1; }
}

.avisos { position: fixed; inset: auto 1rem 1rem auto; display: grid; gap: .5rem; z-index: 10; }
.aviso { background: var(--tinta); color: var(--papel); padding: .7rem 1rem; border-radius: 10px; max-width: 22rem; font-size: .9375rem; }
.aviso.erro { background: var(--falha); color: #fff; }

@media (max-width: 40rem) {
  .linha-projeto { grid-template-columns: auto minmax(0, 1fr); }
  .plugues { grid-column: 2; justify-content: flex-start; }
  .barra #novo-projeto { margin-left: 0; width: 100%; }
}