/* Estilos específicos del organigrama con colores corregidos */

/* Nodos del organigrama */
.org-node {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="%23ffffff" stroke="%232563eb" stroke-width="2"/><path d="M8 10h8v4h-8z" fill="%232563eb"/><path d="M10 8h4v8h-4z" fill="%232563eb"/></svg>') 12 12, pointer;
    position: relative;
    /* ELIMINADO: transition y hover transform que causaban problemas */
}

/* Hover effect más sutil y controlado */
.org-node:not(.dragging):hover {
    /* Solo aplicar hover si NO está siendo arrastrado */
}

.org-node.dragging {
    transform: scale(1.1);
    opacity: 0.8;
    cursor: grabbing !important;
}

.org-node.selected {
    filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.5));
}

/* Rectángulo del nodo - COLORES CORREGIDOS */
.org-node-rect {
    fill: #ffffff;
    stroke: #e2e8f0;
    stroke-width: 2;
    rx: 8;
    ry: 8;
    transition: all 0.3s ease;
}

.org-node:not(.dragging):hover .org-node-rect {
    fill: #f8fafc;
    stroke: #2563eb;
    stroke-width: 3;
    /* Solo hover si NO está siendo arrastrado */
}

.org-node.selected .org-node-rect {
    fill: rgba(37, 99, 235, 0.05);
    stroke: #2563eb;
    stroke-width: 3;
}

/* Texto del nodo - CONTRASTE MEJORADO */
.org-node-name {
    fill: #1e293b;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

.org-node-position {
    fill: #475569;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

.org-node-department {
    fill: #64748b;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

/* Foto del empleado en el nodo */
.org-node-photo {
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.org-node:not(.dragging):hover .org-node-photo {
    border-color: #2563eb;
    border-width: 3;
}

/* Icono por defecto cuando no hay foto */
.org-node-icon {
    fill: #94a3b8;
    font-family: 'Font Awesome 6 Free';
    font-size: 16px;
    font-weight: 900;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

/* Líneas de conexión */
.org-connection {
    stroke: #cbd5e1;
    stroke-width: 2;
    fill: none;
    marker-end: url(#arrowhead);
    transition: all 0.3s ease;
}

.org-connection:hover {
    stroke: #2563eb;
    stroke-width: 3;
}

.org-connection.highlighted {
    stroke: #2563eb;
    stroke-width: 3;
    animation: pulse 2s infinite;
}

/* Puntos de conexión - MEJORADOS PARA VISIBILIDAD */
.org-connection-point {
    fill: #1e293b;
    stroke: #ffffff;
    stroke-width: 2;
    transition: all 0.3s ease;
    cursor: pointer;
}

.org-connection-start {
    /* Punto donde sale la línea del supervisor (verde) */
    fill: #059669;
    stroke: #ffffff;
    stroke-width: 2;
}

.org-connection-end {
    /* Punto donde llega la línea al subordinado (rojo) */
    fill: #dc2626;
    stroke: #ffffff;
    stroke-width: 2;
}

/* Hover effects en los puntos */
.org-connection-group:hover .org-connection-point {
    stroke: #fbbf24;
    stroke-width: 3;
    transform: scale(1.3);
}

.org-connection-group:hover .org-connection-start {
    fill: #10b981;
}

.org-connection-group:hover .org-connection-end {
    fill: #ef4444;
}

.org-connection-group:hover .org-connection {
    stroke: #2563eb;
    stroke-width: 3;
}

/* Animación para destacar las conexiones */
.org-connection-group {
    transition: all 0.2s ease;
}

/* Puntos más grandes para mejor visibilidad */
.org-connection-point {
    r: 4;
}

.org-connection-group:hover .org-connection-point {
    r: 5;
}

/* NUEVOS: Puntos de anclaje para todos los nodos */
.org-anchor-point {
    stroke-width: 1;
    transition: all 0.3s ease;
    pointer-events: none;
}

/* Puntos de entrada (desde supervisor) */
.org-anchor-active-input {
    fill: #059669;
    stroke: #ffffff;
    opacity: 0.8;
}

.org-anchor-potential-input {
    fill: #94a3b8;
    stroke: #ffffff;
    opacity: 0.5;
}

/* Puntos de salida (hacia subordinados) */
.org-anchor-active-output {
    fill: #dc2626;
    stroke: #ffffff;
    opacity: 0.8;
}

.org-anchor-potential-output {
    fill: #94a3b8;
    stroke: #ffffff;
    opacity: 0.5;
}

/* Hover effects en nodos muestran puntos de anclaje */
.org-node:hover .org-anchor-point {
    opacity: 1;
    stroke-width: 2;
    r: 4;
}

/* Durante drag, hacer puntos de anclaje más visibles */
.org-node.dragging .org-anchor-point {
    opacity: 1;
    stroke: #fbbf24;
    stroke-width: 3;
    r: 5;
    animation: pulse-anchor 1s infinite;
}

@keyframes pulse-anchor {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
}

@keyframes pulse {
    0%, 100% {
        stroke-opacity: 1;
    }
    50% {
        stroke-opacity: 0.5;
    }
}

/* Marcador de flecha */
#arrowhead polygon {
    fill: #cbd5e1;
    transition: fill 0.3s ease;
}

.org-connection:hover + #arrowhead polygon,
.org-connection.highlighted + #arrowhead polygon {
    fill: #2563eb;
}

/* Temas de colores */

/* Tema Moderno (por defecto) */
.theme-modern .org-node-rect {
    fill: #ffffff;
    stroke: #e2e8f0;
}

.theme-modern .org-node:hover .org-node-rect {
    fill: #f8fafc;
    stroke: #2563eb;
}

.theme-modern .org-node-name {
    fill: #1e293b;
}

.theme-modern .org-node-position {
    fill: #475569;
}

.theme-modern .org-node-department {
    fill: #64748b;
}

/* Tema Clásico */
.theme-classic .org-node-rect {
    fill: #fefce8;
    stroke: #ca8a04;
}

.theme-classic .org-node:hover .org-node-rect {
    fill: #fef3c7;
    stroke: #92400e;
}

.theme-classic .org-node-name {
    fill: #92400e;
}

.theme-classic .org-node-position {
    fill: #a16207;
}

.theme-classic .org-node-department {
    fill: #ca8a04;
}

.theme-classic .org-connection {
    stroke: #ca8a04;
}

.theme-classic .org-connection:hover {
    stroke: #92400e;
}

.theme-classic .org-connection-point {
    fill: #92400e;
    stroke: #fbbf24;
}

.theme-classic .org-connection-start {
    fill: #059669;
}

.theme-classic .org-connection-end {
    fill: #dc2626;
}

/* Puntos de anclaje para tema clásico */
.theme-classic .org-anchor-active-input {
    fill: #059669;
    stroke: #fbbf24;
}

.theme-classic .org-anchor-active-output {
    fill: #dc2626;
    stroke: #fbbf24;
}

.theme-classic .org-anchor-potential-input,
.theme-classic .org-anchor-potential-output {
    fill: #a16207;
    stroke: #fef3c7;
}

/* Tema Minimalista */
.theme-minimal .org-node-rect {
    fill: #f9fafb;
    stroke: #9ca3af;
}

.theme-minimal .org-node:hover .org-node-rect {
    fill: #ffffff;
    stroke: #374151;
}

.theme-minimal .org-node-name {
    fill: #111827;
}

.theme-minimal .org-node-position {
    fill: #374151;
}

.theme-minimal .org-node-department {
    fill: #6b7280;
}

.theme-minimal .org-connection {
    stroke: #9ca3af;
}

.theme-minimal .org-connection:hover {
    stroke: #374151;
}

.theme-minimal .org-connection-point {
    fill: #374151;
    stroke: #e5e7eb;
}

.theme-minimal .org-connection-start {
    fill: #059669;
}

.theme-minimal .org-connection-end {
    fill: #dc2626;
}

/* Puntos de anclaje para tema minimalista */
.theme-minimal .org-anchor-active-input {
    fill: #059669;
    stroke: #e5e7eb;
}

.theme-minimal .org-anchor-active-output {
    fill: #dc2626;
    stroke: #e5e7eb;
}

.theme-minimal .org-anchor-potential-input,
.theme-minimal .org-anchor-potential-output {
    fill: #6b7280;
    stroke: #f3f4f6;
}

/* Tooltips - MEJORADOS PARA ESTABILIDAD */
.org-tooltip {
    position: absolute;
    background: #1e293b;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    pointer-events: none; /* CRUCIAL: No interferir con eventos */
    z-index: 10000; /* Asegurar que esté por encima de todo */
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateZ(0); /* Forzar aceleración de hardware */
}

.org-tooltip.show {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.org-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

/* Indicadores de estado */
.org-node.ceo .org-node-rect {
    fill: linear-gradient(135deg, #fef3c7, #fbbf24);
    stroke: #d97706;
}

.org-node.manager .org-node-rect {
    fill: linear-gradient(135deg, #dbeafe, #60a5fa);
    stroke: #2563eb;
}

.org-node.employee .org-node-rect {
    fill: linear-gradient(135deg, #d1fae5, #34d399);
    stroke: #059669;
}

/* Animaciones */
.org-node {
    animation: nodeAppear 0.5s ease-out;
}

@keyframes nodeAppear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.org-connection {
    animation: connectionDraw 0.8s ease-out;
}

@keyframes connectionDraw {
    from {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dasharray: 1000;
        stroke-dashoffset: 0;
    }
}

/* Estados de drag & drop - MEJORADOS PARA ESTABILIDAD */
.org-canvas.drag-mode {
    cursor: grabbing !important;
}

.org-node.dragging {
    opacity: 0.8;
    transform: scale(1.05);
    z-index: 1000;
    pointer-events: none; /* Evitar eventos de hover durante drag */
}

.org-node.drag-source {
    opacity: 0.7;
    transform: scale(1.1);
    z-index: 1000;
    pointer-events: none;
}

.org-node.drag-target {
    filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.6));
}

.org-node.drag-target .org-node-rect {
    fill: rgba(16, 185, 129, 0.1);
    stroke: #10b981;
    stroke-width: 3;
    stroke-dasharray: 5, 5;
    animation: dashMove 1s linear infinite;
}

@keyframes dashMove {
    to {
        stroke-dashoffset: -10;
    }
}

.org-node.drag-invalid {
    filter: drop-shadow(0 0 15px rgba(239, 68, 68, 0.6));
}

.org-node.drag-invalid .org-node-rect {
    fill: rgba(239, 68, 68, 0.1);
    stroke: #ef4444;
    stroke-width: 3;
}

/* Prevenir hover effects durante drag */
body.dragging .org-node:hover {
    transform: none !important;
}

body.dragging .org-tooltip {
    display: none !important;
}

/* CURSOR PERSONALIZADO PARA DRAG */
.drag-cursor-move {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="%23ffffff" stroke="%232563eb" stroke-width="3"/><path d="M16 8l-4 4h3v8h2v-8h3l-4-4zm-8 8l4-4v3h8v2h-8v3l-4-4zm16 0l-4 4v-3h-8v-2h8v-3l4 4zm-8 8l4-4h-3v-8h-2v8h-3l4 4z" fill="%232563eb"/></svg>') 16 16, move !important;
}

.drag-cursor-grab {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="%23ffffff" stroke="%2310b981" stroke-width="3"/><path d="M10 12h4v8h-4zm4 0h4v8h-4zm4 0h4v8h-4z" fill="%2310b981"/></svg>') 16 16, grab !important;
}

.drag-cursor-pan {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="%23ffffff" stroke="%23f59e0b" stroke-width="3"/><path d="M12 8h8v2h-8zm0 4h8v2h-8zm0 4h12v2h-12zm0 4h8v2h-8zm0 4h8v2h-8z" fill="%23f59e0b"/></svg>') 16 16, move !important;
}

/* Zoom y pan */
.org-canvas {
    transition: transform 0.3s ease;
}

.org-canvas.zooming {
    transition: none;
}

/* Selección múltiple */
.selection-box {
    fill: rgba(37, 99, 235, 0.1);
    stroke: #2563eb;
    stroke-width: 1;
    stroke-dasharray: 5, 5;
    animation: dashMove 1s linear infinite;
}

/* Indicadores de jerarquía */
.hierarchy-level-0 .org-node-rect {
    stroke-width: 4;
}

.hierarchy-level-1 .org-node-rect {
    stroke-width: 3;
}

.hierarchy-level-2 .org-node-rect {
    stroke-width: 2;
}

.hierarchy-level-3 .org-node-rect,
.hierarchy-level-4 .org-node-rect,
.hierarchy-level-5 .org-node-rect {
    stroke-width: 1;
}

/* Modo de exportación */
.export-mode .org-node {
    cursor: default;
}

.export-mode .org-node:hover {
    transform: none;
}

.export-mode .org-connection:hover {
    stroke-width: 2;
}

/* Orientación horizontal */
.orientation-horizontal .org-node {
    transform-origin: center;
}

.orientation-horizontal .org-connection {
    stroke-width: 2;
}

/* Responsive para organigrama */
@media (max-width: 768px) {
    .org-node-name {
        font-size: 12px;
    }
    
    .org-node-position {
        font-size: 10px;
    }
    
    .org-node-department {
        font-size: 8px;
    }
    
    .org-tooltip {
        font-size: 11px;
        padding: 6px 10px;
    }
}

@media (max-width: 480px) {
    .org-node {
        cursor: default;
    }
    
    .org-node-name {
        font-size: 11px;
    }
    
    .org-node-position {
        font-size: 9px;
    }
    
    .org-node-department {
        display: none;
    }
    
    .org-tooltip {
        font-size: 10px;
        padding: 4px 8px;
    }
}

/* Modo oscuro para organigrama */
@media (prefers-color-scheme: dark) {
    .org-node-rect {
        fill: #1e293b;
        stroke: #475569;
    }
    
    .org-node:hover .org-node-rect {
        fill: #334155;
        stroke: #60a5fa;
    }
    
    .org-node-name {
        fill: #f8fafc;
    }
    
    .org-node-position {
        fill: #cbd5e1;
    }
    
    .org-node-department {
        fill: #94a3b8;
    }
    
    .org-connection {
        stroke: #475569;
    }
    
    .org-connection:hover {
        stroke: #60a5fa;
    }
    
    .org-tooltip {
        background: #374151;
        color: #f9fafb;
    }
    
    .org-tooltip::after {
        border-color: #374151 transparent transparent transparent;
    }
}