/* Contenedor principal - Móviles por defecto (1 sola columna) */

.header-desktop-inner-content .menu-button:hover, .header-desktop-inner-content .tab-focus:hover {
	color: #E7F5FF;
}
.header-desktop-inner-content .dropdown .logged-in-as a{
	color: aliceblue;
	text-decoration: underline;
	
}
.pt-16 .container .article-summary-link:hover, .pt-16 .container .tab-focus:hover, .pt-16 .container .pagination-page:hover{
	color: #A8BBC6;
}
.pt-16 .container .button:hover {
	background-color: #CCD6DC;
	color: #004C59;	
}
.homepage-cards-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 5px;
    padding: 15px 0;
}

/* Pantallas medianas y grandes (Desktop/Tablet) */
@media (min-width: 768px) {
    .homepage-cards-container {
        grid-template-columns: 6fr 4fr;
    }

    /* La tercera tarjeta ocupa el 100% del ancho (las dos columnas) */
    .custom-card-wrapper:nth-child(3) {
        grid-column: 1 / -1; 
        
        /* Opcional: Centrar el texto e imágenes dentro de la tarjeta */
        align-items: center; 
        text-align: center;
    }
}
/* --- FIX PARA EL TEXTO COMPRIMIDO EN EL ANUNCIO --- */
.custom-card-wrapper .homepage-block-announcement * {
    /* Cancela la ruptura forzada de palabras que heredaba de la tarjeta */
    word-break: normal !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
}

.custom-card-wrapper .homepage-block-announcement,
.custom-card-wrapper .notice {
    width: 100% !important;
    /* min-width: 0 es clave para evitar que Flexbox colapse el contenedor y apriete el texto */
    min-width: 0 !important; 
    display: block; 
}
/* =========================================
   FIX PARA EL ANUNCIO (Evitar texto apretado) 
   ========================================= */
.custom-card-wrapper .homepage-block-announcement * {
    word-break: normal !important;
    word-wrap: normal !important;
}
.custom-card-wrapper .homepage-block-announcement,
.custom-card-wrapper .notice {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
}

/* =========================================
   DISEÑO DE LA TARJETA DE 3 COLUMNAS
   ========================================= */

/* Sobrescribe la regla del nth-child(3) que lo centraba todo */
.custom-card-wrapper.info-tres-columnas {
    display: flex !important;
    flex-direction: column !important; /* En móviles va hacia abajo */
    align-items: stretch !important;
    text-align: left !important;
    gap: 30px;
}

/* En pantallas grandes, forzamos que se pongan lado a lado (Fila) */
@media (min-width: 768px) {
    .custom-card-wrapper.info-tres-columnas {
        flex-direction: row !important;
        justify-content: space-between !important;
    }
}

/* Ajustes de cada columna */
.info-col {
    flex: 1;
    text-align: left !important;
}

/* Líneas separadoras verdes solo en escritorio */
@media (min-width: 768px) {
    .info-col.con-linea {
        border-left: 2px solid #004d55;
        padding-left: 30px;
    }
}

/* Tipografía y listas */
.info-col h3 {
    color: #004d55;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.info-col ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Separación entre cada ítem (reemplaza los br) */
.info-col li {
    margin-bottom: 12px;
    color: #004d55;
    font-size: 0.95rem;
    font-weight: 500;
}

.info-col a {
    color: #004d55;
    text-decoration: none;
}

.info-col a:hover {
    text-decoration: underline;
}
/* =========================================
   ESTILOS DE ICONOS Y VIÑETAS (BULLETS)
   ========================================= */

/* Alineación de los iconos en el título */
.info-col h3 {
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre el icono y el texto */
}

.title-icon {
    color: #004d55;
    flex-shrink: 0;
}

/* Diseño de la lista */
.custom-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-bullet-list li {
    position: relative;
    padding-left: 20px; /* Deja espacio para la flecha */
    margin-bottom: 14px; /* Separa los items limpiamente sin necesidad de <br> */
}

/* Creación de la flecha personalizada (►) */
.custom-bullet-list li::before {
    content: "►"; 
    position: absolute;
    left: 0;
    top: 2px;
    color: #004d55;
    font-size: 0.75rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

/* Animación sutil al pasar el mouse por encima del enlace o item */
.custom-bullet-list li:hover::before {
    transform: translateX(4px); /* Desplaza la flecha a la derecha */
    color: #007a88; /* Se vuelve un tono más claro de verde */
}
/* Estilo general de las tarjetas */
.custom-card-wrapper {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    word-wrap: break-word; 
    overflow-wrap: break-word;
}
/* Reducir el tamaño general de los botones dentro de las tarjetas */
.custom-card-wrapper .button {
    padding: 6px 14px !important; /* Espacio interior mucho más pequeño */
    font-size: 13px !important;   /* Tamaño de fuente reducido */
    min-width: auto !important;   /* Quita cualquier ancho mínimo forzado por OJS */
    height: auto !important;      /* Ajusta la altura al nuevo padding */
    line-height: 1.5;
}

/* Darle un poco de espacio superior para separarlo del texto del anuncio */
.custom-card-wrapper .notice-actions {
    margin-top: 15px;
    text-align: left; /* Cambia a 'center' o 'right' si prefieres otra alineación */
}