/* Calculadora */

/* Camadas: navbar=1040, calc=2050, qrLightbox=2060 (do seu CSS) */
.calc-panel{
  position: fixed;
  top: 20px; left: 20px;
  width: 340px;
  z-index: 2050;
  /* vidro */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  overflow: hidden;
  /* animação base */
  opacity: 0;
  transform: translateY(20px) scale(.98);
  transition: opacity .35s ease, transform .35s ease, box-shadow .25s ease;
  will-change: transform, opacity;
}

/* halo sutil atrás do painel (sem “backdrop” global) */
.calc-panel::before{
  content: "";
  position: absolute; inset: -20%;
  background: radial-gradient(800px 500px at 50% 0%,
              rgba(102, 126, 234, 0.12),
              rgba(118, 75, 162, 0.12) 40%,
              rgba(0,0,0,0) 70%);
  pointer-events: none;
  z-index: 0;
}

/* estados de animação */
.calc-panel.calc-opening,
.calc-panel.calc-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.calc-panel.calc-leaving {
  opacity: 0;
  transform: translateY(20px) scale(.98);
}

/* Cabeçalho: gradiente e borda como o seu modal */
.calc-header{
  position: relative;
  z-index: 1;
  cursor: move;
  user-select: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg,
              rgba(102, 126, 234, 0.10) 0%,
              rgba(118, 75, 162, 0.10) 100%);
  border-bottom: 1px solid rgba(102, 126, 234, 0.20);
}

/* Título com degradê no texto */
.calc-header span{
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Corpo */
.calc-body{
  position: relative;
  z-index: 1;
  padding: 1rem 1.25rem 1.25rem;
  background: linear-gradient(135deg,
              rgba(102, 126, 234, 0.05) 0%,
              rgba(118, 75, 162, 0.05) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;                /* necessário para animar altura */
  transition: height .30s ease, opacity .25s ease;
}

.calc-panel.animating .calc-body{
  will-change: height, opacity;
}

.calc-panel.minimized .calc-body{ display: none; }
.calc-panel.minimized{ width: auto; }

/* Botões do topo (min/close) */
.calc-actions .btn{
  padding: .1rem .45rem; line-height: 1;
  border-radius: .5rem;
}
.calc-actions .btn:focus-visible{
  box-shadow: 0 0 0 .25rem rgba(102,126,234,.25);
}

/* Inputs e botões, com foco “azul/lilás” */
#calcDisplay{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12) inset;
}
#calcDisplay:focus{
  border-color: rgba(102,126,234,.35);
  box-shadow: 0 0 0 .25rem rgba(102,126,234,.20);
}

/* Grade de botões */
#calcPanel .btn{
  border-radius: 10px !important;
}
#calcPanel .btn-outline-light{
  border-color: rgba(255,255,255,.15);
}
#calcPanel .btn-outline-secondary{
  border-color: rgba(255,255,255,.20);
}
#calcPanel .btn-outline-light:hover,
#calcPanel .btn-outline-secondary:hover{
  filter: brightness(1.15);
}

/* Acessibilidade */
#calcPanel .btn:focus-visible{
  box-shadow: 0 0 0 .25rem rgba(102,126,234,.25);
}

/* Ajuste das partículas quando o painel for usado sobre headers com partículas */
.header-particles canvas{
  display:block; width:100%!important; height:100%!important;
}

/* Calculadora – vidro claro */
:root[data-bs-theme="light"] .calc-panel{
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
:root[data-bs-theme="light"] .calc-panel::before{
  background: radial-gradient(800px 500px at 50% 0%,
              rgba(91,140,254,0.14),
              rgba(152,103,255,0.14) 40%,
              rgba(0,0,0,0) 70%);
}
:root[data-bs-theme="light"] .calc-header{
  background: linear-gradient(135deg,
              rgba(91,140,254,0.10) 0%,
              rgba(152,103,255,0.10) 100%);
  border-bottom: 1px solid rgba(13,110,253,0.20);
}
:root[data-bs-theme="light"] .calc-body{
  background: linear-gradient(135deg,
              rgba(91,140,254,0.06) 0%,
              rgba(152,103,255,0.06) 100%);
  border-top: 1px solid rgba(0,0,0,0.06);
}
:root[data-bs-theme="light"] #calcDisplay{
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: inset 0 6px 20px rgba(0,0,0,0.06);
}
:root[data-bs-theme="light"] #calcPanel .btn-outline-light{
  /* no claro, o "outline-light" precisa de contraste */
  color: #1b2130;
  border-color: rgba(0,0,0,0.15);
}

/* Dropdown ícones – mantém animação no claro sem exagero */
:root[data-bs-theme="light"] .dropdown-item i { filter: none; }

/* Pequeno ajuste de contraste em textos gerais */
:root[data-bs-theme="light"] main, 
:root[data-bs-theme="light"] .dropdown-menu,
:root[data-bs-theme="light"] .user-greeting,
:root[data-bs-theme="light"] .nav-link {
  color: #1b2130;
}