@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=VT323&display=swap');

/* --- 1. CURSORES --- */
* { cursor: url('mew.png') 0 0, auto !important; }
a, button, .bling-btn, .post-btn, .start-pill, input, textarea, select, .ipod-glow, .stamp, marquee {
    cursor: url('mew2.png') 0 0, pointer !important;
}

html { image-rendering: pixelated; }

/* --- 2. BASE --- */
body {
    background: #ffcce6;
    background-image: radial-gradient(#ff66b2 1px, transparent 1px);
    background-size: 25px 25px;
    margin: 0;
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    padding-bottom: 60px;
}

/* --- 3. LAYOUT --- */
.hero-marquee {
    background: #000; color: #ff0099; padding: 7px 0;
    font-family: 'VT323', monospace; font-size: 18px; border-bottom: 2px solid #ff0099;
}

.main-layout {
    display: grid; grid-template-columns: 240px 1fr 260px; gap: 15px;
    max-width: 1200px; margin: 20px auto; padding: 0 15px;
}

.glass-box { background: #fff; border: 2px solid #ff0099; border-radius: 12px; margin-bottom: 15px; overflow: hidden; }
.box-header { background: #ff0099; color: white; padding: 6px; font-size: 11px; font-weight: bold; text-align: center; }
.box-content { padding: 12px; }
.center { text-align: center; }

/* --- 4. PERFIL --- */
.profile-frame {
    width: 180px; height: 180px; margin: auto 10px;
    border: 3px solid #fff; outline: 1px solid #ff0099;
    overflow: hidden; display: flex; align-items: center; justify-content: center; background: #000;
}
.profile-pic { width: 100%; height: 100%; object-fit: cover; display: block; }

.status-badge {
    background: #fff0f5; color: #ff0099; padding: 3px 10px;
    border-radius: 20px; font-size: 10px; font-weight: bold;
    border: 1px solid #ff0099; margin: 10px 0; display: inline-block;
}

/* --- 5. BOTONES Y GALERÍA --- */
.bling-btn, .post-btn {
    background: #fff; border: 2px solid #ff0099; border-radius: 8px;
    font-size: 10px; font-weight: bold; padding: 6px; color: #ff0099; width: 100%;
}
.photo-flex { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.polaroid-frame { background: white; padding: 5px; border: 1px solid #ff99cc; }
.photo-crop { width: 100%; aspect-ratio: 4/3; overflow: hidden; }
.photo-crop img { width: 100%; height: 100%; object-fit: cover; }

.ipod-glow { width: 100%; filter: drop-shadow(0 0 5px #ff0099); transition: 0.3s; }

/* --- 6. CAJAS DE TEXTO (DIFERENCIADAS) --- */
.comments-scroll { 
    max-height: 200px; overflow-y: auto; font-size: 11px;  
    border: 1px inset #eee; padding: 5px; background: #fafafa;
}

/* DIARIO: SIN ESPACIO SUPERIOR EXCESIVO */
.journal-scroll { 
    max-height: 200px; overflow-y: auto; font-size: 11px;  
    border: 1px inset #eee; 
    padding: 8px 10px; /* Reducido padding superior */
    background: #fafafa;
    white-space: pre-wrap; 
    word-wrap: break-word;
}

/* Estilo para el post individual */
.post-item {
    margin-bottom: 15px; 
    border-bottom: 1px dashed #ff99cc; 
    padding-bottom: 10px;
}

/* ESTA REGLA QUITA EL HUECO ARRIBA DEL TODO */
.post-item:first-of-type {
    margin-top: -2px; 
}

.post-item b {
    display: block;
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 3px;
    line-height: 1; /* Título más pegado */
}

/* --- 7. SISTEMA --- */
.bar-system {
    position: fixed; bottom: 0; width: 100%; height: 40px; background: #f0f0f0;
    border-top: 2px solid #ff0099; display: flex; align-items: center; padding: 0 20px; box-sizing: border-box;
}
.start-pill { background: #ff0099; color: white; border: none; border-radius: 4px; padding: 4px 15px; font-weight: bold; }
.tray-info { margin-left: auto; color: #ff0099; font-family: 'VT323', monospace; }

input, textarea { width: 100%; border: 1px solid #ff99cc; border-radius: 4px; padding: 5px; margin-bottom: 5px; box-sizing: border-box; }
.neon-bar { width: 100%; height: 10px; background: #eee; border-radius: 10px; overflow: hidden; }
.neon-fill { width: 85%; height: 100%; background: #ff0099; }