body {
background-color: #10101c;
background-image: radial-gradient(circle, #1c1c33 1px, transparent 1px);
background-size: 16px 16px;
display: flex;
justify-content: center;
padding: 40px 10px;
min-height: 100vh;
overflow-x: hidden;
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><text y="16" font-size="16">✧</text></svg>') 10 10, auto;
}
.contenedor {
max-width: 650px;
width: 100%;
background: #fdf1f8;
border: 4px double #c2185b;
border-radius: 10px;
padding: 30px;
position: relative;
z-index: 2;
}
h1 {
font-family: 'Press Start 2P', cursive;
font-size: 20px;
color: #c2185b;
text-align: center;
}
.subtitulo {
text-align: center;
color: #7b5ea7;
font-family: 'VT323', monospace;
font-size: 22px;
}
h2 {
font-family: 'Press Start 2P', cursive;
font-size: 13px;
color: #7b5ea7;
margin-top: 20px;
}
p, li {
font-family: 'VT323', monospace;
font-size: 19px;
color: #2b2b2b;
}
nav {
text-align: center;
font-family: 'VT323', monospace;
font-size: 20px;
}
nav a {
color: #c2185b;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
hr {
border: none;
border-top: 2px dotted #c2185b;
margin: 16px 0;
}
.footer {
text-align: center;
font-size: 14px;
color: #999;
}

/* ---------- marquee retro ---------- */
.marquee-caja {
overflow: hidden;
white-space: nowrap;
background: #2b1330;
border: 2px inset #c2185b;
border-radius: 6px;
margin: 14px 0;
padding: 6px 0;
}
.marquee-texto {
display: inline-block;
font-family: 'VT323', monospace;
font-size: 17px;
color: #ffd1ea;
padding-left: 100%;
margin: 0;
animation: desfilar 18s linear infinite;
}
@keyframes desfilar {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}

/* ---------- diario y comentarios (formularios compartidos) ---------- */
.entradas {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
.entrada {
background: #fff7fb;
border: 2px dashed #c2185b;
border-radius: 8px;
padding: 14px 16px;
animation: aparecer 0.3s ease;
}
.entrada-fecha {
font-family: 'VT323', monospace;
font-size: 15px;
color: #7b5ea7;
letter-spacing: 1px;
margin: 0 0 4px 0;
}
.entrada-titulo {
font-family: 'Press Start 2P', cursive;
font-size: 12px;
color: #c2185b;
margin: 0 0 8px 0;
}
.entrada p:last-child {
margin: 0;
}

.comentarios-intro {
color: #7b5ea7;
}
.form-comentario {
display: flex;
flex-direction: column;
gap: 10px;
background: #fff7fb;
border: 2px solid #c2185b;
border-radius: 8px;
padding: 16px;
margin-bottom: 18px;
}
.form-comentario input,
.form-comentario textarea {
font-family: 'VT323', monospace;
font-size: 18px;
background: #fdf1f8;
border: 2px dotted #7b5ea7;
border-radius: 6px;
padding: 8px 10px;
color: #2b2b2b;
resize: vertical;
}
.form-comentario input:focus,
.form-comentario textarea:focus {
outline: 2px solid #c2185b;
}
.form-comentario textarea {
min-height: 70px;
}
.form-comentario button {
align-self: flex-end;
font-family: 'Press Start 2P', cursive;
font-size: 11px;
background: #c2185b;
color: #fdf1f8;
border: none;
border-radius: 6px;
padding: 10px 16px;
cursor: pointer;
transition: transform 0.15s ease, background 0.15s ease;
}
.form-comentario button:hover {
background: #7b5ea7;
transform: scale(1.05);
}
.lista-comentarios {
display: flex;
flex-direction: column;
gap: 10px;
}
.comentario {
background: #fdf1f8;
border-left: 4px solid #c2185b;
border-radius: 4px;
padding: 10px 14px;
animation: aparecer 0.3s ease;
}
@keyframes aparecer {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.comentario-nombre {
font-family: 'VT323', monospace;
font-size: 18px;
color: #c2185b;
margin: 0;
}
.comentario-fecha {
font-family: 'VT323', monospace;
font-size: 13px;
color: #999;
margin: 0 0 4px 0;
}
.comentario-texto {
margin: 0;
}
.sin-comentarios, .sin-entradas {
text-align: center;
color: #999;
font-family: 'VT323', monospace;
font-size: 18px;
}

/* ---------- badges 88x31 estilo geocities ---------- */
.badges-fila {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 18px 0 6px 0;
}
.badge-88 {
width: 88px;
height: 31px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: 'VT323', monospace;
font-size: 11px;
line-height: 1.1;
color: #fdf1f8;
background: linear-gradient(135deg, #c2185b, #7b5ea7);
border: 1px solid #2b2b2b;
box-shadow: 1px 1px 0 #2b2b2b;
}

/* ---------- contador de visitas ---------- */
.contador-caja {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
margin: 20px 0;
}
.contador-etiqueta {
font-family: 'VT323', monospace;
font-size: 15px;
color: #7b5ea7;
}
.contador-digitos {
font-family: 'VT323', monospace;
font-size: 26px;
letter-spacing: 4px;
background: #10101c;
color: #ff5fa2;
border: 2px inset #c2185b;
border-radius: 4px;
padding: 4px 12px;
text-shadow: 0 0 6px #ff5fa2;
}

/* ---------- sidebars laterales ---------- */
.sidebar {
position: fixed;
top: 50%;
transform: translateY(-50%);
width: 170px;
z-index: 1;
}
.sidebar-izq { left: 1.5%; }
.sidebar-der { right: 1.5%; }

.panel-lateral {
background: #fdf1f8;
border: 3px double #c2185b;
border-radius: 10px;
padding: 14px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
box-shadow: 4px 4px 0 rgba(0,0,0,0.35);
}
.panel-titulo {
font-family: 'Press Start 2P', cursive;
font-size: 9px;
color: #7b5ea7;
text-align: center;
margin: 6px 0 2px 0;
}

/* scrapbook de stickers */
.scrapbook {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.sticker {
position: relative;
background: #fff7fb;
border: 1px solid #c2185b;
border-radius: 4px;
width: 60px;
height: 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}
.sticker span {
font-family: 'VT323', monospace;
font-size: 11px;
color: #7b5ea7;
margin-top: 2px;
}
.sticker::before {
content: "";
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%) rotate(-3deg);
width: 26px;
height: 10px;
background: rgba(194, 24, 91, 0.35);
}
.sticker-1 { transform: rotate(-6deg); }
.sticker-2 { transform: rotate(4deg); }
.sticker-3 { transform: rotate(-3deg); }
.sticker-4 { transform: rotate(5deg); }
.sticker-5 { transform: rotate(-4deg); grid-column: span 2; margin: 0 auto; }

/* mascota pixel */
.mascota-titulo { margin-top: 4px; }
.mascota-caja {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.mascota-pixel {
width: 44px;
height: 44px;
background: #2b2b2b;
border-radius: 6px;
position: relative;
animation: rebotar 2.2s ease-in-out infinite;
}
.mascota-pixel::before {
content: "🐱";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
}
.mascota-globo {
font-family: 'VT323', monospace;
font-size: 13px;
color: #7b5ea7;
background: #fff7fb;
border: 1px dotted #c2185b;
border-radius: 8px;
padding: 2px 8px;
margin: 0;
}
@keyframes rebotar {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}

/* reproductor de música */
.reproductor {
width: 100%;
text-align: center;
}
.reproductor-cancion {
font-family: 'VT323', monospace;
font-size: 13px;
color: #2b2b2b;
margin: 0 0 6px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ecualizador {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 3px;
height: 26px;
}
.ecualizador span {
width: 5px;
background: linear-gradient(#c2185b, #7b5ea7);
border-radius: 2px;
animation: rebote-barra 0.9s ease-in-out infinite;
}
.ecualizador span:nth-child(1) { height: 40%; animation-delay: 0s; }
.ecualizador span:nth-child(2) { height: 80%; animation-delay: 0.15s; }
.ecualizador span:nth-child(3) { height: 55%; animation-delay: 0.3s; }
.ecualizador span:nth-child(4) { height: 90%; animation-delay: 0.45s; }
.ecualizador span:nth-child(5) { height: 65%; animation-delay: 0.6s; }
@keyframes rebote-barra {
0%, 100% { transform: scaleY(0.4); }
50% { transform: scaleY(1); }
}

/* humor de hoy */
.humor-texto {
font-family: 'VT323', monospace;
font-size: 15px;
color: #c2185b;
margin: 0;
}

/* mini calendario */
.mini-calendario {
width: 56px;
border: 2px solid #c2185b;
border-radius: 6px;
overflow: hidden;
text-align: center;
}
.mini-cal-mes {
background: #c2185b;
color: #fdf1f8;
font-family: 'Press Start 2P', cursive;
font-size: 9px;
margin: 0;
padding: 3px 0;
}
.mini-cal-dia {
font-family: 'VT323', monospace;
font-size: 24px;
color: #2b2b2b;
margin: 0;
padding: 2px 0;
}

/* blinkie */
.blinkie {
font-family: 'VT323', monospace;
font-size: 13px;
color: #ff5fa2;
background: #10101c;
border: 1px solid #c2185b;
border-radius: 4px;
padding: 3px 8px;
animation: parpadear 1s steps(1) infinite;
}
@keyframes parpadear {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0.15; }
}

/* ---------- chispas del cursor ---------- */
.chispa {
position: fixed;
pointer-events: none;
font-size: 14px;
color: #ff5fa2;
z-index: 999;
animation: chispear 0.6s ease-out forwards;
}
@keyframes chispear {
0% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(-18px) scale(0.4); }
}

@media (max-width: 1150px) {
.sidebar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
.marquee-texto, .entrada, .comentario, .mascota-pixel, .ecualizador span, .blinkie { animation: none; }
}