/**
 * CM Mapa SIVA/CONVIA - Estilos
 *
 * Fase 1: Estilos base para wrapper, estados activos y posicionamiento.
 * Fase 2: Sin cambios de CSS (lógica de sincronización).
 * Fase 3: Layout móvil con overflow hidden y transiciones.
 * Fase 4: Estilos para drag/swipe en móvil.
 * Fase 5: Estilos de accesibilidad mejorados.
 * Fase 6: Toggle entre mapa lineal y orgánico.
 *
 * @package CM_Mapa_SIVA_CONVIA
 * @version 1.6.0
 */

/* ==========================================================================
   Variables CSS
   ========================================================================== */

:root {
    --cm-map-transition-duration: 300ms;
    --cm-map-active-color: #8DC63F;
    --cm-map-focus-color: #8DC63F;
    --cm-map-focus-outline-width: 2px;
    --cm-map-active-outline-width: 3px;
    --cm-map-natural-width: 1201px;
}

/* ==========================================================================
   Fase 6: Toggle entre Mapa Lineal y Orgánico
   ========================================================================== */

/**
 * Estado inicial: Mapa lineal visible, mapa orgánico oculto.
 * El toggle pill controla cuál mapa se muestra.
 * 
 * - Toggle OFF (is-off): Muestra lineal, oculta orgánico
 * - Toggle ON (is-on): Muestra orgánico, oculta lineal
 */

/* Estado por defecto: orgánico oculto via clase */
.cm--organico-map {
    /* El estado inicial se controla via clase .cm--display-none */
}

/* Clase utilitaria para ocultar elementos */
.cm--display-none {
    display: none !important;
}

/**
 * Cuando el toggle está ON (orgánico activo):
 * Buscar el toggle con is-on y afectar los mapas hermanos.
 * 
 * La estructura HTML es:
 * - .cm--map-toggle-container (contiene el toggle)
 * - .cm--organico-map (hermano)
 * - .cm--lineal-map (hermano)
 * 
 * Usamos el atributo data-is-on="true" que es más confiable.
 */

/**
 * La visibilidad de los mapas se controla via JavaScript
 * añadiendo/quitando la clase .cm--display-none.
 * 
 * Esto evita forzar display:block que puede romper layouts
 * que usan flex, grid u otros display types.
 */

/* ==========================================================================
   Wrapper del Mapa
   ========================================================================== */

/**
 * El wrapper se crea dinámicamente via JavaScript para evitar
 * interferencias con las clases de layout de WordPress como
 * .is-layout-constrained que pueden afectar el overflow.
 */
.cm-map-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    display: block;
}

/**
 * Aplicar ancho amplio de WordPress al wrapper en desktop.
 * Esto sobrescribe el max-width del contenedor .is-layout-constrained.
 */
.is-layout-constrained > .cm-map-wrapper {
    max-width: var(--wp--style--global--wide-size);
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   Puntos/Ubicaciones del Mapa - Fase 5: Accesibilidad Mejorada
   ========================================================================== */

/**
 * Estilos base para los puntos clicables del mapa.
 * Se aplican estilos de interacción y estados visuales.
 *
 * Fase 5: Mejorada accesibilidad con mejor indicador de foco
 * y transiciones suaves para estados interactivos.
 */
.cm--map-location {
    cursor: pointer;
    transition:
        outline var(--cm-map-transition-duration) ease,
        outline-offset var(--cm-map-transition-duration) ease,
        transform var(--cm-map-transition-duration) ease;
    /* Fase 5: Asegurar que el outline sea visible sobre cualquier fondo. */
    outline: var(--cm-map-focus-outline-width) solid transparent;
    outline-offset: 2px;
}

/**
 * Estado hover para feedback visual en desktop.
 */
.cm--map-location:hover {
    transform: scale(1.05);
}

/**
 * Estado de foco para accesibilidad (navegación por teclado).
 * Fase 5: Estilos mejorados para mejor visibilidad.
 */
.cm--map-location:focus {
    outline: var(--cm-map-focus-outline-width) solid var(--cm-map-focus-color);
    outline-offset: 2px;
}

/**
 * Estado de foco visible para navegación por teclado.
 * Solo se muestra cuando el foco viene del teclado, no del mouse.
 */
.cm--map-location:focus-visible {
    outline: var(--cm-map-focus-outline-width) solid var(--cm-map-focus-color);
    outline-offset: 4px;
    /* Fase 5: Añadir sombra para mejor contraste en fondos claros/oscuros. */
    box-shadow: 0 0 0 4px rgba(141, 198, 63, 0.3);
}

/**
 * Quitar outline por defecto cuando el foco viene del mouse.
 * Fase 5: Mejora la experiencia visual para usuarios de mouse.
 */
.cm--map-location:focus:not(:focus-visible) {
    outline: var(--cm-map-focus-outline-width) solid transparent;
    box-shadow: none;
}

/**
 * Estado activo del punto del mapa.
 * Se sincroniza con el slide activo del slideshow.
 */
.cm--map-location.is-active {
    outline: var(--cm-map-active-outline-width) solid var(--cm-map-active-color);
    outline-offset: 2px;
    border-radius: 4px;
}

/**
 * Estado combinado: activo + foco visible.
 * Fase 5: Asegurar que el foco sea visible incluso en puntos activos.
 */
.cm--map-location.is-active:focus-visible {
    outline-offset: 6px;
    box-shadow: 0 0 0 4px rgba(141, 198, 63, 0.5);
}

/**
 * Alternativa: Si el punto tiene un SVG rect interno,
 * aplicar stroke en lugar de outline.
 */
.cm--map-location.is-active svg rect {
    stroke: var(--cm-map-active-color);
    stroke-width: 3px;
}

/* ==========================================================================
   Indicador de Skip Link para Accesibilidad (Fase 5)
   ========================================================================== */

/**
 * Skip link oculto que aparece al enfocar.
 * Permite a usuarios de teclado saltar directamente al mapa.
 */
.cm-map-skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    padding: 8px 16px;
    background: var(--cm-map-focus-color);
    color: #000;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: top 0.2s ease;
}

.cm-map-skip-link:focus {
    top: 10px;
}

/* ==========================================================================
   Localizador SVG en la Carretera
   ========================================================================== */

/**
 * Transición suave para el movimiento del localizador.
 * El localizador se mueve horizontalmente siguiendo los puntos activos.
 */
.cm--map-road #locator {
    transition: cx var(--cm-map-transition-duration) ease;
}

/* ==========================================================================
   Fase 3 & 4: Layout Móvil y Drag/Swipe
   ========================================================================== */

/**
 * En móvil (<1200px), el wrapper tiene overflow hidden para ocultar
 * las partes del mapa que están fuera del viewport.
 * El mapa se traslada horizontalmente para centrar el punto activo.
 *
 * IMPORTANTE: El mapa debe mantener su ancho natural (1201px) y NO
 * encogerse al ancho del viewport. El wrapper actúa como ventana
 * que muestra solo una parte del mapa.
 */
@media (max-width: 1199px) {

    /**
     * Fase 6: Ocultar el contenedor del toggle en móvil.
     * El mapa lineal siempre se muestra en móvil.
     * La visibilidad de los mapas se controla via JavaScript
     * usando la clase .cm--display-none.
     */
    .cm--map-toggle-container {
        display: none !important;
    }

    /**
     * El wrapper es la "ventana" que muestra parte del mapa.
     * - Tiene el ancho del viewport
     * - overflow: hidden oculta las partes del mapa fuera de la ventana
     * - touch-action: pan-y permite scroll vertical, captura horizontal
     * - cursor: grab indica que se puede arrastrar
     *
     * NOTA sobre ancho del viewport:
     * - 100vw incluye el ancho del scrollbar, causando overflow horizontal
     * - 100dvw (dynamic viewport width) excluye el scrollbar
     * - Usamos 100% como fallback seguro ya que hereda del contenedor padre
     * - 100dvw como valor moderno para navegadores que lo soporten
     *
     * Soporte de dvw: Chrome 108+, Firefox 101+, Safari 15.4+
     * https://caniuse.com/viewport-unit-variants
     */
    .cm-map-wrapper {
        overflow: hidden;
        width: 100%;
        /* Fallback para navegadores antiguos */
        max-width: 100%;
        /* Valor moderno que excluye el scrollbar */
        max-width: 100dvw;
        touch-action: pan-y pinch-zoom;
        cursor: grab;
        /* Prevenir selección de texto durante drag */
        -webkit-user-select: none;
        user-select: none;
    }

    /**
     * Cursor mientras se arrastra.
     */
    .cm-map-wrapper:active,
    .cm-map-wrapper.is-dragging {
        cursor: grabbing;
    }

    /**
     * El mapa mantiene su ancho natural completo.
     * - min-width asegura que no se encoja
     * - width: auto permite que tome su tamaño natural
     * - transform mueve el mapa dentro de la ventana del wrapper
     */
    .cm--linear-map {
        min-width: var(--cm-map-natural-width);
        width: auto !important;
        max-width: none !important;
        transition: transform var(--cm-map-transition-duration) ease;
        will-change: transform;
    }

    /**
     * Durante el arrastre, desactivar transiciones para respuesta inmediata.
     */
    .cm-map-wrapper.is-dragging .cm--linear-map {
        transition: none !important;
    }

    /**
     * Desactivar pointer-events en los puntos durante el drag
     * para evitar clicks accidentales.
     */
    .cm-map-wrapper.is-dragging .cm--map-location {
        pointer-events: none;
    }

    /**
     * Desactivar hover effects durante drag para evitar glitches visuales.
     * Fase 5: Mejora de performance visual.
     */
    .cm-map-wrapper.is-dragging .cm--map-location:hover {
        transform: none;
    }

    /**
     * La carretera SVG también debe mantener su ancho.
     */
    .cm--linear-map .cm--map-road,
    .cm--linear-map .cm--map-road .safe-svg-inside {
        min-width: var(--cm-map-natural-width);
    }

    /**
     * Fase 5: Reducir efecto hover en móvil ya que no es tan útil.
     */
    .cm--map-location:hover {
        transform: none;
    }
}

/* ==========================================================================
   Desktop: Asegurar que no hay transform residual
   ========================================================================== */

/**
 * En desktop (>=1200px), el mapa se muestra completo sin transform.
 * El mapa puede usar alignwide o alignfull según la configuración.
 */
@media (min-width: 1200px) {
    .cm--linear-map {
        transform: none !important;
    }

    /**
     * Asegurar que el mapa mantenga su tamaño en desktop.
     */
    .cm-map-wrapper > .cm--linear-map {
        width: 100%;
        max-width: none;
    }

    /**
     * En desktop no se necesita cursor grab ni touch-action especial.
     */
    .cm-map-wrapper {
        cursor: default;
        touch-action: auto;
        -webkit-user-select: auto;
        user-select: auto;
    }

    /**
     * Fase 6: El contenedor del toggle es visible en desktop.
     */
    .cm--map-toggle-container {
        display: flex;
    }
}

/* ==========================================================================
   Fase 5: Soporte para Reducción de Movimiento
   ========================================================================== */

/**
 * Respetar preferencia del usuario para reducir movimiento.
 * Desactiva animaciones y transiciones para usuarios sensibles al movimiento.
 */
@media (prefers-reduced-motion: reduce) {
    .cm--map-location {
        transition: none;
    }

    .cm--map-location:hover {
        transform: none;
    }

    .cm--map-road #locator {
        transition: none;
    }

    .cm--linear-map {
        transition: none !important;
    }

    .cm-map-wrapper.is-dragging .cm--linear-map {
        transition: none !important;
    }

    .cm--map-point {
        transition: none;
    }

    .cm--map-point:hover {
        filter: none;
    }
}

/* ==========================================================================
   Fase 7: Estilos para Puntos del Mapa Orgánico
   ========================================================================== */

/**
 * Los puntos del mapa orgánico usan clases cm--map-point cm--map-pointNNN.
 * Son elementos <g> de SVG que contienen un <rect> y un <path> (icono).
 * Los estilos de interacción se aplican al <g> y al <rect> hijo.
 */
.cm--map-point {
    cursor: pointer;
    transition:
        opacity var(--cm-map-transition-duration) ease,
        filter var(--cm-map-transition-duration) ease;
}

/**
 * Estado hover para feedback visual en desktop.
 * Usamos filter en vez de transform porque transform en SVG <g>
 * puede causar problemas de posicionamiento.
 */
.cm--map-point:hover {
    filter: brightness(1.2);
}

/**
 * Estado de foco para accesibilidad (navegación por teclado).
 */
.cm--map-point:focus {
    outline: var(--cm-map-focus-outline-width) solid var(--cm-map-focus-color);
    outline-offset: 2px;
}

.cm--map-point:focus-visible {
    outline: var(--cm-map-focus-outline-width) solid var(--cm-map-focus-color);
    outline-offset: 4px;
}

.cm--map-point:focus:not(:focus-visible) {
    outline: none;
}

/**
 * Estado activo del punto orgánico.
 * Se sincroniza con el slide activo del slideshow.
 * Aplicamos un stroke visible al rect hijo para indicar actividad.
 */
.cm--map-point.is-active rect {
    stroke: var(--cm-map-active-color);
    stroke-width: var(--cm-map-active-outline-width);
}

/**
 * Drop shadow para reforzar visualmente el punto activo.
 * Esto funciona en SVG donde outline puede no renderizarse.
 */
.cm--map-point.is-active {
    filter: drop-shadow(0 0 4px rgba(141, 198, 63, 0.6));
}

/**
 * Estado combinado: activo + foco visible.
 */
.cm--map-point.is-active:focus-visible {
    filter: drop-shadow(0 0 6px rgba(141, 198, 63, 0.8));
}

/* ==========================================================================
   Fase 5: Estados de Error/Carga (Opcional)
   ========================================================================== */

/**
 * Estado cuando el mapa está cargando o hay un error.
 * Se puede usar desde JavaScript añadiendo estas clases.
 */
.cm-map-wrapper.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

.cm-map-wrapper.has-error {
    outline: 2px dashed #cc0000;
    outline-offset: -2px;
}

.cm-map-wrapper.has-error::after {
    content: 'Error cargando el mapa';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(204, 0, 0, 0.9);
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
}