@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(archivo.woff2) format("woff2"); }

:root {
  --fundo: #031627;
  --trilho: #0a2742;
  --painel-a: #123a5c;
  --painel-b: #0c2e4c;
  --painel-borda: #21507a;
  --porta: #061c31;
  --porta-borda: #1a4468;
  --soquete: #01090f;
  --texto: #e8f3fd;
  --suave: #9dbad5;
  --azul: #028cf1;
  --azul-fundo: #0076cc;
  --ceu: #40aeff;
  --verde: #2fe08a;
  --vermelho: #ff5d5d;
  --ambar: #ffc247;
  --fita: #f4f7fa;
  --fita-texto: #062a47;
  --c1: #40aeff; --c2: #2fd1a6; --c3: #a993ff; --c4: #ff9a5c; --c5: #ffd166; --c6: #f27fb4; --c7: #8fd46b; --c8: #6cc4f5;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--texto); line-height: 1.45;
  background:
    radial-gradient(1200px 500px at 50% -200px, rgba(2,140,241,.18), transparent 70%),
    var(--fundo);
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ceu); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.ic { width: 18px; height: 18px; flex: none; }

/* Modo leitura x edição */
body:not(.editando) .so-edicao { display: none !important; }
body.editando .so-leitura { display: none !important; }

/* ---------- Topo ---------- */
.topo { position: sticky; top: 0; z-index: 20; background: rgba(3,22,39,.92); backdrop-filter: blur(10px); border-bottom: 1px solid #0f3354; }
.topo-in { max-width: 1280px; margin: 0 auto; padding: 14px 16px; display: grid; grid-template-columns: auto minmax(220px, 1fr) auto auto; align-items: center; gap: 14px 20px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.marca img { width: 118px; height: auto; display: block; }
.marca span { font-weight: 800; font-stretch: 125%; font-size: 1.15rem; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.25); }

.busca { position: relative; display: block; }
.busca .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--suave); pointer-events: none; }
.busca input {
  width: 100%; min-height: 46px; font: inherit; font-size: 1rem; color: var(--texto);
  background: #020f1c; border: 1px solid #1a4468; border-radius: 10px; padding: 10px 44px 10px 42px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45);
}
.busca input::placeholder { color: #6f8ea9; }
.busca input:focus { outline: none; border-color: var(--ceu); box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 0 0 3px rgba(64,174,255,.25); }
.busca kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: inherit; font-size: .78rem; color: var(--suave); border: 1px solid #2a5376; border-radius: 5px; padding: 0 7px; }

.painel-status { display: flex; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border-radius: 999px; background: #071f36; border: 1px solid #173f63; font-size: .9rem; white-space: nowrap; }
button.chip { cursor: pointer; }
button.chip:hover { border-color: var(--ceu); }
.chip span { font-weight: 800; }

.acoes { display: flex; gap: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 16px; border-radius: 10px; border: 1px solid transparent; font-weight: 700; font-size: .95rem; cursor: pointer; text-decoration: none; }
.btn-azul { background: var(--azul-fundo); color: #fff; }
.btn-azul:hover { background: #0b86e0; }
.btn-fantasma { background: transparent; border-color: #2a5376; color: var(--texto); }
.btn-fantasma:hover { border-color: var(--ceu); }
.btn-perigo { background: transparent; border-color: #7a2b2b; color: #ff9b9b; }
.btn-perigo:hover { background: #3a1212; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Rack ---------- */
.rack { max-width: 1280px; margin: 0 auto; padding: 28px 16px 24px; position: relative; }

.painel {
  --cor: var(--c1);
  position: relative; margin-bottom: 18px; padding: 14px 58px 16px;
  background: linear-gradient(180deg, var(--painel-a), var(--painel-b));
  border: 1px solid var(--painel-borda); border-radius: 8px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 28px -18px rgba(0,0,0,.8);
}
/* orelhas do rack com parafusos */
.painel::before, .painel::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40px;
  background:
    radial-gradient(circle at 50% 22px, #02101d 0 5px, #3d6a91 5.5px 7px, transparent 7.5px),
    radial-gradient(circle at 50% calc(100% - 22px), #02101d 0 5px, #3d6a91 5.5px 7px, transparent 7.5px),
    linear-gradient(180deg, #17466f, #0f375a);
}
.painel::before { left: 0; border-right: 1px solid #0a2a46; border-radius: 8px 0 0 8px; }
.painel::after { right: 0; border-left: 1px solid #0a2a46; border-radius: 0 8px 8px 0; }

.c1 { --cor: var(--c1); } .c2 { --cor: var(--c2); } .c3 { --cor: var(--c3); } .c4 { --cor: var(--c4); }
.c5 { --cor: var(--c5); } .c6 { --cor: var(--c6); } .c7 { --cor: var(--c7); } .c8 { --cor: var(--c8); }

.painel-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
/* etiqueta de rotuladora */
.etiqueta {
  margin: 0; font-size: .95rem; font-weight: 800; font-stretch: 112%; letter-spacing: .01em;
  color: var(--fita-texto); background: var(--fita); padding: 3px 12px 3px 10px; border-radius: 2px;
  border-left: 5px solid var(--cor);
  box-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.08) inset;
  transform: rotate(-.6deg);
}
.qtd { font-size: .85rem; color: var(--suave); }
.painel-edicao { margin-left: auto; display: flex; gap: 6px; }

.portas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; }
.porta-item { position: relative; display: flex; flex-direction: column; }
.porta {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start;
  padding: 26px 12px 12px; min-height: 148px; text-align: left; width: 100%;
  background: var(--porta); border: 1px solid var(--porta-borda); border-radius: 6px;
  color: var(--texto); text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .15s, background-color .15s;
}
.porta:hover { border-color: var(--cor); background: #082541; }
.num { position: absolute; top: 7px; left: 10px; font-size: .72rem; font-weight: 700; color: #6f8ea9; font-variant-numeric: tabular-nums; }

/* soquete RJ45 */
.jack {
  width: 64px; height: 46px; margin-bottom: 12px; display: grid; place-items: center;
  background: var(--soquete); color: var(--cor);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 72% 78%, 72% 100%, 28% 100%, 28% 78%, 0 78%);
  box-shadow: inset 0 0 0 2px #0f2d47;
  transition: background-color .15s, color .15s;
}
.jack b { font-weight: 800; font-stretch: 118%; font-size: .98rem; margin-top: -8px; letter-spacing: .02em; white-space: nowrap; }
.jack b[data-n="4"] { font-size: .86rem; font-stretch: 108%; letter-spacing: 0; }
.jack b[data-n="5"] { font-size: .8rem; font-stretch: 100%; letter-spacing: 0; }
.jack .ic { margin-top: -8px; width: 20px; height: 20px; }
.porta:hover .jack { background: color-mix(in srgb, var(--cor) 22%, var(--soquete)); color: #fff; }

.nome { font-weight: 800; font-size: 1rem; line-height: 1.2; }
.desc { font-size: .84rem; color: var(--suave); line-height: 1.3; margin-top: 3px; }
.host { margin-top: auto; padding-top: 8px; font-size: .76rem; color: #7e9cb6; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* LED */
.led { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #2b4157; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); flex: none; }
.porta .led { position: absolute; top: 9px; right: 10px; }
.led-on, .led[data-estado="on"] { background: var(--verde); box-shadow: 0 0 8px var(--verde), 0 0 2px #fff inset; }
.led-off, .led[data-estado="off"] { background: var(--vermelho); box-shadow: 0 0 7px rgba(255,93,93,.8); }
.led[data-estado="desconhecido"] { background: var(--ambar); box-shadow: 0 0 6px rgba(255,194,71,.6); }
.led[data-estado="checando"] { background: #3a5874; }
@media (prefers-reduced-motion: no-preference) {
  .led[data-estado="checando"] { animation: pisca 1.1s ease-in-out infinite; }
}
@keyframes pisca { 50% { background: #6f8ea9; } }

/* Edição */
body.editando .porta:not(.porta-vazia) { cursor: pointer; border-style: dashed; }
body.editando .porta:not(.porta-vazia)::after {
  content: "Editar"; position: absolute; right: 10px; bottom: 10px; font-size: .75rem; font-weight: 700;
  color: var(--cor); opacity: 0; transition: opacity .15s;
}
body.editando .porta:hover::after, body.editando .porta:focus-visible::after { opacity: 1; }
.porta-edicao { position: absolute; top: 4px; right: 26px; display: flex; gap: 2px; }
.mini { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: #0a2742; border: 1px solid #23517b; color: var(--texto); cursor: pointer; padding: 0; }
.mini:hover { border-color: var(--ceu); }
.mini .ic { width: 16px; height: 16px; }
.porta-vazia { border: 1.5px dashed #2f5f8a; background: transparent; align-items: center; justify-content: center; color: var(--suave); }
.porta-vazia .jack { margin-bottom: 8px; }
.porta-vazia:hover { color: #fff; }

.vazio { text-align: center; color: var(--suave); padding: 40px 0; }
.link { background: none; border: 0; padding: 0; color: var(--ceu); text-decoration: underline; cursor: pointer; }

.rodape { max-width: 1280px; margin: 0 auto; padding: 0 16px 36px; color: #7e9cb6; font-size: .85rem; }
.rodape p { margin: 0; }

/* ---------- Diálogos ---------- */
.dlg { width: min(520px, calc(100vw - 24px)); padding: 0; border: 1px solid #23517b; border-radius: 14px; background: #082541; color: var(--texto); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); }
.dlg-estreito { width: min(400px, calc(100vw - 24px)); }
.dlg::backdrop { background: rgba(1,8,15,.7); backdrop-filter: blur(3px); }
.dlg form { padding: 22px; display: grid; gap: 14px; }
.dlg h2 { margin: 0; font-size: 1.3rem; font-stretch: 115%; }
.dlg label { display: grid; gap: 6px; font-weight: 700; font-size: .92rem; }
.dlg label em { font-style: normal; font-weight: 500; color: var(--suave); }
.dlg input { font: inherit; font-weight: 500; color: var(--texto); background: #020f1c; border: 1px solid #23517b; border-radius: 9px; padding: 10px 12px; min-height: 44px; width: 100%; }
.dlg input:focus { outline: none; border-color: var(--ceu); box-shadow: 0 0 0 3px rgba(64,174,255,.25); }
.dica { font-weight: 500; color: var(--suave); font-size: .82rem; word-break: break-all; }
.linha { display: grid; grid-template-columns: 1fr 110px; gap: 12px; }
.dlg-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.espaco { flex: 1; }
.erro { margin: 0; padding: 10px 12px; border-radius: 8px; background: #3a1212; color: #ffb4b4; font-size: .9rem; }
.login-texto { margin: -4px 0 0; color: var(--suave); }

.aviso { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50; background: #0d3a60; border: 1px solid #2a6aa0; color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; box-shadow: 0 10px 30px -10px rgba(0,0,0,.7); }

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .topo-in { grid-template-columns: auto 1fr auto; }
  .busca { grid-column: 1 / -1; grid-row: 2; }
  .painel-status { grid-column: 2; justify-self: end; }
}
@media (max-width: 720px) {
  .topo-in { grid-template-columns: 1fr auto; padding: 10px 12px; gap: 10px; }
  .painel-status { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
  .acoes { grid-column: 2; grid-row: 1; }
  .painel { padding: 12px 12px 14px; }
  .painel::before, .painel::after { display: none; }
  .rack { padding: 18px 12px; }
  .portas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .porta { min-height: 132px; padding: 24px 10px 10px; }
  .jack { width: 54px; height: 40px; margin-bottom: 10px; }
  .jack b { font-size: .88rem; }
  .jack b[data-n="4"] { font-size: .76rem; }
  .jack b[data-n="5"] { font-size: .7rem; }
  .busca kbd { display: none; }
  .acoes .btn { padding: 8px 12px; }
  .linha { grid-template-columns: 1fr 90px; }
}
@media (max-width: 380px) {
  .marca img { width: 96px; }
  .marca span { font-size: 1rem; }
  .acoes .btn-azul { font-size: 0; gap: 0; padding: 8px 10px; }
  .acoes .btn-azul .ic { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }