/* =================================================================== */
/* Estilos para el Reproductor de Video (anis-watch-tv)                */
/* =================================================================== */

.anis-watch-tv .player-frame {
    position: relative; /* Añade position: relative para que los elementos internos posicionados absolutamente se basen en él */
    padding-bottom: 56.25%; /* Mantiene el aspect ratio */
    width: 100%; /* Asegura que ocupe el ancho completo de su contenedor */
    height: 0; /* Necesario cuando se usa padding-bottom para aspect ratio */
    overflow: hidden; /* Oculta cualquier contenido que se salga */
}

/* Estilos para el placeholder que cubrirá el área del reproductor */
#player-placeholder-overlay {
    position: absolute; /* Posiciona sobre el player-frame */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Para centrar el botón */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: #000; /* Fondo negro */
    z-index: 2; /* Asegura que esté por encima del iframe cuando sea visible */
}

/* Estilos para el botón de play */
#play-button {
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 50px solid #ccc; /* Color del botón */
    transition: border-color 0.2s ease;
    z-index: 3; /* Asegura que esté por encima del overlay */
}

#player-placeholder-overlay:hover #play-button {
    border-left-color: #fff; /* Cambia color al pasar el mouse */
}

/* Asegura que el iframe también se posicione absolutamente para llenar el player-frame */
#iframe-embed {
    position: absolute; /* Posiciona sobre el player-frame */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block; /* Ocultaremos/mostraremos esto con JS */
    z-index: 1; /* Asegura que esté por debajo del overlay cuando este sea visible */
}

/* Asegura que el loading spinner también se posicione correctamente */
#embed-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Para centrar el spinner */
    justify-content: center;
    align-items: center;
    background-color: #000; /* Fondo negro mientras carga */
    z-index: 4; /* Asegura que esté por encima de todo mientras carga */
}

/* =================================================================== */
/* Estilos para el Selector de Giphy (Modal)                           */
/* =================================================================== */

#giphy-picker-modal {
    display: none; /* Oculto por defecto, se muestra con JS */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8); /* Fondo oscuro del overlay */
    z-index: 1000;
}

/* Estilos para el contenedor principal del contenido del modal */
.giphy-modal-content {
    background: #2D2B44 !important; /* Color de fondo oscuro del modal */
    color: #fff; /* Color del texto general dentro del modal */
    margin: 50px auto;
    padding: 20px;
    width: 90%;
    max-width: 600px;
    height: calc(100% - 100px);
    overflow-y: auto;
    border-radius: 8px;
}

/* Estilos para el encabezado del modal */
.giphy-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

#giphy-picker-modal h3 {
    color: #fff !important; /* Color blanco para el título */
}

/* Estilos para el botón de cerrar el modal */
#close-giphy-picker {
    color: #fff !important; /* Color blanco para el icono de cerrar */
    background: none; /* Asegura que no tenga fondo */
    border: none; /* Asegura que no tenga borde */
    font-size: 1.5em; /* Tamaño del icono */
    cursor: pointer;
}

/* Estilos para el input de búsqueda de Giphy */
#giphy-search-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    background: #3A3951 !important; /* Un color ligeramente más claro para el input */
    color: #fff !important; /* Color del texto del input */
    border: 1px solid #4A4960 !important; /* Color del borde del input */
}

#giphy-search-input::placeholder {
    color: #ccc !important; /* Color del texto del placeholder */
}

/* Estilos para el contenedor de resultados de Giphy (grid) */
#giphy-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important; /* Columnas más pequeñas para los GIFs */
    gap: 5px !important; /* Espacio reducido entre los GIFs */
}

/* Estilos para cada elemento individual de GIF (contenedor) */
.sl-item.giphy-item {
    width: 70px; /* Ancho fijo para cada elemento GIF */
    height: 70px; /* Altura fija para cada elemento GIF */
    overflow: hidden; /* Oculta cualquier contenido que se desborde */
    display: flex; /* Usa flexbox para centrar el contenido */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    border: 1px solid #eee; /* Borde para visualización */
    box-sizing: border-box; /* Incluye padding y borde en el ancho/alto */
    cursor: pointer; /* Indica que es clickeable */
    border-radius: 4px; /* Bordes ligeramente redondeados */
}

/* Estilos para el contenedor de la imagen dentro de cada elemento GIF */
.sl-item.giphy-item .sli-img {
    position: relative;
    width: 100%;
    height: 100%; /* Ocupa toda la altura del contenedor padre */
    display: flex; /* Usa flexbox para centrar la imagen */
    align-items: center;
    justify-content: center;
}

/* Estilos para la imagen GIF en sí */
.sl-item.giphy-item .sli-img img {
    max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
    max-height: 100%; /* Asegura que la imagen no exceda la altura del contenedor */
    width: auto; /* Permite que la altura se ajuste automáticamente */
    height: auto; /* Permite que la altura se ajuste automáticamente */
    object-fit: contain; /* Ajusta la imagen dentro del contenedor manteniendo su relación de aspecto */
    display: block; /* Elimina el espacio extra debajo de la imagen */
}

/* Estilos para el texto de carga */
#giphy-loading {
    text-align: center;
    display: none; /* Oculto por defecto, se muestra con JS */
    color: #fff !important; /* Color blanco para el texto de carga */
}

/* =================================================================== */
/* Estilos para el Modal con Fondo Borroso                             */
/* =================================================================== */

#reportMessage {
  background-color: #000 !important;
  color: #fff !important;
}

.custom-modal-content {
  position: relative;
  overflow: hidden;  /* Evitar que el pseudo-elemento se salga del contenedor */
  background: transparent; /* Dejamos el fondo transparente para que se vea el pseudo-elemento */
}

/* Pseudo-elemento que crea el fondo borroso */
.custom-modal-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('https://i.pinimg.com/564x/41/87/c0/4187c0127893a1f8971ee8d9aa6decb3.jpg') center/cover no-repeat;
  filter: blur(10px);  /* Aplica el desenfoque */
  z-index: 0;          /* Se sitúa debajo del contenido */
}

/* Aseguramos que todo el contenido del modal se posicione sobre el pseudo-elemento */
.custom-modal-content > * {
  position: relative;
  z-index: 1;
}

/* Opcional: Personaliza otros elementos internos del modal */
.custom-modal .modal-header,
.custom-modal .modal-footer {
  border: none;
  background: transparent;
}

.custom-modal .modal-title,
.custom-modal .close span,
.custom-modal .form-control,
.custom-modal label {
  color: #e9ecef;
}

/* =================================================================== */
/* Otros Estilos (Iconos, etc.)                                        */
/* =================================================================== */

/* Estilos para el icono de reversa */
.sscq-icon.reverse-icon {
    right: 115px;
    width: 30px;
    height: 30px;
    font-size: 14px;
    background-color: #353734;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background-color 0.3s ease;
    z-index: 3;
}

.sscq-icon.reverse-icon:hover {
    background-color: #666; /* Efecto hover */
}

/* =================================================================== */
/* Estilos para Modal de Reportes con Categorías Colapsables           */
/* =================================================================== */

/* Contenedor general del modal de reportes */
#reportModal .modal-content {
    background: #1a1a1a !important; /* Fondo negro principal */
    border: 1px solid #333 !important;
    border-radius: 12px !important;
}

#reportModal .modal-header {
    background: #2d2d2d !important; /* Header más oscuro */
    border-bottom: 1px solid #444 !important;
    border-radius: 12px 12px 0 0 !important;
}

#reportModal .modal-footer {
    background: #2d2d2d !important; /* Footer más oscuro */
    border-top: 1px solid #444 !important;
    border-radius: 0 0 12px 12px !important;
}

#reportModal .modal-body {
    background: #1a1a1a !important; /* Cuerpo negro */
    color: #e0e0e0 !important;
}

/* Estilos para títulos de categorías (clickeables) */
.report-category-header {
    background: linear-gradient(135deg, #2d2d2d, #1a1a1a) !important;
    border: 1px solid #444 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin-bottom: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.report-category-header:hover {
    background: linear-gradient(135deg, #3d3d3d, #2a2a2a) !important;
    border-color: #555 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.report-category-header:active {
    transform: translateY(0px) !important;
}

/* Efecto de brillo sutil al hover */
.report-category-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.report-category-header:hover::before {
    left: 100%;
}

/* Icono de flecha para indicar expandible */
.report-category-header .category-arrow {
    float: right !important;
    transition: transform 0.3s ease !important;
    font-size: 14px !important;
    color: #888 !important;
}

.report-category-header.active .category-arrow {
    transform: rotate(180deg) !important;
    color: #fff !important;
}

/* Contenedor de opciones de reporte (colapsable) */
.report-category-options {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: #0f0f0f !important;
    border-radius: 0 0 8px 8px !important;
    margin-top: -8px !important;
    margin-bottom: 16px !important;
}

.report-category-options.show {
    max-height: 500px !important; /* Altura suficiente para mostrar todas las opciones */
    padding: 16px !important;
    border: 1px solid #333 !important;
    border-top: none !important;
}

/* Estilos para cada opción de reporte individual */
.report-category-options .form-check {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 6px !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.report-category-options .form-check:hover {
    background: #252525 !important;
    border-color: #555 !important;
    transform: translateX(4px) !important;
}

/* Estilos para el radio button personalizado */
.report-category-options .form-check-input {
    background-color: #2d2d2d !important;
    border: 2px solid #555 !important;
    width: 20px !important;
    height: 20px !important;
    margin-top: 2px !important;
}

.report-category-options .form-check-input:checked {
    background-color: #007bff !important;
    border-color: #007bff !important;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5) !important;
}

.report-category-options .form-check-input:focus {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/* Estilos para las etiquetas de opciones */
.report-category-options .form-check-label {
    color: #e0e0e0 !important;
    cursor: pointer !important;
    margin-left: 8px !important;
    line-height: 1.4 !important;
}

.report-category-options .form-check-label strong {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.report-category-options .form-check-label .text-muted {
    color: #888 !important;
    font-size: 13px !important;
    display: block !important;
    margin-top: 4px !important;
}

/* Efecto de selección activa */
.report-category-options .form-check:has(.form-check-input:checked) {
    background: linear-gradient(135deg, #1a3a5c, #0f2a4c) !important;
    border-color: #007bff !important;
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.3) !important;
}

/* Estilos para el textarea de mensaje */
#reportMessage {
    background-color: #2d2d2d !important;
    border: 1px solid #555 !important;
    color: #e0e0e0 !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

#reportMessage:focus {
    background-color: #3d3d3d !important;
    border-color: #007bff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
    color: #ffffff !important;
}

#reportMessage::placeholder {
    color: #888 !important;
}

#reportModal .btn-primary:hover {
    background: linear-gradient(135deg, #b2d7ff, #b7c9de) !important;
    /*transform: translateY(-2px) !important;*/
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4) !important;
}

#reportModal .btn-secondary {
    background: linear-gradient(135deg, #6c757d, #545b62) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

#reportModal .btn-secondary:hover {
    background: linear-gradient(135deg, #545b62, #3d4045) !important;
    transform: translateY(-2px) !important;
}

/* Animación de entrada para las opciones */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.report-category-options.show .form-check {
    animation: slideInFromLeft 0.3s ease forwards;
}

.report-category-options.show .form-check:nth-child(1) { animation-delay: 0.1s; }
.report-category-options.show .form-check:nth-child(2) { animation-delay: 0.15s; }
.report-category-options.show .form-check:nth-child(3) { animation-delay: 0.2s; }
.report-category-options.show .form-check:nth-child(4) { animation-delay: 0.25s; }
.report-category-options.show .form-check:nth-child(5) { animation-delay: 0.3s; }

/* Estilos responsivos */
@media (max-width: 768px) {
    .report-category-header {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
    
    .report-category-options .form-check {
        padding: 10px !important;
    }
    
    .report-category-options .form-check-label {
        font-size: 14px !important;
    }
}