/* XINGUZINHO_CENTRAL_V2_FASE4_HEALTH_CSS_V1 */

.xv4-painel{
  margin-top:18px;
}

.xv4-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.xv4-body{
  padding:16px;
}

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

.xv4-card{
  padding:14px;
  border:1px solid var(--tema-borda,#e2e8f0);
  border-radius:13px;
  background:var(--tema-card,#fff);
}

.xv4-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}

.xv4-card-head strong{
  color:var(--tema-texto,#0f172a);
  font-size:13px;
}

.xv4-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 7px;
  border-radius:999px;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}

.xv4-ok{
  background:#dcfce7;
  color:#166534;
}

.xv4-bad{
  background:#fee2e2;
  color:#991b1b;
}

.xv4-info{
  background:#dbeafe;
  color:#1d4ed8;
}

.xv4-off{
  background:#f1f5f9;
  color:#64748b;
}

.xv4-kv{
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px 10px;
  align-items:center;
}

.xv4-kv span{
  color:var(--tema-texto-secundario,#64748b);
  font-size:10px;
}

.xv4-kv strong{
  color:var(--tema-texto,#0f172a);
  font-size:10px;
  text-align:right;
}

.xv4-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin:20px 0 10px;
  flex-wrap:wrap;
}

.xv4-section-head h3{
  margin:0;
  color:var(--tema-texto,#0f172a);
  font-size:14px;
}

.xv4-section-head span{
  display:block;
  margin-top:3px;
  color:var(--tema-texto-secundario,#64748b);
  font-size:10px;
}

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

.xv4-motor{
  padding:13px;
  border:1px solid var(--tema-borda,#e2e8f0);
  border-radius:12px;
  background:var(--tema-card,#fff);
}

.xv4-motor-main{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.xv4-motor-main>div{
  min-width:0;
  display:grid;
  gap:2px;
}

.xv4-motor-main strong{
  color:var(--tema-texto,#0f172a);
  font-size:12px;
}

.xv4-motor-main small{
  color:var(--tema-texto-secundario,#64748b);
  font-size:9px;
}

.xv4-motor-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-top:11px;
}

.xv4-motor-grid>div{
  display:grid;
  gap:3px;
  padding:8px;
  background:var(--tema-card-2,#f8fafc);
  border-radius:8px;
}

.xv4-motor-grid span{
  color:var(--tema-texto-secundario,#64748b);
  font-size:8px;
  text-transform:uppercase;
}

.xv4-motor-grid strong{
  color:var(--tema-texto,#0f172a);
  font-size:9px;
}

.xv4-text-bad{
  color:#b91c1c!important;
}

.xv4-falhas{
  display:grid;
  gap:8px;
}

.xv4-falha{
  display:grid;
  grid-template-columns:minmax(190px,280px) 1fr;
  gap:12px;
  align-items:start;
  padding:11px;
  border:1px solid #fecaca;
  background:#fef2f2;
  border-radius:10px;
}

.xv4-falha>div{
  display:grid;
  gap:2px;
}

.xv4-falha strong{
  color:#991b1b;
  font-size:11px;
}

.xv4-falha span{
  color:#7f1d1d;
  font-size:10px;
}

.xv4-falha small{
  color:#b91c1c;
  font-size:9px;
}

.xv4-falha p{
  margin:0;
  color:#7f1d1d;
  font-size:10px;
  word-break:break-word;
}

.xv4-sem-falhas{
  padding:13px;
  border:1px solid #bbf7d0;
  background:#f0fdf4;
  color:#166534;
  border-radius:10px;
  font-size:11px;
}

.xv4-atualizado{
  margin-top:12px;
  color:var(--tema-texto-secundario,#64748b);
  font-size:9px;
  text-align:right;
}

.xv4-vazio,
.xv4-loading,
.xv4-erro{
  padding:20px;
  text-align:center;
  color:var(--tema-texto-secundario,#64748b);
}

.xv4-erro{
  color:#b91c1c;
}

html[data-theme="dark"] .xv4-ok{
  background:rgba(34,197,94,.13);
  color:#86efac;
}

html[data-theme="dark"] .xv4-bad{
  background:rgba(239,68,68,.13);
  color:#fca5a5;
}

html[data-theme="dark"] .xv4-info{
  background:rgba(59,130,246,.13);
  color:#93c5fd;
}

html[data-theme="dark"] .xv4-off{
  background:rgba(148,163,184,.13);
  color:#cbd5e1;
}

html[data-theme="dark"] .xv4-falha{
  background:rgba(239,68,68,.08);
  border-color:rgba(239,68,68,.22);
}

html[data-theme="dark"] .xv4-falha strong,
html[data-theme="dark"] .xv4-falha span,
html[data-theme="dark"] .xv4-falha small,
html[data-theme="dark"] .xv4-falha p{
  color:#fca5a5;
}

html[data-theme="dark"] .xv4-sem-falhas{
  background:rgba(34,197,94,.08);
  color:#86efac;
  border-color:rgba(34,197,94,.22);
}

@media(max-width:1100px){
  .xv4-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:760px){
  .xv4-grid,
  .xv4-motores{
    grid-template-columns:1fr;
  }

  .xv4-motor-grid{
    grid-template-columns:1fr;
  }

  .xv4-falha{
    grid-template-columns:1fr;
  }
}