/* Configurações — visual hi-tech e limpo (14/10/2026, ver js/configuracoes-hitech.js).
   Vale só com body.cfg-hitech (a página de Configurações). Segue a identidade Contrô
   (grafite sustenta, azul elétrico destaca, grafismo do traço do Ô) e as regras de sempre: não esconde
   controle nenhum, não redefine .hidden, não muda IDs nem permissões.
   "Hi-tech" aqui é feito de detalhes, não de enfeite: rótulos curtos em caixa alta e espaçados,
   valores técnicos em fonte monoespaçada, luzes de estado, bordas finas com brilho azul só
   no que está ativo — e muito menos texto e altura. */

.cfg-hitech { --cfg-mono: "Cascadia Mono", Consolas, "Courier New", monospace; --cfg-raio: 12px; }

/* ---- Barra de categorias: compacta, ícone ao lado do nome, fixa no topo ao rolar ---- */
.cfg-hitech .config-nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; gap: 2px; padding: 4px; margin: 0 0 14px;
  overflow-x: auto; scrollbar-width: none;
  background: color-mix(in srgb, var(--card-bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: var(--cfg-raio);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--text) 6%, transparent);
}
.cfg-hitech .config-nav::-webkit-scrollbar { display: none; }
.cfg-hitech .config-nav-btn {
  flex: 0 0 auto; flex-direction: row; gap: 7px; min-height: 36px; padding: 7px 12px;
  border: 0; border-radius: 9px; background: transparent; box-shadow: none;
  color: var(--text-muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; transform: none;
}
.cfg-hitech .config-nav-btn svg { width: 16px; height: 16px; }
.cfg-hitech .config-nav-btn span { overflow-wrap: normal; }
.cfg-hitech .config-nav-btn:hover { background: var(--surface-2); color: var(--text); transform: none; }
.cfg-hitech .config-nav-btn.active {
  position: relative; background: var(--text); color: var(--card-bg);
  box-shadow: inset 0 -2px 0 var(--primary), 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}
.cfg-hitech .config-nav-btn.active svg { color: var(--primary); }

/* ---- Cabeçalho da seção: uma linha ---- */
.cfg-hitech .config-painel-cabeca { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; padding: 2px 2px 10px; }
.cfg-hitech .config-painel-cabeca h2 { margin: 0; font-size: 18px; letter-spacing: -.01em; text-transform: none; }
.cfg-hitech .config-painel-cabeca p { margin: 1px 0 0; font-size: 12px; color: var(--text-muted); }
.cfg-hitech .config-painel-icone {
  width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--primary); background: var(--text);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent), 0 6px 16px color-mix(in srgb, var(--primary) 22%, transparent);
}
.cfg-hitech .config-painel-icone svg { width: 18px; height: 18px; }

/* ---- Painel em duas colunas: cartões simples dividem a linha; o que é largo ocupa a linha toda ---- */
.cfg-hitech .config-tab-painel:not(.hidden) {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start;
  grid-auto-flow: row dense; /* sem buracos quando um cartão largo vem no meio */
}
.cfg-hitech .config-tab-painel > * { grid-column: 1 / -1; min-width: 0; }
.cfg-hitech .config-tab-painel > .config-grid { margin: 0; gap: 14px; }
/* Grade cujo(s) cartão(ões) estão escondidos (ex.: Gateways sem gateway) não ocupa célula. */
.cfg-hitech .config-tab-painel > .config-grid:not(:has(> .card:not(.hidden))) { display: none; }
.cfg-hitech .config-tab-painel > .config-grid:not(.cols-2):not(.cols-3):not(:has(
    table, .table-scroll, .log-scroll, .backup-listas-grid, .equip-card, #lista-equipamentos,
    .cfg-row, input[type="range"], textarea, .cascata-titulo
  )):not(.cfg-largo) { grid-column: auto; }
/* Um cartão cujo resultado apareceu (lista/tabela) volta a ocupar a linha toda sozinho. */
.cfg-hitech .config-tab-painel > .config-grid:has(.card [id]:not(:empty) > table, .card [id]:not(:empty) > .table-scroll) { grid-column: 1 / -1; }

/* ---- Cartões: mais baixos, borda fina com linha de luz no topo ---- */
.cfg-hitech .config-tab-painel .card {
  position: relative; padding: 16px 18px; gap: 0; border-radius: var(--cfg-raio);
  border: 1px solid var(--border); background: var(--card-bg);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cfg-hitech .config-tab-painel .card::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 1px;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 0%, transparent) 60%);
  opacity: .55;
}
.cfg-hitech .config-tab-painel .card:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.cfg-hitech .config-tab-painel .card h2,
.cfg-hitech .config-tab-painel .card h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text);
}
.cfg-hitech .config-tab-painel .card h2::before {
  content: ""; width: 14px; height: 3px; border-radius: 3px; background: var(--primary); flex: 0 0 auto;
}

/* ---- Explicações longas: uma linha + "Detalhes" (o texto inteiro continua lá) ---- */
.cfg-hitech .cfg-explicacao {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1;
  overflow: hidden; margin-bottom: 2px !important;
  font-size: 12px !important; line-height: 1.5 !important; color: var(--text-muted) !important;
}
.cfg-hitech .cfg-explicacao.cfg-explicacao-aberta { display: block; -webkit-line-clamp: unset; }
.cfg-hitech .cfg-explicacao-clicavel { cursor: pointer; border-radius: 4px; }
.cfg-hitech .cfg-explicacao-clicavel:hover { color: var(--text) !important; }
.cfg-hitech .cfg-explicacao-clicavel:not(.cfg-explicacao-aberta)::first-line { text-decoration: underline dotted color-mix(in srgb, var(--text-muted) 50%, transparent); text-underline-offset: 3px; }
/* Aviso: só a faixa lateral (padding vertical num texto recolhido deixaria meia linha aparecendo) */
.cfg-hitech .cfg-explicacao-alerta {
  padding: 0 0 0 10px; border-left: 3px solid var(--warning); color: var(--amber-text) !important;
}
.cfg-hitech button.cfg-detalhes {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
  min-height: 0; margin: 0 0 10px; padding: 0; border: 0; background: none; box-shadow: none;
  color: var(--accent-text); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
}
.cfg-hitech button.cfg-detalhes::after { content: "›"; font-size: 13px; transition: transform .15s ease; }
.cfg-hitech button.cfg-detalhes[aria-expanded="true"]::after { transform: rotate(90deg); }
.cfg-hitech button.cfg-detalhes:hover { text-decoration: underline; transform: none; }
/* No título do cartão: à direita, sem linha própria */
.cfg-hitech button.cfg-detalhes.cfg-detalhes-titulo { margin: 0 0 0 auto; font-size: 10.5px; color: var(--text-muted); }
.cfg-hitech button.cfg-detalhes.cfg-detalhes-titulo:hover,
.cfg-hitech button.cfg-detalhes.cfg-detalhes-titulo[aria-expanded="true"] { color: var(--accent-text); }

/* ---- Rótulos e controles com o mesmo tamanho ---- */
.cfg-hitech .config-tab-painel label,
.cfg-hitech .config-tab-painel .field-label { font-size: 12px; }
.cfg-hitech .config-tab-painel .switch + span,
.cfg-hitech .config-tab-painel [id$="_linha"] > span {
  font-size: 13px !important; font-weight: 600; line-height: 1.35; color: var(--text);
}
.cfg-hitech .config-tab-painel label:has(> input[type="checkbox"]),
.cfg-hitech .config-tab-painel label:has(> input[type="radio"]) { font-size: 12.5px; line-height: 1.45; }
.cfg-hitech .config-tab-painel input[type="text"],
.cfg-hitech .config-tab-painel input[type="number"],
.cfg-hitech .config-tab-painel input[type="password"],
.cfg-hitech .config-tab-painel select { min-height: 34px; font-size: 13px; }
.cfg-hitech .config-tab-painel input[type="number"] { font-family: var(--cfg-mono); }
.cfg-hitech .config-tab-painel .card button { min-height: 32px; padding: 6px 12px; font-size: 12.5px; }
.cfg-hitech .config-tab-painel .card button.primary { padding: 6px 14px; }

/* ---- Equipamentos: cartão do facial mais técnico e compacto ---- */
.cfg-hitech .equip-card { border-radius: var(--cfg-raio); padding: 14px; }
.cfg-hitech .equip-status-linha { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cfg-hitech .equip-status-linha > div { display: flex; align-items: center; gap: 6px; }
.cfg-hitech .equip-nome { font-size: 14px; letter-spacing: .01em; }
.cfg-hitech .equip-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.cfg-hitech .equip-campo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cfg-hitech .equip-campo-largo { grid-column: 1 / -1; }
.cfg-hitech .equip-rotulo { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.cfg-hitech .equip-valor,
.cfg-hitech .equip-valor code { font-family: var(--cfg-mono); font-size: 12px; color: var(--text); overflow-wrap: anywhere; }
.cfg-hitech .equip-vazio { font-family: inherit; color: var(--text-3); font-size: 11.5px; }
.cfg-hitech .equip-acoes { display: flex; flex-wrap: wrap; gap: 5px; }
.cfg-hitech .equip-acoes button { min-height: 28px; padding: 4px 9px; font-size: 11.5px; border-radius: 8px; }

/* Luz de estado antes dos selos Online/Offline */
.cfg-hitech .status-pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--cfg-mono); letter-spacing: .02em; }
.cfg-hitech .status-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

/* ---- Telas estreitas: uma coluna ---- */
@media (max-width: 1100px) {
  .cfg-hitech .config-tab-painel:not(.hidden) { grid-template-columns: minmax(0, 1fr); }
  .cfg-hitech .config-tab-painel > .config-grid { grid-column: 1 / -1; }
}