/* VERSÃO: v20250111-008 */
/* ===== VARIÁVEIS CSS ===== */
:root {
  --sidebar-width: 280px;
  --primary-color: #007bff;
  --success-color: #198754;
  --border-color: #dee2e6;
  --shadow-light: rgba(0,123,255,0.15);
  --shadow-success: rgba(25,135,84,0.2);
  --shadow-primary: rgba(13,110,253,0.2);
  --breakpoint-lg: 991.98px;
  --body-bg-color: rgb(7, 39, 60);
}

/* ===== BACKGROUND GLOBAL ===== */
/* Define background para todas as páginas */
html {
  background-color: var(--body-bg-color) !important;
}

body {
  background-color: var(--body-bg-color) !important;
  min-height: 100vh;
}

/* ===== Layout & sidebar ===== */
.with-sidebar { min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  background: var(--body-bg-color);
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 1040; /* acima da navbar */
  transform: translateX(0);
  transition: transform .2s ease;
}
.sidebar .nav-link { padding: .5rem .75rem; border-radius: .5rem; }
.sidebar .nav-link:hover { background: rgba(0,0,0,.04); }
.sidebar-header { position: sticky; top: 0; background: inherit; z-index: 1; }

.content { margin-left: 0; } /* SIDEBAR DESATIVADO TEMPORARIAMENTE - margin-left: var(--sidebar-width); */
.sidebar-collapsed .sidebar { transform: translateX(-100%); }
.sidebar-collapsed .content  { margin-left: 0; }

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar-open .sidebar { transform: translateX(0); }
  .content { margin-left: 0; }
}

/* ===== Branding ===== */
.logo-dot { 
  width: 12px; height: 12px; 
  display: inline-block; 
  background: #2b6cb0; 
  border-radius: 50%; 
}

/* ===== Placeholders ===== */
.placeholder-graphic {
  width: 100%; height: 120px;
  background: repeating-linear-gradient(45deg, #e9ecef, #e9ecef 10px, #f8f9fa 10px, #f8f9fa 20px);
  border-radius: .75rem;
}
.placeholder-graphic.graph { height: 180px; }

/* ===== Dropdown de idioma (alinhamento) ===== */
#langBtn { display: inline-flex; align-items: center; gap: .5rem; }
.lang-label { line-height: 1; }
.dropdown-item { display: flex; align-items: center; gap: .5rem; }

/* ===== Flags (tamanho fixo + SVG em data URI — cores estáveis) ===== */
.flag-icon {
  width: 24px; height: 16px;
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border-radius: 2px;
}

/* garante o mesmo tamanho quando usamos <svg> dentro do botão */
#langFlag svg { width: 24px; height: 16px; display: block; border-radius: 2px; }
.dropdown-item .flag-icon { margin-right: .5rem; }

/* EN – Union Jack simplificado */
.flag-en {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"%3E%3Crect width="60" height="40" fill="%23012169"/%3E%3Cpath d="M0,0 L60,40 M60,0 L0,40" stroke="%23FFF" stroke-width="8"/%3E%3Cpath d="M0,0 L60,40 M60,0 L0,40" stroke="%23C8102E" stroke-width="4"/%3E%3Cpath d="M30,0 v40 M0,20 h60" stroke="%23FFF" stroke-width="10"/%3E%3Cpath d="M30,0 v40 M0,20 h60" stroke="%23C8102E" stroke-width="6"/%3E%3C/svg%3E');
}

/* PT-BR */
.flag-pt-BR {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"%3E%3Crect width="60" height="40" fill="%23009b3a"/%3E%3Cpolygon points="30,6 54,20 30,34 6,20" fill="%23ffdf00"/%3E%3Ccircle cx="30" cy="20" r="8" fill="%23002776"/%3E%3C/svg%3E');
}

/* ES */
.flag-es-ES {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"%3E%3Crect width="60" height="40" fill="%23c60b1e"/%3E%3Crect y="10" width="60" height="20" fill="%23ffc400"/%3E%3C/svg%3E');
}

/* IT */
.flag-it-IT {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"%3E%3Crect width="20" height="40" fill="%23009246"/%3E%3Crect x="20" width="20" height="40" fill="%23ffffff"/%3E%3Crect x="40" width="20" height="40" fill="%23ce2b37"/%3E%3C/svg%3E');
}

/* CN */
.flag-zh-CN {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"%3E%3Crect width="60" height="40" fill="%23de2910"/%3E%3Ccircle cx="12" cy="10" r="4" fill="%23ffde00"/%3E%3C/svg%3E');
}

/* DE */
.flag-de-DE {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"%3E%3Crect width="60" height="13.33" y="0" fill="%23000000"/%3E%3Crect width="60" height="13.33" y="13.33" fill="%23dd0000"/%3E%3Crect width="60" height="13.34" y="26.66" fill="%23ffce00"/%3E%3C/svg%3E');
}

/* FR */
.flag-fr-FR {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"%3E%3Crect width="20" height="40" fill="%230055a4"/%3E%3Crect x="20" width="20" height="40" fill="%23ffffff"/%3E%3Crect x="40" width="20" height="40" fill="%23ef4135"/%3E%3C/svg%3E');
}

/* JP */
.flag-ja-JP {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"%3E%3Crect width="60" height="40" fill="%23ffffff"/%3E%3Ccircle cx="30" cy="20" r="9" fill="%23bc002d"/%3E%3C/svg%3E');
}

/* RU */
.flag-ru-RU {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"%3E%3Crect width="60" height="13.33" y="0" fill="%23ffffff"/%3E%3Crect width="60" height="13.33" y="13.33" fill="%230039a6"/%3E%3Crect width="60" height="13.34" y="26.66" fill="%23d52b1e"/%3E%3C/svg%3E');
}

/* IN */
.flag-hi-IN {
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"%3E%3Crect width="60" height="13.33" y="0" fill="%23ff9933"/%3E%3Crect width="60" height="13.33" y="13.33" fill="%23ffffff"/%3E%3Crect width="60" height="13.34" y="26.66" fill="%23138808"/%3E%3Ccircle cx="30" cy="20" r="4" fill="%23000080"/%3E%3C/svg%3E');
}

/* ===== Pricing (página de preços) ===== */
.pricing-card .card-header { font-weight: 700; }
.pricing-card .display-5 { line-height: 1; }

/* ===== Utils ===== */
.bg-gradient { 
  background: linear-gradient(180deg, rgba(66,153,225,.08), rgba(255,255,255,0)); 
}

.btn-pro { letter-spacing: .2px; }

/* ===== Modal de autenticação ===== */
.modal-body hr {
  margin: 0;
  border-color: var(--border-color);
}

/* Cards de plano no modal */
.plan-card {
  border: 2px solid #e9ecef;
  cursor: pointer;
  transition: all 0.2s ease;
}

.plan-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px var(--shadow-light);
}

.plan-card[data-plan="free"] input:checked ~ label {
  color: var(--success-color);
}

.plan-card[data-plan="pro"] input:checked ~ label {
  color: var(--primary-color);
}

/* Quando o radio está selecionado, destaca o card */
.plan-card input:checked {
  display: none; /* esconde o radio button visual */
}

.plan-card input:checked + label {
  font-weight: 600;
}

.plan-card input:checked ~ * {
  transform: scale(1.02);
}

/* Destaque visual do card selecionado */
.plan-card:has(input:checked) {
  border-color: var(--primary-color);
  background-color: #f8f9ff;
  box-shadow: 0 2px 12px var(--shadow-light);
}

.plan-card[data-plan="free"]:has(input:checked) {
  border-color: var(--success-color);
  background-color: #f8fff9;
  box-shadow: 0 2px 12px var(--shadow-success);
}

.plan-card[data-plan="pro"]:has(input:checked) {
  border-color: var(--primary-color);
  background-color: #f8f9ff;
  box-shadow: 0 2px 12px var(--shadow-primary);
}

/* Fallback para navegadores que não suportam :has() */
.plan-card.selected {
  border-color: var(--primary-color);
  background-color: #f8f9ff;
  box-shadow: 0 2px 12px var(--shadow-light);
}

.plan-card[data-plan="free"].selected {
  border-color: var(--success-color);
  background-color: #f8fff9;
  box-shadow: 0 2px 12px var(--shadow-success);
}

.plan-card[data-plan="pro"].selected {
  border-color: var(--primary-color);
  background-color: #f8f9ff;
  box-shadow: 0 2px 12px var(--shadow-primary);
}

/* ===== Página de Login - 3 Colunas ===== */
.login-columns .col-lg-4 {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.login-columns .col-lg-4 > div {
  flex: 1;
}

.login-columns .px-3 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.login-columns .auth-google .btn {
  min-height: 48px;
  font-weight: 500;
}

.login-columns .vstack {
  min-height: 280px;
}

.login-columns h1,
.login-columns h2 {
  font-weight: 600;
  color: var(--bs-dark);
}

.login-columns .text-secondary {
  font-size: 0.875rem;
  line-height: 1.4;
}

/* ===== Modal de autenticação - 3 colunas ===== */
.auth-columns {
  min-height: 400px;
}

.auth-column-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 1rem;
}

.auth-column-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

/* ===== Responsividade ===== */
@media (max-width: 767.98px) {
  .auth-split .col-md-6.border-start {
    border-left: 0 !important;
    border-top: 1px solid var(--bs-border-color);
    padding-top: 1rem !important;
    margin-top: .5rem;
  }
}

@media (max-width: 991.98px) {
  .login-columns .col-lg-4.border-start.border-end,
  .auth-columns .col-lg-4.border-start.border-end {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 1px solid var(--bs-border-color) !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  
  .login-columns .col-lg-4:first-child,
  .auth-columns .col-lg-4:first-child {
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 1rem;
  }
  
  .login-columns .col-lg-4:last-child,
  .auth-columns .col-lg-4:last-child {
    border-top: 1px solid var(--bs-border-color);
    padding-top: 1rem;
  }
}

/* ===== Correções para modais ===== */
.modal-backdrop {
  transition: opacity 0.15s linear;
}

html.modal-open {
  overflow: hidden;
}

/* ===== CORES DE TEXTO ESPECÍFICAS ===== */

/* Página inicial (index.html) - Textos em branco */
#content header .display-5,
#content header h1.display-5 {
  color: #ffffff !important;
}

#content header .lead,
#content header p.lead,
#content header p.lead.text-secondary {
  color: #ffffff !important;
}

#modules h2.fw-bold,
#modules h2[data-i18n="modules.title"] {
  color: #ffffff !important;
}

#features h2.fw-bold,
#features h2[data-i18n="features.title"] {
  color: #ffffff !important;
}

/* Textos em rgb(203, 177, 162) */
/* Hero subtitle */
#content header p[data-i18n="hero.subtitle"],
#content header p.lead[data-i18n="hero.subtitle"] {
  color: rgb(203, 177, 162) !important;
}

/* Features subtitle */
#features p[data-i18n="features.subtitle"],
#features p.text-secondary[data-i18n="features.subtitle"] {
  color: rgb(203, 177, 162) !important;
}

/* Modules subtitle */
#modules p[data-i18n="modules.subtitle"],
#modules p.text-secondary[data-i18n="modules.subtitle"] {
  color: rgb(203, 177, 162) !important;
}

/* Projects subtitle */
#content p[data-i18n="projects.subtitle"],
#content p.text-muted[data-i18n="projects.subtitle"] {
  color: rgb(203, 177, 162) !important;
}

/* ===== NAVBAR ===== */
.navbar {
  background-color: #f6ead4 !important;
}

/* Textos e itens da navbar - cor mais escura */
.navbar-brand,
.navbar-brand span,
.navbar-nav .nav-link,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
#langBtn,
#langLabel,
#langFlag,
#authArea,
#authArea .btn,
#authArea .dropdown-toggle,
#authArea .dropdown-item {
  color: rgb(50, 70, 85) !important;
}

/* Botão do sidebar na navbar */
.sidebar-toggle-btn {
  color: rgb(50, 70, 85) !important;
}

/* Dropdown de idioma */
.dropdown-menu .dropdown-item {
  color: rgb(50, 70, 85) !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: rgba(50, 70, 85, 0.1) !important;
  color: rgb(50, 70, 85) !important;
}