/* Variáveis base comuns a todos os temas */
:root {
  --cor-principal: #888;  /* Necessário pro Scrollbar */
  --cor-stronger: #555;   /* Necessário pro Scrollbar */

  --cor-cabecalho: #464646;
  --cor-subcabecalho: #666666;
  --cor-texto-principal: #333333;
  --cor-texto-secundario: #292929;
  --cor-inativo: #797979;
  --cor-ok: #4ca58c;
  --cor-no: #a54c4c;
  --cor-fundo: #f1f1f1;
  --cor-fundo-claro: #ffffff;
  --cor-fonte: #fff;
  --cor-borda: #cccccc;
  --cor-consulta: #6fa0c9;
  --cor-retorno: #f0a66b;
  --cor-agenda: #b98fc2;
  --cor_alert: #f1c40f;
}

/* Temas */
.tema-verde {
  --cor-principal: #97b77c;
  --cor-secundaria: #cde3b8;
  --cor-readonly: #eff7e4;
  --cor-stronger: #7ba54c;
  --cor-borda-menu: #77a54c;
  
}

.tema-rosa {
  --cor-principal: #d96ca7;
  --cor-secundaria: #e3b8d1;
  --cor-readonly: #fae8f3;
  --cor-stronger: #da22bb;
  --cor-borda-menu: #b24c88;

}

.tema-azul {
  --cor-principal: #4a90e2;
  --cor-secundaria: #b8d5e3;
  --cor-readonly: #e6f1f7;
  --cor-stronger: #3a7bd5;
  --cor-borda-menu: #3a7bd5;

}

.tema-bege {
  --cor-principal: #c59564;
  --cor-secundaria: #e3cfb8;
  --cor-readonly: #f8f1e7;
  --cor-stronger: #a17f56;
  --cor-borda-menu: #a17f56;

}

.tema-cinza {
  --cor-principal: #a0a0a0;       /* cinza médio */
  --cor-secundaria: #d1d1d1;      /* cinza claro */
  --cor-readonly: #f0f0f0;        /* cinza bem claro */
  --cor-stronger: #707070;        /* cinza escuro */
  --cor-borda-menu: #707070;      /* cinza escuro, igual ao stronger */
}


/* Botões de tema reaproveitando cor-principal */
.tema-btn {
  background-color: var(--cor-principal);
  padding: 0.5rem 1rem;
  margin: 0.25rem;
  cursor: pointer;
}

.tema-btn.ativo {
  outline: 1px solid var(--cor-texto-principal);
  font-weight: bold;
}

/* Botões fixos de exemplo (cores visuais específicas) */
.btn-verde { background-color: #7cb798; }
.btn-rosa { background-color: #d96ca7; }
.btn-azul { background-color: #4a90e2; }
.btn-bege { background-color: #c59564; }
.btn-cinza { background-color: #a0a0a0; }

/* Cores e formato da barra de rolagem*/
/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--cor-principal); /* ← pega do tema ativo no body */
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--cor-stronger);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--cor-principal) transparent;
}