/* Dashboard grid */
.xraqua-dashboard{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  align-items:stretch;
}

/* Cards */
.xraqua-card{
  background:rgba(21, 75, 106, 0.75);
  color:#fff;
  border-radius:16px;
  padding:18px 16px;
  text-align:center;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
}

.xraqua-label{
  font-weight:700;
  margin-bottom:10px; /* espaço entre título e valor */
}

.xraqua-value{
  font-size:46px;
  line-height:1;
  font-weight:800;
  margin-bottom:8px;
}

.xraqua-unit{
  opacity:.8;
  font-size:14px;
}

/* Modal */
.xraqua-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  z-index:9999;
}

.xraqua-modal-content{
  position:relative;
  background:#fff;
  margin:5% auto;
  padding:20px;
  width:90%;
  max-width:900px;
  border-radius:14px;

  /* Evita que o modal cresça demais */
  max-height:85vh;
  overflow:auto;
}

/* Botão fechar */
.xraqua-close{
  position:absolute;
  top:14px;
  right:16px;
  background:none;
  border:none;
  font-size:26px;
  font-weight:700;
  cursor:pointer;
  color:#333;
}

.xraqua-close:hover{
  color:#000;
}

/* ✅ Altura fixa do canvas no modal (multi-instância) */
.xraqua-chart{
  width:100% !important;
  height:420px !important;
  display:block;
}

.xraqua-modal-title {
  color: rgb(21, 75, 106); /* ✅ cor pedida */
  font-weight: 700;        /* mantém bem legível */
  font-size: 20px;         /* opcional, mas recomendado */
  margin-bottom: 12px;
}