/* Configuración del fondo total de tu web */
body {
    background-color: #E2E2E2; /* Puedes cambiarlo por una imagen de fondo o patrón */
    font-family: 'Courier New', Courier, monospace;
    display: flex;
    justify-content: center;
    padding: 20px;
    margin: 0;
}

/* El lienzo de tu perfil */
.profile-web {
    width: 100%;
    max-width: 650px;
    display: flex;
    flex-direction: column;
    gap: 25px; /* Espaciado entre los bloques de tu boceto */
}

/* --- BLOQUE SUPERIOR (Perfil) --- */
.profile-header {
    background-color: #BDBDBD; /* El gris de tu cabecera */
    border-radius: 20px;       /* Esquinas redondeadas como en tu dibujo */
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 2px solid #A0A0A0;
}

.avatar-container {
    width: 120px;
    height: 120px;
    border-radius: 50%;       /* Hace la foto redonda */
    background-color: #87CEEB; /* Fondo celeste temporal cielo */
    overflow: hidden;
    border: 3px solid #FFF;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- SECCIÓN MEDIA (Música e Ilustración) --- */
.middle-section {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide en dos columnas perfectas */
    gap: 20px;
    align-items: center;
}

/* Lista de mini reproductores */
.playlist-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mini-player {
    background-color: #D6D6D6;
    border: 1px solid #B0B0B0;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
}

/* Zona del Tocadiscos pixel-art */
.turntable-zone {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-pixel-art {
    max-width: 100%;
    height: auto;
    image-rendering: pixelated; /* Mantiene los píxeles nítidos si usas pixel-art */
}

/* --- BLOQUE INFERIOR (Barra Start) --- */
.bottom-bar {
    background-color: #555555; /* Gris oscuro del boceto */
    display: flex;
    align-items: center;
    border: 2px solid #333;
    height: 60px;
}

.mini-thumbnail {
    width: 80px;
    height: 100%;
    background-color: #87CEEB; /* Mini preview celeste */
}

.start-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Botón interactivo estilo retro windows */
.start-btn {
    background-color: #C0C0C0;
    border-top: 2px solid #FFF;
    border-left: 2px solid #FFF;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    padding: 5px 25px;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}

.start-btn:active {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
}

/* 2. Regla general para todos los stickers */
.sticker {
    position: absolute;
    z-index: 10; /* Hace que queden SIEMPRE por encima de los bloques grises */
    pointer-events: none; /* Opcional: hace que puedas hacer click a través de ellos si tapan un botón */
    image-rendering: pixelated; /* Si usas GIFs pixel-art, se verán súper nítidos */
}

/* 3. ¡Coordenadas personalizadas para cada uno! */

/* Sticker 1: Flotando arriba a la derecha de la pantalla */
.s-arriba-derecha {
    top: 40px;
    right: 5%;
    width: 60px; /* Ajusta el tamaño de tu sticker aquí */
}

/* Sticker 2: Flotando a la izquierda, cerca del perfil */
.s-medio-izquierda {
    top: 250px;
    left: 8%;
    width: 80px;
    transform: rotate(-10deg); /* ¡Puedes rotarlos para que se vea más desordenado y lindo! */
}

/* Sticker 3: Justo encima o al lado de tu tocadiscos */
.s-cerca-tocadiscos {
    top: 420px;
    right: 15%;
    width: 50px;
}

/* Ejemplo de la cajita de texto o timbre flotante */
.stamp-retro {
    bottom: 90px;
    left: 40px;
    background: #4A593D; /* Verde oliva */
    color: white;
    padding: 5px 10px;
    border: 2px dashed #FFF; /* Borde punteado como estampilla */
    font-size: 11px;
}

}