/* General para las tarjetas */
.resource-card {
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden; /* Asegura que el contenido no se desborde */
    background-color: #fff;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 0; /* Elimina el padding interno para el ajuste de la imagen */
}

.resource-card:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

/* Estilo para la imagen */
.resource-image-recursos-2025 {
    width: 100%;
    height: auto; /* Permite que la altura se ajuste automáticamente */
    aspect-ratio: 16 / 9; /* Mantiene la proporción */
    object-fit: cover;
    display: block; /* Elimina cualquier espacio extra alrededor */
    transition: transform 0.3s ease; /* Transición suave para el efecto de zoom */
  
}

/* Efecto de zoom al pasar el mouse sobre la tarjeta */
.resource-card:hover .resource-image-recursos-2025 {
    transform: scale(1.1); /* Aumenta el tamaño de la imagen al 110% */
}


/* Estilo para el título, asegurando que ocupe 3 líneas */
.titulos-recursos-2025 {
    font-family: 'Roboto', sans-serif; /* Aplica la fuente Roboto */
    font-size: 1.4rem; /* Ajusta el tamaño de la fuente según lo necesites */
    line-height: 1.3; /* Ajusta el interlineado para facilitar la ocupación de líneas */
    display: -webkit-box; /* Se necesita para la limitación de líneas */
    -webkit-line-clamp: 6; /* Limita el número de líneas a 3 */
    -webkit-box-orient: vertical; /* Necesario para que funcione el recorte */
    overflow: hidden; /* Oculta el texto que se desborda */
    text-overflow: ellipsis; /* Agrega puntos suspensivos si el texto es más largo que 3 líneas */
    height: calc(6 * 1.4rem); /* Ajusta la altura para que coincida con 3 líneas */
    margin: 0; /* Elimina cualquier margen extra si es necesario */
    padding-top: 0; /* Elimina cualquier padding superior */
    margin-top: -5px; /* Ajusta este valor para reducir el espacio superior */
}

/* Cambio de color del título al pasar el mouse sobre la tarjeta */
.resource-card:hover .titulos-recursos-2025 {
    color: #1dd013; /* Color verde */
}

/* Establecer el color original cuando el mouse no esté sobre la tarjeta */
.titulos-recursos-2025 {
    color: #000; /* Color negro por defecto */
}


/* Estilo para el botón de descarga */
.boton-recursos-descarga-2025 {
  background-color: #1dd013;
  color: white;
  padding: 10px 18px;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  transition: all 0.3s ease; /* Suaviza la transición */
}

.boton-recursos-descarga-2025:hover {
  transform: scale(1.05); /* Agranda el botón ligeramente */
  text-decoration: none; /* Elimina el subrayado */
  background-color: #000000; /* Cambia el fondo a negro */
  color: #ffffff; /* Asegura que el texto siga siendo visible */
}


.boton-recursos-descarga-2025:active {
  background-color: #000000; /* Fondo negro al hacer clic */
}



/* Estilo para el "tipo" */
.resource-type {
    font-weight: bold; /* Texto en negrita */
    font-size: 1rem; /* Ajusta el tamaño de la fuente */
    margin-top: 10px; /* Espacio entre la imagen y el texto */
    color: #A6A4A4; /* Color del texto */
}

/* Ajuste del espacio entre la imagen y el contenido */
.resource-content {
    padding: 15px;
    text-align: left;
    margin-top: 15px; /* Aumenta el espacio entre la imagen y el contenido textual */
}



/* Contenedor de la cuadrícula */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    gap: 20px;
    padding: 20px;
}

/* PAGINACIÓN */

/* Contenedor de paginación */
.nueva-paginacion-2025 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 20px; /* Espaciado general entre "Anterior", números y "Siguiente" */
    font-family: 'Roboto', sans-serif; /* Fuente Roboto */
}

/* Botones "Anterior" y "Siguiente" */
.nueva-paginacion-2025 .pagination-prev,
.nueva-paginacion-2025 .pagination-next {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre texto y flecha */
    cursor: pointer;
    font-weight: bold;
    font-size: 1.2rem;
    color: #000;
    transition: transform 0.3s ease, color 0.3s ease;
    margin: 0 10px; /* Espaciado adicional a los lados */
}

/* Hover en "Anterior" y "Siguiente" */
.nueva-paginacion-2025 .pagination-prev:hover,
.nueva-paginacion-2025 .pagination-next:hover {
    color: #1dd013; /* Cambia el color del texto */
}

/* Flechas dentro de "Anterior" y "Siguiente" */
.nueva-paginacion-2025 .pagination-prev i,
.nueva-paginacion-2025 .pagination-next i {
    font-size: 1.2rem; /* Tamaño inicial de las flechas */
    transition: transform 0.3s ease, font-size 0.3s ease; /* Animación suave */
}

/* Hover para agrandar solo las flechas */
.nueva-paginacion-2025 .pagination-prev:hover i {
    font-size: 1.5rem; /* Agranda la flecha */
    transform: translateX(-5px); /* Mueve la flecha hacia la izquierda */
}

.nueva-paginacion-2025 .pagination-next:hover i {
    font-size: 1.5rem; /* Agranda la flecha */
    transform: translateX(5px); /* Mueve la flecha hacia la derecha */
}

/* Botones numéricos de paginación */
.nueva-paginacion-2025 .pagination-button {
    font-size: 15px; /* Agranda la flecha */
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 5px 10px;
    cursor: pointer;
    color: #1dd013; /* Verde */
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
    outline: none;
}

/* Hover en los botones de paginación */
.nueva-paginacion-2025 .pagination-button:hover {
    background-color: #1dd013;
    color: #fff;
    outline: none;
}

/* Estilo activo para el botón numérico */
.nueva-paginacion-2025 .pagination-button.active {
    background-color: #000;
    color: #fff;
    font-weight: bold;
    outline: none;
}

/* Iconos de FontAwesome */
.nueva-paginacion-2025 i {
    font-size: 1.2rem; /* Tamaño del ícono */
}

/* Contenedor general para el total y filtros */
.filter-container-new-2025 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif;
}

 
/* Estilo para el total de cards */
.total-cards-new-2025 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    transition: color 0.3s ease; /* Efecto suave para el cambio de color */
}

/* Estilo cuando se pasa el mouse sobre el texto */
.total-cards-new-2025:hover  {
    color: #1dd013; /* Color verde cuando se pasa el mouse */
}



/* Contenedor principal del filtro con icono */
.select-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Icono de FontAwesome (lista) */
.select-container .fa-list {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #9e9e9e;
}

/* Estilo del select: ocultamos la flecha predeterminada */
.filters-new-2025 select {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    padding: 10px 10px 10px 35px; /* Espacio para el icono de la lista a la izquierda */
    padding-right: 35px; /* Añadimos espacio para la flecha a la derecha */
    border-radius: 8px;
    border: 2px solid #ccc;
    background-color: #fff;
    cursor: pointer;
    appearance: none; /* Eliminar la flecha predeterminada */
    -webkit-appearance: none; /* Asegurar que no aparezca en Safari */
    -moz-appearance: none; /* Asegurar que no aparezca en Firefox */
    width: 100%;
}

/* Flecha personalizada a la derecha */
.select-container .arrow {
    position: absolute;
    right: 10px; /* Posición de la flecha a la derecha */
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem; /* Flecha más pequeña */
    color: #9e9e9e;
    pointer-events: none;
}

/* Hover para el select */
.filters-new-2025 select:hover {
    border-color: #1dd013;
}

/* Opcional: Ajustar estilo al enfocar */
.filters-new-2025 select:focus {
    outline: none;
    border-color: #1dd013;
}

.checkbox-container {
    display: flex;
    flex-direction: column; /* Apila los elementos en una columna */
    gap: 2px; /* Espaciado uniforme entre las filas */
    margin: 10px 0;
    font-size: 14px;
    font-family: Roboto, sans-serif;
}

label {
    display: flex; /* Asegura que el contenido esté en una línea */
    align-items: center; /* Alinea checkbox y texto verticalmente */
    gap: 10px; /* Espaciado entre el checkbox y el texto */
    cursor: pointer; /* Hace el label clickeable */
    width: 100%; /* Asegura que el label ocupe toda la fila disponible */
    min-height: 30px; /* Define una altura mínima uniforme */
    box-sizing: border-box; /* Incluye padding y border en el cálculo del ancho y alto */
}

label input[type="checkbox"] {
    flex-shrink: 0; /* Evita que el checkbox cambie de tamaño */
}

.type-checkbox,
.tech-checkbox,
.case-checkbox,
.sector-checkbox {
    appearance: none; /* Elimina el estilo predeterminado */
    width: 18px;
    height: 18px;
    border: 2px solid #ccc; /* Borde gris por defecto */
    border-radius: 4px; /* Esquinas redondeadas */
    background-color: #fff; /* Fondo blanco */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.type-checkbox:hover,
.tech-checkbox:hover,
.case-checkbox:hover,
.sector-checkbox:hover {
    border-color: #1dd013; /* Cambia el borde al verde */
    box-shadow: 0 0 5px rgba(29, 208, 19, 0.5); /* Efecto de sombra suave */
}

.type-checkbox:checked,
.tech-checkbox:checked,
.case-checkbox:checked,
.sector-checkbox:checked {
    background-color: #1dd013; /* Fondo verde al seleccionarla */
    border-color: #1dd013; /* Borde verde */
    box-shadow: 0 0 5px rgba(29, 208, 19, 0.5); /* Mantiene la sombra */
}

.type-checkbox:checked::after,
.tech-checkbox:checked::after,
.case-checkbox:checked::after,
.sector-checkbox:checked::after {
    content: '\f00c'; /* Ícono de Font Awesome (check) */
    font-family: 'Font Awesome 5 Free'; /* Asegúrate de cargar Font Awesome */
    font-weight: 800;
    color: #fff; /* Color del ícono */
    font-size: 8px;
    display: block;
}





/*/
/* Contenedor principal */
.main-container {
  display: grid;
  grid-template-columns: 1fr 5fr; /* Mayor espacio para la columna derecha */
  gap: 20px; /* Espacio entre columnas */
  padding: 20px;
  font-family: 'Roboto', sans-serif;
  align-items: start; /* Asegurar alineación en la parte superior */
}

/* Estilo para la columna izquierda (Filtros) */
.left-column {
  padding: 10px;

  /* Reducir el tamaño con márgenes */
  margin-right: 10px; /* Espacio visual para ajustarse con la derecha */
}

/* Estilo para la columna derecha (Contenido principal) */
.right-column {
  padding: 10px;

  min-height: 100%;
}

/* Estilado para la cuadrícula de recursos */
.resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 10px;
}

/* Estilado para las tarjetas de recursos */
.resource-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  padding: 5px;
}

/* Pagos visuales para las tarjetas */
.resource-image-recursos-2025 {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.resource-tecnologia, .resource-casos, .resource-sector, .resource-contenido {
  position: absolute;
  left: -9999px;
}

/* Contenedor principal del buscador */
.search-container-2025 {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Espaciado más compacto */
    margin: 10px 0;
    font-family: Roboto, sans-serif;
    font-size: 13px; /* Tamaño de texto reducido */
    color: #333;
}

/* Etiqueta del buscador */
.search-container-2025 label {
    font-weight: bold; /* Negrita */
    font-size: 18px; /* Tamaño de texto más grande */
    color: #555; /* Color ligeramente más oscuro */
}

/* Contenedor del campo de texto e icono */
.search-bar-wrapper-2025 {
    display: flex;
    align-items: center;
    background-color: #fff; /* Fondo blanco */
    border: 1px solid #ccc; /* Borde más delgado */
    border-radius: 6px; /* Bordes ligeramente redondeados */
    padding: 4px 8px; /* Espaciado interno reducido */
    gap: 6px; /* Espacio más pequeño entre el icono y el input */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%; /* Asegura que el contenedor ocupe el espacio disponible */
    max-width: 300px; /* Tamaño máximo para evitar que sea demasiado ancho */
    flex-direction: row-reverse; /* Coloca el icono a la derecha */
}

/* Icono de búsqueda */
.search-bar-wrapper-2025 i {
    color: #aaa; /* Color inicial del ícono */
    font-size: 14px; /* Tamaño reducido del ícono */
    margin-left: 8px; /* Margen a la izquierda para dar espacio */
    transition: color 0.3s ease; /* Transición suave para el cambio de color */
}

/* Campo de texto */
.search-bar-wrapper-2025 input {
    border: none; /* Sin borde adicional */
    outline: none; /* Sin borde al hacer clic */
    flex: 1; /* Toma todo el espacio disponible */
    font-size: 13px; /* Texto más pequeño */
    background-color: transparent; /* Fondo claro */
    color: #333; /* Texto oscuro */
}

/* Estilo de borde y sombra al hacer foco en el input */
.search-bar-wrapper-2025 input:focus {
    border: none; /* Asegura que no aparezca un borde interno */
    outline: none; /* Asegura que no aparezca un borde al enfocar */
}

.search-bar-wrapper-2025:hover,
.search-bar-wrapper-2025:focus-within {
    border-color: #1dd013; /* Cambia el borde del contenedor al verde */
    box-shadow: 0 0 3px rgba(29, 208, 19, 0.3); /* Sombra más sutil */
}

/* Cambiar color del icono cuando el contenedor está enfocado */
.search-bar-wrapper-2025:focus-within i {
    color: #1dd013; /* Cambia el color del icono a verde */
}

/* Placeholder estilizado */
.search-bar-wrapper-2025 input::placeholder {
    color: #aaa;
    font-style: normal; /* Sin cursiva */
}


/* Ajustes específicos para pantallas pequeñas */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column; /* Organiza las columnas en una sola fila en pantallas pequeñas */
    }

    .left-column, .right-column {
        width: 100%; /* Las columnas ocuparán el 100% del ancho disponible */
        padding: 0; /* Elimina el padding en pantallas pequeñas para evitar desbordamiento */
    }
}

/* En la grilla de las tarjetas, evitar que se salgan del contenedor */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100%;
    box-sizing: border-box; /* Asegura que el espacio entre elementos no haga que se desborden */
}

/* Asegurando que las tarjetas tengan un tamaño adecuado y no se desborden */
.resource-card {
    width: 100%; /* Se asegura que las tarjetas no excedan el ancho del contenedor */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 15px;
    box-sizing: border-box; /* Asegura que el padding no cause desbordamiento */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: white;
    transition: all 0.3s ease;
}

/* Media Query para pantallas pequeñas (menos de 768px) */
@media (max-width: 768px) {
    .resources-grid {
        grid-template-columns: repeat(3, 1fr); /* Tres columnas */
        gap: 15px; /* Mantener un pequeño espacio entre las tarjetas */
    }
    
    .resource-card {
        padding: 10px;
        width: 100%; /* Asegura que las tarjetas no salgan del contenedor */
    }
  .nueva-paginacion-2025 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 20px; /* Espaciado general entre "Anterior", números y "Siguiente" */
    font-family: 'Roboto', sans-serif; /* Fuente Roboto */
}

/* Botones "Anterior" y "Siguiente" */
.nueva-paginacion-2025 .pagination-prev,
.nueva-paginacion-2025 .pagination-next {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre texto y flecha */
    cursor: pointer;
    font-weight: bold;
    font-size: 0.5rem;
    color: #000;
    transition: transform 0.3s ease, color 0.3s ease;
    margin: 0 10px; /* Espaciado adicional a los lados */
}

/* Hover en "Anterior" y "Siguiente" */
.nueva-paginacion-2025 .pagination-prev:hover,
.nueva-paginacion-2025 .pagination-next:hover {
    color: #1dd013; /* Cambia el color del texto */
}
}

/* Media Query para pantallas muy pequeñas (menos de 480px) */
@media (max-width: 480px) {
    .resources-grid {
        grid-template-columns: 1fr; /* Una sola columna en pantallas muy pequeñas */
        gap: 10px; /* Reduce el espacio entre tarjetas */
    }

    .resource-card {
        padding: 8px; /* Aumenta el padding para que las tarjetas tengan un buen espaciado */
    }

    .resource-image-recursos-2025 {
        max-height: 150px; /* Más pequeño en pantallas muy pequeñas */
    }

    .titulos-recursos-2025 {
        font-size: 0.9rem; /* Reduce más el tamaño de los títulos */
        height: auto; /* Ajusta la altura del título */
    }

    .boton-recursos-descarga-2025 {
        font-size: 10px; /* Botón aún más pequeño */
        padding: 6px 12px; /* Acomoda el tamaño del botón */
    }
}