/* ═══════════════════════════════════════════════════════════════════════════
   USG SNIPPET PANEL SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

/* Left panel container */
.laudo-usg-panel-header {
  width: var(--panel-width);
  flex-shrink: 0;
  align-self: stretch;
  background: var(--bg-panel);
  border-right: var(--border-w-thin) solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.laudo-usg-panel {
  width: var(--panel-width);
  flex-shrink: 0;
  align-self: stretch;
  background: var(--bg-panel);
  border-right: var(--border-w-thin) solid var(--border-subtle);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.usg-panel-empty { font-size: 12px; color: var(--text-muted); padding: 16px 12px; }

/* Accordion painel */
.painel-snippet {
  border-bottom: 1px solid rgba(0,212,255,0.08);
}
.painel-snippet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
  background: linear-gradient(90deg, rgba(var(--painel-cor,0,212,255),0.05), transparent);
}
.painel-snippet-header:hover { background: rgba(0,212,255,0.08); }
.painel-cor-bar {
  width: 3px;
  height: 13px;
  border-radius: 2px;
  flex-shrink: 0;
}
.painel-snippet-title {
  font-size: 11.5px;
  font-weight: 600;
  color: #cbd5e1;
}
.painel-snippet-arrow {
  font-size: 10px;
  color: #64748b;
  transition: transform 0.15s;
}
.painel-snippet.painel-collapsed .painel-snippet-body { display: none; }

/* ── USG panel: reutiliza estrutura snp-* do TC com tema teal escuro ──────── */

/* Dot de cor do painel (substitui ícone de emoji do TC) */
.usg-cat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  opacity: 0.85;
}

/* Corpo scrollável do painel USG */
.usg-snp-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Override do snp-cat-hdr para tema escuro USG */
.laudo-usg-panel .snp-cat { border-bottom-color: rgba(0,212,255,0.1); }
.laudo-usg-panel .snp-cat:last-child { border-bottom: none; }
.laudo-usg-panel .snp-cat-hdr {
  background: #161b27;
  color: #94a3b8;
  padding: 0.38rem 0.65rem;
  font-size: 0.76rem;
}
.laudo-usg-panel .snp-cat-hdr:hover { background: #1e2638; }
.laudo-usg-panel .snp-cat-lbl { color: #cbd5e1; font-size: 0.75rem; }
.laudo-usg-panel .snp-arrow { color: #475569; }

/* Corpo da categoria USG */
.laudo-usg-panel .snp-cat-body {
  background: #0f1624;
  padding: 0.2rem 0.45rem 0.4rem;
}

/* Divisor de grupo USG */
.laudo-usg-panel .snp-divider {
  color: rgba(0,239,255,0.38);
  border-top-color: rgba(0,212,255,0.1);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

/* Itens USG: mesmo layout do snp-item TC mas com cores teal */
.laudo-usg-panel .snp-item {
  background: #161b27;
  border-color: #2a3650;
  color: #94a3b8;
  font-size: 0.74rem;
  padding: 0.22rem 0.5rem;
  margin-bottom: 2px;
}
.laudo-usg-panel .snp-item:hover {
  background: rgba(0,212,255,0.09);
  border-color: rgba(0,212,255,0.35);
  color: #cffafe;
}
.laudo-usg-panel .snp-item:active {
  background: rgba(0,239,255,0.15);
}
.laudo-usg-panel .snp-item.is-active {
  background: rgba(0,239,255,0.14);
  border-color: #00efff;
  color: #00efff;
  font-weight: 600;
}

/* Chip row: itens do mesmo grupo lado a lado */
.usg-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 0 4px;
}
.usg-chip-row .snp-item {
  flex: none;
  width: auto;
  font-size: 11px;
  padding: 3px 9px;
  margin-bottom: 0;
}

/* Flash de highlight ao clicar na frase do preview */
.usg-item-highlight {
  animation: usg-item-flash 0.55s ease-out;
}
@keyframes usg-item-flash {
  0%   { background: rgba(0,239,255,0.35); border-color: #00efff; }
  100% { background: transparent; }
}

/* Right panel: impressões USG */
.laudo-usg-active {
  flex: 1;
  background: transparent;
  border-left: 1px solid rgba(0,212,255,0.12);
  width: 100%;
  font-family: Consolas, monospace;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
/* ── USG Lado (MSK) ─────────────────────────────────────── */
.usg-lado-wrap {
  border: 1.5px solid #3b82f6;
  border-radius: 6px;
  padding: 4px 8px 6px;
  margin: 6px 8px 4px;
  background: transparent;
}
.usg-lado-wrap .usg-tecnica-label {
  color: #3b82f6;
  text-align: center;
}
.usg-lado-btn.is-active {
  background: rgba(59,130,246,0.20) !important;
  border-color: #3b82f6 !important;
  color: #93c5fd !important;
}

/* ── Neon organ dot ──────────────────────────────────────── */
.organ-neon {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
  position: relative;
  background: radial-gradient(
    circle at 35% 28%,
    rgba(255,255,255,0.50) 0%,
    rgba(255,255,255,0.12) 38%,
    var(--nc) 60%
  );
  box-shadow:
    0 0 4px  var(--nc),
    0 0 10px var(--nc),
    0 0 20px color-mix(in srgb, var(--nc) 50%, transparent),
    inset 0 1px 2px rgba(255,255,255,0.35),
    0 2px 5px rgba(0,0,0,0.65);
}

.usg-active-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #00efff;
  padding: 8px 10px 6px;
  border-bottom: 1px solid rgba(0,212,255,0.12);
  background: #161b27;
  flex-shrink: 0;
}
.usg-active-item {
  font-size: 11px;
  color: #94a3b8;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  line-height: 1.4;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  transition: background 0.15s, color 0.15s;
}
.usg-active-item:hover {
  background: rgba(0,212,255,0.07);
  color: #cbd5e1;
}
.usg-active-item.imp-adicionado {
  color: #e2f5ea;
  background: rgba(34,197,94,0.10);
}
.usg-active-item.imp-adicionado .usg-active-bullet { color: #22c55e; }
.usg-active-item.imp-adicionado .usg-imp-badge {
  background: #22c55e;
  color: #052e16;
}
.usg-imp-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0,212,255,0.18);
  color: #00efff;
  margin-left: auto;
  white-space: nowrap;
  align-self: center;
}
.usg-active-bullet { color: #00d4ff; font-weight: 700; flex-shrink: 0; }

/* Preview: paragraphs modified by snippets */
#laudo-editor .snippet-aplicado {
  background: #fef9c3 !important;
  cursor: pointer;
  transition: background 0.2s;
}
#laudo-editor .snippet-aplicado:hover {
  background: #fef08a !important;
}
#laudo-editor .flash-aplicado {
  animation: flash-usg 0.6s ease-out;
}
@keyframes flash-usg {
  0%   { background: #fef08a !important; }
  100% { background: #fef9c3 !important; }
}