/**
 * VALIS Touch Feedback v1.0
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * Problema: El sistema depende de :hover para feedback visual, pero en
 * dispositivos touch no existe hover. Los elementos clickeables carecen
 * de affordance táctil clara.
 * 
 * Solución: Estados :active más prominentes + tap highlight customizado
 * 
 * @version 1.0.0
 */

/* ═══════════════════════════════════════════════════════════════════════════
   RESET DE TAP HIGHLIGHT NATIVO
   ═══════════════════════════════════════════════════════════════════════════ */

/* Desactivar highlight azul/naranja nativo de iOS/Android */
* {
    -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOUCH FEEDBACK BASE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Clase para elementos interactivos */
.touch-feedback {
    position: relative;
    overflow: hidden;
    /* Prevenir selección de texto en tap repetido */
    -webkit-user-select: none;
    user-select: none;
}

/* Efecto ripple en tap */
.touch-feedback::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
}

.touch-feedback:active::after {
    width: 200%;
    height: 200%;
    opacity: 1;
    transition: width 0s, height 0s, opacity 0s;
}

/* Variante para fondos oscuros */
.touch-feedback--light::after {
    background: rgba(255, 255, 255, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTADOS ACTIVE MEJORADOS PARA BOTONES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Botones primarios - feedback más obvio en touch */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .valis-btn,
    .action-btn,
    [role="button"] {
        /* Transición más rápida para feedback inmediato */
        transition: transform 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
    }
    
    .btn:active,
    .valis-btn:active,
    .action-btn:active,
    [role="button"]:active {
        transform: scale(0.97);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    /* Botón primario (oscuro) */
    .btn--primary:active,
    .btn.primary:active {
        background: #1a1a1a;
        transform: scale(0.97);
    }
    
    /* Botón secundario/ghost */
    .btn--secondary:active,
    .btn--ghost:active {
        background: rgba(0, 0, 0, 0.08);
        transform: scale(0.97);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS Y OPCIONES SELECCIONABLES
   ═══════════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
    /* Opciones de método (ritual/rápido) */
    .method-option,
    .tirada-option,
    .category-option,
    .landing-option {
        transition: transform 0.1s ease, box-shadow 0.1s ease;
    }
    
    .method-option:active,
    .tirada-option:active,
    .category-option:active,
    .landing-option:active {
        transform: scale(0.98);
        box-shadow: 
            inset 0 0 0 2px var(--valis-accent, #9A7B3C),
            0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* Hexagramas clickeables */
    .hexagram-mini:active,
    .hexagram-card:active {
        transform: scale(0.95);
        opacity: 0.9;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LINKS Y NAVEGACIÓN
   ═══════════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
    /* Links del header/footer */
    .nav-link:active,
    .header-link:active,
    .footer-link:active,
    a[href]:active {
        opacity: 0.7;
    }
    
    /* Botón de historial */
    .history-btn:active {
        background: rgba(0, 0, 0, 0.08);
        transform: scale(0.95);
    }
    
    /* Botón de balance de tokens */
    #tokenBalanceBtn:active {
        background: rgba(0, 0, 0, 0.06);
        transform: scale(0.97);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INPUTS Y TEXTAREAS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
    /* Focus más visible en touch */
    input:focus,
    textarea:focus,
    select:focus {
        outline: 2px solid var(--valis-accent, #9A7B3C);
        outline-offset: 2px;
    }
    
    /* Área de pregunta */
    .query-textarea:focus,
    #queryText:focus {
        border-color: var(--valis-accent, #9A7B3C);
        box-shadow: 0 0 0 3px var(--valis-accent-soft, rgba(154, 123, 60, 0.15));
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AFFORDANCE VISUAL - Indicadores de que algo es clickeable
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cursores táctiles no ven el cursor:pointer, necesitan otras pistas */
@media (hover: none) and (pointer: coarse) {
    /* Agregar sombra sutil a elementos interactivos */
    .btn,
    .method-option,
    .tirada-option,
    .landing-option,
    [role="button"] {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    
    /* Iconos de acción con área táctil mínima de 44px */
    .icon-btn,
    .action-icon,
    .close-btn,
    .nav-icon {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL INDICATORS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Indicador de que hay más contenido para scrollear */
.scroll-hint {
    position: relative;
}

.scroll-hint::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(
        to top,
        var(--valis-bg-light, white) 0%,
        transparent 100%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.scroll-hint.has-more::after {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DISABLED STATES EN TOUCH
   ═══════════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
    /* Elementos deshabilitados - más obvio en touch */
    .btn:disabled,
    .btn--disabled,
    [disabled],
    .disabled {
        opacity: 0.4;
        /* Patrón diagonal sutil para indicar "no disponible" */
        background-image: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 4px,
            rgba(0, 0, 0, 0.02) 4px,
            rgba(0, 0, 0, 0.02) 8px
        );
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PULL TO REFRESH INDICATOR (Futuro)
   ═══════════════════════════════════════════════════════════════════════════ */

.pull-indicator {
    position: fixed;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--valis-bg-light, white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: top 0.2s ease;
    z-index: 1000;
}

.pull-indicator.visible {
    top: 10px;
}

.pull-indicator.loading {
    animation: pullSpin 0.8s linear infinite;
}



/* ═══════════════════════════════════════════════════════════════════════════
   HAPTIC FEEDBACK VISUAL (cuando el dispositivo vibra)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Clase temporal añadida por JS cuando hay haptic feedback */
.haptic-flash {
    animation: hapticFlash 0.15s ease;
}