/**
 * CM Hover Mobile - Estilos Base
 * 
 * Este archivo proporciona estilos de ejemplo y utilidades
 * para el plugin CM Hover Mobile.
 * 
 * @package CM_Hover_Mobile
 * @version 1.0.0
 * @author Caramba Moreno
 * 
 * IMPORTANTE:
 * Los estilos hover específicos de cada elemento deben definirse
 * en tu tema o CSS personalizado, no en este archivo.
 * 
 * Este archivo solo proporciona:
 * 1. Variables CSS para personalización
 * 2. Transiciones suaves por defecto
 * 3. Ejemplos comentados de uso
 */

/* ==========================================================================
   Variables CSS - Personalización Global
   ========================================================================== */

:root {
    /* Duración de las transiciones hover */
    --cm-hover-mobile-transition-duration: 0.3s;
    
    /* Curva de animación */
    --cm-hover-mobile-transition-timing: ease-out;
    
    /* Transición completa (shorthand) */
    --cm-hover-mobile-transition: var(--cm-hover-mobile-transition-duration) var(--cm-hover-mobile-transition-timing);
}


/* ==========================================================================
   Transiciones Base para Elementos Hover Mobile
   ========================================================================== */

/**
 * Agrega una transición suave por defecto a todos los elementos
 * con la clase cm--hover-mobile.
 * 
 * Esto asegura que la activación/desactivación del hover
 * sea suave en lugar de abrupta.
 */
.cm--hover-mobile {
    transition: all var(--cm-hover-mobile-transition);
}


/* ==========================================================================
   Indicador Visual de Desarrollo (Solo para debugging)
   Descomenta estas líneas para ver visualmente cuándo se activa el hover
   ========================================================================== */

/*
.cm--hover-mobile.is-hover-active {
    outline: 3px solid rgba(255, 0, 0, 0.5) !important;
    outline-offset: 2px;
}
*/


/* ==========================================================================
   EJEMPLOS DE USO
   
   Copia estos ejemplos a tu tema y modifícalos según tus necesidades.
   ========================================================================== */

/**
 * Ejemplo 1: Card con contenido que aparece en hover
 * 
 * HTML:
 * <div class="mi-card cm--hover-mobile">
 *     <img src="imagen.jpg" alt="">
 *     <div class="mi-card__overlay">
 *         <h3>Título</h3>
 *         <p>Descripción visible en hover</p>
 *     </div>
 * </div>
 * 
 * CSS (agregar a tu tema):
 *
 * .mi-card__overlay {
 *     opacity: 0;
 *     transform: translateY(20px);
 *     transition: opacity 0.3s ease, transform 0.3s ease;
 * }
 * 
 * // Desktop: hover nativo
 * @media (hover: hover) {
 *     .mi-card:hover .mi-card__overlay {
 *         opacity: 1;
 *         transform: translateY(0);
 *     }
 * }
 * 
 * // Mobile: hover simulado via plugin
 * @media (hover: none) {
 *     .mi-card.is-hover-active .mi-card__overlay {
 *         opacity: 1;
 *         transform: translateY(0);
 *     }
 * }
 */


/**
 * Ejemplo 2: Botón con efecto de escala
 * 
 * HTML:
 * <button class="mi-boton cm--hover-mobile">Click me</button>
 * 
 * CSS (agregar a tu tema):
 *
 * .mi-boton {
 *     transform: scale(1);
 *     transition: transform 0.2s ease;
 * }
 * 
 * // Desktop
 * @media (hover: hover) {
 *     .mi-boton:hover {
 *         transform: scale(1.05);
 *     }
 * }
 * 
 * // Mobile
 * @media (hover: none) {
 *     .mi-boton.is-hover-active {
 *         transform: scale(1.05);
 *     }
 * }
 */


/**
 * Ejemplo 3: Imagen con zoom
 * 
 * HTML:
 * <figure class="mi-imagen cm--hover-mobile">
 *     <img src="foto.jpg" alt="">
 * </figure>
 * 
 * CSS (agregar a tu tema):
 *
 * .mi-imagen {
 *     overflow: hidden;
 * }
 * 
 * .mi-imagen img {
 *     transform: scale(1);
 *     transition: transform 0.4s ease;
 * }
 * 
 * // Desktop
 * @media (hover: hover) {
 *     .mi-imagen:hover img {
 *         transform: scale(1.1);
 *     }
 * }
 * 
 * // Mobile
 * @media (hover: none) {
 *     .mi-imagen.is-hover-active img {
 *         transform: scale(1.1);
 *     }
 * }
 */