/* --- Estilos para la Plantilla Single Brief --- */
/*.container {
    max-width:none!important;
}*/
@media (min-width:1024px) {
    .brief-template-container {
        width: 80%;
        margin: auto;
    }   
}

/* Contenedor principal y título centrado */
.brief-template-container .brief-title {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Contenedor de los botones de control */
.brief-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Espacio entre botones */
    margin-bottom: 2rem;
    flex-wrap: wrap; /* Para que se vea bien en móviles */
}

@media (max-width:520px) {
    .brief-controls {
        justify-content: start;
    }
}

/* Estilo general de los botones */
.brief-button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #002990;
	color:#fff;
    border-radius: 14px;
    transition: background-color 0.3s, border-color 0.3s;
}

.brief-button:hover {
    background-color: #001344;
}

/* Estilo para el botón activo */
.brief-button.active {
    background-color: #001344; /* Color primario de WordPress */
}

/* --- Estilos para el Dropdown del Índice --- */

/* Contenedor del dropdown */
.brief-index-dropdown {
    position: relative;
    display: inline-block;
}

/* Contenido del dropdown (oculto por defecto) */
/* Contenido del dropdown (oculto por defecto) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 300px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
    border-radius: 5px;
    padding: 10px 0;
    max-height: 400px;
    overflow-y: auto;

    /* -- Líneas a añadir para el efecto de transición -- */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

/* Y ahora modifica la regla de hover para que use la transición */
.brief-index-dropdown:hover .dropdown-content {
    display: block; /* Mantenemos display block por compatibilidad */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Enlaces dentro del dropdown */
.dropdown-content a,
.dropdown-content .no-index-items {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* --- Estilos para el Contenedor del Visor --- */

/* Asegura que el contenedor ocupe el ancho completo */
.brief-content-area {
    width: 100%;
    margin-top: 2rem;
}

/* Estilo para los visores de PDF */
.brief-viewer {
    background-color: #00000087;
    border-top: 1px solid #eee;
    padding: 1em 0;
}

/* Asegura que el contenido del post (PDF embebido) se ajuste */
.brief-viewer .entry-content,
.brief-viewer .entry-content embed,
.brief-viewer .entry-content object,
.brief-viewer .entry-content iframe {
    width: 100% !important;
    min-height: 80vh; /* Altura mínima para que el PDF se vea bien */
}

.post-share {
    display: flex;
    justify-content: center;
    gap: 1px;
}

.post-share a {
    font-size: 2rem;
    color: #fff;
    text-decoration: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: #002990;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.post-share a:hover {
    background-color: #001344;
}

.share-title {
    text-align: center;
}
.child-posts {
    width: 80%;
    margin: auto;
}
.child-list {
    list-style: circle;
}

.post-hijo-item {
    display: flex;
    flex-direction: row;
}

.post-hijo-thumbnail > a > img {
    max-width: 100px;
    margin-right: 10px;
    border-radius: 14px;
}

.children-main-container {
    max-width: 1200px;
    margin: auto;
}

.grid-brief-children {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    gap: 20px; /* Espacio entre los items */
}

.grid-item {
    border: 1px solid #ddd;
    border-radius: 12px;
    overflow: hidden; /* Para que la imagen no se salga si tiene bordes redondeados */
    background-color: #fff;
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px
}

.grid-item:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.grid-item-thumbnail img {
    max-width: 100px;
    height: auto;
    display: block;
    border-radius: 10px
}

.grid-item-title {
    font-size: 16px;
    margin: 0;
    padding: 15px;
}

.grid-item-title a {
    text-decoration: none;
    color: #333;
}

.btn-child-load {
    text-align: center;
    margin-top: 30px;
}

.load-btn {
    padding: 12px 30px;
    font-size: 16px;
    cursor: pointer;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.load-btn:hover {
    background-color: #005f8c;
}

@media (max-width: 768px) {
    .grid-brief-children {
        grid-template-columns: 1fr;
    }
}