/* ============================================================
   MAGNET PRECISION LAYER v15.0
   Sistema visual de marcadores de imán con jerarquía clínica.

   TRES TIPOS DE MARCADOR (jerarquía inequívoca):
     .mk-primary    → sólido + halo pulsante = AQUÍ se coloca el imán
     .mk-alternate  → anillo discontinuo     = abordaje alternativo válido
     .mk-projection → fantasma translúcido   = sólo referencia anatómica

   La distinción es crítica: colocar un imán en una proyección de
   referencia sería un error clínico, por eso nunca comparten estilo.
   ============================================================ */

/* ---------- CONTENEDOR DE VISTA ---------- */
.mag-view-wrap { position: relative; }

/* Badge con el rol de la vista */
.mag-view-role {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: var(--radius-full, 999px);
    margin-left: 6px;
    vertical-align: middle;
}
.mag-view-role.is-primary {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.35);
}
.mag-view-role.is-reference {
    background: rgba(100, 116, 139, 0.14);
    color: #64748B;
    border: 1px solid rgba(100, 116, 139, 0.3);
}
[data-theme="dark"] .mag-view-role.is-primary { color: #34D399; }
[data-theme="dark"] .mag-view-role.is-reference { color: #94A3B8; }

/* ============================================================
   MARCADOR BASE
   ============================================================ */
.mag-mk {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 900;
    color: #fff;
    transform: translate(-50%, -50%);
    z-index: 10;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    letter-spacing: 0;
    line-height: 1;
    -webkit-user-select: none;
    user-select: none;
}
.mag-mk:hover,
.mag-mk:focus-visible {
    transform: translate(-50%, -50%) scale(1.35);
    z-index: 40;
    outline: none;
}

/* Punto de mira central: precisión sub-pixel visible */
.mag-mk::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* ---------- POLARIDAD ---------- */
.mag-mk.pol-neg { background: linear-gradient(135deg, #4F46E5, #3730A3); }
.mag-mk.pol-pos { background: linear-gradient(135deg, #DC2626, #991B1B); }

/* ============================================================
   TIPO 1 · PRIMARIO — sitio real de colocación
   ============================================================ */
.mag-mk.mk-primary {
    border: 2.5px solid #fff;
}
.mag-mk.mk-primary.pol-neg {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.28), 0 3px 10px rgba(0, 0, 0, 0.35);
    animation: magPulseNeg 2.6s ease-in-out infinite;
}
.mag-mk.mk-primary.pol-pos {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.28), 0 3px 10px rgba(0, 0, 0, 0.35);
    animation: magPulsePos 2.6s ease-in-out infinite;
}

@keyframes magPulseNeg {
    0%, 100% { box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.28), 0 3px 10px rgba(0, 0, 0, 0.35); }
    50%      { box-shadow: 0 0 0 8px rgba(79, 70, 229, 0.12), 0 3px 16px rgba(79, 70, 229, 0.55); }
}
@keyframes magPulsePos {
    0%, 100% { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.28), 0 3px 10px rgba(0, 0, 0, 0.35); }
    50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0.12), 0 3px 16px rgba(220, 38, 38, 0.55); }
}

/* ============================================================
   TIPO 2 · ALTERNATIVO — abordaje válido por la cara opuesta
   Anillo discontinuo: mismo color, sin pulso, ligeramente menor.
   ============================================================ */
.mag-mk.mk-alternate {
    width: 23px;
    height: 23px;
    border: 2.5px dashed #fff;
    opacity: 0.9;
    animation: none;
}
.mag-mk.mk-alternate.pol-neg { box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.22), 0 2px 7px rgba(0, 0, 0, 0.3); }
.mag-mk.mk-alternate.pol-pos { box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.22), 0 2px 7px rgba(0, 0, 0, 0.3); }

/* Distintivo: dos puntos = doble abordaje */
.mag-mk.mk-alternate::before {
    content: '\f0ec'; /* fa-exchange-alt */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: -9px; right: -9px;
    font-size: 0.44rem;
    background: #0F172A;
    color: #fff;
    width: 13px; height: 13px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   TIPO 3 · PROYECCIÓN — sólo referencia, NO colocar imán
   Fantasma: relleno translúcido, borde punteado, sin animación.
   ============================================================ */
.mag-mk.mk-projection {
    width: 20px;
    height: 20px;
    border: 2px dotted rgba(255, 255, 255, 0.85);
    opacity: 0.52;
    animation: none;
    font-size: 0.52rem;
}
.mag-mk.mk-projection.pol-neg {
    background: repeating-linear-gradient(45deg, #6366F1, #6366F1 3px, #4338CA 3px, #4338CA 6px);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
.mag-mk.mk-projection.pol-pos {
    background: repeating-linear-gradient(45deg, #EF4444, #EF4444 3px, #B91C1C 3px, #B91C1C 6px);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
.mag-mk.mk-projection::after { width: 2px; height: 2px; opacity: 0.8; }
.mag-mk.mk-projection:hover { opacity: 0.95; }

/* Gemelo contralateral: sutilmente atenuado */
.mag-mk.is-twin { opacity: 0.86; }
.mag-mk.mk-projection.is-twin { opacity: 0.42; }

/* ============================================================
   TOOLTIP DEL MARCADOR
   ============================================================ */
.mag-tip {
    position: absolute;
    white-space: nowrap;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: var(--radius-full, 999px);
    pointer-events: none;
    z-index: 60;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.16s ease;
    background: #0F172A;
    color: #fff;
    max-width: 190px;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
}
.mag-mk:hover .mag-tip,
.mag-mk:focus-visible .mag-tip { opacity: 1; }
.mag-tip .mag-tip-kind {
    display: block;
    font-size: 0.53rem;
    font-weight: 600;
    opacity: 0.82;
    margin-top: 1px;
    letter-spacing: 0.02em;
}
.mag-tip.tip-neg { background: #312E81; }
.mag-tip.tip-pos { background: #7F1D1D; }
.mag-tip.tip-ghost { background: #334155; }

/* ============================================================
   LEYENDA
   ============================================================ */
.mag-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    margin-top: 10px;
    background: var(--bg-surface, #F1F5F9);
    border: 1px solid var(--border, #E2E8F0);
    border-radius: var(--radius, 12px);
    font-size: 0.66rem;
    color: var(--text-secondary, #475569);
}
.mag-legend-item { display: flex; align-items: center; gap: 6px; }
.mag-legend-dot {
    width: 15px; height: 15px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}
.mag-legend-dot.lg-primary {
    background: linear-gradient(135deg, #4F46E5, #DC2626);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25);
}
.mag-legend-dot.lg-alternate {
    background: linear-gradient(135deg, #4F46E5, #DC2626);
    border: 2px dashed #fff;
    opacity: 0.9;
}
.mag-legend-dot.lg-projection {
    background: repeating-linear-gradient(45deg, #6366F1, #6366F1 3px, #B91C1C 3px, #B91C1C 6px);
    border: 2px dotted #fff;
    opacity: 0.5;
}
.mag-legend-text strong { color: var(--text-primary, #0F172A); font-weight: 700; }

/* ============================================================
   TARJETA DE COLOCACIÓN ENRIQUECIDA
   ============================================================ */
.mag-place-view {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-full, 999px);
    background: var(--bg-surface, #F1F5F9);
    border: 1px solid var(--border, #E2E8F0);
    color: var(--text-secondary, #475569);
    margin-left: 6px;
}
.mag-place-view i { font-size: 0.62rem; color: var(--primary, #4F46E5); }

.mag-alt-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 9px;
    background: rgba(16, 185, 129, 0.08);
    border-left: 3px solid #10B981;
    border-radius: 6px;
    font-size: 0.66rem;
    color: var(--text-secondary, #475569);
    line-height: 1.45;
}
.mag-alt-note i { color: #10B981; margin-top: 2px; flex-shrink: 0; }

.mag-side-chip {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--radius-full, 999px);
    background: rgba(79, 70, 229, 0.12);
    color: var(--primary, #4F46E5);
    margin-left: 5px;
}

/* ============================================================
   AVISO DE ORIENTACIÓN (crítico para la vista posterior)
   ============================================================ */
.mag-orient-note {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    margin-bottom: 10px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius, 12px);
    font-size: 0.66rem;
    color: var(--text-secondary, #475569);
    line-height: 1.45;
}
.mag-orient-note i { color: #F59E0B; flex-shrink: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
    .mag-mk { width: 22px; height: 22px; font-size: 0.55rem; }
    .mag-mk.mk-alternate { width: 20px; height: 20px; }
    .mag-mk.mk-projection { width: 17px; height: 17px; font-size: 0.46rem; }
    .mag-legend { font-size: 0.6rem; gap: 6px 10px; }
    .mag-tip { font-size: 0.55rem; max-width: 150px; }
}

/* Reduce motion: sin animaciones pulsantes */
@media (prefers-reduced-motion: reduce) {
    .mag-mk.mk-primary.pol-neg,
    .mag-mk.mk-primary.pol-pos { animation: none; }
}

/* ============================================================
   IMPRESIÓN — los marcadores deben conservarse en papel
   ============================================================ */
@media print {
    .mag-mk {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        animation: none !important;
    }
    .mag-mk.mk-projection { opacity: 0.6; }
    .mag-tip { display: none; }
    .mag-legend { break-inside: avoid; }
}