*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Tahoma,Segoe UI,Arial,sans-serif}

/* espacio para barra XP */
.desktop{
  position:relative;width:100%;height:100vh;
  background:#f9d400 url('assets/wallpaper/canalcero.jpg') center/cover no-repeat;
  overflow:hidden; padding-bottom:40px;
}

/* ===== Taskbar Windows XP ===== */
.taskbar.xp{
  position:absolute;left:0;right:0;bottom:0;height:30px;z-index:1500;
  background:
    linear-gradient(to bottom, #245EDC 0%, #1941A5 50%, #0F2B6B 100%);
  border-top:2px solid #4A90E2;
  border-left:1px solid #4A90E2;
  border-right:1px solid #0F2B6B;
  box-shadow:0 2px 4px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.4) inset;
  display:flex;align-items:center;gap:1px;padding:2px 4px;
  color:#fff;
  font-family:'Tahoma',sans-serif;font-size:11px;font-weight:normal;
}
.start-btn{
  display:flex;align-items:center;gap:4px;
  height:24px;padding:0 16px 0 8px;cursor:pointer;color:#fff;font-weight:bold;
  background:
    linear-gradient(to bottom, #73D216 0%, #4E9A06 50%, #2E5C04 100%);
  border:1px solid;
  border-color:#8AE234 #2E5C04 #2E5C04 #8AE234;
  border-radius:3px 10px 10px 3px;
  box-shadow:0 1px 2px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.5) inset;
  text-shadow:1px 1px 1px rgba(0,0,0,0.8);
  margin:1px;
  position:relative;
}
.start-btn:hover{
  background:
    linear-gradient(to bottom, #83c383 0%, #6ab06a 10%, #5a9f5a 50%, #4d8d4d 90%, #3d7d3d 100%);
}
.start-btn:active{
  border-color:#2d6d2d #8bc68b #8bc68b #2d6d2d;
  box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
  background:
    linear-gradient(to bottom, #2d6d2d 0%, #3d7d3d 10%, #4a8f4a 50%, #5aa05a 90%, #73b373 100%);
}
.start-orb{
  width:16px;height:16px;
  position:relative;
  display:inline-block;
}
.start-orb::before{
  content:'';
  position:absolute;
  width:7px;height:7px;
  background:#FF6B6B;
  top:1px;left:1px;
}
.start-orb::after{
  content:'';
  position:absolute;
  width:7px;height:7px;
  background:#4ECDC4;
  top:1px;right:1px;
  box-shadow:0 7px 0 #45B7D1, -7px 7px 0 #F9CA24;
}
.start-text{ font-size:11px;letter-spacing:0;text-shadow:1px 1px 0 rgba(0,0,0,.5) }
.divider{
  width:2px;height:22px;
  background:linear-gradient(to right, #0F2B6B 0%, #4A90E2 50%, #0F2B6B 100%);
  border-left:1px solid #4A90E2;
  border-right:1px solid #0F2B6B;
  margin:0 3px;
  box-shadow:1px 0 0 rgba(255,255,255,0.3);
}
.quick-launch{
  display:flex;gap:1px;padding:0 2px;
}
.ql-btn{
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  border:1px solid;
  border-color:#4A90E2 #0F2B6B #0F2B6B #4A90E2;
  background:linear-gradient(to bottom, #245EDC 0%, #1941A5 100%);
  cursor:pointer;
  margin:1px;
  box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 2px rgba(0,0,0,0.2);
}
.ql-btn:hover{
  background:linear-gradient(to bottom, #4A90E2 0%, #2951B5 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.4) inset, 0 1px 3px rgba(0,0,0,0.3);
}
.ql-btn:active{
  border-color:#1941a5 #5a9cde #5a9cde #1941a5;
  background:linear-gradient(to bottom, #1941a5 0%, #316ac5 50%, #4a8cce 100%); }
.ql-desktop{ background-image:url('assets/icons/show-desktop.png'); background-repeat:no-repeat; background-position:center; background-size:16px }
#ql-winamp{ background-image:url('assets/icons/winamp.svg'); background-repeat:no-repeat; background-position:center; background-size:16px }
#ql-nes{ background-image:url('assets/icons/nes.svg'); background-repeat:no-repeat; background-position:center; background-size:16px }


.tasks{
  flex:1;display:flex;gap:1px;padding:0 2px;
}
.task-btn{
  height:22px;padding:0 8px;display:flex;align-items:center;
  background:linear-gradient(to bottom, #245EDC 0%, #1941A5 100%);
  border:1px solid;
  border-color:#4A90E2 #0F2B6B #0F2B6B #4A90E2;
  color:#fff;font-size:11px;cursor:pointer;
  text-shadow:1px 1px 0 rgba(0,0,0,.7);
  margin:1px;
  box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 2px rgba(0,0,0,0.2);
}
.task-btn:hover{
  background:linear-gradient(to bottom, #4A90E2 0%, #2951B5 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.4) inset, 0 1px 3px rgba(0,0,0,0.3);
}
.task-btn:active{
  border-color:#1941a5 #5a9cde #5a9cde #1941a5;
  background:linear-gradient(to bottom, #1941a5 0%, #316ac5 50%, #4a8cce 100%); }
.task-btn.hidden{ display:none }
.spacer{ flex:1 }
.tray{
  display:flex;align-items:center;gap:2px;padding:0 4px;
  border:1px solid;
  border-color:#0F2B6B #4A90E2 #4A90E2 #0F2B6B;
  background:linear-gradient(to bottom, #1941A5 0%, #245EDC 100%);
  height:22px;
  box-shadow:0 1px 0 rgba(255,255,255,0.2) inset, 0 1px 2px rgba(0,0,0,0.3);
  margin:1px;
}
.clock{
  color:#fff;font-size:11px;font-weight:normal;
  text-shadow:1px 1px 0 rgba(0,0,0,.5);
  padding:0 2px;
}

/* ===== Ventanas ===== */
.window{ position:absolute; min-width:360px; min-height:260px; background:transparent; border:none; box-shadow:none; z-index:1100 }
.content{ padding:0; background:transparent; height:100% }

/* ===== NES / TV (escritorio) ===== */
#nesWin,.content{ background:transparent!important; box-shadow:none!important }
.tv-outer{ position:relative; margin:0 auto; width:100%; max-width:1100px; aspect-ratio:841/634 }
.tv-outer img.tv-bezel.desktop-tv{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; display:block }
.tv-outer{ --screen-left:26%; --screen-top:29%; --screen-width:48% }
.tv-screen{
  position:absolute; left:var(--screen-left); top:var(--screen-top);
  width:var(--screen-width); aspect-ratio:4/3; height:auto; overflow:hidden;
  background:transparent!important; border:none; box-shadow:none!important;
}
#nesFrame{ display:block; width:100%; height:100%; border:0; background:transparent }

/* ===== Winamp ===== */
#winWin{ background:transparent; border:none; box-shadow:none }
#winampFrame{ width:100%; height:100%; border:0; background:transparent }

/* Overlay "tap to start" */
.tapstart{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:52px; z-index:1700; padding:10px 14px;
  font:700 14px/1 system-ui,Segoe UI,Arial; color:#fff;
  background:rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.25);
  border-radius:10px; backdrop-filter:blur(2px);
}
.tapstart.hidden{ display:none }

/* ===== Controles táctiles (default oculto) ===== */
.touchbar{ display:none; z-index:1300; position:relative; margin-top:8px }
.tp{
  user-select:none; -webkit-user-select:none; touch-action:none;
  -webkit-tap-highlight-color:transparent;
  outline:none; border:none;
}

/* ===== MODO MÓVIL - SOLUCIÓN COMPLETAMENTE NUEVA ===== */
@media (max-width: 900px){
  /* Layout móvil: reorganizar elementos en columna */
  body.is-mobile .desktop{
    display:flex; flex-direction:column; align-items:center;
    overflow:auto; padding:20px 0;
    background-attachment:fixed; min-height:100vh;
  }

  /* Leyenda moderna para móvil */
  body.is-mobile .mobile-legend{
    background:linear-gradient(135deg, rgba(0,0,0,.85), rgba(20,20,40,.85));
    backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.15);
    border-radius:16px; padding:20px; margin:0 20px; text-align:center;
    box-shadow:0 8px 32px rgba(0,0,0,.3); width:calc(100% - 40px);
  }
  body.is-mobile .legend-content h2{ margin:0 0 12px; font:700 18px/1.2 system-ui; color:#fff; }
  body.is-mobile .legend-content p{ margin:0 0 16px; font:400 14px/1.4 system-ui; color:#cfe8ff; }
  body.is-mobile .legend-features{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
  body.is-mobile .legend-features span{ font:600 12px/1.2 system-ui; color:#fff; background:rgba(255,255,255,.1); padding:6px 12px; border-radius:20px; }

  /* Ventanas en móvil: posición estática y ancho completo */
  body.is-mobile .window{
    position:static !important; width:100%; max-width:100%; height:auto; margin:8px 0;
  }

  /* Configurar flexbox en body para que funcione el order */
  body.is-mobile {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Orden de elementos en móvil: leyenda → Winamp → TV → controles NES */
    body.is-mobile #mobileLegend{ order:1; margin-bottom:15px; display:block !important; }
    body.is-mobile #winWin{ order:2; margin-bottom:15px; height:200px !important; }
    body.is-mobile #nesWin{ order:3; margin-bottom:10px; }
    body.is-mobile #touchBar{ order:4; margin-bottom:20px; }
    body.is-mobile #albumDock{ order:5; margin-bottom:20px; margin-top:20px; display:none !important; }
    body.is-mobile #cartDock{ order:6; margin-bottom:20px; display:none !important; }

  /* ============================================
     NUEVA IMPLEMENTACIÓN TV MÓVIL - MÉTODO ROBUSTO
     ============================================ */

  /* Contenedor TV - usa viewport width para tamaño grande */
   body.is-mobile .tv-outer{
     position: relative;
     margin: 0 auto 10px;
     width: 95vw; /* MÁS GRANDE - 95% del viewport */
     max-width: 600px;
     padding-top: 71.46%; /* aspect-ratio 841/634 = 0.7538 * 95vw */
     overflow: visible; /* Permitir que el marco sobresalga si es necesario */
   }

   /* Ocultar TV de escritorio en móvil */
   body.is-mobile .tv-outer img.tv-bezel.desktop-tv{
     display: none !important;
   }

   /* Marco TV móvil - SIEMPRE ENCIMA */
   body.is-mobile .tv-outer img.tv-bezel.mobile-tv{
     display: block !important;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: contain; /* Mantener proporciones de la TV */
     pointer-events: none; /* Permitir clicks en el emulador */
     z-index: 200; /* MUY ALTO - garantiza que esté encima */
   }

   /* Pantalla del emulador - JavaScript calcula posición exacta */
   body.is-mobile .tv-screen{
     position: absolute;
     /* Las coordenadas (left, top, width, height) son calculadas
        dinámicamente por tv-positioning.js basándose en las
        dimensiones reales renderizadas de tv2.png */
     overflow: hidden;
     background: #000;
     border: none;
     z-index: 50; /* Debajo del marco TV (200) */
   }

    /* Iframe del emulador - llenar completamente .tv-screen */
    body.is-mobile .tv-screen iframe,
    body.is-mobile #nesFrame {
      position: absolute;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 100% !important;
      border: none;
      margin: 0;
      padding: 0;
      display: block;
      background: transparent;
    }

  /* Ocultar taskbar en móvil */
   body.is-mobile .taskbar.xp{
     display: none;
   }

   /* Winamp ajustado para móvil - versión ultra mínima sin ecualizador */
     body.is-mobile #winWin{
       max-width: 100%;
       width: 100%;
       height: 200px !important;
       min-height: 200px;
       margin: 0 20px;
       border-radius: 12px;
       overflow: hidden;
       box-shadow: 0 4px 20px rgba(0,0,0,0.3);
     }

   body.is-mobile #winWin .window{
     width: 100% !important;
     height: auto !important;
     min-height: 280px;
   }

  /* Controles táctiles mejorados para móvil - diseño NES real */
   body.is-mobile #touchBar{
     display: grid; grid-template-columns: 1fr auto 1fr; gap: 15px;
     align-items: center; justify-items: center;
     margin: 0 20px; width: calc(100% - 40px); max-width: 450px;
     padding: 15px; background: linear-gradient(145deg, #d0d0d0, #a0a0a0);
     border-radius: 8px; position: static;
     border: 2px solid #808080;
     box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.5);
   }

  body.is-mobile .touch-dpad{
    position: relative; width: 140px; height: 140px;
    justify-self: start;
  }

  body.is-mobile .touch-ss{
    display: flex; flex-direction: column; gap: 8px;
    justify-self: center;
  }

  body.is-mobile .touch-ab{
    display: flex; flex-direction: row; gap: 15px;
    justify-self: end; align-items: center;
  }

  /* Estilos de botones táctiles - diseño NES real */
  body.is-mobile .tp{
    background: linear-gradient(145deg, #8a8a8a, #6a6a6a);
    border: 2px solid #4a4a4a;
    border-radius: 4px; width: 50px; height: 50px;
    color: #333; font-weight: 700; font-size: 11px;
    transition: all 0.1s ease; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(0,0,0,0.3);
  }

  body.is-mobile .tp:active,
  body.is-mobile .tp.active{
    background: linear-gradient(145deg, #6a6a6a, #5a5a5a);
    border-color: #3a3a3a;
    transform: translateY(1px);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  }

  body.is-mobile .tp-select,
  body.is-mobile .tp-start{
    width: 70px; height: 25px; border-radius: 2px; font-size: 9px;
    background: linear-gradient(145deg, #7a7a7a, #5a5a5a);
  }

  body.is-mobile .tp-a,
  body.is-mobile .tp-b{
    width: 55px; height: 55px; border-radius: 50%; font-size: 14px; font-weight: 900;
    background: linear-gradient(145deg, #dc3545, #b02a37);
    border-color: #8b1e2b; color: #fff;
  }

  body.is-mobile .tp-a:active,
  body.is-mobile .tp-b:active{
    background: linear-gradient(145deg, #b02a37, #8b1e2b);
  }

  /* Posicionamiento del D-pad */
  body.is-mobile .tp-up{ position: absolute; left: 50%; transform: translateX(-50%); top: 0; }
  body.is-mobile .tp-down{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; }
  body.is-mobile .tp-left{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
  body.is-mobile .tp-right{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

  /* Docks en móvil: diseño mejorado */
  body.is-mobile .cart-dock,
  body.is-mobile .album-dock{
    position: static; width: 100%; max-width: 100%; margin: 0;
    background: rgba(0,0,0,.5); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.2); border-radius: 15px;
    padding: 15px;
  }

  body.is-mobile .cart-dock h3,
  body.is-mobile .album-dock h3{
    margin: 0 0 12px; font-size: 16px; text-align: center;
  }

  body.is-mobile .kb-legend{
    text-align: center; margin-bottom: 15px; font-size: 12px;
  }

  body.is-mobile .cart-grid,
  body.is-mobile .album-grid{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
  }

  body.is-mobile .cart,
  body.is-mobile .album{
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 12px; border-radius: 12px; text-decoration: none;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
    transition: all 0.2s ease;
  }

  body.is-mobile .cart:hover,
  body.is-mobile .album:hover{
    transform: translateY(-2px); background: rgba(255,255,255,.15);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  }

  body.is-mobile .cart img,
  body.is-mobile .album img{
    width: 60px; height: 60px; border-radius: 8px;
  }

  body.is-mobile .cart span,
  body.is-mobile .album span{
    font-size: 11px; text-align: center; line-height: 1.2;
  }

  /* Winamp en móvil */
  body.is-mobile #winWin{
    height: 400px; border-radius: 15px; overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  }

  /* Taskbar en móvil: más compacta */
  body.is-mobile .taskbar.xp{
    height: 45px; padding: 0 10px;
  }

  body.is-mobile .start-btn{
    height: 32px; padding: 0 12px;
  }

  body.is-mobile .ql-btn{
    width: 30px; height: 30px;
  }

  body.is-mobile .task-btn{
     height: 32px; padding: 0 15px;
   }
 }

/* ===== AJUSTES ADICIONALES PARA MÓVIL ===== */
@media (max-width: 480px){
  /* Pantallas muy pequeñas - optimización para visibilidad completa */
  body.is-mobile .desktop{
    padding: 15px 0;
  }

  body.is-mobile .mobile-legend{
    padding: 15px; margin: 0 15px;
  }

  body.is-mobile .legend-content h2{
    font-size: 16px;
  }

  body.is-mobile .legend-content p{
    font-size: 13px;
  }

  body.is-mobile #winWin{
     height: 180px !important; margin: 0 15px;
   }

  /* TV AÚN MÁS GRANDE en pantallas pequeñas */
  body.is-mobile .tv-outer{
    width: 98vw; /* Casi pantalla completa */
    padding-top: 74%; /* Ajustar padding para mantener ratio */
  }

  body.is-mobile #touchBar{
     margin: 0 15px; padding: 12px; gap: 12px;
     background: linear-gradient(145deg, #d0d0d0, #a0a0a0);
     border: 2px solid #808080;
   }

  body.is-mobile .touch-dpad{
    width: 110px; height: 110px;
  }

  body.is-mobile .tp{
    width: 42px; height: 42px; font-size: 10px;
  }

  body.is-mobile .tp-a,
  body.is-mobile .tp-b{
    width: 50px; height: 50px;
  }

  body.is-mobile .tp-select,
  body.is-mobile .tp-start{
    width: 65px; height: 28px; font-size: 9px;
  }
}

@media (orientation: landscape) and (max-height: 600px){
  /* Modo paisaje en móvil */
  body.is-mobile .desktop{
    padding: 5px 5px 50px;
  }

  body.is-mobile #touchBar{
    margin: 10px auto 0; padding: 10px;
  }

  body.is-mobile #winWin{
    height: 300px;
  }
}

/* ===== MEJORAS DE ACCESIBILIDAD Y UX ===== */
@media (pointer: coarse){
  /* Dispositivos táctiles */
  .cart, .album{
    min-height: 44px; /* tamaño mínimo táctil recomendado */
  }

  body.is-mobile .tp{
    min-width: 44px; min-height: 44px;
  }
}

/* ===== PREVENIR ZOOM EN INPUTS (iOS) ===== */
@media screen and (-webkit-min-device-pixel-ratio:0){
  select, input[type="text"], input[type="email"], input[type="password"]{
    font-size: 16px;
  }
}

/* Ocultamos iconos del escritorio (se usan internamente) */
.icon{ display:none }

/* Utilidades */
.hidden{ display:none!important }