/* --- ESTILOS PARA EL REPRODUCTOR PLYR --- */
:root {
  --plyr-color-main: #4f46e5; /* Color índigo de tu marca */
}

/* --- ESTILOS GENERALES Y DE PROTECCIÓN --- */
body { font-family: 'Inter', sans-serif; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
.locked-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background-color: rgba(0, 0, 0, 0.6); z-index: 10; pointer-events: none; }
.fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


.like-button.text-red-500 svg { 
    transform: scale(1.1); 
    transition: transform 0.2s ease; 
}

/* --- ESTILOS PARA SCROLLBAR PERSONALIZADO --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1f2937; }
::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #6366f1; }

/* --- ESTILOS PARA EL CARRUSEL DE PUBLICACIONES --- */
.post-carousel { overflow: hidden; }
.carousel-track { display: flex; transition: transform 0.3s ease-in-out; }
.carousel-item { flex: 0 0 100%; width: 100%; }
.carousel-dots .dot { width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); cursor: pointer; transition: background-color 0.3s; }
.carousel-dots .dot.active { background-color: white; }

/* --- NUEVOS ESTILOS PARA MARCA DE AGUA --- */
/* --- ESTILOS MEJORADOS PARA MARCA DE AGUA (CENTRO SUPERIOR, MÁS TRANSPARENTE) --- */
.watermark-overlay { 
    position: absolute; 
    top: 0;                         /* Pega arriba */
    left: 50%;                      /* <<< Mueve el inicio al centro */
    transform: translateX(-50%);    /* <<< Centra el elemento horizontalmente */
    /* Se quita 'right: 0;' */
    background-color: transparent;  /* Sin fondo */
    padding: 8px;                   /* Mantiene el padding pequeño */
    pointer-events: none; 
    z-index: 20;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5); /* <<< Texto MÁS transparente (0.5 = 50%) */
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- ESTILOS PARA OCULTAR SCROLLBAR DE FILTROS EN MÓVIL --- */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* --- ESTILOS PARA EL CARGADOR (SPINNER) --- */
.loader-spinner {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 6px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* --- ESTILOS PARA LA NUEVA VISTA DE GALERÍA --- */
.gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0.5rem; /* 8px */
  aspect-ratio: 1 / 1; /* Esto hace que el contenedor sea siempre un cuadrado */
  background-color: #374151; /* bg-gray-700 */
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Asegura que la imagen cubra el cuadrado sin deformarse */
  transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-image {
  transform: scale(1.05); /* Efecto de zoom sutil al pasar el mouse */
}

/* Overlay para contenido bloqueado */
.gallery-overlay {
  position: absolute;
  inset: 0; /* Cubre todo el contenedor (top, right, bottom, left: 0) */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Icono para videos */
.gallery-icon {
  position: absolute;
  top: 0.5rem; /* 8px */
  right: 0.5rem; /* 8px */
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0.25rem; /* 4px */
  border-radius: 9999px; /* rounded-full */
}

/* --- CORRECCIÓN PARA MODAL EN MÓVILES --- */
#lightbox-modal {
  height: 100vh; /* Respaldo para navegadores antiguos */
  height: 100dvh; /* Altura dinámica que se ajusta a las barras del navegador */
}




/* --- INICIO ESTILOS HALLOWEEN - PARTÍCULAS --- */
.halloween-particle {
  position: fixed; /* Posición fija para que caiga sobre todo */
  top: -20px; /* Empezar justo fuera de la pantalla arriba */
  width: 15px; /* Tamaño pequeño */
  height: 15px;
  pointer-events: none; /* Que no se pueda hacer clic en ellas */
  z-index: 9999; /* Asegurar que esté encima de casi todo */
  animation: fall linear forwards; /* Nombre de la animación */
  opacity: 0.8; /* Ligeramente transparentes */
}

/* <<< AÑADIR ESTA REGLA >>> */
body.lightbox-is-open .halloween-particle {
  z-index: 40; /* Z-index más bajo que el modal (z-50) cuando está abierto */
}
/* <<< FIN REGLA AÑADIDA >>> */


/* Usamos el SVG simple de calabaza directamente en CSS */
/* Modificación para usar SVG con colores como fondo */
.halloween-particle::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  /* Ya no usamos background-color ni mask-* */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3C!-- Cuerpo Naranja --%3E%3Cpath d='M85,40 C85,60 70,80 50,80 C30,80 15,60 15,40 C15,20 30,15 50,15 C70,15 85,20 85,40 Z' fill='%23F97316'/%3E%3C!-- Tallo Verde --%3E%3Cpath d='M45,15 C45,10 55,10 55,15 L50,25 Z' fill='%2334D399'/%3E%3C!-- Ojos Negros --%3E%3Cpath d='M35,45 L45,40 L35,35 Z' fill='%231F2937'/%3E%3Cpath d='M65,45 L55,40 L65,35 Z' fill='%231F2937'/%3E%3C!-- Boca Negra --%3E%3Cpath d='M30,60 L40,65 L50,60 L60,65 L70,60 L60,55 L40,55 Z' fill='%231F2937'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


@keyframes fall {
  to {
    transform: translateY(105vh); /* Caer hasta abajo + un poco más */
    opacity: 0; /* Desvanecer al final */
  }
}
/* --- FIN ESTILOS HALLOWEEN - PARTÍCULAS --- */


/* ===== MEJORAS VISUALES RECOMENDADAS ===== */

/* 1. Efecto de Zoom en la media del feed (vista de lista) */
/* Hacemos que el contenedor del carrusel oculte lo que se desborde */
article .post-carousel {
  overflow: hidden;
  /* Redondeamos las esquinas si la media es lo primero que se ve */
  /* border-top-left-radius: 0.75rem; */ /* Opcional, si tu diseño lo requiere */
  /* border-top-right-radius: 0.75rem; */ /* Opcional, si tu diseño lo requiere */
}

/* Aplicamos la transición a la imagen/video dentro del carrusel */
article .post-carousel .carousel-item img,
article .post-carousel .carousel-item video {
  transition: transform 0.3s ease-in-out;
}

/* Al pasar el ratón sobre el bloque que contiene la media, hacemos zoom */
article .post-carousel .carousel-item .block:hover img,
article .post-carousel .carousel-item .block:hover video {
  transform: scale(1.05); /* Ajusta este valor si quieres más o menos zoom */
}


/* 2. Botones de interacción más "vivos" */
.like-button, .comment-toggle-btn, .favorite-button {
  /* Añadimos una transición suave */
  transition: transform 0.2s ease, filter 0.2s ease;
}

.like-button:hover, 
.comment-toggle-btn:hover, 
.favorite-button:hover {
  /* Hacemos el icono un 10% más grande */
  transform: scale(1.1);
  /* Lo hacemos un poco más brillante */
  filter: brightness(1.25);
}


/* 3. Sombra y "levantamiento" del post al pasar el ratón */
article {
  /* Preparamos la tarjeta para la transición */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

article:hover {
  /* La "levantamos" 2px */
  transform: translateY(-2px);
  /* Le damos una sombra más pronunciada y difuminada */
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
}

/* === ANIMACIONES DE SCROLL === */
.scroll-trigger {
    opacity: 0;
    transform: translateY(30px); /* Empieza 30px más abajo */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-trigger.is-visible {
    opacity: 1;
    transform: translateY(0); /* Vuelve a su posición original */
}


/* === FILTROS ESTILO HISTORIAS (VERSIÓN FINAL: TEXTO COMPLETO) === */
.filters-container {
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, black 95%, transparent 100%);
    padding-top: 0.5rem;
    padding-bottom: 1rem;
}

.filter-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    /* Aumentamos el ancho de 64px a 74px para que quepa mejor el texto largo */
    width: 74px; 
}

.filter-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(45deg, #374151, #4b5563);
    position: relative;
    transform-origin: center center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-circle::after {
    content: '';
    position: absolute;
    inset: 2px;
    background-color: #1f2937;
    border-radius: 50%;
    z-index: 0;
}

.filter-circle svg {
    z-index: 1;
    position: relative;
    width: 24px;
    height: 24px;
}

.filter-label {
    margin-top: 0.35rem;
    font-size: 0.65rem; /* Reducimos un pelín más la fuente (de 0.7rem a 0.65rem) */
    color: #9ca3af;
    text-align: center;
    font-weight: 500;
    transition: color 0.2s ease;
    
    /* --- CAMBIOS CLAVE PARA TEXTO COMPLETO --- */
    white-space: normal;    /* Permite que el texto salte de línea si es necesario */
    overflow: visible;      /* Permite que se vea todo */
    text-overflow: clip;    /* Quita los puntos suspensivos */
    line-height: 1.1;       /* Espaciado ajustado para si ocupa dos líneas */
    max-width: 100%;        /* Usa todo el ancho disponible del .filter-item */
}

/* ESTADO ACTIVO */
.filter-item.active .filter-circle {
    background: linear-gradient(45deg, #6366f1, #ec4899, #f59e0b);
    transform: scale(1.1);
    box-shadow: 0 0 15px -3px rgba(99, 102, 241, 0.6);
}

.filter-item.active .filter-label {
    color: white;
    font-weight: 600;
}

/* HOVER (Solo PC) */
@media (hover: hover) {
    .filter-item:hover .filter-circle {
        transform: translateY(-3px);
    }
    .filter-item:hover .filter-label {
        color: #e5e7eb;
    }
}