/* =========================================================================
   CALC.CSS — Calculadora flutuante (abre pelo menu Ferramentas / Ctrl+Shift+C)
   Painel flutuante: superfície sólida, borda fina, sem desfoque/gradiente.
   Camadas: navbar=1020, notas=2000+, calc=2050.
   Estados (JS em base.html): d-none, calc-opening, calc-open, calc-leaving,
   minimized, animating.
   ========================================================================= */

.calc-panel {
  position: fixed;
  top: 72px;
  left: 20px;
  width: 320px;
  max-width: calc(100vw - 16px);
  z-index: 2050;
  background: var(--rb-surface);
  color: var(--rb-text);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-lg);
  box-shadow: var(--rb-shadow-lg);
  overflow: hidden;

  /* entrada/saída curtas e finitas */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s var(--rb-ease), transform .2s var(--rb-ease);
}

.calc-panel.calc-opening,
.calc-panel.calc-open {
  opacity: 1;
  transform: translateY(0);
}

.calc-panel.calc-leaving {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

/* Cabeçalho (área de arrastar) */
.calc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rb-space-2);
  padding: var(--rb-space-2) var(--rb-space-3);
  background: var(--rb-surface-2);
  border-bottom: 1px solid var(--rb-border);
  cursor: move;
  user-select: none;
}

.calc-header > span {
  display: inline-flex;
  align-items: center;
  gap: var(--rb-space-2);
  font-size: var(--rb-fs-base);
  font-weight: var(--rb-fw-semibold);
  color: var(--rb-text);
}
.calc-header > span i { color: var(--rb-text-subtle); }

.calc-actions {
  display: inline-flex;
  gap: var(--rb-space-1);
}
.calc-actions .btn {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  width: 28px;
  min-height: 28px;
  height: 28px;
  line-height: 1;
}

/* Corpo (altura animada ao minimizar/restaurar) */
.calc-body {
  padding: var(--rb-space-3);
  overflow: hidden;
  transition: height .25s var(--rb-ease), opacity .2s var(--rb-ease);
}

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

.calc-panel.minimized { width: auto; min-width: 220px; }
.calc-panel.minimized .calc-header { border-bottom: 0; }
.calc-panel.minimized .calc-body { display: none; }

/* Visor */
#calcDisplay {
  min-height: 48px;
  font-family: var(--rb-font-mono);
  font-size: var(--rb-fs-xl);
  font-variant-numeric: tabular-nums;
  color: var(--rb-text);
  background: var(--rb-surface-2);
  border: 1px solid var(--rb-border-strong);
  border-radius: var(--rb-radius);
  box-shadow: none;
}
#calcDisplay:focus {
  border-color: var(--rb-primary);
  box-shadow: 0 0 0 3px var(--rb-focus-ring);
  outline: 0;
}

/* Teclado: dígitos em superfície, operadores levemente destacados */
#calcPanel .calc-body .btn {
  min-height: 36px;
  font-variant-numeric: tabular-nums;
}
#calcPanel .calc-body .btn-group > .btn { flex: 1 1 0; }

#calcPanel .calc-body .btn-outline-secondary {
  --bs-btn-bg: var(--rb-surface-2);
  --bs-btn-hover-bg: var(--rb-surface-3);
}

#calcPanel .small { font-size: var(--rb-fs-xs); }