/* Tema da Gestão de Projetos (D32, docs/execucao/DESIGN.md): escuro, em vidro, sobre o Bootstrap 5.
   Os valores vêm do DESIGN.md §2; mudar lá e aqui juntos. */

:root,
[data-bs-theme="dark"] {
  --fp-fundo: #020913;
  --fp-vidro: rgba(255, 255, 255, 0.06);
  --fp-vidro-borda: rgba(255, 255, 255, 0.12);
  --fp-painel: rgba(2, 8, 20, 0.52);
  --fp-painel-borda: rgba(255, 255, 255, 0.1);
  --fp-menu: rgba(2, 8, 22, 0.48);
  --fp-divisor: rgba(255, 255, 255, 0.07);
  --fp-campo: rgba(255, 255, 255, 0.06);
  --fp-campo-borda: rgba(255, 255, 255, 0.14);
  --fp-sky: #38bdf8;
  --fp-sky-300: #7dd3fc;
  --fp-sky-100: #bae6fd;
  --fp-botao: #0284c7;
  --fp-gradiente: linear-gradient(135deg, #0284c7, #38bdf8);
  --fp-texto: rgba(255, 255, 255, 0.9);
  --fp-texto-2: rgba(255, 255, 255, 0.82);
  --fp-apagado: rgba(255, 255, 255, 0.5);
  --fp-rotulo: rgba(255, 255, 255, 0.32);
  --fp-fantasma: rgba(255, 255, 255, 0.24);
  --fp-positivo: #4ade80;
  --fp-negativo: #f87171;
  --fp-atencao: #fbbf24;
  --fp-blur: blur(24px);

  --bs-body-bg: var(--fp-fundo);
  --bs-body-color: var(--fp-texto);
  --bs-body-font-family: "Trebuchet MS", "Avenir Next Condensed", "Segoe UI", sans-serif;
  --bs-emphasis-color: #fff;
  --bs-secondary-color: var(--fp-apagado);
  --bs-tertiary-color: var(--fp-rotulo);
  --bs-border-color: var(--fp-vidro-borda);
  --bs-border-color-translucent: var(--fp-vidro-borda);
  --bs-border-radius: 0.625rem;
  --bs-link-color: var(--fp-sky-300);
  --bs-link-color-rgb: 125, 211, 252;
  --bs-link-hover-color: var(--fp-sky-100);
  --bs-link-hover-color-rgb: 186, 230, 253;
  --bs-primary: var(--fp-botao);
  --bs-primary-rgb: 2, 132, 199;
  --bs-danger: var(--fp-negativo);
  --bs-danger-rgb: 248, 113, 113;
  --bs-success: var(--fp-positivo);
  --bs-success-rgb: 74, 222, 128;
  --bs-warning: var(--fp-atencao);
  --bs-warning-rgb: 251, 191, 36;
  --bs-focus-ring-color: rgba(56, 189, 248, 0.35);
  color-scheme: dark; /* calendário e seletor de mês nativos escuros */
}

body {
  font-feature-settings: "ss01" 1, "cv03" 1, "cv11" 1;
  min-height: 100vh;
}

::selection {
  background: rgba(56, 189, 248, 0.28);
  color: #fff;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Fundo: brilhos (orbs) fixos atrás de tudo ── */
.orbs {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.orb {
  position: absolute;
  border-radius: 50%;
}

.orb-1 {
  width: 520px;
  height: 520px;
  top: -210px;
  right: -70px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.52) 0%, rgba(14, 165, 233, 0.22) 42%, transparent 70%);
}

.orb-2 {
  width: 360px;
  height: 360px;
  bottom: -130px;
  left: 140px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.36) 0%, transparent 65%);
}

.orb-3 {
  width: 220px;
  height: 220px;
  top: 100px;
  left: 30px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.28) 0%, transparent 70%);
}

.orb-4 {
  width: 160px;
  height: 160px;
  bottom: 80px;
  right: 80px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, transparent 70%);
}

/* ── Moldura: menu lateral + área principal ── */
.moldura {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 100vh;
}

.icone {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.menu-lateral {
  --bs-offcanvas-width: 240px;
  --bs-offcanvas-bg: #06101f;
  --bs-offcanvas-color: var(--fp-texto);
  --bs-offcanvas-border-color: var(--fp-painel-borda);
}

.menu-corpo {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

@media (min-width: 992px) {
  .menu-lateral {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 185px;
    flex-shrink: 0;
    background: var(--fp-menu) !important; /* o .offcanvas-lg zera o fundo no desktop */
    border-right: 1px solid var(--fp-painel-borda);
    backdrop-filter: var(--fp-blur);
    -webkit-backdrop-filter: var(--fp-blur);
  }
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--fp-divisor);
  color: inherit;
}

.marca:hover {
  text-decoration: none;
}

.marca-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--fp-gradiente);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.marca-nome {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--fp-texto);
}

.marca-sub {
  margin-top: 2px;
  font-size: 9px;
  line-height: 1;
  color: var(--fp-rotulo);
}

.menu-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.5rem 0.375rem;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.625rem;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 6px;
  background: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  text-align: left;
  transition: color 0.15s, background 0.15s;
}

.menu-item .icone {
  color: rgba(255, 255, 255, 0.3);
}

.menu-item:hover {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

.menu-item.ativo {
  border-left-color: var(--fp-sky);
  background: rgba(56, 189, 248, 0.18);
  color: var(--fp-sky-100);
}

.menu-item.ativo .icone {
  color: var(--fp-sky);
}

.menu-rodape {
  margin-top: auto;
  border-top: 1px solid var(--fp-divisor);
}

.principal {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.cabecalho {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--fp-divisor);
  background: rgba(2, 8, 20, 0.3);
}

@media (min-width: 992px) {
  .cabecalho {
    padding: 0.75rem 1.5rem;
  }
}

.cabecalho-desc {
  margin: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.cabecalho-titulo {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--fp-texto);
}

.botao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: rgba(255, 255, 255, 0.5);
}

.botao-icone:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
}

.botao-icone .icone {
  width: 1.25rem;
  height: 1.25rem;
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fp-gradiente);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.avatar:hover {
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.6);
  text-decoration: none;
}

.conteudo {
  padding: 1rem;
  padding-bottom: 3rem;
}

@media (min-width: 992px) {
  .conteudo {
    padding: 1.5rem;
  }
}

/* ── Blocos ── */
.painel {
  padding: 1rem;
  border: 1px solid var(--fp-painel-borda);
  border-radius: 12px;
  background: var(--fp-painel);
  backdrop-filter: var(--fp-blur);
  -webkit-backdrop-filter: var(--fp-blur);
}

.painel-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fp-apagado);
}

.painel-titulo::before {
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 999px;
  background: var(--fp-sky);
  flex-shrink: 0;
}

.indicador {
  height: 100%;
  padding: 14px 18px;
  border: 1px solid var(--fp-vidro-borda);
  border-radius: 12px;
  background: var(--fp-vidro);
  backdrop-filter: var(--fp-blur);
  -webkit-backdrop-filter: var(--fp-blur);
}

.indicador-rotulo {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fp-rotulo);
}

.indicador-valor {
  margin: 0.5rem 0 0;
  font-size: clamp(1.25rem, 5vw, 2rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--fp-sky-300);
}

.indicador-valor.positivo .valor {
  color: var(--fp-positivo);
}

.indicador-ajuda {
  margin: 0.25rem 0 0;
  font-size: 11px;
  color: var(--fp-fantasma);
}

.pilula {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--fp-apagado);
  font-size: 10px;
  font-weight: 500;
  vertical-align: middle;
}

.pilula-azul {
  border-color: rgba(56, 189, 248, 0.3);
  background: rgba(56, 189, 248, 0.12);
  color: var(--fp-sky-100);
}

.pilula-ambar {
  border-color: rgba(251, 191, 36, 0.32);
  background: rgba(251, 191, 36, 0.12);
  color: var(--fp-atencao);
}

.rotulo {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fp-rotulo);
}

.texto-apagado {
  color: var(--fp-apagado);
}

.valor {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.valor.negativo {
  color: var(--fp-negativo);
}

/* ── Listas e cartões do Bootstrap no vidro ── */
.list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-color: var(--fp-texto);
  --bs-list-group-border-color: var(--fp-divisor);
  --bs-list-group-action-hover-bg: rgba(255, 255, 255, 0.04);
}

.painel > .list-group {
  margin: 0 -1rem -1rem;
  border-radius: 0 0 12px 12px;
}

.painel > .list-group .list-group-item {
  border-left: 0;
  border-right: 0;
}

.painel > .list-group .list-group-item:last-child {
  border-bottom: 0;
}

.card {
  --bs-card-bg: var(--fp-vidro);
  --bs-card-border-color: var(--fp-vidro-borda);
  --bs-card-cap-bg: rgba(255, 255, 255, 0.03);
  --bs-card-color: var(--fp-texto);
  --bs-card-border-radius: 12px;
  backdrop-filter: var(--fp-blur);
  -webkit-backdrop-filter: var(--fp-blur);
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--fp-divisor);
  --bs-nav-tabs-link-active-bg: rgba(56, 189, 248, 0.12);
  --bs-nav-tabs-link-active-color: var(--fp-sky-100);
  --bs-nav-tabs-link-active-border-color: rgba(56, 189, 248, 0.3) rgba(56, 189, 248, 0.3) transparent;
  --bs-nav-link-color: var(--fp-apagado);
  --bs-nav-link-hover-color: var(--fp-texto);
  font-size: 13px;
}

details > summary {
  color: var(--fp-apagado);
  font-size: 12px;
  cursor: pointer;
}

/* ── Botões ── */
.btn {
  --bs-btn-font-size: 13px;
  --bs-btn-border-radius: 8px;
}

.btn-primary {
  --bs-btn-bg: var(--fp-botao);
  --bs-btn-border-color: var(--fp-botao);
  --bs-btn-hover-bg: #0ea5e9;
  --bs-btn-hover-border-color: #0ea5e9;
  --bs-btn-active-bg: #0369a1;
  --bs-btn-active-border-color: #0369a1;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  font-weight: 600;
}

.btn-outline-secondary,
.btn-outline-primary {
  --bs-btn-color: var(--fp-texto-2);
  --bs-btn-bg: var(--fp-vidro);
  --bs-btn-border-color: var(--fp-vidro-borda);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.1);
  --bs-btn-hover-border-color: rgba(56, 189, 248, 0.5);
  --bs-btn-active-bg: rgba(56, 189, 248, 0.2);
  --bs-btn-active-border-color: rgba(56, 189, 248, 0.5);
  --bs-btn-active-color: var(--fp-sky-100);
}

.btn-outline-danger {
  --bs-btn-color: var(--fp-negativo);
  --bs-btn-bg: rgba(248, 113, 113, 0.08);
  --bs-btn-border-color: rgba(248, 113, 113, 0.3);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(239, 68, 68, 0.5);
  --bs-btn-hover-border-color: rgba(239, 68, 68, 0.6);
}

.btn-link {
  --bs-btn-color: var(--fp-sky-300);
  --bs-btn-hover-color: var(--fp-sky-100);
}

.btn-acao {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 11px;
}

.btn-acao .icone {
  width: 0.8rem;
  height: 0.8rem;
}

/* ── Avisos ── */
.alert {
  --bs-alert-border-radius: 8px;
  font-size: 13px;
}

.alert-success {
  --bs-alert-bg: rgba(34, 197, 94, 0.12);
  --bs-alert-border-color: rgba(34, 197, 94, 0.3);
  --bs-alert-color: rgba(134, 239, 172, 0.92);
}

.alert-danger {
  --bs-alert-bg: rgba(239, 68, 68, 0.12);
  --bs-alert-border-color: rgba(239, 68, 68, 0.3);
  --bs-alert-color: rgba(252, 165, 165, 0.9);
}

.alert-warning {
  --bs-alert-bg: rgba(251, 191, 36, 0.12);
  --bs-alert-border-color: rgba(251, 191, 36, 0.32);
  --bs-alert-color: #fcd34d;
}

.alert-info {
  --bs-alert-bg: rgba(56, 189, 248, 0.12);
  --bs-alert-border-color: rgba(56, 189, 248, 0.3);
  --bs-alert-color: var(--fp-sky-100);
}

.alert a {
  color: inherit;
  text-decoration: underline;
}

/* ── Campos (formulários do Django e do allauth, sem classe) ── */
.formulario label,
.allauth label {
  margin-bottom: 0.25rem;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.allauth input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.formulario input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.formulario select,
.formulario textarea {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--fp-campo-borda);
  border-radius: 8px;
  background: var(--fp-campo);
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
}

.allauth input:focus,
.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}

.formulario select option,
.formulario select optgroup {
  background: var(--fp-fundo);
  color: #fff;
}

.formulario input[type="checkbox"],
.allauth input[type="checkbox"] {
  accent-color: var(--fp-sky);
}

.formulario .errorlist,
.allauth .errorlist {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  color: var(--fp-negativo);
  font-size: 12px;
}

.formulario .ajuda,
.ajuda {
  font-size: 11px;
  color: var(--fp-rotulo);
}

fieldset.grupo {
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--fp-painel-borda);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

fieldset.grupo legend {
  float: none;
  width: auto;
  padding: 0 0.375rem;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fp-apagado);
}

/* ── Telas do allauth ── */
.allauth h1 {
  margin-bottom: 1rem;
  font-size: 18px;
  font-weight: 600;
  color: var(--fp-texto);
}

.allauth h2 {
  margin: 0 0 0.75rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fp-apagado);
}

.allauth section {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--fp-painel-borda);
  border-radius: 12px;
  background: var(--fp-painel);
}

.allauth section ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0.75rem 0 0;
  list-style: none;
}

.allauth form p,
.allauth form > div {
  margin-bottom: 0.75rem;
}

.allauth p {
  font-size: 13px;
  color: var(--fp-texto-2);
}

.allauth button,
.allauth section a {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--fp-vidro-borda);
  border-radius: 8px;
  background: var(--fp-vidro);
  color: var(--fp-texto-2);
  font-size: 13px;
}

.allauth button[type="submit"] {
  border-color: var(--fp-botao);
  background: var(--fp-botao);
  color: #fff;
  font-weight: 600;
}

.allauth button:hover,
.allauth section a:hover {
  filter: brightness(1.1);
  text-decoration: none;
}

.allauth img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  background: #fff; /* QR code legível no fundo escuro */
  padding: 8px;
}

.allauth table {
  width: 100%;
  font-size: 13px;
}

.allauth code,
.allauth pre {
  color: var(--fp-sky-100);
}

/* ── Entrada (login e verificação do código) ── */
.entrada {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.entrada-titulo {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fp-sky);
}

.entrada-sub {
  margin: 0.5rem 0 0;
  font-size: 14px;
  color: var(--fp-apagado);
}

.entrada-cartao {
  width: 100%;
  max-width: 24rem;
  margin-top: 2rem;
  padding: 1.75rem;
  border: 1px solid var(--fp-vidro-borda);
  border-radius: 16px;
  background: var(--fp-vidro);
  backdrop-filter: var(--fp-blur);
  -webkit-backdrop-filter: var(--fp-blur);
}

.entrada-cartao h1 {
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.entrada-cartao button[type="submit"] {
  width: 100%;
  padding: 0.75rem;
  border-radius: 12px;
}

.entrada-rodape {
  margin-top: 1.5rem;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.2);
}

/* ── Listas de lançamentos ── */
.linha-sub {
  font-size: 12px;
  color: var(--fp-apagado);
}

.conteudo.estreito > * {
  max-width: 40rem;
}

/* Totais do mês: três lado a lado também no celular */
.indicador-compacto {
  padding: 10px 12px;
}

.indicador-compacto .indicador-valor {
  font-size: clamp(0.85rem, 3.6vw, 1.75rem);
}

@media (min-width: 768px) {
  .indicador-compacto {
    padding: 14px 18px;
  }
}