/**
 * JDorion Win98 Responsive Force CSS
 * Version: 2.2.0 (Hardened Edition)
 * Author: JD + Dorian
 * Site: https://pensamientoreflejado.com
 * Last Updated: 2025-11-07
 * 
 * Improvements v2.2.0:
 * - GPU acceleration (backface-visibility, transform-style)
 * - Layout containment para mejor performance
 * - Soporte HiDPI/Retina screens
 * - prefers-reduced-motion (WCAG 2.2)
 * - prefers-color-scheme (dark mode)
 * - forced-colors para alto contraste
 * - Variables CSS con paleta JDorion
 * - Animación de carga personalizada
 * - Split-screen support (Android/iPadOS)
 * - Orientation landscape optimization
 * - Font smoothing antialiasing
 * - Debug visual mode
 * 
 * Este archivo fuerza el diseño responsive en aplicaciones React
 * Colocar en: /assets/css/win98-responsive-force.css
 */

/* ===================================
   VARIABLES GLOBALES JDORION
   =================================== */

:root {
    /* Paleta JDorion / Pensamiento Reflejado */
    --jd-cyan: #00ffff;
    --jd-dark: #001010;
    --jd-beige: #F5F5DC;
    --jd-dark-alt: rgba(0, 20, 20, 0.9);
    --jd-cyan-alpha: rgba(0, 255, 255, 0.5);
    
    /* Spacing consistency */
    --jd-padding-mobile: 8px;
    --jd-padding-tablet: 15px;
    --jd-padding-desktop: 25px;
    
    /* Transitions */

    --jd-transition-fast: 0.15s ease-in-out;
    --jd-transition-normal: 0.25s ease-in-out;
    --jd-transition-slow: 0.4s ease-in-out;
}

/* RESET Y BASE */
html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 100vh !important;
}

body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    position: relative !important;
}

/* Asegurar espacio para taskbar en mobile (reducido 50%) */
body.win98-active {
    padding-bottom: clamp(32px, 6vh, 36px) !important;
}

/* CONTENEDOR PRINCIPAL */
.jd-win98-wrapper {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    
    /* Performance optimizations */
    contain: layout style paint !important;
}

/* ROOT DE REACT */
.jd-win98-root {
    margin: 0 !important;
    transform-origin: top center !important;
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    max-width: none !important;
    overflow: hidden !important;
    
    /* Performance - GPU Acceleration */
    transition: transform var(--jd-transition-normal) !important;
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
    transform-style: preserve-3d !important;
    
    /* Font smoothing - Evita blur en transform: scale() */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* CSS Reset para elementos dentro de React */
.jd-win98-root * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* FORZAR BOX-SIZING EN TODOS LOS ELEMENTOS DE REACT */
.jd-win98-root,
.jd-win98-root * {
    box-sizing: border-box !important;
}

/* PREVENIR ELEMENTOS QUE SOBRESALGAN */
.jd-win98-root > * {
    max-width: 100% !important;
}

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

/* Móvil pequeño (≤375px) */
@media (max-width: 375px) {
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    .jd-win98-wrapper {
        padding: var(--jd-padding-mobile) 2px !important;
    }
}

/* Móvil (376-480px) */
@media (min-width: 376px) and (max-width: 480px) {
    .jd-win98-wrapper {
        padding: var(--jd-padding-mobile) 3px !important;
    }
}

/* Móvil grande (481-640px) */
@media (min-width: 481px) and (max-width: 640px) {
    .jd-win98-wrapper {
        padding: var(--jd-padding-mobile) 5px !important;
    }
}

/* Tablet pequeña (641-768px) */
@media (min-width: 641px) and (max-width: 768px) {
    .jd-win98-wrapper {
        padding: var(--jd-padding-tablet) 10px !important;
    }
}

/* Tablet (769-1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .jd-win98-wrapper {
        padding: 20px var(--jd-padding-tablet) !important;
    }
}

/* Desktop pequeño (1025-1280px) */
@media (min-width: 1025px) and (max-width: 1280px) {
    .jd-win98-wrapper {
        padding: 20px !important;
    }
}

/* Desktop (1281-1920px) */
@media (min-width: 1281px) and (max-width: 1920px) {
    .jd-win98-wrapper {
        padding: 30px var(--jd-padding-desktop) !important;
    }
}

/* Ultra wide (>1920px) */
@media (min-width: 1921px) {
    .jd-win98-wrapper {
        padding: 40px 30px !important;
        max-width: 2400px !important;
    }
}

/* ===================================
   LOADING STATE (Animación JDorion)
   =================================== */

.jd-win98-root:empty::before {
    content: "💾 Iniciando experiencia JDorion...";
    display: block;
    text-align: center;
    padding: 60px 20px;
    color: var(--jd-cyan);
    font-size: 18px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    animation: jd-blink 1.2s infinite alternate;
}

@keyframes jd-blink {
    from { 
        opacity: 1; 
    }
    to { 
        opacity: 0.4; 
    }
}

/* ===================================
   NO JAVASCRIPT WARNING
   =================================== */

.jd-win98-noscript {
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    margin: 20px auto;
    max-width: 600px;
}

.jd-win98-noscript p {
    margin: 10px 0;
    color: #856404;
    font-size: 16px;
}

/* ===================================
   TOUCH DEVICE OPTIMIZATIONS
   =================================== */

@media (hover: none) and (pointer: coarse) {
    /* Dispositivos táctiles (móviles/tablets) */
    .jd-win98-wrapper {
        -webkit-overflow-scrolling: touch !important;
    }
    
    .jd-win98-root {
        -webkit-tap-highlight-color: transparent !important;
    }
}

/* ===================================
   ORIENTATION SPECIFIC
   =================================== */

/* Landscape en móviles */
@media (max-width: 768px) and (orientation: landscape) {
    .jd-win98-wrapper {
        padding: 5px 2px !important;
    }
}

/* Portrait en tablets */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .jd-win98-wrapper {
        padding: 20px 10px !important;
    }
}

/* Landscape en móviles con altura pequeña */
@media (orientation: landscape) and (max-height: 480px) {
    .jd-win98-root {
        transform: scale(0.75) !important;
    }
}

/* Split Screen Support (Android/iPadOS) */
@media (max-width: 600px) and (max-height: 400px) {
    .jd-win98-wrapper {
        padding: 0 !important;
        scale: 0.8;
    }
}

/* ===================================
   COMPATIBILIDAD WORDPRESS/GUTENBERG
   =================================== */

/* Bloques de WordPress */
.entry-content .jd-win98-wrapper,
.wp-block-group .jd-win98-wrapper,
.wp-block-column .jd-win98-wrapper {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

/* Tema Astra */
.ast-container,
.site-content .ast-container {
    overflow: visible !important;
}

/* ===================================
   COMPATIBILIDAD iOS SAFARI
   =================================== */

@supports (-webkit-touch-callout: none) {
    .jd-win98-root {
        transform-origin: top center !important;
        -webkit-transform-origin: top center !important;
    }
    
    .jd-win98-wrapper {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ===================================
   ACCESIBILIDAD - WCAG 2.2
   =================================== */

/* Reduced Motion (respeta preferencias del usuario) */
@media (prefers-reduced-motion: reduce) {
    .jd-win98-root {
        transition: none !important;
        animation: none !important;
    }
    
    .jd-win98-root:empty::before {
        animation: none !important;
    }
}

/* Dark Mode (prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
    .jd-win98-noscript {
        background: var(--jd-dark-alt);
        border-color: var(--jd-cyan-alpha);
        color: var(--jd-beige);
    }
    
    .jd-win98-noscript p {
        color: var(--jd-beige);
    }
    
    .jd-win98-root:empty::before {
        color: #aaffff;
    }
}

/* High Contrast Mode (forced-colors) */
@media (forced-colors: active) {
    .jd-win98-noscript {
        border-color: ButtonText;
        background: Canvas;
        color: ButtonText;
    }
    
    .jd-win98-noscript p {
        color: ButtonText;
    }
}

/* ===================================
   HiDPI / RETINA SCREENS
   =================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .jd-win98-root {
        image-rendering: -webkit-optimize-contrast;
        text-rendering: geometricPrecision;
    }
}

/* ===================================
   ULTRA-WIDE PROTECTION (4K+)
   =================================== */

@media (min-width: 2560px) {
    .jd-win98-wrapper {
        max-width: 2600px !important;
        margin: 0 auto;
    }
}

/* ===================================
   DEBUG VISUAL MODE
   =================================== */

body.debug-win98 .jd-win98-wrapper {
    outline: 1px dashed var(--jd-cyan-alpha) !important;
    position: relative;
}

body.debug-win98 .jd-win98-wrapper::before {
    content: "📦 WRAPPER";
    position: absolute;
    top: -20px;
    left: 0;
    background: var(--jd-dark);
    color: var(--jd-cyan);
    padding: 2px 8px;
    font-size: 10px;
    font-family: monospace;
    z-index: 10000;
}

body.debug-win98 .jd-win98-root {
    outline: 1px solid rgba(255, 255, 0, 0.5) !important;
    position: relative;
}

body.debug-win98 .jd-win98-root::before {
    content: "⚛️ ROOT (React)";
    position: absolute;
    top: -20px;
    left: 0;
    background: rgba(255, 255, 0, 0.9);
    color: #000;
    padding: 2px 8px;
    font-size: 10px;
    font-family: monospace;
    z-index: 10001;
}

/* ===================================
   QUICK-WINS OVERRIDES (SAFE, last-resort)
   Scoped to body.win98-active so only applied when app mounts in WP
   These rules are intentionally specific and conservative.
   =================================== */

body.win98-active,
body.win98-active html,
body.win98-active #root,
body.win98-active .jd-win98-root,
body.win98-active #win98-react-root {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important; /* keep horizontal hidden */
    overflow-y: auto !important;   /* allow vertical scrolling */
    position: relative !important; /* neutralize inline fixed if present */
}

/* Neutralizar transform scale que fuerce layout en small heights */
body.win98-active .jd-win98-root[style*="transform: scale"] {
    transform: none !important;
}

/* Taskbar touch targets and responsive height (reducido 50%) */
body.win98-active .taskbar {
    height: clamp(28px, 5vh, 32px) !important;
    min-height: 28px !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
    box-sizing: border-box !important;
}

body.win98-active .taskbar button,
body.win98-active .taskbar-button {
    min-height: 24px !important;
    min-width: 24px !important;
    font-size: clamp(8px, 1.5vw, 10px) !important;
    padding: clamp(2px, 0.5vw, 4px) !important;
}

/* Start menu responsive width */
body.win98-active .start-menu {
    width: min(220px, 90vw) !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    bottom: clamp(28px, 5vh, 32px) !important;
}

/* Terminal responsive */
body.win98-active .terminal-screen {
    height: min(300px, 50vh) !important;
    min-height: 150px !important;
    overflow-y: auto !important;
    font-size: clamp(11px, 2vw, 14px) !important;
    line-height: 1.5 !important;
}

/* App container safe adjustments */
body.win98-active .app-container,
body.win98-active .App {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

/* Windows safety: avoid fixed pixel widths and force max-width */
body.win98-active .window,
body.win98-active .window * {
    max-width: 95vw !important;
    left: auto !important;
    right: auto !important;
}

/* small viewport: increase wrapper padding and ensure vertical flow */
@media (max-width: 420px) {
    body.win98-active .jd-win98-wrapper {
        padding: var(--jd-padding-mobile) 6px !important;
        align-items: flex-start !important;
    }
}

/* Touch devices - ensure tap targets and scrolling */
@media (hover: none) and (pointer: coarse) {
    body.win98-active .jd-win98-root {
        -webkit-overflow-scrolling: touch !important;
    }
    body.win98-active .taskbar {
        padding: 4px 6px !important;
    }
}

/* ===================================
   IMÁGENES RESPONSIVE
   =================================== */

/* Iconos del desktop - Escalan según viewport */
.desktop-icon img,
.desktop-icon__img {
    image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Iconos en ventanas y barras de título */
.title-bar img,
.window-body img,
.explorador-item img,
.drive-icon img {
    image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* Iconos pequeños responsive (16px base → 10px reducido 50%) */
.title-bar img,
menu img,
button img,
.toolbar-icon,
.file-icon {
    width: clamp(8px, 1.8vw, 10px) !important;
    height: clamp(8px, 1.8vw, 10px) !important;
}

/* Iconos medianos responsive (32px base → 20px reducido 50%) */
.desktop-icon img,
.drive-icon img,
.drive-icon-img,
.explorador-item-icon {
    width: clamp(16px, 3.5vw, 24px) !important;
    height: clamp(16px, 3.5vw, 24px) !important;
}

/* Iconos grandes responsive (64px base → 32px reducido 50%) */
.window-body img[style*="64px"],
.explorador-item img[style*="64px"],
.window-large-icon {
    width: clamp(24px, 5vw, 32px) !important;
    height: clamp(24px, 5vw, 32px) !important;
}

/* Media Queries específicas para iconos */
@media (max-width: 480px) {
    /* Móvil: iconos más pequeños (reducidos 50%) */
    .desktop-icon img {
        width: clamp(14px, 4vw, 18px) !important;
        height: clamp(14px, 4vw, 18px) !important;
    }
    
    .title-bar img {
        width: 8px !important;
        height: 8px !important;
    }
    
    /* Grid de iconos más compacto */
    .desktop-icons {
        gap: clamp(10px, 3vw, 15px) !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    /* Tablet: tamaño intermedio (reducido 50%) */
    .desktop-icon img {
        width: clamp(18px, 4vw, 22px) !important;
        height: clamp(18px, 4vw, 22px) !important;
    }
}

@media (min-width: 769px) {
    /* Desktop: tamaño completo (reducido 50%) */
    .desktop-icon img {
        width: clamp(20px, 3vw, 24px) !important;
        height: clamp(20px, 3vw, 24px) !important;
    }
}

/* Etiquetas de iconos responsive (reducido 50%) */
.desktop-icon span,
.desktop-icon__label {
    font-size: clamp(8px, 1.5vw, 10px) !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* End quick-wins */