/**
 * NewsAuth - Sistema Simplificado de Blur y Restricción
 * Versión minimalista con overlay blur y botón centrado
 * 
 * @package NewsAuth
 * @version 2.0.0
 */

/* ============================================
   CONTENIDO RESTRINGIDO - BASE
   ============================================ */

.contenido-restringido {
    position: relative;
    margin: 20px 0;
}

/* Aplicar blur al contenido por defecto */
.contenido-restringido .contenido-inner {
    filter: blur(4px);
    pointer-events: none;
    user-select: none;
}

/* ============================================
   OVERLAY DE RESTRICCIÓN
   ============================================ */

.restriction-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    /*align-items: center;*/
    justify-content: center;
    /*backdrop-filter: blur(7px);*/
}

.restriction-message {
    text-align: center;
    padding: 20px;
    line-height: 1.4em;
    align-items: center;
    justify-content: center;
}

.restriction-text {
    background-color: rgba(253, 253, 253, 0.5);
    font-family:Arial, Helvetica, sans-serif;
    padding: 20px;
    border: solid 1px #34495e;
    border-radius: 5px;
    font-size: 22px;
    color:black;
    line-height: 1.4em;
    margin: 0 0 20px 0;
}

/* Botón CTA con animación */
.restriction-cta {
    background: #e64922;
    color: #fff;
    padding: 12px 20px;
    max-width: 400px;
    font-size: 20px;
    border-radius: 10px;
    text-decoration: none;
    line-height: 1.4em;
    text-align: center;
    pointer-events: auto;
    display: inline-block;
    animation: fadeInUp 0.6s ease-out;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.restriction-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    color: #fff;
    text-decoration: none;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   COLORES POR NIVEL
   ============================================ */

/* Nivel 1: Registro (Naranja) */
.contenido-restringido[data-nivel-requerido="1"] .restriction-cta {
    background: #e64922;
}

/* Nivel 2: Puntos Básicos (Azul) */
.contenido-restringido[data-nivel-requerido="2"] .restriction-cta {
    background: #3498db;
}

/* Nivel 3: Puntos Avanzados (Morado) */
.contenido-restringido[data-nivel-requerido="3"] .restriction-cta {
    background: #9b59b6;
}

/* Nivel 4: Premium (Dorado) */
.contenido-restringido[data-nivel-requerido="4"] .restriction-cta {
    background: #D62828;
}

/* Nivel 5: Business (Gris Oscuro) */
.contenido-restringido[data-nivel-requerido="5"] .restriction-cta {
    background: #34495e;
}

/* ============================================
   DESBLOQUEO POR NIVEL
   Mostrar contenido cuando usuario tiene nivel suficiente
   ============================================ */

/* Nivel 1+ puede ver contenido nivel 1 */
body.user-nivel-1 .contenido-restringido[data-nivel-requerido="1"] .contenido-inner,
body.user-nivel-2 .contenido-restringido[data-nivel-requerido="1"] .contenido-inner,
body.user-nivel-3 .contenido-restringido[data-nivel-requerido="1"] .contenido-inner,
body.user-nivel-4 .contenido-restringido[data-nivel-requerido="1"] .contenido-inner,
body.user-nivel-5 .contenido-restringido[data-nivel-requerido="1"] .contenido-inner {
    filter: none;
    pointer-events: auto;
    user-select: auto;
}

body.user-nivel-1 .contenido-restringido[data-nivel-requerido="1"] .restriction-overlay,
body.user-nivel-2 .contenido-restringido[data-nivel-requerido="1"] .restriction-overlay,
body.user-nivel-3 .contenido-restringido[data-nivel-requerido="1"] .restriction-overlay,
body.user-nivel-4 .contenido-restringido[data-nivel-requerido="1"] .restriction-overlay,
body.user-nivel-5 .contenido-restringido[data-nivel-requerido="1"] .restriction-overlay {
    display: none;
}

/* Nivel 2+ puede ver contenido nivel 2 */
body.user-nivel-2 .contenido-restringido[data-nivel-requerido="2"] .contenido-inner,
body.user-nivel-3 .contenido-restringido[data-nivel-requerido="2"] .contenido-inner,
body.user-nivel-4 .contenido-restringido[data-nivel-requerido="2"] .contenido-inner,
body.user-nivel-5 .contenido-restringido[data-nivel-requerido="2"] .contenido-inner {
    filter: none;
    pointer-events: auto;
    user-select: auto;
}

body.user-nivel-2 .contenido-restringido[data-nivel-requerido="2"] .restriction-overlay,
body.user-nivel-3 .contenido-restringido[data-nivel-requerido="2"] .restriction-overlay,
body.user-nivel-4 .contenido-restringido[data-nivel-requerido="2"] .restriction-overlay,
body.user-nivel-5 .contenido-restringido[data-nivel-requerido="2"] .restriction-overlay {
    display: none;
}

/* Nivel 3+ puede ver contenido nivel 3 */
body.user-nivel-3 .contenido-restringido[data-nivel-requerido="3"] .contenido-inner,
body.user-nivel-4 .contenido-restringido[data-nivel-requerido="3"] .contenido-inner,
body.user-nivel-5 .contenido-restringido[data-nivel-requerido="3"] .contenido-inner {
    filter: none;
    pointer-events: auto;
    user-select: auto;
}

body.user-nivel-3 .contenido-restringido[data-nivel-requerido="3"] .restriction-overlay,
body.user-nivel-4 .contenido-restringido[data-nivel-requerido="3"] .restriction-overlay,
body.user-nivel-5 .contenido-restringido[data-nivel-requerido="3"] .restriction-overlay {
    display: none;
}

/* Nivel 4+ puede ver contenido nivel 4 */
body.user-nivel-4 .contenido-restringido[data-nivel-requerido="4"] .contenido-inner,
body.user-nivel-5 .contenido-restringido[data-nivel-requerido="4"] .contenido-inner {
    filter: none;
    pointer-events: auto;
    user-select: auto;
}

body.user-nivel-4 .contenido-restringido[data-nivel-requerido="4"] .restriction-overlay,
body.user-nivel-5 .contenido-restringido[data-nivel-requerido="4"] .restriction-overlay {
    display: none;
}

/* Nivel 5 puede ver contenido nivel 5 */
body.user-nivel-5 .contenido-restringido[data-nivel-requerido="5"] .contenido-inner {
    filter: none;
    pointer-events: auto;
    user-select: auto;
}

body.user-nivel-5 .contenido-restringido[data-nivel-requerido="5"] .restriction-overlay {
    display: none;
}

/* ============================================
   AUDIO PLAYERS - OCULTAR COMPLETAMENTE
   ============================================ */

.contenido-restringido audio,
.contenido-restringido .audio-player {
    display: none;
}

/* Mostrar audio para niveles Premium (4+) */
body.user-nivel-4 .contenido-restringido[data-nivel-requerido="4"] audio,
body.user-nivel-4 .contenido-restringido[data-nivel-requerido="4"] .audio-player,
body.user-nivel-5 .contenido-restringido[data-nivel-requerido="4"] audio,
body.user-nivel-5 .contenido-restringido[data-nivel-requerido="4"] .audio-player,
body.user-nivel-5 .contenido-restringido[data-nivel-requerido="5"] audio,
body.user-nivel-5 .contenido-restringido[data-nivel-requerido="5"] .audio-player {
    display: block;
}

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

@media (max-width: 768px) {
    .restriction-text {
        font-size: 16px;
    }
    
    .restriction-cta {
        padding: 10px 18px;
        font-size: 18px;
    }
}

/* ============================================
   ACCESIBILIDAD
   ============================================ */

/* Focus para navegación por teclado */
.restriction-cta:focus {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

/* Reducir animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    .restriction-cta {
        animation: none;
    }
}

/* ============================================
   PRINT - Mostrar todo al imprimir
   ============================================ */

@media print {
    .contenido-restringido .contenido-inner {
        filter: none !important;
    }
    
    .restriction-overlay {
        display: none !important;
    }
}