/* =======================================================
   REMODELACIÓN COMPLETA: GATO DETECTIVE NOIR (Marrón & Negro)
   ======================================================= */

/* --- 1. VARIABLES DE ESTILO (Colores de Oficina Vintage) --- */
:root {
    /* Tu nueva imagen de fondo: Oficina de detective */
    --bg-image: url('https://i.pinimg.com/control1/736x/f1/d7/20/f1d7208dce566f07c975e9dab287b9a8.jpg');
    --bg-color: #120c06;                    /* Marrón casi negro de respaldo */
    
    /* Paneles y Carpetas (Efecto cuero y papel viejo) */
    --container-bg: rgba(20, 15, 10, 0.93); /* Negro marrón súper oscuro y opaco */
    --panel-bg: rgba(35, 25, 18, 0.6);      /* Marrón tabaco semi-transparente para artículos */
    --border-color: #5c4033;                /* Marrón cuero para bordes */
    
    /* Texto y Acentos (Tinta sepia y luz ámbar) */
    --text-primary: #d4a373;                /* Ámbar / Sepia claro para títulos */
    --text-secondary: #e6dfd3;              /* Crema / Papel envejecido para lectura fácil */
    --accent-color: #ffb703;                /* Oro / Luz de lámpara para resaltados */
}

/* --- 2. ESTILOS BASE Y FONDO --- */
* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 20px;
    background-color: var(--bg-color);
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;          /* El fondo de la oficina se queda quieto */
    background-repeat: no-repeat;
    
    font-family: 'Courier New', Courier, monospace; /* Ideal porque simula una máquina de escribir clásica */
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 15px;
    
    /* 🐾 TU CURSOR DE PATITA DE GATO (ACTUALIZADO) 🐾 */
    cursor: url('patita1.png'), auto;
}

/* --- 3. CONTENEDOR PRINCIPAL (El "Expediente") --- */
#main-container {
    max-width: 960px;
    margin: 0 auto;
    background: var(--container-bg);
    border: 2px solid var(--border-color);
    box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.8); /* Sombra pesada de estilo clásico */
    padding: 20px;
    backdrop-filter: blur(4px);
}

/* --- 4. ENCABEZADO --- */
header {
    text-align: center;
    border-bottom: 2px dashed var(--border-color); /* Línea discontinua estilo informe */
    padding-bottom: 15px;
    margin-bottom: 15px;
}

header h1 {
    margin: 0;
    font-size: 2.5rem;
    color: var(--text-primary);
    text-shadow: 1px 1px 2px #000;
    letter-spacing: 1px;
}

header p {
    margin: 5px 0 0 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    opacity: 0.7;
    font-style: italic;
}

/* --- 5. NAVEGACIÓN (Estilo Máquina de Escribir / Índices) --- */
nav {
    background: transparent;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 25px;
    padding: 5px 0;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}

nav ul li {
    display: flex;
    align-items: center;
}

/* Separador clásico [ / ] */
nav ul li:not(:last-child)::after {
    content: "/";
    color: var(--border-color);
    margin-left: 15px;
}

nav ul li a {
    display: inline-block;
    padding: 8px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 1px;
    position: relative;
    transition: color 0.3s ease;
    
    /* 🐾 Cursor de patita apuntando en los enlaces (ACTUALIZADO) 🐾 */
    cursor: url('patita1.png'), pointer;
}

/* Estilo al pasar el ratón o pestaña activa */
nav ul li a:hover, nav ul li a.active {
    color: var(--accent-color);
    background: transparent;
    text-shadow: 0 0 5px rgba(255, 183, 3, 0.4);
}

/* Línea de tinta que se dibuja debajo */
nav ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 2px;
    left: 0;
    background-color: var(--accent-color);
    transition: width 0.3s ease;
}

nav ul li a:hover::after, nav ul li a.active::after {
    width: 100%;
}

/* --- 6. LAYOUT DE CONTENIDO (Casos e Informes) --- */
#content-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Volvemos al diseño original de dos bloques */
    gap: 20px;
}

/* --- CLASE ESPECIAL PARA LAS PÁGINAS CON LIBRO (3 columnas) --- */
.layout-tres-columnas {
    grid-template-columns: 1fr 2fr 1fr !important;
}

main section.feed-entry {
    background: var(--panel-bg);
    border: 1px solid rgba(92, 64, 51, 0.4);
    padding: 15px;
    margin-bottom: 20px;
}

main section.feed-entry h2 {
    margin: 0 0 5px 0;
    color: var(--text-primary);
    font-size: 1.3rem;
}

main section.feed-entry .meta-data {
    font-size: 0.8rem;
    color: #8c7355;
    margin-bottom: 10px;
}

.entry-content ul {
    margin-top: 10px;
    padding-left: 20px;
}

.highlight {
    color: var(--accent-color);
    font-weight: bold;
}

/* Barra Lateral (Archivos del Caso) */
aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-box {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    padding: 15px;
}

.sidebar-box h3 {
    margin: 0 0 10px 0;
    color: var(--text-primary);
    font-size: 1.1rem;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.profile-placeholder {
    width: 80px;
    height: 80px;
    border: 1px solid var(--border-color);
    background: rgba(0,0,0,0.3);
    margin: 0 auto 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border-color);
    font-size: 0.8rem;
}

.status { margin: 5px 0; font-size: 0.9rem; }
.online { color: #52b788; font-weight: bold; } /* Verde apagado más vintage */

/* --- 7. PIE DE PÁGINA Y OTROS ELEMENTOS CLICABLES --- */
footer {
    text-align: center;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
    margin-top: 20px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    opacity: 0.5;
}

footer a {
    color: var(--text-primary);
    text-decoration: none;
    /* 🐾 La patita también para el pie de página (ACTUALIZADO) 🐾 */
    cursor: url('patita1.png'), pointer;
}

footer a:hover {
    text-decoration: underline;
}

/* Forzar cursor de patita en cualquier botón o iframe que añadas (ACTUALIZADO) */
button, iframe {
    cursor: url('patita1.png'), auto;
}

/* --- 8. DISEÑO RESPONSIVO --- */
@media (max-width: 768px) {
    body { padding: 10px; }
    #main-container { padding: 10px; }
    
    /* Hace que las 3 columnas se vuelvan 1 sola fila en móviles */
    #content-wrapper { grid-template-columns: 1fr; } 
    
    nav ul { flex-direction: column; gap: 5px; }
    nav ul li::after { display: none !important; }
    nav ul li a { width: 100%; text-align: center; }
}
/* Forzar que las imágenes dentro de los enlaces también tengan la patita */
a img {
    cursor: url('patita1.png'), pointer !important;
}

/* =======================================================
   BIBLIOTECA ESTILO COLLAGE DE DETECTIVE
   ======================================================= */

/* El panel central ahora será transparente para ver el libro */
.main-biblioteca {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* El cuaderno abierto que sirve de base */
.cuaderno-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* Imagen del libro de fondo */
.libro-fondo {
    width: 100%;
    display: block;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.7);
}

/* Estilo base para CUALQUIER elemento/foto que flote encima del libro */
.elemento-collage {
    position: absolute;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 2;
}

/* Fotos que Sí son enlaces secretos (Hobbys) */
.enlace-secreto {
    cursor: url('patita1.png'), pointer !important;
}

/* Fotos decorativas normales (No se puede pinchar, solo decoran) */
.foto-decorativa {
    pointer-events: none; /* El ratón las ignora */
}

/* Efecto cuando pasas la patita por encima de una foto secreta */
.enlace-secreto:hover {
    transform: scale(1.1) rotate(0deg) !important; /* Se agranda y se endereza */
    box-shadow: 0 10px 20px rgba(255, 183, 3, 0.4); /* Brilla con luz ámbar */
    z-index: 10; /* Se pone por encima de todo */
}