/* c:\xampp-entero\htdocs\josicovila.es\css\blog-styles.css */
/* Importar fuentes desde Google */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Lora:wght@700&display=swap');


/* Aplicar box-sizing globalmente */
*, *::before, *::after {
    box-sizing: border-box;
}



/* Estilos básicos */
body {
    margin: 0;
    font-family: sans-serif;
    background-color: #f0f0f0;
    padding-top: 60px; /* Espacio para el header fijo */
    padding-left: 270px; /* Espacio para el sidebar fijo (cuando está visible) */
    transition: padding-left 0.3s ease; /* Transición suave al ocultar/mostrar sidebar */
    background: url('../intro/images/fondo-josico.png') repeat; /* Fondo con imagen */
}

/* Header Fijo */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-image: linear-gradient(to left, #7e7e7e, white, #201642);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box; /* Incluir padding en el width */
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-bottom: 2px solid #ccc;
}
header .logo a img{
    height: 80px;
    width: auto;
    margin-top: 30px;
}

header .play-button{
    color: white;
    text-decoration: none;
    font-size: 18px;
    display: flex;
    align-items: center;
}

header .play-button a img {
    height: 100px;
    width: auto;
    margin-top: 20px;
}

/* Sidebar Fijo */
aside {
    position: fixed;
    top: 60px; /* Debajo del header */
    left: 0;
    width: 250px;
    height: calc(100vh - 60px); /* Altura restante */
    background-color: #201642;
    color: white;
    padding: 15px;
    box-sizing: border-box;
    overflow-y: auto; /* Scroll si hay muchos posts */
    z-index: 900;
    border-right: 1px solid #ccc;
    transition: transform 0.3s ease; /* Animación para ocultar/mostrar */
}
aside h2 {
    margin-top: 0;
    font-size: 1.2em;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}
aside ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
aside ul li a {
    display: block;
    padding: 8px 0;
    text-decoration: none;
    color: #ccc;
    border-bottom: 1px dashed #ccc;
}
aside ul li a:hover {
    background-color: #777;
}
aside ul li a.active { /* Estilo para el post activo */
    font-weight: bold;
    color: #ccc;
}
aside .search-container {
    margin-top: 10px;
    margin-bottom: 20px;

}
/* Estilo para ocultar sidebar */
body.sidebar-hidden {
    /* Este padding-left es para la vista de ESCRITORIO cuando la sidebar está oculta. */
    /* En móvil, lo manejaremos dentro de la media query. */
    /* padding-left: 20px; */ /* Comentado o ajustado si es solo para escritorio */
}
body.sidebar-hidden aside {
    transform: translateX(-100%); /* Mover fuera de la pantalla */
}
/* Botón para ocultar/mostrar */
#toggle-sidebar {
    position: fixed;
    top: 70px;
    left: 260px; /* Justo fuera del sidebar */
    z-index: 950;
    padding: 5px 10px;
    cursor: pointer;
    background-color: #ccc;
    border: 1px solid #aaa;
    border-left: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: left 0.3s ease;
}
body.sidebar-hidden #toggle-sidebar {
    left: 0; /* Pegar al borde cuando está oculto */
    border-left: 1px solid #aaa;
    border-right: none;
    border-radius: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* Contenido Principal */
main {
    padding: 20px;
    background-color: rgba(211,211,211,0.5);
    margin: 20px; /* Margen alrededor del contenido */
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    backdrop-filter: blur(5px); /* Añadido: Esto desenfocará lo que esté detrás del article */
    -webkit-backdrop-filter: blur(5px); /* Para compatibilidad con Safari */
}
main article{
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    background-color: rgba(30, 38, 59, 0.7);
    color: white;
    backdrop-filter: blur(5px); /* Añadido: Esto desenfocará lo que esté detrás del article */
    -webkit-backdrop-filter: blur(5px); /* Para compatibilidad con Safari */
}
main article h1 {
    margin-top: 0;
    color: #ccc;
}
main article .post-meta {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 15px;
    background-color: white;
    padding: 5px;
    border-radius: 5px;
}
main article .post-content {
    line-height: 1.6;
}
main article .post-content p,
main article .post-content ul,
main article .post-content h2,
main article .post-content h3 {
    margin-bottom: 1em;
}
main article a, main article a:visited, main article a:hover, main article b{
    color: #999;
}

main article img{
    max-width: 100%; /* Asegura que la imagen no sea más ancha que su contenedor */
    height: auto;    /* Mantiene la proporción de la imagen */
    display: block;  /* Evita espacios extra debajo de la imagen si es inline */
    margin-left: auto; /* Centra la imagen si es más pequeña que el contenedor */
    margin-right: auto;
    border-radius: 15px;
}

/* --- ESTILOS PARA VIDEOS RESPONSIVOS (IFRAMES DE YOUTUBE) --- */
.video-responsive {
    overflow: hidden;
    /* 16:9 Aspect Ratio (divide 9 entre 16 = 0.5625 o 56.25%) */
    /* Para otras relaciones de aspecto, ajusta este valor:
       4:3  => padding-bottom: 75%;
       1:1  => padding-bottom: 100%;
    */
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
    margin-bottom: 1.5em; /* Espacio debajo del video, igual que un párrafo */
}
.video-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

/* Estilos para la página principal del blog y la cuadrícula de posts */
.blog-index-container {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

#blog-posts-grid {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espacio entre las filas de posts */
    margin-bottom: 30px; /* Espacio antes del botón "cargar más" */
}

.posts-row-featured,
.posts-row-secondary {
    display: flex;
    flex-wrap: wrap; /* Importante para la responsividad */
    gap: 20px; /* Espacio entre las tarjetas de post */
}

.post-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease;
}

.post-card:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.post-card-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* Mantiene la proporción de la imagen */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
    border-radius: 6px;
    margin-bottom: 12px;
}

.post-card.featured-post {
    flex: 1 1 calc(50% - 10px); /* Dos posts por fila, restando el gap */
    min-width: calc(50% - 10px); /* Para evitar que se encojan demasiado antes de envolver */
}
.post-card.featured-post .post-card-image {
    max-height: 250px; /* O la altura que prefieras para los destacados */
}


.post-card.secondary-post {
    flex: 1 1 calc(25% - 15px); /* Cuatro posts por fila */
    min-width: calc(25% - 15px);
}
.post-card.secondary-post .post-card-image {
    max-height: 150px; /* Imagen más pequeña para los secundarios */
}

.post-card-title {
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 1.3;
}
.post-card.featured-post .post-card-title {
    font-size: 1.5em;
}
.post-card.secondary-post .post-card-title {
    font-size: 1.15em;
}

.post-card-title a {
    text-decoration: none;
    color: #2c3e50; /* Un color oscuro para el título */
}
.post-card-title a:hover {
    color: #3498db; /* Un color de acento al pasar el ratón */
}

.post-card-excerpt {
    font-size: 0.9em;
    color: #555;
    flex-grow: 1; /* Hace que el extracto ocupe el espacio disponible */
    margin-bottom: 12px;
    line-height: 1.5;
}

.post-card-readmore {
    display: inline-block;
    padding: 8px 15px;
    background-color: #3498db; /* Color primario */
    color: white;
    text-decoration: none;
    border-radius: 4px;
    text-align: center;
    margin-top: auto; /* Empuja el botón al final de la tarjeta */
    font-weight: bold;
    font-size: 0.85em;
    transition: background-color 0.2s ease;
}
.post-card-readmore:hover {
    background-color: #2980b9; /* Un tono más oscuro al pasar el ratón */
}

#load-random-posts.blog-button {
    display: block;
    margin: 20px auto;
    padding: 12px 28px;
    font-size: 1.05em;
    background-color: #27ae60; /* Un verde para la acción */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-weight: bold;
}
#load-random-posts.blog-button:hover {
    background-color: #229954;
}

/* Ajustes responsivos */
@media (max-width: 1024px) {
    .post-card.secondary-post {
        flex-basis: calc(50% - 10px); /* 2 posts secundarios por fila en tablets */
        min-width: calc(50% - 10px);
    }
}

@media (max-width: 768px) {
    .post-card.featured-post,
    .post-card.secondary-post {
        flex-basis: 100%; /* 1 post por fila en móviles */
        min-width: 100%;
    }
    .posts-row-featured, .posts-row-secondary {
        gap: 15px; /* Reducir gap en móviles */
    }
    #blog-posts-grid {
        gap: 15px;
    }
}

/* Estilos para las etiquetas en un post individual */
.post-tags {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #555; /* Un separador sutil, ajustado al tema oscuro */
    font-size: 0.9em;
}

.post-tags strong {
    color: #bbb; /* Color para el texto "Etiquetas:" */
    margin-right: 10px;
}

.post-tags a {
    color: #8af; /* Un color que destaque para los enlaces de etiquetas */
    text-decoration: none;
    margin-right: 8px;
    padding: 4px 8px;
    background-color: #3a3f51; /* Un fondo sutil para cada etiqueta */
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: inline-block; /* Para que el padding y margen funcionen bien */
    margin-bottom: 5px; /* Espacio si las etiquetas se envuelven */
}

.post-tags a:hover {
    background-color: #8af;
    color: #201642; /* Color del fondo del sidebar para contraste */
}

/* Estilo para el título cuando se filtra por etiqueta */
.tag-filter-title {
    font-size: 1.8em;
    color: #555; /* Un color claro que combine con tu tema oscuro */
    margin-bottom: 25px;
    text-align: center;
    border-bottom: 2px solid #555;
    padding-bottom: 15px;
}

/* Estilos para la sección de Posts Relacionados */
.related-posts-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #555; /* Separador más pronunciado */
}
.related-posts-section h2 {
    color: #ccc; /* Título de la sección */
    margin-bottom: 20px;
    font-size: 1.6em;
}
.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Responsive: 1 a 4 columnas */
    gap: 20px;
}

.related-post-card {
    /* Hereda estilos de .post-card pero podemos sobreescribir o añadir */
    background-color: #2a2f45; /* Un poco más oscuro que el article para diferenciar */
    border: 1px solid #444;
}

.related-post-card .post-card-title a {
    color: #b0c4de; /* LightSteelBlue, para títulos en tarjetas relacionadas */
}
.related-post-card .post-card-title a:hover {
    color: #8af;
}
.related-post-card .post-card-excerpt {
    color: #aaa; /* Extracto un poco más tenue */
    font-size: 0.85em;
}
.related-post-card .post-card-readmore {
    background-color: #556b82; /* Un color diferente para el botón "Leer más" */
}
.related-post-card .post-card-readmore:hover {
    background-color: #435567;
}

/* Estilos para las etiquetas en un post individual */
.post-tags {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid #555; /* Un separador sutil */
    font-size: 0.9em;
}

.post-tags strong {
    color: #bbb; /* O el color que prefieras para el texto "Etiquetas:" */
}

.post-tags a {
    color: #8af; /* Un color que destaque para los enlaces de etiquetas */
    text-decoration: none;
    margin-right: 8px;
    padding: 3px 6px;
    background-color: #3a3f51; /* Un fondo sutil para cada etiqueta */
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.post-tags a:hover {
    background-color: #8af;
    color: #201642; /* Color del fondo del sidebar para contraste */
}

/* Estilo para el título cuando se filtra por etiqueta */
.tag-filter-title {
    font-size: 1.8em;
    color: #555; /* Un color claro que combine con tu tema oscuro */
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 2px solid #555;
    padding-bottom: 10px;
}


#cusdis_thread{
    width: 100%;
}

/*CONTACTO DIRECTO*/
.direct-contact-section {
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 15px;
    background-color: #3a3f5e;
    border-left: 3px solid #ffffff; /* Un color de acento, ajústalo a tu tema */
    border-radius: 4px; /* Opcional: bordes redondeados */
}

.direct-contact-section p {
    margin: 0;
    font-size: 0.95em; /* Ajusta el tamaño si es necesario */
}

.direct-contact-section strong {
    color: #838383; /* Color del texto "Contacto directo:" */
}

.direct-contact-section a {
    margin: 0 5px; /* Espacio entre los enlaces */
    /* color: #007bff;  Puedes definir un color específico para los enlaces aquí */
}

/* ... otros estilos ... */

.direct-contact-section .contact-svg {
    fill: white; /* Hereda el color del texto del strong (#838383 por tu CSS actual) */
}
.direct-contact-section .youtube-svg {
    fill: #FF0000; /* Rojo Youtube */
}
.direct-contact-section .facebook-svg {
    fill: #1877F2; /* Azul Facebook */
}
.direct-contact-section .instagram-svg {
    fill: #C13584; /* Un color rosado/púrpura de Instagram */
}

/* ... otros estilos ... */

/* Estilos para el sidebar del blog con miniaturas */
#blog-sidebar ul li a {
    display: flex; /* Permite alinear imagen y texto horizontalmente */
    align-items: center; /* Centra verticalmente la imagen y el texto */
    gap: 10px; /* Espacio entre la miniatura y el título del post */
    padding-top: 8px; /* Ajusta el padding si es necesario */
    padding-bottom: 8px; /* Ajusta el padding si es necesario */
}

#blog-sidebar ul li a img.sidebar-post-thumbnail {
    width: 40px; /* Ancho de la miniatura */
    height: 40px; /* Alto de la miniatura */
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin deformarse */
    border-radius: 4px; /* Bordes redondeados para la miniatura (opcional) */
    flex-shrink: 0; /* Evita que la imagen se encoja si el título es largo */
}

#blog-sidebar ul li a span.sidebar-post-title {
    flex-grow: 1; /* Hace que el título ocupe el espacio restante */
    /* Opcional: para manejar títulos muy largos y evitar que rompan el diseño */
    /* white-space: nowrap; */ /* Descomentar si quieres que el título esté en una sola línea */
    /* overflow: hidden; */ /* Descomentar si usas nowrap para ocultar el exceso */
    /* text-overflow: ellipsis; */ /* Descomentar si usas nowrap para mostrar "..." al final */
}

/* Ajuste para el estado activo si es necesario */
#blog-sidebar ul li a.active {
    /* Puedes añadir estilos específicos aquí si el fondo por defecto no se ve bien con la imagen */
    /* Por ejemplo, si el color de fondo del 'active' interfiere con la imagen */
}


/* --- ESTILOS RESPONSIVE --- */
@media (max-width: 768px) {
    body {
        /* Ocultar sidebar por defecto en pantallas pequeñas */
        padding-top: 60px;   /* Mantener espacio para el header fijo */
        padding-left: 15px;  /* Padding simétrico a la izquierda */
        padding-right: 15px; /* Padding simétrico a la derecha */
        font-size: 16px; /* Ajustar tamaño de fuente base para móviles */
        /* padding-bottom: 10px; Opcional, si necesitas espacio al final */
        padding-bottom: 10px;
    }
    /* Asegurar que el padding del body en móviles sea consistente
       y simétrico, incluso cuando la sidebar está oculta.
       Esta regla es más específica que la 'body.sidebar-hidden' general. */
    body.sidebar-hidden {
        padding-left: 15px !important;  /* Mantenemos el padding simétrico */
        padding-right: 15px !important; /* Mantenemos el padding simétrico */
    }
    header {
        padding: 0 10px; /* Menos padding en el header */
        /* Considerar apilar logo y botón si es necesario */
        /* flex-direction: column; */
        /* align-items: flex-start; */ /* O center */
    }
    header .logo a img {
        height: 50px; /* Reducir tamaño del logo */
        margin-top: 10px; /* Ajustar margen */
    }
    header .play-button a img {
        height: 50px; /* Reducir tamaño del botón del juego */
        margin-top: 10px; /* Ajustar margen */
    }
    aside {
        /* Ocultar sidebar por defecto */
        transform: translateX(-100%);
        /* Opcional: Hacer que el sidebar sea un overlay en móvil */
        position: fixed; /* Cambiar a fixed para que flote */
        z-index: 1100; /* Asegurar que esté por encima del contenido */
        box-shadow: 2px 0 5px rgba(0,0,0,0.2); /* Sombra para destacar */
    }
    /* Cuando la sidebar debe estar visible en móvil (no tiene la clase .sidebar-hidden el body) */
    body:not(.sidebar-hidden) aside {
        transform: translateX(0); /* Traerla de vuelta a la vista */
    }
    aside ul li a {
        padding: 12px 5px; /* Aumentar un poco el padding para tap targets */
    }
    #toggle-sidebar {
        /* Posicionar botón siempre visible en la esquina */
        left: 5px; /* Pegado a la izquierda por defecto */
        top: 70px; /* Un poco debajo del header, ajustado para más tamaño */
        padding: 8px 12px; /* Aumentar padding para hacerlo más grande */
        font-size: 1.2em;  /* Aumentar tamaño del icono/texto del botón */
        background-color: #201642; /* Color de fondo más contrastado */
        color: white; /* Color de texto del botón */
        border: 1px solid #100a21; /* Borde ligeramente más oscuro */
        /* El z-index: 950; ya está en la regla general y debería ser suficiente */
    }
    body:not(.sidebar-hidden) #toggle-sidebar {
         /* Mover el botón cuando el sidebar está visible (overlay) */
         left: 255px; /* Justo después del sidebar */
    }
    main {
        /* Ajustar márgenes para centrar main después del padding-left del body */
        width: 100%; /* Ocupará el 100% del área de contenido del body */
        margin-top: 10px;    /* Margen vertical */
        margin-bottom: 10px; /* Margen vertical */
        margin-left: 0;      /* Main se alinea con el inicio del área de contenido del body */
        margin-right: 0;     /* Main se extiende hasta el final del área de contenido del body */
        padding: 15px;       /* Padding interno uniforme para el contenido de main */
    }
    main article h1 {
        font-size: 1.8em; /* Ajustar tamaño de títulos */
    }
    main article{
        padding: 10px;
    }
    main article img{
        width: 100%;
    }
    .related-posts-grid {
        /* En móviles, asegurar que las tarjetas de posts relacionados
           no sean demasiado pequeñas. Podrían ir a 1 o 2 columnas. */
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}