/*
 Theme Name: Videixx
 Author: Jossuexx
 Author URI: https://t.me/jossuexx1
 Description: Videixx - Un tema personalizado y optimizado para contenido multimedia.
 Version: 1.0.0
*/

{
  background-color: #000000;
  color: #000000;
}

div.px-1.md:px-6.md:py-4 {
  color: #000000;
  background-color: #000000;
}

div.w-full.lg:w-1/4.xl:w-1/4 {
  color: #000000;
  background-color: #000000;
}

html.js.no-svg {
  color: #000000;
  background-color: #000000;
}

input.wp-block-search__input {
  color: #000000;
  background-color: #000000;
}

a.text-white {
  color: #000000;
  background-color: #000000;
}

#app {
  color: #000000;
  background-color: #000000;
}

div.nojq {
  color: #000000;
  background-color: #000000;
}

nav.flex.items-center.justify-between.flex-wrap.bg-cyan-500.p-3 {
  color: #000000;
  background-color: #000000;
}

/* --- BOTONES DE NAVEGACIÓN ENTRE ENTRADAS --- */
/* Variables de color para las flechas - MODIFICABLES */
:root {
  --arrow-bg: #3b82f6;          /* Azul - Fondo */
  --arrow-bg-hover: #60a5fa;    /* Azul mas claro - Hover */
  --arrow-text: #ffffff;        /* Blanco - Texto */
  --arrow-glow: rgba(59, 130, 246, 0.5);  /* Resplandor azul */
}

.post-navigation, 
.video-navigation-container .nav-previous, 
.video-navigation-container .nav-next {
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-navigation {
  justify-content: space-between;
  margin-top: 30px;
  gap: 1rem;
  flex-wrap: wrap;
}

.post-navigation a,
.video-navigation-container .nav-previous a,
.video-navigation-container .nav-next a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--arrow-bg);
  color: var(--arrow-text) !important;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  transition: all 0.3s ease;
  user-select: none;
  cursor: pointer;
  box-shadow: 0 4px 12px var(--arrow-glow);
  border: 2px solid transparent;
  gap: 0.5rem;
}

.post-navigation a:hover,
100	.video-navigation-container .nav-previous a:hover,
101	.video-navigation-container .nav-next a:hover {
  background-color: var(--arrow-bg-hover);
  box-shadow: 0 6px 16px var(--arrow-glow);
  transform: translateY(-3px);
  border-color: var(--arrow-text);
}

/* Opcional: si quieres que las flechas no tengan texto subrayado */
.post-navigation a,
.video-navigation-container .nav-previous a,
.video-navigation-container .nav-next a {
  text-decoration: none;
}

/* --- AJUSTES DE DISEÑO MÓVIL --- */
@media (max-width: 767px) {
    .container .flex-wrap > div {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 15px;
    }
    
    .post-card-image-wrapper {
        padding-top: 125% !important; /* Aspecto más vertical (alargadito) en móvil */
    }

    /* Ajuste para que el video e imagen no sobrepasen el ancho en móviles */
    .video-wrapper, .post-container, .entry-content img, .video-preview-container {
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Asegurar que el video encaje perfectamente y ocupe todo el ancho y alto */
    .video-content-container iframe, 
    .video-content-container video {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100svh !important;
        object-fit: contain !important;
    }
    .video-wrapper {
        display: flex;
        justify-content: center;
        background: #000;
    }
}

/* --- DISEÑO CINEMATOGRÁFICO CENTRADO (SOLO PC) --- */
@media (min-width: 1024px) {
    /* Contenedor principal a pantalla completa */
    .single-post .container {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ocultar sidebar en entradas */
    .single-post .w-full.lg:w-1/4.xl:w-1/4,
    .single-post aside#secondary {
        display: none !important;
    }

    /* Contenedor de navegación centrado */
    .single-post .navigation-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* El contenido (video) ocupa el centro */
    .single-post .post-content {
        width: 100% !important;
        max-width: 1600px !important; /* Ancho máximo imponente */
        margin: 0 auto !important;
    }

    /* Maximizar Video y Vista Previa */
    .single-post .video-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .single-post .video-preview-container,
    .single-post .video-content-container {
        width: 100% !important;
        height: 85vh !important; /* 85% de la altura de la pantalla */
        max-height: 85vh !important;
        border-radius: 15px !important; /* Bordes redondeados */
        overflow: hidden !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.05) !important; /* Sombra suave */
        background: #000 !important;
    }

    .single-post .video-preview-image,
    .single-post .video-content-container iframe,
    .single-post .video-content-container video {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        border-radius: 15px !important;
    }

    /* Restaurar navegación original en PC */
    .single-post .nav-buttons-group {
        display: flex !important;
        align-items: center !important;
    }
    
    .single-post .nav-btn {
        /* Se eliminan las sobreescrituras para que use el estilo de la línea 78+ */
    }

    /* Ocultar títulos y otros elementos que distraigan del video en el área principal si se desea, 
       pero el usuario pidió que el video sea el protagonista. 
       Ajustamos el padding del article para que no empuje el video. */
    .single-post article.post-container > div {
        padding: 0 !important;
    }
    
    .single-post .entry-header, 
    .single-post .entry-content > *:not(.video-wrapper),
    .single-post .random-button-wrapper {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Ajustes para Móvil (Entradas) */
@media (max-width: 767px) {
    .single-post .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .single-post .video-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    /* Ocultar sidebar en móviles para entradas según solicitud */
    .single-post .w-full.lg:w-1/4.xl:w-1/4,
    .single-post aside#secondary {
        display: none !important;
    }
}

/* --- MEJORAS PARA MÓVILES: POSICIONAMIENTO DE NAVEGACIÓN (AISLADO) --- */
@media (max-width: 767px) {
    /* Reset base para el contenedor en móviles */
    .navigation-container {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        padding: 0 !important;
        gap: 0 !important;
        position: relative !important;
    }

    .post-content {
        width: 100% !important;
        flex: none !important;
    }

    .nav-buttons-group {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 1. Predeterminado (Lados) - Mantiene video pequeño entre botones */
    .navigation-container.mobile-nav-default {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }
    .navigation-container.mobile-nav-default .post-content {
        flex: 1 !important;
        width: auto !important;
    }
    .navigation-container.mobile-nav-default .nav-btn {
        width: 45px !important;
        height: 45px !important;
    }

    /* 2. Arriba (Above) - Botones juntos < > arriba */
    .navigation-container.mobile-nav-above {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 20px !important;
    }
    .navigation-container.mobile-nav-above .post-content {
        order: 2 !important;
        width: 100% !important;
    }
    .navigation-container.mobile-nav-above .nav-buttons-group {
        order: 1 !important;
        margin: 10px 5px !important;
    }

    /* 3. Abajo (Below) - Botones juntos < > abajo */
    .navigation-container.mobile-nav-below {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 20px !important;
    }
    .navigation-container.mobile-nav-below .post-content {
        order: 1 !important;
        width: 100% !important;
    }
    .navigation-container.mobile-nav-below .nav-buttons-group {
        order: 2 !important;
        margin: 10px 5px !important;
    }

    /* 4. Encima (Overlay) - Flotando sobre el video */
    .navigation-container.mobile-nav-overlay {
        display: block !important;
    }
    .navigation-container.mobile-nav-overlay .nav-buttons-group {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 1000 !important;
    }
    .navigation-container.mobile-nav-overlay .nav-buttons-prev {
        left: 10px !important;
    }
    .navigation-container.mobile-nav-overlay .nav-buttons-next {
        right: 10px !important;
    }
    .navigation-container.mobile-nav-overlay .nav-btn {
        background-color: rgba(0, 0, 0, 0.5) !important;
    }

    /* 5. Lados Flotantes (sides_float) - < (video) > */
    .navigation-container.mobile-nav-sides_float {
        display: block !important;
    }
    .navigation-container.mobile-nav-sides_float .nav-buttons-group {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 1000 !important;
    }
    .navigation-container.mobile-nav-sides_float .nav-buttons-prev {
        left: -15px !important;
    }
    .navigation-container.mobile-nav-sides_float .nav-buttons-next {
        right: -15px !important;
    }
    .navigation-container.mobile-nav-sides_float .nav-btn {
        width: 45px !important;
        height: 45px !important;
    }
    .navigation-container.mobile-nav-sides_float {
        overflow: visible !important;
    }
    
    /* Ajuste de iconos para que no se vean gigantes */
    .nav-btn {
        width: 50px !important;
        height: 50px !important;
    }
    .nav-icon {
        width: 16px !important;
        height: 16px !important;
    }
}

/* --- BOTÓN VIDEO ALEATORIO --- */

.random-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    background: transparent;
    width: 100%;
}

.btn-random-clean {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #000000;
    color: #00aaff;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 30px;
    border-radius: 50px;
    border: 1px solid #222;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.icon-shuffle {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #00aaff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.4s ease;
}

.btn-random-clean:hover {
    border-color: #00aaff;
    background-color: #050505;
    box-shadow: 0 0 20px rgba(0, 170, 255, 0.4);
    transform: translateY(-2px);
    color: #ffffff !important;
}

.btn-random-clean:hover .icon-shuffle {
    transform: rotate(180deg);
    stroke: #ffffff;
}