@charset "utf-8";

:root {
    --dark-background: #1a1a1a;
    --dark-surface: #2c2c2c;
    --dark-text: #e0e0e0;
    --dark-text-secondary: #a0a0a0;
    --dark-border: #444444;
    --dark-navbar-background: #242424;
    --dark-card-background: #333333;
    --dark-white-replacement: #333333;
    --dark-light-replacement: #3a3a3a;
    --bg-dark-replacement: #343a40;
}

body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    padding-top: 5.0rem;
    background-color: var(--dark-background);
    color: var(--dark-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    color: var(--dark-text);
}

.card {
    border-radius: 0.8rem!important;
    background-color: var(--dark-card-background);
    border: 1px solid var(--dark-border);
    color: var(--dark-text);
}

.card-img-overlay {
    border-radius: 0.8rem!important;
    color: var(--dark-text);
}

.rounded-xl {
    border-radius: 0.8rem!important;
}

.rounded-xl-bottom {
    border-bottom-right-radius: 0.8rem !important;
    border-bottom-left-radius: 0.8rem !important;
}

.rounded-xl-top {
    border-top-left-radius: 0.8rem !important;
    border-top-right-radius: 0.8rem !important;
}

.text-profile-position {
    font-weight: 400;
    color: var(--dark-text-secondary);
}

.text-profile-bio {
    /* font-family: "Raleway"; */
    font-weight: 400;
    color: var(--dark-text-secondary);
}

.navbar {
    opacity: 0.95;
    background-color: var(--dark-navbar-background);
}

.inline-badge {
    height: 16px;
    vertical-align: -10%;
    margin-right: 2px;
    line-break: unset;
}

.no-break {
    white-space: nowrap;
}

.cover-image {
    width: 180px;
    max-height: 120px;
}

.abstract-body {
    min-height: 100px;
    color: var(--dark-text);
}

img.lazy {
    background-image: url('images/loading-dark.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 50px 50px;
    min-height: 80px;
    background-color: var(--dark-surface);
}

div.lazy {
    background-image: url('images/loading-dark.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 50px 50px;
    min-height: 80px;
    background-color: var(--dark-surface);
}

.badge-publication {
    font-size: 100%;
    color: var(--dark-text);
    background-color: var(--dark-border);
}

.email-text {
    font-family: Courier, monospace;
    color: var(--dark-text-secondary);
}

.bg-white {
    background-color: var(--dark-white-replacement) !important;
}

.bg-light {
    background-color: var(--dark-light-replacement) !important;
    color: var(--dark-text);
}

.navbar-light {
    background-color: var(--dark-navbar-background) !important;
    .navbar-brand,
    .navbar-nav .nav-link,
    .navbar-text {
        color: var(--dark-text) !important;
    }
    .navbar-toggler-icon {
        filter: invert(1) hue-rotate(180deg) brightness(1.5);
    }
}

strong, b {
    font-weight: 700;
    color: var(--dark-text);
}

/* Classe text-body adicionada novamente */
.text-body {
    color: var(--dark-text) !important;
}

/* Estilo para o container do botão (li) */
.toggle-container {
  list-style: none; /* Garante que não haja marcadores de lista */
  padding: 0;
  margin: 0;
  display: flex; /* Para centralizar o botão verticalmente se o li for maior */
  align-items: center;
  justify-content: center;
  height: 100%; /* Opcional: faz com que o li ocupe a altura total do seu navbar */
}

/* Estilo para o botão em si (engrenagem) */
#light-toggle {
  background-color: transparent; /* Fundo transparente */
  /* Removemos a borda para um visual mais limpo, como os itens de texto */
  border: none; /* Fundamental para remover o círculo rígido */
  color: #6c757d; /* Cor padrão para o ícone, similar ao cinza dos outros links */
  padding: 8px; /* Ajusta o espaçamento interno para o ícone */
  border-radius: 50%; /* Mantém a forma circular de fundo no hover/active */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none; /* Remove a borda de foco */

  /* Transições para animação mais suave */
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

/* Efeito ao passar o mouse */
#light-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05); /* Um fundo cinza bem sutil ao passar o mouse */
  color: #343a40; /* Cor um pouco mais escura para o ícone no hover, como os links ativos */
  transform: scale(1.05); /* Pequeno zoom para feedback */
}

/* Efeito ao clicar */
#light-toggle:active {
  transform: scale(0.95); /* Pequeno encolhimento no clique */
  background-color: rgba(0, 0, 0, 0.08); /* Fundo um pouco mais escuro no clique */
}

/* Estilo para os ícones Font Awesome dentro do botão */
#light-toggle .fas {
  font-size: 20px; /* Tamanho do ícone, ajuste para bater com a fonte dos links */
  line-height: 1; /* Alinhamento vertical */
  color: inherit; /* Herda a cor definida no #light-toggle */
}

/* --- Adaptação ao Tema (Crucial para harmonia em ambos os temas) --- */

/* Se o seu tema light tem texto escuro e o tema dark tem texto claro: */

/* Para o tema claro (body sem classe ou com classe .light-theme, se você usa) */
body #light-toggle {
    color: #6c757d; /* Cor dos ícones em tema claro (cinza sutil) */
}

body #light-toggle:hover {
    color: #343a40; /* Cor mais escura no hover em tema claro */
}

/* Para o tema escuro (se o body tiver a classe .dark-theme) */
body.dark-theme #light-toggle {
    color: #adb5bd; /* Cor dos ícones em tema escuro (cinza claro sutil) */
}

body.dark-theme #light-toggle:hover {
    color: #e9ecef; /* Cor mais clara no hover em tema escuro */
}

/* Estilo base para a borda no tema claro (efeito ligeiramente mais forte) */
.theme-bordered-block {
    border: 1px solid rgba(0, 0, 0, 0.125); /* Uma borda sutil, quase imperceptível, mas presente */
    border-radius: 0.25rem; /* Opcional: para bordas arredondadas, como na imagem */
}

/* Estilo para a borda no tema escuro (efeito consideravelmente mais forte) */
/* Supondo que seu JavaScript adicione 'dark-theme' ao body quando o tema escuro está ativo */
body.dark-theme .theme-bordered-block {
    border: 1px solid rgba(255, 255, 255, 0.25); /* Uma borda mais visível e clara */
}

/* Para o box-shadow, se você quiser imitar o efeito das imagens */
.theme-bordered-block {
    /* Box-shadow para o tema claro (sutil) */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5); /* Um pouco de sombra para profundidade */
}

body.dark-theme .theme-bordered-block {
    /* Box-shadow para o tema escuro (mais forte) */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3); /* Uma sombra mais pronunciada para destaque */
}