/* =============================================
   TOPAPP SERVICE MAP - ESTILOS PRINCIPALES
   ============================================= */

/* Contenedor Principal */
.tasm-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #f0f0f0;
}

/* =============================================
   IMAGEN DE FONDO
   ============================================= */

.tasm-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    /* Transición rápida para los filtros */
    transition: filter 0.1s linear;
}

/* Overlay de Fondo */
.tasm-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* =============================================
   LÍNEAS CONECTORAS SVG
   ============================================= */

.tasm-connector-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Por encima del fondo y overlay */
    pointer-events: none;
}

.tasm-connector-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Estilos de línea */
.tasm-connector-line.solid {
    stroke-dasharray: none;
}

.tasm-connector-line.dashed {
    stroke-dasharray: 12, 6;
}

.tasm-connector-line.dotted {
    stroke-dasharray: 4, 6;
}

/* =============================================
   WRAPPER DE PUNTOS
   ============================================= */

.tasm-points-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
}

/* =============================================
   PUNTO INDIVIDUAL
   ============================================= */

.tasm-point-wrapper {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 20;
}

/* Línea SVG del título */
.tasm-title-line-svg {
    position: absolute;
    overflow: visible;
    z-index: 1;
    pointer-events: none;
}

/* El círculo/punto */
.tasm-point {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border-style: solid;
    border-width: 3px;
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
    transition: all var(--transition-duration, 300ms) ease-in-out;
    transform-origin: center center;
    z-index: 25;
    background-color: #fff;
}

/* Enlace dentro del punto */
.tasm-point-link {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Imagen del punto - ocupa TODO el círculo */
.tasm-point-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    transition: border-radius var(--transition-duration, 300ms) ease-in-out;
}

.tasm-point-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-duration, 300ms) ease-in-out;
}

/* =============================================
   ETIQUETA DEL TÍTULO (Fuera del círculo)
   ============================================= */

.tasm-title-label {
    position: absolute;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    z-index: 30;
    pointer-events: none;
    transition: all var(--transition-duration, 300ms) ease-in-out;
}

/* Posiciones del título */
.tasm-title-label[data-position="top"] {
    bottom: calc(100% + 25px);
    left: 50%;
    transform: translateX(-50%);
}

.tasm-title-label[data-position="bottom"] {
    top: calc(100% + 25px);
    left: 50%;
    transform: translateX(-50%);
}

.tasm-title-label[data-position="left"] {
    right: calc(100% + 25px);
    top: 50%;
    transform: translateY(-50%);
}

.tasm-title-label[data-position="right"] {
    left: calc(100% + 25px);
    top: 50%;
    transform: translateY(-50%);
}

/* =============================================
   CUADRO DE DESCRIPCIÓN (Solo visible en hover)
   ============================================= */

.tasm-description-box {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9);
    transition: all var(--transition-duration, 300ms) ease-in-out;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Posiciones del cuadro de descripción */
.tasm-description-box[data-position="top"] {
    bottom: calc(100% + 30px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
}

.tasm-description-box[data-position="bottom"] {
    top: calc(100% + 30px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
}

.tasm-description-box[data-position="left"] {
    right: calc(100% + 30px);
    top: 50%;
    transform: translateY(-50%) scale(0.9);
}

.tasm-description-box[data-position="right"] {
    left: calc(100% + 30px);
    top: 50%;
    transform: translateY(-50%) scale(0.9);
}

/* Título dentro del cuadro de descripción */
.tasm-description-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Contenido de la descripción */
.tasm-description-content {
    font-size: 13px;
    line-height: 1.5;
}

/* =============================================
   ESTADOS HOVER
   ============================================= */

/* Cuando se hace hover en el wrapper del punto */
.tasm-point-wrapper:hover {
    z-index: 200;
}

/* Punto crece en hover */
.tasm-point-wrapper:hover .tasm-point {
    transform: scale(var(--hover-scale, 2));
    z-index: 150;
}

/* Formas en hover (controlado por JS mediante clases) */
.tasm-point-wrapper:hover .tasm-point.hover-circle {
    border-radius: 50%;
}

.tasm-point-wrapper:hover .tasm-point.hover-circle .tasm-point-image {
    border-radius: 50%;
}

.tasm-point-wrapper:hover .tasm-point.hover-square {
    border-radius: 0;
}

.tasm-point-wrapper:hover .tasm-point.hover-square .tasm-point-image {
    border-radius: 0;
}

.tasm-point-wrapper:hover .tasm-point.hover-rounded {
    border-radius: var(--hover-border-radius, 15px);
}

.tasm-point-wrapper:hover .tasm-point.hover-rounded .tasm-point-image {
    border-radius: var(--hover-border-radius, 15px);
}

/* Mostrar cuadro de descripción en hover */
.tasm-point-wrapper:hover .tasm-description-box {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.tasm-point-wrapper:hover .tasm-description-box[data-position="top"],
.tasm-point-wrapper:hover .tasm-description-box[data-position="bottom"] {
    transform: translateX(-50%) scale(1);
}

.tasm-point-wrapper:hover .tasm-description-box[data-position="left"],
.tasm-point-wrapper:hover .tasm-description-box[data-position="right"] {
    transform: translateY(-50%) scale(1);
}

/* Ocultar título en hover (opcional - la descripción ya tiene el título) */
.tasm-point-wrapper:hover .tasm-title-label {
    opacity: 0;
}

/* =============================================
   ANIMACIONES
   ============================================= */

/* Efecto de pulso sutil en los puntos */
@keyframes tasm-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--border-color, rgba(52, 152, 219, 0.4));
    }
    50% {
        box-shadow: 0 0 0 8px transparent;
    }
}

.tasm-point:not(:hover) {
    animation: tasm-pulse 2.5s ease-in-out infinite;
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media screen and (max-width: 768px) {
    .tasm-title-label {
        font-size: 11px;
    }
    
    .tasm-description-box {
        width: 160px !important;
    }
    
    .tasm-description-title {
        font-size: 12px;
    }
    
    .tasm-description-content {
        font-size: 11px;
    }
    
    /* Ajustar posiciones en móvil */
    .tasm-title-label[data-position="top"] {
        bottom: calc(100% + 15px);
    }
    
    .tasm-title-label[data-position="bottom"] {
        top: calc(100% + 15px);
    }
    
    .tasm-title-label[data-position="left"] {
        right: calc(100% + 15px);
    }
    
    .tasm-title-label[data-position="right"] {
        left: calc(100% + 15px);
    }
}

@media screen and (max-width: 480px) {
    .tasm-description-box {
        width: 140px !important;
        padding: 10px !important;
    }
    
    /* En móviles muy pequeños, forzar descripción abajo */
    .tasm-description-box[data-position="left"],
    .tasm-description-box[data-position="right"] {
        left: 50% !important;
        right: auto !important;
        top: calc(100% + 20px) !important;
        transform: translateX(-50%) scale(0.9) !important;
    }
    
    .tasm-point-wrapper:hover .tasm-description-box[data-position="left"],
    .tasm-point-wrapper:hover .tasm-description-box[data-position="right"] {
        transform: translateX(-50%) scale(1) !important;
    }
}

/* =============================================
   EDITOR DE ELEMENTOR
   ============================================= */

.elementor-editor-active .tasm-point {
    cursor: move;
}

.elementor-editor-active .tasm-point::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 2px dashed rgba(52, 152, 219, 0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

/* =============================================
   UTILIDADES
   ============================================= */

.tasm-hidden {
    display: none !important;
}

.tasm-invisible {
    visibility: hidden !important;
    opacity: 0 !important;
}