/* =========================================================
   Pulse Central - styles.css
   Estilos gerais do portal
   ---------------------------------------------------------
   Este arquivo controla a aparência visual do sistema:
   cores, menu lateral, cards, tabelas, formulários, login,
   alertas, relatórios e adaptação para telas menores.
   ========================================================= */


/* =========================================================
   1. Cores e variáveis principais
   ---------------------------------------------------------
   Estas variáveis são atalhos para cores usadas no sistema.
   Assim, se um dia quiser trocar o azul principal, por exemplo,
   basta alterar aqui.
   ========================================================= */

:root {
  --navy: #10284b;
  --blue: #1265ad;
  --bg: #f4f7fb;
  --line: #e5eaf1;
  --text: #172033;
  --muted: #667085;
  --green: #039855;
  --amber: #dc6803;
  --red: #d92d20;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 10px 30px rgba(16, 24, 40, .06);
}


/* =========================================================
   2. Ajustes básicos da página
   ---------------------------------------------------------
   Define regras gerais para toda a página, como fonte,
   cor de fundo e cálculo correto de tamanhos.
   ========================================================= */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, Segoe UI, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }


/* =========================================================
   3. Estrutura principal do aplicativo
   ---------------------------------------------------------
   Controla a área geral do portal, incluindo menu lateral
   e conteúdo principal.
   ========================================================= */

.app { min-height: 100vh; display: flex; }


/* =========================================================
   4. Menu lateral
   ---------------------------------------------------------
   Controla o menu azul da esquerda.
   ========================================================= */

.sidebar {
  width: 258px;
  background: linear-gradient(180deg, var(--navy), #0c2343);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
}


/* =========================================================
   5. Marca / logotipo no menu lateral
   ---------------------------------------------------------
   Área superior do menu lateral, onde aparece o nome
   Pulse Central e o ícone.
   ========================================================= */

.brand {
  padding: 24px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  gap: 12px;
}

.bolt {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--blue);
  display: grid;
  place-items: center;
  font-size: 20px;
  flex: 0 0 auto;
}

.brand h1 {
  margin: 0;
  font-size: 18px;
  line-height: 1.1;
}

.brand p {
  margin: 4px 0 0;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #b7c6dc;
}


/* =========================================================
   6. Botões de navegação do menu lateral
   ---------------------------------------------------------
   Controla os botões: Visão Geral, Clientes, Dispositivos,
   Alertas, Políticas, Usuários, Lixeira e Relatórios.
   ========================================================= */

.nav {
  padding: 14px 12px;
  flex: 1;
  overflow: auto;
}

.nav button {
  width: 100%;
  border: 0;
  background: transparent;
  color: #c2d0e5;
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  margin: 2px 0;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav button:hover,
.nav button.active {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.nav .icon {
  width: 18px;
  text-align: center;
}


/* =========================================================
   7. Rodapé do menu lateral
   ---------------------------------------------------------
   Área inferior do menu lateral, geralmente usada para
   versão, ambiente ou usuário.
   ========================================================= */

.sidebar-footer {
  padding: 16px 18px 22px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px;
  color: #b7c6dc;
  line-height: 1.5;
}

.sidebar-footer b {
  color: #fff;
}


/* =========================================================
   8. Área principal de conteúdo
   ---------------------------------------------------------
   Tudo que aparece à direita do menu lateral.
   ========================================================= */

.content {
  width: calc(100% - 258px);
  margin-left: 258px;
  min-height: 100vh;
}


/* =========================================================
   9. Cabeçalho superior
   ---------------------------------------------------------
   Barra branca no topo, com título da página e dados
   do usuário logado.
   ========================================================= */

.top {
  min-height: 82px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 34px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.top h2 {
  margin: 0;
  font-size: 21px;
}

.subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}


/* =========================================================
   10. Área do usuário no topo
   ---------------------------------------------------------
   Mostra nome, papel/permissão e avatar do usuário.
   ========================================================= */

.admin {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  text-align: right;
}

.admin small {
  color: var(--muted);
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
}


/* =========================================================
   11. Páginas e abas internas
   ---------------------------------------------------------
   Controla o espaçamento das páginas e qual tela está visível.
   ========================================================= */

.page {
  padding: 28px 34px 40px;
  max-width: 1540px;
}

.view {
  display: none;
}

.view.active {
  display: block;
}


/* =========================================================
   12. Grades de layout
   ---------------------------------------------------------
   Usadas para organizar cards e blocos lado a lado.
   ========================================================= */

.grid4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}


/* =========================================================
   13. Cards e painéis
   ---------------------------------------------------------
   Cards são blocos menores. Painéis são áreas maiores,
   geralmente com título e conteúdo.
   ========================================================= */

.card,
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.card {
  padding: 20px;
}

.label {
  font-size: 13px;
  color: var(--muted);
}

.metric {
  font-size: 30px;
  font-weight: 800;
  margin-top: 8px;
}

.sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

.panel {
  overflow: hidden;
}

.panelHead {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.panelHead h3 {
  margin: 0;
  font-size: 16px;
}

.panelBody {
  padding: 18px;
}


/* =========================================================
   14. Barra de ferramentas das páginas
   ---------------------------------------------------------
   Área usada para título, filtros e botões de ação.
   ========================================================= */

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.toolbar h3 {
  margin: 0;
  font-size: 16px;
}

.toolbar .muted {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}


/* =========================================================
   15. Botões
   ---------------------------------------------------------
   Estilos dos botões principais, secundários, neutros
   e perigosos.
   ========================================================= */

.primary,
.secondary,
.ghost,
.dangerBtn {
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  transition: .15s ease;
}

.primary {
  background: var(--blue);
  color: #fff;
}

.primary:hover {
  background: #0d528e;
}

.secondary {
  background: #eaf2fb;
  color: var(--blue);
}

.secondary:hover {
  background: #dcebf8;
}

.ghost {
  background: #f3f6fa;
  color: var(--text);
}

.dangerBtn {
  background: #fee4e2;
  color: var(--red);
}


/* =========================================================
   16. Campos de formulário
   ---------------------------------------------------------
   Controla caixas de texto, seletores, áreas de texto
   e foco visual ao clicar em um campo.
   ========================================================= */

.input,
select,
textarea {
  width: 100%;
  border: 1px solid #cfd7e4;
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  background: #fff;
}

.input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(18, 101, 173, .13);
}

.field label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.formGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.formGrid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.inlineRow {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}


/* =========================================================
   17. Tabelas
   ---------------------------------------------------------
   Aparência das listas em tabela, como dispositivos,
   clientes, usuários e relatórios.
   ========================================================= */

.tableWrap {
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th {
  background: #f8fafc;
  color: #526075;
  font-weight: 700;
  text-align: left;
  padding: 13px 16px;
  white-space: nowrap;
}

td {
  border-top: 1px solid var(--line);
  padding: 13px 16px;
  vertical-align: middle;
}

tr:hover td {
  background: #fbfdff;
}


/* =========================================================
   18. Textos auxiliares
   ---------------------------------------------------------
   Classes simples para textos apagados ou texto técnico.
   ========================================================= */

.muted {
  color: var(--muted);
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
}


/* =========================================================
   19. Etiquetas de status
   ---------------------------------------------------------
   Usadas para mostrar estados como OK, aviso, erro
   ou informação.
   ========================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 9px;
  font-weight: 700;
  font-size: 11px;
  white-space: nowrap;
}

.ok {
  color: #027a48;
  background: #ecfdf3;
}

.warning {
  color: #b54708;
  background: #fffaeb;
}

.bad {
  color: #b42318;
  background: #fef3f2;
}

.info {
  color: #175cd3;
  background: #eff8ff;
}


/* =========================================================
   20. Pontos de conexão
   ---------------------------------------------------------
   Bolinhas usadas para indicar online/offline.
   ========================================================= */

.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.dot.online {
  background: #12b76a;
}

.dot.offline {
  background: #98a2b3;
}


/* =========================================================
   21. Gráfico de barras
   ---------------------------------------------------------
   Visual usado em áreas de resumo e relatórios.
   ========================================================= */

.barChart {
  display: flex;
  align-items: end;
  gap: 14px;
  height: 260px;
  padding: 10px 4px 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.barWrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  min-width: 90px;
  gap: 8px;
  flex: 0 0 auto;
}

.bar {
  width: 46px;
  background: linear-gradient(#2285d8, #1265ad);
  border-radius: 8px 8px 0 0;
  min-height: 6px;
}

.barLabel {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   22. Gráfico circular de saúde
   ---------------------------------------------------------
   Visual de rosca usado para representar proporções.
   ========================================================= */

.donutWrap {
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 14px;
  flex-wrap: wrap;
}

.donut {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: conic-gradient(#1265ad 0 42%, #10b981 42% 63%, #f59e0b 63% 100%);
  position: relative;
  flex: 0 0 auto;
}

.donut:after {
  content: 'Saúde';
  position: absolute;
  inset: 33px;
  background: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
}

.legend {
  font-size: 13px;
  line-height: 2;
}

.dotLegend {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 7px;
}


/* =========================================================
   23. Alertas
   ---------------------------------------------------------
   Blocos usados na tela de alertas e em listas de eventos.
   ========================================================= */

.alert {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-top: 1px solid var(--line);
}

.alert:first-child {
  border-top: 0;
}

.alertIcon {
  font-size: 20px;
  line-height: 1;
  margin-top: 2px;
}

.alert p {
  margin: 5px 0 0;
  font-size: 13px;
}


/* =========================================================
   24. Políticas
   ---------------------------------------------------------
   Layout da tela de políticas por cliente.
   ========================================================= */

.policyGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.policy {
  padding: 18px;
}

.fieldsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.checkGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  font-size: 13px;
  margin-top: 10px;
}

.checkGrid label {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fafcff;
}


/* =========================================================
   25. Relatórios
   ---------------------------------------------------------
   Layout da tela de relatórios, incluindo filtros e prévia.
   ========================================================= */

.reportsLayout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items: start;
}

.reportControls {
  position: sticky;
  top: 100px;
}

.reportPreview {
  min-height: 260px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.reportPreview .previewHead {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.reportPreview .previewBody {
  padding: 18px;
  overflow: auto;
}


/* =========================================================
   26. Estado vazio
   ---------------------------------------------------------
   Mensagem exibida quando uma lista não tem dados.
   ========================================================= */

.empty {
  padding: 34px;
  text-align: center;
  color: var(--muted);
}


/* =========================================================
   27. Tela de login
   ---------------------------------------------------------
   Controla a tela inicial de autenticação.
   Usa imagem tecnológica como fundo e exibe o logotipo
   Pulse Central no cartão de login.
   ========================================================= */

.loginOverlay {
  position: fixed;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(244, 247, 251, .10) 0%,
      rgba(244, 247, 251, .22) 38%,
      rgba(244, 247, 251, .86) 66%,
      rgba(244, 247, 251, .98) 100%
    ),
    url("login-background.png") center center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 34px 7vw;
  z-index: 60;
}

/*
  Cartão principal do login.
*/
.loginCard {
  width: min(520px, 100%);
  background: rgba(255, 255, 255, .90);
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(16, 40, 75, .22);
  display: block;
  backdrop-filter: blur(14px);
}

/*
  A faixa azul antiga do login não é mais necessária.
*/
.loginBrand {
  display: none;
}

.loginBrand h1 {
  margin: 0 0 8px;
  font-size: 28px;
}

.loginBrand p {
  margin: 0;
  color: #c7d6ea;
  line-height: 1.6;
}

/*
  Área onde ficam logotipo, nome do sistema, campos e botões.
*/
.loginBox {
  padding: 34px 36px 36px;
}

/*
  Logotipo da aplicação.
  Ele é colocado visualmente pelo CSS usando o arquivo Logotipo.png.
*/
.loginBox::before {
  content: "";
  display: block;
  width: min(340px, 92%);
  height: 150px;
  margin: 0 auto 8px;

  background: url("Logotipo.png") center center / contain no-repeat;
}


/*
  Removemos o texto grande "Pulse Central",
  porque agora a identificação principal será apenas o logotipo.
*/
.loginBox h2::before {
  content: none;
}


/*
  Pequena frase abaixo do nome do sistema.
*/
.loginBox h2::after {
  content: "Gestão inteligente de ativos e dispositivos";
  display: block;
  margin: 8px 0 24px;

  font-size: 13px;
  font-weight: 700;
  color: #667085;
  letter-spacing: .2px;
  text-align: center;
}

/*
  Título original do login.
  Mantemos visível, mas menor.
*/
.loginBox h2 {
  margin: 0 0 8px;
  font-size: 19px;
  color: var(--navy);
}

/*
  Se o título original for "Entrar no sistema",
  ele ficará logo abaixo da marca.
*/
.loginBox .hint {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 18px;
}

.loginActions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/*
  Pequeno reforço visual nos campos da tela de login.
*/
.loginBox .input {
  background: rgba(255, 255, 255, .96);
  border-color: rgba(207, 215, 228, .95);
}

.loginBox .input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(18, 101, 173, .14);
}

/*
  Botão principal do login um pouco mais destacado.
*/
.loginActions .primary {
  box-shadow: 0 10px 24px rgba(18, 101, 173, .22);
}

/*
  Em telas pequenas, centraliza o login para não ficar apertado.
*/
@media (max-width: 720px) {
  .loginOverlay {
    justify-content: center;
    padding: 18px;
    background:
      linear-gradient(
        180deg,
        rgba(244, 247, 251, .70) 0%,
        rgba(244, 247, 251, .96) 100%
      ),
      url("login-background.png") center center / cover no-repeat;
  }

  .loginCard {
    width: 100%;
  }

  .loginBox {
    padding: 28px;
  }

  .loginBox::before {
    width: min(300px, 92%);
    height: 132px;
  }


  .loginBox h2::before {
    content: none;
  }
}





/* =========================================================
   28. Caixas de status e erro
   ---------------------------------------------------------
   Mensagens de sucesso, aviso ou erro exibidas na tela.
   ========================================================= */

.statusBox {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #eff8ff;
  color: #175cd3;
  border: 1px solid #d0e2ff;
  font-size: 13px;
  line-height: 1.5;
}

.statusBox.err {
  background: #fef3f2;
  color: #b42318;
  border-color: #fecaca;
}

.statusBox.ok {
  background: #ecfdf3;
  color: #027a48;
  border-color: #bbf7d0;
}

.mobileOnly {
  display: none;
}

.errorBox {
  display: none;
  background: #fef3f2;
  color: #b42318;
  border: 1px solid #fecaca;
  padding: 12px 16px;
  margin: 0 0 12px;
  border-radius: 10px;
  font-size: 13px;
  white-space: pre-wrap;
}


/* =========================================================
   29. Multi-select de clientes
   ---------------------------------------------------------
   Campo usado para selecionar um ou mais clientes.
   ========================================================= */

.multiSelect {
  position: relative;
}

.multiSelectBtn {
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid #cfd7e4;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 500;
}

.multiSelectDropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  max-height: 220px;
  overflow: auto;
  z-index: 30;
  padding: 6px;
}

.multiSelectDropdown.open {
  display: block;
}

.multiSelectItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
}

.multiSelectItem:hover {
  background: #f4f7fb;
}

.multiSelectEmpty {
  padding: 10px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}


/* =========================================================
   30. Ajustes para telas menores
   ---------------------------------------------------------
   Quando a tela fica menor, o menu lateral encolhe e os
   blocos passam a ocupar menos colunas.
   ========================================================= */

@media (max-width: 980px) {
  .sidebar {
    width: 74px;
  }

  .sidebar .brand h1,
  .sidebar .brand p,
  .nav .text,
  .sidebar-footer {
    display: none;
  }

  .content {
    width: calc(100% - 74px);
    margin-left: 74px;
  }

  .loginCard {
    grid-template-columns: 1fr;
  }

  .loginBrand {
    display: none;
  }

  .mobileOnly {
    display: block;
  }

  .grid4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid2 {
    grid-template-columns: 1fr;
  }

  .reportsLayout {
    grid-template-columns: 1fr;
  }

  .reportControls {
    position: static;
  }
}


/* =========================================================
   31. Modal de detalhes do dispositivo
   ---------------------------------------------------------
   Janela que mostra a ficha completa do equipamento.
   Inclui seções com ícones: identificação, sistema,
   hardware, bateria, rede, segurança e gestão.
   ========================================================= */

.deviceModalOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .58);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.deviceModalCard {
  background: #fff;
  border-radius: 16px;
  max-width: 920px;
  width: 100%;
  max-height: 88vh;
  overflow: auto;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
  border: 1px solid rgba(255, 255, 255, .8);
}

.deviceModalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}

.deviceModalTitle {
  margin: 0;
  font-size: 17px;
  color: var(--text);
}

.deviceModalSubtitle {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.deviceModalClose {
  border: 0;
  background: #f3f6fa;
  color: var(--muted);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 22px;
  line-height: 1;
}

.deviceModalClose:hover {
  background: #eaf2fb;
  color: var(--blue);
}

.deviceModalBody {
  padding: 20px;
  display: grid;
  gap: 16px;
  background: #f8fafc;
}

.deviceModalFooter {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 2;
}


/* =========================================================
   32. Seções internas do modal de detalhes
   ---------------------------------------------------------
   Cada seção vira um cartão visual com ícone e título.
   ========================================================= */

.detailSection {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.detailSectionHead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef2f7;
}

.detailSectionIcon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: #eaf2fb;
  color: var(--blue);
  flex: 0 0 auto;
}

.detailSectionTitle {
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
}

.detailSectionHint {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.detailGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}

.detailItem {
  min-width: 0;
}

.detailItemFull {
  grid-column: 1 / -1;
}

.detailLabel {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 700;
}

.detailValue {
  font-size: 13px;
  color: var(--text);
  line-height: 1.35;
  word-break: break-word;
}

.detailInput,
.detailTextarea {
  width: 100%;
  border: 1px solid #cfd7e4;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  background: #fff;
  color: var(--text);
  outline: none;
}

.detailInput:focus,
.detailTextarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(18, 101, 173, .13);
}

.detailTextarea {
  font-family: inherit;
  resize: vertical;
}

.detailCheckbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.detailCheckbox input {
  width: 16px;
  height: 16px;
}

.detailCheckbox label {
  font-size: 13px;
  color: var(--text);
}


/* =========================================================
   33. Cores por tipo de seção do modal
   ---------------------------------------------------------
   Pequenos destaques visuais para cada assunto.
   ========================================================= */

.sectionIdentity .detailSectionIcon {
  background: #eaf2fb;
}

.sectionOs .detailSectionIcon {
  background: #eff8ff;
}

.sectionHardware .detailSectionIcon {
  background: #f4f3ff;
}

.sectionBattery .detailSectionIcon {
  background: #ecfdf3;
}

.sectionNetwork .detailSectionIcon {
  background: #eef4ff;
}

.sectionSecurity .detailSectionIcon {
  background: #fff1f3;
}

.sectionManagement .detailSectionIcon {
  background: #fffaeb;
}


/* =========================================================
   34. Modal em telas menores
   ---------------------------------------------------------
   Em telas pequenas, os campos ficam em uma coluna.
   ========================================================= */

@media (max-width: 720px) {
  .deviceModalOverlay {
    padding: 10px;
  }

  .deviceModalCard {
    max-height: 92vh;
    border-radius: 14px;
  }

  .deviceModalHeader {
    padding: 16px;
  }

  .deviceModalBody {
    padding: 14px;
  }

  .detailGrid {
    grid-template-columns: 1fr;
  }

  .deviceModalFooter {
    padding: 12px 14px;
    flex-direction: column-reverse;
  }

  .deviceModalFooter button {
    width: 100%;
  }
}
/* =========================================================
   35. Visão Geral - Painel compacto moderno
   ---------------------------------------------------------
   Visual da Opção B escolhida:
   - Mais informação em menos espaço
   - Blocos modernos e compactos
   - Painel ocupando largura completa
   - Sem biblioteca externa de gráficos
   ========================================================= */


/* =========================================================
   35.1 Esconder estruturas antigas da Visão Geral
   ========================================================= */

.compactHiddenMetrics,
.compactLegacyHidden {
  display: none !important;
}

.compactDashboardRoot {
  display: block !important;
  width: 100%;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: visible !important;
}


/* =========================================================
   35.2 Cabeçalho compacto
   ========================================================= */

.compactHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(16, 40, 75, .98), rgba(18, 101, 173, .92)),
    #10284b;
  color: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .12);
}

.compactHeader h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -.4px;
}

.compactHeader p {
  margin: 6px 0 0;
  max-width: 760px;
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  line-height: 1.45;
}

.compactHeaderMeta {
  display: grid;
  gap: 6px;
  min-width: 250px;
  text-align: right;
  font-size: 12px;
  color: rgba(255, 255, 255, .76);
}

.compactHeaderMeta strong {
  color: #fff;
}


/* =========================================================
   35.3 KPIs do topo
   ========================================================= */

.compactKpiGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.compactKpi {
  position: relative;
  overflow: hidden;
  min-height: 88px;
  padding: 13px 14px;
  border: 1px solid rgba(226, 232, 240, .95);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
}

.compactKpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--blue);
}

.compactKpi span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.compactKpi strong {
  display: block;
  margin-top: 7px;
  font-size: 28px;
  line-height: 1;
  color: #0f172a;
  font-weight: 900;
}

.compactKpi small {
  display: block;
  margin-top: 7px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.25;
}

.compactKpi--green::before {
  background: var(--green);
}

.compactKpi--amber::before {
  background: var(--amber);
}

.compactKpi--red::before {
  background: var(--red);
}

.compactKpi--purple::before {
  background: #7c3aed;
}


/* =========================================================
   35.4 Painéis compactos
   ========================================================= */

.compactPanel {
  min-width: 0;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, .95);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .055);
  overflow: hidden;
}

.compactPanelHead {
  padding: 12px 14px 10px;
  border-bottom: 1px solid #edf2f7;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.compactPanelHead h3 {
  margin: 0;
  font-size: 14px;
  color: #0f172a;
  font-weight: 900;
}

.compactPanelHead p {
  margin: 3px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: #64748b;
}

.compactPanelBody {
  padding: 14px;
}


/* =========================================================
   35.5 Resumo executivo compacto
   ========================================================= */

.compactSummaryGrid {
  display: grid;
  grid-template-columns: .8fr 1.35fr .7fr;
  gap: 14px;
  align-items: stretch;
}

.compactInfoBox {
  display: grid;
  gap: 8px;
}

.compactInfoBox div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  font-size: 12px;
}

.compactInfoBox span {
  color: #64748b;
  font-weight: 800;
}

.compactInfoBox strong {
  color: #0f172a;
  font-weight: 900;
}


/* =========================================================
   35.6 Medidores pequenos
   ========================================================= */

.compactGaugeGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.compactGauge {
  text-align: center;
  min-width: 0;
}

.compactGaugeRing {
  --value: 0;
  width: 76px;
  height: 76px;
  margin: 0 auto 6px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background:
    conic-gradient(var(--blue) calc(var(--value) * 1%), #e5e7eb 0);
}

.compactGaugeRing::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: #fff;
}

.compactGaugeRing strong {
  position: relative;
  z-index: 1;
  font-size: 15px;
  color: #0f172a;
  font-weight: 900;
}

.compactGauge span {
  display: block;
  font-size: 11px;
  color: #0f172a;
  font-weight: 900;
  line-height: 1.2;
}

.compactGauge small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.25;
  color: #64748b;
}

.compactGauge--green .compactGaugeRing {
  background:
    conic-gradient(var(--green) calc(var(--value) * 1%), #e5e7eb 0);
}

.compactGauge--amber .compactGaugeRing {
  background:
    conic-gradient(var(--amber) calc(var(--value) * 1%), #e5e7eb 0);
}

.compactGauge--gray .compactGaugeRing {
  background:
    conic-gradient(#64748b calc(var(--value) * 1%), #e5e7eb 0);
}


/* =========================================================
   35.7 Status compacto
   ========================================================= */

.compactStatusBox {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.compactStatusBox h4,
.compactDualStatus h4 {
  margin: 0;
  padding: 8px 10px;
  background: #0f172a;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2px;
}

.compactStatusLine {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 7px 10px;
  border-top: 1px solid #eef2f7;
  font-size: 12px;
}

.compactStatusLine span {
  color: #475569;
  font-weight: 800;
}

.compactStatusLine strong {
  font-weight: 900;
}


/* =========================================================
   35.8 Grades do painel
   ========================================================= */

.compactGrid {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.compactGrid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compactGrid--three {
  grid-template-columns: 1.1fr .85fr .75fr;
}


/* =========================================================
   35.9 Barras horizontais compactas
   ========================================================= */

.compactBarRow {
  margin-bottom: 10px;
}

.compactBarRow:last-child {
  margin-bottom: 0;
}

.compactBarTop {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-bottom: 5px;
  font-size: 12px;
}

.compactBarTop strong {
  min-width: 0;
  color: #0f172a;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compactBarTop span {
  color: #64748b;
  white-space: nowrap;
}

.compactBarTrack {
  height: 10px;
  background: #edf2f7;
  border-radius: 999px;
  overflow: hidden;
}

.compactBarFill {
  height: 100%;
  border-radius: 999px;
}


/* =========================================================
   35.10 Ranking de dispositivos
   ========================================================= */

.compactRankItem {
  display: grid;
  grid-template-columns: 28px 1fr 42px;
  gap: 9px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eef2f7;
}

.compactRankItem:last-child {
  border-bottom: 0;
}

.compactRankItem b {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #eff8ff;
  color: var(--blue);
  font-size: 12px;
}

.compactRankItem div {
  min-width: 0;
}

.compactRankItem strong {
  display: block;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compactRankItem span {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compactRankItem em {
  justify-self: end;
  min-width: 34px;
  padding: 5px 7px;
  border-radius: 999px;
  background: #fee4e2;
  color: var(--red);
  text-align: center;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}


/* =========================================================
   35.11 Garantia e bateria
   ========================================================= */

.compactDualStatus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.compactDualStatus > div {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}


/* =========================================================
   35.12 Tendência compacta
   ========================================================= */

.compactMiniTrend {
  height: 132px;
  display: flex;
  align-items: end;
  justify-content: space-around;
  gap: 10px;
  padding: 8px 6px 0;
  border-bottom: 1px solid #e2e8f0;
  background:
    repeating-linear-gradient(
      to top,
      transparent,
      transparent 25px,
      #f1f5f9 26px
    );
}

.compactMiniTrend div {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 52px;
}

.compactMiniTrend span {
  width: 24px;
  min-height: 4px;
  border-radius: 8px 8px 0 0;
}

.compactMiniTrend strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.compactMiniTrend small {
  color: #64748b;
  font-size: 10px;
}

.compactNote {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 11px;
  line-height: 1.4;
}


/* =========================================================
   35.13 Estado vazio e rodapé
   ========================================================= */

.compactEmpty {
  padding: 24px 12px;
  text-align: center;
  color: #64748b;
  font-size: 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
}

.compactFooterNote {
  margin-top: 14px;
  padding: 10px 12px;
  text-align: center;
  color: #64748b;
  font-size: 11px;
  border-top: 1px solid #e2e8f0;
}


/* =========================================================
   35.14 Ajustes para telas menores
   ========================================================= */

@media (max-width: 1280px) {
  .compactKpiGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .compactSummaryGrid,
  .compactGrid--two,
  .compactGrid--three {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .compactHeader {
    display: grid;
  }

  .compactHeaderMeta {
    min-width: 0;
    text-align: left;
  }

  .compactKpiGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compactGaugeGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compactDualStatus {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .compactKpiGrid,
  .compactGaugeGrid {
    grid-template-columns: 1fr;
  }

  .compactHeader h2 {
    font-size: 20px;
  }
}
/* =========================================================
   36. Ajuste fino - Dashboard compacto menor
   ---------------------------------------------------------
   Este bloco reduz um pouco os tamanhos da Visão Geral:
   cabeçalho, cards, painéis, medidores e espaçamentos.
   ========================================================= */


/* Reduz a largura visual geral entre os blocos */
.compactDashboardRoot {
  font-size: 12px;
}


/* =========================================================
   Cabeçalho azul menor
   ========================================================= */

.compactHeader {
  padding: 12px 16px;
  margin-bottom: 10px;
  border-radius: 15px;
  min-height: auto;
}

.compactHeader h2 {
  font-size: 20px;
  line-height: 1.1;
}

.compactHeader p {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
}

.compactHeaderMeta {
  min-width: 220px;
  gap: 4px;
  font-size: 11px;
}


/* =========================================================
   Cards de indicadores menores
   ========================================================= */

.compactKpiGrid {
  gap: 10px;
  margin-bottom: 10px;
}

.compactKpi {
  min-height: 72px;
  padding: 10px 12px;
  border-radius: 13px;
}

.compactKpi::before {
  width: 4px;
}

.compactKpi span {
  font-size: 10px;
}

.compactKpi strong {
  margin-top: 5px;
  font-size: 24px;
}

.compactKpi small {
  margin-top: 5px;
  font-size: 10px;
}


/* =========================================================
   Painéis menores
   ========================================================= */

.compactPanel {
  border-radius: 14px;
}

.compactPanelHead {
  padding: 10px 12px 8px;
}

.compactPanelHead h3 {
  font-size: 13px;
}

.compactPanelHead p {
  margin-top: 2px;
  font-size: 10px;
}

.compactPanelBody {
  padding: 12px;
}


/* =========================================================
   Reduz o resumo executivo
   ========================================================= */

.compactSummaryGrid {
  gap: 10px;
}

.compactInfoBox {
  gap: 6px;
}

.compactInfoBox div {
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 11px;
}


/* =========================================================
   Medidores circulares menores
   ========================================================= */

.compactGaugeGrid {
  gap: 8px;
}

.compactGaugeRing {
  width: 62px;
  height: 62px;
  margin-bottom: 4px;
}

.compactGaugeRing::after {
  inset: 8px;
}

.compactGaugeRing strong {
  font-size: 13px;
}

.compactGauge span {
  font-size: 10px;
}

.compactGauge small {
  font-size: 9px;
  line-height: 1.2;
}


/* =========================================================
   Status geral mais compacto
   ========================================================= */

.compactStatusBox h4,
.compactDualStatus h4 {
  padding: 7px 9px;
  font-size: 10px;
}

.compactStatusLine {
  padding: 6px 9px;
  font-size: 11px;
}


/* =========================================================
   Barras horizontais mais baixas
   ========================================================= */

.compactGrid {
  gap: 10px;
  margin-top: 10px;
}

.compactBarRow {
  margin-bottom: 8px;
}

.compactBarTop {
  margin-bottom: 4px;
  font-size: 11px;
}

.compactBarTrack {
  height: 8px;
}


/* =========================================================
   Ranking de dispositivos menor
   ========================================================= */

.compactRankItem {
  grid-template-columns: 24px 1fr 38px;
  gap: 8px;
  padding: 6px 0;
}

.compactRankItem b {
  width: 23px;
  height: 23px;
  border-radius: 8px;
  font-size: 11px;
}

.compactRankItem strong {
  font-size: 11px;
}

.compactRankItem span {
  font-size: 10px;
}

.compactRankItem em {
  min-width: 30px;
  padding: 4px 6px;
  font-size: 10px;
}


/* =========================================================
   Garantia, bateria e tendência menores
   ========================================================= */

.compactDualStatus {
  gap: 10px;
}

.compactDualStatus > div {
  border-radius: 10px;
}

.compactMiniTrend {
  height: 108px;
  gap: 8px;
}

.compactMiniTrend div {
  min-width: 44px;
}

.compactMiniTrend span {
  width: 20px;
}

.compactMiniTrend strong {
  font-size: 11px;
}

.compactMiniTrend small {
  font-size: 9px;
}

.compactNote {
  margin-top: 8px;
  font-size: 10px;
}


/* =========================================================
   Rodapé menor
   ========================================================= */

.compactFooterNote {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 10px;
}


/* =========================================================
   Ajuste extra para telas grandes
   ---------------------------------------------------------
   Em telas maiores, mantém os blocos mais condensados.
   ========================================================= */

@media (min-width: 1281px) {
  .compactKpiGrid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .compactSummaryGrid {
    grid-template-columns: .75fr 1.25fr .65fr;
  }

  .compactGrid--three {
    grid-template-columns: 1.05fr .8fr .7fr;
  }
}
/* =========================================================
   37. Gráfico visual - Indicadores técnicos
   ---------------------------------------------------------
   Substitui a antiga seção "Gargalos por tipo" por um
   gráfico de barras coloridas inspirado em infográfico.
   ========================================================= */

.infographicBars {
  min-height: 238px;
  display: grid;
  grid-template-columns: repeat(6, minmax(72px, 1fr));
  gap: 14px;
  align-items: end;
  padding: 14px 10px 4px;
  overflow-x: auto;
}

.infographicBarItem {
  position: relative;
  min-width: 72px;
  display: grid;
  justify-items: center;
  align-items: end;
}

.infographicBarValue {
  position: relative;
  z-index: 2;
  margin-bottom: 5px;
  color: #0f172a;
  font-size: 21px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.8px;
}

.infographicBarConnector {
  width: 1px;
  height: 16px;
  margin-bottom: -2px;
  background: linear-gradient(180deg, rgba(15, 23, 42, .22), transparent);
  transform: rotate(-22deg);
  transform-origin: bottom center;
}

.infographicBarBox {
  position: relative;
  width: 54px;
  min-height: 42px;
  border-radius: 9px 9px 6px 6px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 9px;
  color: #fff;
  font-size: 18px;
  font-weight: 950;
  box-shadow:
    0 16px 22px rgba(15, 23, 42, .16),
    inset -10px 0 16px rgba(255, 255, 255, .16),
    inset 8px 0 14px rgba(0, 0, 0, .10);
  transform: skewY(-2deg);
}

.infographicBarBox::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: -8px;
  height: 14px;
  border-radius: 9px 9px 3px 3px;
  background: rgba(255, 255, 255, .20);
  transform: skewX(-28deg);
}

.infographicBarBox::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255,255,255,.20), transparent 45%, rgba(0,0,0,.10)),
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 42%);
  pointer-events: none;
}

.infographicBarBox strong {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 7px rgba(0, 0, 0, .18);
}

.infographicBarLabel {
  min-height: 44px;
  margin-top: 9px;
  text-align: center;
}

.infographicBarLabel b {
  display: block;
  color: #0f172a;
  font-size: 11px;
  line-height: 1.15;
  font-weight: 950;
}

.infographicBarLabel span {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 9.5px;
  line-height: 1.2;
}

.infographicHint {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  color: #64748b;
  font-size: 10px;
  line-height: 1.35;
}


/* Cores individuais das barras */

.infographicBar--cpu {
  background: linear-gradient(180deg, #38bdf8, #0369a1);
}

.infographicBar--memory {
  background: linear-gradient(180deg, #a78bfa, #6d28d9);
}

.infographicBar--disk {
  background: linear-gradient(180deg, #fb7185, #be123c);
}

.infographicBar--battery {
  background: linear-gradient(180deg, #34d399, #059669);
}

.infographicBar--warranty {
  background: linear-gradient(180deg, #fbbf24, #d97706);
}

.infographicBar--offline {
  background: linear-gradient(180deg, #94a3b8, #334155);
}


/* Ajuste para telas menores */

@media (max-width: 1280px) {
  .infographicBars {
    grid-template-columns: repeat(6, minmax(76px, 1fr));
  }
}

@media (max-width: 820px) {
  .infographicBars {
    grid-template-columns: repeat(6, 82px);
    justify-content: start;
  }

  .infographicBarValue {
    font-size: 18px;
  }

  .infographicBarBox {
    width: 48px;
    font-size: 16px;
  }
}

/* =========================================================
   38. Indicadores técnicos - Lista clara
   ---------------------------------------------------------
   Substitui o gráfico decorativo por uma leitura objetiva:
   nome, percentual, barra, status e explicação.
   ========================================================= */

.techIndicatorsList {
  display: grid;
  gap: 10px;
}

.techIndicatorRow {
  padding: 10px 11px;
  border: 1px solid #e8eef6;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.techIndicatorMain {
  min-width: 0;
}

.techIndicatorTitle {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 7px;
}

.techIndicatorTitle strong {
  min-width: 0;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.techIndicatorValue {
  color: #0f172a;
  font-size: 16px;
  line-height: 1;
  font-weight: 950;
}

.techStatus {
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.techStatus--ok {
  color: #047857;
  background: #d1fae5;
}

.techStatus--warn {
  color: #92400e;
  background: #fef3c7;
}

.techStatus--bad {
  color: #b91c1c;
  background: #fee2e2;
}

.techStatus--muted {
  color: #475569;
  background: #e2e8f0;
}

.techIndicatorBar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5eaf1;
}

.techIndicatorFill {
  height: 100%;
  min-width: 3px;
  border-radius: 999px;
  transition: width .25s ease;
}

.techIndicatorFill--cpu {
  background: linear-gradient(90deg, #38bdf8, #0369a1);
}

.techIndicatorFill--memory {
  background: linear-gradient(90deg, #a78bfa, #6d28d9);
}

.techIndicatorFill--disk {
  background: linear-gradient(90deg, #fb7185, #be123c);
}

.techIndicatorFill--battery {
  background: linear-gradient(90deg, #34d399, #059669);
}

.techIndicatorFill--warranty {
  background: linear-gradient(90deg, #fbbf24, #d97706);
}

.techIndicatorFill--offline {
  background: linear-gradient(90deg, #94a3b8, #334155);
}

.techIndicatorRow p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 10.5px;
  line-height: 1.35;
}

.techIndicatorsLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #eef2f7;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.techIndicatorsLegend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.legendDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legendDot--ok {
  background: #10b981;
}

.legendDot--warn {
  background: #f59e0b;
}

.legendDot--bad {
  background: #ef4444;
}

.legendDot--muted {
  background: #94a3b8;
}


/* Opcional: esconde o estilo antigo do gráfico 3D se ele ainda estiver no CSS */
.infographicBars,
.infographicHint {
  display: none;
}
/* =========================================================
   39. Saúde por cliente - Minimalista e objetiva
   ========================================================= */

.clientHealthList {
  display: grid;
  gap: 7px;
}

.clientHealthItem {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #edf2f7;
  border-radius: 11px;
  background: #ffffff;
}

.clientHealthName {
  min-width: 0;
}

.clientHealthName strong {
  display: block;
  color: #0f172a;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clientHealthName span {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
}

.clientHealthMeta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.clientHealthMeta span {
  color: #475569;
  font-size: 10.5px;
  font-weight: 800;
}

.clientHealthBadge {
  min-width: 54px;
  padding: 5px 8px;
  border-radius: 999px;
  text-align: center;
  font-size: 9px;
  line-height: 1;
  font-style: normal;
  font-weight: 950;
}

.clientHealthBadge--ok {
  color: #047857;
  background: #d1fae5;
}

.clientHealthBadge--warn {
  color: #92400e;
  background: #fef3c7;
}

.clientHealthBadge--bad {
  color: #b91c1c;
  background: #fee2e2;
}

@media (max-width: 720px) {
  .clientHealthItem {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .clientHealthMeta {
    justify-content: space-between;
  }
}
/* =========================================================
   40. Resumo executivo - Limpo e objetivo
   ========================================================= */

.executiveSummaryClean {
  display: grid;
  gap: 14px;
}

.executiveNumbers {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
}

.executiveNumberItem {
  min-height: 74px;
  padding: 12px;
  border: 1px solid #e8eef6;
  border-radius: 13px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.executiveNumberItem span {
  display: block;
  color: #64748b;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.executiveNumberItem strong {
  display: block;
  margin-top: 7px;
  color: #0f172a;
  font-size: 24px;
  line-height: 1;
  font-weight: 950;
}

.executiveNumberItem strong.is-ok {
  color: #059669;
}

.executiveNumberItem strong.is-warn {
  color: #d97706;
}

.executiveNumberItem strong.is-bad {
  color: #dc2626;
}

.executiveNumberItem small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 10px;
  line-height: 1.25;
  font-weight: 700;
}

.executiveIndicators {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.executiveIndicatorItem {
  display: grid;
  place-items: center;
  min-height: 118px;
  padding: 8px;
  border: 1px solid #eef2f7;
  border-radius: 13px;
  background: #ffffff;
}

@media (max-width: 980px) {
  .executiveNumbers,
  .executiveIndicators {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

@media (max-width: 560px) {
  .executiveNumbers,
  .executiveIndicators {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   41. Gráficos de pizza - Saúde por cliente e indicadores
   ========================================================= */

.piePanel {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 18px;
  align-items: center;
  min-height: 190px;
}

.pieChartWrap {
  display: grid;
  place-items: center;
}

.pieChart {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    conic-gradient(
      #059669 0% calc(var(--ok) * 1%),
      #d97706 calc(var(--ok) * 1%) calc(var(--warn) * 1%),
      #dc2626 calc(var(--warn) * 1%) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(15, 23, 42, .04),
    0 12px 26px rgba(15, 23, 42, .08);
}

.pieChartCenter {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #e5edf6;
}

.pieChartCenter strong {
  color: #0f172a;
  font-size: 22px;
  line-height: 1;
  font-weight: 950;
}

.pieChartCenter span {
  margin-top: 5px;
  color: #64748b;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
}

.pieInfo {
  min-width: 0;
}

.pieMainNumber {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #edf2f7;
  border-radius: 13px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.pieMainNumber span {
  display: block;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.pieMainNumber strong {
  display: block;
  margin-top: 5px;
  color: #0f172a;
  font-size: 20px;
  line-height: 1;
  font-weight: 950;
}

.pieMainNumber small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 10.5px;
  line-height: 1.25;
  font-weight: 700;
}

.pieLegend {
  display: grid;
  gap: 7px;
}

.pieLegend div {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 8px;
  align-items: center;
  min-height: 27px;
  padding: 6px 8px;
  border: 1px solid #edf2f7;
  border-radius: 10px;
  background: #ffffff;
}

.pieLegend span {
  color: #475569;
  font-size: 11px;
  font-weight: 800;
}

.pieLegend strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 950;
}

.pieDot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.pieDot--ok {
  background: #059669;
}

.pieDot--warn {
  background: #d97706;
}

.pieDot--bad {
  background: #dc2626;
}

.techMiniList {
  display: grid;
  grid-template-columns: repeat(2, minmax(90px, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}

.techMiniList div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid #edf2f7;
  border-radius: 10px;
  background: #ffffff;
}

.techMiniList span {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 800;
}

.techMiniList strong {
  color: #0f172a;
  font-size: 11px;
  font-weight: 950;
}

@media (max-width: 820px) {
  .piePanel {
    grid-template-columns: 1fr;
  }

  .pieChart {
    width: 132px;
    height: 132px;
  }

  .pieChartCenter {
    width: 80px;
    height: 80px;
  }
}
/* =========================================================
   42. Logotipo novo do Pulse Central
   ---------------------------------------------------------
   Controla o logotipo no menu lateral e na tela de login.
   O fundo claro no menu ajuda o logo a aparecer melhor.
   ========================================================= */

/* Área do logo no menu lateral */
.brandWithLogo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 18px 14px;
  margin: 14px 12px 18px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

/* Imagem do logo no menu lateral */
.brandLogo {
  display: block;
  width: 165px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Logo na tela de login, caso seja usado diretamente no HTML */
.loginLogo {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 18px;
}

/*
  Quando o menu lateral fica compacto, o logo também precisa diminuir
  para não ficar cortado.
*/
@media (max-width: 980px) {
  .brandWithLogo {
    margin: 12px 8px 14px;
    padding: 10px 6px;
    border-radius: 14px;
  }

  .brandLogo {
    width: 46px;
  }
}

/* Em celulares, mantém o logo pequeno no menu lateral */
@media (max-width: 700px) {
  .brandWithLogo {
    margin: 10px 7px 14px;
    padding: 9px 5px;
    border-radius: 12px;
  }

  .brandLogo {
    width: 44px;
  }

  .loginLogo {
    width: 220px;
  }
}