/* style.css - Estilos completos para MARTINBLOX Retro */

/* === 1. Estilos Globales y Cabecera === */
body {
    background-color: #008080; 
    font-family: 'MS Sans Serif', Tahoma, Arial, sans-serif; 
    font-size: 14px;
    margin: 0;
    padding: 20px;
    color: #000;
}

/* --- Cabecera y Logo --- */
.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.logo-text {
    font-family: Arial Black, sans-serif; 
    font-size: 40px; 
    color: #FFFFFF;
    margin: 0;
    padding: 5px 10px;
    -webkit-text-stroke: 3px black;
    text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
}
.header-buttons {
    display: flex;
    gap: 10px;
}
.header-btn {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 16px;
    padding: 8px 15px;
    text-decoration: none;
    text-align: center;
    border: 3px solid #000;
    /* Efecto Biselado en los botones de la cabecera (opcional) */
    border-top: 3px solid #FFFFFF;
    border-left: 3px solid #FFFFFF;
}
.green-btn { background-color: #00FF00; }
.red-btn { background-color: #FF0000; }

/* === 2. Contenedor de Ventanas === */
.desktop {
    display: flex;
    gap: 15px;
}
.main-column {
    /* Cambiamos flex: 1; min-width: 60%; */
    flex: 2; /* Ocupará 2/3 del espacio disponible */
    display: flex;
    flex-direction: column;
    gap: 15px; 
}
.sidebar-column {
    flex: 1; /* DEBE ser 1 para que tome 1/3 del espacio junto a main-column */
    min-width: 280px; /* Ancho mínimo para que los botones de YouTube/Twitch quepan bien */
    max-width: 320px; /* Opcional: Para evitar que se estire demasiado en pantallas grandes */
    
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* === 3. Clases de Ventana y Efecto 3D === */
.window {
    background-color: #C0C0C0; 
    border: 1px solid #000; 
    /* Clave del efecto 3D: Sombra y Luz */
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    box-shadow: 1px 1px 0 #000; 
}
.large-window {
    height: 600px; /* Altura fija para hacer scroll */
    overflow-y: scroll;
}
.window-body {
    padding: 10px;
}

/* Barra de Título y Controles */
.title-bar {
    background-color: #000080;
    color: #FFFFFF;
    font-weight: bold;
    padding: 3px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.title-bar-text {
    /* Fondo para simular el look del original */
    background-color: #C0C0C0; 
    color: #000080; 
    padding: 0 5px;
    border: 1px inset #C0C0C0;
}
.red-title-text {
    background-color: #FF0000; /* Fondo rojo para la ventana de Redes Sociales */
    color: #FFFFFF;
}
.title-bar-controls {
    display: flex;
    gap: 2px;
}
/* Estilo de los botones de control (minimizar/cerrar) */
.win-btn {
    background-color: #C0C0C0;
    border: 1px solid #000; 
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* === 4. Elementos de Contenido === */
.image-container {
    text-align: center;
    margin: 15px 0;
}
.caption {
    font-size: 12px;
    font-style: italic;
    color: #444;
}

/* Botones de Redes Sociales */
.social-button {
    display: block;
    text-align: center;
    padding: 12px;
    margin-bottom: 5px;
    font-weight: bold;
    text-decoration: none;
    color: #FFFFFF;
}
.youtube-btn { background-color: #FF0000; border: 2px solid #000000; }
.tiktok-btn { background-color: #000000; border: 2px solid #FF0000; }
.twitch-btn { background-color: #9146FF; border: 2px solid #000000; }

/* Lista de Juegos (para simular lista de selección) */
.scrollable-list {
    background-color: #FFFFFF;
    height: 150px;
    overflow-y: scroll; 
    border: 1px inset #808080; 
    padding: 5px;
}
.list-item {
    padding: 2px 5px;
    cursor: pointer;
}
.selected {
    background-color: #000080;
    color: #FFFFFF;
}

/* Sección de Títulos (VIDEOS FAVORITOS) */
.section-title-box {
    background-color: #808080; /* Rojo */
    color: #FFFFFF;
    font-weight: bold;
    padding: 5px;
    text-align: center;
    margin-bottom: 10px;
}

/* Botones de Proyectos */
.project-buttons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    gap: 10px;
    margin-top: 10px;
}
.project-btn {
    padding: 8px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    color: #FFFFFF;
    /* Imitar el biselado de los botones */
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
}
.project-btn.blue { background-color: #0000FF; }
.project-btn.red { background-color: #FF0000; }
.project-btn.yellow { background-color: #FFFF00; color: #000; }
.project-btn.green { background-color: #00FF00; color: #000; }


/* === 5. Estilo de Barra de Desplazamiento (Avanzado) === */
/* NOTA: Esto solo funciona en navegadores basados en Chromium (Chrome, Edge, etc.) */

.scroll-red-thumb::-webkit-scrollbar { width: 15px; } /* Ancho de barra vertical */
.scroll-blue-thumb::-webkit-scrollbar { width: 15px; } 

/* Carril (fondo) de la barra de desplazamiento */
.large-window::-webkit-scrollbar-track,
.scrollable-list::-webkit-scrollbar-track {
    background-color: #C0C0C0;
    border: 1px solid #000;
}

/* Thumb (el cursor, la parte que se mueve) - ROJO para la ventana principal */
.scroll-red-thumb::-webkit-scrollbar-thumb {
    background-color: #FF0000; /* Rojo */
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

/* Thumb (el cursor) - AZUL para la lista de juegos */
.scroll-blue-thumb::-webkit-scrollbar-thumb {
    background-color: #0000FF; /* Azul */
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

/* === Estilo para la ventana de Bloc de Notas === */
.notepad-area {
    width: 100%;
    height: 150px; /* Tamaño fijo */
    box-sizing: border-box; /* Incluye padding/border en el ancho/alto */
    border: none; /* Quitamos los bordes por defecto del textarea */
    
    background-color: #FFFFFF; /* Fondo blanco (como el papel) */
    font-family: 'Courier New', monospace; /* Fuente monoespaciada clásica de terminal */
    font-size: 13px;
    padding: 5px;
    
    resize: none; /* No permite que el usuario cambie el tamaño */
    overflow-y: scroll; /* Añade barra de desplazamiento si hay mucho texto */
}

.desktop {
    display: flex;
    gap: 15px;
}

/* 🟢 NUEVOS ESTILOS PARA EL REPRODUCTOR DE MÚSICA */

.caja-pequena.reproductor-contenedor {
    background-color: #fffacd; /* Fondo de la caja */
    border: 2px solid black;
    margin: 20px auto;
    width: 90%; 
    max-width: 560px; /* Tamaño ideal para el reproductor de YouTube estándar */
    padding: 10px;
    text-align: center;
}

.reproductor-contenedor h3 {
    color: #ff66cc; /* Color del título */
    margin-top: 5px;
}

.reproductor-contenedor p {
    font-size: 14px;
    margin-bottom: 5px;
}