/* ===================================================
   Archivo style.css
   =================================================== */

/* Colores: #1a1a1a (Negro), #f5f5f5 (Blanco Roto), #800020 (Rojo ) */

/* 1. Reset y Estilos Base */
body {
    margin: 0;
    padding: 0;
    /* ... otras propiedades ... */
    
    /* CAMBIA ESTO: Usa una imagen/textura */
    background-image: url('imagenes/goth things.jpeg'); /* ¡Nombre del archivo! */
    background-repeat: repeat; /* Para que la textura se repita y cubra todo */
    background-attachment: fixed; /* Opcional: Fija el fondo al hacer scroll */
    background-color: #1a1a1a; /* Color de respaldo si la imagen no carga */
    
    color: #f5f5f5; /* Texto Claro */
    line-height: 1.5;
    /* ... el resto de las propiedades ... */
}
    


/* 2. Contenedor Principal (main) - Ahora es el Flexbox*/
main.grid-layout {
    width: 90%;
    max-width: 1100px; /* Hacemos el contenedor más ancho para las dos columnas */
    margin: 30px auto; 
    padding: 0; /* Quitamos el padding aquí y lo ponemos en las columnas */
    background-color: transparent; /* Fondo Oscuro */
    border: none;
    box-shadow: none;
    
    /* PROPIEDADES DE DOS COLUMNAS (FLEXBOX) */
    display: flex; /* Habilita el diseño de columnas */
    gap: 20px; /* Espacio entre la barra lateral y el contenido */
    align-items: flex-start; /* Alinea las columnas arriba */
}

/* 3. Encabezado (header) - El banner */
header {
    /* 1. color de fondo de respaldo */
    background-color: #800000; /* Color de respaldo por si la imagen falla */
    
     /*Imagen del banner principal*/
    background-image: url('imagenes/☆.jpeg'); 
    
    /* 3. CONTROL DE LA IMAGEN */
    background-size: cover; /* Hace que la imagen cubra todo el header (usa 'contain' si quieres ver la imagen completa) */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */

    /* 4. ALTURA DEL BANNER */
    height: 150px; /* Define la altura que quieres que tenga tu banner */
    padding: 0; /* Quitamos el padding si definimos una altura fija */

    /* Esto es clave para que el texto (bite me) se vea bien sobre la imagen */
    color: #f5f5f5; /* Color del texto (puedes usar blanco, negro, o rojo) */
    text-shadow: 2px 2px #1a1a1a; /* Agrega sombra al texto para que resalte */
    
    text-align: center;
    margin: -30px -30px 20px -30px; 
    text-transform: uppercase; 
}

/* IMPORTANTE: Ajustamos el texto dentro */
header h1 {
    margin-top: 30px; /* Centra el texto verticalmente */
    font-size: 4em; 
    letter-spacing: 7px;
}

header h1 {
    margin: 0;
    font-size: 3em; 
    letter-spacing: 5px; 
    text-shadow: 2px 2px #000; 
}

.subtitle {
    margin-top: 5px;
    font-size: 1.2em;
}

/* 4. Estilo de Secciones y Títulos */
section h2 {
    color: #ff004c; 
    border-bottom: 3px dashed #444; /* Línea de puntos o guiones */
    padding-bottom: 5px;
    font-size: 1.8em;
    text-transform: uppercase;
}

/* 5. Estilo de Párrafos y Listas */
p, ul {
    font-size: 1.1em;
}

ul {
    list-style-type: ' ♱ '; 
}

/* 6. Estilo para el Perfil Fijo */
.perfil-info {
    display: flex; 
    gap: 30px; 
    align-items: center;
    padding: 15px;
    background-color: #333; 
    border-left: 5px solid #800000;
}

.avatar {
    width: 150px; 
    height: 150px;
    object-fit: cover; 
    border: 3px solid #f5f5f5; 
    transform: rotate(-2deg); /* Rótala un poco */
}

/* 7. Estilo para las Entradas del "Flog" */
.entrada {
    border: 1px solid #444; 
    padding: 15px;
    margin-bottom: 25px;
    background-color: #1a1a1a; 
    box-shadow: 2px 2px 0 0 #000; 
}

.entrada h3 {
    margin-top: 0;
    color: #f5f5f5;
    background-color: #800000; /* Título de la entrada con fondo rojo */
    display: inline-block; 
    padding: 2px 8px;
    transform: skew(-5deg); /* Texto inclinado */
}

.entrada .meta {
    font-size: 0.8em;
    color: #999;
    margin-top: -10px;
    margin-bottom: 15px;
    font-style: italic;
}

.comentarios {
    margin-top: 15px;
    border-top: 1px dashed #444;
    padding-top: 10px;
}

.comentarios a {
    margin-right: 15px;
    font-size: 0.9em;
    text-decoration: none; 
    color: #999;
}

.comentarios a:hover {
    color: #800000;
    background-color: transparent;
}

/* 8. Estilo de Enlaces (Hipervínculos) */
a {
    color: #800000; 
    text-decoration: underline wavy 2px; /* Subrayado ondulado para toque retro */
    text-decoration-color: #800000;
    font-weight: bold;
}

a:hover {
    color: #f5f5f5; 
    background-color: #800000; /* Fondo rojo al pasar el ratón */
    text-decoration: none; 
}


/* 9. Estilo del Pie de Página (footer) */
footer {
    text-align: center;
    padding: 15px 0;
    margin-top: 30px;
    font-size: 0.8em; 
    color: #999; 
    border-top: 1px dashed #444;
}

/* ===================================================
   Estructura de Doble Columna 
   =================================================== */

.sidebar {
    /* Anchura de la barra lateral (250px de ancho fijo) */
    width: 250px; 
    flex-shrink: 0; /* No permite que se encoja */
    
    /* Fondo y Bordes de la Columna (Colores) */
    background-color: #242424; [cite_start]/* Mismo color de fondo del main original [cite: 6] */
    padding: 20px;
    border: 3px solid #8B0000; [cite_start]/* Borde Rojo Punk [cite: 6, 7] */
    box-shadow: 5px 5px 0 0 #444; [cite_start]/* Sombra desplazada retro [cite: 8] */
}

.main-content {
    /* El contenido principal ocupa el espacio restante */
    flex-grow: 1; 
    
    /* Fondo y Bordes del Contenido Principal */
    background-color: #242424; 
    padding: 30px; 
    border: 3px solid #444; /* Borde más sutil para el contenido */
    box-shadow: 5px 5px 0 0 #1a1a1a; 
}

/* Ajustes para que los elementos dentro del sidebar se vean bien */
.sidebar section {
    padding: 0;
    margin-bottom: 25px;
}
.sidebar .perfil-info {
    flex-direction: column; /* Apila el avatar y la info en columna */
    align-items: center;
    text-align: center;
}
.sidebar .perfil-info ul {
    text-align: left; 
    margin-top: 15px;
}
.sidebar .avatar {
    transform: rotate(0deg); /* Quitamos la rotación para orden en el sidebar */
}

/* ===================================================
   Estilo para Reproductores Incrustados (SoundCloud)
   =================================================== */

/* Ajusta el iframe del reproductor dentro de la barra lateral */
.sidebar iframe {
    /* Quita cualquier margen o padding extraño del iframe */
    margin-top: 20px; 
    margin-bottom: 5px;
    
    /* Le da un borde para que coincida con tus otras cajas Rojo Oscuro */
    border: 3px solid #8B0000; 
    box-shadow: 3px 3px 0 0 #000; /* Sombra negra para que resalte */
}

/* Esconder el texto de atribución de SoundCloud si es necesario */
/* Esto elimina la línea de texto pequeño que da crédito a la canción */
.sidebar div[style*="font-size: 10px"] {
    display: none; 
}

/* ===================================================
   CORRECCIÓN: Asegurar fondo de INDEX.HTML
   =================================================== */

/* Esta regla asegura que la página principal (que no tiene clase)
   use solo el color negro (#1a1a1a) y NO tenga imagen de fondo.
   Si tenías una imagen sutil en index.html, DEBES moverla aquí. */
body:not(.music-page):not(.pokemon-page) {
    background-color: #1a1a1a; 
    background-image: none; /* ¡Aseguramos que no tenga imagen! */
}