/* ============================================================
   Ciencia en el Cole — geologia.css
   Estilo de la lección de Geología (Layout 3 Columnas Claras con Visor Oscuro)
   ============================================================ */

.organ-page {
  background: var(--clr-bg, #f5f7ff);
  min-height: calc(100vh - var(--nav-h));
  color: var(--clr-text, #1e1b4b);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── PARTE SUPERIOR: Workspace Grid ── */
.organ-top {
  display: grid;
  grid-template-columns: 280px 1fr 380px;
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
}

/* ══════════════════════════════════════════════════
   COLUMNA IZQUIERDA — Biblioteca de Órganos & Estructuras
══════════════════════════════════════════════════ */
.organ-sidebar-left {
  background: var(--clr-card, #ffffff);
  border-right: 1px solid var(--clr-border, #e0e7ff);
  display: flex; flex-direction: column;
  overflow: hidden;
  padding: 16px 14px;
  height: 100%;
}

.organ-sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; padding: 0 4px;
  flex-shrink: 0;
}
.organ-sidebar-title {
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--clr-muted, #8b8fc9);
}
.organ-sidebar-count {
  font-size: 11px; font-weight: 700; color: var(--clr-purple, #6c63ff);
  background: var(--clr-purple-lt, #eef2ff); padding: 2px 8px; border-radius: 20px;
}

.organ-nav-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 40vh;
  overflow-y: auto;
  flex-shrink: 0;
  margin-bottom: 10px;
}

.organ-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 10px;
  background: var(--clr-card, #ffffff);
  border: 1.5px solid transparent;
  cursor: pointer; transition: all 0.22s cubic-bezier(.4,0,.2,1);
}
.organ-nav-item:hover {
  background: #f8fafc; border-color: #cbd5e1;
}
.organ-nav-item--active {
  background: #eff6ff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
}
.organ-nav-thumb {
  width: 38px; height: 38px; border-radius: 8px;
  background: #f1f5f9; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.organ-nav-name {
  font-size: 13px; font-weight: 700; color: var(--clr-text, #1e1b4b);
}
.organ-nav-sys {
  font-size: 11px; color: var(--clr-muted, #8b8fc9);
}

.sidebar-divider {
  height: 1px; background: var(--clr-border, #e0e7ff);
  margin: 10px 0; flex-shrink: 0;
}

.organelle-list {
  display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto; flex: 1; padding-right: 2px;
}
.organelle-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 10px;
  background: var(--clr-card, #ffffff);
  border: 1.5px solid #e2e8f0;
  cursor: pointer; transition: all 0.2s ease;
}
.organelle-item:hover {
  border-color: #94a3b8; background: #f8fafc;
}
.organelle-item--active {
  background: #eff6ff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
}

.structure-num-badge {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--badge-color, #0284c7);
  color: #ffffff; font-weight: 800; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.organelle-item__name {
  font-size: 12.5px; font-weight: 700; color: #0f172a;
}
.organelle-item__desc {
  font-size: 11px; color: #64748b; line-height: 1.3;
}

/* ══════════════════════════════════════════════════
   VISOR CENTRAL Oscuro — Escenario 3D
══════════════════════════════════════════════════ */
.organ-viewer {
  position: relative;
  background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
  display: flex; flex-direction: column;
  justify-content: space-between; padding: 16px;
  overflow: hidden; height: 100%;
}

.organ-viewer__header {
  display: flex; align-items: center; justify-content: space-between;
  z-index: 10;
}
.organ-system-badge {
  font-size: 11px; font-weight: 700; color: #38bdf8;
  background: rgba(56, 189, 248, 0.15); border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 4px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px;
}
.organ-viewer__name {
  font-size: 16px; font-weight: 800; color: #ffffff;
}

.tip-note-box {
  position: absolute; bottom: 16px; left: 16px;
  background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 14px; border-radius: 10px;
  font-size: 11.5px; color: #94a3b8; z-index: 10;
}

.viewer-toolbar-3d {
  position: absolute; top: 16px; right: 16px;
  display: flex; gap: 6px; background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px; border-radius: 12px; z-index: 20;
}
.tool-btn-3d {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(15, 23, 42, 0.85); border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
  font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease; position: relative;
}
.tool-btn-3d:hover {
  background: #0284c7 !important; color: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
}
.tool-btn-3d--active {
  background: #0284c7 !important; color: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.8);
}

.tool-tooltip {
  position: absolute; top: 44px; left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #020617 !important;
  color: #ffffff !important; font-size: 11.5px; font-weight: 700;
  padding: 5px 10px; border-radius: 6px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  z-index: 30;
}
.tool-btn-3d:hover .tool-tooltip {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

.toolbar-separator {
  width: 1px; height: 22px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 4px; align-self: center;
}

.organ-img-wrap {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 2;
}

model-viewer {
  width: 100%; height: 100%;
  --poster-color: transparent;
}

/* 3D Hotspot Slot Pins elegantes y minimalistas */
.glb-hotspot {
  position: absolute;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(15, 23, 42, 0.9);
  border: 2px solid var(--pin-color, #0284c7);
  color: #ffffff; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 0 14px var(--pin-color, #0284c7), 0 4px 10px rgba(0,0,0,0.5);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10; pointer-events: auto; opacity: 1;
}
.glb-hotspot:hover {
  transform: scale(1.25); background: var(--pin-color, #0284c7); color: #000000;
  box-shadow: 0 0 22px var(--pin-color, #0284c7), 0 6px 14px rgba(0,0,0,0.7);
}
.glb-hotspot--active {
  background: var(--pin-color, #0284c7) !important; color: #000000 !important;
  box-shadow: 0 0 24px var(--pin-color, #0284c7), 0 0 10px #ffffff;
  animation: pulsePin3D 1.4s infinite;
}
.glb-hotspot--hidden {
  display: none !important; opacity: 0 !important; pointer-events: none !important;
}

@keyframes pulsePin3D {
  0%, 100% { transform: scale(1.1); box-shadow: 0 0 16px var(--pin-color, #0284c7); }
  50%      { transform: scale(1.3); box-shadow: 0 0 28px var(--pin-color, #0284c7); }
}

.glb-hotspot[data-visible="false"] {
  opacity: 0.85; pointer-events: auto; display: flex;
}
.glb-hotspot[data-visible="true"] {
  opacity: 1; pointer-events: auto; display: flex;
}

/* ══════════════════════════════════════════════════
   COLUMNA DERECHA — Ficha Informativa (Clara)
══════════════════════════════════════════════════ */
.organ-info {
  background: var(--clr-card, #ffffff);
  border-left: 1px solid var(--clr-border, #e0e7ff);
  display: flex; flex-direction: column;
  overflow-y: auto; padding: 22px 24px; gap: 16px;
}

.detail-panel {
  background: var(--clr-card, #ffffff);
  border: 1.5px solid var(--clr-border, #e0e7ff);
  border-radius: var(--r-md, 16px); padding: 16px;
  box-shadow: var(--sh-sm, 0 2px 8px rgba(108,99,255,.12));
}

.detail-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--clr-border, #e0e7ff);
}

.detail-panel__title {
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--clr-muted, #8b8fc9);
}

.detail-panel__tag {
  font-size: 11px; font-weight: 600; color: var(--clr-purple, #6c63ff);
  background: var(--clr-purple-lt, #eef2ff); padding: 2px 8px; border-radius: var(--r-f, 9999px);
}

.organelle-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.organelle-name {
  font-size: 19px; font-weight: 800; color: var(--clr-text, #1e1b4b);
  line-height: 1.2; letter-spacing: -.3px;
}
.organelle-subtitle { font-size: 12px; color: var(--clr-muted, #8b8fc9) }

.detail-table { width: 100%; border-collapse: collapse; margin-top: 8px }
.detail-table td {
  padding: 8px 0; font-size: 12.5px; vertical-align: top;
  border-bottom: 1px solid var(--clr-border, #e0e7ff);
}
.detail-table td:first-child {
  color: var(--clr-muted, #8b8fc9); font-weight: 600; width: 110px; flex-shrink: 0;
}
.detail-table td:last-child { color: #374151; line-height: 1.55 }
.detail-table tr:last-child td { border-bottom: none }

.bio-notes-text {
  font-size: 13px; color: #374151; line-height: 1.65; margin-bottom: 12px;
}

.fun-fact {
  background: linear-gradient(135deg, var(--clr-teal-lt, #e6faf8), rgba(236,253,245,.6));
  border: 1px solid rgba(0, 201, 177, 0.25);
  border-radius: var(--r-sm, 10px); padding: 12px 14px;
  font-size: 12.5px; color: #065F46; line-height: 1.6;
}

@media (max-width: 1024px) {
  .organ-top { grid-template-columns: 240px 1fr 340px }
}
@media (max-width: 800px) {
  .organ-top {
    grid-template-columns: 1fr;
    grid-template-rows: auto 55vh auto;
    height: auto; overflow: visible;
  }
}