/* cranio-mapeador.css — Visualizador Multiplano · Mapeador de Crânio (TC) · AlvusMed */
/* Reaproveita .modal__*, .slice-slider e .btn de pulmao-mapeador.css (genéricos). */

/* ── Overlay ─────────────────────────────────────────────────────────────── */
.cra-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 5, 15, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9810;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.cra-overlay.cra-open { display: flex; }

/* ── Modal shell ─────────────────────────────────────────────────────────── */
.cra-modal {
  width: min(1500px, calc(100vw - 20px));
  height: 97vh;
  background: var(--bg-panel);
  border: var(--border-w-thin) solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(0, 229, 255, 0.07);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header com abas de plano ao centro */
.cra-header { gap: var(--space-3); }
.cra-planos {
  display: flex;
  gap: 4px;
  margin-left: auto;
  margin-right: var(--space-3);
  padding: 3px;
  background: var(--bg-input);
  border: var(--border-w-thin) solid var(--border-default);
  border-radius: var(--radius-md);
}
.cra-plano-btn {
  min-width: 72px;
  height: 26px;
  padding: 0 var(--space-3);
  font: 600 var(--text-xs)/1 var(--font-sans);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t-fast);
}
.cra-plano-btn:hover { color: var(--text-primary); background: var(--bg-input-hover); }
.cra-plano-btn.is-active {
  color: var(--accent);
  background: var(--accent-glow);
  box-shadow: 0 0 8px var(--accent-glow);
}

/* ── Body / Stage ────────────────────────────────────────────────────────── */
.cra-body {
  flex: 1;
  min-height: 0;
  padding: var(--space-3);
  box-sizing: border-box;
}
.cra-stage {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  border: var(--border-w-thin) solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: ns-resize;            /* sinaliza navegação por scroll vertical */
  display: flex;
  align-items: center;
  justify-content: center;
}
.cra-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.cra-loading {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font: 400 var(--text-sm)/1 var(--font-mono);
  color: var(--text-tertiary);
  pointer-events: none;
}

/* ── Footer: meta + slider + hint ────────────────────────────────────────── */
.cra-footer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-top: var(--border-w-thin) solid var(--border-subtle);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.cra-meta {
  font: 400 var(--text-sm)/1 var(--font-mono);
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}
.cra-meta strong { color: var(--accent); font-weight: 600; }
.cra-meta__plano {
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.cra-slider { flex: 1; }
.cra-hint {
  font: 400 var(--text-2xs)/1 var(--font-mono);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Botão de abrir (painel TC Crânio) */
.cra-open-btn { white-space: nowrap; }