@charset "utf-8";
/* CSS Document */

/* --- ESTRUCTURA DE PANELES EXTENSIBLES (ACCORDION) --- */
        .contenedor-paneles {
            margin: 2rem 0;
        }
        .panel-extensible {
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            margin-bottom: 1rem;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.02);
        }

/* Cabecera del panel (Botón que estira el contenido) */
        .panel-cabecera {
            width: 100%;
            background: #fff;
            color: var(--color-oscuro);
            padding: 1.2rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: none;
            outline: none;
            text-align: left;
            cursor: pointer;
            font-family: var(--fuente);
            transition: background 0.3s, color 0.3s;
        }
        .panel-cabecera:hover {
            background: #fff8f8;
            color: var(--color-principal);
        }

/* Título e hito dentro de la cabecera */
        .panel-titulo-bloque h3 {
            margin: 0;
            font-size: 1.25rem;
            display: inline-block;
        }
        .panel-cabecera .fecha-hito {
            display: inline-block;
            background: #eee;
            color: #555;
            font-size: 0.8rem;
            padding: 2px 8px;
            border-radius: 3px;
            font-weight: bold;
            margin-right: 15px;
        }

/* Sección inferior informativa */
		.info-gira {
   background: #fff8f8;
   border: 1px dashed var(--color-principal);
   padding-top: rem;
   padding-right: rem;
   padding-left: rem;
   padding-bottom: rem;
   border-radius: 6px;
   margin-top: 1rem;
   text-align: center;
}
		.info-gira h3 {
   margin-top: 10px;
}

/* Filtros o Categorías rápidas para el programador */
		.filtros-obras {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: -2.5rem;
    flex-wrap: wrap;
}
		.filtro-btn {
		    background: none;
    		border: 1px solid var(--color-principal);
    		color: var(--color-principal);
    		padding: 6px 16px;
   		 	border-radius: 20px;
    		font-weight: bold;
    		cursor: pointer;
    		transition: all 0.3s;
}
		.filtro-btn:hover, .filtro-btn.activo {
    background: var(--color-principal);
    color: #fff;
}

/* Título e hito dentro de la cabecera */
		.panel-titulo-bloque h3 {
    margin: 0;
    font-size: 1.25rem;
    display: inline-block;
}
		.panel-cabecera .fecha-hito {
    display: inline-block;
    background: #eee;
    color: #555;
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: bold;
    margin-right: 15px;
}

/* Icono de la flecha que gira */
		.panel-icono {
    font-size: 1rem;
    color: var(--color-principal);
    transition: transform 0.3s ease;
    font-weight: bold;
}

/* Contenido oculto que se extiende */
		.panel-contenido {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease;
    background: var(--color-claro);
    padding: 0 1.5rem;
}
		.panel-contenido-interior {
    padding: 1.5rem 0;
    border-top: 1px solid #eee;
}
		.panel-contenido p {
    margin: 0;
}

/* --- ESTADOS ACTIVOS (CUANDO SE ABRE EL PANEL) --- */
		.panel-extensible.activo .panel-cabecera {
    background: #fff2f2;
    color: var(--color-principal);
}
		.panel-extensible.activo .panel-icono {
    transform: rotate(180deg); /* La flecha apunta hacia arriba al abrir */
}