.xraqua-calc { border:1px solid #e5e7eb; border-radius:14px; padding:16px; background:#fff; max-width:720px; margin:0 auto; }
.xraqua-calc h3 { margin-top:0; }
.xraqua-calc-grid { display:grid; grid-template-columns:1fr 1fr 1fr auto 1fr auto; gap:10px; align-items:end; }
.xq-arrow { align-self:center; }
.xq-row { display:flex; gap:16px; margin-top:10px; flex-wrap:wrap; }
.xq-advanced label { display:flex; flex-direction:column; }
#xq-convert { padding:8px 14px; border-radius:10px; border:1px solid #ddd; background:#f7f7f7; cursor:pointer; }
.xq-result { margin-top:12px; font-size:1.05rem; }
.xq-notes { margin-top:8px; font-size:0.9rem; color:#555; }
@media (max-width: 720px) {
  .xraqua-calc-grid { grid-template-columns:1fr; }
}

/* 1) Texto sempre escuro no bloco do calculador (inclui títulos, labels, resultado, etc.) */
.xraqua-calc, 
.xraqua-calc *, 
.light .xraqua-calc, 
.light .xraqua-calc * {
  color: #111 !important;
}

/* 2) Inputs e selects com fundo claro e texto escuro */
.xraqua-calc input,
.xraqua-calc select,
.xraqua-calc button {
  background-color: #fff !important;
  color: #111 !important;
  border: 1px solid #bbb !important;
}

/* 3) Placeholders (alguns temas deixam o placeholder muito claro) */
.xraqua-calc input::placeholder {
  color: #555 !important;
  opacity: 1 !important;
}

/* 4) Opções do <select> (Safari/iOS às vezes ignora, mas ajuda) */
.xraqua-calc select option {
  color: #111 !important;
  background-color: #fff !important;
}

/* 5) Se o container da fila/coluna tiver “Light text” do Salient */
.light .xraqua-calc label,
.light .xraqua-calc h3 {
  color: #111 !important;
}



@media (max-width: 900px){ .xq-cats{ grid-template-columns: repeat(2, 1fr);} }

/* ============== PAINÉIS DAS CATEGORIAS ============== */
.xq-back { margin-bottom:16px; cursor:pointer; user-select:none; font-weight:600; }
.xq-panel-title { margin-top: 6px; margin: 4px 0 12px 0; font-size: 1.1rem; font-weight: 700; }
.xq-panel { margin-top: 6px; }

.xq-row {
  display:grid; grid-template-columns: 180px 1fr; gap:12px; align-items:center;
  margin-bottom:10px;
}
.xq-row label { color:#111; font-weight:600; }
.xq-row input, .xq-row select {
  width:100%; background:#fff; color:#111; border:1px solid #bbb; border-radius:10px; padding:8px 10px;
}

.xq-actions { display:flex; gap:8px; margin-top:10px; }
.xq-btn {
  padding:8px 14px; border-radius:10px; border:1px solid #ddd; background:#f7f7f7; cursor:pointer;
}

.xq-resultbox {
  border:1px dashed #bbb; border-radius:12px; padding:12px; background:#fafafa;
  font-size:1.05rem; display:flex; justify-content:space-between; align-items:center; gap:10px;
}

/* Força texto escuro dentro do componente (neutraliza "Light text" do tema) */
.xraqua-calc, .xraqua-calc * { color:#111 !important; }



/* Nota: texto branco e força de contraste */
.xq-cat { color: #fff !important; }



.xq-cat:hover { box-shadow: 0 2px 10px rgba(0,0,0,.15); }


/* Centrar o grupo de ações e aumentar o botão */
.xq-actions { 
  display:flex; 
  justify-content:center; 
  gap:12px; 
  margin-top:14px; 
  margin-bottom:14px; /* espaço vazio entre o botão e o quadro do resultado */
}

/* Estilo do botão principal (Converter) */
.xq-actions .xq-btn {
  font-size: 1rem;
  padding: 12px 22px;
  border-radius: 12px;
  background: #059669;   /* verde */
  border-color: #059669;
  color: #fff !important;
}

/* “Copiar” mantém o estilo neutro no quadro do resultado (já existia) */

/* Converter: verde XRAqua */
#xraqua-calculator .xq-actions .xq-btn {
  background-color: #81d742 !important;  /* cor pedida */
  background: #81d742 !important;        /* cobre gradientes */
  border-color: #81d742 !important;
  color: #fff !important;

  /* neutraliza estilos do tema (Salient) que por vezes entram em conflito */
  background-image: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;

  /* tamanho & forma */
  font-size: 1rem;
  padding: 12px 22px;
  border-radius: 12px;
}

/* hover/focus para acessibilidade */
#xraqua-calculator .xq-actions .xq-btn:hover { filter: brightness(0.96); }
#xraqua-calculator .xq-actions .xq-btn:active { transform: scale(0.99); }
#xraqua-calculator .xq-actions .xq-btn:focus { outline: 2px solid #4caf50; outline-offset: 2px; }

.xq-cat:focus { outline: 3px solid rgba(255,255,255,.8); outline-offset: -4px; }
.xq-btn:focus { outline: 2px solid #4caf50; outline-offset: 2px; }


/* Lista de fórmulas (hub) */
.xq-formula-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.xq-formula-item {
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
}
.xq-formula-item:hover { box-shadow: 0 1px 8px rgba(0,0,0,.06); }

/* Painel da fórmula selecionada */
.xq-formula-panel { margin-top: 6px; }

/* Título da fórmula ativa */
.xq-formula-title {
  display:block;
  margin: 24px 0 14px 0;   /* 24px ≈ 2 linhas em corpo normal */
  font-weight: 700;        /* negrito */
  font-size: 1rem;
}

/* Botão ativo na lista de fórmulas */
.xq-formula-item.active {
  background-color: #ede8e4 !important;
  border-color: #d1ccc7 !important;
}





.xq-cat-inner { transition: transform .15s ease; }
.xq-cat:hover .xq-cat-inner { transform: translateY(-2px); }






/* === Forçar grelha e cards dentro do componente === */
#xraqua-calculator .xq-cats{
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: repeat(4, minmax(160px, 1fr)) !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}
@media (max-width: 950px){
  #xraqua-calculator .xq-cats{
    grid-template-columns: repeat(2, minmax(160px, 1fr)) !important;
  }
}

#xraqua-calculator .xq-cat{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 1 / 1;
  min-height: 140px !important;     /* evita colapso se o browser ignorar aspect-ratio */
  border-radius: 14px !important;
  padding: 10px !important;
}

/* Conteúdo centrado e texto branco */
#xraqua-calculator .xq-cat-inner{
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
#xraqua-calculator .xq-label{
  color: #fff !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* === Cores por categoria (com !important para ganhar ao tema) === */
#xraqua-calculator .xq-cat[data-id="concentration"] { background: #6D28D9 !important; }
#xraqua-calculator .xq-cat[data-id="conductivity"]  { background: #1D4ED8 !important; }
#xraqua-calculator .xq-cat[data-id="hardness"]      { background: #DC2626 !important; }
#xraqua-calculator .xq-cat[data-id="temperature"]   { background: #059669 !important; }
#xraqua-calculator .xq-cat[data-id="volume"]        { background: #F97316 !important; }
#xraqua-calculator .xq-cat[data-id="mass"]          { background: #374151 !important; }
#xraqua-calculator .xq-cat[data-id="do"]            { background: #7F1D1D !important; }
#xraqua-calculator .xq-cat[data-id="formulae"]      { background: #92400E !important; }


/* Pintar a branco só quando o <img> tem a classe .to-white */
#xraqua-calculator .xq-img-icon.to-white{ filter: brightness(0) invert(1) !important; }








/* Escalas finas — começa simples; ajusta depois se algum estiver desproporcional */
#xraqua-calculator .xq-cat[data-id="hardness"]  .xq-img-icon,
#xraqua-calculator .xq-cat[data-id="formulae"]  .xq-img-icon{ transform: scale(0.9); }

/* Se algum continuar pequeno, sobe aqui (exemplos) */
/* #xraqua-calculator .xq-cat[data-id="concentration"] .xq-img-icon{ transform: scale(1.1); } */
/* #xraqua-calculator .xq-cat[data-id="do"]           .xq-img-icon{ transform: scale(1.1); } */




/* ===================== HOME: GRELHA E CARDS ===================== */
#xraqua-calculator .xq-cats{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(4, minmax(160px,1fr));
  max-width:860px;
  margin:0 auto;
}
@media (max-width:950px){
  #xraqua-calculator .xq-cats{ grid-template-columns:repeat(2, minmax(160px,1fr)); }
}

#xraqua-calculator .xq-cat{
  aspect-ratio:1/1;
  min-height:140px;              /* garante altura mínima */
  border-radius:14px;
  padding:10px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
#xraqua-calculator .xq-cat:hover{ transform: translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.12); }

#xraqua-calculator .xq-cat-inner{
  height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
}
#xraqua-calculator .xq-label{
  color:#fff !important;
  font-weight:700;
  text-align:center;
}

/* Cores por categoria (independe da ordem visual) */
#xraqua-calculator .xq-cat[data-id="concentration"] { background:#6D28D9; } /* roxo */
#xraqua-calculator .xq-cat[data-id="conductivity"]  { background:#1D4ED8; } /* azul */
#xraqua-calculator .xq-cat[data-id="hardness"]      { background:#DC2626; } /* vermelho */
#xraqua-calculator .xq-cat[data-id="temperature"]   { background:#059669; } /* verde */
#xraqua-calculator .xq-cat[data-id="volume"]        { background:#F97316; } /* laranja */
#xraqua-calculator .xq-cat[data-id="mass"]          { background:#374151; } /* cinza */
#xraqua-calculator .xq-cat[data-id="do"]            { background:#7F1D1D; } /* bordeaux */
#xraqua-calculator .xq-cat[data-id="formulae"]      { background:#92400E; } /* castanho */

/* ===================== ÍCONES: NORMALIZAÇÃO CROSS-BROWSER ===================== */
/* Contentor do ícone: quadrado fluido, consistente entre Chrome/Safari */
#xraqua-calculator .xq-icon{
  width: clamp(56px, 50%, 104px);  /* ajusta 50%→56% se quiseres maior; 104px é teto em desktop */
  aspect-ratio: 1 / 1;
  display:flex; align-items:center; justify-content:center;
}

/* A imagem preenche o contentor de forma previsível */
#xraqua-calculator .xq-img-icon{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  margin:0;
  transform:none !important;      /* limpa escalas antigas */
}

/* Pintar a branco só quando a classe .to-white está presente (PNG pretos) */
#xraqua-calculator .xq-img-icon.to-white{
  filter: brightness(0) invert(1);
}