@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aldrich:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600;8..144,700&display=swap');

/*— Variáveis de cor —*/
:root {    
    --font-serif: "Playfair Display", Georgia, serif;
    --font-ui1:  "Roboto Flex", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-ui2: "Jura", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-ui3: "Aldrich", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --bg-dark: #000;
    --text-light: #eee;
    --accent: #fd7e14;
    --secondary: #ccc;
    --light-bg: #fff;
    --light-text: #212529;
}

/*[data-bs-theme="dark"] {
    background-color: #000 !important;
    color: #fff !important;
}

[data-bs-theme="light"] {
    background-color: #fff !important;
    color: #000 !important;
}*/

/*— Reset e base —*/
html, body {
    height: 100%;
    margin: 0;
}
body {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-dark);
    color: var(--text-light);    
    font-family: var(--font-ui1);
}

h1, .titulo-grafico {  
  font-weight: 600;       /* ajuste conforme o visual desejado */
  letter-spacing: 0.02em; /* opcional */
}

a {
    text-decoration: none;
}
a:hover {
    text-decoration: none;    
}
a:visited {
    text-decoration: none;
}

/*— Navbar e footer —*/
.navbar, .footer {    
    background-color: var(--bg-dark);
}
.navbar-brand {
    font-size: 1.875rem; /* 30px */
}
.navbar-nav .nav-link.active {
    color: var(--accent) !important;
}
.footer {
    padding: 1rem;
}
.footer a {
    color: var(--text-light);
}

/*— Conteúdo principal —*/
main {
    flex: 1;
    padding: 2rem;
}

/*— Preloader —*/
#preloader {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: var(--bg-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity .6s ease;
}
#preloader.hidden {
    opacity: 0;
    pointer-events: none;
}

/*— Dropdown —*/
.dropdown-menu.bg-secondary {
    border: none;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.3);
}
.dropdown-menu.bg-secondary .dropdown-item {
    color: #fff;
}
.dropdown-menu.bg-secondary .dropdown-item:hover,
.dropdown-menu.bg-secondary .dropdown-item:focus {
    background-color: rgba(255,255,255,.15) !important;
    color: #fff !important;
}

/*— Temas claro/escuro —*/
.light-mode {
    background-color: var(--light-bg) !important;
    color: var(--light-text) !important;
}
.light-mode .navbar, .light-mode .footer {
    background-color: #f8f9fa !important;
    color: var(--light-text) !important;
}
.light-mode .nav-link {
    color: var(--light-text) !important;
}
.dark-mode {
    background-color: var(--bg-dark) !important;
    color: var(--text-light) !important;
}

.light-mode .navbar-toggler-icon {
    /* inverte o branco para preto */
    filter: invert(1);
}

/* Tema claro */
.light-mode .table-default {
  --bs-table-bg: var(--light-bg);
  --bs-table-color: var(--light-text);
  --bs-table-border-color: #dee2e6;
  --bs-table-striped-bg: rgba(0, 0, 0, .05);
  --bs-table-hover-bg: rgba(0, 0, 0, .075);
}

/* Tema escuro */
.dark-mode .table-default {
  --bs-table-bg: var(--bg-dark);
  --bs-table-color: var(--text-light);
  --bs-table-border-color: rgba(255,255,255,.15);
  --bs-table-striped-bg: rgba(255,255,255,.05);
  --bs-table-hover-bg: rgba(255,255,255,.075);
}

form input[type="email"] {
    text-transform: lowercase;
}

.linha {
    border: 5px solid yellow; /* Cor da linha */
    margin: 20px 0;          /* Margem superior e inferior */        
}

/* Botão flutuante */
.tg-fab{
    position: fixed; right: 1.5rem; bottom: 6rem; z-index: 1050;
    width: 56px; height: 56px; border-radius: 50%;
}

.frame-dark {filter: invert(1) hue-rotate(180deg);}
.frame-light {background-color: #fff;}