/**
 * ============================================================
 * COMPONENTE - TABLE HOVER EFFECTS
 * ============================================================
 * Efectos de hover y focus para las filas interactivas de la
 * tabla comparativa de planes.
 * ============================================================
 */

/* --------------------------------------------------------
   FILAS INTERACTIVAS
   -------------------------------------------------------- */
.plan-feature-row {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Efecto hover en desktop */
.plan-feature-row:hover {
    background-color: rgba(107, 70, 193, 0.04);
}

/* Indicador de línea vertical en la primera celda */
.plan-feature-row:hover td:first-child {
    box-shadow: inset 3px 0 0 0 #6b46c1;
}

/* --------------------------------------------------------
   ACCESIBILIDAD - Focus visible
   -------------------------------------------------------- */
.plan-feature-row:focus-within {
    background-color: rgba(107, 70, 193, 0.04);
    outline: none;
}

.plan-feature-row:focus-within td:first-child {
    box-shadow: inset 3px 0 0 0 #6b46c1;
}

/* Focus visible para navegación por teclado */
.plan-feature-row:focus {
    outline: 2px solid #6b46c1;
    outline-offset: -2px;
}

/* --------------------------------------------------------
   ESTADO ACTIVO (mientras se hace clic)
   -------------------------------------------------------- */
.plan-feature-row:active {
    background-color: rgba(107, 70, 193, 0.08);
}

/* --------------------------------------------------------
   TRANSICIONES EN CELDAS
   -------------------------------------------------------- */
.plan-feature-row td {
    transition: box-shadow 0.2s ease;
}

/* --------------------------------------------------------
   ICONO DE INFORMACIÓN EN HOVER DE FILA
   -------------------------------------------------------- */
.plan-feature-row:hover .info-icon,
.plan-feature-row:focus-within .info-icon {
    color: #6b46c1;
}

/* --------------------------------------------------------
   INDICADOR VISUAL DE "CLICK PARA MÁS INFO"
   -------------------------------------------------------- */

/* Tooltip sutil en hover */
.plan-feature-row .plans-comparison__feature-wrapper,
.plan-feature-row .plans-comparison-desktop__feature-wrapper {
    position: relative;
}

/* --------------------------------------------------------
   RESPONSIVE - Solo aplicar efectos en desktop
   -------------------------------------------------------- */
@media (max-width: 767px) {
    .plan-feature-row {
        cursor: default;
    }

    .plan-feature-row:hover {
        background-color: transparent;
    }

    .plan-feature-row:hover td:first-child {
        box-shadow: none;
    }
}

/* --------------------------------------------------------
   MEJORAS DE ACCESIBILIDAD
   -------------------------------------------------------- */

/* Asegurar que el focus sea visible */
.plan-feature-row:focus-visible {
    outline: 2px solid #6b46c1;
    outline-offset: -2px;
    border-radius: 2px;
}

/* Reducir movimiento para usuarios que lo prefieran */
@media (prefers-reduced-motion: reduce) {
    .plan-feature-row,
    .plan-feature-row td {
        transition: none;
    }
}