/* ==========================================================================
   MAGNET PRECISION v16.0 — Siluetas Render Pixar + imanes de precisión
   ========================================================================== */

/* --- Recorte del 3% inferior de las siluetas (zona de firma del render) ---
   Los pies terminan al 96% de la imagen, así que recortar el 3.5% inferior
   no toca la anatomía y mantiene intacto el sistema de coordenadas
   porque el recorte se aplica al contenedor, no al mapeo porcentual.       */
.body-image-container.silhouette-pixar,
.emotion-diagram-body,
#zoomImageContainer {
    --silhouette-trim: 3.4%;
}
.body-image-container.silhouette-pixar > img,
.emotion-diagram-body > img {
    clip-path: inset(0 0 var(--silhouette-trim) 0);
}
#zoomImage {
    clip-path: inset(0 0 3.4% 0);
}

/* --- Fondo suave para que la silueta Pixar destaque --- */
.body-image-container.silhouette-pixar,
.emotion-diagram-body {
    background: radial-gradient(ellipse at 50% 45%,
                rgba(139, 92, 246, .07) 0%,
                rgba(59, 130, 246, .05) 45%,
                transparent 75%);
    border-radius: 14px;
}

/* --- Imán "proyección": mismo órgano visto por el otro lado del cuerpo ---
   Se dibuja con borde discontinuo para que el terapeuta distinga el acceso
   principal del acceso secundario (anterior ⇄ posterior).                  */
.magnet-marker.magnet-projection,
.zoom-magnet.magnet-projection,
.emotion-mini-magnet.is-projection {
    border-style: dashed !important;
    opacity: .92;
}
.magnet-marker.magnet-projection::after,
.emotion-mini-magnet.is-projection::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px dotted currentColor;
    opacity: .55;
    pointer-events: none;
}

/* --- Precisión visual: punto de mira central en cada imán --- */
.magnet-marker::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3px;
    height: 3px;
    margin: -1.5px 0 0 -1.5px;
    background: rgba(255, 255, 255, .95);
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0, 0, 0, .6);
    pointer-events: none;
    z-index: 3;
}

/* --- Leyenda de vista dual --- */
.dual-view-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px auto 0;
    padding: 7px 12px;
    max-width: 560px;
    font-size: .72rem;
    line-height: 1.4;
    color: var(--text-secondary);
    background: var(--bg-secondary, rgba(139, 92, 246, .07));
    border: 1px dashed var(--border, rgba(139, 92, 246, .3));
    border-radius: 10px;
}
.dual-view-note i { color: var(--primary); }

/* --- Mini imanes algo más nítidos sobre las siluetas Pixar --- */
.emotion-mini-magnet {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 0 0 2px rgba(255, 255, 255, .85);
}

/* --- Etiquetas de imán legibles sobre fondo claro Pixar --- */
.magnet-label {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ══════════════════════════════════════════════════════════════════════════
   LEGIBILIDAD EN MINIATURA
   --------------------------------------------------------------------------
   Las coordenadas son exactas (separación ≥ 2,22 % del ancho), pero el imán
   se dibuja a 23 px FIJOS: en una tarjeta estrecha la silueta mide ~250 px,
   así que dos imanes contiguos se tocan visualmente aunque sus centros estén
   correctos. Se reduce el disco y su etiqueta en contenedores pequeños, sin
   alterar ninguna posición. El visor ampliado mantiene el tamaño completo.

   El umbral es 460 px porque una silueta a pantalla completa en móvil mide
   ~360 px de ancho: por debajo de eso la etiqueta de texto es más ancha que el
   propio cuerpo y tapa el imán que pretende describir. El nombre sigue
   disponible en el `title` del marcador y en el panel del visor ampliado.
   ══════════════════════════════════════════════════════════════════════════ */
@container (max-width: 460px) {
    .body-image-container .magnet-marker {
        width: 16px; height: 16px; font-size: .46rem;
    }
    .body-image-container .magnet-marker::before {
        width: 2px; height: 2px; margin: -1px 0 0 -1px;
    }
    /* La etiqueta solo aparece al señalar el imán: en miniatura lo ocultaba. */
    .body-image-container .magnet-label {
        opacity: 0;
        transition: opacity .18s ease;
        pointer-events: none;
    }
    .body-image-container .magnet-marker:hover .magnet-label,
    .body-image-container .magnet-marker:focus-visible .magnet-label,
    .body-image-container .magnet-marker.is-open .magnet-label {
        opacity: 1;
    }
}

/* Contenedor de consulta: permite las reglas de arriba */
.body-view-single { container-type: inline-size; }

@media (max-width: 480px) {
    .dual-view-note { font-size: .68rem; padding: 6px 10px; }
}