/* ======================================================= */
/* 1. ESTILOS DE LAS ENTRADAS (Blog) */
/* ======================================================= */

/* Estilo base de la tarjeta de la entrada */
.blog-item {
    border-radius: 2rem !important;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
    transition: transform 0.3s ease-in-out !important;
    margin: 1rem !important;
}

/* Efecto al pasar el ratón (Hover) */
.blog-item:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.7) !important;
    z-index: 10 !important;
}

/* Bordes superiores redondeados para la imagen de la tarjeta */
.blog-item .card-image {
    border-top-left-radius: 2rem !important;
    border-top-right-radius: 2rem !important;
}

/* Limpieza de estilos en el enlace y título de la entrada */
.blog-item .page-header a,
.blog-item .page-header h2 {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Estilo del botón "Leer Más" */
.blog-item .readmore a {
    /* Estilo base del botón */
    display: inline-block !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 0.5rem !important;
    text-decoration: none !important;
    font-weight: bold !important;
    text-align: center !important;
    cursor: pointer !important;

    
    background-color: #389BF2!important; /*---------------------------------> Cambio de color*/
	
    color: #ffffff !important; /*---------------------------------> Cambio de color (letras)*/
	
    border: 1px solid #389BF2 !important; /*---------------------------------> Cambio de color (mismo color)*/

    /* Transición para el hover */
    transition: all 0.3s ease-in-out !important;
}

/*Hover del boton de leer mas*/

.blog-item .readmore a:hover {
    background-color: #B14516!important; /*---------------------------------> Cambio de color*/
	
    border-color: #B14516 !important; /*---------------------------------> Cambio de color (mismo color)*/
	
    color: #ffffff !important; /*---------------------------------> Cambio de color (letras)*/
}

/* ======================================================= */
/* 3. ESTILOS DE BREADCRUMBS */
/* ======================================================= */

/* Contenedor principal para CENTRAR los Breadcrumbs (usa Flexbox) */
.mod-breadcrumbs__wrapper {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    padding-top: 0px !important;
}

/* Centrado y flexbox para la lista de breadcrumbs */
.mod-breadcrumbs ol.breadcrumb {
    float: none !important;
    margin: 0 auto !important;
    justify-content: center !important;
    display: flex !important;
}

/* Oculta el fondo, padding y bordes del módulo */
.mod-breadcrumbs {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center !important;
}

/* Estilo de texto general */
.breadcrumb {
    color: #731A1A !important; /*---------------------------------> Cambio de color*/
    font-size: 1rem !important;
}

/* Estilo de cada elemento del breadcrumb */
.breadcrumb-item {
    text-transform: uppercase !important;
    padding: 0 !important;
}

/* Estilo de los enlaces */
.breadcrumb-item a {
    color: inherit !important;
    text-decoration: none !important;
}

/* Estilo para el SEPARADOR personalizado */
.breadcrumb-item + .breadcrumb-item::before {
    content: " > " !important;
    color: rgba(249, 204, 163, 0.7) !important; /*---------------------------------> Cambio de color*/
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

/* ======================================================= */
/* 4. ESTILOS DEL TÍTULO DE PÁGINA */
/* ======================================================= */

.page-header h1 {
    text-align: center !important;
    text-transform: uppercase !important;
    color: #389BF2 !important; /*---------------------------------> Cambio de color*/
    font-size: 3rem !important;
    padding-bottom: 70px !important;
}

/* ======================================================= */
/* 5. AJUSTES GENERALES DEL CONTENEDOR */
/* ======================================================= */

/* Anulamos la sombra, borde y fondo por defecto de Phoca Download y módulos */
.grid-child.container-sidebar-left .card,
#phocadownload-tree-module,
#phoca-dl-category-box.pd-category-view {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Limpiar el fondo del contenedor principal de la lista */
#phoca-dl-category-box.pd-category-view {
    padding: 10px 0;
    background: transparent !important;
    border: none !important;
}

/* ======================================================= */
/* 6. ESTILO DE LISTA: VISTA PRINCIPAL DE CATEGORÍAS */
/* ======================================================= */

/* Contenedor de la subcategoría: usa Flexbox para alinear el nombre y el contador */
#phoca-dl-category-box div.pd-subcategory {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 2px !important;
    border-bottom: 1px solid #F2F2F2 !important; /* Separador con gris muy claro */
    position: relative !important;
}

/* Estilo del enlace de la categoría */
#phoca-dl-category-box div.pd-subcategory a {
    display: flex !important;
    align-items: center !important;
    padding: 12px 15px !important;
    color: #3c4043 !important;
    text-decoration: none !important;
    background-color: transparent !important;
    transition: background-color 0.2s ease !important;
    border-radius: 4px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    flex-grow: 1 !important;
}

/* Efecto hover en el enlace (Fondo Gris Muy Claro: #F2F2F2) */
#phoca-dl-category-box div.pd-subcategory a:hover {
    background-color: #F2F2F2 !important; /* Fondo Neutro */
    border-radius: 4px !important;
}

/* Ícono de Carpeta */
#phoca-dl-category-box div.pd-subcategory a::before {
    content: "\f07b";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    color: #B14516 !important; /*---------------------------------> Cambio de color*/
    margin-right: 15px !important;
    padding-top: 2px;
    pointer-events: none;
}

/* Ocultar la imagen de icono de Phoca original */
#phoca-dl-category-box div.pd-subcategory a img {
    display: none !important;
}

/* Formato de Pastilla para el Contador (Fondo Gris Muy Claro: #F2F2F2) */
#phoca-dl-category-box .small {
    margin-right: 20px !important;
    color: #3c4043 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    background-color: #F2F2F2 !important; /* Fondo Neutro */
    line-height: 1.5 !important;
}

/* ======================================================= */
/* 7. ESTILOS DEL MÓDULO PHOCA-TREE (Árbol de Categorías/Archivos) */
/* ======================================================= */


/*Ajustes al contenedor que sostiene todo el modulo*/
.grid-child.container-sidebar-left .card,
#phocadownload-tree-module {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    /*margin: 0 !important;
    padding: 0 0 0 10px !important;*/
    border-radius: 0 !important;
}

/* ESTILO GENERAL DEL CONTENEDOR DEL ÁRBOL */
.jstree-proton-responsive,
.phoca-tree-container-p {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* TIPOGRAFÍA Y ESTILO DE LOS ENLACES (CADA ELEMENTO DEL ÁRBOL) */
.jstree-proton .jstree-anchor {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
    font-size: 15px !important;
    color: #444 !important;
    padding: 4px 6px !important;
    border-radius: 5px !important;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out !important;
}

/* 3. EFECTOS AL PASAR EL RATÓN Y AL SELECCIONAR */

/* EFECTO HOVER: Fondo y Color de Texto Blanco */
.jstree-proton .jstree-anchor.jstree-hovered {
  background-color: #F9CCA3 !important; /*---------------------------------> Cambio de color*/
  color: #B14516 !important; 
}

/*Icono en blanco HOVER*/
.jstree-proton .jstree-anchor.jstree-hovered .jstree-themeicon::before {
  color: #B14516 !important;
}

/* Texto BLANCO en hover */
.jstree-proton .jstree-anchor.jstree-hovered {
    color: #B14516 !important; 
}

/* EFECTO CLICKEADO: Fondo y Color de Texto Blanco */
.jstree-proton .jstree-anchor.jstree-clicked {
    background-color: #731A1A !important;
    border: 0;
    color: #FFFFFF !important; /* Texto BLANCO al hacer clic */
    font-weight: 600 !important;
}


/* 4. REEMPLAZO DE ICONOS CON FONT AWESOME */
.jstree-proton .jstree-themeicon {
    background-image: none !important;
}

/* Estilo base del ícono de Font Awesome */
.jstree-anchor > .jstree-themeicon::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    width: 20px !important;
    display: inline-block !important;
    text-align: center !important;
    color: #389BF2 !important; /*---------------------------------> Cambio de color*/
    margin-right: 5px !important;
    transition: color 0.2s ease-in-out !important; /* Añadimos transición para suavizar el cambio de color */
}

/* ÍCONO BLANCO EN HOVER */
.jstree-proton .jstree-wholerow-hovered .jstree-anchor .jstree-themeicon::before {
    color: #FFFFFF !important;
}


/* ÍCONO BLANCO AL HACER CLICK */
.jstree-proton .jstree-wholerow-clicked .jstree-anchor > .jstree-themeicon::before,
.jstree-proton .jstree-anchor.jstree-clicked > .jstree-themeicon::before {
    color: #FFFFFF !important;
}

/* Reglas de contenido de los íconos */
.jstree-closed > .jstree-anchor > .jstree-themeicon::before {
    content: '\f07b' !important; /* Carpeta cerrada */
}
.jstree-open > .jstree-anchor > .jstree-themeicon::before {
    content: '\f07c' !important; /* Carpeta abierta */
}
.jstree-leaf > .jstree-anchor > .jstree-themeicon::before {
    content: '\f15c' !important; /* Archivo */
    font-weight: 400 !important;
    color: #B14516 !important; /*---------------------------------> Cambio de color*/
}

/* 5. REEMPLAZO DE LOS BOTONES +/- PARA EXPANDIR/CONTRAER */
/* NOTA: El color de estos botones (flechas) se mantiene neutral (gris) para no interferir con la carpeta/texto, pero puedes cambiarlos si lo deseas. */
.jstree-proton .jstree-ocl {
    background-image: none !important;
    width: 20px !important;
    height: 20px !important;
    text-align: center !important;
    line-height: 20px !important;
    margin-right: 2px !important;
}
.jstree-ocl i {
    display: none !important;
}
.jstree-ocl::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    color: #888 !important;
    font-size: 10px !important;
    content: '' !important;
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    position: relative !important;
    top: -1px !important;
}
.jstree-open > .jstree-ocl::before {
    content: '\f078' !important;
}
.jstree-closed > .jstree-ocl::before {
    content: '\f054' !important;
}
.jstree-leaf > .jstree-ocl::before {
    content: '' !important;
}

/* 6. LÍNEAS DE CONEXIÓN - ¡ELIMINADAS! */
.jstree-proton .jstree-node {
    background-image: none !important;
    margin-left: 20px !important;
    background-repeat: no-repeat !important;
}
.jstree-proton .jstree-last {
    background: transparent !important;
}

/* 7. Manejo de nombres largos (mantenido) */
.jstree-proton a {
    white-space: normal !important;
    height: auto !important;
}
.jstree-anchor {
    height: auto !important;
}
.jstree-proton li > ins {
    vertical-align: top !important;
}
.jstree-leaf {
    height: auto !important;
}
.jstree-leaf a {
    height: auto !important;
}

/* ======================================================= */
/* 8. ESTILO DE LISTA DE ARCHIVOS (VISTA DE CATEGORÍA) */
/* ======================================================= */

/* Limpiar el fondo del contenedor principal (si no se limpió antes) */
#phoca-dl-category-box.pd-category-view {
    background-color: transparent !important;
    padding: 0 15px !important;
}

/* Estilo de la Fila de Archivo (La "tarjeta") */
#phoca-dl-category-box .row.pd-row-bt {
    /* Estilo de tarjeta moderno */
    background: #ffffff !important;
    border: 1px solid #F2F2F2 !important; /* Borde muy claro */
    border-left: 5px solid #BF047E !important; /* Tira principal (Magenta) */
    border-radius: 8px !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;

    /* Alineación de contenido */
    display: flex !important;
    align-items: center !important;
}

/* Efecto hover en la fila */
#phoca-dl-category-box .row.pd-row-bt:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px) !important;
}

/* Estilo del Título del Archivo y del Icono */
#phoca-dl-category-box .pd-file-title {
    display: flex !important;
    align-items: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
}

/* Icono de documento de Phoca */
#phoca-dl-category-box .pd-file-title img {
    width: 28px !important;
    height: 28px !important;
    margin-right: 15px !important;
}

/* Contenedores de Botones (Alineación) */
#phoca-dl-category-box .pd-button-box {
    text-align: right !important;
    margin-top: 0 !important;
}

/* Estilo de Botones (Forma de Pastilla) */
#phoca-dl-category-box .btn {
    font-weight: 600 !important;
    text-transform: uppercase !important;
    border-radius: 25px !important;
    padding: 8px 20px !important;
    margin-left: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

/* Colores Específicos de Botones (Usando tu paleta) */

.btn-warning { /* Vista Previa */
    background-color: #B14516; /*---------------------------------> Cambio de color*/
    border-color: #B14516!important;
    color: white !important;
}
.btn-warning:hover{ /* Vista Previa */
    background-color: #B14516;
}


.btn-info { /* Detalles */
    background-color: #389BF2 !important; /*---------------------------------> Cambio de color*/
    border-color: #389BF2 !important;
    color: white !important;
}

.btn-success { /* Descarga */
    background-color: #F9CCA3 !important; /*---------------------------------> Cambio de color*/
    border-color: #F9CCA3 !important;
    color: #B14516 !important;
}

/* Efecto hover en botones */
#phoca-dl-category-box .btn:hover {
    filter: brightness(110%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-5px);

}

/* ======================================================= */
/* 9. ESTILO DE LAS LETRAS DE MENÚ */
/* ======================================================= */

.container-header .mod-menu>li>a,.container-header .mod-menu>li>span {
    color: #731A1A;
    font-weight: 600 !important;
    text-decoration: none;
    position: relative
}

.metismenu.mod-menu .mm-toggler {
    color: #731A1A;
    font-weight: 600 !important;
    user-select: none;
    height: 100%;
    box-shadow: none;
    background: 0 0;
    border: none;
    align-items: center;
    padding: 0;
    display: flex;
    position: relative
}

/* ======================================================= */
/* 10. ESTILO DE LAS LETRAS DEL COPYRIGHT */
/* ======================================================= */
.footer {
    color: #731A1A;
}

/* ======================================================= */
/* 11. ESTILO DE LAS LETRAS DE LA VISTA DE ARTICULO */
/* ======================================================= */
.com-content-article.item-page .page-header h1 {
    display: none;
}

/* 1. ESTILO BOXED (CONTENEDOR PRINCIPAL) */

.com-content-article.item-page {
    /* Fondo y Sombra */
    background-color: #fff;       /* Fondo blanco */
    border: 1px solid #e0e0e0;    /* Borde gris claro suave */
    border-radius: 12px;          /* Esquinas redondeadas */

    /* Centrado y Ancho */
    max-width: 1600px;             /* Ancho máximo para pantallas grandes */
    margin: 40px auto;            /* Centra la caja y da espacio vertical */

    /* Espaciado Interno */
    padding: 30px;                /* Espacio dentro de la caja para el contenido */
}


/* 2. TIPOGRAFÍA Y JERARQUÍA DE TÍTULOS */
/* Título del Artículo (Gobierno de Dzan) */
.page-header h2 {
    font-size: 2em;
    font-weight: 700 !important;
    color: #333;
    margin-top: 0;              /* Asegura que no haya espacio extra arriba del título */
    margin-bottom: 15px;
}

/* Datos del Artículo (Fecha, Autor) */
.article-info {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}


/* 3. IMAGEN Y CUERPO DEL TEXTO */

/* Contenedor de la Imagen */
.item-image figure {
    margin-bottom: 30px;
    text-align: center;
}

/* Imagen Principal */
.item-image img {
    width: 100%;                  /* Ocupa todo el ancho disponible */
    height: auto;
    border-radius: 8px;           /* Suaviza la integración de la imagen */
    object-fit: cover;
    

}

/* Cuerpo del Texto (Mejora de Lectura) */
.com-content-article__body {
    /* Limita el ancho del texto para mejor lectura */
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;

    /* Tipografía */
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 1.1em;
    color: #444;
    line-height: 1.7;             /* Espaciado de línea generoso para legibilidad */
}

/* Estilo para párrafos */
.com-content-article__body p {
    margin-bottom: 1.5em;         /* Espacio entre párrafos */
    text-align: justify;          /* Justificar el texto para un bloque limpio (opcional) */
}