/**
 * Estilos para Programas
 * Diseño de cards con filtros y colores por categoría
 */

/* === FUENTES === */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;500;600&display=swap');

/* Fallback para Söhne - usando Source Sans Pro como similar */
@font-face {
    font-family: "Söhne";
    src: local('Source Sans Pro'), local('SourceSansPro-Medium');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* === CONTENEDOR PRINCIPAL === */
.programas-container {
    max-width: 100%; /* Casi pantalla completa */
	margin:0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* === FILTROS === */
.programas-filters,
.programas-filters-only {
    margin-bottom: 40px;
}

.programas-filters h3,
.programas-filters-only h3 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

.filters-pills {
    display: flex;
    flex-wrap: nowrap; /* No permitir salto de línea */
    gap: 0;
    align-items: center;
    width: 100%;
    justify-content: flex-start; /* Botones pegados desde el inicio */
}

.filter-pill {
    background: white;
    border: 1px solid #d0d0d0;
    border-radius: 50px; /* 100% redondo */
    padding: 10px 20px; /* Padding normal */
    margin: 0;
    /* Sin flex: ancho natural según contenido */
    text-align: center;
    font-family: "Söhne", Sans-serif !important;
    font-size: clamp(6px, 1.2vw, 20px) !important; /* Font-size muy adaptativo */
    font-weight: 400 !important;
    color: #000 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Sin overflow hidden - texto siempre visible */
}

/* Filtros con borde de color por defecto */
.filter-pill.with-border {
    border: 2px solid var(--pill-color, #d0d0d0);
}

.filter-pill:hover {
    background: var(--pill-color, #bbb);
    border-color: var(--pill-color, #bbb);
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.filter-pill.active {
    background: var(--pill-color, #333);
    border: 2px solid var(--pill-color, #333);
    color: white !important;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Filtro "Todos" especial - Sin seleccionar por defecto */
.filter-pill[data-category="all"] {
    background: white;
    border: 1px solid #d0d0d0;
    color: #666;
}

/* Estilos específicos para filtros según colores exactos */
.filter-pill[data-category="valoracion-y-diagnostico"].active {
    border-color: #FF6B35;
}

.filter-pill[data-category="atencion-temprana"].active {
    border-color: #FFC107;
}

.filter-pill[data-category="atencion-en-etapa-educativa"].active {
    border-color: #4CAF50;
}

.filter-pill[data-category="atencion-en-la-vida-adulta"].active {
    border-color: #9C27B0;
}

.filter-pill[data-category="atencion-a-las-familias"].active {
    border-color: #00BCD4;
}

.filter-pill[data-category="ocio"].active {
    border-color: #9E9E9E;
}

.filter-pill[data-category="deporte"].active {
    border-color: #2196F3;
}

/* === GRID DE PROGRAMAS === */
.programas-grid {
    display: grid;
    gap: 20px;
    margin-top: 20px;
    align-items: stretch; /* Hace que todas las cards tengan la misma altura */
}

/* Grid de 3 columnas que ocupan 100% del ancho */
.programas-grid[data-columns="1"] {
    grid-template-columns: 1fr;
}

.programas-grid[data-columns="2"] {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr; /* Fuerza altura uniforme */
}

.programas-grid[data-columns="3"] {
    grid-template-columns: 1fr 1fr 1fr; /* 3 columnas iguales */
    grid-auto-rows: 1fr; /* Fuerza altura uniforme */
}

.programas-grid[data-columns="4"] {
    grid-template-columns: 1fr 1fr 1fr; /* También 3 columnas para data-columns="4" */
    grid-auto-rows: 1fr; /* Fuerza altura uniforme */
}

/* Por defecto, usar 3 columnas */
.programas-grid {
    grid-template-columns: 1fr 1fr 1fr;
}

/* === CARDS DE PROGRAMA === */
.programa-card {
    background: #EDECE8;
    border-radius: 16px;
    padding: 32px 24px 60px 24px; /* Más padding-bottom para espacio del enlace absoluto */
    transition: all 0.3s ease;
    position: relative; /* Necesario para posición absoluta del enlace */
    height: auto; /* Auto para no cortar contenido */
    min-height: 420px; /* Altura suficiente */
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: translateY(0);
    border: none;
    overflow: hidden; /* Restaurado para imágenes de hover */
}

/* Hover básico para todas las cards */
.programa-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Cards sin imagen mantienen el hover original */
.programa-card:not([data-bg-image]):hover {
    background: #E6E4DF;
}

/* El hover con imagen se maneja completamente por JavaScript */

/* === CÍRCULOS DE COLORES === */
.programa-colors {
    display: inline-flex;
    background: white;
    border-radius: 20px;
    padding: 8px;
    margin-bottom: 40px; /* Más espacio debajo de los círculos */
    gap: 4px;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    min-width: 40px;
    min-height: 40px;
    justify-content: center;
}

/* Cuando hay un solo círculo, el contenedor debe ser perfectamente circular */
.programa-colors:has(.color-dot:only-child) {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 8px;
}

.color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-block;
    border: none;
    transition: transform 0.2s ease;
    position: relative;
}

/* Al hacer hover, elevar ligeramente el círculo */
.color-dot:hover {
    transform: scale(1.1);
}

/* === CONTENIDO DE LA CARD === */
.programa-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%; /* Ocupar toda la altura disponible */
}

.programa-title {
    font-family: "Söhne", Sans-serif !important;
    font-size: 34px !important;
    font-weight: 500 !important;
    color: #333;
    line-height: 1.3;
    margin: 0;
    flex-grow: 0; /* No crecer */
    flex-shrink: 0; /* No encogerse */
    text-transform: capitalize;
}

/* Excerpt eliminado - solo título y botón */

/* === BOTÓN "MÁS INFORMACIÓN" CON EFECTO DE DESAPARICIÓN === */
.button-group {
    display: inline-flex;
    align-items: center;
    width: 250px;
    margin-right: -33px;
    font-family: "Söhne", Sans-serif;
    font-size: 20px;
}

.programa-enlace {
    display: inline-flex;
    align-items: center;
    width: auto;
    text-decoration: none;
    color: white;
}

/* Flecha circular fija */
.programa-icon-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white; /* Fondo transparente como solicitado */
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, background 0.3s ease;
    flex-shrink: 0;
}

/* Botón de texto */
.programa-text-button {
    background: white; /* Fondo transparente como solicitado */
    cursor: pointer;
    color: black; /* Color oscuro para que sea visible sobre fondo claro */
    align-content: center;
    padding: 5px 15px;
    height: 40px;
    border-radius: 9999px;
    transition: margin-left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Efecto de COLOR al hacer hover en la tarjeta completa */
.programa-card:hover .programa-text-button {
    background: white; /* Fondo blanco en hover de tarjeta */
    color: black; /* Texto negro en hover de tarjeta */
    border-color: black; /* Borde negro en hover de tarjeta */
}

.programa-card:hover .programa-icon-button {
    background: white; /* Fondo blanco en el círculo en hover de tarjeta */
    border-color: black; /* Borde negro para contraste */
}

/* Efecto de MOVIMIENTO al hacer hover específicamente en el botón */
.button-group:hover .programa-icon-button {
    opacity: 0; /* Icono desaparece solo en hover del botón */
}

.button-group:hover .programa-text-button {
    margin-left: -2.3rem; /* Texto se desliza solo en hover del botón */
}

/* Asegurar que el enlace funcione */
.programa-enlace {
    pointer-events: auto;
    z-index: 10;
    position: relative;
}

.button-group {
    pointer-events: auto;
}

/* === ESTADOS ESPECIALES === */
.no-programas {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-style: italic;
}

/* Card individual */
.programa-card.single {
    max-width: 400px;
    margin: 0 auto;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .programas-container {
        max-width: 100%;
    }
    
    .programas-grid {
        grid-template-columns: 1fr 1fr !important; /* 2 columnas en tablets */
        gap: 15px;
    }
    
    .filters-pills {
        gap: 0;
        flex-wrap: nowrap;
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto; /* Scroll horizontal también en tablets si es necesario */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .filters-pills::-webkit-scrollbar {
        display: none;
    }
    
    .filter-pill {
        font-family: "Söhne", Sans-serif !important;
        font-size: clamp(4px, 1vw, 14px) !important; /* Font-size adaptativo en tablets */
        font-weight: 400 !important;
        color: #000 !important;
        padding: 8px 16px; /* Padding normal */
        margin: 0;
        margin-right: 4px; /* Pequeña separación en tablets */
        flex-shrink: 0; /* No comprimir botones */
        text-align: center;
        /* Sin overflow hidden */
    }
    
    .filter-pill:last-child {
        margin-right: 0;
    }
    
    .programa-card {
        padding: 24px 18px 18px 18px;
        min-height: 280px; /* También más altura en tablets */
    }
    
    .programa-title {
        font-family: "Söhne", Sans-serif !important;
        font-size: 24px !important;
        font-weight: 500 !important;
        text-transform: capitalize;
    }
    
    /* Excerpt eliminado del responsive también */
}

@media (max-width: 480px) {
    .programas-container {
        max-width: 100%;
    }
    
    .programas-grid {
        grid-template-columns: 1fr !important; /* 1 columna en móviles pequeños */
    }
    
    .programa-card {
        padding: 20px 16px 16px 16px;
        min-height: 240px; /* Altura apropiada para móviles */
    }

    .filters-pills {
        justify-content: flex-start;
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto; /* Scroll horizontal */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE */
        padding-bottom: 5px; /* Espacio para el scroll */
    }
    
    /* Ocultar scrollbar en Webkit */
    .filters-pills::-webkit-scrollbar {
        display: none;
    }
    
    .filter-pill {
        /* Sin flex: ancho natural */
        text-align: center;
        font-size: 16px !important; /* Font-size fijo legible en móviles */
        font-weight: 400 !important;
        padding: 8px 16px; /* Padding cómodo */
        margin-right: 8px; /* Separación entre botones */
        min-width: auto;
        flex-shrink: 0; /* No se comprimen los botones */
        /* Sin overflow hidden */
    }
    
    /* Último botón sin margen derecho */
    .filter-pill:last-child {
        margin-right: 0;
    }
}

/* === ANIMACIONES === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.programa-card {
    animation: fadeInUp 0.3s ease forwards;
}

/* === ACCESIBILIDAD === */
.filter-pill:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

.more-info-link:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
    border-radius: 3px;
}

/* === UTILIDADES === */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}