/* 
 * security.css - Medidas de protección avanzadas
 * Versión reforzada contra ataques y validación CSS completa
 * 
 * Este archivo contiene implementaciones defensivas
 * para prevenir explotación de vulnerabilidades
 * y proteger la integridad de la interfaz.
 */

/* ==========================================================================
   0. Variables de seguridad y configuración
   ========================================================================== */
:root {
    /* Niveles de seguridad */
    --security-level: high;
    --integrity-flag: 1;
    
    /* Z-index predefinidos con límites */
    --z-index-base: 1;
    --z-index-overlay: 1000;
    --z-index-modal-backdrop: 2000;
    --z-index-modal: 3000;
    --z-index-tooltip: 4000;
    --z-index-security-max: 2147483647;
    
    /* Transiciones seguras */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Colores de seguridad */
    --color-secure-valid: #10b981;
    --color-secure-invalid: #ef4444;
    --color-secure-warning: #f59e0b;
    --color-secure-locked: #6b7280;
    
    /* Tamaños seguros */
    --max-safe-width: 1920px;
    --min-safe-width: 320px;
}

/* ==========================================================================
   1. Protecciones contra interferencia de UI
   ========================================================================== */

/* Evitar arrastre de elementos con compatibilidad completa */
.no-drag,
.prevent-drag {
    -webkit-user-drag: none;          /* Chrome, Safari, Edge modernos */
    -moz-user-drag: none;             /* Firefox */
    -ms-user-drag: none;              /* IE/Edge antiguo */
    -khtml-user-drag: none;           /* Konqueror */
    /* user-drag: none; */            /* ELIMINAR - No es estándar */
    -webkit-touch-callout: none;      /* iOS Safari */
    -webkit-tap-highlight-color: transparent;
}

/* Deshabilitar selección con prefijos completos */
.no-selection,
.prevent-selection {
    -webkit-touch-callout: none;      /* iOS Safari */
    -webkit-user-select: none;        /* Safari, Chrome, Opera ≥15 */
    -khtml-user-select: none;         /* Konqueror HTML */
    -moz-user-select: none;           /* Firefox */
    -ms-user-select: none;            /* IE/Edge */
    user-select: none;                /* Estándar */
    cursor: default !important;
}

/* Protección de imágenes */
img:not(.interactive-enabled):not(.allowed-interactive) {
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
    /* user-drag: none; */ /* No estándar */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* Controles de interacción granular */
.interactive-enabled {
    pointer-events: auto;
    cursor: pointer;
}

.interactive-disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.6;
}

/* ==========================================================================
   2. Protección contra modificaciones DOM
   ========================================================================== */

/* Protección contra inyección de elementos */
[data-security="protected"] {
    position: relative !important;
    overflow: hidden !important;
}

[data-security="protected"]::before {
    content: 'SECURE' !important;
    position: absolute !important;
    top: -1000px !important;
    left: -1000px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0.001 !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* Detección de manipulación DOM */
.dom-guard::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: transparent !important;
    z-index: 2147483646 !important;
    pointer-events: none !important;
}

/* Prevenir clonación de elementos */
.prevent-clone {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

/* ==========================================================================
   3. Controles de visibilidad y opacidad seguros
   ========================================================================== */

/* Ocultamiento seguro con múltiples capas */
.hidden-secure {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Transiciones controladas con JavaScript */
.visibility-managed {
    transition: opacity 0.3s ease, visibility 0.3s ease;
    will-change: opacity, visibility;
}

/* Restauración verificada */
.visibility-managed.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* ==========================================================================
   4. Protección de formularios reforzada
   ========================================================================== */

/* Campos con validación de integridad */
.input-secure {
    background-color: #fff !important;
    border: 2px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    color: #111827 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    position: relative !important;
    z-index: 1 !important;
    min-height: 48px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Protección contra inyección en inputs */
.input-secure::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
    transition: opacity 0.2s ease !important;
}

.input-secure:focus::placeholder {
    opacity: 0.5 !important;
}

/* Estados validados */
.input-secure.is-valid {
    border-color: #10b981 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 20px !important;
    padding-right: 40px !important;
}

.input-secure.is-invalid {
    border-color: #ef4444 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 20px !important;
    padding-right: 40px !important;
}

/* Prevenir autocompletado malicioso */
.input-no-autocomplete {
    -webkit-autofill: transparent !important;
    transition: background-color 600000s 0s, color 600000s 0s !important;
}

.input-no-autocomplete:-webkit-autofill {
    -webkit-text-fill-color: #111827 !important;
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

/* Campos sensibles con protección visual */
.input-sensitive {
    letter-spacing: 0.1em !important;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
    font-size: 14px !important;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0,0,0,0.05) 10px,
        rgba(0,0,0,0.05) 20px
    ) !important;
}

/* ==========================================================================
   5. Controles de animación seguros
   ========================================================================== */

/* Animaciones con límites de hardware */
.animation-safe {
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

/* Prevenir animaciones en modo reducido */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Animaciones controladas por JavaScript */
.js-controlled-animation {
    animation-play-state: paused !important;
}

.js-controlled-animation.is-playing {
    animation-play-state: running !important;
}

/* ==========================================================================
   6. Protección de contenido embebido
   ========================================================================== */

/* Sandbox visual para iframes */
.embedded-container {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important;
    overflow: hidden !important;
    background: #f3f4f6 !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
}

.embedded-container::before {
    content: 'Contenido protegido' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #9ca3af !important;
    font-size: 14px !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.embedded-container iframe,
.embedded-container object,
.embedded-container embed {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    z-index: 2 !important;
}

/* Overlay de seguridad */
.embedded-protection-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(
        45deg,
        transparent 49%,
        rgba(255,255,255,0.1) 50%,
        transparent 51%
    ) !important;
    background-size: 10px 10px !important;
    z-index: 3 !important;
    pointer-events: none !important;
    opacity: 0.3 !important;
}

/* ==========================================================================
   7. Manejo de scroll seguro
   ========================================================================== */

/* Scroll con límites de rendimiento */
.scroll-secure {
    overflow-y: auto !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #d1d5db #f3f4f6 !important;
}

/* Prevenir scroll-jacking */
.no-scroll-jacking {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

/* Barras de scroll personalizadas seguras */
.scrollbar-secure::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    background: #f3f4f6 !important;
}

.scrollbar-secure::-webkit-scrollbar-track {
    background: #f3f4f6 !important;
    border-radius: 4px !important;
}

.scrollbar-secure::-webkit-scrollbar-thumb {
    background: #d1d5db !important;
    border-radius: 4px !important;
    border: 2px solid #f3f4f6 !important;
}

.scrollbar-secure::-webkit-scrollbar-thumb:hover {
    background: #9ca3af !important;
}

.scrollbar-secure::-webkit-scrollbar-thumb:active {
    background: #6b7280 !important;
}

/* ==========================================================================
   8. Protección contra reflow y layout shifting
   ========================================================================== */

/* Contenedores con tamaños fijos */
.layout-stable {
    contain: layout style paint !important;
    content-visibility: auto !important;
    will-change: transform !important;
}

/* Prevenir cambios bruscos de layout */
.size-guarded {
    min-width: 100px !important;
    min-height: 40px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Aspect ratios protegidas */
.aspect-ratio-locked {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: var(--aspect-ratio, 56.25%) !important;
    overflow: hidden !important;
}

.aspect-ratio-locked > * {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ==========================================================================
   9. Sistema de capas seguro
   ========================================================================== */

/* Z-index con límites máximos */
.layer-security-base { z-index: 1 !important; }
.layer-security-low { z-index: 100 !important; }
.layer-security-medium { z-index: 1000 !important; }
.layer-security-high { z-index: 10000 !important; }
.layer-security-max { 
    z-index: 2147483647 !important; 
    /* max-z-index: 2147483647 !important; */ /* ELIMINAR - No existe */
}

/* Protección contra z-index attacks */
.z-index-guard {
    position: relative !important;
    isolation: isolate !important;
}

.z-index-guard::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background: transparent !important;
}

/* ==========================================================================
   10. Manejo de eventos de puntero seguro
   ========================================================================== */

/* Controles táctiles seguros */
.touch-secure {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    -webkit-touch-callout: none !important;
}

/* Elementos que requieren doble verificación */
.requires-double-confirmation {
    cursor: not-allowed !important;
    opacity: 0.5 !important;
    filter: grayscale(50%) !important;
    transition: all 0.3s ease !important;
}

.requires-double-confirmation.confirmed {
    cursor: pointer !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Evitar arrastre de elementos */
.no-drag,
.prevent-drag {
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
    -khtml-user-drag: none;
    /* user-drag: none; */ /* No estándar */
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   11. Protección de enlaces y navegación
   ========================================================================== */

/* Enlaces con verificación */
.link-verified {
    position: relative !important;
    color: #2563eb !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.2s ease !important;
}

.link-verified::before {
    content: '✓' !important;
    position: absolute !important;
    left: -20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #10b981 !important;
    font-size: 12px !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

.link-verified.is-verified::before {
    opacity: 1 !important;
}

/* Enlaces externos con advertencia */
.link-external-warning {
    color: #dc2626 !important;
    position: relative !important;
}

.link-external-warning::after {
    content: '↗' !important;
    display: inline-block !important;
    margin-left: 4px !important;
    font-size: 0.9em !important;
    animation: pulse-external 2s infinite !important;
}

@keyframes pulse-external {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ==========================================================================
   12. Controles de rendimiento y carga segura
   ========================================================================== */

/* Estados de carga con protección */
.loading-secure {
    position: relative !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

.loading-secure::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 24px !important;
    height: 24px !important;
    border: 3px solid #e5e7eb !important;
    border-top-color: #3b82f6 !important;
    border-radius: 50% !important;
    animation: spin-secure 1s linear infinite !important;
    z-index: 1000 !important;
}

@keyframes spin-secure {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Placeholders seguros */
.content-placeholder-secure {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(
        90deg,
        #f3f4f6 25%,
        #e5e7eb 50%,
        #f3f4f6 75%
    ) !important;
    background-size: 200% 100% !important;
    animation: loading-shimmer 2s infinite linear !important;
}

@keyframes loading-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ==========================================================================
   13. Protección contra inyección CSS/HTML
   ========================================================================== */

/* Estilos para atributos de datos con validación */
[data-secure-level="high"] {
    position: relative !important;
    overflow: hidden !important;
}

[data-secure-level="high"]::before {
    content: '' !important;
    position: absolute !important;
    top: -10px !important;
    left: -10px !important;
    right: -10px !important;
    bottom: -10px !important;
    background: rgba(59, 130, 246, 0.05) !important;
    z-index: -1 !important;
    pointer-events: none !important;
    border: 2px dashed rgba(59, 130, 246, 0.2) !important;
}

/* Clases ofuscadas con hash */
.sec_5f8a3e2c { display: block !important; position: relative !important; }
.sec_9b1d4f7a { display: none !important; visibility: hidden !important; }
.sec_c3a8e6d1 { pointer-events: none !important; user-select: none !important; }

/* ==========================================================================
   14. Controles de accesibilidad y focus seguro
   ========================================================================== */

/* Sistema de focus sin contorno visible por defecto */
.focus-secure:focus {
    outline: 3px solid #3b82f6 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
}

.focus-secure:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

.focus-secure:focus-visible {
    outline: 3px solid #3b82f6 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
}

/* Para lectores de pantalla - completamente oculto visualmente */
.sr-only-secure {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* ==========================================================================
   15. Protección de medios y recursos
   ========================================================================== */

/* Imágenes con carga progresiva segura */
.img-secure-load {
    opacity: 0 !important;
    transition: opacity 0.5s ease !important;
    background: #f3f4f6 !important;
    position: relative !important;
    overflow: hidden !important;
}

.img-secure-load::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(
        90deg,
        #f3f4f6 25%,
        #e5e7eb 50%,
        #f3f4f6 75%
    ) !important;
    background-size: 200% 100% !important;
    animation: loading-shimmer 2s infinite linear !important;
    z-index: 1 !important;
}

.img-secure-load.loaded {
    opacity: 1 !important;
}

.img-secure-load.loaded::before {
    display: none !important;
}

/* Protección contra descarga de imágenes */
.img-no-download {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -moz-user-drag: none !important;
    -ms-user-drag: none !important;
    /* user-drag: none !important; */ /* No estándar */
    pointer-events: none !important;
}

/* Videos con controles limitados */
.video-secure-container {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 8px !important;
}

.video-secure-container video {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.video-secure-container::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    pointer-events: none !important;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1) !important;
    border-radius: 8px !important;
}

/* ==========================================================================
   16. Sistema de validación y estados de error
   ========================================================================== */

/* Estados visuales de seguridad */
.state-security-valid {
    border-color: #10b981 !important;
    background-color: rgba(16, 185, 129, 0.05) !important;
    position: relative !important;
}

.state-security-valid::before {
    content: '✓' !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #10b981 !important;
    font-weight: bold !important;
}

.state-security-invalid {
    border-color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.05) !important;
    animation: shake-invalid 0.5s ease-in-out !important;
}

@keyframes shake-invalid {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.state-security-warning {
    border-color: #f59e0b !important;
    background-color: rgba(245, 158, 11, 0.05) !important;
    animation: pulse-warning 2s infinite !important;
}

@keyframes pulse-warning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Mensajes de error controlados */
.error-secure-message {
    display: none !important;
    color: #ef4444 !important;
    font-size: 13px !important;
    margin-top: 6px !important;
    padding: 8px 12px !important;
    background: rgba(239, 68, 68, 0.1) !important;
    border-radius: 6px !important;
    border-left: 4px solid #ef4444 !important;
}

.error-secure-message.is-visible {
    display: block !important;
    animation: slide-down-error 0.3s ease-out !important;
}

@keyframes slide-down-error {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   17. Protección contra modificación de estilos
   ========================================================================== */

/* Estilos aplicados via JavaScript con verificación */
.js-secure-style {
    position: relative !important;
    transition: none !important;
}

.js-secure-style::after {
    content: 'JS' !important;
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    font-size: 8px !important;
    color: #6b7280 !important;
    opacity: 0.3 !important;
    pointer-events: none !important;
}

/* Estilos críticos que no pueden ser sobrescritos */
.critical-security-style {
    all: unset !important;
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
}

/* Protección contra !important attacks */
.security-important {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
}

.security-important[style*="display: none"],
.security-important[style*="visibility: hidden"],
.security-important[style*="opacity: 0"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ==========================================================================
   18. Indicadores de estado de caché y almacenamiento
   ========================================================================== */

/* Sistema de indicadores de estado */
.cache-status {
    display: none !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    z-index: 100 !important;
}

.cache-status.cached {
    display: block !important;
    background-color: #10b981 !important;
    animation: pulse-cache 2s infinite !important;
}

.cache-status.expired {
    display: block !important;
    background-color: #ef4444 !important;
    animation: blink-expired 1s infinite !important;
}

.cache-status.fresh {
    display: block !important;
    background-color: #3b82f6 !important;
}

@keyframes pulse-cache {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

@keyframes blink-expired {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ==========================================================================
   19. Controles de consentimiento y permisos
   ========================================================================== */

/* Estados de consentimiento */
.consent-pending {
    opacity: 0.5 !important;
    filter: blur(1px) !important;
    pointer-events: none !important;
    user-select: none !important;
    transition: all 0.3s ease !important;
}

.consent-granted {
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
    user-select: auto !important;
}

.consent-denied {
    opacity: 0.3 !important;
    filter: grayscale(100%) !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* ==========================================================================
   20. Medidas de ofuscación y protección avanzada
   ========================================================================== */

/* Selectores complejos para dificultar ataques */
html:not(.unsafe-mode) 
body:not([data-tampered="true"]) 
.security-container 
> .protected-content:not(.compromised) {
    position: relative !important;
    overflow: hidden !important;
}

/* Reglas con alta especificidad y verificación */
#root:not(.modified) 
#app:not(.hacked) 
.main-content:not(.infected) 
.security-wrapper:not(.bypassed) {
    all: unset !important;
    display: block !important;
    position: relative !important;
    isolation: isolate !important;
}

/* Clases con nombres aleatorios */
.a8c3d1e9 { opacity: 0; transition: opacity 0.3s ease; }
.b2f4e6a8 { pointer-events: none; user-select: none; }
.c5d9a3b7 { display: none; visibility: hidden; }

/* ==========================================================================
   21. Controles de tiempo y expiración seguros
   ========================================================================== */

/* Elementos temporales con expiración */
.temporary-secure {
    position: relative !important;
    animation: temporary-secure-fade 5s linear forwards !important;
}

@keyframes temporary-secure-fade {
    0%, 80% {
        opacity: 1;
        visibility: visible;
        display: block;
    }
    100% {
        opacity: 0;
        visibility: hidden;
        display: none;
        height: 0;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
}

/* Timeouts visuales */
.timeout-warning {
    color: #f59e0b !important;
    animation: pulse-timeout 1s infinite !important;
}

@keyframes pulse-timeout {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.timeout-expired {
    color: #ef4444 !important;
    text-decoration: line-through !important;
    opacity: 0.5 !important;
}

/* ==========================================================================
   22. Protección contra herramientas de desarrollo
   ========================================================================== */

/* Detección de modo desarrollo */
@media (min-width: 99999px) {
    .dev-tool-detected {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
    }
}

/* Prevenir inspección de elementos */
.prevent-inspection {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    cursor: default !important;
}

.prevent-inspection::selection {
    background: transparent !important;
    color: inherit !important;
}

.prevent-inspection::-moz-selection {
    background: transparent !important;
    color: inherit !important;
}

/* Detectar consola abierta */
.console-open-detector {
    display: none !important;
}

@media (min-height: 99999px) {
    .console-open-detector {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0,0,0,0.8) !important;
        z-index: 2147483647 !important;
        color: white !important;
        font-size: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   23. Verificación de integridad
   ========================================================================== */

/* Marcadores de integridad */
.integrity-marker::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: linear-gradient(90deg, 
        #10b981 0%,
        #3b82f6 50%,
        #10b981 100%) !important;
    z-index: 1000 !important;
    pointer-events: none !important;
    opacity: 0.5 !important;
}

/* Verificación checksum visual */
.integrity-verified {
    position: relative !important;
}

.integrity-verified::after {
    content: '✓' !important;
    position: absolute
}