/* ---------- Monserrat, Verdana ---------- */
body,
p,
a,
li {
  font-family:'Verdana', 'Montserrat';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6,
h1 a,
h2 a,
h3 a {
  font-family: 'Montserrat';
  font-weight: 700;
}
a:hover,
.site-branding a img:hover{
    background-color: #deeef7;
}
footer a:hover {
    background-color: transparent; /* O el color que desees que tenga en el footer */
}
a.btn {
   text-decoration: none;
}
/* ----- otros estilos propios ----- */
.top-banner-background{
    background-color:#006eb7;
}
.path-node .table-responsive,
.node-revision-revert-confirm { 
    margin-top: 150px; 
}
.user-logged-in nav.tabs{
    z-index: 1020;
}
.navbar-dark .nav-link {
    color: rgba(255, 255, 255);
}
.navbar-light .nav-link {
    color: #4a4a4a;
}
.post-category, .post-meta, .post-meta li a{
    color: #4a4a4a;
}
input#edit-submit:hover {
    color: #006eb7;
}

/** CARDS **************************************************/
/*Cards sin borde*/
.card-sin-borde{
    box-shadow: none;
}

/* 1. Forzar que todas las tarjetas ocupen el 100% de la altura de su columna */
.item.post .card,
.paragraph--type--paragraph-card.card {
  --bs-card-height: 100%; 
}

/* 2. Ajuste para Vistas: El div con data-url debe ser flexible para no romper el flujo */
.item.post .card > div[data-url] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* 3. Ajuste para Paragraphs con Títulos (Investigación / Innovación) */
/* Hacemos que la columna sea un contenedor flex para que la tarjeta rellene el espacio */
.paragraph--type--paragraph-section .col-lg-6 {
  display: flex;
  flex-direction: column;
}
/**********************************************************/

/** LOGO ****************************************************/
.site-branding .logo {
    /* Evita que la imagen supere el ancho de su contenedor */
    max-width: 100%; 
    
    /* Controla el tamaño visual mediante la altura */
    height: auto;
    max-height: 50px; 
    
    /* Suaviza la transición si decides cambiar el tamaño al hacer scroll */
    transition: max-height 0.3s ease;
}

/* Ajuste para pantallas más grandes (Escritorio) */
@media (min-width: 992px) {
    .site-branding .logo {
        max-height: 72px; /* Un poco más grande en PC */
    }
}
/**************************************************************/

/*Tamaño del la imagen del logo de la intranet cuando se muestra el menú en un dispositivo móvil (offcanvas-footer)*/
.logo-intranet {
    width: 60%;
    /* Opcional, pero a menudo útil para imágenes */
    height: auto; 
    max-width: 100%;
}

#svg-intranet{
    height: 1.2rem;
}
/*svg:hover {
    border-bottom: 2px solid;
}*/


/* Media query para pantallas de hasta 820px de ancho */
@media (max-width: 820px) {
  .icon-svg.icon-svg-sm{
    width: 2.2rem;
    height: 2.2rem;
  }
  #svg-intranet{
    height: 1.4rem;
  } 
}

/*para el tamaño de logo emblema.png cuando el máximo es 767px*/
@media (max-width: 767px) {
  .logo-cabecera {
    width: 75px; /* O el ancho que desees, por ejemplo, 150px */
    height: auto; /* Mantiene la proporción de la imagen */
  }
}

/* Estilos para el tamaño del logo upm_logo_header.svg cuando el mínimo es 768px*/
@media (min-width: 768px) {
  .logo-cabecera {
    width: 365px; /* Tu ancho original para el SVG */
    height: auto;
  }
}

a, p a {
   text-decoration: underline;
}

.no-underline {
    text-decoration: none;
}
.no-underline:hover {
    text-decoration: underline;
}

/*Listas sin viñeta*/
.ul-no-bullets{
    list-style-type: none;
}

/* Custom menu styles */
/* Estilos para cada elemento del menú (li.nav-item) */
.navbar-nav .nav-item {
  display: flex;              /* Convierte el elemento en un contenedor flexible */
  flex-wrap: wrap;            /*los ítems flexibles (flex items) dentro de un contenedor flexible (flex container) se ajustarán a múltiples líneas si no hay suficiente espacio en una sola línea*/
  align-items: center;        /* Centra verticalmente el contenido dentro del nav-item */
  /*margin-left: 0.8rem;*/
  /*justify-content: center;*/   /* Centra horizontalmente el contenido dentro del nav-item */
  /*text-align: center;*/         /* Centra el texto dentro del nav-item (útil si hay más de un elemento o si el ancho es mayor que el contenido) */
}
/* Estilos para el enlace dentro del menú (a.nav-link) */
.navbar-nav .nav-item .nav-link {
  /*white-space: normal;*/        /* Permite que el texto se divida en varias líneas si es necesario */
  word-wrap: break-word;      /* Rompe palabras largas para que no desborden el contenedor */
  line-height: 1.4;           /* Ajusta el espacio entre líneas para mejorar la legibilidad */
}

/*marge izquierdo en los elementos de navegación: idioma, buscador...*/
/*ancho fijo en los elementos de navegación: idioma, buscador...*/
/*div#top-banner-navigation .nav-item {
    width: 40px;
}*/

/* Solo para el menú de idiomas/superior */
#top-banner-navigation .navbar-nav .nav-link {
  --bs-nav-link-padding-y: 0.2rem;
/*  --bs-nav-link-padding-x: 0.5rem;*/
}

/* 1. Volvemos al flex para que la alineación sea perfecta */
.navbar-nav .nav-link.dropdown-toggle {
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
    text-decoration: none !important; /* El botón NO se subraya */
}

/* 2. El subrayado solo ocurre en el SPAN cuando pasamos el ratón */
.navbar-nav .nav-link.dropdown-toggle:hover .link-text {
    text-decoration: underline !important;
}

/* 3. El icono (after) queda totalmente fuera del subrayado */
.nav-link.dropdown-toggle::after {
    text-decoration: none !important;
}

/* Elimina el tamaño del 100% que se aplica al logo, para que el menú ocupe el máximo posible. Antes mind-width:992px*/
@media (min-width: 1025px) {
  nav .navbar-brand {
    width: unset;
  }
}

@media (max-width: 1024px) {
  nav .navbar-brand {  /* Añade el tamaño del 100% que se aplica al logo, para que el menú hamburguesa queda alineada a la derecha. Antes max-width:991px*/
    width: 100%;
  }
  .dropdown-item{  
    white-space:break-spaces; /* Permite que el texto se divida en varias líneas si es necesario */   
   }
}

/*.swiper-controls .swiper-pagination{
bottom: 10px;
  bottom: auto !important;
  position: relative !important;
  margin-top: 2rem;
}*/

.swiper-controls .swiper-pagination {
    /* Mueve la paginación fuera del flujo del swiper-controls */
    position: absolute !important; 
    
    /* Coloca la paginación en la parte inferior del contenedor *principal* */
    bottom: 0rem !important; /* Valor negativo para forzar la salida y separación */
    
    /* Asegura que no se vea afectada por propiedades de margen superior */
    margin-top: 0 !important; 
    
    /* Permite hacer clic en los bullets */
    pointer-events: all !important; 
    
    /* Asegura que esté por encima de otros elementos, si es necesario */
    z-index: 20 !important;
}

/*Se desactiva el content para que la herramienta de accesibilidad web developer tools, no muestre un error*/
.post-meta li:before {
  content: none; /*unset; <<- con unset da un error el informe del OAW*/
}

/*Cuando se hace click en el menú padre para desplegar el submenú, el bloque submenú aparece alineado a la derecha del menu padre*/
.dropdown-menu, .dropdown-menu[data-bs-popper] {
  left: unset;
  right:0;
}

/*Los enlaces de nivel superior que tienen submenús, han de declararse como <button> en drupal. Button tiene sus propios estilos, por lo que los sobreescribo*/
.navbar-nav .nav-item button, .sitemap button{
   background-color: transparent;
   border: 0;
}

/*El botón de volver al principio siempre estará visible, independientemente del dispositivo móvil*/
.progress-wrap.active-progress {
        opacity: 1;
}


/************** Buscador *************/
/* Sobrescribe el ancho del campo de búsqueda */
#edit-key {
    /* Por ejemplo, 80% del contenedor. */
    width: 99%; 
    /* O forzar un ancho fijo, aunque no es responsive: */
    /* max-width: 500px; */
}

/* También puedes apuntar al contenedor DIV si el problema es el layout */
.js-form-item-key {
    flex-grow: 1; /* Darle más espacio en una fila flexbox */
}


/************** Este CSS solo aplica estilos visuales, no de disposición (layout) *********/

/* --- NUEVOS ESTILOS PARA EL SEPARADOR VERTICAL --- */

/* Aplicar una línea vertical a la derecha de cada elemento de lista */
footer .d-flex li {
    /* Padding para separar el borde del contenido/enlace */
    padding-right: 1rem; 
    padding-left: 1rem; 
}

#footer-info-links .d-flex li{
    /* Color de borde oscuro para que contraste con el fondo oscuro del footer */
    border-right: 1px solid #4a4a4a;
}

/* Remover el borde del ÚLTIMO elemento para que la línea no quede al final */
#footer-info-links .d-flex li:last-child {
    border-right: none;
}

/* Asegurar que el espaciado interno de los enlaces no interfiera con el borde */
footer .d-flex li a {
    padding: 0; /* Quitamos el padding del enlace y lo ponemos en el LI */
}

/* --- MEDIA QUERY PARA MÓVILES --- */
/* Eliminar los separadores verticales en dispositivos móviles para que se apilen mejor */
@media (max-width: 767.98px) {
    footer .d-flex li {
        border-right: none; /* Elimina la línea vertical en móvil */
        padding-left: 0.5rem; /* Ajuste de padding */
        padding-right: 0.5rem;
    }
    #footer-social-links ul li{
        margin-top: 1rem;
        margin-bottom: 1rem;	
    }
}

/* Recuadrar enlaces cuando se pasa por encima */
/*a:hover{
    text-decoration: underline;
}*/
/*a:hover, button:hover{
    outline: 2px solid #000000;
    border-radius: 2px;
}*/

/* IMPORTANTE: Asegúrate de que el summary tenga el foco de teclado también (Accesibilidad) */
summary:focus {
    outline: 2px solid #000000;
    outline-offset: -2px;
}


/* aumentar la pelotita en los carruseles */
.swiper-controls .swiper-pagination .swiper-pagination-bullet{
    width:1rem;    
    height:1rem;    
}

.text-formatted img, .post-content img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* aumentar la separación del subrayado en los enlaces de idioma de la cabecera*/
.language-link{
  text-underline-offset: 0.25rem;
}

@media (min-width:1025px) {
  .d-lg-none{
    display: none !important;
  }
}

/* =========================================================================
   ESTILO IMCE FILE MANAGER
   ========================================================================= */
/* */
.folder{
    display: block;
}


/* ==========================================================================
   ESTILOS DEL ACCORDION (DETAILS/SUMMARY)
   ========================================================================== */

/* 1. CONTENEDOR PRINCIPAL (LA TARJETA) */
.accordion-wrapper .card {
    overflow: visible; /* Importante para que el outline no se corte */
    position: relative;
    margin-bottom: 1.25rem;
    border: 1px solid #ebeef2;
    background-color: #fff;
}

/* 2. SUMMARY (CABECERA) - Estilos Base */
.accordion-wrapper summary.accordion-title {
    display: block;      /* Quita flecha nativa */
    list-style: none;    /* Quita marker en Firefox */
    cursor: pointer;
    position: relative;
    padding: 0.9rem 1.3rem 0.85rem 3rem;
/*    font-size: 0.9rem !important;
    font-weight: 700;
    color: #343f52;
    background: none;*/
    transition: all 150ms ease-in-out;
}

/* Quitar marker en Chrome/Safari */
.accordion-wrapper summary::-webkit-details-marker {
    display: none;
}

/* 3. TÍTULOS (H2, H3, H4...) DENTRO DEL ACORDEÓN 
   Eliminamos el margen inferior para que el alineamiento sea perfecto */
.accordion-wrapper summary.accordion-title h2,
.accordion-wrapper summary.accordion-title h3,
.accordion-wrapper summary.accordion-title h4,
.accordion-wrapper summary.accordion-title .h2,
.accordion-wrapper summary.accordion-title .h3,
.accordion-wrapper summary.accordion-title .h4 {
    margin-bottom: 0 !important; 
    line-height: 1.2;
    font-size: 0.9rem !important;
    font-weight: 700;
    color: inherit; /* Hereda el color del estado del summary */
    display: inline-block;
    vertical-align: middle;
}

/* 4. ICONO (PSEUDO-ELEMENTO) */
.accordion-wrapper summary.accordion-title:before {
    font-family: "Unicons";
    content: "\e92d"; /* Flecha cerrada */
    position: absolute;
    left: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.15rem;
    font-weight: normal;
    color: #006eb7;
    transition: all 0.2s ease;
}

/* 5. ESTADOS: HOVER Y FOCO (ACCESIBILIDAD) */
.accordion-wrapper summary.accordion-title:hover{
    color: #006eb7;
    background-color: #deeef7; /*#f8f9fa;*/
}
.accordion-wrapper summary.accordion-title:focus-visible {
    color: #006eb7;
    background-color: #deeef7; /*#f8f9fa;*/
    outline: 2px solid #000000;
    outline-offset: 3px; /*El foco "flota" fuera del borde*/ /*-2px;*/ /* Dibuja el borde hacia adentro */
    border-radius: 4px;
    z-index: 5;
}

/* 6. ESTADO ABIERTO Y CONTRASTE (DETAILS OPEN) Sustituimos el azul claro por uno que cumpla ratio 4.5:1 */
details[open] summary.accordion-title {
    color: #006eb7; /*#0052cc;*/ /*3f78e0*/
}

details[open] summary.accordion-title:before {
    content: "\e932"; /* Flecha abierta */
    color: #006eb7; /*#0052cc;*//*3f78e0*/
}

/* 7. CONTENIDO INTERIOR */
.accordion-wrapper .accordion-content {
    padding: 1rem 1.3rem 1.25rem 2.8rem;
    border-top: 1px solid #ebeef2;
    font-size: 0.9rem;
    color: #343f52; /* Color oscuro para legibilidad */ /*#60697b;*/
}

.accordion-wrapper .accordion-content p:last-child {
    margin-bottom: 0;
}

/* 8. ACCESIBILIDAD: CONTROL DE MOVIMIENTO */
/* Criterio 2.2.2: Evitar distracciones si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .accordion-wrapper summary.accordion-title,
    .accordion-wrapper summary.accordion-title:before {
        transition: none !important;
    }
}

/****************************************************************************************/
/** Altura mínima que se usa en el contenedor de los titulos de las tarjetas que quedan */
/** escalonadas cuando se ve en dispositivos tipo tablets de este modo se mantiene una  */
/*altura y las imágenes de las tarjetas quedan alineadas */
.mh-title {
  min-height: auto;
}

@media (min-width: 992px) and (max-width: 1399.9px){
  .mh-title {
    min-height: 110px; /* Ajusta según lo que ocupe tu H2 en dos líneas */
    /*display: flex;
    align-items: center;*/
  }
}

/***************************/
.enlace-tarjeta{
    text-decoration: none;
    font-weight: 700;
}


/*********************************************************************************************/
/** Subrayado de navigation-other y los iconos social del footer                            **/
/*********************************************************************************************/

/* 1. Contenedor Base: Congelamos el tamaño */
.social a.no-underline,
#block-navigationother .navbar-nav .nav-item a,
#block-navigationother .navbar-nav .nav-item button.nav-link {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;      /* Altura fija */
    padding: 0 10px !important;    /* Espacio lateral fijo */
    margin: 0 !important;   /* Espacio lateral para que el fondo no pegue al icono */
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
    /* Eliminamos cualquier animación de movimiento del contenedor */
    transition: none !important;
    transform: none !important;
    vertical-align: middle;
    line-height: 1 !important;
}

/* 2. El subrayado: Es lo único que se animará */
.social a.no-underline::after,
#block-navigationother .navbar-nav .nav-item a::after,
#block-navigationother .navbar-nav .nav-item button.nav-link::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 2px;           /* 2px por encima la caja de 32px */
    height: 2px;
    background-color: currentColor;
    opacity: 0;
    transform: scaleX(0);
    /* Solo animamos la línea */
    /*transition: opacity 0.2s ease, transform 0.2s ease !important;*/
    pointer-events: none;
}

/* 3. Hover: CERO movimiento para el icono */
.social a.no-underline:hover,
#block-navigationother .navbar-nav .nav-item a:hover,
#block-navigationother .navbar-nav .nav-item button.nav-link:hover {
    transform: none !important; /* Forzamos que el icono NO se eleve */
    color: #ffffff !important;
}

/* Activamos solo la línea */
.social a.no-underline:hover::after,
#block-navigationother .navbar-nav .nav-item a:hover::after,
#block-navigationother .navbar-nav .nav-item button.nav-link:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

/* 4. Reset de los SVGs internos */
.icon-svg.icon-svg-xxs,
#block-navigationother svg {
/*    width: 20px !important;
    height: 20px !important;*/
    display: block !important;
    position: static !important; /* Evita que el SVG se mueva solo */
    margin: 0 !important;
    padding: 0 !important;
    transition: none !important; /* Evita que el SVG herede animaciones */
}

/* 5. Limpieza final de estilos de Bootstrap/Drupal */
svg:hover {
    border: none !important;
    outline: none !important;
}