/* assets/css/catalogo.css */

.catalogo-hero-title {
    margin: 0;
}
.catalogo-hero-subtitle {
    margin-top: 10px;
}

/* --- Barra de Búsqueda (Versión Final sin Choques) --- */
.catalogo-search-wrapper {
    margin-top: -40px; 
    display: flex; 
    /* Aumentamos el gap para que no choquen */
    gap: 20px; 
    flex-wrap: nowrap; 
    justify-content: space-between;
    background: white;
    padding: 20px 30px; 
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1); 
    align-items: center;
    
    /* Estirado al máximo del contenedor */
    width: 100%; 
    max-width: 1200px; 
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box; /* Crucial para que el padding no "infle" el ancho */
}

/* El buscador principal */
.catalogo-input-container {
    flex: 3; /* Le damos más prioridad de crecimiento */
    min-width: 250px;
}

/* Los filtros */
.catalogo-select {
    flex: 1; 
    min-width: 170px; /* Ancho suficiente para que no se encime el texto */
    padding: 12px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    background-color: #ffffff;
    
    /* Evita que el navegador le quite espacio al texto */
    white-space: nowrap; 
}

/* Ajuste fino para el input de texto */
.catalogo-input-text {
    width: 100%; 
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    box-sizing: border-box;
}

/* Tarjetas de Proyectos */
.proyecto-item {
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    text-align: left; 
    min-height: 280px;
}
.proyecto-tag-wrapper {
    margin-bottom: 15px;
}
.proyecto-titulo {
    margin: 0 0 10px 0; 
    color: var(--azul-oscuro); 
    font-size: 1.3rem; 
    line-height: 1.3;
}
.proyecto-autor {
    font-size: 0.95rem; 
    color: #666; 
    margin-bottom: 12px;
}
.proyecto-resumen {
    color: #555; 
    font-size: 0.95rem; 
    line-height: 1.5; 
    margin: 0 0 20px 0;
}
.proyecto-footer {
    margin-top: auto;
}
.proyecto-link-btn {
    font-size: 1rem;
}

/* --- Barra de Búsqueda (Corregida para una sola fila) --- */
.catalogo-search-wrapper {
    margin-top: -30px; 
    display: flex; 
    gap: 10px; 
    flex-wrap: nowrap; /* CRITICAL: Evita que se baje a la siguiente fila */
    justify-content: space-between;
    background: white;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    align-items: center;
}

.catalogo-input-container {
    flex: 2; /* El buscador ocupa más espacio */
}

.catalogo-input-text, .catalogo-select {
    width: 100%; 
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.9rem; /* Tamaño de letra ajustado */
    outline: none;
}

.catalogo-select {
    flex: 1; /* Los filtros ocupan menos espacio */
    min-width: 120px;
}

/* --- Colores Diferentes por Categoría --- */
/* Clase base para TODOS los tags del sitio */
.meta-badge, .badge-tipo, .project-tag {
    display: inline-flex;    /* Permite centrado interno */
    align-items: center;     /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    
    /* Dimensiones Uniformes */
    min-width: 100px;        /* Ancho base para que todos se vean iguales */
    height: 28px;            /* Altura fija */
    
    /* Estética */
    padding: 0 12px;         /* Espacio interno a los lados */
    font-size: 0.75rem;      /* Tamaño de letra constante */
    font-weight: 700;        /* Negrita para legibilidad */
    border-radius: 20px;     /* Bordes redondeados */
    text-transform: uppercase;
    text-align: center;
    border: none;            /* Elimina bordes si los hubiera */
}

/* Ajuste específico por si el texto es muy largo (como "Memorias de Congreso") */
.badge-tipo {
    min-width: 110px;        /* Un poquito más ancho para que quepa bien el texto */
}

/* Colores personalizados usando el texto del badge */
.badge-tipo:contains-text("ARTÍCULO"), 
.badge-tipo:nth-child(2) { /* Fallback o si prefieres clases específicas */
    background: #e3f2fd; color: #1976d2; 
}

/* Opción recomendada: Colores por contenido (Jekyll añade el texto) */
/* Agregamos estas clases para usarlas en el MD */
.tipo-tesis { background: #f3e5f5; color: #7b1fa2; }
.tipo-articulo { background: #e8f5e9; color: #2e7d32; }
.tipo-congreso { background: #fff3e0; color: #ef6c00; }
.tipo-prototipo { background: #ffebee; color: #c62828; }
/* Color para Memorias de Congreso - Un tono morado/índigo elegante */
.tipo-memorias-de-congreso, 
.tipo-memorias-congreso,
.tipo-memorias {
    background-color: #E8EAF6 !important; /* Fondo azul/lavanda claro */
    color: #3F51B5 !important;           /* Texto índigo */
}

/* Por si el slug de Liquid no quita los espacios (dependiendo de tu configuración) */
[class*="Memorias de Congreso"] {
    background-color: #E8EAF6 !important;
    color: #3F51B5 !important;
}

.badge-estadia {
    background-color: #f3e5f5; /* Un lila muy suave */
    color: #7b1fa2;           /* Texto morado */
    border: 1px solid #d1c4e9;
}

.badge-estancia {
    background-color: #e3f2fd; /* Azul cielo claro */
    color: #1976d2;           /* Texto azul */
    border: 1px solid #bbdefb;
}

/* Botón Limpiar con fondo blanco y estilo minimalista */
#btnLimpiar {
    background-color: #ffffff;    /* Fondo blanco puro */
    color: #003366;               /* Azul institucional */
    border: 1px solid #ced4da;    /* Mismo gris que los selectores */
    border-radius: 8px;           /* Misma redondez que los demás */
    padding: 0 20px;              /* Espaciado lateral */
    height: 45px;                 /* Altura igual a los selectores */
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: none;         /* Menos agresivo que mayúsculas */
}

/* Efecto hover: un cambio sutil de fondo y borde */
#btnLimpiar:hover {
    background-color: #f8f9fa;    /* Gris casi blanco */
    border-color: #003366;        /* El borde se vuelve azul al pasar el mouse */
    color: #002244;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Para asegurar que todo esté alineado en la misma fila */
.catalogo-search-wrapper {
    display: flex;
    gap: 10px;
    align-items: flex-end; /* Alinea las bases de todos los elementos */
    margin-bottom: 20px;
}
*/

/* Ajuste para que los filtros se vean alineados en la misma fila */
.catalogo-search-wrapper {
    display: flex;
    gap: 12px;
    align-items: stretch; /* Hace que todos tengan la misma altura */
    flex-wrap: wrap;
    margin-bottom: 25px;
}

/* Asegurar que el input de búsqueda sea un poco más largo */
.catalogo-input-container {
    flex: 2;
    min-width: 250px;
}

.catalogo-select {
    flex: 1;
    min-width: 180px;
}

/* Color del círculo para Capítulo de Libro / Memorias de Congreso */
.tipo-capitulo-de-libro::before, 
.tipo-memorias-de-congreso::before,
.tipo-investigacion::before {
    background-color: #3F51B5; /* Color Índigo para resaltar que es científico */
}

.tipo-capitulo-de-libro,
.tipo-memorias-de-congreso {
    background-color: #E8EAF6 !important; /* Lavanda muy claro */
    color: #3F51B5 !important;           /* Texto Índigo */
}