/* Layout General de Revista Digital */
body {
    background-color: #050505;
    color: #fff;
    font-family: 'Tahoma', sans-serif;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
}

.canvas { max-width: 1200px; width: 100%; }

.magazine-header {
    text-align: center;
    border-bottom: 3px double #fff;
    margin-bottom: 40px;
    padding-bottom: 10px;
}

.magazine-header h1 { font-size: 3.5rem; margin: 0; letter-spacing: -2px; }

/* Sistema de Columnas (Para que no se vea todo hacia abajo) */
.grid-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.col-left { flex: 1; min-width: 280px; }
.col-center { flex: 1.5; min-width: 350px; }
.col-right { flex: 1; min-width: 280px; }

/* Ventanas Estilo Pinterest Pop-up */
.window {
    background: #111;
    border: 1px solid #fff;
    margin-bottom: 25px;
    box-shadow: 8px 8px 0px rgba(255,255,255,0.05);
}

.window-header {
    background: #fff;
    color: #000;
    padding: 6px 12px;
    font-weight: bold;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.window-content { padding: 18px; line-height: 1.6; font-size: 0.9rem; }

/* iPod Classic Detallado */
.ipod-body { background: #d1d1d1; border-radius: 0 0 10px 10px; padding: 15px; }
.ipod-screen { background: #eef2f3; color: #333; padding: 10px; border: 2px solid #444; height: 150px; display: flex; flex-direction: column; }
.ipod-top-bar { display: flex; justify-content: space-between; font-size: 0.6rem; font-weight: bold; border-bottom: 1px solid #bbb; margin-bottom: 10px; }
.ipod-main-info { display: flex; gap: 12px; }
.album-art { width: 70px; height: 70px; border: 1px solid #777; box-shadow: 2px 2px 4px rgba(0,0,0,0.2); }
.song-title { font-weight: bold; margin: 0; font-size: 0.8rem; color: #000; }
.artist-name { font-size: 0.7rem; color: #555; }
.ipod-progress-container { background: #ccc; height: 10px; margin-top: 15px; border: 1px solid #999; }
.ipod-progress-bar { background: linear-gradient(180deg, #3d77e6 0%, #0055ff 100%); height: 100%; }
.ipod-timers { display: flex; justify-content: space-between; font-size: 0.6rem; margin-top: 4px; font-weight: bold; }
.click-wheel { width: 110px; height: 110px; background: #fff; border-radius: 50%; margin: 15px auto 5px; position: relative; border: 1px solid #ccc; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.wheel-text { position: absolute; width: 100%; text-align: center; font-size: 0.6rem; font-weight: bold; color: #ccc; top: 10px; }
.center-button { width: 40px; height: 40px; background: #e0e0e0; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid #ccc; }

/* MSN Messenger con Zumbido */
.messenger-chat { border: 2px solid #6297ce !important; animation: nudge 0.5s infinite; animation-play-state: paused; }
.messenger-chat:hover { animation-play-state: running; }
.msn-blue { background: linear-gradient(180deg, #87b2e2 0%, #6297ce 100%) !important; color: white !important; display: flex; align-items: center; gap: 8px; }
.user-status-icon.online { width: 10px; height: 10px; background: #31ff31; border-radius: 50%; border: 1px solid #004d00; }
.msn-content { background: #fff; color: #333; display: flex; padding: 12px; gap: 10px; }
.chat-msg { background: #f0f4f9; padding: 8px; border: 1px solid #d0dceb; border-radius: 5px; font-style: italic; }
.msn-avatar { width: 60px; height: 60px; border: 1px solid #ccc; background: #eee; }
.msn-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nudge-btn { color: #ff6600; font-size: 0.6rem; font-weight: bold; text-align: center; cursor: pointer; text-decoration: underline; padding-bottom: 5px; }

/* Animación de Zumbido */
@keyframes nudge {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(3px, -3px); }
    50% { transform: translate(-3px, 3px); }
    75% { transform: translate(3px, 3px); }
}

/* Otros detalles */
.video-placeholder { border: 1px dashed #fff; height: 180px; display: flex; align-items: center; justify-content: center; background: #222; }
ul { list-style: '★ '; padding-left: 20px; }
li { margin-bottom: 12px; }

/* Responsivo para móviles */
@media (max-width: 950px) {
    .grid-layout { flex-direction: column; }
    .col-left, .col-center, .col-right { width: 100%; }
}

a {
  text-decoration: none; /* Quita el subrayado */
  color: inherit;       /* Mantiene el color del texto original */
  cursor: pointer;
}

a:hover {
  text-decoration: underline; /* Solo se subraya cuando pasas el mouse */
  color: #ff00ff;             /* Opcional: cambia a un color rosa o azul msn al pasar el mouse */
}