/*
===============================================================================
  GENESIS AIoT - Estilos do painel de sensores BMS
===============================================================================
  Todos os estilos prefixados com .aiot-* . Sem impacto no resto do projeto.
*/

/* ==========================================================================
   MODAL FLUTUANTE (default) - estilo similar ao painel da câmera
   Largura de celular (~380px), semi-transparente, draggable pelo header.
   Backdrop só aparece no modo fullscreen.
   ========================================================================== */
.aiot-modal{
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: none;
  font-family: 'Rajdhani', 'Orbitron', sans-serif;
  color: #e0f7ff;
  pointer-events: none;     /* cliques passam direto - só o .aiot-modal-box pega */
}
.aiot-modal.aiot-open{ display: block; }

/* Backdrop só no fullscreen */
.aiot-modal-backdrop{
  position: absolute; inset: 0;
  background: transparent;
  pointer-events: none;
  transition: background .25s;
}
.aiot-modal.aiot-fullscreen .aiot-modal-backdrop{
  background: rgba(0, 5, 16, 0.78);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  pointer-events: auto;
}

.aiot-modal-box{
  position: absolute;
  top: 70px;
  right: 20px;
  width: 380px;
  height: calc(100vh - 100px);
  max-height: 720px;
  min-width: 320px;
  min-height: 400px;
  max-width: 92vw;
  /* Container query - permite que .aiot-gauges, etc. reagirem à largura do
     próprio modal (não da viewport) */
  container-type: inline-size;
  container-name: aiot-box;
  background: linear-gradient(180deg, rgba(0, 10, 25, 0.85), rgba(0, 20, 45, 0.78));
  border: 1px solid rgba(0, 240, 255, 0.45);
  border-radius: 14px;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 16px 50px rgba(0, 240, 255, 0.35),
              0 0 0 1px rgba(0, 240, 255, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0.78;            /* semi-transparente em idle */
  pointer-events: auto;     /* só o painel captura cliques */
  resize: both;             /* canto inferior direito redimensiona */
  animation: aiotIn .3s cubic-bezier(.4, 0, .2, 1);
  transition: opacity .25s, top .25s, right .25s, bottom .25s, left .25s,
              width .25s, height .25s, border-radius .25s;
}
.aiot-modal-box:hover,
.aiot-modal-box:focus-within{
  opacity: 1;
}
@keyframes aiotIn{
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to   { opacity: 0.78; transform: scale(1) translateY(0); }
}

/* Header com cursor de arrastar (drag handle) */
.aiot-modal-box .aiot-header{
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
}
.aiot-modal-box .aiot-header:active{ cursor: grabbing; }
/* Botões e selects no header não disparam drag */
.aiot-modal-box .aiot-header button,
.aiot-modal-box .aiot-header select,
.aiot-modal-box .aiot-header input{
  cursor: pointer;
}

/* ESTADO MINIMIZADO - só o header fica visível
   Largura preservada para manter o título legível. */
.aiot-modal.aiot-minimized .aiot-modal-box{
  height: auto !important;
  min-height: 0;
  max-height: none;
  resize: none;
  overflow: hidden;
  opacity: 0.92;
}
.aiot-modal.aiot-minimized .aiot-kpi-bar,
.aiot-modal.aiot-minimized .aiot-filter-bar,
.aiot-modal.aiot-minimized .aiot-body,
.aiot-modal.aiot-minimized .aiot-sensor-modal,
.aiot-modal.aiot-minimized .aiot-settings,
.aiot-modal.aiot-minimized .aiot-resize-handle{
  display: none !important;
}
.aiot-modal.aiot-minimized .aiot-header{
  border-bottom: none;
  border-radius: 14px;
}

/* HEADER RECOLHIDO - esconde KPI bar + filter bar para maximizar a área
   dos sensores. Funciona tanto em modal quanto em fullscreen.
   Quando recolhido, o bottom-border do header fica visível como divisor
   pequeno e o body cola direto embaixo do título.
   O botão do toggle inverte a seta (⌃ → ⌄) via JS. */
.aiot-modal-box.aiot-header-collapsed .aiot-kpi-bar,
.aiot-modal-box.aiot-header-collapsed .aiot-filter-bar{
  display: none !important;
}
.aiot-modal-box.aiot-header-collapsed .aiot-header{
  border-bottom: 1px solid rgba(0, 240, 255, 0.18);
}

/* HANDLE VISUAL DE RESIZE - canto inferior direito, três traços diagonais */
.aiot-resize-handle{
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  background-image:
    linear-gradient(135deg,
      transparent 0%, transparent 40%,
      rgba(0, 240, 255, 0.55) 41%, rgba(0, 240, 255, 0.55) 46%,
      transparent 47%, transparent 60%,
      rgba(0, 240, 255, 0.55) 61%, rgba(0, 240, 255, 0.55) 66%,
      transparent 67%, transparent 80%,
      rgba(0, 240, 255, 0.55) 81%, rgba(0, 240, 255, 0.55) 86%,
      transparent 87%, transparent 100%);
  opacity: 0.6;
  transition: opacity .2s;
}
.aiot-modal-box:hover .aiot-resize-handle{ opacity: 1; }
.aiot-modal.aiot-fullscreen .aiot-resize-handle{ display: none; }

/* Fullscreen real - ocupa viewport todo, sem transparência */
.aiot-modal.aiot-fullscreen .aiot-modal-box{
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  max-width: none !important;
  border-radius: 0;
  border-width: 0;
  opacity: 1;
  resize: none;
  background: linear-gradient(180deg, rgba(0, 10, 25, 0.97), rgba(0, 20, 45, 0.95));
}
.aiot-modal.aiot-fullscreen .aiot-modal-box .aiot-header{ cursor: default; }

@media (max-width: 480px){
  .aiot-modal-box{
    top: 60px;
    right: 8px;
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
  }
}


/* ==========================================================================
   HEADER
   ========================================================================== */
.aiot-header{
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* título + ícones agrupados à esquerda */
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.16), rgba(0, 240, 255, 0.04));
  border-bottom: 1px solid rgba(0, 240, 255, 0.35);
  flex-shrink: 0;
  gap: 12px;
  flex-wrap: nowrap;
}
.aiot-title{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2.5px;
  color: #00f0ff;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}
.aiot-title-icon{
  width: 14px; height: 14px;
  border: 1.5px solid #00f0ff;
  border-radius: 3px;
  position: relative;
  box-shadow: 0 0 6px #00f0ff;
}
.aiot-title-icon::after{
  content: '';
  position: absolute;
  inset: 3px;
  background: radial-gradient(circle, #00f0ff 30%, transparent 35%);
}
.aiot-header-actions{
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
}


/* ==========================================================================
   KPI BAR
   ========================================================================== */
.aiot-kpi-bar{
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 2 colunas no modo floating */
  gap: 8px;
  padding: 12px 14px 4px;
  flex-shrink: 0;
}
/* No modo fullscreen, expande para 4 colunas em telas largas */
.aiot-modal.aiot-fullscreen .aiot-kpi-bar{
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px 20px 4px;
}
@media (max-width: 768px){
  .aiot-modal.aiot-fullscreen .aiot-kpi-bar{ grid-template-columns: repeat(2, 1fr); }
}
.aiot-kpi-card{
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: transform .2s;
}
.aiot-modal.aiot-fullscreen .aiot-kpi-card{ padding: 14px 18px; }
.aiot-kpi-card:hover{ transform: translateY(-2px); }
.aiot-kpi-value{
  font-family: 'Orbitron', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.aiot-modal.aiot-fullscreen .aiot-kpi-value{ font-size: 28px; }
.aiot-kpi-label{
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: rgba(0, 240, 255, 0.7);
  text-transform: uppercase;
}
.aiot-modal.aiot-fullscreen .aiot-kpi-label{ font-size: 9px; letter-spacing: 2px; }
.aiot-kpi-online  .aiot-kpi-value{ color: #57d68f; text-shadow: 0 0 8px rgba(87, 214, 143, 0.4); }
.aiot-kpi-offline .aiot-kpi-value{ color: #c4c0c8; }
.aiot-kpi-alert   .aiot-kpi-value{ color: #f7451f; text-shadow: 0 0 8px rgba(247, 69, 31, 0.5); }


/* ==========================================================================
   FILTER BAR
   ========================================================================== */
.aiot-filter-bar{
  display: flex;
  gap: 8px;
  padding: 10px 14px 12px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.18);
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
}
.aiot-modal.aiot-fullscreen .aiot-filter-bar{ gap: 12px; padding: 10px 20px 14px; }
.aiot-filter-search{
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 20, 40, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 6px;
  padding: 6px 10px;
  min-width: 100%;
  flex: 1;
}
.aiot-modal.aiot-fullscreen .aiot-filter-search{ min-width: 220px; }
.aiot-search-icon{ color: rgba(0, 240, 255, 0.55); font-size: 12px; }
.aiot-search-input{
  background: transparent;
  border: none;
  outline: none;
  color: #e0f7ff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  width: 100%;
}
.aiot-search-input::placeholder{ color: rgba(0, 240, 255, 0.4); }

.aiot-filter-status{ display: flex; gap: 4px; }
.aiot-status-btn{
  background: transparent;
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: rgba(0, 240, 255, 0.6);
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 5px;
  cursor: pointer;
  transition: .15s;
}
.aiot-status-btn:hover{ color: #00f0ff; border-color: #00f0ff; }
.aiot-status-btn.aiot-active{
  background: rgba(0, 240, 255, 0.2);
  border-color: #00f0ff;
  color: #00f0ff;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

.aiot-view-toggle{
  display: flex;
  gap: 4px;
  border-left: 1px solid rgba(0, 240, 255, 0.2);
  padding-left: 12px;
}
.aiot-view-btn{
  background: transparent;
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: rgba(0, 240, 255, 0.55);
  width: 32px; height: 32px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
}
.aiot-view-btn:hover{ color: #00f0ff; border-color: #00f0ff; }
.aiot-view-btn.aiot-active{
  background: rgba(0, 240, 255, 0.18);
  border-color: #00f0ff;
  color: #00f0ff;
}

.aiot-refresh-ctrl{
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;
}
.aiot-refresh-btn{
  background: transparent;
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00f0ff;
  width: 32px; height: 32px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}
.aiot-refresh-btn:hover{ background: rgba(0, 240, 255, 0.18); }
.aiot-refresh-btn.aiot-spinning .aiot-refresh-icon{
  display: inline-block;
  animation: aiotSpin 1s linear infinite;
}
@keyframes aiotSpin{ to { transform: rotate(360deg); } }

.aiot-interval-select{
  background: rgba(0, 20, 40, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #e0f7ff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
}
.aiot-interval-select option{ background: #001020; color: #e0f7ff; }

.aiot-last-update{
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(0, 240, 255, 0.5);
  white-space: nowrap;
}


/* ==========================================================================
   BODY
   ========================================================================== */
.aiot-body{
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.aiot-body::-webkit-scrollbar{ width: 6px; }
.aiot-body::-webkit-scrollbar-thumb{ background: rgba(0, 240, 255, 0.3); border-radius: 3px; }

.aiot-empty{
  text-align: center;
  padding: 60px 20px;
  color: rgba(0, 240, 255, 0.55);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  line-height: 1.7;
}


/* ==========================================================================
   GRUPOS
   ========================================================================== */
.aiot-group{
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
}
.aiot-group-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.12), rgba(0, 240, 255, 0.04));
  border-bottom: 1px solid rgba(0, 240, 255, 0.18);
  cursor: pointer;
  gap: 10px;
  user-select: none;
}
.aiot-group-head strong{
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: #00f0ff;
  flex: 1;
  min-width: 0;
}
.aiot-group-chevron{
  font-size: 11px;
  color: rgba(0, 240, 255, 0.6);
}
.aiot-group-badge{
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  border-radius: 10px;
}
.aiot-badge-ok      { background: rgba(11, 150, 22, 0.2);  border: 1px solid #0b9616; color: #57d68f; }
.aiot-badge-alert   { background: rgba(247, 69, 31, 0.2);  border: 1px solid #f7451f; color: #f7451f; }
.aiot-badge-offline { background: rgba(196, 192, 200, 0.2); border: 1px solid #9f9ca2; color: #c4c0c8; }

.aiot-group-body{ padding: 14px; }


/* ==========================================================================
   CARDS view
   ========================================================================== */
.aiot-cards{
  display: grid;
  grid-template-columns: 1fr;        /* coluna única no modo floating estreito */
  gap: 10px;
}
.aiot-modal.aiot-fullscreen .aiot-cards{
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.aiot-card{
  border-radius: 8px;
  color: #fff;
  padding: 16px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.aiot-card:hover{ transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }

/* Gradientes de status - inspirado nas classes do prompt Angular */
.aiot-card-blue-light{ background: linear-gradient(135deg, #89d1f5, #64c6f7); }
.aiot-card-blue-dark { background: linear-gradient(135deg, #096492, #065177); }
.aiot-card-green     { background: linear-gradient(135deg, #0b9616, #098813); }
.aiot-card-red       { background: linear-gradient(135deg, #f7451f, #f7340a); }
.aiot-card-gray      { background: linear-gradient(135deg, #c4c0c8, #9f9ca2); }

/* Cores temáticas por PARÂMETRO (modo simulador).
   IMPORTANTE: vermelho e amarelo são reservados para alarmes - evitamos.
   - Energia (sim_energia)  → turquesa (ciano Genesis puxando pro verde)
   - Água (sim_agua)        → azul-oceano
   - Gases (sim_gases)      → verde medicinal (puro)
   - Vacinas (sim_vacinas)  → ciano gelo (refrigeração) */
.aiot-card-energy {
  background: linear-gradient(135deg, #7df5dc, #008a6a);
  box-shadow: 0 0 0 1px rgba(0, 240, 192, 0.6),
              0 4px 14px rgba(0, 240, 192, 0.35);
}
.aiot-card-water {
  background: linear-gradient(135deg, #5cd4ff, #008fc7);
  box-shadow: 0 0 0 1px rgba(0, 184, 255, 0.6),
              0 4px 14px rgba(0, 184, 255, 0.35);
}
.aiot-card-gas {
  background: linear-gradient(135deg, #5cffb5, #00b35e);
  box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.6),
              0 4px 14px rgba(0, 255, 136, 0.35);
}

/* CORES POR GÁS - ABNT NBR 12188 (Sistema Centralizado de Gases Medicinais) */
.aiot-card-gas-o2 {                           /* Oxigênio - VERDE */
  background: linear-gradient(135deg, #2ecc71, #00a651);
  box-shadow: 0 4px 14px rgba(0, 166, 81, 0.45);
}
.aiot-card-gas-no {                           /* N₂O - AZUL Genebra */
  background: linear-gradient(135deg, #4a6dca, #002fa7);
  box-shadow: 0 4px 14px rgba(0, 47, 167, 0.5);
}
.aiot-card-gas-ar {                           /* Ar Comprimido Med. - AMARELO */
  background: linear-gradient(135deg, #f7d83a, #c79a00);
  box-shadow: 0 4px 14px rgba(212, 173, 0, 0.45);
  color: #1a1a1a;                             /* texto escuro pq amarelo é claro */
}
.aiot-card-gas-ar .aiot-card-value,
.aiot-card-gas-ar .aiot-card-name,
.aiot-card-gas-ar .aiot-card-range{ color: #1a1a1a; }
.aiot-card-gas-vc {                           /* Vácuo Clínico - BRANCO */
  background: linear-gradient(135deg, #ecf0f1, #95a5a6);
  box-shadow: 0 4px 14px rgba(189, 195, 199, 0.55);
  color: #1a1a1a;
}
.aiot-card-gas-vc .aiot-card-value,
.aiot-card-gas-vc .aiot-card-name,
.aiot-card-gas-vc .aiot-card-range{ color: #1a1a1a; }
.aiot-card-gas-n2 {                           /* Nitrogênio - PRETO */
  background: linear-gradient(135deg, #4a5e72, #1a252f);
  box-shadow: 0 4px 14px rgba(52, 73, 94, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.aiot-card-gas-co {                           /* CO₂ - CINZA */
  background: linear-gradient(135deg, #b0bcbd, #5d6d7e);
  box-shadow: 0 4px 14px rgba(127, 140, 141, 0.4);
}
.aiot-card-vaccine {
  background: linear-gradient(135deg, #7ce8ff, #00abd2);
  box-shadow: 0 0 0 1px rgba(51, 221, 255, 0.6),
              0 4px 14px rgba(51, 221, 255, 0.35);
}

/* Header dos grupos simulados ganha um filete da cor do parâmetro
   (data-group-id está no .aiot-group-head) */
.aiot-group-head[data-group-id="sim_energia"]{ border-left: 4px solid #00f0c0; padding-left: 12px; box-shadow: -2px 0 8px rgba(0, 240, 192, 0.3); }
.aiot-group-head[data-group-id="sim_agua"]   { border-left: 4px solid #00b8ff; padding-left: 12px; box-shadow: -2px 0 8px rgba(0, 184, 255, 0.3); }
.aiot-group-head[data-group-id="sim_gases"]  { border-left: 4px solid #00ff88; padding-left: 12px; box-shadow: -2px 0 8px rgba(0, 255, 136, 0.3); }
.aiot-group-head[data-group-id="sim_vacinas"]{ border-left: 4px solid #33ddff; padding-left: 12px; box-shadow: -2px 0 8px rgba(51, 221, 255, 0.3); }

.aiot-card-value{
  font-family: 'Orbitron', sans-serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.aiot-card-name{
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.92;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aiot-progress{
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}
.aiot-progress-fill{
  height: 100%;
  transition: width .6s ease;
  border-radius: 2px;
}
.aiot-prog-low { background: #fff; }
.aiot-prog-mid { background: #ffe566; }
.aiot-prog-high{ background: #ff8a40; }
.aiot-card-range{
  display: flex;
  justify-content: space-between;
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  letter-spacing: 1px;
  opacity: 0.85;
}

.aiot-blink{ animation: aiotBlink 1.4s linear infinite; }
@keyframes aiotBlink{ 50% { opacity: .55; } }


/* ==========================================================================
   TABLE view
   ========================================================================== */
.aiot-table{
  width: 100%;
  border-collapse: collapse;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
}
.aiot-table th{
  background: rgba(0, 240, 255, 0.08);
  color: rgba(0, 240, 255, 0.85);
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 700;
  text-align: left;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
}
.aiot-table th:hover{ color: #00f0ff; }
.aiot-table td{
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.08);
  color: #e0f7ff;
}
.aiot-table tbody tr{ cursor: pointer; transition: .15s; }
.aiot-table tbody tr:hover td{ background: rgba(0, 240, 255, 0.06); }
.aiot-row-offline td{ color: rgba(255, 255, 255, 0.4); }
.aiot-row-alert td{ color: #f7451f; }
.aiot-val-cell{ font-weight: 700; font-family: 'Orbitron', sans-serif; font-size: 12px; }
.aiot-offline-badge{
  background: rgba(196, 192, 200, 0.2);
  color: #c4c0c8;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
}
.aiot-status-dot{
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
}
.aiot-dot-online { background: #57d68f; box-shadow: 0 0 6px #57d68f; }
.aiot-dot-offline{ background: #9f9ca2; }
.aiot-dot-alert  { background: #f7451f; box-shadow: 0 0 6px #f7451f; animation: aiotBlink 1.2s infinite; }


/* ==========================================================================
   GAUGE view
   ========================================================================== */
.aiot-gauges{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* minmax(0,1fr) impede overflow */
  gap: 10px;
}
.aiot-modal.aiot-fullscreen .aiot-gauges{
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.aiot-gauge-wrap{
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: 10px;
  padding: 12px 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: .2s;
  min-width: 0;             /* permite o grid encolher sem estourar */
  overflow: hidden;         /* trava qualquer vazamento */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.aiot-gauge-wrap:hover{ transform: translateY(-2px); border-color: rgba(0, 240, 255, 0.4); }
.aiot-gauge-name{
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(224, 247, 255, 0.85);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.aiot-gauge-svg{
  width: 100%;
  max-width: 160px;
  height: auto;
  display: block;
  margin: 0 auto;
  /* Aspect ratio = 120/78 para reservar altura correta sem dependerda altura "auto" */
  aspect-ratio: 120 / 78;
}
.aiot-gauge-range{
  display: flex;
  justify-content: space-between;
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(0, 240, 255, 0.5);
  margin-top: 2px;
  padding: 0 6px;
  max-width: 100%;
  box-sizing: border-box;
}
.aiot-gauge-range span{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50%;
}

/* Em telas estreitas dentro do modal floating, reduz para 1 coluna */
@container aiot-box (max-width: 360px){
  .aiot-gauges{ grid-template-columns: 1fr; }
}


/* ==========================================================================
   VIEW PERFORMANCE / GLASS - foco em alertas
   - Cards translúcidos (frosted glass)
   - Monocromático em estado normal
   - Cor SÓ em alerta ou próximo do alerta
   - Sem animações em estado normal → renderiza centenas de sensores fluidamente
   ========================================================================== */
.aiot-perf-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.aiot-modal.aiot-fullscreen .aiot-perf-grid{
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
@container aiot-box (min-width: 500px){
  .aiot-perf-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container aiot-box (min-width: 700px){
  .aiot-perf-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ─── Célula em estado NORMAL: glass monocromático ─── */
.aiot-perf-cell{
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.78);   /* texto cinza claro mono */
}
.aiot-perf-cell:hover{
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.aiot-perf-name{
  font-family: 'Rajdhani', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.aiot-perf-val{
  font-family: 'Orbitron', sans-serif;
  line-height: 1;
}
.aiot-perf-val strong{
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}
.aiot-perf-val small{
  font-size: 9px;
  letter-spacing: 0.5px;
  opacity: 0.55;
  font-weight: 500;
}

/* Barra de progresso fina monocromática */
.aiot-perf-bar{
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.aiot-perf-fill{
  height: 100%;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 2px;
  transition: width .5s, background .25s;
}

/* Footer com Min/Max e ícone de estado */
.aiot-perf-meta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.35);
}
.aiot-perf-state{
  font-size: 11px;
  line-height: 1;
}

/* ─── Estado PRÓXIMO DO ALERTA (15% da margem) - âmbar/laranja ─── */
.aiot-perf-near{
  background: rgba(255, 170, 0, 0.07);
  border-color: rgba(255, 170, 0, 0.45);
  color: rgba(255, 200, 100, 0.95);
}
.aiot-perf-near .aiot-perf-name{ color: rgba(255, 200, 100, 0.85); }
.aiot-perf-near .aiot-perf-val strong{
  color: #ffaa00;
  text-shadow: 0 0 1px #ffaa00, 0 0 3px rgba(255, 170, 0, 0.6);
}
.aiot-perf-near .aiot-perf-fill{ background: #ffaa00; }
.aiot-perf-near .aiot-perf-state{ color: #ffaa00; }

/* ─── Estado ALERTA (fora de faixa) - vermelho pulsante ─── */
.aiot-perf-alert{
  background: rgba(247, 69, 31, 0.10);
  border-color: rgba(247, 69, 31, 0.7);
  color: rgba(255, 200, 200, 0.95);
  animation: aiotPerfPulse 1.4s ease-in-out infinite;
}
@keyframes aiotPerfPulse{
  0%, 100% { box-shadow: 0 0 0 0 rgba(247, 69, 31, 0); }
  50%      { box-shadow: 0 0 12px 1px rgba(247, 69, 31, 0.5); }
}
.aiot-perf-alert .aiot-perf-name{ color: rgba(255, 180, 180, 0.85); }
.aiot-perf-alert .aiot-perf-val strong{
  color: #ff4f30;
  text-shadow: 0 0 1px #ff4f30, 0 0 4px rgba(247, 69, 31, 0.7);
}
.aiot-perf-alert .aiot-perf-fill{ background: #ff4f30; }
.aiot-perf-alert .aiot-perf-state{ color: #ff4f30; }

/* ─── Estado OFFLINE - cinza/apagado ─── */
.aiot-perf-offline{
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.30);
  opacity: 0.6;
}
.aiot-perf-offline .aiot-perf-val strong{ color: rgba(255, 255, 255, 0.45); }
.aiot-perf-offline .aiot-perf-fill{ background: rgba(255, 255, 255, 0.1); }
.aiot-perf-offline .aiot-perf-state{ color: rgba(255, 255, 255, 0.4); }

/* Tema CLARO - glass invertido (vidro sobre fundo claro) */
body.light-theme .aiot-perf-cell{
  background: rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(10px) saturate(1.05);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.78);
}
body.light-theme .aiot-perf-cell:hover{
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.22);
}
body.light-theme .aiot-perf-name{ color: rgba(0, 0, 0, 0.65); }
body.light-theme .aiot-perf-val strong{ color: rgba(0, 0, 0, 0.95); }
body.light-theme .aiot-perf-fill{ background: rgba(0, 0, 0, 0.4); }
body.light-theme .aiot-perf-bar{ background: rgba(0, 0, 0, 0.08); }
body.light-theme .aiot-perf-meta{ color: rgba(0, 0, 0, 0.4); }
body.light-theme .aiot-perf-near{
  background: rgba(255, 140, 0, 0.10);
  border-color: rgba(220, 120, 0, 0.5);
  color: #8a4a00;
}
body.light-theme .aiot-perf-near .aiot-perf-val strong{ color: #c97000; }
body.light-theme .aiot-perf-alert{
  background: rgba(220, 50, 0, 0.10);
  border-color: rgba(220, 50, 0, 0.65);
  color: #8a1500;
}
body.light-theme .aiot-perf-alert .aiot-perf-val strong{ color: #c92500; }

/* Reduced motion: desativa o pulse */
@media (prefers-reduced-motion: reduce){
  .aiot-perf-alert{ animation: none; }
}


/* ==========================================================================
   BALÃO + PAINEL DE CHAT IA GENESIS (só em fullscreen do AIoT)
   ========================================================================== */

/* Balão flutuante no canto inferior direito - só aparece em FULLSCREEN.
   Usa a imagem da logo iA dentro de uma moldura redonda ciano. */
.aiot-chat-bubble{
  display: none;
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #000;
  border: 2px solid rgba(0, 240, 255, 0.7);
  color: #001020;
  cursor: pointer;
  z-index: 105;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 240, 255, 0.45),
              0 0 0 1px rgba(0, 240, 255, 0.3),
              0 0 12px rgba(0, 240, 255, 0.4);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  padding: 0;
  overflow: hidden;
}
.aiot-chat-bubble-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  pointer-events: none;     /* clique vai direto para o botão */
}
.aiot-modal.aiot-fullscreen .aiot-chat-bubble{ display: flex; }
.aiot-chat-bubble:hover{
  transform: scale(1.08);
  box-shadow: 0 10px 28px rgba(0, 240, 255, 0.6),
              0 0 0 2px rgba(0, 240, 255, 0.5);
}
.aiot-chat-bubble-hidden{ display: none !important; }    /* enquanto o chat está aberto */

/* Anel pulsante ao redor do balão (chama atenção) */
.aiot-chat-bubble-pulse{
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(0, 240, 255, 0.5);
  animation: aiotBubblePulse 2.5s ease-out infinite;
  pointer-events: none;
}
@keyframes aiotBubblePulse{
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* Painel do CHAT - flutuante, arrastável + REDIMENSIONÁVEL pelo canto inferior
   direito (resize: both nativo do CSS). 20% TRANSPARENTE em idle, opaco no
   hover/focus para facilitar leitura quando interagindo. */
.aiot-chat{
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 380px;
  height: 520px;
  min-width: 280px;
  min-height: 320px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 40px);
  z-index: 106;
  display: none;
  resize: both;             /* canto inferior direito redimensiona */
  overflow: hidden;         /* necessário para resize funcionar */
  opacity: 0.8;             /* 20% transparente em idle */
  transition: opacity .25s;
}
.aiot-chat.aiot-open{ display: block; }
.aiot-chat:hover,
.aiot-chat:focus-within{
  opacity: 1;
}
.aiot-modal:not(.aiot-fullscreen) .aiot-chat.aiot-open{
  /* O chat só existe em fullscreen (regra do balão). Em modo floating,
     mesmo se algo abrir, mantém escondido. */
  display: none;
}

.aiot-chat-box{
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 15, 30, 0.92), rgba(0, 25, 50, 0.88));
  border: 1px solid rgba(0, 240, 255, 0.45);
  border-radius: 12px;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 16px 50px rgba(0, 240, 255, 0.35),
              0 0 0 1px rgba(0, 240, 255, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: aiotChatIn .25s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  box-sizing: border-box;
}

/* Handle visual de redimensionamento - 3 traços diagonais no canto */
.aiot-chat-box::after{
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 14px;
  height: 14px;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    linear-gradient(135deg,
      transparent 0%, transparent 40%,
      rgba(0, 240, 255, 0.7) 41%, rgba(0, 240, 255, 0.7) 46%,
      transparent 47%, transparent 60%,
      rgba(0, 240, 255, 0.7) 61%, rgba(0, 240, 255, 0.7) 66%,
      transparent 67%, transparent 80%,
      rgba(0, 240, 255, 0.7) 81%, rgba(0, 240, 255, 0.7) 86%,
      transparent 87%, transparent 100%);
  transition: opacity .2s;
}
.aiot-chat:hover .aiot-chat-box::after{ opacity: 1; }
@keyframes aiotChatIn{
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.aiot-chat-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.15), rgba(0, 240, 255, 0.04));
  border-bottom: 1px solid rgba(0, 240, 255, 0.3);
  flex-shrink: 0;
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
}
.aiot-chat-head:active{ cursor: grabbing; }
.aiot-chat-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #00f0ff;
  text-shadow: 0 0 4px rgba(0, 240, 255, 0.5);
}
.aiot-chat-dot{
  width: 8px; height: 8px;
  background: #0f8;
  border-radius: 50%;
  box-shadow: 0 0 6px #0f8;
  animation: aiotChatDotPulse 1.5s infinite;
}
@keyframes aiotChatDotPulse{
  50% { opacity: 0.4; transform: scale(1.25); }
}

.aiot-chat-messages{
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aiot-chat-messages::-webkit-scrollbar{ width: 4px; }
.aiot-chat-messages::-webkit-scrollbar-thumb{
  background: rgba(0, 240, 255, 0.3);
  border-radius: 2px;
}

.aiot-chat-msg{
  padding: 8px 12px;
  border-radius: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  word-wrap: break-word;
  max-width: 92%;
  width: fit-content;
  animation: aiotMsgIn .2s;
}
@keyframes aiotMsgIn{
  from { opacity: 0; transform: translateY(4px); }
}
.aiot-chat-msg-user{
  align-self: flex-end;
  background: rgba(255, 0, 255, 0.18);
  border: 1px solid rgba(255, 0, 255, 0.5);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.aiot-chat-msg-ai{
  align-self: flex-start;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.5);
  color: #e0f7ff;
  border-bottom-left-radius: 3px;
}
.aiot-chat-msg-system{
  align-self: center;
  background: rgba(255, 170, 0, 0.12);
  border: 1px solid rgba(255, 170, 0, 0.45);
  color: #fd8;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-align: center;
}
.aiot-chat-msg-ai strong{ color: #fff; }

.aiot-chat-empty{
  padding: 30px 16px;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgba(0, 240, 255, 0.55);
  line-height: 1.6;
}
.aiot-chat-empty em{
  font-family: 'Rajdhani', sans-serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.2px;
}

.aiot-chat-input-bar{
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid rgba(0, 240, 255, 0.2);
  background: rgba(0, 10, 25, 0.5);
  flex-shrink: 0;
}
.aiot-chat-input{
  flex: 1;
  background: rgba(0, 20, 40, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00f0ff;
  border-radius: 18px;
  padding: 8px 14px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  outline: none;
}
.aiot-chat-input:focus{
  border-color: #00f0ff;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.35);
}
.aiot-chat-input::placeholder{ color: rgba(0, 240, 255, 0.45); }
.aiot-chat-send{
  width: 36px; height: 36px;
  background: rgba(0, 240, 255, 0.22);
  border: 1px solid rgba(0, 240, 255, 0.55);
  color: #00f0ff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: .15s;
}
.aiot-chat-send:hover{
  background: rgba(0, 240, 255, 0.4);
  color: #fff;
  box-shadow: 0 0 10px #00f0ff;
}

/* Mobile - ocupa quase toda a tela */
@media (max-width: 500px){
  .aiot-chat{
    width: calc(100% - 16px);
    right: 8px;
    bottom: 80px;
    height: calc(100vh - 100px);
  }
  .aiot-chat-bubble{
    bottom: 16px; right: 16px;
    width: 52px; height: 52px;
  }
}

/* Tema claro */
body.light-theme .aiot-chat-box{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(245, 248, 251, 0.95));
  border-color: rgba(0, 136, 200, 0.45);
}
body.light-theme .aiot-chat-title{ color: #0088c8; text-shadow: none; }
body.light-theme .aiot-chat-msg-user{
  background: #fff;
  border-color: rgba(0, 0, 0, 0.4);
  color: #000;
}
body.light-theme .aiot-chat-msg-ai{
  background: rgba(0, 168, 222, 0.10);
  border-color: rgba(0, 136, 200, 0.4);
  color: #000;
}
body.light-theme .aiot-chat-msg-ai strong{ color: #000; }
body.light-theme .aiot-chat-empty{ color: #555; }
body.light-theme .aiot-chat-input-bar{
  background: rgba(255, 255, 255, 0.6);
  border-top-color: rgba(0, 136, 200, 0.2);
}
body.light-theme .aiot-chat-input{
  background: #fff;
  border-color: rgba(0, 136, 200, 0.4);
  color: #000;
}
body.light-theme .aiot-chat-input::placeholder{ color: rgba(0, 0, 0, 0.45); }
body.light-theme .aiot-chat-send{
  background: rgba(0, 168, 222, 0.2);
  border-color: #0088c8;
  color: #0088c8;
}
body.light-theme .aiot-chat-send:hover{ background: #0088c8; color: #fff; }


/* ==========================================================================
   BOTÃO IA + MODAL DE ANÁLISE
   ========================================================================== */

/* Botão IA - glow ciano + pulse sutil para chamar atenção */
.aiot-ai-btn{
  position: relative;
  border-color: rgba(0, 240, 255, 0.5) !important;
  color: #00f0ff !important;
  background: rgba(0, 240, 255, 0.08) !important;
  /* Largura ligeiramente maior para acomodar "IA" */
  min-width: 34px;
  padding: 0 6px;
}
.aiot-ai-btn:hover{
  background: rgba(0, 240, 255, 0.2) !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
}
.aiot-ai-btn-label{
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-shadow: 0 0 4px rgba(0, 240, 255, 0.6);
  line-height: 1;
}
.aiot-ai-btn::after{
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px solid rgba(0, 240, 255, 0.3);
  animation: aiotAiPulse 2s ease-out infinite;
  pointer-events: none;
}
@keyframes aiotAiPulse{
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Modal FLUTUANTE de análise - arrastável pelo header.
   O container PRECISA capturar pointer-events para o drag funcionar.
   Mas só as áreas DENTRO do .aiot-analysis-box capturam click visualmente
   (o restante do .aiot-analysis ao redor não tem conteúdo). */
.aiot-analysis{
  position: absolute;
  top: 70px;
  right: 16px;
  width: 420px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 90px);
  z-index: 100;
  display: none;
  /* 20% transparente em idle, opaco no hover/focus para facilitar leitura.
     Os sensores embaixo continuam clicáveis no espaço FORA do painel. */
  opacity: 0.8;
  transition: opacity .25s;
}
.aiot-analysis.aiot-open{ display: block; }
.aiot-analysis:hover,
.aiot-analysis:focus-within{
  opacity: 1;
}
/* Em fullscreen, mais espaço lateral */
.aiot-modal.aiot-fullscreen .aiot-analysis{
  width: 460px;
  top: 80px;
  right: 24px;
  max-height: calc(100vh - 100px);
}

.aiot-analysis-box{
  background: linear-gradient(180deg, rgba(0, 15, 30, 0.96), rgba(0, 25, 50, 0.94));
  border: 1px solid rgba(0, 240, 255, 0.45);
  border-radius: 12px;
  box-shadow: 0 16px 50px rgba(0, 240, 255, 0.35),
              0 0 0 1px rgba(0, 240, 255, 0.18);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  pointer-events: auto;       /* aceita interação */
  animation: aiotAnalysisIn .25s cubic-bezier(.4, 0, .2, 1);
  /* Container query - se o painel ficar muito estreito, layout responsivo dentro */
  container-type: inline-size;
  container-name: aibox;
}
@keyframes aiotAnalysisIn{
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
}

.aiot-analysis-head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.12), rgba(0, 240, 255, 0.03));
  border-bottom: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 12px 12px 0 0;
  flex-shrink: 0;
  cursor: move;               /* indica arrastável */
  user-select: none;
  -webkit-user-select: none;
}
.aiot-analysis-head:active{ cursor: grabbing; }
.aiot-analysis-icon{
  color: #00f0ff;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border: 1px solid rgba(0, 240, 255, 0.5);
  border-radius: 4px;
  text-shadow: 0 0 4px #00f0ff;
  background: rgba(0, 240, 255, 0.08);
  line-height: 1;
}
.aiot-analysis-head h3{
  flex: 1;
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #00f0ff;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Corpo rolável - o conteúdo interno fica scrollable */
.aiot-analysis-body{
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  min-height: 0;
}
.aiot-analysis-body::-webkit-scrollbar{ width: 6px; }
.aiot-analysis-body::-webkit-scrollbar-thumb{
  background: rgba(0, 240, 255, 0.35);
  border-radius: 3px;
}

/* Em fullscreen do AIoT, o painel ganha mais altura útil */
.aiot-modal.aiot-fullscreen .aiot-analysis-box{
  max-height: calc(100vh - 100px);
}

/* Mobile - ocupa quase toda a largura disponível */
@media (max-width: 500px){
  .aiot-analysis{
    width: calc(100% - 16px);
    right: 8px;
    top: 60px;
  }
}

/* Banner de status macro */
.aiot-an-status{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.aiot-an-counters{ width: 100%; }    /* Em painel estreito, contadores em linha abaixo do texto */
@container aibox (min-width: 480px){
  .aiot-an-counters{ width: auto; }
}
.aiot-an-normal   { background: rgba(46, 204, 113, 0.14); border: 1px solid rgba(46, 204, 113, 0.5); }
.aiot-an-attention{ background: rgba(245, 166, 35, 0.14); border: 1px solid rgba(245, 166, 35, 0.5); }
.aiot-an-alert    { background: rgba(230, 126, 34, 0.14); border: 1px solid rgba(230, 126, 34, 0.5); }
.aiot-an-critical { background: rgba(247, 69, 31, 0.16); border: 1px solid rgba(247, 69, 31, 0.6);
                    animation: aiotPerfPulse 1.5s ease-in-out infinite; }

.aiot-an-status-emoji{ font-size: 36px; line-height: 1; }
.aiot-an-status-text{ flex: 1; min-width: 160px; }
.aiot-an-status-text h4{
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  color: #fff;
}
.aiot-an-status-text p{
  margin: 4px 0 0;
  font-size: 12px;
  font-family: 'Rajdhani', sans-serif;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
}
.aiot-an-counters{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.aiot-an-counters > div{
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  padding: 6px 10px;
  text-align: center;
  min-width: 56px;
  font-family: 'Orbitron', sans-serif;
}
.aiot-an-counters strong{
  display: block;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.aiot-an-counters span{
  display: block;
  font-size: 8px;
  letter-spacing: 1.5px;
  opacity: 0.7;
  text-transform: uppercase;
  margin-top: 3px;
}
.aiot-an-counter-online strong { color: #2ecc71; }
.aiot-an-counter-alert  strong { color: #f7451f; }
.aiot-an-counter-near   strong { color: #f5a623; }
.aiot-an-counter-off    strong { color: rgba(255,255,255,0.4); }

/* Sections */
.aiot-an-section{
  margin-bottom: 18px;
}
.aiot-an-section h5{
  margin: 0 0 10px;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(0, 240, 255, 0.85);
  text-transform: uppercase;
}

/* Insights */
.aiot-an-insights{
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}
.aiot-an-insights li{
  padding: 6px 0 6px 18px;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.aiot-an-insights li::before{
  content: '▸';
  position: absolute;
  left: 4px;
  color: rgba(0, 240, 255, 0.6);
}
.aiot-an-insights li:last-child{ border-bottom: none; }

/* Grupos */
.aiot-an-groups{
  display: grid;
  grid-template-columns: 1fr;     /* 1 coluna por padrão (cabe em 420px) */
  gap: 8px;
}
@container aibox (min-width: 380px){
  .aiot-an-groups{ grid-template-columns: repeat(2, 1fr); }
}
@container aibox (min-width: 640px){
  .aiot-an-groups{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
.aiot-an-group{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 240, 255, 0.05);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 8px;
}
.aiot-an-group-emoji{ font-size: 22px; line-height: 1; }
.aiot-an-group-info{ flex: 1; min-width: 0; font-family: 'Rajdhani', sans-serif; }
.aiot-an-group-info strong{
  display: block;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aiot-an-group-info small{
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  display: block;
  margin-top: 2px;
}

/* Predições */
.aiot-an-preds{ display: flex; flex-direction: column; gap: 8px; }
.aiot-an-pred{
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(245, 166, 35, 0.08);
  border-left: 3px solid #f5a623;
  border-radius: 6px;
}
.aiot-an-pred-high{
  background: rgba(247, 69, 31, 0.10);
  border-left-color: #f7451f;
}
.aiot-an-pred-trend{
  font-size: 24px;
  line-height: 1;
  color: #f5a623;
  font-weight: 900;
  min-width: 24px;
  text-align: center;
}
.aiot-an-pred-high .aiot-an-pred-trend{ color: #f7451f; }
.aiot-an-pred strong{ color: #fff; font-size: 13px; }
.aiot-an-pred small{ color: rgba(255,255,255,0.55); font-size: 11px; margin-left: 4px; }
.aiot-an-pred p{
  margin: 4px 0 0;
  font-size: 12px;
  font-family: 'Rajdhani', sans-serif;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.4;
}

/* Recomendações - cards com prioridade */
.aiot-an-recs{ display: flex; flex-direction: column; gap: 10px; }
.aiot-an-rec{
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid;
  background: rgba(255, 255, 255, 0.03);
  font-family: 'Rajdhani', sans-serif;
}
.aiot-an-rec-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.aiot-an-rec-icon{ font-size: 20px; line-height: 1; }
.aiot-an-rec-head strong{
  flex: 1;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.aiot-an-rec-pri{
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: 700;
}
.aiot-an-rec-critical{ border-color: rgba(247, 69, 31, 0.6); background: rgba(247, 69, 31, 0.08); }
.aiot-an-rec-critical .aiot-an-rec-pri{ background: #f7451f; color: #fff; }
.aiot-an-rec-high    { border-color: rgba(230, 126, 34, 0.6); background: rgba(230, 126, 34, 0.07); }
.aiot-an-rec-high    .aiot-an-rec-pri{ background: #e67e22; color: #fff; }
.aiot-an-rec-medium  { border-color: rgba(245, 166, 35, 0.55); background: rgba(245, 166, 35, 0.06); }
.aiot-an-rec-medium  .aiot-an-rec-pri{ background: #f5a623; color: #000; }
.aiot-an-rec-low     { border-color: rgba(0, 240, 255, 0.45); background: rgba(0, 240, 255, 0.05); }
.aiot-an-rec-low     .aiot-an-rec-pri{ background: #00f0ff; color: #000; }
.aiot-an-rec-info    { border-color: rgba(46, 204, 113, 0.5); background: rgba(46, 204, 113, 0.06); }
.aiot-an-rec-info    .aiot-an-rec-pri{ background: #2ecc71; color: #000; }
.aiot-an-rec-detail{
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 6px;
}
.aiot-an-rec-action{
  font-size: 12px;
  color: rgba(0, 240, 255, 0.85);
  font-style: italic;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.aiot-an-footer{
  text-align: center;
  font-size: 10px;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.4);
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Tema CLARO do modal de análise */
body.light-theme .aiot-analysis{ background: rgba(238, 242, 246, 0.95); }
body.light-theme .aiot-analysis-box{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(245, 248, 251, 0.95));
  border-color: rgba(0, 136, 200, 0.4);
}
body.light-theme .aiot-analysis-head h3{ color: #0088c8; }
body.light-theme .aiot-an-status-text h4{ color: #000; }
body.light-theme .aiot-an-status-text p{ color: #333; }
body.light-theme .aiot-an-section h5{ color: #0088c8; }
body.light-theme .aiot-an-insights{ color: #000; }
body.light-theme .aiot-an-insights li{ border-bottom-color: rgba(0, 0, 0, 0.08); }
body.light-theme .aiot-an-insights li::before{ color: #0088c8; }
body.light-theme .aiot-an-counters > div{
  background: #ffffff;
  border: 1px solid rgba(0, 136, 200, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
body.light-theme .aiot-an-counters strong{ color: #000; }
body.light-theme .aiot-an-counters span{ color: #003a5c; opacity: 1; font-weight: 700; }
body.light-theme .aiot-an-counter-off strong{ color: rgba(0, 0, 0, 0.4); }
body.light-theme .aiot-an-group{
  background: #ffffff;
  border: 1px solid rgba(0, 136, 200, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
body.light-theme .aiot-an-group strong,
body.light-theme .aiot-an-group-info strong{ color: #000; }
body.light-theme .aiot-an-group small,
body.light-theme .aiot-an-group-info small{ color: #003a5c; }
body.light-theme .aiot-an-pred{
  background: #fff7e6;
  border-left-color: #d6912a;
}
body.light-theme .aiot-an-pred-high{
  background: #ffe9e2;
  border-left-color: #d63a18;
}
body.light-theme .aiot-an-pred-trend{ color: #b06d00; }
body.light-theme .aiot-an-pred-high .aiot-an-pred-trend{ color: #a02410; }
body.light-theme .aiot-an-pred strong{ color: #000; }
body.light-theme .aiot-an-pred small{ color: #555; }
body.light-theme .aiot-an-pred p{ color: #333; }
body.light-theme .aiot-an-rec{
  background: #ffffff;
  border: 1px solid rgba(0, 136, 200, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
body.light-theme .aiot-an-rec-critical{ background: #ffe2d8; border-color: rgba(214, 58, 24, 0.55); }
body.light-theme .aiot-an-rec-high{ background: #fff0dc; border-color: rgba(190, 110, 30, 0.55); }
body.light-theme .aiot-an-rec-medium{ background: #fff7e0; border-color: rgba(180, 130, 0, 0.5); }
body.light-theme .aiot-an-rec-low{ background: #e6f6fb; border-color: rgba(0, 136, 200, 0.45); }
body.light-theme .aiot-an-rec-head strong{ color: #000; }
body.light-theme .aiot-an-rec-detail{ color: #333; }
body.light-theme .aiot-an-rec-action{ color: #0088c8; }
body.light-theme .aiot-an-footer{ color: #444; border-top-color: rgba(0, 0, 0, 0.1); }


/* ==========================================================================
   TRANSIÇÕES SUAVES - "feeling de monitoramento" no modo simulador
   Quando os valores mudam (a cada 2s), as barras/cores/valores transitam
   suavemente em vez de pular. Combina com a oscilação senoidal dos sensores.
   ========================================================================== */
/* Cards padrão - barra e valor com transição */
.aiot-card{
  transition: transform .25s, box-shadow .25s, background .5s;
}
.aiot-progress-fill{
  transition: width 1.5s cubic-bezier(.4, 0, .2, 1), background .4s;
}
.aiot-card-value{
  transition: color .4s, text-shadow .4s;
}

/* Tabela - cores das linhas */
.aiot-table tr{
  transition: background .3s, color .3s;
}
.aiot-status-dot{
  transition: background .3s, box-shadow .3s;
}

/* Smart view - SVGs e valor central */
.aiot-smart-cell{
  transition: transform .25s, border-color .3s, box-shadow .3s;
}
.aiot-smart-val{
  transition: color .4s;
}
.aiot-smart-val strong{
  transition: color .4s, text-shadow .4s;
}
.aiot-w-svg{
  transition: filter .3s;
}

/* Perf view - barra de progresso e cores */
.aiot-perf-cell{
  /* já tinha transitions, reforça para incluir background na mudança de estado */
  transition: background .4s, border-color .4s, color .4s, transform .2s;
}
.aiot-perf-fill{
  transition: width 1.5s cubic-bezier(.4, 0, .2, 1), background .4s;
}
.aiot-perf-val strong{
  transition: color .4s, text-shadow .4s;
}
.aiot-perf-name,
.aiot-perf-state{
  transition: color .4s;
}

/* Headers de grupo - badges */
.aiot-group-badge{
  transition: background .3s, color .3s, box-shadow .3s;
}


/* ==========================================================================
   SMART WIDGETS - 1 gráfico interativo por tipo de parâmetro
   ========================================================================== */
.aiot-smart-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.aiot-modal.aiot-fullscreen .aiot-smart-grid{
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
@container aiot-box (min-width: 500px){
  .aiot-smart-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container aiot-box (min-width: 700px){
  .aiot-smart-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.aiot-smart-cell{
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 10px;
  padding: 10px 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: .2s;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  position: relative;
}
.aiot-smart-cell:hover{
  transform: translateY(-2px);
  border-color: var(--w-color, rgba(0, 240, 255, 0.5));
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3),
              0 0 0 1px var(--w-color, rgba(0, 240, 255, 0.3));
}
.aiot-smart-name{
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(224, 247, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.aiot-smart-viz{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.aiot-w-svg{
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 110px;
  display: block;
  margin: 0 auto;
}
.aiot-smart-val{
  font-family: 'Orbitron', sans-serif;
  line-height: 1;
  color: var(--w-color, #00f0ff);
  text-shadow: 0 0 6px var(--w-color, rgba(0, 240, 255, 0.4));
}
.aiot-smart-val strong{
  font-size: 18px;
  font-weight: 900;
}
.aiot-smart-val small{
  font-size: 9px;
  letter-spacing: 1px;
  opacity: 0.85;
  font-weight: 600;
}

/* Estados especiais por tipo */
.aiot-smart-tank,
.aiot-smart-thermometer,
.aiot-smart-cylinder,
.aiot-smart-cylinder-inv,
.aiot-smart-drop{
  /* widgets verticais - reservam altura maior */
}
.aiot-smart-tank .aiot-w-svg,
.aiot-smart-cylinder .aiot-w-svg,
.aiot-smart-cylinder-inv .aiot-w-svg,
.aiot-smart-drop .aiot-w-svg{
  max-height: 130px;
}
.aiot-smart-thermometer .aiot-w-svg{
  max-height: 130px;
  max-width: 50px;          /* termômetro fino */
}
.aiot-smart-bar-v .aiot-w-svg{
  max-height: 130px;
  max-width: 60px;
}
.aiot-smart-bar-h-center .aiot-w-svg,
.aiot-smart-flow .aiot-w-svg,
.aiot-smart-waveform .aiot-w-svg,
.aiot-smart-vibration .aiot-w-svg{
  max-height: 70px;
}
.aiot-smart-manometer .aiot-w-svg,
.aiot-smart-manometer-vacuum .aiot-w-svg,
.aiot-smart-voltmeter .aiot-w-svg,
.aiot-smart-ammeter .aiot-w-svg{
  max-height: 110px;
}

/* Visual NEON - saturação alta + brilho aumentado, sombras curtas/sharp */
.aiot-w-svg.aiot-vivid{
  filter: saturate(1.8) brightness(1.25) contrast(1.1);
}
/* Todos os SVGs (incluindo tank, thermo, etc.) ganham boost de cor */
.aiot-w-svg{
  filter: saturate(1.4) brightness(1.15);
}
.aiot-w-svg.aiot-vivid{
  filter: saturate(1.8) brightness(1.25) contrast(1.1);
}

/* Número central: glow neon curto + grosso (não espalhado) */
.aiot-smart-val strong{
  text-shadow:
    0 0 1px var(--w-color, #00f0ff),
    0 0 3px var(--w-color, #00f0ff);
  color: var(--w-color, #00f0ff);
}

/* Cell hover - aura sutil só no hover (sem aura constante de fundo) */
.aiot-smart-cell::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 100%, var(--w-color, transparent) 0%, transparent 65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.aiot-smart-cell:hover::before{ opacity: 0.12; }

/* Alerta - borda vermelha pulsando */
.aiot-smart-alert{
  border-color: rgba(247, 69, 31, 0.7) !important;
  box-shadow: 0 0 12px rgba(247, 69, 31, 0.4) !important;
  animation: aiot-smart-blink 1.4s infinite ease-in-out;
}
@keyframes aiot-smart-blink{
  50% { box-shadow: 0 0 20px rgba(247, 69, 31, 0.7); border-color: rgba(247, 69, 31, 0.95); }
}

/* Offline - opacidade reduzida */
.aiot-smart-offline{
  opacity: 0.55;
  filter: grayscale(0.7);
}
.aiot-smart-offline .aiot-smart-val{
  color: rgba(196, 192, 200, 0.7);
  text-shadow: none;
}

/* Tema claro */
body.light-theme .aiot-smart-cell{
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 136, 200, 0.25);
}
body.light-theme .aiot-smart-name{ color: #000; }
body.light-theme .aiot-smart-val{
  color: var(--w-color, #0088c8);
  text-shadow: none;
}
body.light-theme .aiot-w-svg{
  /* SVG tem strokes em rgba(255,255,255,...) - precisamos inverter para fundo claro */
  filter: invert(0.85) hue-rotate(180deg);
}
body.light-theme .aiot-smart-tank .aiot-w-svg,
body.light-theme .aiot-smart-cylinder .aiot-w-svg,
body.light-theme .aiot-smart-cylinder-inv .aiot-w-svg{
  filter: none;  /* mantém cor original do gás (ABNT) */
}


/* ==========================================================================
   BOTÕES (replicam padrão do .proc-* mas isolados)
   ========================================================================== */
.aiot-btn-primary,
.aiot-btn-secondary,
.aiot-btn-ghost,
.aiot-btn-icon{
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: .2s;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.aiot-btn-primary{
  background: #00f0ff; color: #000; border: 1px solid #00f0ff;
  font-size: 11px; font-weight: 700; padding: 8px 16px;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}
.aiot-btn-primary:hover{ background: #fff; box-shadow: 0 0 16px rgba(0, 240, 255, 0.7); }
.aiot-btn-secondary{
  background: rgba(0, 240, 255, 0.1); color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.5);
  font-size: 11px; padding: 8px 14px;
}
.aiot-btn-secondary:hover{ background: rgba(0, 240, 255, 0.25); }
.aiot-btn-ghost{
  background: transparent; color: rgba(0, 240, 255, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.3);
  font-size: 10px; padding: 6px 12px;
}
.aiot-btn-ghost:hover{ background: rgba(0, 240, 255, 0.12); border-color: #00f0ff; }
.aiot-btn-icon{
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: rgba(0, 240, 255, 0.85);
  padding: 0;
  justify-content: center;
  font-size: 13px;
  border-radius: 50%;
}
.aiot-btn-icon:hover{
  background: rgba(0, 240, 255, 0.18);
  border-color: #00f0ff;
  color: #00f0ff;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}
/* Botão de fechar - hover vermelho para destacar ação destrutiva */
.aiot-btn-icon[data-act="close"]:hover{
  background: rgba(255, 0, 85, 0.18);
  border-color: #f05;
  color: #fff;
  box-shadow: 0 0 8px rgba(255, 0, 85, 0.5);
}

/* Botões grandes em forma de ícone (usados no footer do modal de settings) */
.aiot-btn-icon-lg{
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid rgba(0, 240, 255, 0.45);
  color: rgba(0, 240, 255, 0.9);
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
}
.aiot-btn-icon-lg:hover{
  background: rgba(255, 0, 85, 0.15);
  border-color: #f05;
  color: #fff;
}
.aiot-btn-icon-lg-primary{
  background: rgba(0, 240, 255, 0.15);
  border-color: #00f0ff;
  color: #00f0ff;
}
.aiot-btn-icon-lg-primary:hover{
  background: #00f0ff;
  color: #000;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
}


/* ==========================================================================
   SENSOR DETAIL MODAL
   ========================================================================== */
/* Container do detalhe do sensor - flutuante, arrastável, 20% transparente.
   Espelha o padrão do Panorama Preditivo: position absolute, opacity .8 idle,
   1 no hover/focus. Sem overlay escuro - os sensores embaixo continuam
   visíveis (e clicáveis fora do painel).

   COR DO SENSOR: o JS injeta --sensor-color, --sensor-color-soft (0.20),
   --sensor-color-faint (0.08) e --sensor-color-glow (0.45) no elemento.
   Toda a paleta do modal espelha a cor do card na tela principal. */
.aiot-sensor-modal{
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: min(580px, calc(100% - 32px));
  max-height: calc(100% - 90px);
  z-index: 100;
  display: none;
  opacity: 0.8;
  transition: opacity .25s;
  /* fallback caso o JS não tenha injetado a variável ainda */
  --sensor-color: #00f0ff;
  --sensor-color-soft: rgba(0, 240, 255, 0.20);
  --sensor-color-faint: rgba(0, 240, 255, 0.08);
  --sensor-color-glow: rgba(0, 240, 255, 0.45);
}
.aiot-sensor-modal.aiot-open{ display: block; }
.aiot-sensor-modal:hover,
.aiot-sensor-modal:focus-within{ opacity: 1; }
/* Quando arrastado, deixa de centralizar e usa left/top puro */
.aiot-sensor-modal[style*="left"]{ transform: none; }

/* Em fullscreen, o painel pode ficar maior */
.aiot-modal.aiot-fullscreen .aiot-sensor-modal{
  width: min(640px, calc(100% - 48px));
  top: 80px;
  max-height: calc(100vh - 100px);
}

.aiot-sensor-modal-box{
  background: linear-gradient(180deg, rgba(0, 15, 30, 0.96), rgba(0, 25, 50, 0.94));
  border: 1px solid var(--sensor-color-glow);
  border-radius: 12px;
  box-shadow: 0 16px 50px var(--sensor-color-glow),
              0 0 0 1px var(--sensor-color-soft);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  pointer-events: auto;
  overflow: hidden;
  animation: aiotIn .25s ease;
  /* Container query para layout responsivo do detalhe */
  container-type: inline-size;
  container-name: aibox;
}
.aiot-sensor-modal-head{
  padding: 12px 14px;
  border-bottom: 1px solid var(--sensor-color-soft);
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, var(--sensor-color-soft), var(--sensor-color-faint));
  position: relative;
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
}
.aiot-sensor-modal-head:active{ cursor: grabbing; }
.aiot-sensor-modal .aiot-sensor-group{
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--sensor-color);
  opacity: 0.85;
}
.aiot-sensor-modal .aiot-sensor-title{
  margin: 4px 0 0;
  color: var(--sensor-color);
  text-shadow: 0 0 6px var(--sensor-color-soft);
  font-size: 16px;
  font-weight: 700;
}
.aiot-sensor-modal-head .aiot-btn-icon{
  position: absolute;
  top: 14px; right: 14px;
}
/* Corpo rolável - acomoda valor, meta, IA, chart e alarmes */
.aiot-sensor-modal-body{
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.aiot-sensor-modal-body::-webkit-scrollbar{ width: 6px; }
.aiot-sensor-modal-body::-webkit-scrollbar-thumb{
  background: rgba(0, 240, 255, 0.35);
  border-radius: 3px;
}
.aiot-sensor-val{
  font-family: 'Orbitron', sans-serif;
  font-size: 38px;
  font-weight: 900;
  text-align: center;
  padding: 18px;
  border-radius: 10px;
  margin-bottom: 12px;
  color: #fff;
  letter-spacing: 1px;
}
.aiot-sensor-meta{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 8px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  color: rgba(224, 247, 255, 0.85);
  margin-bottom: 10px;
}
.aiot-sensor-meta > span{ text-align: center; }
.aiot-sensor-modal .aiot-sensor-meta strong{
  display: block;
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--sensor-color);
  opacity: 0.7;
  margin-bottom: 3px;
}
.aiot-sensor-modal .aiot-sensor-meta-row{
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  color: var(--sensor-color);
  opacity: 0.7;
  margin-bottom: 14px;
}
.aiot-text-online{ color: #57d68f; }
.aiot-text-offline{ color: #c4c0c8; }

/* Trend chip dentro do meta */
.aiot-sensor-modal .aiot-sd-trend strong{ color: var(--sensor-color); opacity: 0.7; }
.aiot-sd-trend-rising  { color: #f5a623; }
.aiot-sd-trend-falling { color: #5cd4ff; }
.aiot-sd-trend-stable  { color: rgba(255,255,255,0.7); }

/* Seções do detalhe (IA, chart, alarmes) */
.aiot-sensor-modal .aiot-sd-section{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--sensor-color-soft);
}
.aiot-sensor-modal .aiot-sd-section h5{
  margin: 0 0 10px;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--sensor-color);
  text-transform: uppercase;
}

/* ── BLOCO DE ANÁLISE PREDITIVA ──────────────────────────────────────── */
.aiot-sensor-modal .aiot-sd-ai{
  background: var(--sensor-color-faint);
  border: 1px solid var(--sensor-color-soft);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 14px;
}
/* Em alerta/atenção, severity sobrescreve a cor do sensor — vermelho/amarelo
   precisam aparecer mesmo num sensor de cor verde/azul/etc. */
.aiot-sensor-modal .aiot-sd-ai-normal{ border-color: rgba(46, 204, 113, 0.35); background: rgba(46, 204, 113, 0.06); }
.aiot-sensor-modal .aiot-sd-ai-medium{ border-color: rgba(245, 166, 35, 0.45); background: rgba(245, 166, 35, 0.07); }
.aiot-sensor-modal .aiot-sd-ai-high  { border-color: rgba(247, 69, 31, 0.5);  background: rgba(247, 69, 31, 0.08); }

.aiot-sensor-modal .aiot-sd-ai h5{ color: var(--sensor-color); }
.aiot-sensor-modal .aiot-sd-ai-icon{
  display: inline-block;
  font-size: 12px;
  color: var(--sensor-color);
  text-shadow: 0 0 4px var(--sensor-color-glow);
  margin-right: 4px;
}
.aiot-sd-ai-status{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.aiot-sd-ai-emoji{ font-size: 18px; line-height: 1; }
.aiot-sd-ai-statustext{
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #fff;
}
.aiot-sd-ai-pred{
  margin: 0 0 8px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}
.aiot-sensor-modal .aiot-sd-ai-rec{
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
  padding-top: 8px;
  border-top: 1px solid var(--sensor-color-faint);
}
.aiot-sensor-modal .aiot-sd-ai-rec strong{
  color: var(--sensor-color);
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  letter-spacing: 1.5px;
  display: inline-block;
  margin-right: 4px;
}

/* ── GRÁFICO DE LINHA ────────────────────────────────────────────────── */
.aiot-sensor-modal .aiot-sd-chart{
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--sensor-color-soft);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 10px;
}
.aiot-line-chart{
  width: 100%;
  height: auto;
  display: block;
}
.aiot-chart-empty{
  text-align: center;
  padding: 30px 14px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.2);
  border: 1px dashed var(--sensor-color-soft);
  border-radius: 8px;
}
.aiot-sensor-modal .aiot-sd-stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.aiot-sensor-modal .aiot-sd-stats > div{
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--sensor-color-faint);
  border-radius: 6px;
  padding: 6px;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
}
.aiot-sensor-modal .aiot-sd-stats strong{
  display: block;
  font-size: 14px;
  font-weight: 900;
  color: var(--sensor-color);
  line-height: 1;
  text-shadow: 0 0 4px var(--sensor-color-faint);
}
.aiot-sensor-modal .aiot-sd-stats span{
  display: block;
  font-size: 8px;
  letter-spacing: 1.2px;
  color: var(--sensor-color);
  opacity: 0.7;
  margin-top: 3px;
}

/* ── LOG DE ALARMES ──────────────────────────────────────────────────── */
.aiot-sensor-modal .aiot-sd-alarms{
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px solid var(--sensor-color-faint);
  max-height: 240px;
  overflow-y: auto;
}
.aiot-sensor-modal .aiot-sd-alarms::-webkit-scrollbar{ width: 5px; }
.aiot-sensor-modal .aiot-sd-alarms::-webkit-scrollbar-thumb{
  background: var(--sensor-color-soft);
  border-radius: 3px;
}
.aiot-alarm-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.aiot-sensor-modal .aiot-alarm-item{
  display: grid;
  grid-template-columns: 22px 80px 80px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--sensor-color-faint);
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}
.aiot-alarm-item:last-child{ border-bottom: none; }
.aiot-alarm-icon{
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  line-height: 1;
}
.aiot-sensor-modal .aiot-alarm-time{
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--sensor-color);
  opacity: 0.8;
}
.aiot-alarm-val{
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.aiot-alarm-msg{
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiot-alarm-high .aiot-alarm-icon { color: #f7451f; }
.aiot-alarm-low  .aiot-alarm-icon { color: #5cd4ff; }
.aiot-alarm-offline .aiot-alarm-icon { color: rgba(255,255,255,0.45); }
.aiot-alarm-recovered .aiot-alarm-icon { color: #2ecc71; }
.aiot-alarm-empty{
  padding: 24px 14px;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* Layout responsivo do detalhe (container query) */
@container aibox (max-width: 480px){
  .aiot-sd-stats{ grid-template-columns: repeat(2, 1fr); }
  .aiot-alarm-item{
    grid-template-columns: 22px 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
  }
  .aiot-alarm-time{ grid-column: 2; }
  .aiot-alarm-val{ grid-column: 2; }
  .aiot-alarm-msg{
    grid-column: 1 / -1;
    white-space: normal;
  }
}

/* ==========================================================================
   BOTÃO ABRIR CHAMADO + MODAL DE CHAMADO (CMMS Genesis)
   ========================================================================== */
.aiot-sd-ticket-btn{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding: 8px 14px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid var(--sensor-color, rgba(0, 240, 255, 0.6));
  border-radius: 6px;
  color: var(--sensor-color, #00f0ff);
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 0 8px var(--sensor-color-faint, rgba(0, 240, 255, 0.2));
}
.aiot-sd-ticket-btn:hover{
  background: var(--sensor-color, rgba(0, 240, 255, 0.85));
  color: #001;
  box-shadow: 0 0 16px var(--sensor-color-glow, rgba(0, 240, 255, 0.5));
  transform: translateY(-1px);
}
body.light-theme .aiot-sd-ticket-btn{
  background: rgba(0, 168, 222, 0.12);
}
body.light-theme .aiot-sd-ticket-btn:hover{
  background: var(--sensor-color, #0088c8);
  color: #fff;
}

/* Modal flutuante de Abertura de Chamado (mesmo padrão do detalhe do sensor) */
.aiot-ticket-modal{
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, calc(100% - 32px));
  max-height: calc(100% - 90px);
  z-index: 110;
  display: none;
  opacity: 0.9;
  transition: opacity .25s;
}
.aiot-ticket-modal.aiot-open{ display: block; }
.aiot-ticket-modal:hover,
.aiot-ticket-modal:focus-within{ opacity: 1; }
.aiot-ticket-modal[style*="left"]{ transform: none; }
.aiot-modal.aiot-fullscreen .aiot-ticket-modal{
  width: min(700px, calc(100% - 48px));
  top: 80px;
  max-height: calc(100vh - 100px);
}

.aiot-ticket-box{
  background: linear-gradient(180deg, rgba(0, 15, 30, 0.97), rgba(0, 25, 50, 0.95));
  border: 1px solid rgba(0, 240, 255, 0.5);
  border-radius: 12px;
  box-shadow: 0 16px 50px rgba(0, 240, 255, 0.35),
              0 0 0 1px rgba(0, 240, 255, 0.18);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  display: flex;
  flex-direction: column;
  max-height: 84vh;
  overflow: hidden;
  pointer-events: auto;
  animation: aiotIn .25s ease;
}

.aiot-ticket-head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.12), rgba(0, 240, 255, 0.03));
  border-bottom: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 12px 12px 0 0;
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
}
.aiot-ticket-head:active{ cursor: grabbing; }
.aiot-ticket-badge{
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border: 1px solid rgba(0, 240, 255, 0.5);
  border-radius: 4px;
  color: #00f0ff;
  text-shadow: 0 0 4px #00f0ff;
  background: rgba(0, 240, 255, 0.08);
  line-height: 1;
}
.aiot-ticket-head h3{
  flex: 1;
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #00f0ff;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aiot-ticket-body{
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  min-height: 0;
}
.aiot-ticket-body::-webkit-scrollbar{ width: 6px; }
.aiot-ticket-body::-webkit-scrollbar-thumb{
  background: rgba(0, 240, 255, 0.3);
  border-radius: 3px;
}

.aiot-ticket-warn{
  background: rgba(247, 69, 31, 0.10);
  border: 1px solid rgba(247, 69, 31, 0.55);
  color: #ff9a82;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  margin-bottom: 12px;
}

/* Resumo do sensor no topo do modal (chips de leitura) */
.aiot-ticket-info{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px;
  margin-bottom: 14px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 8px;
}
.aiot-ticket-info > div{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aiot-ticket-label{
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
  letter-spacing: 1.2px;
  color: rgba(0, 240, 255, 0.65);
  text-transform: uppercase;
}
.aiot-ticket-info strong{
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #e0f7ff;
  line-height: 1.2;
}

/* Grid dos campos do form */
.aiot-ticket-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 540px){
  .aiot-ticket-grid{ grid-template-columns: 1fr; }
}

.aiot-ticket-field{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aiot-ticket-field-full{ grid-column: 1 / -1; }
.aiot-ticket-field > span{
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(0, 240, 255, 0.7);
}
.aiot-ticket-field > span small{
  font-family: 'Rajdhani', sans-serif;
  font-size: 9px;
  text-transform: none;
  letter-spacing: 0.5px;
  color: rgba(0, 240, 255, 0.45);
  margin-left: 4px;
}
.aiot-ticket-field em{
  color: #f7451f;
  font-style: normal;
  margin-left: 2px;
}
.aiot-ticket-field input,
.aiot-ticket-field select,
.aiot-ticket-field textarea{
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 6px;
  color: #e0f7ff;
  padding: 8px 10px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.aiot-ticket-field input:focus,
.aiot-ticket-field select:focus,
.aiot-ticket-field textarea:focus{
  border-color: #00f0ff;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.35);
}
.aiot-ticket-field textarea{
  resize: vertical;
  min-height: 140px;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
}

.aiot-ticket-hint{
  margin-top: 4px;
  padding: 8px 10px;
  background: rgba(0, 240, 255, 0.05);
  border: 1px dashed rgba(0, 240, 255, 0.25);
  border-radius: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
}
.aiot-ticket-hint em{
  color: #f7451f;
  font-style: normal;
}

.aiot-ticket-foot{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid rgba(0, 240, 255, 0.18);
  background: rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

/* TEMA CLARO */
body.light-theme .aiot-ticket-box{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 251, 0.96));
  border-color: rgba(0, 136, 200, 0.5);
  color: #000;
  box-shadow: 0 16px 50px rgba(0, 136, 200, 0.35);
}
body.light-theme .aiot-ticket-head{
  background: linear-gradient(180deg, #d8e7f5, #c5dbed);
  border-bottom: 1px solid #0088c8;
}
body.light-theme .aiot-ticket-head h3{ color: #0088c8; }
body.light-theme .aiot-ticket-badge{
  color: #0088c8;
  border-color: rgba(0, 136, 200, 0.5);
  background: rgba(0, 168, 222, 0.1);
  text-shadow: none;
}
body.light-theme .aiot-ticket-info{
  background: #ffffff;
  border-color: rgba(0, 136, 200, 0.25);
}
body.light-theme .aiot-ticket-label{ color: #003a5c; opacity: 1; }
body.light-theme .aiot-ticket-info strong{ color: #000; }
body.light-theme .aiot-ticket-field > span{ color: #003a5c; }
body.light-theme .aiot-ticket-field > span small{ color: #555; }
body.light-theme .aiot-ticket-field input,
body.light-theme .aiot-ticket-field select,
body.light-theme .aiot-ticket-field textarea{
  background: #ffffff;
  border-color: rgba(0, 136, 200, 0.45);
  color: #000;
}
body.light-theme .aiot-ticket-field input:focus,
body.light-theme .aiot-ticket-field select:focus,
body.light-theme .aiot-ticket-field textarea:focus{
  border-color: #0088c8;
  box-shadow: 0 0 8px rgba(0, 136, 200, 0.35);
}
body.light-theme .aiot-ticket-hint{
  background: rgba(0, 168, 222, 0.06);
  border-color: rgba(0, 136, 200, 0.3);
  color: #333;
}
body.light-theme .aiot-ticket-foot{
  background: #f5f8fa;
  border-top-color: rgba(0, 136, 200, 0.25);
}
body.light-theme .aiot-ticket-warn{
  background: #ffe2d8;
  border-color: rgba(214, 58, 24, 0.55);
  color: #a02410;
}

/* ── COMBOBOX AUTOCOMPLETE ──────────────────────────────────────────── */
.aiot-combo{
  position: relative;
  display: block;
}
.aiot-combo-input{
  width: 100%;
  padding-right: 32px !important;   /* espaço pra setinha */
  cursor: text;
}
.aiot-combo-input:disabled{
  cursor: not-allowed;
  opacity: 0.6;
}
.aiot-combo-arrow{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  color: rgba(0, 240, 255, 0.7);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s, color .2s;
}
.aiot-combo-arrow:hover{ color: #00f0ff; }
.aiot-combo.aiot-combo-open .aiot-combo-arrow{
  transform: translateY(-50%) rotate(180deg);
  color: #00f0ff;
}
.aiot-combo-list{
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: rgba(0, 15, 30, 0.97);
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(0, 240, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 200;
  padding: 4px;
}
.aiot-combo.aiot-combo-open .aiot-combo-list{ display: block; }
.aiot-combo-list::-webkit-scrollbar{ width: 6px; }
.aiot-combo-list::-webkit-scrollbar-thumb{
  background: rgba(0, 240, 255, 0.35);
  border-radius: 3px;
}
.aiot-combo-item{
  padding: 7px 10px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  color: #e0f7ff;
  border-radius: 4px;
  cursor: pointer;
  transition: background .12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aiot-combo-item:hover,
.aiot-combo-item.aiot-combo-active{
  background: rgba(0, 240, 255, 0.18);
  color: #00f0ff;
}
.aiot-combo-item.aiot-combo-selected{
  background: rgba(0, 240, 255, 0.10);
  color: #00f0ff;
  font-weight: 700;
}
.aiot-combo-item.aiot-combo-selected.aiot-combo-active{
  background: rgba(0, 240, 255, 0.28);
}
.aiot-combo-empty{
  padding: 10px;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
}

/* TEMA CLARO */
body.light-theme .aiot-combo-arrow{
  color: rgba(0, 136, 200, 0.7);
}
body.light-theme .aiot-combo-arrow:hover,
body.light-theme .aiot-combo.aiot-combo-open .aiot-combo-arrow{
  color: #0088c8;
}
body.light-theme .aiot-combo-list{
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 136, 200, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15),
              0 0 0 1px rgba(0, 136, 200, 0.15);
}
body.light-theme .aiot-combo-item{
  color: #000;
}
body.light-theme .aiot-combo-item:hover,
body.light-theme .aiot-combo-item.aiot-combo-active{
  background: rgba(0, 168, 222, 0.15);
  color: #0088c8;
}
body.light-theme .aiot-combo-item.aiot-combo-selected{
  background: rgba(0, 168, 222, 0.08);
  color: #0088c8;
}
body.light-theme .aiot-combo-empty{
  color: #555;
}

.aiot-chart-placeholder{
  border: 1px dashed rgba(0, 240, 255, 0.2);
  border-radius: 8px;
  padding: 18px;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  color: rgba(0, 240, 255, 0.45);
  line-height: 1.6;
}
.aiot-chart-placeholder code{
  background: rgba(0, 240, 255, 0.1);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  color: rgba(0, 240, 255, 0.7);
}


/* ==========================================================================
   SETTINGS MODAL
   ========================================================================== */
.aiot-settings{
  position: absolute;
  inset: 0;
  background: rgba(0, 5, 16, 0.85);
  z-index: 12;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}
.aiot-settings.aiot-open{ display: flex; }
.aiot-settings-box{
  width: min(520px, 92vw);
  background: linear-gradient(180deg, rgba(0, 10, 25, 0.97), rgba(0, 20, 45, 0.95));
  border: 1px solid rgba(0, 240, 255, 0.45);
  border-radius: 10px;
  padding: 22px 26px;
}
.aiot-settings-box h3{
  margin: 0 0 12px;
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  color: #00f0ff;
}
.aiot-warn{
  background: rgba(255, 170, 0, 0.1);
  border: 1px solid rgba(255, 170, 0, 0.45);
  color: #fd8;
  padding: 10px 12px;
  border-radius: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  margin-bottom: 14px;
}
.aiot-field{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.aiot-field span{
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(0, 240, 255, 0.7);
}
.aiot-field input{
  background: rgba(0, 20, 40, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: #e0f7ff;
  font-family: monospace;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 5px;
  outline: none;
}
.aiot-field input:focus{ border-color: #00f0ff; box-shadow: 0 0 8px rgba(0, 240, 255, 0.35); }
.aiot-field code{
  font-size: 10px;
  background: rgba(0, 240, 255, 0.1);
  padding: 1px 4px;
  border-radius: 3px;
}

/* Campo TOGGLE - usado pelo Modo Simulador (label + checkbox alinhados) */
.aiot-field-toggle{
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  background: rgba(0, 240, 255, 0.05);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
}
.aiot-field-toggle:hover{ background: rgba(0, 240, 255, 0.08); }
.aiot-field-toggle > span:first-child{
  flex: 1;
  font-size: 12px;
  color: #e0f7ff;
  text-transform: none;
  letter-spacing: 0.3px;
}
.aiot-field-toggle strong{
  color: var(--pri, #00f0ff);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
}
.aiot-field-toggle small{
  font-size: 11px;
  line-height: 1.4;
  display: block;
  font-family: 'Rajdhani', sans-serif;
}
.aiot-field-toggle input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  background: rgba(0, 20, 40, 0.8);
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: .25s;
  flex-shrink: 0;
  margin-top: 2px;
}
.aiot-field-toggle input[type="checkbox"]::after{
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: rgba(0, 240, 255, 0.55);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 240, 255, 0.3);
  transition: .25s;
}
.aiot-field-toggle input[type="checkbox"]:checked{
  background: rgba(0, 240, 255, 0.25);
  border-color: #00f0ff;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}
.aiot-field-toggle input[type="checkbox"]:checked::after{
  left: 22px;
  background: #00f0ff;
  box-shadow: 0 0 8px #00f0ff;
}
/* Tema claro */
body.light-theme .aiot-field-toggle{
  background: rgba(0, 168, 222, 0.06);
  border-color: rgba(0, 136, 200, 0.3);
}
body.light-theme .aiot-field-toggle > span:first-child{ color: #000; }
body.light-theme .aiot-field-toggle strong{ color: #0088c8; }
body.light-theme .aiot-field-toggle input[type="checkbox"]{
  background: #fff;
  border-color: rgba(0, 136, 200, 0.4);
}
body.light-theme .aiot-field-toggle input[type="checkbox"]:checked{
  background: rgba(0, 168, 222, 0.25);
  border-color: #0088c8;
}
body.light-theme .aiot-field-toggle input[type="checkbox"]:checked::after{
  background: #0088c8;
  box-shadow: 0 0 6px #0088c8;
}
.aiot-settings-foot{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 240, 255, 0.2);
}


/* ==========================================================================
   BOTÃO DE ACESSO no painel direito (hud-right)
   ========================================================================== */
.aiot-access-section{
  margin-top: 8px;
}
.aiot-access-btn{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(0, 240, 255, 0.04));
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00f0ff;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: .2s;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}
.aiot-access-btn:hover{
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.22), rgba(0, 240, 255, 0.08));
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.35);
  transform: translateY(-1px);
}
.aiot-access-btn svg{
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Estado colapsado do painel direito (.hud-right.collapsed)
   - Seção fica centralizada
   - Texto "SENSORES BMS" oculto → resta apenas o ícone
   - Botão vira um ícone clicável com tooltip via title nativo
   - Border/background discretos para casar com .hud-title colapsado */
.hud-right.collapsed .aiot-access-section{
  display: flex;
  justify-content: center;
  margin: 4px 0;
}
.hud-right.collapsed .aiot-access-btn{
  width: 38px;
  height: 38px;
  padding: 0;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 8px;
  gap: 0;
}
.hud-right.collapsed .aiot-access-btn span{
  display: none;
}
.hud-right.collapsed .aiot-access-btn svg{
  width: 20px;
  height: 20px;
}
.hud-right.collapsed .aiot-access-btn:hover{
  background: rgba(0, 240, 255, 0.12);
  border-color: var(--pri, #00f0ff);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
  transform: none;
}
/* Tooltip nativo customizado via pseudo-elemento no hover - aparece à esquerda */
.hud-right.collapsed .aiot-access-btn{
  position: relative;
}
.hud-right.collapsed .aiot-access-btn:hover::after{
  content: 'SENSORES BMS';
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 10, 25, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00f0ff;
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 100;
}

/* Tema claro do botão minimizado */
body.light-theme .hud-right.collapsed .aiot-access-btn{
  border-color: rgba(0, 136, 200, 0.35);
  color: #0088c8;
}
body.light-theme .hud-right.collapsed .aiot-access-btn:hover{
  background: rgba(0, 168, 222, 0.15);
  border-color: #0088c8;
}
body.light-theme .hud-right.collapsed .aiot-access-btn:hover::after{
  background: #ffffff;
  border-color: rgba(0, 136, 200, 0.4);
  color: #000;
}


/* ==========================================================================
   TEMA CLARO - cores sólidas e contrastes fortes (sem transparências fracas
   que ficavam quase invisíveis).
   ========================================================================== */
body.light-theme .aiot-modal-box{
  background: linear-gradient(180deg, #eef2f6, #dde4eb);
  border-color: rgba(0, 136, 200, 0.5);
  color: #000;
}
body.light-theme .aiot-title{ color: #000; font-weight: 900; }
body.light-theme .aiot-title-icon{ border-color: #000; box-shadow: none; }
body.light-theme .aiot-title-icon::after{ background: radial-gradient(circle, #000 30%, transparent 35%); }
body.light-theme .aiot-header{
  background: linear-gradient(180deg, #d8e7f5, #c5dbed);  /* azul claro sólido */
  border-bottom: 1px solid #0088c8;
}
body.light-theme .aiot-kpi-card{
  background: #ffffff;
  border-color: rgba(0, 136, 200, 0.4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
body.light-theme .aiot-kpi-value{ color: #000; }
body.light-theme .aiot-kpi-online  .aiot-kpi-value{ color: #0b9616; text-shadow: none; }
body.light-theme .aiot-kpi-offline .aiot-kpi-value{ color: #555; text-shadow: none; }
body.light-theme .aiot-kpi-alert   .aiot-kpi-value{ color: #c92500; text-shadow: none; }
body.light-theme .aiot-kpi-label{
  color: #003a5c;                       /* azul-petróleo escuro */
  font-weight: 700;
  opacity: 1;
}
body.light-theme .aiot-filter-bar{
  background: rgba(0, 168, 222, 0.04);
  border-bottom: 1px solid rgba(0, 136, 200, 0.3);
}
body.light-theme .aiot-filter-search{
  background: #fff;
  border: 1px solid rgba(0, 136, 200, 0.45);
}
body.light-theme .aiot-search-icon{ color: #003a5c; }
body.light-theme .aiot-search-input{ color: #000; }
body.light-theme .aiot-search-input::placeholder{ color: rgba(0, 58, 92, 0.5); }
body.light-theme .aiot-status-btn{
  color: #003a5c;
  background: #fff;
  border: 1px solid rgba(0, 136, 200, 0.45);
}
body.light-theme .aiot-status-btn:hover{ color: #0088c8; border-color: #0088c8; background: #e8f3fa; }
body.light-theme .aiot-status-btn.aiot-active{
  background: #0088c8;
  color: #fff;
  border-color: #0088c8;
}
body.light-theme .aiot-view-btn{
  color: #003a5c;
  background: #fff;
  border: 1px solid rgba(0, 136, 200, 0.45);
}
body.light-theme .aiot-view-btn:hover{ color: #0088c8; border-color: #0088c8; background: #e8f3fa; }
body.light-theme .aiot-view-btn.aiot-active{
  background: #0088c8;
  color: #fff;
  border-color: #0088c8;
}
body.light-theme .aiot-refresh-btn{
  color: #003a5c;
  background: #fff;
  border: 1px solid rgba(0, 136, 200, 0.45);
}
body.light-theme .aiot-refresh-btn:hover{ background: #e8f3fa; }
body.light-theme .aiot-ai-btn{
  background: #0088c8 !important;
  color: #fff !important;
  border-color: #0088c8 !important;
}
body.light-theme .aiot-ai-btn .aiot-ai-btn-label{
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 136, 200, 0.6);
}
body.light-theme .aiot-ai-btn:hover{ background: #006da3 !important; }
body.light-theme .aiot-interval-select{
  background: #fff;
  color: #000;
  border: 1px solid rgba(0, 136, 200, 0.45);
}
body.light-theme .aiot-interval-select option{ background: #fff; color: #000; }
body.light-theme .aiot-last-update{ color: #003a5c; font-weight: 600; }
body.light-theme .aiot-empty{ color: #003a5c; }
body.light-theme .aiot-group{
  background: #ffffff;
  border: 1px solid rgba(0, 136, 200, 0.3);
}
body.light-theme .aiot-group-head{
  background: linear-gradient(180deg, #cfe4f4, #b8d6ea);   /* azul claro sólido */
  border-bottom: 1px solid rgba(0, 136, 200, 0.45);
  color: #000;
}
body.light-theme .aiot-group-head strong{
  color: #000;
  font-weight: 800;
  font-size: 14px;
}
body.light-theme .aiot-group-chevron{ color: #003a5c; }
body.light-theme .aiot-group-badge{
  background: rgba(0, 168, 222, 0.2);
  color: #003a5c;
  border: 1px solid rgba(0, 136, 200, 0.5);
  font-weight: 700;
}
body.light-theme .aiot-group-badge.aiot-badge-ok    { background: #d4f5d8; border-color: #0b9616; color: #08660f; }
body.light-theme .aiot-group-badge.aiot-badge-alert { background: #fde0d8; border-color: #d63a18; color: #a02410; }
body.light-theme .aiot-group-badge.aiot-badge-offline{ background: #e5e7ea; border-color: #777; color: #333; }
body.light-theme .aiot-table th{
  background: rgba(0, 168, 222, 0.1);
  color: #000;
  border-bottom-color: rgba(0, 136, 200, 0.25);
}
body.light-theme .aiot-table td{ color: #000; border-bottom-color: rgba(0, 0, 0, 0.08); }
body.light-theme .aiot-table tbody tr:hover td{ background: rgba(0, 168, 222, 0.07); }
body.light-theme .aiot-gauge-wrap{
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 136, 200, 0.25);
}
body.light-theme .aiot-gauge-name{ color: #000; }
body.light-theme .aiot-gauge-range{ color: #000; }
/* No tema claro o sensor color continua aparecendo nas BORDAS e ACCENTS,
   mas o fundo do modal vira claro para legibilidade do texto preto. */
body.light-theme .aiot-sensor-modal-box{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(245, 248, 251, 0.95));
  border-color: var(--sensor-color);
  color: #000;
  box-shadow: 0 16px 50px var(--sensor-color-glow),
              0 0 0 1px var(--sensor-color-soft);
}
body.light-theme .aiot-settings-box{
  background: linear-gradient(180deg, rgba(238, 242, 246, 0.97), rgba(221, 228, 235, 0.94));
  border-color: rgba(0, 136, 200, 0.4);
  color: #000;
}
body.light-theme .aiot-sensor-modal-head{
  background: linear-gradient(180deg, var(--sensor-color-soft), var(--sensor-color-faint));
  border-bottom: 1px solid var(--sensor-color);
}
body.light-theme .aiot-sensor-modal .aiot-sensor-title{
  color: #000;
  text-shadow: 0 0 6px var(--sensor-color-faint);
}
body.light-theme .aiot-settings-box h3{ color: #000; }
body.light-theme .aiot-sensor-modal .aiot-sensor-group{ color: #003a5c; opacity: 1; }
body.light-theme .aiot-sensor-meta{ color: #000; }
body.light-theme .aiot-sensor-modal .aiot-sensor-meta strong{ color: #003a5c; opacity: 1; }
body.light-theme .aiot-sensor-modal .aiot-sensor-meta-row{ color: #003a5c; opacity: 1; }
body.light-theme .aiot-chart-placeholder{ color: #000; border-color: rgba(0, 0, 0, 0.25); }

/* Trend chip - tema claro */
body.light-theme .aiot-sensor-modal .aiot-sd-trend strong{ color: #003a5c; opacity: 1; }
body.light-theme .aiot-sd-trend-rising  { color: #b06d00; }
body.light-theme .aiot-sd-trend-falling { color: #0088c8; }
body.light-theme .aiot-sd-trend-stable  { color: #333; }

/* Seções no tema claro: divisor + h5 herdam a cor do sensor */
body.light-theme .aiot-sensor-modal .aiot-sd-section{ border-top-color: var(--sensor-color-soft); }
body.light-theme .aiot-sensor-modal .aiot-sd-section h5{ color: var(--sensor-color); }

/* Análise preditiva no tema claro: cor do sensor nas bordas/h5,
   mas severity (normal/atenção/alerta) sobrescreve para legibilidade. */
body.light-theme .aiot-sensor-modal .aiot-sd-ai{
  background: var(--sensor-color-faint);
  border-color: var(--sensor-color-soft);
}
body.light-theme .aiot-sensor-modal .aiot-sd-ai-normal{
  background: #e6f7eb;
  border-color: rgba(46, 150, 80, 0.45);
}
body.light-theme .aiot-sensor-modal .aiot-sd-ai-medium{
  background: #fff7e0;
  border-color: rgba(180, 130, 0, 0.5);
}
body.light-theme .aiot-sensor-modal .aiot-sd-ai-high{
  background: #ffe2d8;
  border-color: rgba(214, 58, 24, 0.55);
}
body.light-theme .aiot-sensor-modal .aiot-sd-ai h5{ color: var(--sensor-color); }
body.light-theme .aiot-sensor-modal .aiot-sd-ai-icon{ color: var(--sensor-color); text-shadow: none; }
body.light-theme .aiot-sd-ai-statustext{ color: #000; }
body.light-theme .aiot-sd-ai-pred{ color: #000; }
body.light-theme .aiot-sensor-modal .aiot-sd-ai-rec{
  color: #333;
  border-top-color: rgba(0, 0, 0, 0.1);
}
body.light-theme .aiot-sensor-modal .aiot-sd-ai-rec strong{ color: var(--sensor-color); }

/* Gráfico no tema claro: fundo branco + borda na cor do sensor */
body.light-theme .aiot-sensor-modal .aiot-sd-chart{
  background: #ffffff;
  border-color: var(--sensor-color-soft);
}
body.light-theme .aiot-line-chart text{ fill: #003a5c !important; }
body.light-theme .aiot-line-chart line[stroke^="rgba(255,255,255"]{
  stroke: rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .aiot-chart-empty{
  background: #f5f8fa;
  border-color: var(--sensor-color-soft);
  color: #555;
}

/* Stats no tema claro: cartões brancos com borda e accent na cor do sensor */
body.light-theme .aiot-sensor-modal .aiot-sd-stats > div{
  background: #ffffff;
  border: 1px solid var(--sensor-color-soft);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
body.light-theme .aiot-sensor-modal .aiot-sd-stats strong{
  color: var(--sensor-color);
  text-shadow: none;
}
body.light-theme .aiot-sensor-modal .aiot-sd-stats span{ color: #003a5c; opacity: 1; }

/* Log de alarmes no tema claro */
body.light-theme .aiot-sensor-modal .aiot-sd-alarms{
  background: #ffffff;
  border-color: var(--sensor-color-soft);
}
body.light-theme .aiot-sensor-modal .aiot-alarm-item{
  color: #000;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light-theme .aiot-sensor-modal .aiot-alarm-time{ color: var(--sensor-color); opacity: 1; }
body.light-theme .aiot-alarm-val{ color: #000; }
body.light-theme .aiot-alarm-msg{ color: #333; }
body.light-theme .aiot-alarm-empty{ color: #555; }
body.light-theme .aiot-btn-primary{ background: #0088c8; border-color: #0088c8; color: #fff; }
body.light-theme .aiot-btn-secondary{ color: #000; }
body.light-theme .aiot-btn-ghost{ color: #000; border-color: rgba(0, 0, 0, 0.35); }
body.light-theme .aiot-btn-icon{ color: #000; border-color: rgba(0, 0, 0, 0.35); }
body.light-theme .aiot-btn-icon:hover{
  background: rgba(0, 168, 222, 0.18);
  border-color: #0088c8;
  color: #0088c8;
}
body.light-theme .aiot-btn-icon[data-act="close"]:hover{
  background: rgba(220, 0, 70, 0.15);
  border-color: #c00;
  color: #c00;
}
body.light-theme .aiot-btn-icon-lg{
  color: #000;
  border-color: rgba(0, 0, 0, 0.4);
}
body.light-theme .aiot-btn-icon-lg:hover{
  background: rgba(220, 0, 70, 0.15);
  border-color: #c00;
  color: #c00;
}
body.light-theme .aiot-btn-icon-lg-primary{
  background: rgba(0, 168, 222, 0.18);
  border-color: #0088c8;
  color: #0088c8;
}
body.light-theme .aiot-btn-icon-lg-primary:hover{
  background: #0088c8;
  color: #fff;
}
body.light-theme .aiot-field span{ color: #000; }
body.light-theme .aiot-field input{ background: #fff; color: #000; border-color: rgba(0, 136, 200, 0.4); }
body.light-theme .aiot-access-btn{
  background: linear-gradient(135deg, rgba(0, 168, 222, 0.12), rgba(0, 168, 222, 0.04));
  border-color: rgba(0, 136, 200, 0.4);
  color: #000;
}

/* Handle de resize no tema claro - traços em azul-petróleo */
body.light-theme .aiot-resize-handle{
  background-image:
    linear-gradient(135deg,
      transparent 0%, transparent 40%,
      rgba(0, 136, 200, 0.55) 41%, rgba(0, 136, 200, 0.55) 46%,
      transparent 47%, transparent 60%,
      rgba(0, 136, 200, 0.55) 61%, rgba(0, 136, 200, 0.55) 66%,
      transparent 67%, transparent 80%,
      rgba(0, 136, 200, 0.55) 81%, rgba(0, 136, 200, 0.55) 86%,
      transparent 87%, transparent 100%);
}


/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .aiot-blink,
  .aiot-refresh-btn.aiot-spinning .aiot-refresh-icon,
  .aiot-dot-alert{
    animation: none;
  }
}


/* ==========================================================================
   TEMA CLARO + FULLSCREEN
   A regra .aiot-modal.aiot-fullscreen .aiot-modal-box (3 classes) vence o
   body.light-theme .aiot-modal-box (2 classes + tag) — então em fullscreen
   no tema claro o fundo virava escuro com cards claros (visual quebrado).
   Aqui adicionamos overrides com especificidade maior (4 classes + tag).
   ========================================================================== */

/* Backdrop com tonalidade clara em vez de escura */
body.light-theme .aiot-modal.aiot-fullscreen .aiot-modal-backdrop{
  background: rgba(225, 232, 240, 0.82);
}

/* Modal-box - fundo cinza-prateado claro + texto preto */
body.light-theme .aiot-modal.aiot-fullscreen .aiot-modal-box{
  background: linear-gradient(180deg, rgba(238, 242, 246, 0.98), rgba(221, 228, 235, 0.96));
  border-color: rgba(0, 136, 200, 0.4);
  color: #000;
}

/* Header em fullscreen + tema claro - mesmo azul claro sólido do modo normal */
body.light-theme .aiot-modal.aiot-fullscreen .aiot-header{
  background: linear-gradient(180deg, #d8e7f5, #c5dbed);
  border-bottom: 1px solid #0088c8;
}

/* Modal de SETTINGS em fullscreen + light - fundo claro */
body.light-theme .aiot-modal.aiot-fullscreen .aiot-settings-box{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 251, 0.96));
  border-color: rgba(0, 136, 200, 0.4);
  color: #000;
}

/* Modal de SENSOR DETAIL em fullscreen + light - mantém accent na cor do sensor */
body.light-theme .aiot-modal.aiot-fullscreen .aiot-sensor-modal-box{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 251, 0.96));
  border-color: var(--sensor-color);
  color: #000;
}
body.light-theme .aiot-modal.aiot-fullscreen .aiot-sensor-modal-head{
  background: linear-gradient(180deg, var(--sensor-color-soft), var(--sensor-color-faint));
  border-bottom: 1px solid var(--sensor-color);
}

/* Painel de PANORAMA PREDITIVO em fullscreen + light */
body.light-theme .aiot-modal.aiot-fullscreen .aiot-analysis-box{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(245, 248, 251, 0.94));
  border-color: rgba(0, 136, 200, 0.45);
}
body.light-theme .aiot-modal.aiot-fullscreen .aiot-analysis-head{
  background: linear-gradient(180deg, #d8e7f5, #c5dbed);
  border-bottom: 1px solid #0088c8;
}
body.light-theme .aiot-modal.aiot-fullscreen .aiot-analysis-head h3{ color: #0088c8; }
body.light-theme .aiot-modal.aiot-fullscreen .aiot-analysis-icon{
  color: #0088c8;
  border-color: rgba(0, 136, 200, 0.5);
  background: rgba(0, 168, 222, 0.1);
  text-shadow: none;
}

/* Painel do CHAT em fullscreen + light */
body.light-theme .aiot-modal.aiot-fullscreen .aiot-chat-box{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(245, 248, 251, 0.94));
  border-color: rgba(0, 136, 200, 0.45);
}
body.light-theme .aiot-modal.aiot-fullscreen .aiot-chat-head{
  background: linear-gradient(180deg, #d8e7f5, #c5dbed);
  border-bottom: 1px solid #0088c8;
}
body.light-theme .aiot-modal.aiot-fullscreen .aiot-chat-title{ color: #0088c8; text-shadow: none; }
body.light-theme .aiot-modal.aiot-fullscreen .aiot-chat-input-bar{
  background: rgba(255, 255, 255, 0.7);
  border-top-color: rgba(0, 136, 200, 0.2);
}
body.light-theme .aiot-modal.aiot-fullscreen .aiot-chat-input{
  background: #fff;
  border-color: rgba(0, 136, 200, 0.4);
  color: #000;
}
body.light-theme .aiot-modal.aiot-fullscreen .aiot-chat-input::placeholder{ color: rgba(0, 0, 0, 0.45); }

/* Balão flutuante: mantém visual ciano (combina com a logo iA) em ambos temas.
   Em tema claro adicionamos uma sombra externa mais visível para destacar. */
body.light-theme .aiot-chat-bubble{
  box-shadow: 0 6px 20px rgba(0, 136, 200, 0.45),
              0 0 0 1px rgba(0, 136, 200, 0.4),
              0 0 14px rgba(0, 168, 222, 0.45);
}
body.light-theme .aiot-chat-bubble:hover{
  box-shadow: 0 10px 28px rgba(0, 136, 200, 0.6),
              0 0 0 2px rgba(0, 136, 200, 0.55);
}

/* Mensagens do chat em fullscreen + light - garante contraste forte */
body.light-theme .aiot-modal.aiot-fullscreen .aiot-chat-msg-user{
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.35);
  color: #000;
}
body.light-theme .aiot-modal.aiot-fullscreen .aiot-chat-msg-ai{
  background: rgba(0, 168, 222, 0.12);
  border-color: rgba(0, 136, 200, 0.45);
  color: #000;
}
body.light-theme .aiot-modal.aiot-fullscreen .aiot-chat-msg-ai strong{ color: #000; }
body.light-theme .aiot-modal.aiot-fullscreen .aiot-chat-empty{ color: #555; }