/* ==========================================================================
   COMPONENTES Y TARJETAS VISUALES (componentes.css)
   ========================================================================== */

/* --- SECCION QUE SIMULA CONTAR LAS PELICULAS LOL --- */
.movie-counter { text-align: center; }
.huge-number { font-size: 48px; font-weight: bold; color: #ff416c; margin: 10px 0; }
.bar-chart { display: flex; justify-content: space-around; align-items: flex-end; height: 100px; border-bottom: 2px solid #4a3b32; padding-bottom: 5px; }
.bar { width: 30px; background: #ffb3ba; border: 1px solid #ff416c; text-align: center; font-size: 12px; color: black; font-weight: bold; }

/* --- SECCION QUE TAMB SIMULA QUE ESCRIBIS ALGO PERO DE ANIME  --- */
.anime-review { border-bottom: 1px dashed #ffb3ba; padding: 8px 0; font-size: 13px; }

/* --- SECCION LOGS DE SALIDAS --- */
.outing-card { background: #fffdf0; border: 1px solid #ffe4e1; padding: 10px; margin-bottom: 10px; border-radius: 6px; }
.outing-card img { width: 100%; max-height: 150px; object-fit: cover; border-radius: 4px; }

/* --- TARJETAS DE PERFIL --- */
.profile-card { background: #fff; border: 2px solid #ffb3ba; padding: 10px; border-radius: 8px; cursor: pointer; margin-bottom: 10px; transition: all 0.3s ease; display: flex; align-items: center; gap: 10px; }
.card-content { display: flex; align-items: center; gap: 10px; width: 100%; }
.profile-pic { width: 65px; height: 65px; object-fit: cover; border-radius: 4px; border: 2px solid #ffb3ba; flex-shrink: 0; }

/* Hover general de cel y sopa */ 
.profile-card:hover { border-color: #ff4f73 !important; box-shadow: 0 0 10px rgba(255, 79, 115, 0.5) !important; }

.profile-info { display: flex; flex-direction: column; gap: 2px; }
.profile-info p { margin: 0; font-size: 14px; color: #4a3b32; }

/* --- INTERFERENCIA (GLITCH) EXCLUSIVA DE FLOR --- */
.profile-card.flor { position: relative; overflow: hidden; }
.profile-card.flor:hover { background-color: #000000 !important; border-color: #000000 !important; box-shadow: 0 0 15px rgba(0,0,0,0.8) !important; }
.profile-card.flor:hover .card-content { animation: interferencia 0.9s infinite; filter: brightness(0.6) contrast(1.2); }
.profile-card.flor:hover p, .profile-card.flor:hover small { color: #ffffff !important; }

.profile-card.flor:hover::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://www.transparenttextures.com/patterns/noise-lines.png');
    opacity: 0.3; pointer-events: none; z-index: 10;
    animation: estatica 0.2s steps(2) infinite;
}

/* --- SECCION DIARIO --- */
.diary-card { display: flex; background: #ffffff; border: 2px solid #b3f6b3; border-radius: 8px; padding: 15px; margin-bottom: 20px; gap: 15px; box-shadow: 3px 3px 0px #b3f6b3; }
.polaroid { background: white; padding: 8px 8px 15px 8px; border: 1px solid #ddd; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); transform: rotate(-2deg); width: 120px; flex-shrink: 0; }
.polaroid img { width: 120px; height: 120px; object-fit: cover; border: 1px solid #eee; }
.polaroid-caption { font-size: 10px; text-align: center; color: #666; margin-top: 8px; font-family: monospace; }
.diary-text h3 { margin: 0 0 8px 0; color: #4a3b32; font-size: 16px; }
.diary-chisme { font-size: 13px; color: #555; line-height: 1.4; margin: 0; }
.diary-link { text-decoration: none; color: inherit; display: block; cursor: pointer; }
.diary-link:hover .diary-card { border-color: #ff6b8b; box-shadow: 5px 5px 0px #ffb3ba; transform: translateY(-2px); transition: all 0.3s ease; }